@dorsk/tsumikit 0.59.1 → 0.60.0

package/README.md

@@ -613,6 +613,20 @@ stacked — or render free-form `children`, where each direct child is a cell.
 The grid is visual only: DOM order, tab order and reading order are those of
 the inline run. `--glyph-stack-gap` sets the inline gap (default `--sp-1`).
 
+Folded cells are 1rem — hard to hit on touch. `expand` none | tap | slide
+(default `none`, `items` only, active while stacked) makes a press open the
+four glyphs as big tiles in a top-layer panel over the stack. `tap` opens it
+on click and keeps it open, so the star can be clicked, a status dot hovered
+and a badge read (dismiss by pressing outside or Escape); keyboard activation
+still goes straight to the cell. `slide` opens it on press: drag toward a
+corner to arm that tile and release to fire it — the item's `action`, else a
+click on the tile's first control. The panel closes after firing unless that
+opened a nested popover; a release in place, or on a tile with nothing to
+fire, leaves it open as in `tap`. An item's `expanded` snippet replaces
+`inline` in its tile; `--glyph-stack-tile` (default `3rem`) and
+`--glyph-stack-zoom` (default `1.75`) size the tiles; `expandLabel` names the
+panel.
+
 ```svelte
 <GlyphStack stackBelow="34rem" items={[
   { inline: pin },
@@ -620,6 +634,13 @@ the inline run. `--glyph-stack-gap` sets the inline gap (default `--sp-1`).
   { inline: machine, stacked: machineTile },
   { inline: avatar }
 ]} />
+
+<GlyphStack stack="always" expand="slide" items={[
+  { inline: pin, action: togglePin },
+  { inline: dot },
+  { inline: machine, stacked: machineTile },
+  { inline: avatar }
+]} />
 ```
 
 ### SplitButton

package/dist/components/molecules/GlyphStack.svelte

@@ -6,6 +6,10 @@
 		inline: Snippet | string;
 		/** Compact variant for a 1rem grid cell (e.g. a tinted initial tile for a full Badge). */
 		stacked?: Snippet | string;
+		/** Content of the enlarged tile when `expand` is on; defaults to `inline`. */
+		expanded?: Snippet | string;
+		/** Fired by a slide-release on this tile, instead of clicking its first control. */
+		action?: () => void;
 	}
 </script>
 
@@ -13,6 +17,7 @@
 	// Up to four small glyphs (pin, status dot, entity tag, avatar) as an inline
 	// run, folded into one 2×2 grid of 1rem cells when the row is tight. The grid
 	// is purely visual: DOM order, focus order and reading order never change.
+	import { tick } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { browser } from '../../env';
 
@@ -28,6 +33,12 @@
 		stackBelow?: string;
 		/** `container-name` of the ancestor to measure instead of the nearest one. */
 		container?: string;
+		/** While stacked (`items` only), a press opens the four glyphs as big tiles
+		 *  over the stack. `tap` keeps them open to hover, click and read; `slide`
+		 *  also lets you drag toward a corner and release to fire that tile. */
+		expand?: 'none' | 'tap' | 'slide';
+		/** Accessible name of the expanded panel. */
+		expandLabel?: string;
 		class?: string;
 	};
 	let {
@@ -36,6 +47,8 @@
 		stack = 'auto',
 		stackBelow = '30rem',
 		container,
+		expand = 'none',
+		expandLabel = 'Details',
 		class: klass = '',
 		...rest
 	}: Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own = $props();
@@ -65,6 +78,143 @@
 		return el.parentElement;
 	}
 
