@dorsk/tsumikit 0.67.0 → 0.67.1

package/README.md

@@ -852,10 +852,14 @@ glyphs (`size` stays the SVG px, emoji ×1.35).
 On `(pointer: coarse)` every icon-only/square control (and `Popover`'s default
 trigger) carries an invisible `::after` slab that extends its hit area to
 `--touch-target` (44px, WCAG 2.5.8) without moving layout; fine pointers are
-untouched. The slab grows on both block sides but only towards the inline
-*start*: inline-end overflow would count towards the scrollable overflow of
-every scroll ancestor, so a button near the right edge of an `overflow-y: auto`
-container would make it scroll sideways by a pixel or two.
+untouched. The slab is the centred target with its inline-*end* half cut off:
+44px tall, and the box plus half the deficit wide (34px for a 24px icon).
+Inline-end overflow would count towards the scrollable overflow of every scroll
+ancestor, so a button near the right edge of an `overflow-y: auto` container
+would make it scroll sideways; in a row that half lies under the next sibling's
+slab anyway. Growing the whole deficit towards the start instead would let each
+slab cover the previous sibling's centre, so taps would land one icon to the
+right.
 `hitArea="compact"` opts a dense-table row out. `Button
 collapseLabel="mobile" | "container"` hides `<span data-label>` children below
 40rem viewport / 30rem container, drops to icon padding, and names the button

package/dist/components/atoms/Button.svelte

@@ -51,7 +51,7 @@
 		// container (`container`) so the button becomes icon-only; the hidden text
 		// becomes the aria-label unless one is set.
 		collapseLabel?: 'never' | 'mobile' | 'container';
-		// Icon-only/square buttons grow a 44px hit slab on coarse pointers without
+		// Icon-only/square buttons grow a touch hit slab on coarse pointers without
 		// moving layout; `compact` opts out in dense tables.
 		hitArea?: 'auto' | 'compact';
 		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
@@ -507,12 +507,12 @@
 	}
 
 	/* Coarse pointers: icon-only and square buttons carry an invisible slab that
-	   extends the hit area to --touch-target without changing layout. Buttons
+	   extends the hit area towards --touch-target without changing layout. Buttons
 	   already at or above the target keep their own box (inset never positive).
-	   The slab grows towards the inline start only: inline-end overflow counts
-	   towards the scrollable overflow of every scroll ancestor, so a button near
-	   the right edge of an `overflow-y: auto` container would make it scroll
-	   sideways. Start-side overflow is unscrollable, so the full target survives. */
+	   The slab is the centred target with its inline-end half cut off: inline-end
+	   overflow counts towards the scrollable overflow of every scroll ancestor, and
+	   in a row that half lies under the next sibling anyway. Growing further towards
+	   the start would let each slab cover the previous sibling's centre. */
 	@media (pointer: coarse) {
 		.btn-icon:not(.hit-compact),
 		.btn-icon-inline:not(.hit-compact),
@@ -529,7 +529,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

package/dist/components/molecules/FileButton.svelte

@@ -45,7 +45,7 @@
 		control?: boolean;
 		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
-		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		/** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		class?: string;
 	} = $props();
@@ -158,7 +158,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

package/dist/components/molecules/FileButton.svelte.d.ts

@@ -24,7 +24,7 @@ type $$ComponentProps = {
     control?: boolean;
     /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
-    /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    /** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     class?: string;
 };

package/dist/components/molecules/IconButton.svelte

@@ -34,7 +34,7 @@
 		// Exact glyph size for SVG *and* text glyphs (px number or any CSS length),
 		// no emoji multiplier. Wins over `size`.
 		glyphSize?: number | string;
-		// Opt out of the 44px coarse-pointer hit slab in dense rows.
+		// Opt out of the coarse-pointer hit slab in dense rows.
 		hitArea?: 'auto' | 'compact';
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
 		// no square box; just a muted glyph that brightens on hover. Pair with

package/dist/components/molecules/Popover.svelte

@@ -61,7 +61,7 @@
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
-		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		/** Icon-only triggers grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		/** Corner count indicator on the trigger, as on `Button`: hidden at
 		 *  0/undefined, capped at `countMax+`, the exact number joins `label`. */
@@ -449,10 +449,9 @@
 		padding: var(--pop-trigger-pad, 0);
 		flex: none;
 	}
-	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
-	   via an invisible slab; layout does not move. The slab grows towards the
-	   inline start only, so it never adds scrollable overflow to a scroll ancestor
-	   (see Button.svelte). */
+	/* Coarse pointers: icon-only triggers extend their hit area towards --touch-target
+	   via an invisible slab; layout does not move. Same geometry as Button.svelte:
+	   no inline-end growth, half the deficit towards the inline start. */
 	@media (pointer: coarse) {
 		.pop-trigger:not(.canonical, .hit-compact) {
 			position: relative;
@@ -461,7 +460,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

package/dist/components/molecules/Popover.svelte.d.ts

@@ -46,7 +46,7 @@ type Own = {
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;
-    /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    /** Icon-only triggers grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     /** Corner count indicator on the trigger, as on `Button`: hidden at
      *  0/undefined, capped at `countMax+`, the exact number joins `label`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.67.0",
+  "version": "0.67.1",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",