@dorsk/tsumikit 0.56.0 → 0.58.0

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

@@ -0,0 +1,26 @@
+export type DisclosureChevron = 'start' | 'end' | false;
+export interface DisclosureHeaderContext {
+    open: boolean;
+}
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    open?: boolean;
+    /** Rich header content; receives the live open state. */
+    header: Snippet<[DisclosureHeaderContext]>;
+    children: Snippet;
+    /** Chevron placement; `false` hides it. */
+    chevron?: DisclosureChevron;
+    /** Base for the button/panel ids the ARIA wiring uses. */
+    id?: string;
+    onchange?: (open: boolean) => void;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    buttonClass?: string;
+    panelClass?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const Disclosure: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/dist/components/molecules/IconButton.svelte

@@ -56,6 +56,10 @@
 		spin?: boolean;
 		/** Forwarded to Button: spinner, blocks clicks, aria-busy. */
 		loading?: boolean;
+		/** Corner count indicator, forwarded to Button; the count joins `label`
+		 *  in the accessible name. */
+		count?: number;
+		countMax?: number;
 		class?: string;
 	};
 
@@ -80,6 +84,8 @@
 		showLabel = false,
 		spin = false,
 		loading = false,
+		count,
+		countMax,
 		disabled = false,
 		onclick,
 		class: klass = '',
@@ -106,6 +112,8 @@
 	{hitArea}
 	{disabled}
 	{loading}
+	{count}
+	{countMax}
 	{title}
 	{onclick}
 	icon={!inline && !chip && !showLabel}

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

@@ -33,6 +33,10 @@ type IconButtonProps = HTMLButtonAttributes & {
     spin?: boolean;
     /** Forwarded to Button: spinner, blocks clicks, aria-busy. */
     loading?: boolean;
+    /** Corner count indicator, forwarded to Button; the count joins `label`
+     *  in the accessible name. */
+    count?: number;
+    countMax?: number;
     class?: string;
 };
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;

