@dorsk/tsumikit 0.64.0 → 0.64.1

package/README.md

@@ -837,7 +837,11 @@ 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. `hitArea="compact"` opts a dense-table row out. `Button
+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.
+`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
 from the hidden text unless `aria-label` is set:

package/dist/components/atoms/Button.svelte

@@ -508,7 +508,11 @@
 
 	/* Coarse pointers: icon-only and square buttons carry an invisible slab that
 	   extends the hit area to --touch-target without changing layout. Buttons
-	   already at or above the target keep their own box (inset never positive). */
+	   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. */
 	@media (pointer: coarse) {
 		.btn-icon:not(.hit-compact),
 		.btn-icon-inline:not(.hit-compact),
@@ -524,7 +528,9 @@
 		.btn-chip:not(.hit-compact)::after {
 			content: '';
 			position: absolute;
-			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-end: 0;
 		}
 	}
 

package/dist/components/layouts/ResizablePanel.svelte

@@ -422,7 +422,8 @@
 	.panel-content {
 		flex: 1;
 		min-height: 0;
-		overflow: auto;
+		overflow-y: auto;
+		overflow-x: hidden;
 	}
 	/* Subtle chevron handle anchored to the panel's inner edge — never a filled
 	   button, never overlapping the neighbouring main content. It stays visible

package/dist/components/molecules/FileButton.svelte

@@ -157,7 +157,9 @@
 		.file-btn.icon-only:not(.hit-compact)::after {
 			content: '';
 			position: absolute;
-			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-end: 0;
 		}
 	}
 	/* Emoji glyph is bumped above the text size — at 1em a paperclip is hard to

package/dist/components/molecules/Popover.svelte

@@ -450,7 +450,9 @@
 		flex: none;
 	}
 	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
-	   via an invisible slab; layout does not move. */
+	   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). */
 	@media (pointer: coarse) {
 		.pop-trigger:not(.canonical, .hit-compact) {
 			position: relative;
@@ -458,7 +460,9 @@
 		.pop-trigger:not(.canonical, .hit-compact)::after {
 			content: '';
 			position: absolute;
-			inset: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
+			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-end: 0;
 		}
 	}
 	.pop-trigger.trigger-tone-accent {

package/dist/styles/reset.css

@@ -88,12 +88,16 @@ pre {
 	border-radius: var(--r-sm);
 }
 
-::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-::-webkit-scrollbar-thumb {
-	background: var(--border-strong);
-	border-radius: var(--r-pill);
+/* Slim scrollbars for mice only. On touch, a custom scrollbar replaces the
+   native overlay bars with classic space-taking ones. */
+@media (hover: hover) and (pointer: fine) {
+	::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+	::-webkit-scrollbar-thumb {
+		background: var(--border-strong);
+		border-radius: var(--r-pill);
+	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.64.0",
+  "version": "0.64.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",