@dorsk/tsumikit 0.67.0 → 0.68.0

package/README.md

@@ -207,7 +207,7 @@ sanctioned escape hatch for everything else.
 | `Divider` | `--divider-color`, `--divider-spacing` |
 | `Gauge` | `--gauge-w`, `--gauge-h`, `--gauge-fill` |
 | `MasterDetail` | `--md-list-w`, `--md-gap`, `--md-divider` |
-| `NavBar` | `--navbar-max` |
+| `NavBar` | `--navbar-max`, `--navbar-center-w`, `--navbar-center-raise` |
 | `Callout` | `--callout-tone` |
 | `Fieldset` | `--fieldset-pad`, `--fieldset-border` |
 | `GitRef` | `--git-ref-tone`, `--git-ref-max-width` |
@@ -215,6 +215,8 @@ sanctioned escape hatch for everything else.
 | `Combobox` | `--cb-bg`, `--cb-border`, `--cb-radius`, `--cb-active-bg`, `--cb-min-width`, `--cb-max-height` |
 | `Toggle` | `--toggle-accent`, `--toggle-size` |
 | `Popover` | `--pop-trigger-bg`, `--pop-trigger-fg`, `--pop-trigger-border`, `--pop-trigger-radius`, `--pop-trigger-size`, `--pop-trigger-pad`, `--pop-box`, `--pop-count-bg`, `--pop-count-fg`, `--pop-count-size` |
+| `SortableList` | `--sortable-row-h` |
+| `RadialMenu` | `--radial-radius`, `--radial-petal-size`, `--radial-fab-size` |
 
 `tests/css-custom-property-contract.test.js` reads this table and fails if a
 listed property is not actually read by its component, so the docs cannot drift.
@@ -278,7 +280,7 @@ any custom SVG).
 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,
+Popover, RadialMenu (a FAB that fans `Menu` items out as petals on an arc, see below), 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`;
@@ -322,6 +324,7 @@ then the leaf ellipsises down to `minLeaf`; `full` skips the fit, `copy` makes i
 a copy-on-click button; candidates via the `workingDirCandidates` helper).
 Fieldset (bordered zone, legend rides the border; `droppable` makes it an HTML5
 drop target with `accepts`/`ondrop`/`dropHint` — keyboard alternative is the consumer's job),
+SortableList (reorderable list: grip drag on Pointer Events, keyboard grab, ↑/↓ arrows, see below),
 Combobox (suggestion listbox for a field you render as `children` — an Input for
 plain autocomplete or a Textarea for `@`/`#` mentions; the kit sets the field's
 combobox ARIA and `aria-activedescendant`, floats the `role="listbox"` in the top
@@ -360,7 +363,10 @@ children are `min-width: 0` so a wide title/actions row can't widen the grid on
 mobile), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
 icon/emoji + label + count badge; `placement="bar"` pins it to the bottom edge
 over `--z-nav` with `--safe-bottom` padding, `orientation` stacks or inlines the
