@dorsk/tsumikit 0.48.0 → 0.50.0

package/README.md

@@ -166,7 +166,9 @@ threshold tones via `warnAt`/`dangerAt`, `corner` snippet), Artwork (lazy cover
 fallback, `aspect`, `status` overlay), Card (`tone` tints the surface for inline banners), Badge
 (`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
 `icon`, `numeric`, `truncate`, `variant="text"`; all tints derive from
-`--badge-tone`), Dot (`ring` dark halo over artwork), Link (`tone`, `underline`
+`--badge-tone`), Dot (`ring` dark halo over artwork), Divider (standalone
+horizontal/vertical hairline, `tone`, `spacing`, optional centred label,
+`decorative` to drop the `separator` role), Link (`tone`, `underline`
 always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
 any custom SVG).
 
@@ -181,7 +183,11 @@ EmojiPicker (popover with a searchable EN+FR glyph catalogue, grouped tabs, rovi
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
 CapBar (consumption track with a draggable, keyboard-steppable cap handle that
-shows a `N%` bubble while it is moved; `oninput` live, `onchange` on commit),
+shows a `N%` bubble while it is moved; `oninput` live, `onchange` on commit;
+`marker`/`markerLabel`/`markerTone` draw a pace rule, `cap: null` plus
+`clearAtMax`/`uncappedLabel` express "no cap", `layout`/`stackBelow` put the
+readout above a full-width track, `capLabel`/`capValueText` localise the ARIA
+strings),
 Drawer (side-panel `<dialog>`: `side`, `width` clamped to the viewport, full-screen
 under 48rem; `nav` page column that turns into a horizontal strip on narrow
 screens, or `navMobile`; sticky `footer`; Escape / scrim / close button all close),
@@ -215,12 +221,17 @@ sidebar on desktop, overlay drawer on mobile, optionally resizable;
 the content column only, `stickySidebar` pins it to the viewport, and
 `sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
 children are `min-width: 0` so a wide title/actions row can't widen the grid on
-mobile), NavItem
+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
 (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
 become two pages — one pane at a time with a sticky 44px back header — below
-their own `breakpoint`, so `selected` can be driven from the URL), Container, Stack
+their own `breakpoint`, so `selected` can be driven from the URL; `gap` spaces
+the columns and `divider="none"` drops the seam, both also settable as the
+`--md-gap` / `--md-divider` custom properties), Container, Stack
 (vertical), Cluster (wrapping row; `stackAt="xs|sm|md|lg"` makes it its own
 query container and stacks children full-width below 18/30/40/48rem — phone
 action rows without a viewport query), AutoGrid (intrinsically responsive

package/dist/cap-bar.d.ts

@@ -5,4 +5,9 @@ export declare function capFromPointer(clientX: number, rect: {
     width: number;
 }, step?: number, min?: number, max?: number): number;
 export declare function capKeyStep(key: string, shift: boolean, current: number, step?: number, min?: number, max?: number): number | null;
-export declare function capTone(value: number, cap: number, warnAt?: number): 'ok' | 'warn' | 'danger';
+export declare function capTone(value: number, cap: number | null, warnAt?: number): 'ok' | 'warn' | 'danger';
+export declare function capPercent(cap: number | null, min?: number, max?: number): number;
+export declare function markerPercent(marker: number | null | undefined, min?: number, max?: number): number | null;
+/** With `clearAtMax`, a cap dragged to `max` means "no cap" rather than a cap of `max`. */
+export declare function resolveCap(next: number, clearAtMax?: boolean, max?: number): number | null;
+export declare function isStacked(layout: 'row' | 'stacked', width?: number, limit?: number): boolean;

package/dist/cap-bar.js

@@ -35,9 +35,28 @@ export function capKeyStep(key, shift, current, step = 5, min = 0, max = 100) {
     }
 }
 export function capTone(value, cap, warnAt = 75) {
-    if (value >= cap)
+    if (cap !== null && value >= cap)
         return 'danger';
     if (value >= warnAt)
         return 'warn';
     return 'ok';
 }
+export function capPercent(cap, min = 0, max = 100) {
+    if (cap === null)
+        return 100;
+    return clampCap(((cap - min) / (max - min || 1)) * 100, 0, 100);
+}
+export function markerPercent(marker, min = 0, max = 100) {
+    if (marker == null || Number.isNaN(marker))
+        return null;
+    return clampCap(((marker - min) / (max - min || 1)) * 100, 0, 100);
+}
+/** With `clearAtMax`, a cap dragged to `max` means "no cap" rather than a cap of `max`. */
+export function resolveCap(next, clearAtMax = false, max = 100) {
+    return clearAtMax && next >= max ? null : next;
+}
+export function isStacked(layout, width = 0, limit = 0) {
+    if (layout === 'stacked')
+        return true;
+    return limit > 0 && width > 0 && width < limit;
+}

package/dist/components/atoms/Card.svelte

@@ -40,6 +40,8 @@
 		as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
 		padding?: 'none' | 'sm' | 'md' | 'lg';
 		surface?: 'base' | 'raised' | 'sunken';
+		/** Frame border style; `none` drops the frame. Applies to the stacked layers too. */
+		border?: 'solid' | 'dashed' | 'none';
 		tone?: Tone;
 		stacked?: boolean;
 		stackTone?: Tone;
@@ -65,6 +67,7 @@
 		as = 'div',
 		padding = 'md',
 		surface = 'base',
+		border = 'solid',
 		tone = 'neutral',
 		stacked = false,
 		stackTone = 'neutral',
