@dorsk/tsumikit 0.57.0 → 0.58.0

package/dist/components/atoms/Input.svelte

@@ -8,6 +8,7 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import Icon, { type IconName } from './Icon.svelte';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
+	import { getInputGroupContext } from '../../input-group-context';
 
 	// `size` shadows the native char-width attribute (unused in token-sized
 	// layouts) to expose a height preset instead.
@@ -43,9 +44,10 @@
 
 	let {
 		mono = false,
-		size = 'md',
+		size,
 		grow = false,
 		invalid = false,
+		disabled = false,
 		icon,
 		clearable = false,
 		onclear,
@@ -65,7 +67,10 @@
 	}: Props = $props();
 
 	const field = getFieldContext();
-	const isInvalid = $derived(invalid || !!field?.invalid);
+	const group = getInputGroupContext();
+	const sizeEff = $derived(size ?? group?.size ?? 'md');
+	const isInvalid = $derived(invalid || !!field?.invalid || !!group?.invalid);
+	const isDisabled = $derived(disabled || !!group?.disabled);
 
 	$effect(() => warnUnlabelled(el, 'Input'));
 
@@ -90,8 +95,9 @@
 		data-tsu="Input"
 		class="input {klass}"
 		class:mono
-		class:input-sm={size === 'sm'}
-		class:input-lg={size === 'lg'}
+		class:input-sm={sizeEff === 'sm'}
+		class:input-lg={sizeEff === 'lg'}
+		class:grouped={!!group}
 		class:input-grow={grow}
 		class:input-fixed={!!width && !wrapped}
 		class:input-pill={shape === 'pill'}
@@ -100,6 +106,7 @@
 		style:width={wrapped ? undefined : width}
 		bind:value
 		{...rest}
+		disabled={isDisabled}
 		onkeydown={onenter || onsubmit || onkeydown ? handleKeydown : undefined}
 		id={id ?? field?.id}
 		aria-describedby={ariaDescribedby ?? field?.describedBy}
