@dorsk/tsumikit 0.76.0 → 0.77.0

package/dist/components/atoms/Divider.svelte

@@ -100,8 +100,9 @@
 		background: var(--divider-color);
 	}
 	.divider-label {
+		min-width: 0;
 		color: var(--text-muted);
 		font-size: var(--fs-sm);
-		white-space: nowrap;
+		text-align: center;
 	}
 </style>

package/dist/components/atoms/Input.svelte

@@ -12,7 +12,7 @@
 
 	// `size` shadows the native char-width attribute (unused in token-sized
 	// layouts) to expose a height preset instead.
-	type Props = Omit<HTMLInputAttributes, 'size'> & {
+	type Props = Omit<HTMLInputAttributes, 'size' | 'onsubmit'> & {
 		mono?: boolean;
 		size?: ControlSize;
 		/** Fill the available width of a flex/Cluster row (flex: 1) instead of

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

@@ -1,7 +1,7 @@
 import type { ControlSize } from '../../size';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type IconName } from './Icon.svelte';
-type Props = Omit<HTMLInputAttributes, 'size'> & {
+type Props = Omit<HTMLInputAttributes, 'size' | 'onsubmit'> & {
     mono?: boolean;
     size?: ControlSize;
     /** Fill the available width of a flex/Cluster row (flex: 1) instead of

package/dist/components/atoms/Select.svelte

@@ -199,6 +199,7 @@
 	.select-wrap.w-auto {
 		display: inline-block;
 		width: auto;
+		max-width: 100%;
 	}
 	.select-wrap.select-grow {
 		flex: 1 1 0;
@@ -253,6 +254,8 @@
 	}
 	.select.w-auto {
 		width: auto;
+		max-width: 100%;
+		text-overflow: ellipsis;
 	}
 	.select.embedded {
 		background: var(--select-bg, var(--bg-elevated-2));

package/dist/components/atoms/Textarea.svelte

@@ -23,7 +23,7 @@
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
 	import { getInputGroupContext } from '../../input-group-context';
 
-	type Props = HTMLTextareaAttributes & {
+	type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
 		mono?: boolean;
 		autoresize?: boolean;
 		size?: ControlSize;

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

@@ -1,6 +1,6 @@
 import type { ControlSize } from '../../size';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-type Props = HTMLTextareaAttributes & {
+type Props = Omit<HTMLTextareaAttributes, 'onsubmit'> & {
     mono?: boolean;
     autoresize?: boolean;
     size?: ControlSize;

package/dist/components/molecules/CopyButton.svelte

@@ -60,7 +60,7 @@
 	{variant}
 	{box}
 	{hitArea}
-	class="copy-btn {klass}"
+	class="copy-btn {labelShown && box !== undefined ? 'copy-labelled' : ''} {klass}"
 	sound={false}
 	onclick={copy}
 	aria-label={copied ? copiedLabel : label}
@@ -78,6 +78,10 @@
 	/* Both glyphs share one grid cell so the swap never changes the width. The
 	   check springs in (the kit's one bounce: a rare confirmation); the copy
 	   glyph fades out fast and back in over the base duration on revert. */
+	:global(.copy-btn.btn-box.copy-labelled) {
+		width: auto;
+		padding-inline: var(--sp-2);
+	}
 	.glyphs {
 		display: inline-grid;
 		place-items: center;

package/dist/components/molecules/Field.svelte

@@ -73,6 +73,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--sp-1);
+		min-width: 0;
 	}
 	.field-grow {
 		flex: 1 1 0;

package/dist/components/molecules/FileButton.svelte

@@ -93,7 +93,7 @@
 	{:else if emoji}
 		<span class="emoji" aria-hidden="true">{emoji}</span>
 	{/if}
-	<span class:sr-only={onlyIcon}>{label}</span>
+	<span class="text" class:sr-only={onlyIcon}>{label}</span>
 </label>
 
 <style>
@@ -114,6 +114,7 @@
 		font-weight: var(--fw-medium);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-none);
+		max-width: 100%;
 		white-space: nowrap;
 		cursor: pointer;
 		user-select: none;
@@ -179,6 +180,11 @@
 		}
 	}
 	/* An emoji reads small next to an SVG glyph of the same size: one icon tier up. */
