@thewaver/ss-components 0.0.1 → 0.0.2

package/dist/Fundamentals/SplitPane/SplitPane.js

@@ -0,0 +1,170 @@
+import { access, accessSignal } from "../../Utils/propUtils.js";
+import { splitPaneGutter, splitPanePane, splitPaneRoot } from "./SplitPane.css.js";
+import { Index, Show, createMemo, createSignal } from "solid-js";
+import { MathUtils } from "@thewaver/ss-utils";
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+//#region src/Fundamentals/SplitPane/SplitPane.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=group>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<button type=button role=separator aria-valuemin=0 aria-valuemax=100>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div>`);
+var DEFAULT_SPLIT_PANE_DIR = "row";
+var DEFAULT_SPLIT_PANE_GUTTER_SIZE = 8;
+var DEFAULT_SPLIT_PANE_KEY_STEP = .02;
+var NO_GUTTER_DRAGGING = -1;
+var PERCENT = 100;
+var SplitPane = (props) => {
+	const ratiosSignal = accessSignal(() => props.ratiosSignal);
+	const [getRootRef, setRootRef] = createSignal();
+	const [getDraggingIndex, setDraggingIndex] = createSignal(NO_GUTTER_DRAGGING);
+	const getDir = createMemo(() => access(props.dir) ?? DEFAULT_SPLIT_PANE_DIR);
+	const getGutterSize = createMemo(() => access(props.gutterSize) ?? DEFAULT_SPLIT_PANE_GUTTER_SIZE);
+	const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);
+	const getTotalGutterSize = createMemo(() => getGutterSize() * Math.max(access(props.panes).length - 1, 0));
+	const getRatios = createMemo(() => {
+		const panes = access(props.panes);
+		const stored = ratiosSignal[0]();
+		return panes.map((_, index) => stored[index] ?? 1 / panes.length);
+	});
+	const computeTrack = (index) => {
+		const pane = access(props.panes)[index];
+		const size = `calc(${getRatios()[index]} * (100% - ${getTotalGutterSize()}px))`;
+		if (pane.minPx === void 0 && pane.maxPx === void 0) return size;
+		return `clamp(${pane.minPx ?? 0}px, ${size}, ${pane.maxPx === void 0 ? "100%" : `${pane.maxPx}px`})`;
+	};
+	const getTemplate = createMemo(() => access(props.panes).map((_, index) => computeTrack(index)).join(` ${getGutterSize()}px `));
+	const getBoundary = (index) => getRatios().slice(0, index + 1).reduce((total, ratio) => total + ratio, 0);
+	const getAvailablePx = () => {
+		const root = getRootRef();
+		if (!root) return 0;
+		return (getDir() === "row" ? root.offsetWidth : root.offsetHeight) - getTotalGutterSize();
+	};
+	const computeRatioBounds = (index, available) => {
+		const pane = access(props.panes)[index];
+		if (available <= 0) return {
+			min: 0,
+			max: 1
+		};
+		return {
+			min: (pane.minPx ?? 0) / available,
+			max: pane.maxPx === void 0 ? 1 : pane.maxPx / available
+		};
+	};
+	const moveBoundary = (index, boundary) => {
+		const ratios = [...getRatios()];
+		const before = getBoundary(index) - ratios[index];
+		const span = ratios[index] + ratios[index + 1];
+		const available = getAvailablePx();
+		const start = computeRatioBounds(index, available);
+		const end = computeRatioBounds(index + 1, available);
+		const floor = Math.max(before, before + start.min, before + span - end.max);
+		const ceiling = Math.min(before + span, before + start.max, before + span - end.min);
+		const next = ceiling < floor ? floor : MathUtils.clamp(boundary, floor, ceiling);
+		ratios[index] = next - before;
+		ratios[index + 1] = before + span - next;
+		ratiosSignal[1](() => ratios);
+	};
+	const computePointerBoundary = (e, index) => {
+		const root = getRootRef();
+		if (!root) return void 0;
+		const rect = root.getBoundingClientRect();
+		const isRow = getDir() === "row";
+		const available = (isRow ? rect.width : rect.height) - getTotalGutterSize();
+		if (available <= 0) return void 0;
+		return ((isRow ? e.clientX - rect.left : e.clientY - rect.top) - getGutterSize() * (index + .5)) / available;
+	};
+	const handleGutterPointerDown = (e, index) => {
+		if (e.button !== 0 || getIsDisabled()) return;
+		e.preventDefault();
+		e.currentTarget.setPointerCapture(e.pointerId);
+		setDraggingIndex(index);
+	};
+	const handleGutterPointerMove = (e, index) => {
+		if (getDraggingIndex() !== index) return;
+		const boundary = computePointerBoundary(e, index);
+		if (boundary === void 0) return;
+		moveBoundary(index, boundary);
+	};
+	const handleGutterPointerUp = (e, index) => {
+		if (getDraggingIndex() !== index) return;
+		e.currentTarget.releasePointerCapture(e.pointerId);
+		setDraggingIndex(NO_GUTTER_DRAGGING);
+	};
+	const handleGutterKeyDown = (e, index) => {
+		if (getIsDisabled()) return;
+		const isRow = getDir() === "row";
+		const decreaseKey = isRow ? "ArrowLeft" : "ArrowUp";
+		const increaseKey = isRow ? "ArrowRight" : "ArrowDown";
+		if (e.key !== decreaseKey && e.key !== increaseKey) return;
+		e.preventDefault();
+		const step = access(props.keyStep) ?? DEFAULT_SPLIT_PANE_KEY_STEP;
+		moveBoundary(index, getBoundary(index) + (e.key === decreaseKey ? -step : step));
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		use(setRootRef, _el$);
+		className(_el$, splitPaneRoot);
+		insert(_el$, createComponent(Index, {
+			get each() {
+				return access(props.panes);
+			},
+			children: (getPane, index) => [createComponent(Show, {
+				when: index > 0,
+				get children() {
+					var _el$2 = _tmpl$2();
+					_el$2.$$keydown = (e) => handleGutterKeyDown(e, index - 1);
+					_el$2.addEventListener("pointercancel", (e) => handleGutterPointerUp(e, index - 1));
+					_el$2.$$pointerup = (e) => handleGutterPointerUp(e, index - 1);
+					_el$2.$$pointermove = (e) => handleGutterPointerMove(e, index - 1);
+					_el$2.$$pointerdown = (e) => handleGutterPointerDown(e, index - 1);
+					className(_el$2, splitPaneGutter);
+					insert(_el$2, () => props.renderGutter(() => ({
+						isDragging: getDraggingIndex() === index - 1,
+						isDisabled: getIsDisabled()
+					})));
+					effect((_p$) => {
+						var _v$3 = getIsDisabled() ? -1 : 0, _v$4 = getDir() === "row" ? "vertical" : "horizontal", _v$5 = getPane().gutterAriaLabel, _v$6 = getIsDisabled() || void 0, _v$7 = Math.round(getBoundary(index - 1) * PERCENT);
+						_v$3 !== _p$.e && setAttribute(_el$2, "tabindex", _p$.e = _v$3);
+						_v$4 !== _p$.t && setAttribute(_el$2, "aria-orientation", _p$.t = _v$4);
+						_v$5 !== _p$.a && setAttribute(_el$2, "aria-label", _p$.a = _v$5);
+						_v$6 !== _p$.o && setAttribute(_el$2, "aria-disabled", _p$.o = _v$6);
+						_v$7 !== _p$.i && setAttribute(_el$2, "aria-valuenow", _p$.i = _v$7);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0
+					});
+					return _el$2;
+				}
+			}), (() => {
+				var _el$3 = _tmpl$3();
+				className(_el$3, splitPanePane);
+				insert(_el$3, () => props.renderPane(getPane, index));
+				effect(() => setAttribute(_el$3, "id", getPane().id));
+				return _el$3;
+			})()]
+		}));
+		effect((_p$) => {
+			var _v$ = { [getDir() === "row" ? "grid-template-columns" : "grid-template-rows"]: getTemplate() }, _v$2 = access(props.ariaLabel);
+			_p$.e = style(_el$, _v$, _p$.e);
+			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents([
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"keydown"
+]);
+//#endregion
+export { SplitPane };
+
+//# sourceMappingURL=SplitPane.js.map

package/dist/Fundamentals/SplitPane/SplitPane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.js","names":["Index","Show","createMemo","createSignal","MathUtils","access","accessSignal","SplitPaneDir","SplitPaneProps","styles","DEFAULT_SPLIT_PANE_DIR","DEFAULT_SPLIT_PANE_GUTTER_SIZE","DEFAULT_SPLIT_PANE_KEY_STEP","NO_GUTTER_DRAGGING","PERCENT","SplitPane","props","ratiosSignal","getRootRef","setRootRef","HTMLElement","getDraggingIndex","setDraggingIndex","getDir","dir","getGutterSize","gutterSize","getIsDisabled","isDisabled","getTotalGutterSize","Math","max","panes","length","getRatios","stored","map","_","index","computeTrack","pane","size","minPx","undefined","maxPx","getTemplate","join","getBoundary","slice","reduce","total","ratio","getAvailablePx","root","offsetWidth","offsetHeight","computeRatioBounds","available","min","moveBoundary","boundary","ratios","before","span","start","end","floor","ceiling","next","clamp","computePointerBoundary","e","PointerEvent","rect","getBoundingClientRect","isRow","width","height","offset","clientX","left","clientY","top","handleGutterPointerDown","button","preventDefault","currentTarget","setPointerCapture","pointerId","handleGutterPointerMove","handleGutterPointerUp","releasePointerCapture","handleGutterKeyDown","KeyboardEvent","decreaseKey","increaseKey","key","step","keyStep","_el$","_tmpl$","_$use","_$className","splitPaneRoot","_$insert","_$createComponent","each","children","getPane","when","_el$2","_tmpl$2","$$keydown","addEventListener","$$pointerup","$$pointermove","$$pointerdown","splitPaneGutter","renderGutter","isDragging","_$effect","_p$","_v$3","_v$4","_v$5","gutterAriaLabel","_v$6","_v$7","round","_$setAttribute","t","a","o","i","_el$3","_tmpl$3","splitPanePane","renderPane","id","_v$","_v$2","ariaLabel","_$style","_$delegateEvents"],"sources":["../../../src/Fundamentals/SplitPane/SplitPane.tsx"],"sourcesContent":["import { Index, Show, createMemo, createSignal } from \"solid-js\";\r\n\r\nimport { MathUtils } from \"@thewaver/ss-utils\";\r\n\r\nimport { access, accessSignal } from \"../../Utils/propUtils\";\r\nimport type { SplitPaneDir, SplitPaneProps } from \"./SplitPane.types\";\r\n\r\nimport * as styles from \"./SplitPane.css\";\r\n\r\nconst DEFAULT_SPLIT_PANE_DIR: SplitPaneDir = \"row\";\r\nconst DEFAULT_SPLIT_PANE_GUTTER_SIZE = 8;\r\nconst DEFAULT_SPLIT_PANE_KEY_STEP = 0.02;\r\nconst NO_GUTTER_DRAGGING = -1;\r\nconst PERCENT = 100;\r\n\r\nexport const SplitPane = (props: SplitPaneProps) => {\r\n    const ratiosSignal = accessSignal(() => props.ratiosSignal);\r\n\r\n    const [getRootRef, setRootRef] = createSignal<HTMLElement>();\r\n    const [getDraggingIndex, setDraggingIndex] = createSignal(NO_GUTTER_DRAGGING);\r\n\r\n    const getDir = createMemo(() => access(props.dir) ?? DEFAULT_SPLIT_PANE_DIR);\r\n\r\n    const getGutterSize = createMemo(() => access(props.gutterSize) ?? DEFAULT_SPLIT_PANE_GUTTER_SIZE);\r\n\r\n    const getIsDisabled = createMemo(() => access(props.isDisabled) ?? false);\r\n\r\n    const getTotalGutterSize = createMemo(() => getGutterSize() * Math.max(access(props.panes).length - 1, 0));\r\n\r\n    const getRatios = createMemo(() => {\r\n        const panes = access(props.panes);\r\n        const stored = ratiosSignal[0]();\r\n\r\n        return panes.map((_, index) => stored[index] ?? 1 / panes.length);\r\n    });\r\n\r\n    const computeTrack = (index: number) => {\r\n        const pane = access(props.panes)[index];\r\n        const size = `calc(${getRatios()[index]} * (100% - ${getTotalGutterSize()}px))`;\r\n\r\n        if (pane.minPx === undefined && pane.maxPx === undefined) return size;\r\n\r\n        return `clamp(${pane.minPx ?? 0}px, ${size}, ${pane.maxPx === undefined ? \"100%\" : `${pane.maxPx}px`})`;\r\n    };\r\n\r\n    const getTemplate = createMemo(() =>\r\n        access(props.panes)\r\n            .map((_, index) => computeTrack(index))\r\n            .join(` ${getGutterSize()}px `),\r\n    );\r\n\r\n    const getBoundary = (index: number) =>\r\n        getRatios()\r\n            .slice(0, index + 1)\r\n            .reduce((total, ratio) => total + ratio, 0);\r\n\r\n    const getAvailablePx = () => {\r\n        const root = getRootRef();\r\n\r\n        if (!root) return 0;\r\n\r\n        return (getDir() === \"row\" ? root.offsetWidth : root.offsetHeight) - getTotalGutterSize();\r\n    };\r\n\r\n    const computeRatioBounds = (index: number, available: number) => {\r\n        const pane = access(props.panes)[index];\r\n\r\n        if (available <= 0) return { min: 0, max: 1 };\r\n\r\n        return {\r\n            min: (pane.minPx ?? 0) / available,\r\n            max: pane.maxPx === undefined ? 1 : pane.maxPx / available,\r\n        };\r\n    };\r\n\r\n    const moveBoundary = (index: number, boundary: number) => {\r\n        const ratios = [...getRatios()];\r\n        const before = getBoundary(index) - ratios[index];\r\n        const span = ratios[index] + ratios[index + 1];\r\n        const available = getAvailablePx();\r\n        const start = computeRatioBounds(index, available);\r\n        const end = computeRatioBounds(index + 1, available);\r\n        const floor = Math.max(before, before + start.min, before + span - end.max);\r\n        const ceiling = Math.min(before + span, before + start.max, before + span - end.min);\r\n        const next = ceiling < floor ? floor : MathUtils.clamp(boundary, floor, ceiling);\r\n\r\n        ratios[index] = next - before;\r\n        ratios[index + 1] = before + span - next;\r\n\r\n        ratiosSignal[1](() => ratios);\r\n    };\r\n\r\n    const computePointerBoundary = (e: PointerEvent, index: number) => {\r\n        const root = getRootRef();\r\n\r\n        if (!root) return undefined;\r\n\r\n        const rect = root.getBoundingClientRect();\r\n        const isRow = getDir() === \"row\";\r\n        const total = isRow ? rect.width : rect.height;\r\n        const available = total - getTotalGutterSize();\r\n\r\n        if (available <= 0) return undefined;\r\n\r\n        const offset = isRow ? e.clientX - rect.left : e.clientY - rect.top;\r\n\r\n        return (offset - getGutterSize() * (index + 0.5)) / available;\r\n    };\r\n\r\n    const handleGutterPointerDown = (e: PointerEvent, index: number) => {\r\n        if (e.button !== 0 || getIsDisabled()) return;\r\n\r\n        e.preventDefault();\r\n\r\n        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\r\n        setDraggingIndex(index);\r\n    };\r\n\r\n    const handleGutterPointerMove = (e: PointerEvent, index: number) => {\r\n        if (getDraggingIndex() !== index) return;\r\n\r\n        const boundary = computePointerBoundary(e, index);\r\n\r\n        if (boundary === undefined) return;\r\n\r\n        moveBoundary(index, boundary);\r\n    };\r\n\r\n    const handleGutterPointerUp = (e: PointerEvent, index: number) => {\r\n        if (getDraggingIndex() !== index) return;\r\n\r\n        (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);\r\n        setDraggingIndex(NO_GUTTER_DRAGGING);\r\n    };\r\n\r\n    const handleGutterKeyDown = (e: KeyboardEvent, index: number) => {\r\n        if (getIsDisabled()) return;\r\n\r\n        const isRow = getDir() === \"row\";\r\n        const decreaseKey = isRow ? \"ArrowLeft\" : \"ArrowUp\";\r\n        const increaseKey = isRow ? \"ArrowRight\" : \"ArrowDown\";\r\n\r\n        if (e.key !== decreaseKey && e.key !== increaseKey) return;\r\n\r\n        e.preventDefault();\r\n\r\n        const step = access(props.keyStep) ?? DEFAULT_SPLIT_PANE_KEY_STEP;\r\n\r\n        moveBoundary(index, getBoundary(index) + (e.key === decreaseKey ? -step : step));\r\n    };\r\n\r\n    return (\r\n        <div\r\n            ref={setRootRef}\r\n            class={styles.splitPaneRoot}\r\n            style={{\r\n                [getDir() === \"row\" ? \"grid-template-columns\" : \"grid-template-rows\"]: getTemplate(),\r\n            }}\r\n            role=\"group\"\r\n            aria-label={access(props.ariaLabel)}\r\n        >\r\n            <Index each={access(props.panes)}>\r\n                {(getPane, index) => (\r\n                    <>\r\n                        <Show when={index > 0}>\r\n                            <button\r\n                                type=\"button\"\r\n                                class={styles.splitPaneGutter}\r\n                                role=\"separator\"\r\n                                tabindex={getIsDisabled() ? -1 : 0}\r\n                                aria-orientation={getDir() === \"row\" ? \"vertical\" : \"horizontal\"}\r\n                                aria-label={getPane().gutterAriaLabel}\r\n                                aria-disabled={getIsDisabled() || undefined}\r\n                                aria-valuenow={Math.round(getBoundary(index - 1) * PERCENT)}\r\n                                aria-valuemin={0}\r\n                                aria-valuemax={PERCENT}\r\n                                onPointerDown={(e) => handleGutterPointerDown(e, index - 1)}\r\n                                onPointerMove={(e) => handleGutterPointerMove(e, index - 1)}\r\n                                onPointerUp={(e) => handleGutterPointerUp(e, index - 1)}\r\n                                onPointerCancel={(e) => handleGutterPointerUp(e, index - 1)}\r\n                                onKeyDown={(e) => handleGutterKeyDown(e, index - 1)}\r\n                            >\r\n                                {props.renderGutter(() => ({\r\n                                    isDragging: getDraggingIndex() === index - 1,\r\n                                    isDisabled: getIsDisabled(),\r\n                                }))}\r\n                            </button>\r\n                        </Show>\r\n\r\n                        <div id={getPane().id} class={styles.splitPanePane}>\r\n                            {props.renderPane(getPane, index)}\r\n                        </div>\r\n                    </>\r\n                )}\r\n            </Index>\r\n        </div>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Spotlight/Spotlight.css.js

@@ -0,0 +1,9 @@
+/* empty css                             */
+var spotlightOverlay = "z8b91o0";
+var spotlightBlocker = "z8b91o1";
+var spotlightDecoration = "z8b91o2";
+var spotlightPopup = "z8b91o3";
+//#endregion
+export { spotlightBlocker, spotlightDecoration, spotlightOverlay, spotlightPopup };
+
+//# sourceMappingURL=Spotlight.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spotlight.css.js","names":[],"sources":["../../../src/Fundamentals/Spotlight/Spotlight.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\r\n\r\nexport const SPOTLIGHT_Z_INDEX = 10;\r\n\r\nexport const spotlightOverlay = style({\r\n    position: \"absolute\",\r\n    inset: 0,\r\n    display: \"grid\",\r\n    zIndex: SPOTLIGHT_Z_INDEX,\r\n    pointerEvents: \"none\",\r\n});\r\n\r\nexport const spotlightBlocker = style({\r\n    position: \"absolute\",\r\n    inset: 0,\r\n    zIndex: SPOTLIGHT_Z_INDEX,\r\n    pointerEvents: \"all\",\r\n});\r\n\r\nexport const spotlightDecoration = style({\r\n    position: \"absolute\",\r\n    zIndex: SPOTLIGHT_Z_INDEX,\r\n    pointerEvents: \"none\",\r\n});\r\n\r\nexport const spotlightPopup = style({\r\n    position: \"absolute\",\r\n    top: 0,\r\n    left: 0,\r\n    zIndex: SPOTLIGHT_Z_INDEX,\r\n    pointerEvents: \"all\",\r\n});\r\n"],"mappings":""}

package/dist/Fundamentals/Spotlight/Spotlight.js

@@ -0,0 +1,235 @@
+import { useViewportContext } from "../../Exotics/Viewport/Viewport.context.js";
+import { ElementObserver } from "../../Abstracts/ElementObserver/ElementObserver.js";
+import { Elevation } from "../../Abstracts/Elevation/Elevation.js";
+import { Anchor } from "../../Abstracts/Anchor/Anchor.js";
+import { access } from "../../Utils/propUtils.js";
+import { LiveAnnouncer } from "../../Abstracts/LiveAnnouncer/LiveAnnouncer.js";
+import { CutoutUtils } from "../../Abstracts/Cutout/Cutout.utils.js";
+import { ElementFader } from "../../Abstracts/ElementFader/ElementFader.js";
+import { FocusManager } from "../../Abstracts/FocusManager/FocusManager.js";
+import { SpotlightUtils } from "./Spotlight.utils.js";
+import { spotlightBlocker, spotlightDecoration, spotlightOverlay, spotlightPopup } from "./Spotlight.css.js";
+import { Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { Rect } from "@thewaver/ss-utils";
+import { Portal, className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+//#region src/Fundamentals/Spotlight/Spotlight.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div tabindex=-1 role=dialog aria-modal=true>`);
+var DEFAULT_SPOTLIGHT_TRANSITION_DURATION_MS = 200;
+var DEFAULT_SPOTLIGHT_PADDING = 0;
+var DEFAULT_SPOTLIGHT_POPUP_PLACEMENT = {
+	x: "center",
+	y: "bottom-out"
+};
+var DEFAULT_SPOTLIGHT_POPUP_OFFSET = {
+	x: 0,
+	y: 8
+};
+var MODIFIER_KEYS = /* @__PURE__ */ new Set([
+	"Shift",
+	"Control",
+	"Alt",
+	"Meta",
+	"CapsLock",
+	"NumLock",
+	"ScrollLock",
+	"AltGraph"
+]);
+var Spotlight = (props) => {
+	const viewportContext = useViewportContext();
+	const [getElementRect, setElementRect] = createSignal(void 0, { equals: Rect.isSame });
+	const [getPortalRef, setPortalRef] = createSignal();
+	const [getPopupRef, setPopupRef] = createSignal();
+	const getTransitionDurationMs = createMemo(() => access(props.transitionDurationMs) ?? DEFAULT_SPOTLIGHT_TRANSITION_DURATION_MS);
+	const getPadding = createMemo(() => access(props.padding) ?? DEFAULT_SPOTLIGHT_PADDING);
+	const { getIsVisible, getTransitionTarget } = ElementFader.createFader(() => props.visibilitySignal[0](), {
+		getTransitionDurationMs,
+		onShow: props.onShow,
+		onHide: props.onHide
+	});
+	const getHasPopup = createMemo(() => access(props.mode) === "guide" && props.renderPopup !== void 0);
+	ElementObserver.createViewportRectObserver(() => access(props.elementRef), getIsVisible, {
+		setElementRect,
+		getPadding
+	});
+	Elevation.createElevation(() => access(props.elementRef), getIsVisible, () => 10);
+	createEffect(() => {
+		const element = access(props.elementRef);
+		if (!getIsVisible() || !element) return;
+		element.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	});
+	const { getPlacement, getPosition, setContentRef } = Anchor.createPortalPosition(() => access(props.elementRef), () => getIsVisible() && getHasPopup(), {
+		getPlacement: () => access(props.popupPlacement) ?? DEFAULT_SPOTLIGHT_POPUP_PLACEMENT,
+		getOffset: () => access(props.popupOffset) ?? DEFAULT_SPOTLIGHT_POPUP_OFFSET,
+		getAnchorRect: getElementRect
+	});
+	const getMaskStyle = createMemo(() => {
+		const rect = getElementRect();
+		return rect ? CutoutUtils.getMaskStyle(rect) : {};
+	});
+	const getClipPath = createMemo(() => {
+		const rect = getElementRect();
+		return rect ? SpotlightUtils.getHoleClipPath(rect) : void 0;
+	});
+	const dismiss = () => {
+		props.visibilitySignal[1](false);
+	};
+	const handleKeyDown = (e) => {
+		if (!getIsVisible()) return;
+		if (e.key === "Escape") {
+			dismiss();
+			return;
+		}
+		if (access(props.mode) !== "hint") return;
+		if (MODIFIER_KEYS.has(e.key)) return;
+		dismiss();
+	};
+	createEffect(() => {
+		onCleanup(() => {
+			document.removeEventListener("keydown", handleKeyDown);
+		});
+		if (!getIsVisible()) return;
+		document.addEventListener("keydown", handleKeyDown);
+	});
+	createEffect(() => {
+		const element = access(props.elementRef);
+		if (!getIsVisible() || access(props.mode) !== "prompt" || !element) return;
+		const onFocusIn = (e) => {
+			const target = e.target;
+			if (target && (element === target || element.contains(target))) return;
+			element.focus({ preventScroll: true });
+		};
+		element.focus({ preventScroll: true });
+		document.addEventListener("focusin", onFocusIn);
+		onCleanup(() => {
+			document.removeEventListener("focusin", onFocusIn);
+		});
+	});
+	createEffect(() => {
+		const portal = getPortalRef();
+		if (!getIsVisible() || access(props.mode) !== "guide" || !portal) return;
+		const sealed = [];
+		let node = portal;
+		while (node && node !== document.body) {
+			const parent = node.parentElement;
+			if (!parent) break;
+			for (const child of parent.children) {
+				if (child === node || !(child instanceof HTMLElement) || child.inert) continue;
+				child.inert = true;
+				sealed.push(child);
+			}
+			node = parent;
+		}
+		onCleanup(() => {
+			for (const sibling of sealed) sibling.inert = false;
+		});
+	});
+	onMount(() => {
+		if (props.announcement === void 0) return;
+		LiveAnnouncer.reserve("polite");
+	});
+	createEffect((previous) => {
+		const announcement = access(props.announcement);
+		if (!getIsVisible()) return previous;
+		if (previous !== void 0 && announcement !== void 0 && announcement !== previous) LiveAnnouncer.announce(announcement);
+		return announcement;
+	});
+	const [getHasPlaced, setHasPlaced] = createSignal(false);
+	createEffect(() => {
+		if (!getIsVisible() || !getHasPopup()) {
+			setHasPlaced(false);
+			return;
+		}
+		if (getPosition()) setHasPlaced(true);
+	});
+	FocusManager.autoFocus(getPopupRef, getHasPlaced);
+	return createComponent(Show, {
+		get when() {
+			return memo(() => !!getIsVisible())() && getElementRect();
+		},
+		get children() {
+			return createComponent(Portal, {
+				ref: setPortalRef,
+				get mount() {
+					return viewportContext.getPortalRef();
+				},
+				get children() {
+					return [
+						(() => {
+							var _el$ = _tmpl$();
+							className(_el$, spotlightOverlay);
+							insert(_el$, () => props.renderOverlay(getTransitionTarget, getTransitionDurationMs, getMaskStyle));
+							return _el$;
+						})(),
+						(() => {
+							var _el$2 = _tmpl$();
+							_el$2.$$click = () => access(props.mode) === "hint" && dismiss();
+							className(_el$2, spotlightBlocker);
+							effect((_$p) => setStyleProperty(_el$2, "clip-path", getClipPath()));
+							return _el$2;
+						})(),
+						createComponent(Show, {
+							get when() {
+								return memo(() => !!props.renderHighlight)() && getElementRect();
+							},
+							children: (getRect) => (() => {
+								var _el$4 = _tmpl$();
+								className(_el$4, spotlightDecoration);
+								insert(_el$4, () => props.renderHighlight?.(getTransitionTarget, getTransitionDurationMs));
+								effect((_p$) => {
+									var _v$4 = `${getRect().y}px`, _v$5 = `${getRect().x}px`, _v$6 = `${getRect().width}px`, _v$7 = `${getRect().height}px`;
+									_v$4 !== _p$.e && setStyleProperty(_el$4, "top", _p$.e = _v$4);
+									_v$5 !== _p$.t && setStyleProperty(_el$4, "left", _p$.t = _v$5);
+									_v$6 !== _p$.a && setStyleProperty(_el$4, "width", _p$.a = _v$6);
+									_v$7 !== _p$.o && setStyleProperty(_el$4, "height", _p$.o = _v$7);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0,
+									o: void 0
+								});
+								return _el$4;
+							})()
+						}),
+						createComponent(Show, {
+							get when() {
+								return getHasPopup();
+							},
+							get children() {
+								var _el$3 = _tmpl$2();
+								_el$3.$$keydown = (e) => FocusManager.focusTrapKeyDown(e, getPopupRef());
+								use((element) => {
+									setPopupRef(element);
+									setContentRef(element);
+								}, _el$3);
+								className(_el$3, spotlightPopup);
+								insert(_el$3, () => props.renderPopup?.(getTransitionTarget, getTransitionDurationMs, getPlacement));
+								effect((_p$) => {
+									var _v$ = getPosition() ? "visible" : "hidden", _v$2 = `translate(${getPosition()?.x ?? 0}px, ${getPosition()?.y ?? 0}px)`, _v$3 = access(props.ariaLabel);
+									_v$ !== _p$.e && setStyleProperty(_el$3, "visibility", _p$.e = _v$);
+									_v$2 !== _p$.t && setStyleProperty(_el$3, "transform", _p$.t = _v$2);
+									_v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0
+								});
+								return _el$3;
+							}
+						})
+					];
+				}
+			});
+		}
+	});
+};
+delegateEvents(["click", "keydown"]);
+//#endregion
+export { Spotlight };
+
+//# sourceMappingURL=Spotlight.js.map

package/dist/Fundamentals/Spotlight/Spotlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spotlight.js","names":["Show","createEffect","createMemo","createSignal","onCleanup","onMount","JSX","Portal","Rect","Anchor","AnchorPlacement","CutoutUtils","ElementFader","ElementObserver","Elevation","FocusManager","LiveAnnouncer","useViewportContext","access","SpotlightProps","SpotlightUtils","styles","DEFAULT_SPOTLIGHT_TRANSITION_DURATION_MS","DEFAULT_SPOTLIGHT_PADDING","DEFAULT_SPOTLIGHT_POPUP_PLACEMENT","x","y","DEFAULT_SPOTLIGHT_POPUP_OFFSET","MODIFIER_KEYS","Set","Spotlight","props","viewportContext","getElementRect","setElementRect","undefined","equals","isSame","getPortalRef","setPortalRef","HTMLElement","getPopupRef","setPopupRef","getTransitionDurationMs","transitionDurationMs","getPadding","padding","getIsVisible","getTransitionTarget","createFader","visibilitySignal","onShow","onHide","getHasPopup","mode","renderPopup","createViewportRectObserver","elementRef","createElevation","SPOTLIGHT_Z_INDEX","element","scrollIntoView","block","inline","getPlacement","getPosition","setContentRef","createPortalPosition","popupPlacement","getOffset","popupOffset","getAnchorRect","getMaskStyle","CSSProperties","rect","getClipPath","getHoleClipPath","dismiss","handleKeyDown","e","KeyboardEvent","key","has","document","removeEventListener","addEventListener","onFocusIn","FocusEvent","target","Node","contains","focus","preventScroll","portal","sealed","node","body","parent","parentElement","child","children","inert","push","sibling","announcement","reserve","previous","announce","getHasPlaced","setHasPlaced","autoFocus","_$createComponent","when","_$memo","ref","mount","_el$","_tmpl$","_$className","spotlightOverlay","_$insert","renderOverlay","_el$2","$$click","spotlightBlocker","_$effect","_$p","_$setStyleProperty","renderHighlight","getRect","_el$4","spotlightDecoration","_p$","_v$4","_v$5","_v$6","width","_v$7","height","t","a","o","_el$3","_tmpl$2","$$keydown","focusTrapKeyDown","_$use","spotlightPopup","_v$","_v$2","_v$3","ariaLabel","_$setAttribute","_$delegateEvents"],"sources":["../../../src/Fundamentals/Spotlight/Spotlight.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, onCleanup, onMount } from \"solid-js\";\r\nimport type { JSX } from \"solid-js\";\r\nimport { Portal } from \"solid-js/web\";\r\n\r\nimport { Rect } from \"@thewaver/ss-utils\";\r\n\r\nimport { Anchor } from \"../../Abstracts/Anchor/Anchor\";\r\nimport type { AnchorPlacement } from \"../../Abstracts/Anchor/Anchor.types\";\r\nimport { CutoutUtils } from \"../../Abstracts/Cutout/Cutout.utils\";\r\nimport { ElementFader } from \"../../Abstracts/ElementFader/ElementFader\";\r\nimport { ElementObserver } from \"../../Abstracts/ElementObserver/ElementObserver\";\r\nimport { Elevation } from \"../../Abstracts/Elevation/Elevation\";\r\nimport { FocusManager } from \"../../Abstracts/FocusManager/FocusManager\";\r\nimport { LiveAnnouncer } from \"../../Abstracts/LiveAnnouncer/LiveAnnouncer\";\r\nimport { useViewportContext } from \"../../Exotics/Viewport/Viewport.context\";\r\nimport { access } from \"../../Utils/propUtils\";\r\nimport type { SpotlightProps } from \"./Spotlight.types\";\r\nimport { SpotlightUtils } from \"./Spotlight.utils\";\r\n\r\nimport * as styles from \"./Spotlight.css\";\r\n\r\nconst DEFAULT_SPOTLIGHT_TRANSITION_DURATION_MS = 200;\r\nconst DEFAULT_SPOTLIGHT_PADDING = 0;\r\nconst DEFAULT_SPOTLIGHT_POPUP_PLACEMENT: AnchorPlacement = { x: \"center\", y: \"bottom-out\" };\r\nconst DEFAULT_SPOTLIGHT_POPUP_OFFSET = { x: 0, y: 8 };\r\n\r\nconst MODIFIER_KEYS = new Set([\"Shift\", \"Control\", \"Alt\", \"Meta\", \"CapsLock\", \"NumLock\", \"ScrollLock\", \"AltGraph\"]);\r\n\r\nexport const Spotlight = (props: SpotlightProps) => {\r\n    const viewportContext = useViewportContext();\r\n\r\n    const [getElementRect, setElementRect] = createSignal<Rect | undefined>(undefined, {\r\n        equals: Rect.isSame,\r\n    });\r\n    const [getPortalRef, setPortalRef] = createSignal<HTMLElement>();\r\n    const [getPopupRef, setPopupRef] = createSignal<HTMLElement>();\r\n\r\n    const getTransitionDurationMs = createMemo(\r\n        () => access(props.transitionDurationMs) ?? DEFAULT_SPOTLIGHT_TRANSITION_DURATION_MS,\r\n    );\r\n\r\n    const getPadding = createMemo(() => access(props.padding) ?? DEFAULT_SPOTLIGHT_PADDING);\r\n\r\n    const { getIsVisible, getTransitionTarget } = ElementFader.createFader(() => props.visibilitySignal[0](), {\r\n        getTransitionDurationMs,\r\n        onShow: props.onShow,\r\n        onHide: props.onHide,\r\n    });\r\n\r\n    const getHasPopup = createMemo(() => access(props.mode) === \"guide\" && props.renderPopup !== undefined);\r\n\r\n    ElementObserver.createViewportRectObserver(() => access(props.elementRef), getIsVisible, {\r\n        setElementRect,\r\n        getPadding,\r\n    });\r\n\r\n    Elevation.createElevation(\r\n        () => access(props.elementRef),\r\n        getIsVisible,\r\n        () => styles.SPOTLIGHT_Z_INDEX,\r\n    );\r\n\r\n    createEffect(() => {\r\n        const element = access(props.elementRef);\r\n\r\n        if (!getIsVisible() || !element) return;\r\n\r\n        element.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\r\n    });\r\n\r\n    const { getPlacement, getPosition, setContentRef } = Anchor.createPortalPosition(\r\n        () => access(props.elementRef),\r\n        () => getIsVisible() && getHasPopup(),\r\n        {\r\n            getPlacement: () => access(props.popupPlacement) ?? DEFAULT_SPOTLIGHT_POPUP_PLACEMENT,\r\n            getOffset: () => access(props.popupOffset) ?? DEFAULT_SPOTLIGHT_POPUP_OFFSET,\r\n            getAnchorRect: getElementRect,\r\n        },\r\n    );\r\n\r\n    const getMaskStyle = createMemo<JSX.CSSProperties>(() => {\r\n        const rect = getElementRect();\r\n\r\n        return rect ? CutoutUtils.getMaskStyle(rect) : {};\r\n    });\r\n\r\n    const getClipPath = createMemo(() => {\r\n        const rect = getElementRect();\r\n\r\n        return rect ? SpotlightUtils.getHoleClipPath(rect) : undefined;\r\n    });\r\n\r\n    const dismiss = () => {\r\n        props.visibilitySignal[1](false);\r\n    };\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n        if (!getIsVisible()) return;\r\n\r\n        if (e.key === \"Escape\") {\r\n            dismiss();\r\n\r\n            return;\r\n        }\r\n\r\n        if (access(props.mode) !== \"hint\") return;\r\n        if (MODIFIER_KEYS.has(e.key)) return;\r\n\r\n        dismiss();\r\n    };\r\n\r\n    createEffect(() => {\r\n        onCleanup(() => {\r\n            document.removeEventListener(\"keydown\", handleKeyDown);\r\n        });\r\n\r\n        if (!getIsVisible()) return;\r\n\r\n        document.addEventListener(\"keydown\", handleKeyDown);\r\n    });\r\n\r\n    createEffect(() => {\r\n        const element = access(props.elementRef);\r\n\r\n        if (!getIsVisible() || access(props.mode) !== \"prompt\" || !element) return;\r\n\r\n        const onFocusIn = (e: FocusEvent) => {\r\n            const target = e.target as Node | null;\r\n\r\n            if (target && (element === target || element.contains(target))) return;\r\n\r\n            element.focus({ preventScroll: true });\r\n        };\r\n\r\n        element.focus({ preventScroll: true });\r\n        document.addEventListener(\"focusin\", onFocusIn);\r\n\r\n        onCleanup(() => {\r\n            document.removeEventListener(\"focusin\", onFocusIn);\r\n        });\r\n    });\r\n\r\n    createEffect(() => {\r\n        const portal = getPortalRef();\r\n\r\n        if (!getIsVisible() || access(props.mode) !== \"guide\" || !portal) return;\r\n\r\n        const sealed: HTMLElement[] = [];\r\n\r\n        let node: HTMLElement | null = portal;\r\n\r\n        while (node && node !== document.body) {\r\n            const parent: HTMLElement | null = node.parentElement;\r\n\r\n            if (!parent) break;\r\n\r\n            for (const child of parent.children) {\r\n                if (child === node || !(child instanceof HTMLElement) || child.inert) continue;\r\n\r\n                child.inert = true;\r\n                sealed.push(child);\r\n            }\r\n\r\n            node = parent;\r\n        }\r\n\r\n        onCleanup(() => {\r\n            for (const sibling of sealed) sibling.inert = false;\r\n        });\r\n    });\r\n\r\n    onMount(() => {\r\n        if (props.announcement === undefined) return;\r\n\r\n        LiveAnnouncer.reserve(\"polite\");\r\n    });\r\n\r\n    createEffect<string | undefined>((previous) => {\r\n        const announcement = access(props.announcement);\r\n\r\n        if (!getIsVisible()) return previous;\r\n        if (previous !== undefined && announcement !== undefined && announcement !== previous) {\r\n            LiveAnnouncer.announce(announcement);\r\n        }\r\n\r\n        return announcement;\r\n    });\r\n\r\n    const [getHasPlaced, setHasPlaced] = createSignal(false);\r\n\r\n    createEffect(() => {\r\n        if (!getIsVisible() || !getHasPopup()) {\r\n            setHasPlaced(false);\r\n\r\n            return;\r\n        }\r\n\r\n        if (getPosition()) setHasPlaced(true);\r\n    });\r\n\r\n    FocusManager.autoFocus(getPopupRef, getHasPlaced);\r\n\r\n    return (\r\n        <Show when={getIsVisible() && getElementRect()}>\r\n            <Portal ref={setPortalRef} mount={viewportContext.getPortalRef()}>\r\n                <div class={styles.spotlightOverlay}>\r\n                    {props.renderOverlay(getTransitionTarget, getTransitionDurationMs, getMaskStyle)}\r\n                </div>\r\n\r\n                <div\r\n                    class={styles.spotlightBlocker}\r\n                    style={{ \"clip-path\": getClipPath() }}\r\n                    onClick={() => access(props.mode) === \"hint\" && dismiss()}\r\n                />\r\n\r\n                <Show when={props.renderHighlight && getElementRect()}>\r\n                    {(getRect) => (\r\n                        <div\r\n                            class={styles.spotlightDecoration}\r\n                            style={{\r\n                                top: `${getRect().y}px`,\r\n                                left: `${getRect().x}px`,\r\n                                width: `${getRect().width}px`,\r\n                                height: `${getRect().height}px`,\r\n                            }}\r\n                        >\r\n                            {props.renderHighlight?.(getTransitionTarget, getTransitionDurationMs)}\r\n                        </div>\r\n                    )}\r\n                </Show>\r\n\r\n                <Show when={getHasPopup()}>\r\n                    <div\r\n                        ref={(element) => {\r\n                            setPopupRef(element);\r\n                            setContentRef(element);\r\n                        }}\r\n                        class={styles.spotlightPopup}\r\n                        style={{\r\n                            visibility: getPosition() ? \"visible\" : \"hidden\",\r\n                            transform: `translate(${getPosition()?.x ?? 0}px, ${getPosition()?.y ?? 0}px)`,\r\n                        }}\r\n                        tabIndex={-1}\r\n                        role=\"dialog\"\r\n                        aria-modal=\"true\"\r\n                        aria-label={access(props.ariaLabel)}\r\n                        onKeyDown={(e) => FocusManager.focusTrapKeyDown(e, getPopupRef())}\r\n                    >\r\n                        {props.renderPopup?.(getTransitionTarget, getTransitionDurationMs, getPlacement)}\r\n                    </div>\r\n                </Show>\r\n            </Portal>\r\n        </Show>\r\n    );\r\n};\r\n"],"mappings":"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"}

package/dist/Fundamentals/Spotlight/Spotlight.utils.js

@@ -0,0 +1,19 @@
+//#region src/Fundamentals/Spotlight/Spotlight.utils.ts
+var SpotlightUtils;
+(function(_SpotlightUtils) {
+	_SpotlightUtils.getHoleClipPath = (rect) => {
+		const right = rect.x + rect.width;
+		const bottom = rect.y + rect.height;
+		return `polygon(evenodd, 0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${[
+			`${rect.x}px ${rect.y}px`,
+			`${right}px ${rect.y}px`,
+			`${right}px ${bottom}px`,
+			`${rect.x}px ${bottom}px`,
+			`${rect.x}px ${rect.y}px`
+		].join(", ")}, 0 0)`;
+	};
+})(SpotlightUtils || (SpotlightUtils = {}));
+//#endregion
+export { SpotlightUtils };
+
+//# sourceMappingURL=Spotlight.utils.js.map

package/dist/Fundamentals/Spotlight/Spotlight.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spotlight.utils.js","names":[],"sources":["../../../src/Fundamentals/Spotlight/Spotlight.utils.ts"],"sourcesContent":["import type { Rect } from \"@thewaver/ss-utils\";\n\nexport namespace SpotlightUtils {\n    export const getHoleClipPath = (rect: Rect) => {\n        const right = rect.x + rect.width;\n        const bottom = rect.y + rect.height;\n        const outer = \"0 0, 0 100%, 100% 100%, 100% 0, 0 0\";\n        const inner = [\n            `${rect.x}px ${rect.y}px`,\n            `${right}px ${rect.y}px`,\n            `${right}px ${bottom}px`,\n            `${rect.x}px ${bottom}px`,\n            `${rect.x}px ${rect.y}px`,\n        ].join(\", \");\n\n        return `polygon(evenodd, ${outer}, ${inner}, 0 0)`;\n    };\n}\n"],"mappings":";AAEO,IAAU;CAAV,SAAA,iBAAA;CACU,gBAAA,mBAAmB,SAAe;EAC3C,MAAM,QAAQ,KAAK,IAAI,KAAK;EAC5B,MAAM,SAAS,KAAK,IAAI,KAAK;EAU7B,OAAO,yDARO;GACV,GAAG,KAAK,EAAE,KAAK,KAAK,EAAE;GACtB,GAAG,MAAM,KAAK,KAAK,EAAE;GACrB,GAAG,MAAM,KAAK,OAAO;GACrB,GAAG,KAAK,EAAE,KAAK,OAAO;GACtB,GAAG,KAAK,EAAE,KAAK,KAAK,EAAE;EAC1B,CAAC,CAAC,KAAK,IAE8B,EAAM;CAC/C;AACH,EAAA,CAAA,mBAAA,iBAAA,CAAA,EAAD"}

