@dorsk/tsumikit 0.82.0 → 0.82.2

package/README.md

@@ -944,6 +944,36 @@ opaque and the blur is dropped; `prefers-contrast: more` also uses the opaque sc
 </Backdrop>
 ```
 
+### Masked spans while typing (Textarea `segments`)
+
+`Textarea` (and `Composer`, which forwards it) accepts `segments`, a function that splits the
+current value into spans for a mirror overlay rendered behind a text-transparent native textarea.
+Each segment's `text` is rendered verbatim so glyph widths match 1:1; `mask: true` keeps the span's
+layout but hides its glyphs under a token fill (`--textarea-mask` overrides it); `class` is added
+to the span. The texts must concatenate back to the value. Caret, selection, IME composition, undo,
+autoresize and scrolling stay native. The overlay is `aria-hidden`: assistive tech and the form
+still get the raw value. Without `segments` the Textarea renders exactly as before.
+
+```svelte
+<script lang="ts">
+	import { Textarea } from '@dorsk/tsumikit';
+	const TAG = /(<redacted>)([\s\S]*?)(<\/redacted>)/g;
+	function segments(text: string) {
+		const out = [];
+		let last = 0;
+		for (const m of text.matchAll(TAG)) {
+			if (m.index > last) out.push({ text: text.slice(last, m.index) });
+			out.push({ text: m[1], class: 'tag' }, { text: m[2], mask: true }, { text: m[3], class: 'tag' });
+			last = m.index + m[0].length;
+		}
+		if (last < text.length) out.push({ text: text.slice(last) });
+		return out;
+	}
+</script>
+
+<Textarea bind:value autoresize {segments} aria-label="Message" />
+```
+
 ### Breakpoints
 
 One list for every media query: `sm` 40rem (640px), `md` 48rem (768px), `lg`

package/dist/components/atoms/Textarea.svelte

@@ -18,11 +18,20 @@
 	// `onsubmit` fires with the value on Enter (`submitOn="enter"`, Shift+Enter
 	// still inserts a newline) or Ctrl/Meta+Enter (`submitOn="mod-enter"`, the
 	// default whenever `onsubmit` is given).
+	//
+	// `segments` opts into a mirror overlay: a layer behind the (text-transparent)
+	// textarea that renders the value split into spans, so tagged spans can show
+	// masked while the user types. The native control keeps caret, selection, IME,
+	// undo, autoresize and scrolling; the overlay shares its box, font and
+	// wrapping rules and follows its scroll offset. The raw value stays what
+	// assistive tech reads and what the form submits.
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction, rowsFloor, rowsHeight } from '../../autoresize';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
 	import { getInputGroupContext } from '../../input-group-context';
 
+	export type TextareaSegment = { text: string; mask?: boolean; class?: string };
+
 	type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
 		mono?: boolean;
 		autoresize?: boolean;
@@ -45,6 +54,11 @@
 		/** Fires with the current value on the `submitOn` key combo. */
 		onsubmit?: (value: string) => void;
 		submitOn?: 'enter' | 'mod-enter' | 'none';
+		/** Split the value into spans for the mirror overlay; the texts must
+		 *  concatenate back to the value so glyphs line up 1:1. `mask` keeps a
+		 *  span's layout but hides its glyphs under a fill; `class` is added to
+		 *  the span. Unset: no overlay, no extra DOM. */
+		segments?: (value: string) => TextareaSegment[];
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
@@ -66,7 +80,10 @@
 		maxHeight,
 		onsubmit,
 		submitOn = 'none',
+		segments,
 		onkeydown,
+		oninput,
+		onscroll,
 		id,
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
@@ -136,6 +153,27 @@
 		onsubmit(String(value ?? ''));
 	}
 
+	let mirror = $state<HTMLDivElement | null>(null);
+	const segs = $derived(segments ? segments(String(value ?? '')) : null);
+
+	function syncScroll() {
+		if (!el || !mirror) return;
+		mirror.scrollTop = el.scrollTop;
+		mirror.scrollLeft = el.scrollLeft;
+	}
+	function handleInput(e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) {
+		oninput?.(e);
+		if (segs) syncScroll();
+	}
+	function handleScroll(e: UIEvent & { currentTarget: EventTarget & HTMLTextAreaElement }) {
+		onscroll?.(e);
+		if (segs) syncScroll();
+	}
+	$effect(() => {
+		void segs;
+		syncScroll();
+	});
+
 	// --- manual resize drag (mirrors AppShell/Modal: rAF-throttled pointer drag) ---
 	let dragging = $state(false);
 	let rafId = 0;
@@ -195,7 +233,23 @@
 	class:grouped={!!group}
 	class:bar={!!group?.bar}
 	data-tsu="Textarea"
+	class:mirrored={!!segs}
 >
+	{#if segs}
+		<div
+			bind:this={mirror}
+			class="mirror textarea"
+			class:mono
+			class:textarea-sm={sizeEff === 'sm'}
+			class:textarea-lg={sizeEff === 'lg'}
+			class:grouped={!!group}
+			class:bar={!!group?.bar}
+			class:capped={!!maxHeight}
+			style:max-height={maxHeight}
+			aria-hidden="true"
+			data-tsu="TextareaMirror"
+		>{#each segs as seg}<span class={seg.class} class:masked={!!seg.mask}>{seg.text}</span>{/each}<span class="tail">{'\u200b'}</span></div>
+	{/if}
 	{#if autoresize}
 		<textarea
 			bind:this={el}
@@ -206,6 +260,7 @@
 			class:grouped={!!group}
 			class:bar={!!group?.bar}
 			class:capped={!!maxHeight}
+			class:mirrored={!!segs}
 			disabled={isDisabled}
 			style:max-height={maxHeight}
 			bind:value
@@ -213,6 +268,8 @@
 			{...rest}
 			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
+			oninput={segs || oninput ? handleInput : undefined}
+			onscroll={segs || onscroll ? handleScroll : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
 			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
@@ -227,12 +284,15 @@
 			class:grouped={!!group}
 			class:bar={!!group?.bar}
 			class:capped={!!maxHeight}
+			class:mirrored={!!segs}
 			disabled={isDisabled}
 			style:max-height={maxHeight}
 			bind:value
 			{...rest}
 			placeholder={rest.placeholder ?? (field ? ' ' : undefined)}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
+			oninput={segs || oninput ? handleInput : undefined}
+			onscroll={segs || onscroll ? handleScroll : undefined}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
 			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
@@ -294,6 +354,47 @@
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
 		font-family: inherit;
+		white-space: pre-wrap;
+		overflow-wrap: break-word;
+		word-break: normal;
+		tab-size: 4;
+	}
+	/* Mirror overlay: same box, font and wrapping as the textarea; the textarea
+	   above it keeps its border, caret and selection but shows no glyphs. */
+	.textarea-wrap.mirrored {
+		isolation: isolate;
+	}
+	.mirror {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		box-sizing: border-box;
+		min-height: 0;
+		overflow: auto;
+		border-color: transparent;
+		box-shadow: none;
+		pointer-events: none;
+		transition: none;
+	}
+	.textarea.mirrored {
+		position: relative;
+		z-index: 1;
+		color: transparent;
+		caret-color: var(--textarea-fg, var(--text));
+		background: transparent;
+	}
+	.textarea.mirrored::selection {
+		color: transparent;
+		background: color-mix(in srgb, var(--accent) 30%, transparent);
+	}
+	.mirrored .resize-handle {
+		z-index: 2;
+	}
+	.mirror .masked {
+		color: transparent;
+		background: var(--textarea-mask, color-mix(in srgb, var(--text) 18%, transparent));
+		border-radius: var(--r-sm);
+		box-decoration-break: clone;
 	}
 	.textarea:focus {
 		outline: none;

package/dist/components/atoms/Textarea.svelte.d.ts

@@ -1,5 +1,10 @@
 import type { ControlSize } from '../../size';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
+export type TextareaSegment = {
+    text: string;
+    mask?: boolean;
+    class?: string;
+};
 type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
     mono?: boolean;
     autoresize?: boolean;
@@ -22,6 +27,11 @@ type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
     /** Fires with the current value on the `submitOn` key combo. */
     onsubmit?: (value: string) => void;
     submitOn?: 'enter' | 'mod-enter' | 'none';
+    /** Split the value into spans for the mirror overlay; the texts must
+     *  concatenate back to the value so glyphs line up 1:1. `mask` keeps a
+     *  span's layout but hides its glyphs under a fill; `class` is added to
+     *  the span. Unset: no overlay, no extra DOM. */
+    segments?: (value: string) => TextareaSegment[];
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];

package/dist/components/layouts/AppShell.svelte

@@ -57,8 +57,9 @@
 		/** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
 		 *  and the header only covers the content column (brand sits top-left). */
 		layout?: 'header-top' | 'sidebar-full';
-		/** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
-		 *  footer stays visible on long pages. */
+		/** Pin the desktop sidebar to the viewport (own scroll) so its footer
+		 *  stays visible on long pages. Sits below the header in `header-top`,
+		 *  spans the full viewport height in `sidebar-full`. */
 		stickySidebar?: boolean;
 		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
 		sidebarPadding?: 'none' | 'sm' | 'md';
@@ -414,9 +415,13 @@
 		}
 		.shell.sticky-sidebar .shell-sidebar {
 			position: sticky;
+			top: var(--shell-header-h);
+			height: calc(100dvh - var(--shell-header-h));
+			align-self: start;
+		}
+		.shell.sticky-sidebar.sidebar-full .shell-sidebar {
 			top: 0;
 			height: 100dvh;
-			align-self: start;
 		}
 		.shell-scrim,
 		.shell-menu-btn {

package/dist/components/layouts/AppShell.svelte.d.ts

@@ -18,8 +18,9 @@ type $$ComponentProps = {
     /** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
      *  and the header only covers the content column (brand sits top-left). */
     layout?: 'header-top' | 'sidebar-full';
-    /** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
-     *  footer stays visible on long pages. */
+    /** Pin the desktop sidebar to the viewport (own scroll) so its footer
+     *  stays visible on long pages. Sits below the header in `header-top`,
+     *  spans the full viewport height in `sidebar-full`. */
     stickySidebar?: boolean;
     /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
     sidebarPadding?: 'none' | 'sm' | 'md';

package/dist/components/molecules/Composer.svelte

@@ -6,7 +6,7 @@
 	// `toolbarEnd` move attach + send into a row under the field.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
-	import Textarea from '../atoms/Textarea.svelte';
+	import Textarea, { type TextareaSegment } from '../atoms/Textarea.svelte';
 	import AttachmentList from './AttachmentList.svelte';
 	import FileButton from './FileButton.svelte';
 	import InputGroup from './InputGroup.svelte';
@@ -26,6 +26,7 @@
 		maxHeight = '40vh',
 		rows = 1,
 		resize = 'none',
+		segments,
 		sendLabel = 'Send',
 		attachLabel = 'Attach',
 		leading,
@@ -52,6 +53,8 @@
 		rows?: number;
 		/** Manual drag handle on the top edge; `none` hides it. */
 		resize?: 'none' | 'top';
+		/** Mirror overlay segments, forwarded to the Textarea. */
+		segments?: (value: string) => TextareaSegment[];
 		sendLabel?: string;
 		attachLabel?: string;
 		leading?: Snippet;
@@ -200,6 +203,7 @@
 			{maxHeight}
 			{placeholder}
 			{resize}
+			{segments}
 			aria-label={placeholder}
 			disabled={disabled || busy}
 			{onkeydown}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type TextareaSegment } from '../atoms/Textarea.svelte';
 type $$ComponentProps = {
     value?: string;
     onsubmit: (value: string, files: File[]) => void;
@@ -17,6 +18,8 @@ type $$ComponentProps = {
     rows?: number;
     /** Manual drag handle on the top edge; `none` hides it. */
     resize?: 'none' | 'top';
+    /** Mirror overlay segments, forwarded to the Textarea. */
+    segments?: (value: string) => TextareaSegment[];
     sendLabel?: string;
     attachLabel?: string;
     leading?: Snippet;

package/dist/components/molecules/Modal.svelte

@@ -231,12 +231,15 @@
 
 <style>
 	/* Reset the UA dialog box: we own the surface via the inner .sheet. The
-	   dialog itself is just the centering/backdrop layer. */
+	   dialog itself is just the centering/backdrop layer. It must never scroll:
+	   the UA `overflow: auto` lets the initial focus scroll the sheet into view
+	   while it still sits at `translate: 0 100%`, which eats the slide-in. */
 	.modal {
 		margin: 0;
 		padding: 0;
 		border: 0;
 		background: none;
+		overflow: clip;
 		max-width: 100vw;
 		max-height: 100dvh;
 		width: 100%;

package/dist/components/molecules/RichSelect.svelte

@@ -83,6 +83,7 @@
 
 	const uid = Math.random().toString(36).slice(2, 8);
 	const listId = `rs-list-${uid}`;
+	const nameId = `rs-name-${uid}`;
 	const optionId = (i: number) => `rs-opt-${uid}-${i}`;
 
 	let root = $state<HTMLDivElement | null>(null);
@@ -96,6 +97,7 @@
 
 	const selectedIndex = $derived(options.findIndex((o) => getKey(o) === value));
 	const selectedOption = $derived(selectedIndex >= 0 ? options[selectedIndex] : undefined);
+	const triggerName = $derived(selectedOption === undefined ? label : `${label}, ${getLabel(selectedOption)}`);
 	const typeahead = createTypeahead();
 
 	const triggerEl = () => root?.querySelector<HTMLElement>('.rs-trigger') ?? null;
@@ -150,6 +152,7 @@
 		if (key !== value) {
 			value = key;
 			onchange?.(key, next);
+			if (!closeAfter) announcement = getLabel(next);
 			playSound(closeAfter ? 'click' : 'tick', sound);
 		}
 		if (closeAfter) {
@@ -354,6 +357,7 @@
 		onopen={onOpen}
 		onclose={onClose}
 		aria-controls={listId}
+		aria-labelledby={nameId}
 		aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}
 	>
 		{#snippet trigger()}
@@ -407,6 +411,7 @@
 			<div class="rs-footer">{@render footer({ close })}</div>
 		{/if}
 	</Popover>
+	<span class="sr-only" id={nameId}>{triggerName}</span>
 	<span class="sr-only" aria-live="polite">{announcement}</span>
 </div>
 
@@ -487,8 +492,10 @@
 	.rich-select.is-open .rs-chevron {
 		rotate: 180deg;
 	}
-	.rich-select :global(.pop-panel.rs-panel) {
+	.rich-select :global(.pop-panel.rs-panel:popover-open) {
 		display: flex;
+	}
+	.rich-select :global(.pop-panel.rs-panel) {
 		flex-direction: column;
 		gap: var(--sp-1);
 		box-sizing: border-box;

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 export { default as Text } from './components/atoms/Text.svelte';
+export type { TextareaSegment } from './components/atoms/Textarea.svelte';
 export { default as Textarea } from './components/atoms/Textarea.svelte';
 export { default as Thinking } from './components/atoms/Thinking.svelte';
 export { default as TimeDisplay } from './components/atoms/TimeDisplay.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.82.0",
+  "version": "0.82.2",
   "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",
@@ -72,7 +72,8 @@
     "design": "npm run package && npm run design:bundle && npm run design:verify",
     "design:bundle": "node .design-sync/build-bundle.mjs",
     "design:verify": "node .design-sync/verify-bundle.mjs",
-    "design:clean": "rm -rf ds-bundle .ds-proto"
+    "design:clean": "rm -rf ds-bundle .ds-proto",
+    "demo:props": "node scripts/gen-demo-props.mjs"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"