@dorsk/tsumikit 0.2.14 → 0.2.16

package/dist/autoresize.js

@@ -7,8 +7,12 @@
  */
 export function autoresize(node, _value) {
     const resize = () => {
+        // A manual drag handle may set `min-height` as a user-chosen floor; grow
+        // with content but never collapse below it. Content always wins the lower
+        // bound, so dragging shorter than the text can't shrink past it.
+        const floor = parseFloat(node.style.minHeight) || 0;
         node.style.height = 'auto';
-        node.style.height = `${node.scrollHeight}px`;
+        node.style.height = `${Math.max(node.scrollHeight, floor)}px`;
     };
     resize();
     node.addEventListener('input', resize);

package/dist/components/atoms/Textarea.svelte

@@ -8,8 +8,12 @@
 	//
 	// `resize` replaces the native (un-themeable) resize grip with our own drag
 	// handle on the top or bottom edge, styled like the Modal/AppShell grips: a
-	// centered pill that's a thicker portion of the border. `autoresize` wins —
-	// content-driven sizing leaves no manual handle.
+	// centered pill that's a thicker portion of the border.
+	//
+	// With `autoresize`, only a `top` handle is offered and it sets a manual
+	// *floor* (min-height) rather than a fixed height: the textarea still grows
+	// with content, but dragging up reserves extra space. (A bottom handle makes
+	// no sense alongside content-driven sizing, so it's suppressed.)
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction } from '../../autoresize';
 
@@ -17,8 +21,9 @@
 		mono?: boolean;
 		autoresize?: boolean;
 		size?: 'sm' | 'md';
-		/** Manual resize handle edge, or 'none' to disable. Ignored when
-		 *  `autoresize` is set. Defaults to a bottom handle. */
+		/** Manual resize handle edge, or 'none' to disable. Defaults to a bottom
+		 *  handle. With `autoresize`, only `top` is honored and it drags a
+		 *  min-height floor (the textarea still grows with content). */
 		resize?: 'none' | 'top' | 'bottom';
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
@@ -40,7 +45,9 @@
 		...rest
 	}: Props = $props();
 
-	const showHandle = $derived(!autoresize && resize !== 'none');
+	// With autoresize, only the top handle (a min-height floor) is meaningful.
+	const handleEdge = $derived(autoresize ? (resize === 'top' ? 'top' : 'none') : resize);
+	const showHandle = $derived(handleEdge !== 'none');
 
 	// --- manual resize drag (mirrors AppShell/Modal: rAF-throttled pointer drag) ---
 	let dragging = $state(false);
@@ -65,8 +72,16 @@
 			rafId = 0;
 			if (!el) return;
 			// Top handle grows upward (drag up = taller), bottom grows downward.
