@dorsk/tsumikit 0.58.0 → 0.59.0

package/README.md

@@ -520,8 +520,14 @@ pins them to the bottom edge as a textarea grows; `align="center"` is for a
 single-line `Input`. `size` sm/md/lg, `disabled` and `error` flow to the field
 through context (a `size`/`invalid`/`disabled` set on the field still wins).
 `Textarea` keeps `autoresize`, `maxHeight` and `resize="top"` (the grip is
-clipped to the space between the adornments). Tab order is leading → field →
-trailing; the group shows the focus ring around the whole unit.
+clipped to the space between the adornments). Once a `Textarea` needs more
+than one row (content, `rows`, or a dragged floor) the adornments move into a
+bar under the text: every line then runs the full width with the normal
+padding, the textarea's box (and its scrollbar) ends above the controls, and
+the bar continues the field's border. The textarea measures that in the
+single-line layout, so the switch cannot flip back and forth; the single-line
+look is untouched. Tab order is leading → field → trailing; the group shows
+the focus ring around the whole unit.
 
 ```svelte
 <InputGroup>
@@ -534,6 +540,24 @@ trailing; the group shows the focus ring around the whole unit.
 `Composer` is built on it: attachments above, `FileButton` leading, the send
 button trailing, `resize="top"` opt-in.
 
+### AttachmentList
+
+`AttachmentList` renders `files` (`File` or `{ name, size?, type?, url? }`)
+as removable mono chips with the formatted size. It sets `container-type:
+inline-size` on itself: at 30rem or narrower every file collapses to a square
+tile (a file glyph, or the image's thumbnail — an object URL for a `File`,
+`url` for a plain attachment). Tapping a tile opens a `Popover` with the full
+wrapping name, the size and a Remove button, so four screenshots take one row
+on a phone instead of four. `tiles` forces the tile mode (`false` forces
+chips); `removeLabel` names the popover button. Both variants are in the DOM
+and the container query displays one; the hidden one is `display: none`, so
+it is neither focusable nor announced. `Composer` inherits the behaviour.
+
+```svelte
+<AttachmentList files={attachments} onremove={(i) => (attachments = attachments.toSpliced(i, 1))} />
+<AttachmentList tiles files={[{ name: 'cover.png', size: 1024, type: 'image/png', url }]} />
+```
+
 ### Artwork
 
 `Artwork` is the one cover/thumbnail tile: `src` + `alt` (required) render a
@@ -574,6 +598,30 @@ top-right corner, ringed with `--avatar-status-ring` (default `--bg-elevated`).
 </Avatar>
 ```
 
