@syware/jlib 0.5.0 → 0.5.1

package/dist/molecules/jl-tooltip.css_raw.js

@@ -1,3 +1,3 @@
 // src/molecules/jl-tooltip.css?raw
-var jl_tooltip_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n/* Ink on the page's ground: dark on a light theme, light on a dark one. */\n.bubble {\n  max-width: min(260px, calc(100vw - 16px));\n  padding: 6px 9px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-text);\n  color: var(--jl-bg);\n  font-size: var(--jl-font-xs);\n  font-weight: 550;\n  line-height: 1.4;\n  box-shadow: var(--jl-shadow);\n  pointer-events: auto;\n}\n\n.arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 1px;\n  background: inherit;\n  rotate: 45deg;\n}\n\n.bubble[data-placement^=\"top\"] .arrow {\n  top: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"bottom\"] .arrow {\n  bottom: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% 50%;\n}\n\n.bubble[data-placement^=\"left\"] .arrow {\n  top: var(--arrow, 50%);\n  left: 100%;\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"right\"] .arrow {\n  top: var(--arrow, 50%);\n  right: 100%;\n  translate: 50% -50%;\n}\n";
+var jl_tooltip_default = ":host {\n  display: inline-flex;\n  vertical-align: middle;\n  /* A long press shows the bubble: no callout over it, and (below) no text selected under the finger. */\n  -webkit-touch-callout: none;\n}\n\n@media (pointer: coarse) {\n  ::slotted(*) {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n}\n\n/* Ink on the page's ground: dark on a light theme, light on a dark one. */\n.bubble {\n  max-width: min(260px, calc(100vw - 16px));\n  padding: 6px 9px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-text);\n  color: var(--jl-bg);\n  font-size: var(--jl-font-xs);\n  font-weight: 550;\n  line-height: 1.4;\n  box-shadow: var(--jl-shadow);\n  pointer-events: auto;\n}\n\n.arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 1px;\n  background: inherit;\n  rotate: 45deg;\n}\n\n.bubble[data-placement^=\"top\"] .arrow {\n  top: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"bottom\"] .arrow {\n  bottom: 100%;\n  left: var(--arrow, 50%);\n  translate: -50% 50%;\n}\n\n.bubble[data-placement^=\"left\"] .arrow {\n  top: var(--arrow, 50%);\n  left: 100%;\n  translate: -50% -50%;\n}\n\n.bubble[data-placement^=\"right\"] .arrow {\n  top: var(--arrow, 50%);\n  right: 100%;\n  translate: 50% -50%;\n}\n";
 export { jl_tooltip_default as default };

package/dist/molecules/jl-tooltip.d.ts

@@ -2,7 +2,13 @@ import { JlElement } from '../base/jl-element';
 import type { Placement } from '../types/floating.types';
 /**
  * A short hint in a dark bubble by its trigger (the slotted element): it shows on hover and on keyboard focus after
- * a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description.
+ * a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description. While
+ * the pointer or the focus is on it, the trigger's own `title` (a button's `hint`) is set aside, so the browser's
+ * tooltip does not show over the bubble.
+ *
+ * Touch screens have no hover: pressing and holding a trigger shows the bubble (and the press does not act), and
+ * it stays a moment after the finger lifts; a trigger that does nothing on a tap (a word, an icon) shows or hides
+ * it on a tap.
  */
 export declare class JlTooltip extends JlElement {
     static readonly selector = "jl-tooltip";
@@ -31,6 +37,25 @@ export declare class JlTooltip extends JlElement {
     /** Hides the bubble now. */
     hide(): void;
     private close;
+    /** A trigger that acts on a tap (a button, a link, a field), as opposed to a word or an icon. */
+    private isInteractive;
+    private pressStart;
+    private pressMove;
+    /** The finger lifted, or the page took it to scroll: a bubble the press showed stays a moment, then goes. */
+    private pressEnd;
+    /** The system's own long press: the bubble shows now, and the menu it would open does not, but over a link. */
+    private pressHeld;
+    private openFromPress;
+    private swallowLongPress;
+    private hideBubble;
+    /**
+     * Sets aside the native `title` of the trigger and of its inner control: the bubble says it, and the browser's
+     * own tooltip would show over it a moment later. The control keeps its name for screen readers (a button's hint
+     * is its `aria-label` too).
+     */
+    private holdTitles;
+    /** Gives the titles back, unless the trigger wrote new ones meanwhile. */
+    private restoreTitles;
     private trigger;
     private isOpen;
     private scheduleShow;

package/dist/molecules/jl-tooltip.js

@@ -14,10 +14,22 @@ var HIDE_GRACE_MS = 120;
 var GAP = 9;
 var ARROW_MARGIN = 10;
 var DESCRIPTION = "aria-description";
+var TITLE = "title";
+var TOUCH = "touch";
+var LONG_PRESS_MS = 500;
+var MOVE_TOLERANCE_PX = 10;
+var TOUCH_LINGER_MS = 1500;
+var INTERACTIVE = "a[href], button, input, select, textarea, summary, [role=\"button\"], [role=\"link\"]";
 var sideOf = (placement) => placement.split("-")[0];
 /**
 * A short hint in a dark bubble by its trigger (the slotted element): it shows on hover and on keyboard focus after
-* a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description.
+* a `delay`, and hides on leave, blur and Escape. The trigger gets the text as its accessible description. While
+* the pointer or the focus is on it, the trigger's own `title` (a button's `hint`) is set aside, so the browser's
+* tooltip does not show over the bubble.
+*
+* Touch screens have no hover: pressing and holding a trigger shows the bubble (and the press does not act), and
+* it stays a moment after the finger lifts; a trigger that does nothing on a tap (a word, an icon) shows or hides
+* it on a tap.
 */
 var JlTooltip = class extends JlElement {
 	static selector = "jl-tooltip";
@@ -35,7 +47,15 @@ var JlTooltip = class extends JlElement {
 	_state = {
 		described: null,
 		following: new AbortController(),
+		heldTitles: [],
 		hideTimer: 0,
+		press: {
+			down: false,
+			opened: false,
+			timer: 0,
+			x: 0,
+			y: 0
+		},
 		showTimer: 0
 	};
 	_refs = this.useRefs((ref) => ({
@@ -58,11 +78,34 @@ var JlTooltip = class extends JlElement {
 	onConnect() {
 		this.describeTrigger();
 		this.on(this._refs.slot, "slotchange", () => this.describeTrigger());
-		this.on(this, "pointerenter", () => this.scheduleShow());
-		this.on(this, "pointerleave", () => this.scheduleHide());
-		this.on(this, "pointerdown", () => this.close());
+		this.on(this, "pointerenter", (event) => {
+			if (event.pointerType === TOUCH) return;
+			this.holdTitles();
+			this.scheduleShow();
+		});
+		this.on(this, "pointerleave", (event) => {
+			if (event.pointerType !== TOUCH) this.scheduleHide();
+		});
+		this.on(this, "pointerdown", (event) => {
+			if (event.pointerType === TOUCH) {
+				this.pressStart(event);
+				return;
+			}
+			this.hideBubble();
+		});
+		this.on(this, "pointermove", (event) => this.pressMove(event));
+		this.on(this, "pointerup", () => this.pressEnd());
+		this.on(this, "pointercancel", () => this.pressEnd());
+		this.on(this, "contextmenu", (event) => this.pressHeld(event));
+		this.addEventListener("click", (event) => this.swallowLongPress(event), {
+			capture: true,
+			signal: this.killSignal
+		});
 		this.on(this, "focusin", () => {
-			if (deepActiveElement(document)?.matches(":focus-visible") === true) this.scheduleShow();
+			if (deepActiveElement(document)?.matches(":focus-visible") === true) {
+				this.holdTitles();
+				this.scheduleShow();
+			}
 		});
 		this.on(this, "focusout", () => this.close());
 	}
@@ -78,12 +121,93 @@ var JlTooltip = class extends JlElement {
 		this.whenRendered(() => this.close());
 	}
 	close() {
+		this.hideBubble();
+		this.restoreTitles();
+	}
+	/** A trigger that acts on a tap (a button, a link, a field), as opposed to a word or an icon. */
+	isInteractive() {
+		return accessibleTarget(this.trigger()).matches(INTERACTIVE);
+	}
+	pressStart(event) {
+		const press = this._state.press;
+		window.clearTimeout(press.timer);
+		press.opened = false;
+		if (!this.isInteractive()) {
+			if (this.isOpen()) {
+				this.close();
+				return;
+			}
+			this.open();
+			return;
+		}
+		press.down = true;
+		press.x = event.clientX;
+		press.y = event.clientY;
+		press.timer = window.setTimeout(() => this.openFromPress(), LONG_PRESS_MS);
+	}
+	pressMove(event) {
+		const press = this._state.press;
+		const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);
+		if (press.down && moved > MOVE_TOLERANCE_PX) window.clearTimeout(press.timer);
+	}
+	/** The finger lifted, or the page took it to scroll: a bubble the press showed stays a moment, then goes. */
+	pressEnd() {
+		const press = this._state.press;
+		window.clearTimeout(press.timer);
+		press.down = false;
+		if (!press.opened) return;
+		window.clearTimeout(this._state.hideTimer);
+		this._state.hideTimer = window.setTimeout(() => this.close(), TOUCH_LINGER_MS);
+	}
+	/** The system's own long press: the bubble shows now, and the menu it would open does not, but over a link. */
+	pressHeld(event) {
+		if (!this._state.press.down || !this.isInteractive()) return;
+		this.openFromPress();
+		if (!accessibleTarget(this.trigger()).matches("a[href]")) event.preventDefault();
+	}
+	openFromPress() {
+		window.clearTimeout(this._state.press.timer);
+		this._state.press.opened = true;
+		this.open();
+	}
+	swallowLongPress(event) {
+		const press = this._state.press;
+		if (!press.opened) return;
+		press.opened = false;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	hideBubble() {
 		window.clearTimeout(this._state.showTimer);
 		window.clearTimeout(this._state.hideTimer);
 		this._state.following.abort();
 		const bubble = this._refs.bubble;
 		if (bubble.matches(":popover-open")) bubble.hidePopover();
 	}
+	/**
+	* Sets aside the native `title` of the trigger and of its inner control: the bubble says it, and the browser's
+	* own tooltip would show over it a moment later. The control keeps its name for screen readers (a button's hint
+	* is its `aria-label` too).
+	*/
+	holdTitles() {
+		if (this.text.get() === "" || this._state.heldTitles.length > 0) return;
+		const trigger = this.trigger();
+		const elements = [.../* @__PURE__ */ new Set([trigger, accessibleTarget(trigger)])];
+		this._state.heldTitles = elements.flatMap((element) => {
+			const title = element.getAttribute(TITLE);
+			if (title === null) return [];
+			element.removeAttribute(TITLE);
+			return [{
+				element,
+				title
+			}];
+		});
+	}
+	/** Gives the titles back, unless the trigger wrote new ones meanwhile. */
+	restoreTitles() {
+		for (const { element, title } of this._state.heldTitles) if (!element.hasAttribute(TITLE)) element.setAttribute(TITLE, title);
+		this._state.heldTitles = [];
+	}
 	trigger() {
 		return this._refs.slot.assignedElements({ flatten: true })[0] ?? this;
 	}
@@ -117,6 +241,9 @@ var JlTooltip = class extends JlElement {
 			passive: true,
 			signal: following.signal
 		});
+		document.addEventListener("pointerdown", (event) => {
+			if (!event.composedPath().includes(this)) this.close();
+		}, { signal: following.signal });
 		document.addEventListener("keydown", (event) => {
 			if (event.key === "Escape") this.close();
 		}, { signal: following.signal });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syware/jlib",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",