@dorsk/tsumikit 0.67.1 → 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"` =

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';
@@ -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>
@@ -518,14 +550,16 @@
 		.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));
@@ -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;
 };

package/dist/components/layouts/NavBar.svelte

@@ -1,28 +1,43 @@
 <script lang="ts">
-	// Horizontal route navigation: a `<nav>` landmark of `<a>` links, one marked
-	// `aria-current="page"`. `placement="bar"` pins it to the bottom edge over
-	// `--z-nav` and pads for the iOS home indicator with `--safe-bottom`;
-	// `placement="inline"` is a plain row for a header. `orientation` stacks the
-	// icon over the label (phone bar) or sits it beside (header).
+	// Horizontal navigation: a `<nav>` landmark of items, one marked current.
+	// An item with `href` is an `<a aria-current="page">`; one without is a
+	// `<button>` that sets the bindable `value`. When every item is a button the
+	// row is a `tablist` (roving tabindex, ←/→/Home/End, `aria-selected`).
+	// `placement="bar"` pins it to the bottom edge over `--z-nav` with safe-area
+	// padding; `variant="floating"` makes it an inset rounded card. `center`
+	// reserves a notch in the middle of the row, items split around it.
+	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	export interface NavBarItem {
-		href: string;
+		/** Renders an `<a>`; without it the item is a `<button>`. */
+		href?: string;
+		/** Selects the item through the bar's `value`. */
+		value?: string;
 		label: string;
 		icon?: IconName;
 		/** Rendered instead of `icon` when set. */
 		emoji?: string;
 		/** Count or short text pinned to the glyph. 0 / '' render nothing. */
 		badge?: number | string;
+		/** Overrides the `value` match. */
 		current?: boolean;
+		/** `preventDefault()` skips the `value` change. */
+		onclick?: (e: MouseEvent) => void;
+		/** Id of the panel a tab shows (`aria-controls`). */
+		controls?: string;
 	}
 
 	let {
 		items,
 		label,
+		value = $bindable(),
+		onchange,
+		center,
 		placement = 'inline',
 		orientation = 'stacked',
+		variant = 'flush',
 		maxWidth,
 		class: klass = '',
 		style: styleProp = '',
@@ -31,11 +46,18 @@
 		items: NavBarItem[];
 		/** Accessible name of the `<nav>` landmark. */
 		label: string;
+		/** `value` of the current item, for in-page views without routes. */
+		value?: string;
+		onchange?: (value: string) => void;
+		/** Fills a notch in the middle of the row (`--navbar-center-w`), may rise above it (`--navbar-center-raise`). */
+		center?: Snippet;
 		/** 'bar' = fixed to the bottom edge with safe-area padding. */
 		placement?: 'bar' | 'inline';
 		/** Icon over label vs icon beside label. */
 		orientation?: 'stacked' | 'inline';
-		/** Caps and centres the row of links. */
+		/** 'floating' = rounded elevated card inset from the edges. */
+		variant?: 'flush' | 'floating';
+		/** Caps and centres the row of items. */
 		maxWidth?: string;
 		class?: string;
 		style?: string;
@@ -44,38 +66,127 @@
 
 	const hasBadge = (badge: NavBarItem['badge']) =>
 		badge !== undefined && badge !== null && badge !== '' && badge !== 0;
+
+	const tabs = $derived(items.length > 0 && items.every((item) => !item.href));
+	const isCurrent = (item: NavBarItem) =>
+		item.current ?? (item.value !== undefined && item.value === value);
+	const focusIndex = $derived(Math.max(0, items.findIndex(isCurrent)));
+	const split = $derived(Math.ceil(items.length / 2));
+
+	function select(item: NavBarItem, e: MouseEvent) {
+		item.onclick?.(e);
+		if (e.defaultPrevented || item.value === undefined || item.value === value) return;
+		value = item.value;
+		onchange?.(item.value);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const list = e.currentTarget as HTMLElement;
+		const all = [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
+		const i = all.indexOf(e.target as HTMLButtonElement);
+		if (i < 0) return;
+		let next: number;
+		if (e.key === 'ArrowRight') next = (i + 1) % all.length;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + all.length) % all.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = all.length - 1;
+		else return;
+		e.preventDefault();
+		all[next].focus();
+		all[next].click();
+	}
 </script>
 
+{#snippet glyph(item: NavBarItem)}
+	<span class="navbar-glyph">
+		{#if item.emoji}
+			<span class="navbar-emoji" aria-hidden="true">{item.emoji}</span>
+		{:else if item.icon}
+			<Icon name={item.icon} size={20} />
+		{/if}
+		{#if hasBadge(item.badge)}
+			<span class="navbar-badge">{item.badge}</span>
+		{/if}
+	</span>
+	<span class="navbar-label">{item.label}</span>
+{/snippet}
+
+{#snippet entry(item: NavBarItem, i: number)}
+	{#if item.href}
+		<a
+			href={item.href}
+			class="navbar-link"
+			class:current={isCurrent(item)}
+			aria-current={isCurrent(item) ? 'page' : undefined}
+			onclick={(e) => select(item, e)}
+		>
+			{@render glyph(item)}
+		</a>
+	{:else if tabs}
+		<button
+			type="button"
+			role="tab"
+			class="navbar-link"
+			class:current={isCurrent(item)}
+			aria-selected={isCurrent(item)}
+			aria-controls={item.controls}
+			tabindex={i === focusIndex ? 0 : -1}
+			onclick={(e) => select(item, e)}
+		>
+			{@render glyph(item)}
+		</button>
+	{:else}
+		<button
+			type="button"
+			class="navbar-link"
+			class:current={isCurrent(item)}
+			aria-current={isCurrent(item) ? 'page' : undefined}
+			onclick={(e) => select(item, e)}
+		>
+			{@render glyph(item)}
+		</button>
+	{/if}
+{/snippet}
+
 <nav
 	data-tsu="NavBar"
 	aria-label={label}
 	class="navbar {klass}"
 	class:bar={placement === 'bar'}
+	class:floating={variant === 'floating'}
 	class:stacked={orientation === 'stacked'}
 	style="{maxWidth ? `--navbar-max: ${maxWidth};` : ''}{styleProp}"
 	{...rest}
 >
-	<div class="navbar-inner">
-		{#each items as item, i (`${i}:${item.href}`)}
-			<a
-				href={item.href}
-				class="navbar-link"
-				class:current={item.current}
-				aria-current={item.current ? 'page' : undefined}
-			>
-				<span class="navbar-glyph">
-					{#if item.emoji}
-						<span class="navbar-emoji" aria-hidden="true">{item.emoji}</span>
-					{:else if item.icon}
-						<Icon name={item.icon} size={20} />
-					{/if}
-					{#if hasBadge(item.badge)}
-						<span class="navbar-badge">{item.badge}</span>
-					{/if}
-				</span>
-				<span class="navbar-label">{item.label}</span>
-			</a>
-		{/each}
+	<div class="navbar-row">
+		<div
+			class="navbar-inner"
+			class:split={!!center}
+			role={tabs ? 'tablist' : undefined}
+			aria-label={tabs ? label : undefined}
+			onkeydown={tabs ? onkeydown : undefined}
+		>
+			{#if center}
+				<div class="navbar-side" role="none">
+					{#each items.slice(0, split) as item, i (`${i}:${item.href ?? item.value ?? item.label}`)}
+						{@render entry(item, i)}
+					{/each}
+				</div>
+				<span class="navbar-notch" aria-hidden="true"></span>
+				<div class="navbar-side" role="none">
+					{#each items.slice(split) as item, j (`${split + j}:${item.href ?? item.value ?? item.label}`)}
+						{@render entry(item, split + j)}
+					{/each}
+				</div>
+			{:else}
+				{#each items as item, i (`${i}:${item.href ?? item.value ?? item.label}`)}
+					{@render entry(item, i)}
+				{/each}
+			{/if}
+		</div>
+		{#if center}
+			<div class="navbar-center">{@render center()}</div>
+		{/if}
 	</div>
 </nav>
 
@@ -84,16 +195,41 @@
 		--navbar-max: none;
 		min-width: 0;
 	}
+	.navbar-row {
+		position: relative;
+		min-width: 0;
+		max-width: var(--navbar-max);
+		margin-inline: auto;
+	}
 	.navbar-inner {
 		display: flex;
 		align-items: stretch;
 		justify-content: space-around;
 		gap: var(--sp-1);
 		min-width: 0;
-		max-width: var(--navbar-max);
-		margin-inline: auto;
 		min-height: var(--nav-h);
 	}
+	.navbar-inner.split {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) var(--navbar-center-w, 4.5rem) minmax(0, 1fr);
+	}
+	.navbar-side {
+		display: flex;
+		align-items: stretch;
+		gap: var(--sp-1);
+		min-width: 0;
+	}
+	.navbar-center {
+		position: absolute;
+		top: calc(-1 * var(--navbar-center-raise, 0px));
+		bottom: var(--navbar-center-raise, 0px);
+		left: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--navbar-center-w, 4.5rem);
+		transform: translateX(-50%);
+	}
 	.bar {
 		position: fixed;
 		inset-inline: 0;
@@ -105,21 +241,39 @@
 		backdrop-filter: blur(12px);
 		border-top: 1px solid var(--border);
 	}
+	.floating {
+		padding: var(--sp-1);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		background: var(--bg-elevated);
+		box-shadow: var(--shadow-md);
+	}
+	.bar.floating {
+		left: calc(var(--sp-2) + var(--safe-left));
+		right: calc(var(--sp-2) + var(--safe-right));
+		bottom: calc(var(--sp-2) + var(--safe-bottom));
+		backdrop-filter: none;
+	}
 	.navbar-link {
 		position: relative;
 		display: flex;
 		flex: 1 1 0;
 		min-width: 0;
+		min-height: var(--touch-target);
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
 		gap: var(--sp-2);
 		padding: var(--sp-2);
+		border: none;
 		border-radius: var(--r-md);
+		background: none;
 		color: var(--text-muted);
+		font: inherit;
 		font-size: var(--fs-sm);
 		font-weight: var(--fw-medium);
 		text-decoration: none;
+		cursor: pointer;
 		transition:
 			background 0.12s var(--ease),
 			color 0.12s var(--ease);