@dorsk/tsumikit 0.63.0 → 0.64.0

package/README.md

@@ -248,7 +248,8 @@ any test, and change without a major.
 `clearable` + `onclear`, `shape="pill"`, `width` fixed + `flex: none`,
 `onenter(value)`; the bare `<input>` DOM is unchanged unless `icon`/`clearable`
 is used), Textarea, Select (`options` array with per-option `icon`/`emoji`/`hint`/`disabled`;
-the trigger overlays the selected option's glyph + muted hint on the native control), Switch, Checkbox,
+the trigger overlays the selected option's glyph + muted hint on the native control), Switch, Checkbox (`size`
+sm/md/lg as on `Switch`, or `--cb-box` for the box alone),
 Slider (`ticks` draws a dot per step for a segmented slider), Progress, Gauge (vertical consumption cell, `variant` continuous/segments,
 threshold tones via `warnAt`/`dangerAt`, `corner` snippet), Artwork (lazy cover image with seeded gradient + initials
 fallback, `aspect`, `status` overlay), Avatar (grapheme-safe initial or `glyph`, hue hashed from
@@ -266,13 +267,16 @@ horizontal/vertical hairline, `tone`, `spacing`, optional centred label,
 always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
 any custom SVG).
 
-**Molecules:** Field (`grow`), IconButton, SelectButton, Toggle, OptionButton (`value` +
+**Molecules:** Field (`grow`), IconButton (`filled` forwards to `Icon`, for a
+filled pin/star toggle), SelectButton, Toggle, OptionButton (`value` +
 `description` secondary text wired via `aria-describedby`, `onfocuschange(value)` on
 focus/hover to drive a preview pane), Modal,
 Popover, Menu (items take a free-form trailing `tag` + `tagTone`, or a `tag` snippet,
 and an `attrs` object for `data-*`/test ids on the row; a checkable `pressed` item keeps
 its icon leading and shows its check trailing, or uses the leading check slot when it has
-no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`),
+no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`;
+rest props land on the trigger, `count`/`countMax` paint its corner badge and `panelStyle`
+sizes the panel),
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),
@@ -281,9 +285,10 @@ RadioGroup (per-option `description` in every variant, announced via
 `variant="rows"`: bordered rows, per-option `note`,
 `action(option)` trailing control that never toggles, `below(option)` inline panel),
 Tooltip, Disclosure (single collapsible: `header` snippet, bindable `open` or `open` + `onchange` for
-controlled mode, `chevron` start/end/false, native button with `aria-expanded`/`aria-controls` over a
-`region` panel), Accordion (a stack of Disclosures; items take a `title` string or a `summary` snippet,
-per-item `open`/`onchange`, `multiple=false` keeps one open), CopyButton, FileButton, InputGroup (a field with inset
+controlled mode, `chevron` start/end/false, `size="compact"` for strip rows, native button with
+`aria-expanded`/`aria-controls` over a `region` panel), Accordion (a stack of Disclosures; items take a
+`title` string or a `summary` snippet that receives the `item` it heads, per-item `open`/`onchange`,
+`multiple=false` keeps one open, `variant="plain"` drops the outer border, `size` forwards to every item), CopyButton, FileButton, InputGroup (a field with inset
 leading/trailing controls fused into one bordered unit, see below),
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
 ThemePicker (popover grid of 2×2 palette swatches: bg · surface · text · accent per theme),
@@ -383,6 +388,11 @@ fixed non-modal drawer (`role="dialog"`) on the viewport edge: `bind:open`,
 the dim backdrop, `fullWidthBelow="960px"` makes the drawer span the viewport (no
 handle, no scrim) on small screens, and `clampToViewport` (default true) keeps a
 stored width inside a shrunken window. `children` is optional in overlay mode.
