@marianmeres/stuic 3.103.0 → 3.105.0

package/dist/components/Book/Book.svelte

@@ -418,11 +418,17 @@
 	let swipeStartTime = 0;
 	let isSwiping = false;
 
-	// ---- Drag detection (for page click vs drag/swipe discrimination) ----
-
-	let _wasDragged = false;
-	let _dragStartClientX = 0;
-	let _dragStartClientY = 0;
+	// ---- Tap vs drag discrimination for page/area activation ----
+	// Activation uses pointer events (pointerdown/pointerup) rather than a synthesized
+	// mouse `click`. Pointer events unify mouse + touch and fire reliably on a clean tap,
+	// even on the `touch-action: none` gesture surface where tap→click synthesis is
+	// unreliable (notably iOS Safari, worst of all on inner SVG shapes). A tap is a
+	// pointerup landing within TAP_SLOP_PX of its pointerdown; movement beyond that is a
+	// swipe/drag and does not activate.
+
+	const TAP_SLOP_PX = 10;
+	let _tapDownX = 0;
+	let _tapDownY = 0;
 
 	// ---- Zoom helpers ----
 
@@ -572,10 +578,6 @@
 			const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
 			const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
 
-			_wasDragged = false;
-			_dragStartClientX = clientX;
-			_dragStartClientY = clientY;
-
 			if (zoomLevel > 1) {
 				// Pan mode
 				e.preventDefault();
@@ -603,18 +605,6 @@
 				return;
 			}
 
-			// Track drag for page click detection
-			if (!_wasDragged) {
-				const cx = "touches" in e ? (e.touches[0]?.clientX ?? 0) : e.clientX;
-				const cy = "touches" in e ? (e.touches[0]?.clientY ?? 0) : e.clientY;
-				if (
-					Math.abs(cx - _dragStartClientX) > 5 ||
-					Math.abs(cy - _dragStartClientY) > 5
-				) {
-					_wasDragged = true;
-				}
-			}
-
 			// Pan
 			if (isPanning) {
 				e.preventDefault();
@@ -693,10 +683,21 @@
 		};
 	}
 
+	// ---- Tap (pointer) helpers for page/area activation ----
+
+	function handleTapDown(e: PointerEvent) {
+		_tapDownX = e.clientX;
+		_tapDownY = e.clientY;
+	}
+
+	function isTap(e: PointerEvent): boolean {
+		return Math.hypot(e.clientX - _tapDownX, e.clientY - _tapDownY) <= TAP_SLOP_PX;
+	}
+
 	// ---- Page click ----
 