package/dist/Fundamentals/SpotlightGuide/SpotlightGuide.js

@@ -0,0 +1,8 @@
+import { Spotlight } from "../Spotlight/Spotlight.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/SpotlightGuide/SpotlightGuide.tsx
+var SpotlightGuide = (props) => createComponent(Spotlight, mergeProps(props, { mode: "guide" }));
+//#endregion
+export { SpotlightGuide };
+
+//# sourceMappingURL=SpotlightGuide.js.map

package/dist/Fundamentals/SpotlightGuide/SpotlightGuide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotlightGuide.js","names":["Spotlight","SpotlightGuideProps","SpotlightGuide","props","_$createComponent","_$mergeProps","mode"],"sources":["../../../src/Fundamentals/SpotlightGuide/SpotlightGuide.tsx"],"sourcesContent":["import { Spotlight } from \"../Spotlight/Spotlight\";\nimport type { SpotlightGuideProps } from \"../Spotlight/Spotlight.types\";\n\nexport const SpotlightGuide = (props: SpotlightGuideProps) => <Spotlight {...props} mode={\"guide\"} />;\n"],"mappings":";;;AAGA,IAAaE,kBAAkBC,UAA0BC,gBAAMJ,WAASK,WAAKF,OAAK,EAAEG,MAAM,QAAO,CAAA,CAAA"}