+### GlyphStack
+
+`GlyphStack` lays out up to four small glyphs (a pin, a status dot, an entity
+tag, an avatar) as an inline run, and folds them into one 2×2 grid of 1rem
+cells with a 1px gap when the row is tight — the four slots plus three gaps
+a phone-width title cannot spare. `stack` never | always | auto (default);
+`auto` measures the nearest query container (any `.cq`, an AppShell region,
+or the ancestor whose `container-name` is `container`) and folds below
+`stackBelow` (default `30rem`, like the `.cq-*` utilities). Pass `items` as
+`{ inline, stacked? }` pairs (snippets or strings) so a glyph can swap to a
+compact variant in the grid — a full `Badge` inline, a tinted initial tile
+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`).
+
+```svelte
+<GlyphStack stackBelow="34rem" items={[
+  { inline: pin },
+  { inline: dot },
+  { inline: machine, stacked: machineTile },
+  { inline: avatar }
+]} />
+```
+
 ### SplitButton
 
 `SplitButton` fuses a primary action with a narrow caret that opens a `Menu`:

package/dist/autoresize.d.ts

@@ -5,7 +5,9 @@
  *
  * Usage: <textarea use:autoresize={value} ...></textarea>
  */
-/** Height `rows` lines would occupy: line boxes plus vertical padding and borders. */
+/** Height `rows` lines occupy: line boxes plus vertical padding and borders. */
+export declare function rowsHeight(node: HTMLTextAreaElement, rows: number): number;
+/** The `rows` attribute as a height floor; a single row has none. */
 export declare function rowsFloor(node: HTMLTextAreaElement): number;
 export declare function autoresize(node: HTMLTextAreaElement, _value?: string): {
     update(): void;

package/dist/autoresize.js

@@ -5,11 +5,8 @@
  *
  * Usage: <textarea use:autoresize={value} ...></textarea>
  */
-/** Height `rows` lines would occupy: line boxes plus vertical padding and borders. */
-export function rowsFloor(node) {
-    const rows = node.rows || 0;
-    if (rows <= 1)
-        return 0;
+/** Height `rows` lines occupy: line boxes plus vertical padding and borders. */
+export function rowsHeight(node, rows) {
     const cs = getComputedStyle(node);
     const fontSize = parseFloat(cs.fontSize) || 16;
     const lh = parseFloat(cs.lineHeight) || fontSize * 1.2;
@@ -19,6 +16,11 @@ export function rowsFloor(node) {
         (parseFloat(cs.borderBottomWidth) || 0);
     return rows * lh + box;
 }
+/** The `rows` attribute as a height floor; a single row has none. */
+export function rowsFloor(node) {
+    const rows = node.rows || 0;
+    return rows <= 1 ? 0 : rowsHeight(node, rows);
+}
 export function autoresize(node, _value) {
     const resize = () => {
         // A manual drag handle may set `min-height` as a user-chosen floor; grow

package/dist/components/atoms/Textarea.svelte

@@ -19,7 +19,7 @@
 	// still inserts a newline) or Ctrl/Meta+Enter (`submitOn="mod-enter"`, the
 	// default whenever `onsubmit` is given).
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	import { autoresize as autoresizeAction } from '../../autoresize';
+	import { autoresize as autoresizeAction, rowsFloor, rowsHeight } from '../../autoresize';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
 	import { getInputGroupContext } from '../../input-group-context';
 
@@ -84,6 +84,41 @@
 
 	$effect(() => warnUnlabelled(el, 'Textarea'));
 
+	// Grouped: report whether the content needs more than one row when laid out
+	// with the single-line padding (measured in that layout so the bar cannot
+	// flip back and forth), which moves the adornments into a bar under the text.
+	function probeBar() {
+		if (!el || !group) return;
+		const node = el;
+		const wasBar = node.classList.contains('bar');
+		const prevHeight = node.style.height;
+		const floor = parseFloat(node.style.minHeight) || 0;
+		node.classList.remove('bar');
+		node.style.height = 'auto';
+		node.style.minHeight = '';
+		const cs = getComputedStyle(node);
+		const borders = (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
+		const height = Math.max(node.scrollHeight + borders, floor, rowsFloor(node));
+		const oneRow = Math.max(rowsHeight(node, 1), parseFloat(cs.minHeight) || 0);
+		node.style.height = prevHeight;
+		if (floor) node.style.minHeight = `${floor}px`;
+		if (wasBar) node.classList.add('bar');
+		group.setBar(height > oneRow + 1);
+	}
+	$effect(() => {
+		if (!group) return;
+		void value;
+		void group.leadingW;
+		void group.trailingW;
+		probeBar();
+	});
+	$effect(() => {
+		if (!el || !group || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver(probeBar);
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
 	const handleEdge = $derived(resize);
 	const showHandle = $derived(handleEdge !== 'none');
 	const submitMode = $derived(submitOn === 'none' && onsubmit ? 'mod-enter' : submitOn);
@@ -156,6 +191,7 @@
 	class:no-shrink={!shrink}
 	class:block={block}
 	class:grouped={!!group}
+	class:bar={!!group?.bar}
 	data-tsu="Textarea"
 >
 	{#if autoresize}
@@ -166,6 +202,7 @@
 			class:textarea-sm={sizeEff === 'sm'}
 			class:textarea-lg={sizeEff === 'lg'}
 			class:grouped={!!group}
+			class:bar={!!group?.bar}
 			class:capped={!!maxHeight}
 			disabled={isDisabled}
 			style:max-height={maxHeight}
@@ -185,6 +222,7 @@
 			class:textarea-sm={sizeEff === 'sm'}
 			class:textarea-lg={sizeEff === 'lg'}
 			class:grouped={!!group}
+			class:bar={!!group?.bar}
 			class:capped={!!maxHeight}
 			disabled={isDisabled}
 			style:max-height={maxHeight}
@@ -288,6 +326,12 @@
 	.textarea.grouped:focus-visible {
 		outline: none;
 	}
+	.textarea.grouped.bar {
+		padding-inline: var(--ig-pad-x);
+		border-bottom: 0;
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+	}
 	.textarea-wrap.grouped {
 		width: 100%;
 	}
@@ -295,6 +339,10 @@
 		left: var(--ig-leading-w, 0px);
 		right: var(--ig-trailing-w, 0px);
 	}
+	.textarea-wrap.grouped.bar .resize-handle {
+		left: 0;
+		right: 0;
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}

package/dist/components/molecules/AttachmentList.svelte

@@ -1,17 +1,30 @@
 <script lang="ts">
-	// Removable file chips for a composer or upload form.
+	// Removable file chips; narrow containers (or `tiles`) collapse each file to a
+	// tile whose Popover carries name, size and Remove. A Tooltip would not open on
+	// iOS, where tapping never focuses a button. Both variants render and a
+	// container query hides one with `display: none`, keeping it out of the tab order.
+	import { untrack } from 'svelte';
 	import Badge from '../atoms/Badge.svelte';
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import Text from '../atoms/Text.svelte';
+	import Popover from './Popover.svelte';
 
-	export type Attachment = { name: string; size?: number };
+	export type Attachment = { name: string; size?: number; type?: string; url?: string };
 
 	let {
 		files,
 		onremove,
+		tiles = 'auto',
+		removeLabel = 'Remove',
 		class: klass = '',
 		style: styleProp = ''
 	}: {
 		files: (File | Attachment)[];
 		onremove?: (index: number) => void;
+		/** `auto` switches to tiles when the list is at most 30rem wide. */
+		tiles?: boolean | 'auto';
+		removeLabel?: string;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -22,23 +35,89 @@
 		if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
 		return `${(size / 1024 / 1024).toFixed(1)} MB`;
 	}
+
+	function isImage(f: File | Attachment): boolean {
+		return !!f.type?.startsWith('image/');
+	}
+
+	let objectUrls = $state<Map<File, string>>(new Map());
+
+	$effect(() => {
+		const prev = untrack(() => objectUrls);
+		const next = new Map<File, string>();
+		for (const f of files) {
+			if (!(f instanceof File) || !isImage(f)) continue;
+			next.set(f, prev.get(f) ?? URL.createObjectURL(f));
+		}
+		for (const [f, url] of prev) if (!next.has(f)) URL.revokeObjectURL(url);
+		objectUrls = next;
+	});
+
+	$effect(() => () => {
+		for (const url of untrack(() => objectUrls).values()) URL.revokeObjectURL(url);
+	});
+
+	function thumb(f: File | Attachment): string | undefined {
+		if (!isImage(f)) return undefined;
+		return f instanceof File ? objectUrls.get(f) : f.url;
+	}
 </script>
 
 {#if files.length}
-	<ul data-tsu="AttachmentList" class="attachments {klass}" style={styleProp}>
+	<ul
+		data-tsu="AttachmentList"
+		class="attachments {klass}"
+		class:auto={tiles === 'auto'}
+		class:tiles={tiles === true}
+		style={styleProp}
+	>
 		{#each files as f, i (`${f.name}-${i}`)}
-			<li>
-				<Badge
-					mono
-					truncate
-					maxWidth="16rem"
-					removable={!!onremove}
-					onremove={() => onremove?.(i)}
-					title={f.name}
-				>
-					{f.name}{#if f.size !== undefined}<span class="size">{fmt(f.size)}</span>{/if}
-				</Badge>
-			</li>
+			{#if tiles !== true}
+				<li class="chip">
+					<Badge
+						mono
+						truncate
+						maxWidth="16rem"
+						removable={!!onremove}
+						onremove={() => onremove?.(i)}
+						title={f.name}
+					>
+						{f.name}{#if f.size !== undefined}<span class="size">{fmt(f.size)}</span>{/if}
+					</Badge>
+				</li>
+			{/if}
+			{#if tiles !== false}
+				<li class="tile">
+					<Popover label={f.name} box="lg" placement="top-start" style="--pop-trigger-pad: 0; --pop-trigger-border: var(--border-strong); --pop-trigger-bg: var(--bg)">
+						{#snippet trigger()}
+							{@const src = thumb(f)}
+							{#if src}
+								<img class="thumb" {src} alt="" />
+							{:else}
+								<Icon name={isImage(f) ? 'image' : 'file'} size={18} />
+							{/if}
+						{/snippet}
+						{#snippet children({ close })}
+							<div class="detail">
+								<Text variant="code" size="sm" class="detail-name">{f.name}</Text>
+								{#if f.size !== undefined}<Text size="xs" tone="faint">{fmt(f.size)}</Text>{/if}
+								{#if onremove}
+									<Button
+										size="sm"
+										variant="danger"
+										onclick={() => {
+											close();
+											onremove?.(i);
+										}}
+									>
+										{removeLabel}
+									</Button>
+								{/if}
+							</div>
+						{/snippet}
+					</Popover>
+				</li>
+			{/if}
 		{/each}
 	</ul>
 {/if}
@@ -52,8 +131,43 @@
 		padding: 0;
 		list-style: none;
 	}
+	.attachments.auto {
+		container-type: inline-size;
+	}
 	.size {
 		margin-inline-start: var(--sp-1);
 		color: var(--text-faint);
 	}
+	li {
+		display: flex;
+		min-width: 0;
+	}
+	.auto .tile {
+		display: none;
+	}
+	@container (max-width: 30rem) {
+		.auto .chip {
+			display: none;
+		}
+		.auto .tile {
+			display: flex;
+		}
+	}
+	.thumb {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: calc(var(--r-md) - 1px);
+	}
+	.detail {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--sp-1);
+		padding: var(--sp-1);
+		max-width: 16rem;
+	}
+	.detail :global(.detail-name) {
+		overflow-wrap: anywhere;
+	}
 </style>

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

@@ -1,10 +1,15 @@
 export type Attachment = {
     name: string;
     size?: number;
+    type?: string;
+    url?: string;
 };
 type $$ComponentProps = {
     files: (File | Attachment)[];
     onremove?: (index: number) => void;
+    /** `auto` switches to tiles when the list is at most 30rem wide. */
+    tiles?: boolean | 'auto';
+    removeLabel?: string;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/Composer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	// Chat composer: autoresizing Textarea with attach + send controls fused into
 	// one InputGroup, submit shortcuts, prompt history on ↑/↓ at the text edges,
-	// paste-to-attach and drag-over state. Attachments render as removable chips
-	// above the field.
+	// paste-to-attach and drag-over state. Attachments render above the field as
+	// removable chips, or as tiles once the composer is narrow.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
 	import Textarea from '../atoms/Textarea.svelte';

package/dist/components/molecules/GlyphStack.svelte

@@ -0,0 +1,136 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface GlyphStackItem {
+		/** Rendered in the inline run, and in the grid when `stacked` is unset. */
+		inline: Snippet | string;
+		/** Compact variant for a 1rem grid cell (e.g. a tinted initial tile for a full Badge). */
+		stacked?: Snippet | string;
+	}
+</script>
+
+<script lang="ts">
+	// 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 type { HTMLAttributes } from 'svelte/elements';
+	import { browser } from '../../env';
+
+	type Own = {
+		/** Glyphs as `{ inline, stacked? }` pairs; alternative to `children`. */
+		items?: GlyphStackItem[];
+		/** Free-form run — each direct child becomes a cell. */
+		children?: Snippet;
+		/** `auto` folds below `stackBelow`, measured on the nearest query container
+		 *  (any `.cq`, an AppShell region, or the ancestor named `container`). */
+		stack?: 'never' | 'always' | 'auto';
+		/** Container width (px/em/rem) under which `auto` folds. */
+		stackBelow?: string;
+		/** `container-name` of the ancestor to measure instead of the nearest one. */
+		container?: string;
+		class?: string;
+	};
+	let {
+		items,
+		children,
+		stack = 'auto',
+		stackBelow = '30rem',
+		container,
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own = $props();
+
+	let root = $state<HTMLElement>();
+	let width = $state(Number.POSITIVE_INFINITY);
+	let limit = $state(0);
+	const stacked = $derived(stack === 'always' || (stack === 'auto' && width < limit));
+
+	function toPx(length: string, el: HTMLElement): number {
+		const n = Number.parseFloat(length);
+		const fontSize = (node: Element) => Number.parseFloat(getComputedStyle(node).fontSize);
+		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
+		if (length.endsWith('em')) return n * fontSize(el);
+		return n;
+	}
+
+	function queryContainer(el: HTMLElement, name?: string): HTMLElement | null {
+		for (let node = el.parentElement; node; node = node.parentElement) {
+			const style = getComputedStyle(node);
+			if (name) {
+				if (style.containerName?.split(/\s+/).includes(name)) return node;
+			} else if (style.containerType && style.containerType !== 'normal') {
+				return node;
+			}
+		}
+		return el.parentElement;
+	}
+
+	$effect(() => {
+		if (!browser || !root || stack !== 'auto') return;
+		const el = root;
+		const target = queryContainer(el, container);
+		if (!target) return;
+		limit = toPx(stackBelow, el);
+		const observer = new ResizeObserver(([entry]) => {
+			width = entry.contentRect.width;
+		});
+		observer.observe(target);
+		return () => observer.disconnect();
+	});
+</script>
+
+<span
+	bind:this={root}
+	data-tsu="GlyphStack"
+	class="glyph-stack {klass}"
+	class:stacked
+	data-stack={stack}
+	data-stacked={stacked || undefined}
+	{...rest}
+>
+	{#if items}
+		{#each items.slice(0, 4) 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}
+			</span>
+		{/each}
+	{:else}
+		{@render children?.()}
+	{/if}
+</span>
+
+<style>
+	.glyph-stack {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--glyph-stack-gap, var(--sp-1));
+		flex: none;
+		vertical-align: middle;
+	}
+	.cell {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+	}
+	.stacked {
+		display: inline-grid;
+		grid-template-columns: repeat(2, 1rem);
+		grid-auto-rows: 1rem;
+		gap: 1px;
+		place-items: center;
+	}
+	.stacked > :global(*) {
+		width: 1rem;
+		height: 1rem;
+		max-width: 1rem;
+		max-height: 1rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		font-size: var(--fs-xs);
+		line-height: 1;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+export interface GlyphStackItem {
+    /** Rendered in the inline run, and in the grid when `stacked` is unset. */
+    inline: Snippet | string;
+    /** Compact variant for a 1rem grid cell (e.g. a tinted initial tile for a full Badge). */
+    stacked?: Snippet | string;
+}
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    /** Glyphs as `{ inline, stacked? }` pairs; alternative to `children`. */
+    items?: GlyphStackItem[];
+    /** Free-form run — each direct child becomes a cell. */
+    children?: Snippet;
+    /** `auto` folds below `stackBelow`, measured on the nearest query container
+     *  (any `.cq`, an AppShell region, or the ancestor named `container`). */
+    stack?: 'never' | 'always' | 'auto';
+    /** Container width (px/em/rem) under which `auto` folds. */
+    stackBelow?: string;
+    /** `container-name` of the ancestor to measure instead of the nearest one. */
+    container?: string;
+    class?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own;
+declare const GlyphStack: import("svelte").Component<$$ComponentProps, {}, "">;
+type GlyphStack = ReturnType<typeof GlyphStack>;
+export default GlyphStack;

package/dist/components/molecules/InputGroup.svelte

@@ -44,11 +44,24 @@
 		},
 		get invalid() {
 			return error;
+		},
+		get leadingW() {
+			return leadingW;
+		},
+		get trailingW() {
+			return trailingW;
+		},
+		get bar() {
+			return bar;
+		},
+		setBar(next) {
+			bar = next && !!(leading || trailing);
 		}
 	});
 
 	let leadingW = $state(0);
 	let trailingW = $state(0);
+	let bar = $state(false);
 
 	function measure(set: (width: number) => void): Attachment {
 		return (node) => {
@@ -73,6 +86,7 @@
 	data-tsu="InputGroup"
 	class="ig {klass}"
 	class:ig-center={align === 'center'}
+	class:ig-bar={bar}
 	class:ig-sm={size === 'sm'}
 	class:ig-lg={size === 'lg'}
 	class:disabled
@@ -93,7 +107,10 @@
 	/* The field's own border box spans the whole group: Gecko zooms to the
 	   focused element's rect on mobile, so the adornments must overlay it, never
 	   sit beside a narrower field. The field reads --ig-leading-w /
-	   --ig-trailing-w to keep its text clear of them. */
+	   --ig-trailing-w to keep its text clear of them. Once a textarea is taller
+	   than one row it reports `bar`: the adornments then sit in a band under
+	   the text (::before continues the field's border), so every line runs
+	   full width and the scrollbar ends above the controls. */
 	.ig {
 		--ig-h: var(--control-height-default);
 		--ig-pad-x: var(--sp-3);
@@ -141,6 +158,27 @@
 		top: 0;
 		height: auto;
 	}
+	.ig-bar .ig-field {
+		padding-bottom: var(--ig-h);
+	}
+	.ig-bar::before {
+		content: '';
+		position: absolute;
+		inset: auto 0 0 0;
+		height: var(--ig-h);
+		background: var(--textarea-bg, var(--bg));
+		border: 1px solid var(--textarea-border, var(--border-strong));
+		border-top: 0;
+		border-radius: 0 0 var(--ig-radius) var(--ig-radius);
+		transition: border-color 0.12s var(--ease);
+		pointer-events: none;
+	}
+	.ig-bar:has(.ig-field :global(:focus))::before {
+		border-color: var(--accent);
+	}
+	.ig-bar:has(.ig-field :global([aria-invalid='true']))::before {
+		border-color: var(--danger);
+	}
 	.ig:has(:focus-visible)::after {
 		content: '';
 		position: absolute;

package/dist/components/molecules/Menu.svelte

@@ -103,16 +103,6 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
-	$effect(() => {
-		const pop = listEl?.closest<HTMLElement>('[popover]');
-		if (!pop) return;
-		const isOpen = pop.matches(':popover-open');
-		try {
-			if (open && !isOpen) pop.showPopover();
-			else if (!open && isOpen) pop.hidePopover();
-		} catch {}
-	});
-
 	function buttons(): HTMLButtonElement[] {
 		return listEl
 			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)'))
@@ -167,12 +157,9 @@
 	{gap}
 	role="menu"
 	haspopup="menu"
-	onclose={() => {
-		open = false;
-		onclose?.();
-	}}
+	bind:open
+	{onclose}
 	onopen={() => {
-		open = true;
 		queueMicrotask(() => focusAt(0));
 		onopen?.();
 	}}

package/dist/components/molecules/Popover.svelte

@@ -76,6 +76,8 @@
 		role?: PanelRole;
 		/** `aria-haspopup` announced on the trigger. */
 		haspopup?: HasPopup;
+		/** Bindable open state; setting it opens or closes the panel, even before its first open. */
+		open?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
 		class?: string;
@@ -110,6 +112,7 @@
 		href,
 		role = 'dialog',
 		haspopup = 'dialog',
+		open = $bindable(false),
 		onopen,
 		onclose,
 		class: klass = '',
@@ -133,7 +136,14 @@
 	// reopening is instant. The panel element itself always renders — the native
 	// `popovertarget` wiring needs its id present in the DOM at all times.
 	let opened = $state(false);
-	let open = $state(false);
+
+	let shown = false;
+
+	$effect(() => {
+		if (!panelEl) return;
+		if (open && !shown) show();
+		else if (!open && shown) close();
+	});
 
 	function close() {
 		try {
@@ -210,6 +220,7 @@
 	}
 
 	async function onToggle(e: ToggleEvent) {
+		shown = e.newState === 'open';
 		if (e.newState === 'open') {
 			const firstOpen = !opened;
 			opened = true;

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

@@ -62,6 +62,8 @@ type Own = {
     role?: PanelRole;
     /** `aria-haspopup` announced on the trigger. */
     haspopup?: HasPopup;
+    /** Bindable open state; setting it opens or closes the panel, even before its first open. */
+    open?: boolean;
     onopen?: () => void;
     onclose?: () => void;
     class?: string;
@@ -71,6 +73,6 @@ type Own = {
     panelStyle?: string;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
-declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/molecules/SplitButton.svelte

@@ -78,16 +78,10 @@
 	const height = $derived(control ? 'var(--control-height)' : HEIGHT[size]);
 	const caretDisabled = $derived(disabled || menuDisabled);
 
-	let caretEl = $state<HTMLSpanElement | null>(null);
-
-	function openMenu() {
-		caretEl?.querySelector<HTMLButtonElement>('[popovertarget]')?.click();
-	}
-
 	function onPrimaryKeydown(e: KeyboardEvent) {
 		if (e.key !== 'ArrowDown' || caretDisabled) return;
 		e.preventDefault();
-		openMenu();
+		open = true;
 	}
 </script>
 
@@ -114,7 +108,7 @@
 			{@render children()}
 		</Button>
 	</span>
-	<span class="split-caret" bind:this={caretEl}>
+	<span class="split-caret">
 		<Menu
 			{label}
 			{items}

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export { default as FileButton } from './components/molecules/FileButton.svelte'
 export { default as FilterInput, type FilterInputContext, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { type DiffStats, default as GitRef, type PrState, type PullRequest, } from './components/molecules/GitRef.svelte';
+export { default as GlyphStack, type GlyphStackItem, } from './components/molecules/GlyphStack.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
 export { default as InputGroup } from './components/molecules/InputGroup.svelte';
 export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';

package/dist/index.js

@@ -72,6 +72,7 @@ export { default as FileButton } from './components/molecules/FileButton.svelte'
 export { default as FilterInput, } from './components/molecules/FilterInput.svelte';
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { default as GitRef, } from './components/molecules/GitRef.svelte';
+export { default as GlyphStack, } from './components/molecules/GlyphStack.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
 export { default as InputGroup } from './components/molecules/InputGroup.svelte';
 export { default as KeyValue, } from './components/molecules/KeyValue.svelte';

package/dist/input-group-context.d.ts

@@ -5,6 +5,12 @@ export type InputGroupContext = {
     readonly size: ControlSize;
     readonly disabled: boolean;
     readonly invalid: boolean;
+    readonly leadingW: number;
+    readonly trailingW: number;
+    /** True once the field is taller than one row: the adornments move to a
+     *  bar under the text instead of overlaying its last line. */
+    readonly bar: boolean;
+    setBar(bar: boolean): void;
 };
 export declare function setInputGroupContext(ctx: InputGroupContext): InputGroupContext;
 export declare function getInputGroupContext(): InputGroupContext | undefined;

package/package.json

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