foldkit-primitives 0.15.0 → 0.15.2

package/dist/dom/index.d.mts

@@ -233,6 +233,14 @@ export declare const FLUID_HOVER_ATTRIBUTE = "data-fluid-hover";
 export declare const FLUID_PRESS_ATTRIBUTE = "data-fluid-press";
 /** The attribute on the item the highlight is shown on, for what CSS draws beside it. */
 export declare const FLUID_LIT_ATTRIBUTE = "data-fluid-lit";
+/**
+ * The attribute `FluidHover` sets on its container, to the highlight's name,
+ * while the item that highlight is on is held. A stylist draws the press on
+ * the highlight (`data-fluid-held`) rather than on the item, whose own press
+ * is hidden under it; a press in a gap marks it too where `gapClick` sends
+ * that press to the lit item.
+ */
+export declare const FLUID_HELD_ATTRIBUTE = "data-fluid-held";
 declare const Axis: Schema.Literals<readonly ["x", "y", "xy"]>;
 export type FluidAxis = typeof Axis.Type;
 /**
@@ -263,7 +271,7 @@ export type FluidAxis = typeof Axis.Type;
  * tries again for three frames, rather than drawing the highlight at zero.
  * The item the highlight is shown on carries `data-fluid-lit`, so a style
  * can change what sits beside it (a table hides the lines around the lit
- * row).
+ * row); its container carries `data-fluid-held` while that item is pressed.
  *
  * `follows` names the item the highlight sits on while the pointer is not
  * moving it: a menu marks the row its keys reach (`[data-active]`), and the

package/dist/dom/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/dom/autofocus.ts","../../src/dom/clipboard.ts","../../src/dom/input-mask.ts","../../src/dom/keep-in-view.ts","../../src/dom/script-loader.ts","../../src/dom/share.ts","../../src/dom/measure.ts","../../src/dom/follow-tab-stop.ts","../../src/dom/scroll.ts","../../src/dom/pointed-links.ts","../../src/dom/fluid-hover.ts","../../src/dom/keyboard-inset.ts","../../src/dom/scroll-bars.ts","../../src/dom/swipe.ts","../../src/dom/scroll-settle.ts","../../src/dom/pointer-position.ts","../../src/dom/track-box.ts","../../src/dom/image-decode.ts"],"mappings":"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"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/dom/autofocus.ts","../../src/dom/clipboard.ts","../../src/dom/input-mask.ts","../../src/dom/keep-in-view.ts","../../src/dom/script-loader.ts","../../src/dom/share.ts","../../src/dom/measure.ts","../../src/dom/follow-tab-stop.ts","../../src/dom/scroll.ts","../../src/dom/pointed-links.ts","../../src/dom/fluid-hover.ts","../../src/dom/keyboard-inset.ts","../../src/dom/scroll-bars.ts","../../src/dom/swipe.ts","../../src/dom/scroll-settle.ts","../../src/dom/pointer-position.ts","../../src/dom/track-box.ts","../../src/dom/image-decode.ts"],"mappings":"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"}

package/dist/dom/index.mjs

@@ -583,6 +583,14 @@ const FLUID_HOVER_ATTRIBUTE = "data-fluid-hover";
 const FLUID_PRESS_ATTRIBUTE = "data-fluid-press";
 /** The attribute on the item the highlight is shown on, for what CSS draws beside it. */
 const FLUID_LIT_ATTRIBUTE = "data-fluid-lit";