package/dist/Fundamentals/SpotlightHint/SpotlightHint.js

@@ -0,0 +1,8 @@
+import { Spotlight } from "../Spotlight/Spotlight.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/SpotlightHint/SpotlightHint.tsx
+var SpotlightHint = (props) => createComponent(Spotlight, mergeProps(props, { mode: "hint" }));
+//#endregion
+export { SpotlightHint };
+
+//# sourceMappingURL=SpotlightHint.js.map

package/dist/Fundamentals/SpotlightHint/SpotlightHint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotlightHint.js","names":["Spotlight","SpotlightHintProps","SpotlightHint","props","_$createComponent","_$mergeProps","mode"],"sources":["../../../src/Fundamentals/SpotlightHint/SpotlightHint.tsx"],"sourcesContent":["import { Spotlight } from \"../Spotlight/Spotlight\";\nimport type { SpotlightHintProps } from \"../Spotlight/Spotlight.types\";\n\nexport const SpotlightHint = (props: SpotlightHintProps) => <Spotlight {...props} mode={\"hint\"} />;\n"],"mappings":";;;AAGA,IAAaE,iBAAiBC,UAAyBC,gBAAMJ,WAASK,WAAKF,OAAK,EAAEG,MAAM,OAAM,CAAA,CAAA"}