@@ -182,6 +189,17 @@
 	.input[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	/* Inside an InputGroup the group draws the focus ring and the overlaid
+	   adornments report their widths; the text stays clear of them. */
+	.input.grouped {
+		width: 100%;
+		border-radius: var(--ig-radius);
+		padding-inline: max(var(--ig-pad-x), var(--ig-leading-w, 0px) + var(--ig-gap))
+			max(var(--ig-pad-x), var(--ig-trailing-w, 0px) + var(--ig-gap));
+	}
+	.input.grouped:focus-visible {
+		outline: none;
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}

package/dist/components/atoms/Swatch.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ControlSize } from '../../size';
+	// Colour-swatch primitive: a filled chip that shows a colour. With a `label`
+	// it is an image (role=img + aria-label); without one it is decorative
+	// (aria-hidden). `interactive` renders a <button> so a palette picker can
+	// build a row of swatches with `selected` mirrored to aria-pressed. The
+	// hairline token border keeps pale colours visible on light themes.
+
+	type Own = {
+		/** Any CSS colour (or var()). */
+		color: string;
+		size?: ControlSize;
+		shape?: 'circle' | 'square';
+		/** Accessible name; without it the swatch is hidden from assistive tech. */
+		label?: string;
+		/** Draws the selection ring; `aria-pressed` when interactive. */
+		selected?: boolean;
+		/** Renders a `<button>` and wires `onclick`. */
+		interactive?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		class?: string;
+		/** Optional glyph drawn over the colour (e.g. an "A" for auto). */
+		children?: Snippet;
+	};
+	let {
+		color,
+		size = 'md',
+		shape = 'circle',
+		label,
+		selected = false,
+		interactive = false,
+		onclick,
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
+</script>
+
+<svelte:element
+	this={interactive ? 'button' : 'span'}
+	type={interactive ? 'button' : undefined}
+	data-tsu="Swatch"
+	class="swatch {klass}"
+	class:sm={size === 'sm'}
+	class:lg={size === 'lg'}
+	class:square={shape === 'square'}
+	class:selected
+	class:interactive
+	style:--swatch-color={color}
+	role={!interactive && label ? 'img' : undefined}
+	aria-label={interactive ? (label ?? color) : label}
+	aria-hidden={!interactive && !label ? 'true' : undefined}
+	aria-pressed={interactive ? selected : undefined}
+	onclick={interactive ? onclick : undefined}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.swatch {
+		--swatch-size: 1rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		width: var(--swatch-size);
+		height: var(--swatch-size);
+		padding: 0;
+		margin: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--r-pill);
+		background: var(--swatch-color);
+		color: var(--text);
+		font: inherit;
+		font-size: calc(var(--swatch-size) * 0.6);
+		line-height: 1;
+		vertical-align: middle;
+		box-sizing: border-box;
+	}
+	.sm {
+		--swatch-size: 0.75rem;
+	}
+	.lg {
+		--swatch-size: 1.5rem;
+	}
+	.square {
+		border-radius: var(--r-sm);
+	}
+	.sm.square {
+		border-radius: 3px;
+	}
+	.selected {
+		border-color: var(--text);
+		box-shadow:
+			0 0 0 2px var(--bg),
+			0 0 0 3px var(--text);
+	}
+	.interactive {
+		cursor: pointer;
+		transition:
+			transform 0.1s var(--ease),
+			box-shadow 0.12s var(--ease);
+	}
+	.interactive:hover {
+		transform: scale(1.15);
+	}
+	.interactive:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 3px;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ControlSize } from '../../size';
+type Own = {
+    /** Any CSS colour (or var()). */
+    color: string;
+    size?: ControlSize;
+    shape?: 'circle' | 'square';
+    /** Accessible name; without it the swatch is hidden from assistive tech. */
+    label?: string;
+    /** Draws the selection ring; `aria-pressed` when interactive. */
+    selected?: boolean;
+    /** Renders a `<button>` and wires `onclick`. */
+    interactive?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    class?: string;
+    /** Optional glyph drawn over the colour (e.g. an "A" for auto). */
+    children?: Snippet;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
+declare const Swatch: import("svelte").Component<$$ComponentProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

package/dist/components/atoms/Textarea.svelte

@@ -21,6 +21,7 @@
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction } from '../../autoresize';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
+	import { getInputGroupContext } from '../../input-group-context';
 
 	type Props = HTMLTextareaAttributes & {
 		mono?: boolean;
@@ -55,12 +56,13 @@
 	let {
 		mono = false,
 		autoresize = false,
-		size = 'md',
+		size,
 		grow = false,
 		shrink = true,
 		block = false,
 		resize = 'bottom',
 		invalid = false,
+		disabled = false,
 		maxHeight,
 		onsubmit,
 		submitOn = 'none',
@@ -75,7 +77,10 @@
 	}: Props = $props();
 
 	const field = getFieldContext();
-	const isInvalid = $derived(invalid || !!field?.invalid);
+	const group = getInputGroupContext();
+	const sizeEff = $derived(size ?? group?.size ?? 'md');
+	const isInvalid = $derived(invalid || !!field?.invalid || !!group?.invalid);
+	const isDisabled = $derived(disabled || !!group?.disabled);
 
 	$effect(() => warnUnlabelled(el, 'Textarea'));
 
@@ -150,6 +155,7 @@
 	class:grow={grow}
 	class:no-shrink={!shrink}
 	class:block={block}
+	class:grouped={!!group}
 	data-tsu="Textarea"
 >
 	{#if autoresize}
@@ -157,9 +163,11 @@
 			bind:this={el}
 			class="textarea {klass}"
 			class:mono
-			class:textarea-sm={size === 'sm'}
-			class:textarea-lg={size === 'lg'}
+			class:textarea-sm={sizeEff === 'sm'}
+			class:textarea-lg={sizeEff === 'lg'}
+			class:grouped={!!group}
 			class:capped={!!maxHeight}
+			disabled={isDisabled}
 			style:max-height={maxHeight}
 			bind:value
 			use:autoresizeAction={typeof value === 'string' ? value : ''}
@@ -174,9 +182,11 @@
 			bind:this={el}
 			class="textarea {klass}"
 			class:mono
-			class:textarea-sm={size === 'sm'}
-			class:textarea-lg={size === 'lg'}
+			class:textarea-sm={sizeEff === 'sm'}
+			class:textarea-lg={sizeEff === 'lg'}
+			class:grouped={!!group}
 			class:capped={!!maxHeight}
+			disabled={isDisabled}
 			style:max-height={maxHeight}
 			bind:value
 			{...rest}
@@ -268,6 +278,23 @@
 	.textarea[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	/* Inside an InputGroup the group draws the focus ring and the overlaid
+	   adornments report their widths; the text stays clear of them. */
+	.textarea.grouped {
+		border-radius: var(--ig-radius);
+		padding-inline: max(var(--ig-pad-x), var(--ig-leading-w, 0px) + var(--ig-gap))
+			max(var(--ig-pad-x), var(--ig-trailing-w, 0px) + var(--ig-gap));
+	}
+	.textarea.grouped:focus-visible {
+		outline: none;
+	}
+	.textarea-wrap.grouped {
+		width: 100%;
+	}
+	.textarea-wrap.grouped .resize-handle {
+		left: var(--ig-leading-w, 0px);
+		right: var(--ig-trailing-w, 0px);
+	}
 	.mono {
 		font-family: var(--font-mono);
 	}

package/dist/components/molecules/Accordion.svelte

@@ -1,46 +1,99 @@
 <script lang="ts" module>
 	import type { Snippet } from 'svelte';
+	import type { DisclosureHeaderContext } from './Disclosure.svelte';
 	export interface AccordionItem {
 		id: string;
-		title: string;
+		/** Plain-text header; `summary` wins when both are given. */
+		title?: string;
+		/** Rich header content; receives the live open state. */
+		summary?: Snippet<[DisclosureHeaderContext]>;
 		/** Panel content for this item. */
 		content: Snippet;
+		/** Open state. Re-passing a new value takes over from any local toggle. */
 		open?: boolean;
+		onchange?: (open: boolean) => void;
+		disabled?: boolean;
 	}
 </script>
 
 <script lang="ts">
-	// Disclosure accordion built on native <details>/<summary> — zero JS for the
-	// open/close, full keyboard + a11y for free. When `multiple` is false the
-	// items share a `name`, using the platform's exclusive-accordion behavior
-	// (only one open at a time). The summary marker is replaced with a rotating
-	// chevron.
-	import Icon from '../atoms/Icon.svelte';
+	// A stack of Disclosures. Each item's `open` is the parent's word: local
+	// toggles override it until the parent passes a new value. `multiple=false`
+	// closes the other items when one opens.
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Disclosure from './Disclosure.svelte';
+	import type { DisclosureChevron } from './Disclosure.svelte';
 
 	let {
 		items,
 		multiple = true,
-		class: klass = ''
-	}: {
+		chevron = 'end',
+		onchange,
+		class: klass = '',
+		style: styleProp = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	type Own = {
 		items: AccordionItem[];
 		multiple?: boolean;
+		chevron?: DisclosureChevron;
+		onchange?: (id: string, open: boolean) => void;
 		class?: string;
-	} = $props();
+		style?: string;
+	};
+
+	let local = $state<Record<string, boolean>>({});
+	let seen: Record<string, boolean | undefined> = {};
+
+	$effect.pre(() => {
+		for (const item of items) {
+			if (seen[item.id] !== item.open) {
+				seen[item.id] = item.open;
+				delete local[item.id];
+			}
+		}
+	});
+
+	const isOpen = (item: AccordionItem) => local[item.id] ?? item.open ?? false;
 
-	// One shared name → native single-open accordion (stable id, derived toggle).
-	const gid = `acc-${Math.random().toString(36).slice(2, 8)}`;
-	const groupName = $derived(multiple ? undefined : gid);
+	function set(item: AccordionItem, open: boolean) {
+		local[item.id] = open;
+		item.onchange?.(open);
+		onchange?.(item.id, open);
+		if (!open || multiple) return;
+		for (const other of items) {
+			if (other.id === item.id || !isOpen(other)) continue;
+			local[other.id] = false;
+			other.onchange?.(false);
+			onchange?.(other.id, false);
+		}
+	}
 </script>
 
-<div class="accordion {klass}" data-tsu="Accordion">
+{#snippet plain(title: string | undefined)}
+	<span class="acc-title">{title}</span>
+{/snippet}
+
+<div {...rest} class="accordion {klass}" style={styleProp} data-tsu="Accordion">
 	{#each items as item (item.id)}
-		<details name={groupName} open={item.open}>
-			<summary>
-				<span class="acc-title">{item.title}</span>
-				<span class="acc-chevron"><Icon name="chevron-down" /></span>
-			</summary>
-			<div class="acc-panel">{@render item.content()}</div>
-		</details>
+		<Disclosure
+			class="acc-item"
+			id={`acc-${item.id}`}
+			open={isOpen(item)}
+			onchange={(o) => set(item, o)}
+			disabled={item.disabled}
+			{chevron}
+		>
+			{#snippet header(ctx)}
+				{#if item.summary}
+					{@render item.summary(ctx)}
+				{:else}
+					{@render plain(item.title)}
+				{/if}
+			{/snippet}
+			{@render item.content()}
+		</Disclosure>
 	{/each}
 </div>
 
@@ -50,48 +103,13 @@
 		border-radius: var(--r-lg);
 		overflow: hidden;
 	}
-	details + details {
+	.accordion > :global(.acc-item + .acc-item) {
 		border-top: 1px solid var(--border);
 	}
-	summary {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--sp-2);
-		padding: var(--sp-3) var(--sp-4);
-		cursor: pointer;
-		font-weight: var(--fw-medium);
-		font-size: var(--fs-sm);
-		list-style: none;
-		user-select: none;
-	}
-	/* Hide the default disclosure triangle across engines. */
-	summary::-webkit-details-marker {
-		display: none;
-	}
-	summary::marker {
-		content: '';
-	}
-	summary:hover {
-		background: var(--bg-elevated-2);
-	}
-	summary:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
-	}
-	/* Wrap the chevron in our own element so rotation is a scoped rule (no
-	   :global into the Icon child). The Icon inherits the color via currentColor. */
-	.acc-chevron {
-		display: inline-flex;
-		color: var(--text-muted);
-		transition: transform 0.15s var(--ease);
-	}
-	details[open] summary .acc-chevron {
-		transform: rotate(180deg);
-	}
-	.acc-panel {
-		padding: 0 var(--sp-4) var(--sp-4);
-		font-size: var(--fs-sm);
-		color: var(--text-muted);
+	.acc-title {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 </style>

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

@@ -1,16 +1,29 @@
 import type { Snippet } from 'svelte';
+import type { DisclosureHeaderContext } from './Disclosure.svelte';
 export interface AccordionItem {
     id: string;
-    title: string;
+    /** Plain-text header; `summary` wins when both are given. */
+    title?: string;
+    /** Rich header content; receives the live open state. */
+    summary?: Snippet<[DisclosureHeaderContext]>;
     /** Panel content for this item. */
     content: Snippet;
+    /** Open state. Re-passing a new value takes over from any local toggle. */
     open?: boolean;
+    onchange?: (open: boolean) => void;
+    disabled?: boolean;
 }
-type $$ComponentProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+import type { DisclosureChevron } from './Disclosure.svelte';
+type Own = {
     items: AccordionItem[];
     multiple?: boolean;
+    chevron?: DisclosureChevron;
+    onchange?: (id: string, open: boolean) => void;
     class?: string;
+    style?: string;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
 declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;