package/dist/components/molecules/InputGroup.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { Attachment } from 'svelte/attachments';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setInputGroupContext } from '../../input-group-context';
+	import type { ControlSize } from '../../size';
+
+	type Own = {
+		/** Overlaid at the inline start of the field, e.g. an icon-only FileButton. */
+		leading?: Snippet;
+		/** The field: an Input or Textarea, optionally wrapped by the consumer. */
+		children: Snippet;
+		/** Overlaid at the inline end of the field, e.g. a Button or SplitButton. */
+		trailing?: Snippet;
+		/** `end` pins the adornments to the bottom edge as a textarea grows;
+		 *  `center` is for a single-line Input. */
+		align?: 'end' | 'center';
+		size?: ControlSize;
+		disabled?: boolean;
+		error?: boolean;
+		class?: string;
+		style?: string;
+	};
+
+	let {
+		leading,
+		children,
+		trailing,
+		align = 'end',
+		size = 'md',
+		disabled = false,
+		error = false,
+		class: klass = '',
+		style: styleProp = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	setInputGroupContext({
+		get size() {
+			return size;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get invalid() {
+			return error;
+		}
+	});
+
+	let leadingW = $state(0);
+	let trailingW = $state(0);
+
+	function measure(set: (width: number) => void): Attachment {
+		return (node) => {
+			if (typeof ResizeObserver === 'undefined') return;
+			const ro = new ResizeObserver((entries) => {
+				for (const entry of entries)
+					set(entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width);
+			});
+			ro.observe(node);
+			return () => {
+				ro.disconnect();
+				set(0);
+			};
+		};
+	}
+	const measureLeading = measure((w) => (leadingW = w));
+	const measureTrailing = measure((w) => (trailingW = w));
+</script>
+
+<div
+	{...rest}
+	data-tsu="InputGroup"
+	class="ig {klass}"
+	class:ig-center={align === 'center'}
+	class:ig-sm={size === 'sm'}
+	class:ig-lg={size === 'lg'}
+	class:disabled
+	style:--ig-leading-w="{leadingW}px"
+	style:--ig-trailing-w="{trailingW}px"
+	style={styleProp}
+>
+	{#if leading}
+		<div class="ig-adorn ig-leading" {@attach measureLeading}>{@render leading()}</div>
+	{/if}
+	<div class="ig-field">{@render children()}</div>
+	{#if trailing}
+		<div class="ig-adorn ig-trailing" {@attach measureTrailing}>{@render trailing()}</div>
+	{/if}
+</div>
+
+<style>
+	/* The field's own border box spans the whole group: Gecko zooms to the
+	   focused element's rect on mobile, so the adornments must overlay it, never
+	   sit beside a narrower field. The field reads --ig-leading-w /
+	   --ig-trailing-w to keep its text clear of them. */
+	.ig {
+		--ig-h: var(--control-height-default);
+		--ig-pad-x: var(--sp-3);
+		--ig-gap: var(--sp-2);
+		--ig-inset: 2px;
+		--ig-radius: var(--r-md);
+		position: relative;
+		display: flex;
+		width: 100%;
+	}
+	.ig-sm {
+		--ig-h: var(--control-height-compact);
+		--ig-pad-x: var(--sp-2);
+		--ig-gap: var(--sp-1);
+	}
+	.ig-lg {
+		--ig-h: var(--control-height-large);
+		--ig-pad-x: var(--sp-4);
+	}
+	.ig-field {
+		width: 100%;
+		min-width: 0;
+	}
+	.ig-adorn {
+		position: absolute;
+		bottom: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		gap: var(--ig-inset);
+		height: var(--ig-h);
+		padding-inline: var(--ig-inset);
+		pointer-events: none;
+	}
+	.ig-adorn > :global(*) {
+		pointer-events: auto;
+	}
+	.ig-leading {
+		inset-inline-start: 0;
+	}
+	.ig-trailing {
+		inset-inline-end: 0;
+	}
+	.ig-center .ig-adorn {
+		top: 0;
+		height: auto;
+	}
+	.ig:has(:focus-visible)::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: var(--ig-radius);
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+		pointer-events: none;
+	}
+	.ig.disabled {
+		opacity: 0.45;
+	}
+	.ig.disabled .ig-adorn > :global(:disabled) {
+		opacity: 1;
+	}
+</style>

package/dist/components/molecules/InputGroup.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 = {
+    /** Overlaid at the inline start of the field, e.g. an icon-only FileButton. */
+    leading?: Snippet;
+    /** The field: an Input or Textarea, optionally wrapped by the consumer. */
+    children: Snippet;
+    /** Overlaid at the inline end of the field, e.g. a Button or SplitButton. */
+    trailing?: Snippet;
+    /** `end` pins the adornments to the bottom edge as a textarea grows;
+     *  `center` is for a single-line Input. */
+    align?: 'end' | 'center';
+    size?: ControlSize;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    style?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const InputGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/molecules/Menu.svelte

@@ -8,8 +8,14 @@
 		/** Free-form trailing pill ("admin", "pro", "beta"…), rendered as a Badge after the label. */
 		tag?: string;
 		tagTone?: import('svelte').ComponentProps<typeof import('../atoms/Badge.svelte').default>['tone'];
-		/** Two-state item: rendered as `menuitemcheckbox` with a check glyph when on. */
+		/**
+		 * Two-state item: rendered as `menuitemcheckbox` with `aria-checked`. Its icon stays in
+		 * the leading column and the check glyph moves to the trailing edge; without an icon
+		 * the check glyph takes the leading column.
+		 */
 		pressed?: boolean;
+		/** Selecting this item leaves the menu open (overrides the menu's `closeOnSelect`). */
+		keepOpen?: boolean;
 		/** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
 		content?: import('svelte').Snippet<[MenuItem]>;
 		/**
@@ -24,7 +30,8 @@
 <script lang="ts">
 	// Dropdown menu: a Popover whose panel carries the WAI-ARIA `menu` role. Items are
 	// `menuitem`s navigable with ↑/↓/Home/End, activated with Enter/Space (and
-	// click). Selecting an item runs its action and closes the menu. Focus moves
+	// click). Selecting an item runs its action and closes the menu unless the menu
+	// sets `closeOnSelect={false}` or the item sets `keepOpen`. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
 	// (inherited from the native popover). An item's `tag` renders as a soft
 	// Badge pill after the label; the `tag` snippet replaces that pill.
@@ -32,6 +39,7 @@
 	import Popover from './Popover.svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import Badge from '../atoms/Badge.svelte';
+	import { menuItemCloses, menuItemGlyphs } from './menu-item';
 
 	type PopoverProps = ComponentProps<typeof Popover>;
 	type TriggerChrome = Pick<
@@ -73,6 +81,7 @@
 		onopen,
 		onclose,
 		open = $bindable(false),
+		closeOnSelect = true,
 		class: klass = '',
 		style: styleProp = '',
 		panelClass = '',
@@ -85,6 +94,8 @@
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 		/** Bindable open state; set it to open/close programmatically. */
 		open?: boolean;
+		/** Close the menu after an item is selected; a per-item `keepOpen` wins over it. */
+		closeOnSelect?: boolean;
 		class?: string;
 		style?: string;
 		panelClass?: string;
@@ -130,7 +141,7 @@
 	}
 	function select(item: MenuItem, close: () => void) {
 		if (item.disabled) return;
-		close();
+		if (menuItemCloses(item, closeOnSelect)) close();
 		item.onselect();
 	}
 </script>
@@ -184,7 +195,8 @@
 				{#if item.content}
 					{@render item.content(item)}
 				{:else}
-				{#if item.pressed !== undefined}<span class="menu-check"><Icon name="check" /></span>{:else if item.icon}<Icon name={item.icon} />{/if}
+				{@const glyphs = menuItemGlyphs(item)}
+				{#if glyphs.leading === 'check'}<span class="menu-check"><Icon name="check" /></span>{:else if glyphs.leading === 'icon' && item.icon}<Icon name={item.icon} />{/if}
 				<span>{item.label}</span>
 				{#if item.tag !== undefined}
 					{#if tag}
@@ -195,6 +207,7 @@
 						</span>
 					{/if}
 				{/if}
+				{#if glyphs.trailingCheck}<span class="menu-check menu-check-trailing"><Icon name="check" /></span>{/if}
 				{/if}
 			</button>
 		{/each}
@@ -239,12 +252,21 @@
 		visibility: visible;
 		color: var(--accent);
 	}
+	.menu-check-trailing {
+		flex: none;
+		margin-inline-start: auto;
+		padding-inline-start: var(--sp-3);
+	}
 	.menu-tag {
 		display: inline-flex;
 		flex: none;
 		margin-inline-start: auto;
 		padding-inline-start: var(--sp-3);
 	}
+	.menu-tag + .menu-check-trailing {
+		margin-inline-start: 0;
+		padding-inline-start: 0;
+	}
 	.menu-item:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;

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

@@ -7,8 +7,14 @@ export interface MenuItem {
     /** Free-form trailing pill ("admin", "pro", "beta"…), rendered as a Badge after the label. */
     tag?: string;
     tagTone?: import('svelte').ComponentProps<typeof import('../atoms/Badge.svelte').default>['tone'];
-    /** Two-state item: rendered as `menuitemcheckbox` with a check glyph when on. */
+    /**
+     * Two-state item: rendered as `menuitemcheckbox` with `aria-checked`. Its icon stays in
+     * the leading column and the check glyph moves to the trailing edge; without an icon
+     * the check glyph takes the leading column.
+     */
     pressed?: boolean;
+    /** Selecting this item leaves the menu open (overrides the menu's `closeOnSelect`). */
+    keepOpen?: boolean;
     /** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
     content?: import('svelte').Snippet<[MenuItem]>;
     /**
@@ -31,6 +37,8 @@ type $$ComponentProps = {
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
     /** Bindable open state; set it to open/close programmatically. */
     open?: boolean;
+    /** Close the menu after an item is selected; a per-item `keepOpen` wins over it. */
+    closeOnSelect?: boolean;
     class?: string;
     style?: string;
     panelClass?: string;

package/dist/components/molecules/OptionButton.svelte

@@ -17,12 +17,25 @@
 		block = false,
 		type = 'button',
 		disabled = false,
+		value,
+		description,
+		onfocuschange,
+		onfocus,
+		onpointerenter,
+		'aria-describedby': describedBy,
 		class: klass = '',
 		children,
 		...rest
-	}: HTMLButtonAttributes & {
+	}: Omit<HTMLButtonAttributes, 'value'> & {
 		selected?: boolean;
 		row?: boolean;
+		/** Identifies this option in `onfocuschange`. */
+		value?: string;
+		/** Secondary text under the content, announced via `aria-describedby`. */
+		description?: string;
+		/** Fires with `value` when the button gains keyboard focus or pointer
+		 *  hover, so a consumer can drive a preview pane across a set of cards. */
+		onfocuschange?: (value: string) => void;
 		/** Horizontal content alignment. `start` gives a left-aligned list-row
 		 *  variant (pair with `block` for a full-width menu item). */
 		align?: 'center' | 'start';
@@ -30,6 +43,14 @@
 		block?: boolean;
 		children?: Snippet;
 	} = $props();
+
+	const uid = $props.id();
+	const descId = $derived(description ? `${uid}-desc` : undefined);
+	const ariaDescribedBy = $derived([describedBy, descId].filter(Boolean).join(' ') || undefined);
+
+	function activate() {
+		if (value !== undefined) onfocuschange?.(value);
+	}
 </script>
 
 <button
@@ -37,6 +58,16 @@
 	{...rest}
 	{type}
 	{disabled}
+	{value}
+	aria-describedby={ariaDescribedBy}
+	onfocus={(e) => {
+		onfocus?.(e);
+		activate();
+	}}
+	onpointerenter={(e) => {
+		onpointerenter?.(e);
+		activate();
+	}}
 	class="opt {klass}"
 	class:row
 	class:align-start={align === 'start'}
@@ -45,6 +76,7 @@
 	aria-pressed={selected}
 >
 	{@render children?.()}
+	{#if description}<span class="description" id={descId}>{description}</span>{/if}
 </button>
 
 <style>
@@ -83,6 +115,15 @@
 	.opt.block {
 		width: 100%;
 	}
+	.description {
+		font-size: var(--fs-xs);
+		color: var(--faint-color, var(--text-muted));
+		font-weight: var(--fw-normal);
+	}
+	.opt.row .description {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
 	/* Left-aligned list-row variant: content packs to the start on both axes. */
 	.opt.align-start {
 		align-items: flex-start;

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

@@ -1,8 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLButtonAttributes & {
+type $$ComponentProps = Omit<HTMLButtonAttributes, 'value'> & {
     selected?: boolean;
     row?: boolean;
+    /** Identifies this option in `onfocuschange`. */
+    value?: string;
+    /** Secondary text under the content, announced via `aria-describedby`. */
+    description?: string;
+    /** Fires with `value` when the button gains keyboard focus or pointer
+     *  hover, so a consumer can drive a preview pane across a set of cards. */
+    onfocuschange?: (value: string) => void;
     /** Horizontal content alignment. `start` gives a left-aligned list-row
      *  variant (pair with `block` for a full-width menu item). */
     align?: 'center' | 'start';

package/dist/components/molecules/Popover.svelte

@@ -11,6 +11,7 @@
 	// are broadly supported today.)
 	import { tick, type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { formatCount, hasCount } from '../../count';
 	import { place } from '../../floating';
 	import { HOVER_CLOSE_GRACE, HOVER_OPEN_DELAY, createHoverIntent, opensOnHover } from './popover-hover.js';
 
@@ -57,6 +58,10 @@
 		block?: boolean;
 		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
+		/** Corner count indicator on the trigger, as on `Button`: hidden at
+		 *  0/undefined, capped at `countMax+`, the exact number joins `label`. */
+		count?: number;
+		countMax?: number;
 		disabled?: boolean;
 		/** `hover` adds pointer-driven opening on fine pointers; click, Enter and
 		 *  touch keep working so keyboard and touch users reach the same panel. */
@@ -96,6 +101,8 @@
 		control = false,
 		block = false,
 		hitArea = 'auto',
+		count,
+		countMax = 99,
 		disabled = false,
 		openOn = 'click',
 		hoverDelay = HOVER_OPEN_DELAY,
@@ -115,6 +122,9 @@
 	const canonicalChrome = $derived(
 		variant !== undefined || tone !== 'none' || size !== undefined || control || block
 	);
+	const counted = $derived(hasCount(count));
+	const countText = $derived(hasCount(count) ? formatCount(count, countMax) : '');
+	const triggerName = $derived(counted ? `${label}, ${count}` : label);
 
 	const id = `pop-${Math.random().toString(36).slice(2, 8)}`;
 	let triggerEl = $state<HTMLElement | null>(null);
@@ -246,7 +256,8 @@
 	class:trigger-tone-warn={tone === 'warn'}
 	class:trigger-tone-danger={tone === 'danger'}
 	class:is-disabled={disabled && as === 'a'}
-	aria-label={label}
+	class:counted
+	aria-label={triggerName}
 	aria-haspopup={haspopup}
 	aria-expanded={open}
 	{...triggerAttrs}
@@ -256,6 +267,7 @@
 	onkeydown={onTriggerKeydown}
 >
 	{@render trigger()}
+	{#if counted}<span class="pop-count" aria-hidden="true">{countText}</span>{/if}
 </svelte:element>
 
 <div
@@ -444,6 +456,42 @@
 		cursor: pointer;
 		text-decoration: none;
 	}
+	/* Corner count, the same pill Button paints: anchored to the top-right
+	   corner and pulled half outside it so the trigger keeps its own box. */
+	.pop-trigger.counted {
+		position: relative;
+	}
+	.pop-count {
+		position: absolute;
+		top: 0;
+		right: 0;
+		transform: translate(45%, -45%);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		min-width: var(--pop-count-size, 1.125rem);
+		height: var(--pop-count-size, 1.125rem);
+		padding: 0 var(--sp-1);
+		border-radius: var(--r-pill);
+		background: var(--pop-count-bg, var(--accent));
+		color: var(--pop-count-fg, var(--text-on-accent));
+		font-size: var(--fs-xs);
+		font-weight: var(--fw-semibold);
+		font-variant-numeric: tabular-nums;
+		line-height: 1;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+	.trigger-sm .pop-count,
+	.bare .pop-count {
+		--pop-count-size: 1rem;
+		font-size: calc(var(--fs-xs) * 0.85);
+	}
+	.trigger-primary .pop-count {
+		background: var(--pop-count-bg, var(--text-on-accent));
+		color: var(--pop-count-fg, var(--accent));
+	}
 	/* `bare`: strip the chrome down to a plain button the consumer styles. */
 	:where(.pop-trigger.bare) {
 		display: inline;

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

@@ -44,6 +44,10 @@ type Own = {
     block?: boolean;
     /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
+    /** Corner count indicator on the trigger, as on `Button`: hidden at
+     *  0/undefined, capped at `countMax+`, the exact number joins `label`. */
+    count?: number;
+    countMax?: number;
     disabled?: boolean;
     /** `hover` adds pointer-driven opening on fine pointers; click, Enter and
      *  touch keep working so keyboard and touch users reach the same panel. */