+	.text:not(.sr-only) {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 	.emoji {
 		display: inline-flex;
 		font-size: var(--icon-lg);

package/dist/components/molecules/RadioGroup.svelte

@@ -219,6 +219,7 @@
 
 	.rows {
 		gap: var(--sp-1);
+		min-width: 0;
 	}
 	.row-wrap {
 		min-width: 0;
@@ -250,8 +251,9 @@
 	}
 	.label-line {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: baseline;
-		gap: var(--sp-2);
+		gap: var(--sp-px) var(--sp-2);
 		min-width: 0;
 	}
 	.row .label-text {
@@ -260,7 +262,6 @@
 	.note {
 		font-size: var(--fs-xs);
 		color: var(--text-faint);
-		white-space: nowrap;
 	}
 	.description {
 		font-size: var(--fs-xs);

package/dist/components/molecules/RichSelect.svelte

@@ -119,11 +119,21 @@
 	});
 
 	$effect(() => {
-		if (!open || active < 0) return;
-		const el = root?.ownerDocument.getElementById(optionId(active));
-		el?.scrollIntoView?.({ block: 'nearest' });
+		if (open && active >= 0) revealActive();
 	});
 
+	// Scrolls the listbox only: `scrollIntoView` on a top-layer panel also
+	// scrolls the document in Chromium.
+	function revealActive() {
+		const list = root?.querySelector<HTMLElement>('.rs-list');
+		const row = rowEls()[active];
+		if (!list || !row) return;
+		const top = row.offsetTop;
+		const bottom = top + row.offsetHeight;
+		if (top < list.scrollTop) list.scrollTop = top;
+		else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+	}
+
 	function close() {
 		open = false;
 	}
@@ -303,8 +313,7 @@
 	async function onOpen() {
 		typeahead.reset();
 		await tick();
-		const el = active >= 0 ? root?.ownerDocument.getElementById(optionId(active)) : null;
-		el?.scrollIntoView?.({ block: 'nearest' });
+		if (active >= 0) revealActive();
 	}
 
 	function onClose() {
@@ -459,7 +468,6 @@
 	}
 	.rs-placeholder {
 		display: block;
-		padding-inline: var(--sp-1);
 		color: var(--text-muted);
 		font-size: var(--control-fs-md);
 		line-height: var(--lh-tight);
@@ -486,6 +494,7 @@
 		padding: var(--sp-1);
 	}
 	.rs-list {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--sp-0-5);

package/dist/components/molecules/SelectButton.svelte

@@ -30,6 +30,7 @@
 		shrink = true,
 		block = false,
 		sound = true,
+		disabled = false,
 		class: klass = '',
 		...rest
 	}: {
@@ -64,6 +65,7 @@
 		hitArea?: 'auto' | 'compact';
 		/** Play UI sounds when enabled globally; false silences this instance. */
 		sound?: boolean;
+		disabled?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -81,6 +83,7 @@
 	class="select-button {klass}"
 	class:row={variant === 'row'}
 	class:active
+	class:disabled
 	data-tsu="SelectButton"
 	{...rest}
 	class:grow={grow}
@@ -98,6 +101,7 @@
 		aria-label={label}
 		{title}
 		{value}
+		{disabled}
 		onchange={change}
 	>
 		{#if groups}
@@ -138,18 +142,25 @@
 	.select-button.active {
 		color: var(--accent);
 	}
+	.select-button.disabled {
+		opacity: var(--disabled-opacity);
+		cursor: not-allowed;
+	}
 	/* The inert face takes no pointer events: mirror ghost hover, press and the
 	   focus ring from the select overlaying it. */
 	.select-button:active :global(.btn-ghost) {
 		--btn-scale-dur: var(--dur-press);
 		scale: var(--press-scale-sm);
 	}
+	.select-button.disabled:active :global(.btn-ghost) {
+		scale: none;
+	}
 	.select-button:has(:focus-visible) {
 		outline: var(--focus-ring);
 		outline-offset: var(--focus-ring-offset);
 	}
 	@media (hover: hover) and (pointer: fine) {
-		.select-button:hover :global(.btn-ghost) {
+		.select-button:not(.disabled):hover :global(.btn-ghost) {
 			background: var(--bg-elevated-2);
 		}
 	}

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

@@ -34,6 +34,7 @@ type $$ComponentProps = {
     hitArea?: 'auto' | 'compact';
     /** Play UI sounds when enabled globally; false silences this instance. */
     sound?: boolean;
+    disabled?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/molecules/Toggle.svelte

@@ -63,7 +63,7 @@
 	class:on={pressed}
 	aria-pressed={pressed}
 >
-	{@render children?.()}
+	<span class="label">{@render children?.()}</span>
 </button>
 
 <style>
@@ -106,10 +106,20 @@
 		font-size: var(--control-fs-md);
 		--icon-size: var(--control-icon-md);
 	}
+	.label {
+		display: contents;
+	}
 	.toggle.grow {
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.toggle.grow .label {
+		display: block;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: center;
+	}
 	.toggle.no-shrink {
 		flex: none;
 	}

package/dist/floating.js

@@ -20,9 +20,15 @@ function alignPos(align, start, size, fSize) {
 export function place(trigger, floating, placement = 'bottom-start', gap = 6) {
     placeAt(trigger.getBoundingClientRect(), floating, placement, gap);
 }
+// The enter transition starts the panel at `scale: var(--enter-scale)`, so a
+// client rect taken on open is ~4% short; offset sizes ignore transforms.
+function layoutSize(el) {
+    const { width, height } = el.getBoundingClientRect();
+    return { width: el.offsetWidth || width, height: el.offsetHeight || height };
+}
 /** `place` against a viewport rect instead of an element. */
 export function placeAt(t, floating, placement = 'bottom-start', gap = 6) {
-    const f = floating.getBoundingClientRect();
+    const f = layoutSize(floating);
     const vw = document.documentElement.clientWidth;
     const vh = document.documentElement.clientHeight;
     const [side, align] = placement.split('-');

package/package.json

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