-	function handlePageClick(e: MouseEvent, page: BookPage | undefined) {
-		if (!onPageClick || !page || _wasDragged) return;
+	function handlePageClick(e: PointerEvent, page: BookPage | undefined) {
+		if (!onPageClick || !page || !isTap(e)) return;
 		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
 		const x = (e.clientX - rect.left) / rect.width;
 		const y = (e.clientY - rect.top) / rect.height;
@@ -769,7 +770,8 @@
 						<div
 							class={twMerge(!unstyled && "stuic-book-sheet-front", classPage)}
 							data-placeholder={!sheet.frontPage && sheet.backPage ? "" : undefined}
-							onclick={(e) => handlePageClick(e, sheet.frontPage)}
+							onpointerdown={handleTapDown}
+							onpointerup={(e) => handlePageClick(e, sheet.frontPage)}
 						>
 							{#if isNearby && sheet.frontPage}
 								{#if renderPage}
@@ -840,8 +842,9 @@
 												width={area.w}
 												height={area.h}
 												class={!unstyled ? "stuic-book-area" : undefined}
-												onclick={(e: MouseEvent) => {
-													if (_wasDragged) return;
+												onpointerdown={handleTapDown}
+												onpointerup={(e: PointerEvent) => {
+													if (!isTap(e)) return;
 													e.stopPropagation();
 													onAreaClick({ area, page: sheet.frontPage! });
 												}}
@@ -858,7 +861,8 @@
 						<div
 							class={twMerge(!unstyled && "stuic-book-sheet-back", classPage)}
 							data-placeholder={!sheet.backPage && sheet.frontPage ? "" : undefined}
-							onclick={(e) => handlePageClick(e, sheet.backPage)}
+							onpointerdown={handleTapDown}
+							onpointerup={(e) => handlePageClick(e, sheet.backPage)}
 						>
 							{#if isNearby && sheet.backPage}
 								{#if renderPage}
@@ -925,8 +929,9 @@
 												width={area.w}
 												height={area.h}
 												class={!unstyled ? "stuic-book-area" : undefined}
-												onclick={(e: MouseEvent) => {
-													if (_wasDragged) return;
+												onpointerdown={handleTapDown}
+												onpointerup={(e: PointerEvent) => {
+													if (!isTap(e)) return;
 													e.stopPropagation();
 													onAreaClick({ area, page: sheet.backPage! });
 												}}

package/dist/components/Button/Button.svelte

@@ -32,6 +32,14 @@
 		unstyled?: boolean;
 		/** Render as rounded-full */
 		roundedFull?: boolean;
+		/**
+		 * Trim the icon-side horizontal padding down to the vertical padding, so a
+		 * leading/trailing icon sits the same distance from the edge as a rounded icon
+		 * (aspect1) button. Pair with `roundedFull` for the "rounded icon button with
+		 * label" pill look (e.g. a "Back" button: prev arrow + label). Size-aware and
+		 * RTL-aware (`leading` = start side, `trailing` = end side).
+		 */
+		iconEdge?: "leading" | "trailing";
 		/** Render as aspect ratio 1 */
 		aspect1?: boolean;
 		/** Icon-only button (implies aspect1, adds data-icon-button for global CSS targeting) */
@@ -104,6 +112,7 @@
 		raised = false,
 		unstyled = false,
 		roundedFull = false,
+		iconEdge,
 		aspect1 = false,
 		iconButton = false,
 		tooltip: _tooltip,
@@ -168,6 +177,7 @@
 		data-raised={!unstyled && raised ? "true" : undefined}
 		data-checked={roleSwitch && checked ? "true" : undefined}
 		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-icon-edge={!unstyled && iconEdge ? iconEdge : undefined}
 		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
 		data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
 		data-x={!unstyled && !!_xProps ? "true" : undefined}
@@ -213,6 +223,7 @@
 		data-raised={!unstyled && raised ? "true" : undefined}
 		data-checked={roleSwitch && checked ? "true" : undefined}
 		data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
+		data-icon-edge={!unstyled && iconEdge ? iconEdge : undefined}
 		data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
 		data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
 		data-x={!unstyled && !!_xProps ? "true" : undefined}

package/dist/components/Button/Button.svelte.d.ts

@@ -27,6 +27,14 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     unstyled?: boolean;
     /** Render as rounded-full */
     roundedFull?: boolean;
+    /**
+     * Trim the icon-side horizontal padding down to the vertical padding, so a
+     * leading/trailing icon sits the same distance from the edge as a rounded icon
+     * (aspect1) button. Pair with `roundedFull` for the "rounded icon button with
+     * label" pill look (e.g. a "Back" button: prev arrow + label). Size-aware and
+     * RTL-aware (`leading` = start side, `trailing` = end side).
+     */
+    iconEdge?: "leading" | "trailing";
     /** Render as aspect ratio 1 */
     aspect1?: boolean;
     /** Icon-only button (implies aspect1, adds data-icon-button for global CSS targeting) */

package/dist/components/Button/README.md

@@ -20,6 +20,7 @@ A flexible button component with semantic intents, visual variants, sizes, and o
 | `iconSwap`   | `[string \| Snippet, string \| Snippet]`                           | -         | Two icon states with swap animation (implies iconButton) |
 | `x`          | `boolean \| XProps`                                                | -         | Normalized "X" icon button shortcut (close/dismiss) |
 | `nav`        | `"prev" \| "next" \| ButtonNavProps`                               | -         | Normalized prev/next icon button shortcut (arrow by default; `x` wins on conflict) |
+| `iconEdge`   | `"leading" \| "trailing"`                                          | -         | Trim icon-side padding to the y-padding (pill + edge-flush icon; pair with `roundedFull`) |
 | `class`      | `string`                                                           | -         | Additional CSS classes                            |
 
 ## Snippet Props
@@ -134,6 +135,26 @@ Global CSS targeting for all icon buttons:
 }
 ```
 
+### Pill with edge-flush icon (`iconEdge`)
+
+The "rounded icon button with label" look: a pill-shaped button whose leading (or
+trailing) icon sits the same distance from the edge as a rounded icon (nav) button.
+`iconEdge` trims the icon-side horizontal padding down to the vertical padding — it's
+size-aware and uses logical properties, so `leading`/`trailing` follow text direction
+(RTL-safe). It does NOT round the button on its own; pair it with `roundedFull`.
+
+```svelte
+<Button roundedFull iconEdge="leading">{@html iconArrowLeft({ size: 24 })} Back</Button>
+<Button roundedFull iconEdge="trailing">Next {@html iconArrowRight({ size: 24 })}</Button>
+```
+
+Notes:
+
+- `iconEdge` is composable — it only trims padding, so it also works on a
+  default-radius (non-pill) button if you want the icon flush without the pill shape.
+- You compose the icon + label yourself in `children` (no default icon, unlike `nav`),
+  so it works with any icon. Use `size: 24` to match the nav button's arrow.
+
 ### Custom Styling
 
 ```svelte
@@ -199,6 +220,7 @@ The component uses data attributes for styling:
 - `data-raised` - Present when raised
 - `data-checked` - Present when roleSwitch is enabled and checked
 - `data-rounded-full` - Present when roundedFull
+- `data-icon-edge` - Set to `"leading"` or `"trailing"` when iconEdge is set
 - `data-aspect1` - Present when aspect1 (or iconButton, or x, or nav)
 - `data-icon-button` - Present when iconButton (or x, or nav)
 - `data-x` - Present when x is set

package/dist/components/Button/index.css

@@ -422,6 +422,38 @@
 		padding: var(--stuic-button-padding-y-xl);
 	}
 
+	/* ============================================================================
+	   ICON EDGE
+	   Trim the icon-side horizontal padding down to the vertical padding, so a
+	   leading/trailing icon sits the same distance from the edge as a rounded icon
+	   (aspect1) button. Pair with [data-rounded-full] for the "rounded icon button
+	   with label" pill look. Logical props => leading/trailing follow text direction.
+	   ============================================================================ */
+	.stuic-button[data-icon-edge="leading"][data-size="sm"] {
+		padding-inline-start: var(--stuic-button-padding-y-sm);
+	}
+	.stuic-button[data-icon-edge="leading"][data-size="md"] {
+		padding-inline-start: var(--stuic-button-padding-y-md);
+	}
+	.stuic-button[data-icon-edge="leading"][data-size="lg"] {
+		padding-inline-start: var(--stuic-button-padding-y-lg);
+	}
+	.stuic-button[data-icon-edge="leading"][data-size="xl"] {
+		padding-inline-start: var(--stuic-button-padding-y-xl);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="sm"] {
+		padding-inline-end: var(--stuic-button-padding-y-sm);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="md"] {
+		padding-inline-end: var(--stuic-button-padding-y-md);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="lg"] {
+		padding-inline-end: var(--stuic-button-padding-y-lg);
+	}
+	.stuic-button[data-icon-edge="trailing"][data-size="xl"] {
+		padding-inline-end: var(--stuic-button-padding-y-xl);
+	}
+
 	/* ============================================================================
 	   ICON BUTTON
 	   Semantic marker for icon-only buttons. Layout is handled by [data-aspect1].

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.103.0",
+	"version": "3.105.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",
@@ -69,7 +69,7 @@
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.21",
-		"svelte": "^5.55.10",
+		"svelte": "^5.56.0",
 		"svelte-check": "^4.4.8",
 		"tailwindcss": "^4.3.0",
 		"tsx": "^4.22.3",
@@ -81,14 +81,14 @@
 	"dependencies": {
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/cron": "^2.0.1",
-		"@marianmeres/design-tokens": "^1.7.0",
+		"@marianmeres/design-tokens": "^1.8.0",
 		"@marianmeres/icons-fns": "^5.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",
 		"@marianmeres/parse-boolean": "^2.1.0",
 		"@marianmeres/ticker": "^1.17.1",
 		"@marianmeres/tree": "^2.3.0",
-		"libphonenumber-js": "^1.13.3",
+		"libphonenumber-js": "^1.13.4",
 		"runed": "^0.23.4",
 		"tailwind-merge": "^3.6.0"
 	}