+/**
+* The attribute `FluidHover` sets on its container, to the highlight's name,
+* while the item that highlight is on is held. A stylist draws the press on
+* the highlight (`data-fluid-held`) rather than on the item, whose own press
+* is hidden under it; a press in a gap marks it too where `gapClick` sends
+* that press to the lit item.
+*/
+const FLUID_HELD_ATTRIBUTE = "data-fluid-held";
 const Axis = Schema.Literals([
 	"x",
 	"y",
@@ -625,7 +633,7 @@ const isDisabled = (item) => item.matches("[aria-disabled=\"true\"], [data-disab
 * tries again for three frames, rather than drawing the highlight at zero.
 * The item the highlight is shown on carries `data-fluid-lit`, so a style
 * can change what sits beside it (a table hides the lines around the lit
-* row).
+* row); its container carries `data-fluid-held` while that item is pressed.
 *
 * `follows` names the item the highlight sits on while the pointer is not
 * moving it: a menu marks the row its keys reach (`[data-active]`), and the
@@ -707,6 +715,7 @@ const FluidHover = Mount.defineStream("FluidHover", {
 		};
 		const hide = () => {
 			container.style.setProperty(property.shown, "0");
+			container.removeAttribute(FLUID_HELD_ATTRIBUTE);
 			light(null);
 		};
 		/** Whether the keyboard has an item focused, which the highlight then stays on. */
@@ -744,6 +753,7 @@ const FluidHover = Mount.defineStream("FluidHover", {
 		};
 		const leave = () => {
 			pointer = null;
+			release();
 			if (!keyed()) hide();
 		};
 		const focus = (event) => {
@@ -755,19 +765,37 @@ const FluidHover = Mount.defineStream("FluidHover", {
 			const to = event.relatedTarget;
 			if (pointer === null && !(to instanceof Node && container.contains(to))) hide();
 		};
+		const reachOf = (item, event) => gapReach === void 0 || distance(item.getBoundingClientRect(), event.clientX, event.clientY, "xy") <= gapReach;
+		/** Whether a click in a gap presses the lit item, within `gapReach` of it. */
+		const reaches = (item, event) => gapClick && reachOf(item, event);
 		const click = (event) => {
-			if (!gapClick || active === null) return;
+			if (active === null) return;
 			if (container.style.getPropertyValue(property.shown) !== "1") return;
 			const target = event.target;
 			if (!(target instanceof Element) || target.closest(selector) !== null) return;
-			const reach = distance(active.getBoundingClientRect(), event.clientX, event.clientY, "xy");
-			if (gapReach !== void 0 && reach > gapReach) return;
+			if (!reaches(active, event)) return;
 			const press = active.querySelector(`[data-fluid-press]`) ?? active;
 			if (press instanceof HTMLElement) press.click();
 		};
 		const soon = () => {
 			if (active !== null) requestAnimationFrame(() => place());
 		};
+		/**
+		* Marks the container as held where the press is the lit item's: the
+		* item itself, or a gap a click there reaches through (`gapClick`). A
+		* press on another item is that item's, once the pointer has lit it.
+		*/
+		const press = (event) => {
+			if (event.button !== 0 || active === null) return;
+			if (container.style.getPropertyValue(property.shown) !== "1") return;
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			const inItem = target.closest(selector) !== null;
+			if (inItem && !active.contains(target)) return;
+			if (!inItem && !reaches(active, event)) return;
+			container.setAttribute(FLUID_HELD_ATTRIBUTE, name);
+		};
+		const release = () => container.removeAttribute(FLUID_HELD_ATTRIBUTE);
 		/** The marked item moved: the highlight goes with it, or fades if it is gone. */
 		const marked = () => {
 			if (follows === void 0) return;
@@ -786,7 +814,10 @@ const FluidHover = Mount.defineStream("FluidHover", {
 			attributes: true
 		});
 		container.addEventListener("pointermove", move, { passive: true });
+		container.addEventListener("pointerdown", press);
 		container.addEventListener("pointerleave", leave);
+		window.addEventListener("pointerup", release);
+		window.addEventListener("pointercancel", release);
 		container.addEventListener("focusin", focus);
 		container.addEventListener("focusout", blur);
 		container.addEventListener("click", click);
@@ -800,9 +831,13 @@ const FluidHover = Mount.defineStream("FluidHover", {
 			sizes?.disconnect();
 			marks?.disconnect();
 			container.removeAttribute(FLUID_HOVER_ATTRIBUTE);
+			container.removeAttribute(FLUID_HELD_ATTRIBUTE);
 			light(null);
 			container.removeEventListener("pointermove", move);
+			container.removeEventListener("pointerdown", press);
 			container.removeEventListener("pointerleave", leave);
+			window.removeEventListener("pointerup", release);
+			window.removeEventListener("pointercancel", release);
 			container.removeEventListener("focusin", focus);
 			container.removeEventListener("focusout", blur);
 			container.removeEventListener("click", click);
@@ -1817,6 +1852,6 @@ const decodeImage = (source) => ({
 	})
 });
 //#endregion
-export { Autofocus, ClipboardMessage, ClipboardReadMessage, DRAG_THRESHOLD, DragCancelled, DragDropped, DragPlace, DragStarted, DragZone, DraggedOver, EditAsked, EditableText, FLUID_HOVER_ATTRIBUTE, FLUID_LIT_ATTRIBUTE, FLUID_PRESS_ATTRIBUTE, FluidHover, FocusScope, Focused, FollowTabStop, HOLD_SLOP, HOLD_TO_DRAG_MS, HideOutside, ImageDecodeMessage, Input, InputMask, KEYBOARD_INSET, KeepInView, KeyboardInset, Measure, Move, MoveEnded, MoveStarted, Moved, NO_SWIPE, PointerDrag, PointerMoved, PointerPoint, PointerPosition, PointerPressed, PointerReleased, SCROLL_BAR_ATTRIBUTE, SCROLL_OVERLAID_ATTRIBUTE, SETTLE_QUIET, SWIPE_WINDOW, ScriptMessage, ScrollBars, ScrollLock, ScrollSettle, ScrollSettled, ShareData, ShareMessage, Swipe, SwipeEnded, SwipeStarted, Swiped, TRACK_TARGET_ATTRIBUTE, TargetHovered, TargetPressed, Targets, TextCancelled, TextCommitted, TextEdited, TrackBox, TrackedTarget, applyMask, boxOf, canScroll, copyText, cornerRadius, decodeImage, fluidHovered, keepScroll, keyboardInset, loadScript, measurePaddingBox, measured, paddingBoxOf, pointedLinks, readText, scrollThumb, share, tabbableWithin, targetOf, textOf, trackedBox, velocityOf, zoneOf };
+export { Autofocus, ClipboardMessage, ClipboardReadMessage, DRAG_THRESHOLD, DragCancelled, DragDropped, DragPlace, DragStarted, DragZone, DraggedOver, EditAsked, EditableText, FLUID_HELD_ATTRIBUTE, FLUID_HOVER_ATTRIBUTE, FLUID_LIT_ATTRIBUTE, FLUID_PRESS_ATTRIBUTE, FluidHover, FocusScope, Focused, FollowTabStop, HOLD_SLOP, HOLD_TO_DRAG_MS, HideOutside, ImageDecodeMessage, Input, InputMask, KEYBOARD_INSET, KeepInView, KeyboardInset, Measure, Move, MoveEnded, MoveStarted, Moved, NO_SWIPE, PointerDrag, PointerMoved, PointerPoint, PointerPosition, PointerPressed, PointerReleased, SCROLL_BAR_ATTRIBUTE, SCROLL_OVERLAID_ATTRIBUTE, SETTLE_QUIET, SWIPE_WINDOW, ScriptMessage, ScrollBars, ScrollLock, ScrollSettle, ScrollSettled, ShareData, ShareMessage, Swipe, SwipeEnded, SwipeStarted, Swiped, TRACK_TARGET_ATTRIBUTE, TargetHovered, TargetPressed, Targets, TextCancelled, TextCommitted, TextEdited, TrackBox, TrackedTarget, applyMask, boxOf, canScroll, copyText, cornerRadius, decodeImage, fluidHovered, keepScroll, keyboardInset, loadScript, measurePaddingBox, measured, paddingBoxOf, pointedLinks, readText, scrollThumb, share, tabbableWithin, targetOf, textOf, trackedBox, velocityOf, zoneOf };
 
 //# sourceMappingURL=index.mjs.map