-			const delta = resize === 'top' ? startY - lastY : lastY - startY;
-			el.style.height = `${Math.max(0, startH + delta)}px`;
+			const delta = handleEdge === 'top' ? startY - lastY : lastY - startY;
+			const next = Math.max(0, startH + delta);
+			if (autoresize) {
+				// Set a min-height floor and let the autoresize action re-measure
+				// (content still wins the lower bound). Dispatch input to re-run it.
+				el.style.minHeight = `${next}px`;
+				el.dispatchEvent(new Event('input'));
+			} else {
+				el.style.height = `${next}px`;
+			}
 		});
 	}
 	function endDrag(e: PointerEvent) {
@@ -109,7 +124,7 @@
 	{/if}
 	{#if showHandle}
 		<div
-			class="resize-handle resize-{resize}"
+			class="resize-handle resize-{handleEdge}"
 			onpointerdown={startDrag}
 			onpointermove={onDrag}
 			onpointerup={endDrag}

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

@@ -3,8 +3,9 @@ type Props = HTMLTextareaAttributes & {
     mono?: boolean;
     autoresize?: boolean;
     size?: 'sm' | 'md';
-    /** Manual resize handle edge, or 'none' to disable. Ignored when
-     *  `autoresize` is set. Defaults to a bottom handle. */
+    /** Manual resize handle edge, or 'none' to disable. Defaults to a bottom
+     *  handle. With `autoresize`, only `top` is honored and it drags a
+     *  min-height floor (the textarea still grows with content). */
     resize?: 'none' | 'top' | 'bottom';
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */

package/dist/components/molecules/FileButton.svelte

@@ -2,13 +2,14 @@
 	// File-picker button. A real <input type="file"> visually hidden inside a
 	// <label> styled as a button — so it's keyboard-focusable and works with zero
 	// JS to open the dialog. Emits the chosen files via `onfiles`. Dependency-free.
-	import Icon, { isIconName } from '../atoms/Icon.svelte';
+	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	let {
 		onfiles,
 		label = 'Choose file',
-		icon = '📎',
+		icon,
+		emoji = '📎',
 		iconOnly = false,
 		accept,
 		multiple = false,
@@ -19,9 +20,12 @@
 	}: {
 		onfiles: (files: File[]) => void;
 		label?: string;
-		/** A registered glyph name (rendered as SVG) or any string such as an
-		 *  emoji (rendered as text). Defaults to the 📎 paperclip emoji. */
-		icon?: IconName | (string & {});
+		/** A registered glyph name (rendered as SVG). Use `emoji` for an
+		 *  off-registry glyph. */
+		icon?: IconName;
+		/** Off-registry glyph such as an emoji, rendered as text as-is. Defaults to
+		 *  the 📎 paperclip emoji; ignored when `icon` is set. */
+		emoji?: string;
 		/** Hide the label visually, showing only the icon. The label is kept for
 		 *  assistive tech (and used as the accessible name). */
 		iconOnly?: boolean;
@@ -61,10 +65,10 @@
 		{disabled}
 		onchange={onchange}
 	/>
-	{#if isIconName(icon)}
+	{#if icon}
 		<Icon name={icon} />
-	{:else}
-		<span class="emoji" aria-hidden="true">{icon}</span>
+	{:else if emoji}
+		<span class="emoji" aria-hidden="true">{emoji}</span>
 	{/if}
 	<span class:sr-only={iconOnly}>{label}</span>
 </label>

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

@@ -2,9 +2,12 @@ import type { IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
     onfiles: (files: File[]) => void;
     label?: string;
-    /** A registered glyph name (rendered as SVG) or any string such as an
-     *  emoji (rendered as text). Defaults to the 📎 paperclip emoji. */
-    icon?: IconName | (string & {});
+    /** A registered glyph name (rendered as SVG). Use `emoji` for an
+     *  off-registry glyph. */
+    icon?: IconName;
+    /** Off-registry glyph such as an emoji, rendered as text as-is. Defaults to
+     *  the 📎 paperclip emoji; ignored when `icon` is set. */
+    emoji?: string;
     /** Hide the label visually, showing only the icon. The label is kept for
      *  assistive tech (and used as the accessible name). */
     iconOnly?: boolean;

package/dist/components/molecules/IconButton.svelte

@@ -6,8 +6,11 @@
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	type IconButtonProps = HTMLButtonAttributes & {
-		/** Named glyph from the registry. Omit when supplying `children`. */
+		/** Named glyph from the registry (rendered as SVG). */
 		icon?: IconName;
+		/** Off-registry glyph such as an emoji, rendered as text as-is. Use instead
+		 *  of `icon` when the glyph isn't in the registry. */
+		emoji?: string;
 		/** Raw SVG markup (24×24 viewBox) — overrides `icon`. Pass a
 		 *  lucide-svelte component's contents to render any off-registry icon. */
 		children?: Snippet;
@@ -32,6 +35,7 @@
 
 	let {
 		icon,
+		emoji,
 		children,
 		label,
 		title = label,
@@ -50,7 +54,7 @@
 </script>
 
 <!-- Composition: the icon-only button is a Button (canonical control styling)
-     in its icon variant, wrapping an Icon. -->
+     in its icon variant, wrapping an Icon (or a text emoji glyph). -->
 <Button
 	{...rest}
 	{variant}
@@ -68,7 +72,21 @@
 >
 	{#if children}
 		<Icon {size}>{@render children()}</Icon>
-	{:else}
+	{:else if emoji}
+		<span class="emoji" style="font-size: {size * 1.35}px" aria-hidden="true">{emoji}</span>
+	{:else if icon}
 		<Icon name={icon} {size} />
 	{/if}
 </Button>
+
+<style>
+	/* Off-registry glyph (emoji) rendered as text rather than an SVG. Sized off the
+	   `size` prop (×1.35, since an emoji reads small next to an SVG glyph of the
+	   same px) and centered so it shares the button's tap target. */
+	.emoji {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+</style>

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

@@ -2,8 +2,11 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconName } from '../atoms/Icon.svelte';
 type IconButtonProps = HTMLButtonAttributes & {
-    /** Named glyph from the registry. Omit when supplying `children`. */
+    /** Named glyph from the registry (rendered as SVG). */
     icon?: IconName;
+    /** Off-registry glyph such as an emoji, rendered as text as-is. Use instead
+     *  of `icon` when the glyph isn't in the registry. */
+    emoji?: string;
     /** Raw SVG markup (24×24 viewBox) — overrides `icon`. Pass a
      *  lucide-svelte component's contents to render any off-registry icon. */
     children?: Snippet;

package/package.json

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