package/dist/Fundamentals/SpotlightPrompt/SpotlightPrompt.js

@@ -0,0 +1,8 @@
+import { Spotlight } from "../Spotlight/Spotlight.js";
+import { createComponent, mergeProps } from "solid-js/web";
+//#region src/Fundamentals/SpotlightPrompt/SpotlightPrompt.tsx
+var SpotlightPrompt = (props) => createComponent(Spotlight, mergeProps(props, { mode: "prompt" }));
+//#endregion
+export { SpotlightPrompt };
+
+//# sourceMappingURL=SpotlightPrompt.js.map

package/dist/Fundamentals/SpotlightPrompt/SpotlightPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpotlightPrompt.js","names":["Spotlight","SpotlightPromptProps","SpotlightPrompt","props","_$createComponent","_$mergeProps","mode"],"sources":["../../../src/Fundamentals/SpotlightPrompt/SpotlightPrompt.tsx"],"sourcesContent":["import { Spotlight } from \"../Spotlight/Spotlight\";\nimport type { SpotlightPromptProps } from \"../Spotlight/Spotlight.types\";\n\nexport const SpotlightPrompt = (props: SpotlightPromptProps) => <Spotlight {...props} mode={\"prompt\"} />;\n"],"mappings":";;;AAGA,IAAaE,mBAAmBC,UAA2BC,gBAAMJ,WAASK,WAAKF,OAAK,EAAEG,MAAM,SAAQ,CAAA,CAAA"}