@@ -121,6 +124,8 @@
 	class:pad-lg={padding === 'lg'}
 	class:surface-raised={surface === 'raised'}
 	class:surface-sunken={surface === 'sunken'}
+	class:border-dashed={border === 'dashed'}
+	class:border-none={border === 'none'}
 	class:card-tap={tap || interactive}
 	class:card-max={maxWidth !== undefined}
 	class:card-ok={t === 'ok'}
@@ -168,7 +173,8 @@
 		--card-pad: var(--sp-4);
 		min-width: 0;
 		background: var(--bg-elevated);
-		border: 1px solid var(--border);
+		--card-border-style: solid;
+		border: 1px var(--card-border-style) var(--border);
 		border-radius: var(--r-lg);
 		padding: var(--card-pad);
 	}
@@ -200,6 +206,12 @@
 	.surface-sunken {
 		background: var(--bg-elevated-2);
 	}
+	.border-dashed {
+		--card-border-style: dashed;
+	}
+	.border-none {
+		--card-border-style: none;
+	}
 	.pad-none {
 		--card-pad: 0;
 		padding: 0;
@@ -286,7 +298,7 @@
 		/* Opaque fill so each layer fully hides the one behind it — only the
 		   bottom-right peek (and its single border line) stays visible. */
 		background: var(--stack-bg);
-		border: 1px solid var(--stack-border);
+		border: 1px var(--card-border-style) var(--stack-border);
 	}
 	/* Nearest back layer — sits just under the front surface. */
 	.card-stacked::before {

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

@@ -13,6 +13,8 @@ type Own = {
     as?: 'div' | 'button' | 'a' | 'li' | 'section' | 'form';
     padding?: 'none' | 'sm' | 'md' | 'lg';
     surface?: 'base' | 'raised' | 'sunken';
+    /** Frame border style; `none` drops the frame. Applies to the stacked layers too. */
+    border?: 'solid' | 'dashed' | 'none';
     tone?: Tone;
     stacked?: boolean;
     stackTone?: Tone;

package/dist/components/atoms/Divider.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	// Standalone hairline between two siblings. Horizontal by default; the
+	// vertical form stretches to the flex parent's cross size. With `children`
+	// the rule splits around a centred label ("or", "3 older messages") — a
+	// labelled divider is never decorative, so it keeps role="separator".
+	type Own = {
+		orientation?: 'horizontal' | 'vertical';
+		/** Margin along the axis (any CSS length). */
+		spacing?: string;
+		tone?: 'default' | 'strong' | 'faint';
+		/** Centred label turning the rule into rule + text. */
+		children?: Snippet;
+		/** Purely visual (aria-hidden) rather than a semantic separator. */
+		decorative?: boolean;
+		class?: string;
+	};
+	let {
+		orientation = 'horizontal',
+		spacing,
+		tone = 'default',
+		children,
+		decorative = false,
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	const vertical = $derived(orientation === 'vertical');
+	const semantic = $derived(!decorative || !!children);
+</script>
+
+<div
+	class="divider {orientation} tone-{tone} {klass}"
+	class:labelled={!!children}
+	data-tsu="Divider"
+	role={semantic ? 'separator' : undefined}
+	aria-orientation={semantic ? orientation : undefined}
+	aria-hidden={semantic ? undefined : 'true'}
+	style:--divider-spacing={spacing}
+	{...rest}
+>
+	{#if children}
+		<span class="divider-label">{@render children()}</span>
+	{/if}
+</div>
+
+<style>
+	.divider {
+		--divider-color: var(--border);
+		--divider-spacing: var(--sp-3);
+		flex: none;
+		border: 0;
+	}
+	.tone-strong {
+		--divider-color: var(--border-strong);
+	}
+	.tone-faint {
+		--divider-color: color-mix(in srgb, var(--border) 45%, transparent);
+	}
+	.horizontal {
+		width: 100%;
+		height: 1px;
+		background: var(--divider-color);
+		margin-block: var(--divider-spacing);
+	}
+	.vertical {
+		align-self: stretch;
+		width: 1px;
+		min-height: 1em;
+		background: var(--divider-color);
+		margin-inline: var(--divider-spacing);
+	}
+	.horizontal.labelled,
+	.vertical.labelled {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		background: none;
+	}
+	.horizontal.labelled {
+		height: auto;
+	}
+	.vertical.labelled {
+		flex-direction: column;
+		width: auto;
+	}
+	.horizontal.labelled::before,
+	.horizontal.labelled::after {
+		content: '';
+		flex: 1;
+		height: 1px;
+		background: var(--divider-color);
+	}
+	.vertical.labelled::before,
+	.vertical.labelled::after {
+		content: '';
+		flex: 1;
+		width: 1px;
+		background: var(--divider-color);
+	}
+	.divider-label {
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    orientation?: 'horizontal' | 'vertical';
+    /** Margin along the axis (any CSS length). */
+    spacing?: string;
+    tone?: 'default' | 'strong' | 'faint';
+    /** Centred label turning the rule into rule + text. */
+    children?: Snippet;
+    /** Purely visual (aria-hidden) rather than a semantic separator. */
+    decorative?: boolean;
+    class?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const Divider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/atoms/Gauge.svelte

@@ -34,6 +34,7 @@
 		dangerAt?: number;
 		label?: string;
 		as?: 'div' | 'a' | 'button';
+		href?: string;
 		width?: string;
 		height?: string;
 		corner?: Snippet;
@@ -61,6 +62,10 @@
 	const resolvedTone = $derived(tone ?? gaugeTone(pct, warnAt, dangerAt));
 	const lit = $derived(litSegments(pct, segments));
 	const segmentCount = $derived(Math.max(0, Math.floor(segments)));
+	const isMeter = $derived(as === 'div');
+	const ariaLabel = $derived(
+		isMeter ? label : label ? `${label} (${Math.round(pct)}%)` : `${Math.round(pct)}%`
+	);
 </script>
 
 <svelte:element
@@ -69,11 +74,11 @@
 	class="gauge tone-{resolvedTone} {klass}"
 	class:interactive={as !== 'div'}
 	type={as === 'button' ? 'button' : undefined}
-	role="meter"
-	aria-label={label}
-	aria-valuemin={0}
-	aria-valuemax={100}
-	aria-valuenow={pct}
+	role={isMeter ? 'meter' : undefined}
+	aria-label={ariaLabel}
+	aria-valuemin={isMeter ? 0 : undefined}
+	aria-valuemax={isMeter ? 100 : undefined}
+	aria-valuenow={isMeter ? pct : undefined}
 	style:--gauge-w={width}
 	style:--gauge-h={height}
 	{style}

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

@@ -13,6 +13,7 @@ type Own = {
     dangerAt?: number;
     label?: string;
     as?: 'div' | 'a' | 'button';
+    href?: string;
     width?: string;
     height?: string;
     corner?: Snippet;

package/dist/components/layouts/MasterDetail.svelte

@@ -15,6 +15,8 @@
 		empty,
 		listWidth = '17rem',
 		breakpoint = '48rem',
+		gap = '0',
+		divider = 'border',
 		selected = false,
 		onback,
 		backLabel = 'Back',
@@ -32,6 +34,10 @@
 		listWidth?: string;
 		/** Own-width threshold (px/em/rem) below which the panes become two pages. */
 		breakpoint?: string;
+		/** Space between the two columns (any CSS length). */
+		gap?: string;
+		/** Seam between the panes; `--md-divider` overrides it with any border shorthand. */
+		divider?: 'border' | 'none';
 		selected?: boolean;
 		onback?: () => void;
 		backLabel?: string;
@@ -72,7 +78,9 @@
 	class="md {klass}"
 	class:mobile
 	class:selected
-	style="--md-list-w: {listWidth};{style ? ` ${style}` : ''}"
+	style="--md-list-w: {listWidth}; --md-gap: {gap}; --md-divider: {divider === 'none'
+		? 'none'
+		: '1px solid var(--border)'};{style ? ` ${style}` : ''}"
 	data-tsu="MasterDetail"
 	{...rest}
 >
@@ -113,6 +121,7 @@
 	.md {
 		display: grid;
 		grid-template-columns: var(--md-list-w) minmax(0, 1fr);
+		gap: var(--md-gap, 0);
 		min-width: 0;
 		min-height: 0;
 		height: 100%;
@@ -127,7 +136,7 @@
 		-webkit-overflow-scrolling: touch;
 	}
 	.md-list {
-		border-right: 1px solid var(--border);
+		border-right: var(--md-divider, 1px solid var(--border));
 	}
 	.md-detail {
 		display: flex;
@@ -183,6 +192,7 @@
 
 	.md.mobile {
 		grid-template-columns: minmax(0, 1fr);
+		gap: 0;
 	}
 	.md.mobile .md-list {
 		border-right: 0;

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

@@ -9,6 +9,10 @@ type $$ComponentProps = {
     listWidth?: string;
     /** Own-width threshold (px/em/rem) below which the panes become two pages. */
     breakpoint?: string;
+    /** Space between the two columns (any CSS length). */
+    gap?: string;
+    /** Seam between the panes; `--md-divider` overrides it with any border shorthand. */
+    divider?: 'border' | 'none';
     selected?: boolean;
     onback?: () => void;
     backLabel?: string;

package/dist/components/layouts/NavBar.svelte

@@ -0,0 +1,170 @@
+<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).
+	import Icon from '../atoms/Icon.svelte';
+	import type { IconName } from '../atoms/Icon.svelte';
+
+	export interface NavBarItem {
+		href: 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;
+		current?: boolean;
+	}
+
+	let {
+		items,
+		label,
+		placement = 'inline',
+		orientation = 'stacked',
+		maxWidth,
+		class: klass = '',
+		style: styleProp = '',
+		...rest
+	}: {
+		items: NavBarItem[];
+		/** Accessible name of the `<nav>` landmark. */
+		label: string;
+		/** '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. */
+		maxWidth?: string;
+		class?: string;
+		style?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const hasBadge = (badge: NavBarItem['badge']) =>
+		badge !== undefined && badge !== null && badge !== '' && badge !== 0;
+</script>
+
+<nav
+	data-tsu="NavBar"
+	aria-label={label}
+	class="navbar {klass}"
+	class:bar={placement === 'bar'}
+	class:stacked={orientation === 'stacked'}
+	style="{maxWidth ? `--navbar-max: ${maxWidth};` : ''}{styleProp}"
+	{...rest}
+>
+	<div class="navbar-inner">
+		{#each items as item (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>
+</nav>
+
+<style>
+	.navbar {
+		--navbar-max: none;
+		min-width: 0;
+	}
+	.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);
+	}
+	.bar {
+		position: fixed;
+		inset-inline: 0;
+		bottom: 0;
+		z-index: var(--z-nav);
+		padding-bottom: var(--safe-bottom);
+		padding-inline: max(var(--safe-left), var(--sp-1)) max(var(--safe-right), var(--sp-1));
+		background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
+		backdrop-filter: blur(12px);
+		border-top: 1px solid var(--border);
+	}
+	.navbar-link {
+		position: relative;
+		display: flex;
+		flex: 1 1 0;
+		min-width: 0;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sp-2);
+		padding: var(--sp-2);
+		border-radius: var(--r-md);
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+		font-weight: var(--fw-medium);
+		text-decoration: none;
+		transition:
+			background 0.12s var(--ease),
+			color 0.12s var(--ease);
+	}
+	.stacked .navbar-link {
+		flex-direction: column;
+		gap: 2px;
+		font-size: var(--fs-xs);
+	}
+	.navbar-link:hover {
+		background: var(--bg-elevated-2);
+		color: var(--text);
+		text-decoration: none;
+	}
+	.navbar-link.current {
+		color: var(--accent);
+		background: color-mix(in srgb, var(--accent) 12%, transparent);
+	}
+	.navbar-glyph {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		align-items: center;
+	}
+	.navbar-emoji {
+		font-size: 1.15em;
+		line-height: 1;
+	}
+	.navbar-label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.navbar-badge {
+		position: absolute;
+		top: -0.35rem;
+		left: calc(100% - 0.35rem);
+		padding-inline: 0.25rem;
+		min-width: 1rem;
+		border-radius: var(--r-pill);
+		background: var(--accent);
+		color: var(--text-on-accent);
+		font-size: var(--fs-xs);
+		line-height: 1rem;
+		text-align: center;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import type { IconName } from '../atoms/Icon.svelte';
+export interface NavBarItem {
+    href: 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;
+    current?: boolean;
+}
+type $$ComponentProps = {
+    items: NavBarItem[];
+    /** Accessible name of the `<nav>` landmark. */
+    label: string;
+    /** '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. */
+    maxWidth?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const NavBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavBar = ReturnType<typeof NavBar>;
+export default NavBar;

package/dist/components/molecules/CapBar.svelte

@@ -1,6 +1,17 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { capFromPointer, capKeyStep, capTone, clampCap, snapCap } from '../../cap-bar';
+	import {
+		capFromPointer,
+		capKeyStep,
+		capPercent,
+		capTone,
+		clampCap,
+		isStacked,
+		markerPercent,
+		resolveCap,
+		snapCap
+	} from '../../cap-bar';
+	import { browser } from '../../env';
 
 	let {
 		value = 0,
@@ -10,6 +21,15 @@
 		step = 5,
 		warnAt = 75,
 		size = 'md',
+		layout = 'row',
+		stackBelow,
+		marker,
+		markerLabel,
+		markerTone = 'neutral',
+		uncappedLabel = 'no cap',
+		clearAtMax = false,
+		capLabel,
+		capValueText,
 		label,
 		labelWidth = '96px',
 		readout,
@@ -25,8 +45,8 @@
 	}: {
 		/** Consumption, in percent of `max`. */
 		value?: number;
-		/** Cap position; bindable, moved by drag/keyboard. */
-		cap?: number;
+		/** Cap position; bindable, moved by drag/keyboard. `null` is uncapped. */
+		cap?: number | null;
 		min?: number;
 		max?: number;
 		/** Snap increment for drag and keyboard. */
@@ -34,6 +54,22 @@
 		/** Consumption at which the fill turns `--warn`. */
 		warnAt?: number;
 		size?: 'md' | 'lg';
+		/** `'stacked'` puts label + readout on a line above a full-width track. */
+		layout?: 'row' | 'stacked';
+		/** Own-width threshold (px/em/rem) below which `layout` becomes `'stacked'`. */
+		stackBelow?: string;
+		/** Reference position on the track, in the same units as `value`. */
+		marker?: number | null;
+		markerLabel?: string;
+		markerTone?: 'neutral' | 'ok' | 'warn' | 'danger';
+		/** Spoken and readout text for `cap === null`. */
+		uncappedLabel?: string;
+		/** Moving the cap to `max` yields `null` instead of `max`. */
+		clearAtMax?: boolean;
+		/** Accessible name of the cap handle. Defaults to `${label} cap`. */
+		capLabel?: string;
+		/** Spoken value of the cap handle. Defaults to `cap ${cap}%`. */
+		capValueText?: string | ((cap: number | null) => string);
 		label?: string | Snippet;
 		labelWidth?: string;
 		/** Overrides the default `{value}% · {hint}` readout. */
@@ -45,30 +81,64 @@
 		tooltip?: string;
 		readonly?: boolean;
 		/** Fires live while dragging or stepping. */
-		oninput?: (cap: number) => void;
+		oninput?: (cap: number | null) => void;
 		/** Fires once the cap is committed (pointer release / key-up). */
-		onchange?: (cap: number) => void;
+		onchange?: (cap: number | null) => void;
 		class?: string;
 		style?: string;
 	} = $props();
 
+	const uncapped = $derived(cap === null);
 	const range = $derived(max - min || 1);
 	const pct = $derived(clampCap(((value - min) / range) * 100, 0, 100));
-	const capPct = $derived(clampCap(((cap - min) / range) * 100, 0, 100));
+	const capPct = $derived(capPercent(cap, min, max));
+	const markerPct = $derived(markerPercent(marker, min, max));
 	const tone = $derived(capTone(value, cap, warnAt));
 	const readoutText = $derived(hint ? `${value}% · ${hint}` : `${value}%`);
-	const tip = $derived(tooltip ?? `cap ${cap}% — drag the bar`);
+	const capText = $derived(uncapped ? uncappedLabel : `cap ${cap}%`);
+	const tip = $derived(tooltip ?? `${capText} — drag the bar`);
 	const readoutTitle = $derived(readout === undefined ? readoutText : typeof readout === 'string' ? readout : undefined);
-	const ariaLabel = $derived(typeof label === 'string' ? `${label} cap` : 'cap');
+	const ariaLabel = $derived(capLabel ?? (typeof label === 'string' ? `${label} cap` : 'cap'));
+	const ariaValueText = $derived(
+		capValueText === undefined ? capText : typeof capValueText === 'string' ? capValueText : capValueText(cap)
+	);
 
+	const uid = $props.id();
+	const markerId = $derived(markerLabel ? `${uid}-marker` : undefined);
+
+	let root = $state<HTMLElement | null>(null);
 	let trackEl = $state<HTMLDivElement | null>(null);
+	let width = $state(0);
+	let limit = $state(0);
 	let dragging = $state(false);
 	let keying = $state(false);
 	let committed = cap;
 
+	const stacked = $derived(isStacked(layout, width, limit));
+
+	function toPx(length: string, el: HTMLElement): number {
+		const n = Number.parseFloat(length);
+		const fontSize = (node: Element) => Number.parseFloat(getComputedStyle(node).fontSize);
+		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
+		if (length.endsWith('em')) return n * fontSize(el);
+		return n;
+	}
+
+	$effect(() => {
+		if (!browser || !root || !stackBelow) return;
+		const el = root;
+		limit = toPx(stackBelow, el);
+		const observer = new ResizeObserver(([entry]) => {
+			width = entry.contentRect.width;
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
 	function setCap(next: number) {
-		if (next === cap) return;
-		cap = next;
+		const resolved = resolveCap(next, clearAtMax, max);
+		if (resolved === cap) return;
+		cap = resolved;
 		oninput?.(cap);
 	}
 	function commit() {
@@ -96,25 +166,29 @@
 	}
 	function keyDown(e: KeyboardEvent) {
 		if (readonly) return;
-		const next = capKeyStep(e.key, e.shiftKey, snapCap(cap, step, min, max), step, min, max);
+		const next = capKeyStep(e.key, e.shiftKey, snapCap(cap ?? max, step, min, max), step, min, max);
 		if (next === null) return;
 		e.preventDefault();
 		keying = true;
 		setCap(next);
 	}
 	function keyUp(e: KeyboardEvent) {
-		if (readonly || capKeyStep(e.key, e.shiftKey, cap, step, min, max) === null) return;
+		if (readonly || capKeyStep(e.key, e.shiftKey, cap ?? max, step, min, max) === null) return;
 		commit();
 	}
 </script>
 
 <div
 	data-tsu="CapBar"
+	bind:this={root}
 	class="cap-bar size-{size} tone-{tone} {klass}"
 	class:readonly
 	class:dragging
 	class:keying
-	style="--label-w: {labelWidth}; --readout-w: {readoutWidth}; --pct: {pct}%; --cap: {capPct}%; {styleProp}"
+	class:stacked
+	class:uncapped
+	style="--label-w: {labelWidth}; --readout-w: {readoutWidth}; --pct: {pct}%; --cap: {capPct}%; --marker: {markerPct ??
+		0}%; {styleProp}"
 >
 	{#if label}
 		<div class="label">
@@ -132,6 +206,12 @@
 		onpointercancel={pointerUp}
 	>
 		<div class="fill"></div>
+		{#if markerPct !== null}
+			<div class="marker marker-{markerTone}" title={markerLabel} aria-hidden="true"></div>
+			{#if markerLabel}
+				<span class="sr-only" id={markerId}>{markerLabel}</span>
+			{/if}
+		{/if}
 		<div
 			class="handle"
 			role="slider"
@@ -139,14 +219,15 @@
 			aria-label={ariaLabel}
 			aria-valuemin={min}
 			aria-valuemax={max}
-			aria-valuenow={cap}
-			aria-valuetext="cap {cap}%"
+			aria-valuenow={cap ?? max}
+			aria-valuetext={ariaValueText}
+			aria-describedby={markerId}
 			aria-disabled={readonly ? 'true' : undefined}
 			onkeydown={keyDown}
 			onkeyup={keyUp}
 			onblur={() => (keying = false)}
 		></div>
-		<div class="bubble" aria-hidden="true">{cap}%</div>
+		<div class="bubble" aria-hidden="true">{capText}</div>
 	</div>
 	<div class="readout" title={readoutTitle}>
 		{#if readout === undefined}{readoutText}{:else if typeof readout === 'string'}{readout}{:else}{@render readout()}{/if}
@@ -213,6 +294,41 @@
 		transition: width 0.2s var(--ease);
 		z-index: 1;
 	}
+	.uncapped .track::after {
+		display: none;
+	}
+	.marker {
+		position: absolute;
+		top: 50%;
+		left: var(--marker);
+		width: 2px;
+		height: calc(var(--track-h) + 6px);
+		transform: translate(-50%, -50%);
+		border-radius: 1px;
+		background: var(--marker-color, var(--text-muted));
+		pointer-events: none;
+		z-index: 2;
+	}
+	.marker-ok {
+		--marker-color: var(--ok);
+	}
+	.marker-warn {
+		--marker-color: var(--warn);
+	}
+	.marker-danger {
+		--marker-color: var(--danger);
+	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		padding: 0;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
 	.handle {
 		position: absolute;
 		top: 50%;
@@ -226,6 +342,9 @@
 		cursor: ew-resize;
 		z-index: 2;
 	}
+	.uncapped .handle {
+		opacity: 0.4;
+	}
 	.handle:focus-visible {
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;
@@ -283,6 +402,21 @@
 	.cap-bar:not(:has(.label)) .caption {
 		grid-column: 1 / 3;
 	}
+	.cap-bar.stacked {
+		grid-template-columns: 1fr auto;
+	}
+	.cap-bar.stacked .label {
+		grid-area: 1 / 1;
+	}
+	.cap-bar.stacked .readout {
+		grid-area: 1 / 2;
+	}
+	.cap-bar.stacked .track {
+		grid-area: 2 / 1 / 3 / -1;
+	}
+	.cap-bar.stacked .caption {
+		grid-column: 1 / -1;
+	}
 	@media (prefers-reduced-motion: reduce) {
 		.fill,
 		.bubble {

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

@@ -2,8 +2,8 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Consumption, in percent of `max`. */
     value?: number;
-    /** Cap position; bindable, moved by drag/keyboard. */
-    cap?: number;
+    /** Cap position; bindable, moved by drag/keyboard. `null` is uncapped. */
+    cap?: number | null;
     min?: number;
     max?: number;
     /** Snap increment for drag and keyboard. */
@@ -11,6 +11,22 @@ type $$ComponentProps = {
     /** Consumption at which the fill turns `--warn`. */
     warnAt?: number;
     size?: 'md' | 'lg';
+    /** `'stacked'` puts label + readout on a line above a full-width track. */
+    layout?: 'row' | 'stacked';
+    /** Own-width threshold (px/em/rem) below which `layout` becomes `'stacked'`. */
+    stackBelow?: string;
+    /** Reference position on the track, in the same units as `value`. */
+    marker?: number | null;
+    markerLabel?: string;
+    markerTone?: 'neutral' | 'ok' | 'warn' | 'danger';
+    /** Spoken and readout text for `cap === null`. */
+    uncappedLabel?: string;
+    /** Moving the cap to `max` yields `null` instead of `max`. */
+    clearAtMax?: boolean;
+    /** Accessible name of the cap handle. Defaults to `${label} cap`. */
+    capLabel?: string;
+    /** Spoken value of the cap handle. Defaults to `cap ${cap}%`. */
+    capValueText?: string | ((cap: number | null) => string);
     label?: string | Snippet;
     labelWidth?: string;
     /** Overrides the default `{value}% · {hint}` readout. */
@@ -22,9 +38,9 @@ type $$ComponentProps = {
     tooltip?: string;
     readonly?: boolean;
     /** Fires live while dragging or stepping. */
-    oninput?: (cap: number) => void;
+    oninput?: (cap: number | null) => void;
     /** Fires once the cap is committed (pointer release / key-up). */
-    onchange?: (cap: number) => void;
+    onchange?: (cap: number | null) => void;
     class?: string;
     style?: string;
 };

package/dist/components/molecules/Fieldset.svelte

@@ -2,7 +2,9 @@
 	// Bordered zone whose legend rides the top border. Real <fieldset>/<legend>
 	// for semantics. `droppable` turns it into an HTML5 drop target: a hovering
 	// drag that passes `accepts` highlights the zone and shows `dropHint`;
-	// `ondrop` receives the payload read from `dataTransfer` under `mime`.
+	// `ondrop` receives the payload read from `dataTransfer` under `mime`. That payload
+	// is unreadable while hovering (HTML protected mode), so per-item acceptance rules
+	// need `dragPayload` or the `types` handed to `accepts`.
 	// Keyboard users cannot drag — the consumer must offer a non-drag path
 	// (a move menu, a select) to the same action. Pointer-based DnD can drive
 	// the highlight through the bindable `over` prop.
@@ -18,6 +20,7 @@
 		droppable = false,
 		mime = 'text/plain',
 		accepts,
+		dragPayload = '',
 		ondrop,
 		dropHint,
 		over = $bindable(false),
@@ -33,7 +36,13 @@
 		padding?: 'sm' | 'md' | 'lg';
 		droppable?: boolean;
 		mime?: string;
-		accepts?: (data: string, e: DragEvent) => boolean;
+		/** `data` is the dataTransfer payload on drop, but during dragenter/dragover the
+		 *  dataTransfer is in protected mode and `getData` returns `''` — there `data` is
+		 *  `dragPayload` when given, otherwise `''`, and `types` is the only other signal. */
+		accepts?: (data: string, e: DragEvent, types: readonly string[]) => boolean;
+		/** Payload of the drag in flight when the app already knows it (a dragstart handler
+		 *  or a pointer-DnD store); stands in for the unreadable dataTransfer during dragover. */
+		dragPayload?: string;
 		ondrop?: (data: string, e: DragEvent) => void;
 		dropHint?: string | Snippet;
 		over?: boolean;
@@ -47,12 +56,13 @@
 	let depth = 0;
 
 	function payload(e: DragEvent): string {
-		return e.dataTransfer?.getData(mime) ?? '';
+		return e.dataTransfer?.getData(mime) || dragPayload;
 	}
 	function valid(e: DragEvent): boolean {
 		if (!droppable || disabled) return false;
-		if (!Array.from(e.dataTransfer?.types ?? []).includes(mime)) return false;
-		return accepts ? accepts(payload(e), e) : true;
+		const types = Array.from(e.dataTransfer?.types ?? []);
+		if (!types.includes(mime)) return false;
+		return accepts ? accepts(payload(e), e, types) : true;
 	}
 
 	function onDragEnter(e: DragEvent) {

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

@@ -7,7 +7,13 @@ type $$ComponentProps = {
     padding?: 'sm' | 'md' | 'lg';
     droppable?: boolean;
     mime?: string;
-    accepts?: (data: string, e: DragEvent) => boolean;
+    /** `data` is the dataTransfer payload on drop, but during dragenter/dragover the
+     *  dataTransfer is in protected mode and `getData` returns `''` — there `data` is
+     *  `dragPayload` when given, otherwise `''`, and `types` is the only other signal. */
+    accepts?: (data: string, e: DragEvent, types: readonly string[]) => boolean;
+    /** Payload of the drag in flight when the app already knows it (a dragstart handler
+     *  or a pointer-DnD store); stands in for the unreadable dataTransfer during dragover. */
+    dragPayload?: string;
     ondrop?: (data: string, e: DragEvent) => void;
     dropHint?: string | Snippet;
     over?: boolean;

package/dist/components/molecules/Popover.svelte

@@ -11,6 +11,7 @@
 	// are broadly supported today.)
 	import { tick, type Snippet } from 'svelte';
 	import { place } from '../../floating';
+	import { HOVER_CLOSE_GRACE, HOVER_OPEN_DELAY, createHoverIntent, opensOnHover } from './popover-hover.js';
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
@@ -35,6 +36,10 @@
 		block = false,
 		hitArea = 'auto',
 		disabled = false,
+		openOn = 'click',
+		hoverDelay = HOVER_OPEN_DELAY,
+		as = 'button',
+		href,
 		role = 'dialog',
 		haspopup = 'dialog',
 		onopen,
@@ -75,6 +80,15 @@
 		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		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. */
+		openOn?: 'click' | 'hover';
+		/** Delay before a hover opens the panel. */
+		hoverDelay?: number;
+		/** Render the trigger as a link so it can navigate while still revealing
+		 *  the panel; an `a` without `href` toggles the panel like a button. */
+		as?: 'button' | 'a';
+		href?: string;
 		/** ARIA role of the panel. */
 		role?: PanelRole;
 		/** `aria-haspopup` announced on the trigger. */
@@ -93,7 +107,7 @@
 	);
 
 	const id = `pop-${Math.random().toString(36).slice(2, 8)}`;
-	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let triggerEl = $state<HTMLElement | null>(null);
 	let panelEl = $state<HTMLDivElement | null>(null);
 	// Panel content is mounted only after the first open, then kept alive so
 	// reopening is instant. The panel element itself always renders — the native
@@ -107,6 +121,70 @@
 		} catch {}
 	}
 
+	function show() {
+		try {
+			panelEl?.showPopover();
+		} catch {}
+	}
+
+	function toggle() {
+		if (open) close();
+		else show();
+	}
+
+	const hover = createHoverIntent({ open: show, close });
+	$effect(() => () => hover.cancel());
+
+	function onPointerEnter(e: PointerEvent) {
+		if (disabled || !opensOnHover(openOn, e.pointerType)) return;
+		if (open) hover.cancel();
+		else hover.enter(hoverDelay);
+	}
+
+	function onPointerLeave() {
+		if (openOn !== 'hover') return;
+		hover.leave(HOVER_CLOSE_GRACE);
+	}
+
+	function onPanelPointerEnter(e: PointerEvent) {
+		if (opensOnHover(openOn, e.pointerType)) hover.cancel();
+	}
+
+	// A link trigger cannot carry `popovertarget`, so it toggles by hand — unless
+	// it has an href, where the click belongs to the navigation.
+	function onTriggerClick(e: MouseEvent) {
+		if (as !== 'a') return;
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		hover.cancel();
+		if (href === undefined) {
+			e.preventDefault();
+			toggle();
+		}
+	}
+
+	function onTriggerKeydown(e: KeyboardEvent) {
+		if (as !== 'a' || href !== undefined || disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			hover.cancel();
+			toggle();
+		}
+	}
+
+	const triggerAttrs = $derived(
+		as === 'a'
+			? {
+					href: disabled ? undefined : href,
+					tabindex: 0,
+					role: href === undefined ? 'button' : undefined,
+					'aria-disabled': disabled ? ('true' as const) : undefined,
+				}
+			: { type: 'button' as const, popovertarget: id, disabled }
+	);
+
 	function reposition() {
 		if (triggerEl && panelEl) place(triggerEl, panelEl, placement, gap);
 	}
@@ -132,10 +210,10 @@
 	}
 </script>
 
-<button
+<svelte:element
+	this={as}
 	bind:this={triggerEl}
 	data-tsu="Popover"
-	type="button"
 	class="pop-trigger {triggerClass} {klass}"
 	style={styleProp}
 	class:bare
@@ -155,14 +233,18 @@
 	class:trigger-tone-info={tone === 'info'}
 	class:trigger-tone-warn={tone === 'warn'}
 	class:trigger-tone-danger={tone === 'danger'}
-	popovertarget={id}
+	class:is-disabled={disabled && as === 'a'}
 	aria-label={label}
 	aria-haspopup={haspopup}
 	aria-expanded={open}
-	{disabled}
+	{...triggerAttrs}
+	onpointerenter={onPointerEnter}
+	onpointerleave={onPointerLeave}
+	onclick={onTriggerClick}
+	onkeydown={onTriggerKeydown}
 >
 	{@render trigger()}
-</button>
+</svelte:element>
 
 <div
 	bind:this={panelEl}
@@ -173,6 +255,8 @@
 	{role}
 	aria-label={label}
 	ontoggle={onToggle}
+	onpointerenter={onPanelPointerEnter}
+	onpointerleave={onPointerLeave}
 >
 	{#if opened}
 		{@render children({ close })}
@@ -332,10 +416,18 @@
 		border-color: var(--ok);
 		filter: brightness(1.08);
 	}
-	.pop-trigger:disabled {
+	.pop-trigger:disabled,
+	.pop-trigger.is-disabled {
 		opacity: 0.45;
 		cursor: not-allowed;
 	}
+	.pop-trigger.is-disabled {
+		pointer-events: none;
+	}
+	:where(a.pop-trigger) {
+		cursor: pointer;
+		text-decoration: none;
+	}
 	/* `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

@@ -39,6 +39,15 @@ type $$ComponentProps = {
     /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     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. */
+    openOn?: 'click' | 'hover';
+    /** Delay before a hover opens the panel. */
+    hoverDelay?: number;
+    /** Render the trigger as a link so it can navigate while still revealing
+     *  the panel; an `a` without `href` toggles the panel like a button. */
+    as?: 'button' | 'a';
+    href?: string;
     /** ARIA role of the panel. */
     role?: PanelRole;
     /** `aria-haspopup` announced on the trigger. */

package/dist/components/molecules/popover-hover.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @param {'click' | 'hover'} openOn
+ * @param {string | undefined} pointerType
+ */
+export function opensOnHover(openOn: "click" | "hover", pointerType: string | undefined): boolean;
+/**
+ * @param {object} o
+ * @param {() => void} o.open
+ * @param {() => void} o.close
+ * @param {(fn: () => void, ms: number) => any} [o.schedule]
+ * @param {(handle: any) => void} [o.cancel]
+ */
+export function createHoverIntent({ open, close, schedule, cancel }: {
+    open: () => void;
+    close: () => void;
+    schedule?: ((fn: () => void, ms: number) => any) | undefined;
+    cancel?: ((handle: any) => void) | undefined;
+}): {
+    /** @param {number} [delay] */
+    enter(delay?: number): void;
+    /** @param {number} [grace] */
+    leave(grace?: number): void;
+    cancel: () => void;
+    readonly pending: boolean;
+};
+export const HOVER_OPEN_DELAY: 150;
+export const HOVER_CLOSE_GRACE: 120;

package/dist/components/molecules/popover-hover.js

@@ -0,0 +1,62 @@
+// Hover-open intent for Popover: fine pointers only (a touch "pointerenter"
+// fires on tap and would fight the click), with a delay before opening and a
+// grace period before closing so the pointer can travel trigger -> panel.
+
+export const HOVER_OPEN_DELAY = 150;
+export const HOVER_CLOSE_GRACE = 120;
+
+const FINE_POINTERS = new Set(['mouse', 'pen']);
+
+/**
+ * @param {'click' | 'hover'} openOn
+ * @param {string | undefined} pointerType
+ */
+export function opensOnHover(openOn, pointerType) {
+	return openOn === 'hover' && FINE_POINTERS.has(pointerType ?? '');
+}
+
+/**
+ * @param {object} o
+ * @param {() => void} o.open
+ * @param {() => void} o.close
+ * @param {(fn: () => void, ms: number) => any} [o.schedule]
+ * @param {(handle: any) => void} [o.cancel]
+ */
+export function createHoverIntent({ open, close, schedule = setTimeout, cancel = clearTimeout }) {
+	/** @type {any} */
+	let timer = null;
+
+	function clear() {
+		if (timer !== null) {
+			cancel(timer);
+			timer = null;
+		}
+	}
+
+	/**
+	 * @param {() => void} fn
+	 * @param {number} ms
+	 */
+	function later(fn, ms) {
+		clear();
+		timer = schedule(() => {
+			timer = null;
+			fn();
+		}, ms);
+	}
+
+	return {
+		/** @param {number} [delay] */
+		enter(delay = HOVER_OPEN_DELAY) {
+			later(open, Math.max(0, delay));
+		},
+		/** @param {number} [grace] */
+		leave(grace = HOVER_CLOSE_GRACE) {
+			later(close, Math.max(0, grace));
+		},
+		cancel: clear,
+		get pending() {
+			return timer !== null;
+		},
+	};
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
+export { default as Divider } from './components/atoms/Divider.svelte';
 export { default as Dot } from './components/atoms/Dot.svelte';
 export { default as Gauge, type GaugeTone } from './components/atoms/Gauge.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
@@ -30,6 +31,7 @@ export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
 export { default as MasterDetail } from './components/layouts/MasterDetail.svelte';
+export { default as NavBar, type NavBarItem } from './components/layouts/NavBar.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';

package/dist/index.js

@@ -12,6 +12,7 @@ export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
 export { default as Checkbox } from './components/atoms/Checkbox.svelte';
+export { default as Divider } from './components/atoms/Divider.svelte';
 export { default as Dot } from './components/atoms/Dot.svelte';
 export { default as Gauge } from './components/atoms/Gauge.svelte';
 export { default as Heading } from './components/atoms/Heading.svelte';
@@ -36,6 +37,7 @@ export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
 export { default as MasterDetail } from './components/layouts/MasterDetail.svelte';
+export { default as NavBar } from './components/layouts/NavBar.svelte';
 export { default as NavItem } from './components/layouts/NavItem.svelte';
 export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';

package/package.json

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