-glyph, `maxWidth` centres the row), NavItem
+glyph, `maxWidth` centres the row; items without `href` are buttons that set a
+bindable `value` / `onchange`, in a `tablist` when none are links; `center`
+reserves a notch the items split around, for a raised FAB; `variant="floating"`
+insets it as an elevated rounded card), NavItem
 (collapses to an icon rail when the sidebar is narrow; `icon` from the
 registry, `iconPath` / `iconChildren` for custom glyphs, `activeStyle="bar"`
 for the inset-bar active look), MasterDetail (list + detail columns that
@@ -721,6 +727,41 @@ panel.
 ]} />
 ```
 
+### RadialMenu
+
+`RadialMenu` is a round FAB that opens its `items` (the same `MenuItem` type
+`Menu` takes: `label`, `icon`, `onselect`, `danger`, `disabled`, `pressed`,
+`keepOpen`, `attrs`) as round icon-over-label petals on an arc around it, over
+a `Scrim` (`scrim={false}` drops it; a click outside still closes). `arc`
+`{ from, to }` is in degrees, 0 = right, counter-clockwise; the default
+`{ from: 200, to: -20 }` is an upward fan. Petals sit at equal angles at
+`radius` (default `--radial-radius`, else `8.5rem`) and are `petalSize` wide
+(default `--radial-petal-size`, else `3.5rem`, never under `--touch-target`).
+The panel lives in the top layer, so it escapes `overflow: hidden` parents and
+a fixed bottom bar; the radius shrinks, and then the fan shifts, to keep every
+petal inside the viewport and its safe-area insets. `status` renders a line
+centred above the arc.
+
+The default trigger is a `--radial-fab-size` (3.75rem) circle with a 2px ring
+in `tone` (default `accent`) that swaps `icon` for `closeIcon` while open and
+shows an optional `caption` (string or snippet); `trigger` replaces its content
+and receives `{ open }`. `open` is bindable, with `onopen` / `onclose`; rest
+props land on the trigger. Tap toggles; press-and-slide (press the FAB, drag
+over a petal, release) fires the petal under the finger, sharing the gesture
+helper with `GlyphStack expand="slide"`. The trigger carries `aria-haspopup`,
+`aria-expanded` and `aria-controls`; petals are `menuitem`s with a roving
+tabindex. Opening from the keyboard focuses the first enabled petal; ←/→ walk
+the arc in screen order, ↓/↑ in item order, Home/End jump to the ends,
+Enter/Space fire and close, Escape or Tab close and return focus to the
+trigger. Under `prefers-reduced-motion` petals appear without the staggered
+scale-in.
+
+```svelte
+<RadialMenu label="Bot" {items} caption="● bot" tone="ok">
+  {#snippet status()}● Armed · explore · in world{/snippet}
+</RadialMenu>
+```
+
 ### SplitButton
 
 `SplitButton` fuses a primary action with a narrow caret that opens a `Menu`:
@@ -741,6 +782,45 @@ control height so it reads as secondary. ArrowDown on the primary opens the menu
 <SplitButton variant="primary" label="Send options" {items} onclick={send}>Send</SplitButton>
 ```
 
+### SortableList
+
+`SortableList` reorders a list the consumer owns. Pass `items` and a `key`, render
+each row's content with the `row` snippet; the kit draws the grip, the ordinal
+(`numbered`) and the ↑/↓ arrows (`arrows`, on by default) around it. `onreorder(keys,
+{ key, from, to })` fires on a drop or an arrow press with the full new key order.
+The list shows that order at once and keeps it until `items` changes; if the
+consumer never adopts it, it falls back to `items` after `revertAfter` ms
+(3000). `canMove(key, to)` vetoes a target; `locked(item)` removes the grip and
+disables the arrows. `selected` (bindable) + `onselect` turn the row body into a
+button with an accent tint and a 2px inset bar on the selected row; put row
+actions in the `trailing` snippet so they stay outside that button.
+
+Drag runs on Pointer Events, so it works on touch. The grip has `touch-action:
+none`; `handle="row"` drags from anywhere on the row, and touch then starts
+after a 250 ms long-press so the list still scrolls. The lifted row casts
+`--shadow-md` over a dashed slot, and the nearest scroll container scrolls at
+its edges. On the keyboard the grip is a "Reorder {name}" button: Space/Enter
+grabs, ↑/↓ moves, Home/End jumps, Space/Enter drops, Escape restores.
+Alt+↑/↓ moves the focused row in one step. A polite live region announces each
+step; override any string through `messages` (defaults in
+`SORTABLE_LIST_MESSAGES`). `size` is `sm` (1.875rem rows) or `md` (2.25rem);
+`--sortable-row-h` overrides both.
+
+```svelte
+<SortableList
+	items={rares}
+	key={(r) => r.id}
+	name={(r) => r.name}
+	label="Rare hunt order"
+	numbered
+	size="sm"
+	bind:selected
+	onreorder={(keys) => send({ rare_order: keys })}
+>
+	{#snippet row(r)}<span>{r.name}</span><span>{r.dist}</span>{/snippet}
+</SortableList>
+```
+
 ## Container queries
 
 AppShell's `main` and `sidebar` are query containers (`container-name: main` /
@@ -835,6 +915,19 @@ counter elsewhere.
 <Popover label="Filters" count={active}>{#snippet trigger()}<Icon name="filter" />{/snippet}…</Popover>
 ```
 
+`layout="stacked"` turns a `Button` into a hotbar slot: `glyph` (a registry
+icon name, any text such as `■`, or a snippet) over the label, with heights
+following `size` (sm 2.5rem, md 3rem, lg 3.625rem). `glyph` also leads an
+inline button. `shortcut` paints a faint mono key hint in the top-left corner,
+opposite `count`, and sets `aria-keyshortcuts`; the app still binds the key.
+`tone="danger"` gives a stacked slot a danger border and ink, `pressed` sets
+`aria-pressed` and an accent ring, and coarse pointers get the touch hit slab.
+
+```svelte
+<Button layout="stacked" size="sm" glyph="■" shortcut="1" tone="danger" onclick={disarm}>Disarm</Button>
+<Button layout="stacked" size="sm" glyph="search" shortcut="2">Go zone</Button>
+```
+
 ### Square boxes & touch targets
 
 Icon-ish controls share one square scale, `box="xs" | "sm" | "md" | "lg"` =
@@ -852,10 +945,14 @@ glyphs (`size` stays the SVG px, emoji ×1.35).
 On `(pointer: coarse)` every icon-only/square control (and `Popover`'s default
 trigger) carries an invisible `::after` slab that extends its hit area to
 `--touch-target` (44px, WCAG 2.5.8) without moving layout; fine pointers are
-untouched. The slab grows on both block sides but only towards the inline
-*start*: inline-end overflow would count towards the scrollable overflow of
-every scroll ancestor, so a button near the right edge of an `overflow-y: auto`
-container would make it scroll sideways by a pixel or two.
+untouched. The slab is the centred target with its inline-*end* half cut off:
+44px tall, and the box plus half the deficit wide (34px for a 24px icon).
+Inline-end overflow would count towards the scrollable overflow of every scroll
+ancestor, so a button near the right edge of an `overflow-y: auto` container
+would make it scroll sideways; in a row that half lies under the next sibling's
+slab anyway. Growing the whole deficit towards the start instead would let each
+slab cover the previous sibling's centre, so taps would land one icon to the
+right.
 `hitArea="compact"` opts a dense-table row out. `Button
 collapseLabel="mobile" | "container"` hides `<span data-label>` children below
 40rem viewport / 30rem container, drops to icon padding, and names the button

package/dist/components/atoms/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Icon, { isIconName } from './Icon.svelte';
 	import { formatCount, hasCount } from '../../count';
 	import type { ControlSize } from '../../size';
 	import { canonicalTone, type Tone } from '../../tone';
@@ -51,7 +52,7 @@
 		// container (`container`) so the button becomes icon-only; the hidden text
 		// becomes the aria-label unless one is set.
 		collapseLabel?: 'never' | 'mobile' | 'container';
-		// Icon-only/square buttons grow a 44px hit slab on coarse pointers without
+		// Icon-only/square buttons grow a touch hit slab on coarse pointers without
 		// moving layout; `compact` opts out in dense tables.
 		hitArea?: 'auto' | 'compact';
 		// Async/busy state: shows a spinner, blocks clicks, sets aria-busy. Stays
@@ -62,6 +63,16 @@
 		// exact number. Tint via `--btn-count-bg` / `--btn-count-fg`.
 		count?: number;
 		countMax?: number;
+		// `stacked`: a hotbar slot, `glyph` over the label, height following `size`.
+		layout?: 'inline' | 'stacked';
+		// Leading glyph (above the label when stacked): a registry icon name, any
+		// other text (emoji, ■), or a snippet.
+		glyph?: Snippet | string;
+		// Key hint in the top-left corner, also exposed as `aria-keyshortcuts`.
+		// Display only: the app binds the key.
+		shortcut?: string;
+		// Two-state toggle: sets `aria-pressed`.
+		pressed?: boolean;
 		class?: string;
 		children?: Snippet;
 	};
@@ -88,6 +99,10 @@
 		loading = false,
 		count,
 		countMax = 99,
+		layout = 'inline',
+		glyph,
+		shortcut,
+		pressed,
 		type = 'button',
 		disabled = false,
 		title,
@@ -114,6 +129,9 @@
 	// folded into it; without one the sr-only span below is read after the label.
 	const withCount = (name: string) => (counted ? `${name}, ${count}` : name);
 
+	const stacked = $derived(layout === 'stacked');
+	const keyHint = $derived(shortcut?.trim() || undefined);
+
 	let el = $state<HTMLElement | null>(null);
 	const explicitName = $derived(rest['aria-label'] ?? rest['aria-labelledby']);
 	const ariaLabel = $derived(rest['aria-label'] ? withCount(rest['aria-label']) : undefined);
@@ -136,6 +154,8 @@
 	{...elementAttrs}
 	aria-label={ariaLabel}
 	aria-busy={loading || undefined}
+	aria-pressed={pressed ?? rest['aria-pressed']}
+	aria-keyshortcuts={rest['aria-keyshortcuts'] ?? keyHint}
 	{title}
 	class="btn {klass}"
 	class:btn-grow={grow}
@@ -166,10 +186,22 @@
 	class:hover-danger={hoverDanger}
 	class:loading
 	class:btn-counted={counted}
+	class:btn-stacked={stacked}
+	class:btn-hinted={keyHint !== undefined}
 	onclick={onclick}
 >
 	{#if loading}<span class="btn-spinner" aria-hidden="true"></span>{/if}
-	{@render children?.()}
+	{#if glyph !== undefined}
+		<span class="btn-glyph" aria-hidden="true">
+			{#if typeof glyph !== 'string'}{@render glyph()}{:else if isIconName(glyph)}<Icon name={glyph} />{:else}{glyph}{/if}
+		</span>
+	{/if}
+	{#if stacked}
+		<span class="btn-stack-label">{@render children?.()}</span>
+	{:else}
+		{@render children?.()}
+	{/if}
+	{#if keyHint}<span class="btn-shortcut" aria-hidden="true">{keyHint}</span>{/if}
 	{#if counted}
 		<span class="btn-count" aria-hidden="true">{countText}</span>
 		<span class="btn-count-sr">, {count}</span>
@@ -507,29 +539,31 @@
 	}
 
 	/* Coarse pointers: icon-only and square buttons carry an invisible slab that
-	   extends the hit area to --touch-target without changing layout. Buttons
+	   extends the hit area towards --touch-target without changing layout. Buttons
 	   already at or above the target keep their own box (inset never positive).
-	   The slab grows towards the inline start only: inline-end overflow counts
-	   towards the scrollable overflow of every scroll ancestor, so a button near
-	   the right edge of an `overflow-y: auto` container would make it scroll
-	   sideways. Start-side overflow is unscrollable, so the full target survives. */
+	   The slab is the centred target with its inline-end half cut off: inline-end
+	   overflow counts towards the scrollable overflow of every scroll ancestor, and
+	   in a row that half lies under the next sibling anyway. Growing further towards
+	   the start would let each slab cover the previous sibling's centre. */
 	@media (pointer: coarse) {
 		.btn-icon:not(.hit-compact),
 		.btn-icon-inline:not(.hit-compact),
 		.btn-box:not(.hit-compact),
 		.btn-square:not(.hit-compact),
-		.btn-chip:not(.hit-compact) {
+		.btn-chip:not(.hit-compact),
+		.btn-stacked:not(.hit-compact) {
 			position: relative;
 		}
 		.btn-icon:not(.hit-compact)::after,
 		.btn-icon-inline:not(.hit-compact)::after,
 		.btn-box:not(.hit-compact)::after,
 		.btn-square:not(.hit-compact)::after,
-		.btn-chip:not(.hit-compact)::after {
+		.btn-chip:not(.hit-compact)::after,
+		.btn-stacked:not(.hit-compact)::after {
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}
@@ -541,6 +575,80 @@
 		color: var(--btn-on, var(--accent));
 	}
 
+	/* Stacked hotbar slot: glyph over a short label. Follows the size and
+	   control rules so its own heights win at equal specificity. */
+	.btn-stacked,
+	.btn-stacked.btn-sm,
+	.btn-stacked.btn-lg,
+	.btn-stacked.btn-control {
+		flex-direction: column;
+		gap: var(--sp-1);
+		height: auto;
+		min-height: var(--btn-size, var(--control-height-large));
+		min-width: var(--btn-size, var(--control-height-large));
+		padding: var(--sp-1) var(--sp-2);
+		font-size: var(--fs-xs);
+	}
+	.btn-stacked.btn-sm {
+		min-height: var(--btn-size, var(--control-height-default));
+		min-width: var(--btn-size, calc(var(--control-height-default) + var(--sp-1) + 0.125rem));
+		gap: 0.1875rem;
+		padding: var(--sp-1);
+		font-size: calc(var(--fs-xs) * 0.85);
+	}
+	.btn-stacked.btn-lg {
+		min-height: var(--btn-size, calc(var(--control-height-large) + var(--sp-2) + 0.125rem));
+		min-width: var(--btn-size, calc(var(--control-height-large) + var(--sp-2) + 0.125rem));
+		padding: var(--sp-2) var(--sp-3);
+		font-size: var(--fs-sm);
+	}
+	.btn-glyph {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		line-height: 1;
+	}
+	.btn-stacked .btn-glyph {
+		font-size: var(--fs-lg);
+	}
+	.btn-stacked.btn-sm .btn-glyph {
+		font-size: var(--fs-md);
+	}
+	.btn-stacked.btn-lg .btn-glyph {
+		font-size: var(--fs-xl);
+	}
+	.btn-stack-label {
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.btn-stacked.btn-danger,
+	.btn-stacked.btn-tone-danger {
+		color: var(--danger);
+		border-color: var(--danger);
+	}
+	.btn-stacked[aria-pressed='true'] {
+		border-color: var(--btn-on, var(--accent));
+		box-shadow: inset 0 0 0 1px var(--btn-on, var(--accent));
+	}
+
+	/* Corner key hint: mirrors the count pill in the opposite corner, inside the box. */
+	.btn-hinted {
+		position: relative;
+	}
+	.btn-shortcut {
+		position: absolute;
+		top: 0.125rem;
+		left: 0.25rem;
+		font-family: var(--font-mono);
+		font-size: calc(var(--fs-xs) * 0.75);
+		font-weight: var(--fw-medium);
+		color: var(--text-faint);
+		line-height: 1;
+		pointer-events: none;
+	}
+
 	/* Loading: keep full opacity (it's busy, not disabled-looking) + a wait cursor,
 	   and show a spinner in the current text color. */
 	.btn.loading {

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

@@ -26,6 +26,10 @@ type ButtonProps = HTMLButtonAttributes & {
     loading?: boolean;
     count?: number;
     countMax?: number;
+    layout?: 'inline' | 'stacked';
+    glyph?: Snippet | string;
+    shortcut?: string;
+    pressed?: boolean;
     class?: string;
     children?: Snippet;
 };