+	const SLIDE_THRESHOLD = 12;
+	const CONTROL = 'button, a[href], input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])';
+
+	const tiles = $derived(items?.slice(0, 4) ?? []);
+	const expandable = $derived(expand !== 'none' && stacked && tiles.length > 0);
+	let panel = $state<HTMLDivElement>();
+	let open = $state(false);
+	let armed = $state(-1);
+	let origin: { x: number; y: number } | null = null;
+
+	function show() {
+		try {
+			panel?.showPopover();
+		} catch {}
+	}
+
+	function hide() {
+		try {
+			panel?.hidePopover();
+		} catch {}
+	}
+
+	function nestedOpen(): boolean {
+		try {
+			return !!panel?.querySelector(':popover-open');
+		} catch {
+			return false;
+		}
+	}
+
+	function position() {
+		if (!root || !panel) return;
+		const r = root.getBoundingClientRect();
+		const p = panel.getBoundingClientRect();
+		const { clientWidth: vw, clientHeight: vh } = document.documentElement;
+		const clamp = (v: number, max: number) => Math.max(8, Math.min(v, max - 8));
+		panel.style.left = `${clamp(r.left + r.width / 2 - p.width / 2, vw - p.width)}px`;
+		panel.style.top = `${clamp(r.top + r.height / 2 - p.height / 2, vh - p.height)}px`;
+	}
+
+	async function onToggle(e: ToggleEvent) {
+		open = e.newState === 'open';
+		if (!open) {
+			armed = -1;
+			return;
+		}
+		await tick();
+		position();
+	}
+
+	/** Tile under a drag from the press point: 0 top-left, 1 top-right, 2 bottom-left, 3 bottom-right. */
+	function corner(dx: number, dy: number): number {
+		if (Math.hypot(dx, dy) < SLIDE_THRESHOLD) return -1;
+		const i = (dy < 0 ? 0 : 2) + (dx < 0 ? 0 : 1);
+		return i < tiles.length ? i : -1;
+	}
+
+	async function activate(i: number) {
+		const { action } = tiles[i];
+		if (action) {
+			action();
+			hide();
+			return;
+		}
+		const control = panel?.querySelectorAll('.tile')[i]?.querySelector<HTMLElement>(CONTROL);
+		if (!control) return;
+		control.click();
+		await tick();
+		if (!nestedOpen()) hide();
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		if (!expandable || expand !== 'slide' || e.button !== 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		origin = { x: e.clientX, y: e.clientY };
+		armed = -1;
+		try {
+			root?.setPointerCapture(e.pointerId);
+		} catch {}
+		show();
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (origin) armed = corner(e.clientX - origin.x, e.clientY - origin.y);
+	}
+
+	function onPointerUp() {
+		if (!origin) return;
+		origin = null;
+		const i = armed;
+		armed = -1;
+		if (i >= 0) activate(i);
+	}
+
+	function onPointerCancel() {
+		origin = null;
+		armed = -1;
+	}
+
+	// Pointer clicks on the folded cells open the panel instead of hitting the
+	// 1rem targets; keyboard activation (`detail` 0) still reaches them directly.
+	function onClickCapture(e: MouseEvent) {
+		if (!expandable || e.detail === 0) return;
+		e.preventDefault();
+		e.stopPropagation();
+		if (expand === 'tap') {
+			if (open) hide();
+			else show();
+		}
+	}
+
+	$effect(() => {
+		if (!expandable && open) hide();
+	});
+
+	$effect(() => {
+		if (!open) return;
+		const onDown = (e: PointerEvent) => {
+			const t = e.target as Node;
+			if (!panel?.contains(t) && !root?.contains(t)) hide();
+		};
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape' && !nestedOpen()) hide();
+		};
+		document.addEventListener('pointerdown', onDown, true);
+		document.addEventListener('keydown', onKey);
+		addEventListener('scroll', position, true);
+		addEventListener('resize', position);
+		return () => {
+			document.removeEventListener('pointerdown', onDown, true);
+			document.removeEventListener('keydown', onKey);
+			removeEventListener('scroll', position, true);
+			removeEventListener('resize', position);
+		};
+	});
+
 	$effect(() => {
 		if (!browser || !root || stack !== 'auto') return;
 		const el = root;
@@ -86,10 +236,16 @@
 	class:stacked
 	data-stack={stack}
 	data-stacked={stacked || undefined}
+	data-expand={expandable ? expand : undefined}
 	{...rest}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+	onpointercancel={onPointerCancel}
+	onclickcapture={onClickCapture}
 >
 	{#if items}
-		{#each items.slice(0, 4) as item, i (i)}
+		{#each tiles as item, i (i)}
 			{@const glyph = stacked && item.stacked !== undefined ? item.stacked : item.inline}
 			<span class="cell">
 				{#if typeof glyph === 'string'}{glyph}{:else}{@render glyph()}{/if}
@@ -100,6 +256,30 @@
 	{/if}
 </span>
 
+{#if expand !== 'none' && items}
+	<!-- `manual`: an `auto` popover would light-dismiss on the captured slide release. -->
+	<div
+		bind:this={panel}
+		popover="manual"
+		class="expand-panel"
+		data-expand-panel={expand}
+		role="group"
+		aria-label={expandLabel}
+		ontoggle={onToggle}
+	>
+		{#if open}
+			{#each tiles as item, i (i)}
+				{@const glyph = item.expanded ?? item.inline}
+				<span class="tile" class:armed={armed === i} data-armed={armed === i || undefined}>
+					<span class="tile-body">
+						{#if typeof glyph === 'string'}{glyph}{:else}{@render glyph()}{/if}
+					</span>
+				</span>
+			{/each}
+		{/if}
+	</div>
+{/if}
+
 <style>
 	.glyph-stack {
 		display: inline-flex;
@@ -133,4 +313,56 @@
 		font-size: var(--fs-xs);
 		line-height: 1;
 	}
+	.glyph-stack[data-expand] {
+		cursor: pointer;
+	}
+	.glyph-stack[data-expand='slide'] {
+		touch-action: none;
+		user-select: none;
+		-webkit-touch-callout: none;
+	}
+	.expand-panel {
+		position: fixed;
+		inset: auto;
+		margin: 0;
+		padding: var(--sp-1);
+		max-width: calc(100vw - 2 * var(--sp-2));
+		background: var(--bg-elevated);
+		color: var(--text);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		box-shadow: var(--shadow-md);
+	}
+	.expand-panel:popover-open {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(var(--glyph-stack-tile, 3rem), 1fr));
+		grid-auto-rows: minmax(var(--glyph-stack-tile, 3rem), 1fr);
+		gap: var(--sp-1);
+		animation: glyph-expand 0.12s var(--ease);
+	}
+	@keyframes glyph-expand {
+		from {
+			opacity: 0;
+			transform: scale(0.6);
+		}
+	}
+	.tile {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--sp-1);
+		border-radius: var(--r-sm);
+		background: var(--surface);
+		transition: background 0.08s var(--ease);
+	}
+	.tile.armed {
+		background: color-mix(in srgb, var(--accent) 18%, var(--surface));
+		box-shadow: inset 0 0 0 2px var(--accent);
+	}
+	.tile-body {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		zoom: var(--glyph-stack-zoom, 1.75);
+	}
 </style>

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

@@ -4,6 +4,10 @@ export interface GlyphStackItem {
     inline: Snippet | string;
     /** Compact variant for a 1rem grid cell (e.g. a tinted initial tile for a full Badge). */
     stacked?: Snippet | string;
+    /** Content of the enlarged tile when `expand` is on; defaults to `inline`. */
+    expanded?: Snippet | string;
+    /** Fired by a slide-release on this tile, instead of clicking its first control. */
+    action?: () => void;
 }
 import type { HTMLAttributes } from 'svelte/elements';
 type Own = {
@@ -18,6 +22,12 @@ type Own = {
     stackBelow?: string;
     /** `container-name` of the ancestor to measure instead of the nearest one. */
     container?: string;
+    /** While stacked (`items` only), a press opens the four glyphs as big tiles
+     *  over the stack. `tap` keeps them open to hover, click and read; `slide`
+     *  also lets you drag toward a corner and release to fire that tile. */
+    expand?: 'none' | 'tap' | 'slide';
+    /** Accessible name of the expanded panel. */
+    expandLabel?: string;
     class?: string;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own;

package/dist/components/molecules/InputGroup.svelte

@@ -158,13 +158,21 @@
 		top: 0;
 		height: auto;
 	}
-	/* Until the field grows into a bar, the adornments fill its height and their
-	   outer edge fuses with the field's, so the inner corners go square. */
+	/* Until the field grows into a bar, the adornments fill it inside its 1px
+	   border, their outer corners following the field's; inner corners go square. */
 	.ig:not(.ig-bar) .ig-adorn {
-		top: 0;
+		--ig-fuse-r: calc(var(--ig-radius) - 1px);
+		top: 1px;
+		bottom: 1px;
 		height: auto;
 		padding-inline: 0;
 	}
+	.ig:not(.ig-bar) .ig-leading {
+		inset-inline-start: 1px;
+	}
+	.ig:not(.ig-bar) .ig-trailing {
+		inset-inline-end: 1px;
+	}
 	.ig:not(.ig-bar) .ig-adorn > :global(*) {
 		align-self: stretch;
 		height: auto;
@@ -180,12 +188,12 @@
 		aspect-ratio: 1;
 	}
 	.ig:not(.ig-bar) .ig-leading > :global(:first-child) {
-		--btn-radius: var(--ig-radius) 0 0 var(--ig-radius);
-		border-radius: var(--ig-radius) 0 0 var(--ig-radius);
+		--btn-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
+		border-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
 	}
 	.ig:not(.ig-bar) .ig-trailing > :global(:last-child) {
-		--btn-radius: 0 var(--ig-radius) var(--ig-radius) 0;
-		border-radius: 0 var(--ig-radius) var(--ig-radius) 0;
+		--btn-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
+		border-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
 	}
 	.ig:not(.ig-bar) .ig-adorn :global(.split-main) {
 		--btn-radius: 0;
@@ -197,10 +205,10 @@
 		height: 100%;
 	}
 	.ig:not(.ig-bar) .ig-leading > :global(:first-child .split-main) {
-		--btn-radius: var(--ig-radius) 0 0 var(--ig-radius);
+		--btn-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
 	}
 	.ig:not(.ig-bar) .ig-trailing > :global(:last-child .split-caret) {
-		--pop-trigger-radius: 0 var(--ig-radius) var(--ig-radius) 0;
+		--pop-trigger-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
 	}
 	.ig-bar .ig-field {
 		padding-bottom: var(--ig-h);

package/package.json

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