package/dist/Fundamentals/Stepper/Stepper.css.js

@@ -0,0 +1,14 @@
+/* empty css                                  */
+/* empty css                           */
+//#region src/Fundamentals/Stepper/Stepper.css.ts
+var stepperList = "_27e30h0";
+var stepperEntry = "_27e30h1";
+var stepperConnector = "_27e30h2";
+var stepperTail = "_27e30h3";
+var stepperTailConnector = "_27e30h4";
+var stepperBody = "_27e30h5";
+var stepperItem = "_27e30h6 _1lgjca40";
+//#endregion
+export { stepperBody, stepperConnector, stepperEntry, stepperItem, stepperList, stepperTail, stepperTailConnector };
+
+//# sourceMappingURL=Stepper.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.css.js","names":[],"sources":["../../../src/Fundamentals/Stepper/Stepper.css.ts"],"sourcesContent":["import { style } from \"@vanilla-extract/css\";\r\n\r\nimport { buttonElement } from \"../Button/Button.css\";\r\n\r\nexport const stepperList = style({\r\n    display: \"flex\",\r\n    alignItems: \"stretch\",\r\n    maxWidth: \"100%\",\r\n    margin: 0,\r\n    padding: 0,\r\n    listStyle: \"none\",\r\n});\r\n\r\nexport const stepperEntry = style({\r\n    display: \"flex\",\r\n    alignItems: \"stretch\",\r\n    minWidth: 0,\r\n});\r\n\r\nexport const stepperConnector = style({\r\n    display: \"flex\",\r\n    alignItems: \"center\",\r\n});\r\n\r\nexport const stepperTail = style({\r\n    position: \"relative\",\r\n    display: \"flex\",\r\n    alignItems: \"stretch\",\r\n    minWidth: 0,\r\n});\r\n\r\nexport const stepperTailConnector = style({\r\n    position: \"absolute\",\r\n    top: 0,\r\n    bottom: 0,\r\n    insetInlineStart: 0,\r\n});\r\n\r\nexport const stepperBody = style({\r\n    flexGrow: 1,\r\n    minWidth: 0,\r\n});\r\n\r\nexport const stepperItem = style([buttonElement, {}]);\r\n"],"mappings":""}