+`onresizestart` / `onresize(width)` / `onresizeend(width)` report the drag: start
+fires on pointer-down, `onresize` once per animation frame (and per keyboard
+step), `onresizeend` with the settled width on release — enough to suspend
+expensive panel work only while the width is in flux. A keyboard step commits
+without a start.
 
 ```svelte
 <ResizablePanel mode="overlay" side="right" label="Conversation" bind:open
@@ -702,7 +712,11 @@ panel.
 one outer radius, square inner corners, a 1px divider, two tab stops. The
 primary takes `onclick`, `type` (submit inside a form) and `loading`; the caret
 takes `label` (its accessible name), `items`, `placement` and the `Menu`
-panel props (`tag`, `panelClass`, `gap`, `open`, `onopen`, `onclose`).
+panel props (`tag`, `panelClass`, `panelStyle`, `gap`, `open`, `onopen`,
+`onclose`). `primaryProps` sets attributes on the primary segment itself
+(`title`, `aria-describedby`, `data-*` — a disabled-with-reason tooltip), while
+rest props stay on the root box; the props SplitButton owns are applied after it,
+so the fused chrome cannot be clobbered.
 `variant` (default | primary | danger), `size` and `control` apply to both
 segments and match `Button` heights; `disabled` turns off the whole control,
 `menuDisabled` only the caret. `caret="half"` narrows the caret to half the
@@ -791,7 +805,7 @@ Button and Popover share the same semantic tones. For a confirmed positive
 action, `tone="success"` gives neutral controls a success tint; combine it with
 `variant="primary"` for a filled success action without consumer CSS.
 
-`count` on `Button`, `IconButton` and `Popover` (its trigger) paints a corner
+`count` on `Button`, `IconButton`, `Popover` and `Menu` (their trigger) paints a corner
 count pill (unread, selected, queued) on any size, variant or `box`. It hides at
 `0`/`undefined`, displays `99+` past `countMax`, and the exact number joins the
 accessible name (`"Inbox, 120"`) whether that comes from `aria-label`, `label`

package/dist/components/atoms/Checkbox.svelte

@@ -5,6 +5,7 @@
 	// native attribute via `...rest`.
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getFieldContext } from '../../field-context';
+	import type { ControlSize } from '../../size';
 
 	let {
 		checked = $bindable(false),
@@ -12,13 +13,14 @@
 		invalid = false,
 		label,
 		labelHidden = false,
+		size = 'md',
 		id,
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		el = $bindable(null),
 		...rest
-	}: HTMLInputAttributes & {
+	}: Omit<HTMLInputAttributes, 'size'> & {
 		checked?: boolean;
 		indeterminate?: boolean;
 		/** Error state: danger box border + aria-invalid. */
@@ -26,6 +28,9 @@
 		label: string;
 		/** Keep `label` for AT only (sr-only). */
 		labelHidden?: boolean;
+		/** Box + label scale, as on `Switch`. Override the box alone with
+		 *  `style="--cb-box: 1rem"`. */
+		size?: ControlSize;
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
@@ -41,7 +46,12 @@
 	});
 </script>
 
-<label class="checkbox {klass}" data-tsu="Checkbox">
+<label
+	class="checkbox {klass}"
+	class:checkbox-sm={size === 'sm'}
+	class:checkbox-lg={size === 'lg'}
+	data-tsu="Checkbox"
+>
 	<input
 		bind:this={el}
 		type="checkbox"
@@ -72,11 +82,19 @@
 		opacity: 0;
 		margin: 0;
 	}
+	.checkbox-sm {
+		--cb-box: 0.95rem;
+		font-size: var(--fs-xs);
+	}
+	.checkbox-lg {
+		--cb-box: 1.35rem;
+		font-size: var(--fs-base);
+	}
 	.box {
 		position: relative;
 		flex: none;
-		width: 1.15rem;
-		height: 1.15rem;
+		width: var(--cb-box, 1.15rem);
+		height: var(--cb-box, 1.15rem);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-sm);
 		background: var(--bg);

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

@@ -1,5 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLInputAttributes & {
+import type { ControlSize } from '../../size';
+type $$ComponentProps = Omit<HTMLInputAttributes, 'size'> & {
     checked?: boolean;
     indeterminate?: boolean;
     /** Error state: danger box border + aria-invalid. */
@@ -7,6 +8,9 @@ type $$ComponentProps = HTMLInputAttributes & {
     label: string;
     /** Keep `label` for AT only (sr-only). */
     labelHidden?: boolean;
+    /** Box + label scale, as on `Switch`. Override the box alone with
+     *  `style="--cb-box: 1rem"`. */
+    size?: ControlSize;
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLInputAttributes['aria-invalid'];

package/dist/components/atoms/Icon.svelte

@@ -35,6 +35,8 @@
 		upload: '<path d="M12 3v12" /><path d="m17 8-5-5-5 5" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />',
 		send: '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" /><path d="m21.854 2.147-10.94 10.939" />',
 		share: '<circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" /><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" />',
+		reply: '<path d="M20 18v-2a4 4 0 0 0-4-4H4" /><path d="m9 17-5-5 5-5" />',
+		quote: '<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" /><path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />',
 		retry: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" />',
 		settings: '<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" />',
 		recycle: '<path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5" /><path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12" /><path d="m14 16-3 3 3 3" /><path d="M8.293 13.596 7.196 9.5 3.1 10.598" /><path d="m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843" /><path d="m13.378 9.633 4.096 1.098 1.097-4.096" />',

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

@@ -26,6 +26,8 @@ declare const ICONS: {
     readonly upload: "<path d=\"M12 3v12\" /><path d=\"m17 8-5-5-5 5\" /><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />";
     readonly send: "<path d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z\" /><path d=\"m21.854 2.147-10.94 10.939\" />";
     readonly share: "<circle cx=\"18\" cy=\"5\" r=\"3\" /><circle cx=\"6\" cy=\"12\" r=\"3\" /><circle cx=\"18\" cy=\"19\" r=\"3\" /><line x1=\"8.59\" x2=\"15.42\" y1=\"13.51\" y2=\"17.49\" /><line x1=\"15.41\" x2=\"8.59\" y1=\"6.51\" y2=\"10.49\" />";
+    readonly reply: "<path d=\"M20 18v-2a4 4 0 0 0-4-4H4\" /><path d=\"m9 17-5-5 5-5\" />";
+    readonly quote: "<path d=\"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z\" /><path d=\"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z\" />";
     readonly retry: "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" /><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /><path d=\"M8 16H3v5\" />";
     readonly settings: "<path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />";
     readonly recycle: "<path d=\"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5\" /><path d=\"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12\" /><path d=\"m14 16-3 3 3 3\" /><path d=\"M8.293 13.596 7.196 9.5 3.1 10.598\" /><path d=\"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843\" /><path d=\"m13.378 9.633 4.096 1.098 1.097-4.096\" />";

package/dist/components/layouts/ResizablePanel.svelte

@@ -19,6 +19,9 @@
 		collapsed = $bindable(false),
 		persistCollapsed = true,
 		resizeStep = 16,
+		onresizestart,
+		onresize,
+		onresizeend,
 		handlePlacement = 'bottom',
 		stickyHandle = true,
 		mode = 'inline',
@@ -53,6 +56,14 @@
 		persistCollapsed?: boolean;
 		/** Pixels added or removed by each resize-separator arrow key press. */
 		resizeStep?: number;
+		/** A pointer drag of the separator began. Pair with `onresizeend` to
+		 *  suspend expensive work in the panel body while the width is in flux. */
+		onresizestart?: () => void;
+		/** Live width, once per animation frame while dragging and on each
+		 *  keyboard step. */
+		onresize?: (width: number) => void;
+		/** Settled width: on pointer release, and after each keyboard step. */
+		onresizeend?: (width: number) => void;
 		/** Anchor the collapse handle at the top or bottom of the panel edge. */
 		handlePlacement?: 'top' | 'bottom';
 		/** Keep the collapse handle in view when the panel scrolls past the
@@ -206,6 +217,17 @@
 
 	function setWidth(nextWidth: number) {
 		panelWidth = Math.round(Math.max(boundedMin, Math.min(nextWidth, boundedMax)));
+		onresize?.(panelWidth);
+	}
+
+	function commitWidth(nextWidth: number) {
+		persistWidth(nextWidth);
+		onresizeend?.(nextWidth);
+	}
+
+	function setResizing(active: boolean) {
+		resizing = active;
+		if (active) onresizestart?.();
 	}
 
 	// Keep the collapse handle within the viewport (and its panel) while a long
@@ -322,8 +344,8 @@
 						step: resizeStep,
 						measure: () => currentWidth,
 						onwidth: setWidth,
-						oncommit: persistWidth,
-						onactive: (active) => (resizing = active)
+						oncommit: commitWidth,
+						onactive: setResizing
 					}}
 				></div>
 			{/if}
@@ -525,7 +547,9 @@
 
 	/* Overlay mode: a fixed non-modal drawer on the viewport edge. The page
 	   (`.main`) flows as normal underneath; the handle overhang is a viewport
-	   edge, so the container clamp does not apply. */
+	   edge, so the container clamp does not apply. Widths clamp against the
+	   containing block, never `100vw`: the reset's `scrollbar-gutter: stable`
+	   makes `100vw` wider than the viewport and clips the panel's leading edge. */
 	.panel-layout.overlay {
 		display: block;
 		container: none;
@@ -535,7 +559,7 @@
 		inset-block: 0;
 		left: 0;
 		z-index: var(--z-drawer);
-		width: min(var(--panel-current-width), 100vw);
+		width: min(var(--panel-current-width), 100%);
 		box-shadow: var(--shadow-md);
 		outline: none;
 		animation: panel-slide-left 0.18s var(--ease);
@@ -549,7 +573,9 @@
 		--handle-shift: -6px;
 	}
 	.overlay.full-bleed .panel {
-		width: 100vw;
+		left: 0;
+		right: 0;
+		width: auto;
 		border: 0;
 		box-shadow: none;
 	}

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

@@ -22,6 +22,14 @@ type $$ComponentProps = {
     persistCollapsed?: boolean;
     /** Pixels added or removed by each resize-separator arrow key press. */
     resizeStep?: number;
+    /** A pointer drag of the separator began. Pair with `onresizeend` to
+     *  suspend expensive work in the panel body while the width is in flux. */
+    onresizestart?: () => void;
+    /** Live width, once per animation frame while dragging and on each
+     *  keyboard step. */
+    onresize?: (width: number) => void;
+    /** Settled width: on pointer release, and after each keyboard step. */
+    onresizeend?: (width: number) => void;
     /** Anchor the collapse handle at the top or bottom of the panel edge. */
     handlePlacement?: 'top' | 'bottom';
     /** Keep the collapse handle in view when the panel scrolls past the

package/dist/components/layouts/Toolbar.svelte

@@ -9,7 +9,7 @@
 	// controls actually visible, the `…` trigger included. Children are arbitrary
 	// snippet content, so the ring is read from the DOM rather than a list prop.
 	import type { Snippet } from 'svelte';
-	import IconButton from '../molecules/IconButton.svelte';
+	import Icon from '../atoms/Icon.svelte';
 	import Menu, { type MenuItem } from '../molecules/Menu.svelte';
 	import Popover from '../molecules/Popover.svelte';
 	import {
@@ -161,12 +161,12 @@
 	{@render children()}
 	{#if collapsed && hasOverflow}
 		{#if items?.length}
-			<Menu label={overflowLabel} {items} placement="bottom-end" box="sm">
-				{#snippet trigger()}<IconButton icon="more" label={overflowLabel} box="sm" />{/snippet}
+			<Menu label={overflowLabel} title={overflowLabel} {items} placement="bottom-end" box="sm">
+				{#snippet trigger()}<Icon name="more" size={18} />{/snippet}
 			</Menu>
 		{:else if overflow}
-			<Popover label={overflowLabel} placement="bottom-end" box="sm">
-				{#snippet trigger()}<IconButton icon="more" label={overflowLabel} box="sm" />{/snippet}
+			<Popover label={overflowLabel} title={overflowLabel} placement="bottom-end" box="sm">
+				{#snippet trigger()}<Icon name="more" size={18} />{/snippet}
 				<div class="overflow-panel">{@render overflow()}</div>
 			</Popover>
 		{/if}

package/dist/components/molecules/Accordion.svelte

@@ -1,12 +1,18 @@
 <script lang="ts" module>
 	import type { Snippet } from 'svelte';
 	import type { DisclosureHeaderContext } from './Disclosure.svelte';
+	export type AccordionVariant = 'default' | 'plain';
+	/** What a `summary` snippet receives: the live open state plus the item it is
+	 *  rendering, so one shared snippet can head every item. */
+	export interface AccordionHeaderContext extends DisclosureHeaderContext {
+		item: AccordionItem;
+	}
 	export interface AccordionItem {
 		id: string;
 		/** Plain-text header; `summary` wins when both are given. */
 		title?: string;
-		/** Rich header content; receives the live open state. */
-		summary?: Snippet<[DisclosureHeaderContext]>;
+		/** Rich header content; receives the live open state and this item. */
+		summary?: Snippet<[AccordionHeaderContext]>;
 		/** Panel content for this item. */
 		content: Snippet;
 		/** Open state. Re-passing a new value takes over from any local toggle. */
@@ -22,12 +28,14 @@
 	// closes the other items when one opens.
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Disclosure from './Disclosure.svelte';
-	import type { DisclosureChevron } from './Disclosure.svelte';
+	import type { DisclosureChevron, DisclosureSize } from './Disclosure.svelte';
 
 	let {
 		items,
 		multiple = true,
 		chevron = 'end',
+		variant = 'default',
+		size = 'default',
 		onchange,
 		class: klass = '',
 		style: styleProp = '',
@@ -38,6 +46,11 @@
 		items: AccordionItem[];
 		multiple?: boolean;
 		chevron?: DisclosureChevron;
+		/** `plain` drops the outer border and radius and keeps the item dividers,
+		 *  for a stack that only separates rows. */
+		variant?: AccordionVariant;
+		/** Header/panel density of every item; forwarded to `Disclosure`. */
+		size?: DisclosureSize;
 		onchange?: (id: string, open: boolean) => void;
 		class?: string;
 		style?: string;
@@ -75,7 +88,13 @@
 	<span class="acc-title">{title}</span>
 {/snippet}
 
-<div {...rest} class="accordion {klass}" style={styleProp} data-tsu="Accordion">
+<div
+	{...rest}
+	class="accordion {klass}"
+	class:accordion--plain={variant === 'plain'}
+	style={styleProp}
+	data-tsu="Accordion"
+>
 	{#each items as item (item.id)}
 		<Disclosure
 			class="acc-item"
@@ -84,10 +103,11 @@
 			onchange={(o) => set(item, o)}
 			disabled={item.disabled}
 			{chevron}
+			{size}
 		>
 			{#snippet header(ctx)}
 				{#if item.summary}
-					{@render item.summary(ctx)}
+					{@render item.summary({ ...ctx, item })}
 				{:else}
 					{@render plain(item.title)}
 				{/if}
@@ -103,6 +123,10 @@
 		border-radius: var(--r-lg);
 		overflow: hidden;
 	}
+	.accordion--plain {
+		border: 0;
+		border-radius: 0;
+	}
 	.accordion > :global(.acc-item + .acc-item) {
 		border-top: 1px solid var(--border);
 	}

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

@@ -1,11 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { DisclosureHeaderContext } from './Disclosure.svelte';
+export type AccordionVariant = 'default' | 'plain';
+/** What a `summary` snippet receives: the live open state plus the item it is
+ *  rendering, so one shared snippet can head every item. */
+export interface AccordionHeaderContext extends DisclosureHeaderContext {
+    item: AccordionItem;
+}
 export interface AccordionItem {
     id: string;
     /** Plain-text header; `summary` wins when both are given. */
     title?: string;
-    /** Rich header content; receives the live open state. */
-    summary?: Snippet<[DisclosureHeaderContext]>;
+    /** Rich header content; receives the live open state and this item. */
+    summary?: Snippet<[AccordionHeaderContext]>;
     /** Panel content for this item. */
     content: Snippet;
     /** Open state. Re-passing a new value takes over from any local toggle. */
@@ -14,11 +20,16 @@ export interface AccordionItem {
     disabled?: boolean;
 }
 import type { HTMLAttributes } from 'svelte/elements';
-import type { DisclosureChevron } from './Disclosure.svelte';
+import type { DisclosureChevron, DisclosureSize } from './Disclosure.svelte';
 type Own = {
     items: AccordionItem[];
     multiple?: boolean;
     chevron?: DisclosureChevron;
+    /** `plain` drops the outer border and radius and keeps the item dividers,
+     *  for a stack that only separates rows. */
+    variant?: AccordionVariant;
+    /** Header/panel density of every item; forwarded to `Disclosure`. */
+    size?: DisclosureSize;
     onchange?: (id: string, open: boolean) => void;
     class?: string;
     style?: string;

package/dist/components/molecules/Disclosure.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	export type DisclosureChevron = 'start' | 'end' | false;
+	export type DisclosureSize = 'default' | 'compact';
 	export interface DisclosureHeaderContext {
 		open: boolean;
 	}
@@ -18,6 +19,7 @@
 		header,
 		children,
 		chevron = 'end',
+		size = 'default',
 		id,
 		onchange,
 		disabled = false,
@@ -35,6 +37,10 @@
 		children: Snippet;
 		/** Chevron placement; `false` hides it. */
 		chevron?: DisclosureChevron;
+		/** Header/panel density. `compact` shrinks both to `--fs-xs` and tighter
+		 *  padding for strip rows; tune either with `--disclosure-pad`,
+		 *  `--disclosure-fs`, `--disclosure-panel-pad`. */
+		size?: DisclosureSize;
 		/** Base for the button/panel ids the ARIA wiring uses. */
 		id?: string;
 		onchange?: (open: boolean) => void;
@@ -60,6 +66,7 @@
 	{...rest}
 	class="disclosure {klass}"
 	class:disclosure--open={open}
+	class:disclosure--compact={size === 'compact'}
 	style={styleProp}
 	data-tsu="Disclosure"
 >
@@ -101,13 +108,13 @@
 		justify-content: space-between;
 		gap: var(--sp-2);
 		width: 100%;
-		padding: var(--sp-3) var(--sp-4);
+		padding: var(--disclosure-pad, var(--sp-3) var(--sp-4));
 		border: 0;
 		background: none;
 		color: inherit;
 		font: inherit;
 		font-weight: var(--fw-medium);
-		font-size: var(--fs-sm);
+		font-size: var(--disclosure-fs, var(--fs-sm));
 		text-align: start;
 		cursor: pointer;
 		user-select: none;
@@ -145,10 +152,15 @@
 		}
 	}
 	.disclosure__panel {
-		padding: 0 var(--sp-4) var(--sp-4);
-		font-size: var(--fs-sm);
+		padding: var(--disclosure-panel-pad, 0 var(--sp-4) var(--sp-4));
+		font-size: var(--disclosure-fs, var(--fs-sm));
 		color: var(--text-muted);
 	}
+	.disclosure--compact {
+		--disclosure-pad: var(--sp-1) var(--sp-2);
+		--disclosure-fs: var(--fs-xs);
+		--disclosure-panel-pad: 0 var(--sp-2) var(--sp-2);
+	}
 	.disclosure__panel[hidden] {
 		display: none;
 	}

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

@@ -1,4 +1,5 @@
 export type DisclosureChevron = 'start' | 'end' | false;
+export type DisclosureSize = 'default' | 'compact';
 export interface DisclosureHeaderContext {
     open: boolean;
 }
@@ -11,6 +12,10 @@ type Own = {
     children: Snippet;
     /** Chevron placement; `false` hides it. */
     chevron?: DisclosureChevron;
+    /** Header/panel density. `compact` shrinks both to `--fs-xs` and tighter
+     *  padding for strip rows; tune either with `--disclosure-pad`,
+     *  `--disclosure-fs`, `--disclosure-panel-pad`. */
+    size?: DisclosureSize;
     /** Base for the button/panel ids the ARIA wiring uses. */
     id?: string;
     onchange?: (open: boolean) => void;

package/dist/components/molecules/Drawer.svelte

@@ -266,7 +266,7 @@
 
 	@media (min-width: 48rem) {
 		.panel {
-			width: min(var(--drawer-w), 100vw);
+			width: min(var(--drawer-w), 100%);
 			padding-top: 0;
 			padding-bottom: 0;
 			border-left: 1px solid var(--border-strong);

package/dist/components/molecules/IconButton.svelte

@@ -54,6 +54,9 @@
 		showLabel?: boolean | 'row';
 		/** Rotate the glyph (refresh in flight). */
 		spin?: boolean;
+		/** Force the glyph filled (or outlined), overriding its registry default —
+		 *  a pin/star toggle painting its "on" state. Forwarded to Icon. */
+		filled?: boolean;
 		/** Forwarded to Button: spinner, blocks clicks, aria-busy. */
 		loading?: boolean;
 		/** Corner count indicator, forwarded to Button; the count joins `label`
@@ -83,6 +86,7 @@
 		pressed,
 		showLabel = false,
 		spin = false,
+		filled,
 		loading = false,
 		count,
 		countMax,
@@ -126,17 +130,17 @@
 >
 	{#if children}
 		{#if glyphCss}
-			<span class="glyph" style="font-size: {glyphCss}"><Icon {spin}>{@render children()}</Icon></span>
+			<span class="glyph" style="font-size: {glyphCss}"><Icon {spin} {filled}>{@render children()}</Icon></span>
 		{:else}
-			<Icon {size} {spin}>{@render children()}</Icon>
+			<Icon {size} {spin} {filled}>{@render children()}</Icon>
 		{/if}
 	{:else if emoji}
 		<span class="emoji" style="font-size: {emojiCss}" aria-hidden="true">{emoji}</span>
 	{:else if icon}
 		{#if glyphCss}
-			<span class="glyph" style="font-size: {glyphCss}"><Icon name={icon} {spin} /></span>
+			<span class="glyph" style="font-size: {glyphCss}"><Icon name={icon} {spin} {filled} /></span>
 		{:else}
-			<Icon name={icon} {size} {spin} />
+			<Icon name={icon} {size} {spin} {filled} />
 		{/if}
 	{/if}
 	{#if showLabel}<span class="ib-label">{label}</span>{/if}

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

@@ -31,6 +31,9 @@ type IconButtonProps = HTMLButtonAttributes & {
     showLabel?: boolean | 'row';
     /** Rotate the glyph (refresh in flight). */
     spin?: boolean;
+    /** Force the glyph filled (or outlined), overriding its registry default —
+     *  a pin/star toggle painting its "on" state. Forwarded to Icon. */
+    filled?: boolean;
     /** Forwarded to Button: spinner, blocks clicks, aria-busy. */
     loading?: boolean;
     /** Corner count indicator, forwarded to Button; the count joins `label`

package/dist/components/molecules/Menu.svelte

@@ -36,6 +36,7 @@
 	// (inherited from the native popover). An item's `tag` renders as a soft
 	// Badge pill after the label; the `tag` snippet replaces that pill.
 	import type { ComponentProps, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import Popover from './Popover.svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import Badge from '../atoms/Badge.svelte';
@@ -52,10 +53,13 @@
 		| 'control'
 		| 'block'
 		| 'triggerClass'
+		| 'title'
 		| 'bare'
 		| 'hitArea'
 		| 'disabled'
 		| 'gap'
+		| 'count'
+		| 'countMax'
 		| 'onopen'
 		| 'onclose'
 	>;
@@ -74,10 +78,13 @@
 		control,
 		block,
 		triggerClass,
+		title,
 		bare,
 		hitArea,
 		disabled,
 		gap,
+		count,
+		countMax,
 		onopen,
 		onclose,
 		open = $bindable(false),
@@ -85,7 +92,11 @@
 		class: klass = '',
 		style: styleProp = '',
 		panelClass = '',
-	}: {
+		panelStyle = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
+
+	type Own = {
 		label: string;
 		items: MenuItem[];
 		trigger: Snippet;
@@ -98,8 +109,11 @@
 		closeOnSelect?: boolean;
 		class?: string;
 		style?: string;
+		/** Class / inline style on the floating panel; `panelStyle` is how you
+		 *  size or cap it (`min-width`, `max-height`, `padding`). */
 		panelClass?: string;
-	} & TriggerChrome = $props();
+		panelStyle?: string;
+	} & TriggerChrome;
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
@@ -137,6 +151,7 @@
 </script>
 
 <Popover
+	{...rest}
 	{label}
 	{placement}
 	{trigger}
@@ -148,13 +163,17 @@
 	{control}
 	{block}
 	{triggerClass}
+	{title}
 	class={klass}
 	style={styleProp}
 	{panelClass}
+	{panelStyle}
 	{bare}
 	{hitArea}
 	{disabled}
 	{gap}
+	{count}
+	{countMax}
 	role="menu"
 	haspopup="menu"
 	bind:open

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

@@ -25,10 +25,11 @@ export interface MenuItem {
     attrs?: import('svelte/elements').HTMLButtonAttributes;
 }
 import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import Popover from './Popover.svelte';
 type PopoverProps = ComponentProps<typeof Popover>;
-type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
-type $$ComponentProps = {
+type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'title' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'count' | 'countMax' | 'onopen' | 'onclose'>;
+type Own = {
     label: string;
     items: MenuItem[];
     trigger: Snippet;
@@ -41,8 +42,12 @@ type $$ComponentProps = {
     closeOnSelect?: boolean;
     class?: string;
     style?: string;
+    /** Class / inline style on the floating panel; `panelStyle` is how you
+     *  size or cap it (`min-width`, `max-height`, `padding`). */
     panelClass?: string;
+    panelStyle?: string;
 } & TriggerChrome;
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/molecules/SplitButton.svelte

@@ -6,7 +6,7 @@
 	// properties so the fused look needs no reach into their scoped CSS.
 	import type { ControlSize } from '../../size';
 	import type { ComponentProps, Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import Button from '../atoms/Button.svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import Menu, { type MenuItem } from './Menu.svelte';
@@ -32,6 +32,11 @@
 		/** Custom trailing content for items that carry a `tag`. */
 		tag?: MenuProps['tag'];
 		panelClass?: string;
+		panelStyle?: MenuProps['panelStyle'];
+		/** Attributes for the primary segment itself — `title`,
+		 *  `aria-describedby`, `data-*`. Rest props stay on the root box, which is
+		 *  where a layout class or `data-journey` for the pair belongs. */
+		primaryProps?: Omit<HTMLButtonAttributes, 'class'> & { class?: string };
 		gap?: number;
 		/** Bindable open state of the menu. */
 		open?: boolean;
@@ -61,6 +66,8 @@
 		placement = 'bottom-end',
 		tag,
 		panelClass,
+		panelStyle,
+		primaryProps,
 		gap,
 		open = $bindable(false),
 		onopen,
@@ -100,6 +107,7 @@
 >
 	<span class="split-main">
 		<Button
+			{...primaryProps}
 			{variant}
 			{size}
 			{control}
@@ -120,6 +128,7 @@
 			{placement}
 			{tag}
 			{panelClass}
+			{panelStyle}
 			{gap}
 			{variant}
 			{size}

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

@@ -1,6 +1,6 @@
 import type { ControlSize } from '../../size';
 import type { ComponentProps, Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import Menu, { type MenuItem } from './Menu.svelte';
 type MenuProps = ComponentProps<typeof Menu>;
 type Own = {
@@ -22,6 +22,13 @@ type Own = {
     /** Custom trailing content for items that carry a `tag`. */
     tag?: MenuProps['tag'];
     panelClass?: string;
+    panelStyle?: MenuProps['panelStyle'];
+    /** Attributes for the primary segment itself — `title`,
+     *  `aria-describedby`, `data-*`. Rest props stay on the root box, which is
+     *  where a layout class or `data-journey` for the pair belongs. */
+    primaryProps?: Omit<HTMLButtonAttributes, 'class'> & {
+        class?: string;
+    };
     gap?: number;
     /** Bindable open state of the menu. */
     open?: boolean;

package/dist/index.d.ts

@@ -42,7 +42,7 @@ export { default as ResizablePanel } from './components/layouts/ResizablePanel.s
 export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { default as Toolbar } from './components/layouts/Toolbar.svelte';
-export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
+export { type AccordionHeaderContext, type AccordionItem, type AccordionVariant, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type Attachment, default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
@@ -55,7 +55,7 @@ export { default as Composer } from './components/molecules/Composer.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { applyTrigger, comboboxAction, findTrigger, nextComboboxIndex, } from './components/molecules/combobox-keyboard.js';
-export { type DisclosureChevron, type DisclosureHeaderContext, default as Disclosure, } from './components/molecules/Disclosure.svelte';
+export { type DisclosureChevron, type DisclosureHeaderContext, type DisclosureSize, default as Disclosure, } from './components/molecules/Disclosure.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';

package/package.json

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