@dorsk/tsumikit 0.64.0 → 0.65.0

package/README.md

@@ -276,7 +276,8 @@ and an `attrs` object for `data-*`/test ids on the row; a checkable `pressed` it
 its icon leading and shows its check trailing, or uses the leading check slot when it has
 no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`;
 rest props land on the trigger, `count`/`countMax` paint its corner badge and `panelStyle`
-sizes the panel),
+sizes the panel; an item with a `control` snippet renders as a non-button row hosting a native
+`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation),
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),
@@ -837,7 +838,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/Menu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
 	export interface MenuItem {
 		label: string;
-		onselect: () => void;
+		/** Required for button rows; a `control` row's hosted control acts on its own. */
+		onselect?: () => void;
 		icon?: import('../atoms/Icon.svelte').IconName;
 		danger?: boolean;
 		disabled?: boolean;
@@ -18,6 +19,13 @@
 		keepOpen?: boolean;
 		/** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
 		content?: import('svelte').Snippet<[MenuItem]>;
+		/**
+		 * A row that is itself a control (a native `<select>`, a nested Popover trigger):
+		 * rendered as a non-button row with the menu's icon column and row height, its
+		 * first focusable element joining ↑/↓ navigation. Replaces label/tag; `onselect`,
+		 * `pressed` and `keepOpen` do not apply.
+		 */
+		control?: import('svelte').Snippet<[MenuItem, { close: () => void }]>;
 		/**
 		 * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
 		 * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)
@@ -117,18 +125,27 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
-	function buttons(): HTMLButtonElement[] {
-		return listEl
-			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)'))
-			: [];
+	const ROW_TARGET = ':is(select, input, textarea, button):not(:disabled), a[href], [tabindex]:not([tabindex="-1"])';
+
+	function targets(): HTMLElement[] {
+		if (!listEl) return [];
+		const rows = listEl.querySelectorAll<HTMLElement>(
+			':scope > [role="menuitem"]:not(:disabled), :scope > [role="menuitemcheckbox"]:not(:disabled), :scope > .menu-row:not([inert])'
+		);
+		return Array.from(rows).flatMap((row) => {
+			if (!row.classList.contains('menu-row')) return [row];
+			const control = row.querySelector<HTMLElement>(ROW_TARGET);
+			return control ? [control] : [];
+		});
 	}
 	function focusAt(i: number) {
-		const b = buttons();
+		const b = targets();
 		if (b.length) b[(i + b.length) % b.length].focus();
 	}
 	function onkeydown(e: KeyboardEvent) {
-		const b = buttons();
-		const i = b.indexOf(document.activeElement as HTMLButtonElement);
+		if ((e.target as Element).closest('[popover]') !== listEl?.closest('[popover]')) return;
+		const b = targets();
+		const i = b.indexOf(document.activeElement as HTMLElement);
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			focusAt(i + 1);
@@ -146,7 +163,7 @@
 	function select(item: MenuItem, close: () => void) {
 		if (item.disabled) return;
 		if (menuItemCloses(item, closeOnSelect)) close();
-		item.onselect();
+		item.onselect?.();
 	}
 </script>
 
@@ -186,6 +203,12 @@
 	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
+			{#if item.control}
+			<div {...item.attrs as HTMLAttributes<HTMLDivElement>} role="none" class="menu-item menu-row" class:danger={item.danger} inert={item.disabled}>
+				{#if item.icon}<Icon name={item.icon} />{/if}
+				{@render item.control(item, { close })}
+			</div>
+			{:else}
 			<button
 				type="button"
 				{...item.attrs}
@@ -216,6 +239,7 @@
 				{#if glyphs.trailingCheck}<span class="menu-check menu-check-trailing"><Icon name="check" /></span>{/if}
 				{/if}
 			</button>
+			{/if}
 		{/each}
 	</div>
 	{/snippet}
@@ -241,8 +265,12 @@
 		font-size: var(--fs-sm);
 		white-space: nowrap;
 	}
+	.menu-row {
+		position: relative;
+	}
 	.menu-item:hover:not(:disabled),
-	.menu-item:focus-visible {
+	.menu-item:focus-visible,
+	.menu-row:focus-within {
 		background: var(--bg-elevated-2);
 		outline: none;
 	}
@@ -273,7 +301,8 @@
 		margin-inline-start: 0;
 		padding-inline-start: 0;
 	}
-	.menu-item:disabled {
+	.menu-item:disabled,
+	.menu-row[inert] {
 		opacity: 0.45;
 		cursor: not-allowed;
 	}

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

@@ -1,6 +1,7 @@
 export interface MenuItem {
     label: string;
-    onselect: () => void;
+    /** Required for button rows; a `control` row's hosted control acts on its own. */
+    onselect?: () => void;
     icon?: import('../atoms/Icon.svelte').IconName;
     danger?: boolean;
     disabled?: boolean;
@@ -17,6 +18,15 @@ export interface MenuItem {
     keepOpen?: boolean;
     /** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
     content?: import('svelte').Snippet<[MenuItem]>;
+    /**
+     * A row that is itself a control (a native `<select>`, a nested Popover trigger):
+     * rendered as a non-button row with the menu's icon column and row height, its
+     * first focusable element joining ↑/↓ navigation. Replaces label/tag; `onselect`,
+     * `pressed` and `keepOpen` do not apply.
+     */
+    control?: import('svelte').Snippet<[MenuItem, {
+        close: () => void;
+    }]>;
     /**
      * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
      * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)

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.65.0",
   "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",