@signal9/era-ui 21.0.0 → 23.0.0

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DropdownMenuContent: import("svelte").Component<PartProps<DropdownMenu.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DropdownMenuContent: import("svelte").Component<OwnedPartProps<DropdownMenu.ContentProps>, {}, "ref">;
 type DropdownMenuContent = ReturnType<typeof DropdownMenuContent>;
 export default DropdownMenuContent;

package/dist/ui/dropdown-menu/dropdown-menu-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { DropdownMenu } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = DropdownMenu.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: DropdownMenu.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<DropdownMenu.Root bind:open {...restProps}>
+	{@render children?.()}
+</DropdownMenu.Root>

package/dist/ui/dropdown-menu/dropdown-menu-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { DropdownMenu } from 'bits-ui';
+type $$ComponentProps = DropdownMenu.RootProps & {
+    children?: Snippet;
+};
+declare const DropdownMenuRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type DropdownMenuRoot = ReturnType<typeof DropdownMenuRoot>;
+export default DropdownMenuRoot;

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { DropdownMenu } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<DropdownMenu.SubContentProps> = $props();
+	}: OwnedPartProps<DropdownMenu.SubContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <DropdownMenu.Portal>
 	<DropdownMenu.SubContent
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DropdownMenuSubContent: import("svelte").Component<PartProps<DropdownMenu.SubContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DropdownMenuSubContent: import("svelte").Component<OwnedPartProps<DropdownMenu.SubContentProps>, {}, "ref">;
 type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
 export default DropdownMenuSubContent;

package/dist/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<DropdownMenu.SubTriggerProps> = $props();
+	}: OwnedPartProps<DropdownMenu.SubTriggerProps> = $props();
 </script>
 
 <DropdownMenu.SubTrigger

package/dist/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DropdownMenuSubTrigger: import("svelte").Component<PartProps<DropdownMenu.SubTriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DropdownMenuSubTrigger: import("svelte").Component<OwnedPartProps<DropdownMenu.SubTriggerProps>, {}, "ref">;
 type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;
 export default DropdownMenuSubTrigger;

package/dist/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { DropdownMenu } from 'bits-ui';
 	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<DropdownMenu.TriggerProps> = $props();
+	}: OwnedPartProps<DropdownMenu.TriggerProps> = $props();
+
+	// The trigger is the last node still inside the subtree, so it is the
+	// anchor the axes are read FROM when the content opens.
+	const relay = getAxisRelay();
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 
 <DropdownMenu.Trigger

package/dist/ui/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const DropdownMenuTrigger: import("svelte").Component<PartProps<DropdownMenu.TriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const DropdownMenuTrigger: import("svelte").Component<OwnedPartProps<DropdownMenu.TriggerProps>, {}, "ref">;
 type DropdownMenuTrigger = ReturnType<typeof DropdownMenuTrigger>;
 export default DropdownMenuTrigger;

package/dist/ui/dropdown-menu/index.d.ts

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-export declare const Root: typeof DropdownMenu.Root;
+export { default as Root } from './dropdown-menu-root.svelte';
 export declare const Group: typeof DropdownMenu.Group;
 export declare const RadioGroup: typeof DropdownMenu.RadioGroup;
 export declare const Sub: typeof DropdownMenu.Sub;

package/dist/ui/dropdown-menu/index.js

@@ -1,5 +1,5 @@
 import { DropdownMenu } from 'bits-ui';
-export const Root = DropdownMenu.Root;
+export { default as Root } from './dropdown-menu-root.svelte';
 export const Group = DropdownMenu.Group;
 export const RadioGroup = DropdownMenu.RadioGroup;
 export const Sub = DropdownMenu.Sub;

package/dist/ui/index.d.ts

@@ -23,6 +23,7 @@ export * as Dialog from './dialog/index.js';
 export * as DropdownMenu from './dropdown-menu/index.js';
 export { FileUpload } from './file-upload/index.js';
 export * as Menubar from './menubar/index.js';
+export * as Nav from './nav/index.js';
 export * as Menu from './menu/index.js';
 export { Meter } from './meter/index.js';
 export { Progress } from './progress/index.js';

package/dist/ui/index.js

@@ -23,6 +23,7 @@ export * as Dialog from './dialog/index.js';
 export * as DropdownMenu from './dropdown-menu/index.js';
 export { FileUpload } from './file-upload/index.js';
 export * as Menubar from './menubar/index.js';
+export * as Nav from './nav/index.js';
 export * as Menu from './menu/index.js';
 export { Meter } from './meter/index.js';
 export { Progress } from './progress/index.js';

package/dist/ui/link-preview/index.d.ts

@@ -1,5 +1,5 @@
 import { LinkPreview } from 'bits-ui';
-export declare const Root: typeof LinkPreview.Root;
+export { default as Root } from './link-preview-root.svelte';
 export declare const Arrow: typeof LinkPreview.Arrow;
 export declare const ContentStatic: typeof LinkPreview.ContentStatic;
 export declare const Portal: typeof LinkPreview.Portal;

package/dist/ui/link-preview/index.js

@@ -1,5 +1,5 @@
 import { LinkPreview } from 'bits-ui';
-export const Root = LinkPreview.Root;
+export { default as Root } from './link-preview-root.svelte';
 export const Arrow = LinkPreview.Arrow;
 export const ContentStatic = LinkPreview.ContentStatic;
 export const Portal = LinkPreview.Portal;

package/dist/ui/link-preview/link-preview-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { LinkPreview } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 8,
 		...restProps
-	}: PartProps<LinkPreview.ContentProps> = $props();
+	}: OwnedPartProps<LinkPreview.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <LinkPreview.Portal>
 	<LinkPreview.Content
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay max-w-xs rounded-control bg-elevated p-inset-control text-body shadow-lg glass-blur',
 			className

package/dist/ui/link-preview/link-preview-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { LinkPreview } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const LinkPreviewContent: import("svelte").Component<PartProps<LinkPreview.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const LinkPreviewContent: import("svelte").Component<OwnedPartProps<LinkPreview.ContentProps>, {}, "ref">;
 type LinkPreviewContent = ReturnType<typeof LinkPreviewContent>;
 export default LinkPreviewContent;

package/dist/ui/link-preview/link-preview-root.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { LinkPreview } from 'bits-ui';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
+
+	/*
+	 * era owns Root ONLY to open the axis channel — it renders no DOM, adds no
+	 * behaviour and forwards everything. There has to BE a component here: a
+	 * re-export (`export const Root = LinkPreview.Root`) has nowhere to put a context,
+	 * which is exactly why the axes could not cross the portal before.
+	 *
+	 * `open` is re-declared bindable because a spread cannot carry a two-way
+	 * binding, so wrapping a primitive breaks `bind:open` at every call site
+	 * unless the wrapper states it.
+	 */
+	let {
+		open = $bindable(false),
+		children,
+		...restProps
+	}: LinkPreview.RootProps & { children?: Snippet } = $props();
+
+	const relay = setAxisRelay();
+
+	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
+	// it, so a mount-time read runs once at page load and never again.
+	$effect(() => {
+		if (open) relay.refresh();
+	});
+</script>
+
+<LinkPreview.Root bind:open {...restProps}>
+	{@render children?.()}
+</LinkPreview.Root>

package/dist/ui/link-preview/link-preview-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import { LinkPreview } from 'bits-ui';
+type $$ComponentProps = LinkPreview.RootProps & {
+    children?: Snippet;
+};
+declare const LinkPreviewRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type LinkPreviewRoot = ReturnType<typeof LinkPreviewRoot>;
+export default LinkPreviewRoot;

package/dist/ui/link-preview/link-preview-trigger.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { LinkPreview } from 'bits-ui';
 	import { cn, type PartProps } from '../../utils/index.js';
 
@@ -8,6 +9,13 @@
 		class: className,
 		...restProps
 	}: PartProps<LinkPreview.TriggerProps> = $props();
+
+	// The trigger is the last node still inside the subtree, so it is the
+	// anchor the axes are read FROM when the content opens.
+	const relay = getAxisRelay();
+	$effect(() => {
+		relay?.register(ref);
+	});
 </script>
 
 <LinkPreview.Trigger

package/dist/ui/menubar/menubar-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { Menubar } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<Menubar.ContentProps> = $props();
+	}: OwnedPartProps<Menubar.ContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <Menubar.Portal>
 	<Menubar.Content
 		bind:ref
+		{...relay?.attrs}
 		align="start"
 		// p-menu, SURFACE-owned on purpose: 0 on flat — rows run the
 		// panel's full width, flush, and the first row sits directly under the

package/dist/ui/menubar/menubar-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Menubar } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const MenubarContent: import("svelte").Component<PartProps<Menubar.ContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const MenubarContent: import("svelte").Component<OwnedPartProps<Menubar.ContentProps>, {}, "ref">;
 type MenubarContent = ReturnType<typeof MenubarContent>;
 export default MenubarContent;

package/dist/ui/menubar/menubar-root.svelte

@@ -1,12 +1,37 @@
 <script lang="ts">
 	import { Menubar } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { setAxisRelay } from '../provider/axis-relay.svelte.js';
 
-	let { ref = $bindable(null), class: className, ...restProps }: Menubar.RootProps = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: Menubar.RootProps = $props();
+
+	const relay = setAxisRelay();
+
+	/*
+	 * Menubar's "open" is `value` — WHICH menu is open, not whether one is — so
+	 * the capture keys off a non-empty value. Same reason as everywhere else:
+	 * bits-ui mounts content eagerly, so reading at mount reads page load.
+	 *
+	 * The root ELEMENT is the anchor here rather than a trigger. A menubar's
+	 * triggers are inside it, so the bar sits at the same place in the tree for
+	 * axis purposes, and it exists whether or not any menu has been opened.
+	 */
+	$effect(() => {
+		relay.register(ref);
+	});
+	$effect(() => {
+		if (value) relay.refresh();
+	});
 </script>
 
 <Menubar.Root
 	bind:ref
+	bind:value
 	class={cn('flex h-bar items-center rounded-bar bg-well px-gutter shadow-sm', className)}
 	{...restProps}
 />

package/dist/ui/menubar/menubar-root.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Menubar } from 'bits-ui';
-declare const MenubarRoot: import("svelte").Component<Menubar.RootProps, {}, "ref">;
+declare const MenubarRoot: import("svelte").Component<Menubar.RootProps, {}, "value" | "ref">;
 type MenubarRoot = ReturnType<typeof MenubarRoot>;
 export default MenubarRoot;

package/dist/ui/menubar/menubar-sub-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { getAxisRelay } from '../provider/axis-relay.svelte.js';
 	import { Menubar } from 'bits-ui';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -8,12 +9,15 @@
 		class: className,
 		sideOffset = 4,
 		...restProps
-	}: PartProps<Menubar.SubContentProps> = $props();
+	}: OwnedPartProps<Menubar.SubContentProps> = $props();
+
+	const relay = getAxisRelay();
 </script>
 
 <Menubar.Portal>
 	<Menubar.SubContent
 		bind:ref
+		{...relay?.attrs}
 		class={cn(
 			'z-overlay w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className

package/dist/ui/menubar/menubar-sub-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Menubar } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const MenubarSubContent: import("svelte").Component<PartProps<Menubar.SubContentProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const MenubarSubContent: import("svelte").Component<OwnedPartProps<Menubar.SubContentProps>, {}, "ref">;
 type MenubarSubContent = ReturnType<typeof MenubarSubContent>;
 export default MenubarSubContent;

package/dist/ui/menubar/menubar-sub-trigger.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { Menubar } from 'bits-ui';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import { cn, type PartProps } from '../../utils/index.js';
+	import { cn, type OwnedPartProps } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		children,
 		class: className,
 		...restProps
-	}: PartProps<Menubar.SubTriggerProps> = $props();
+	}: OwnedPartProps<Menubar.SubTriggerProps> = $props();
 </script>
 
 <Menubar.SubTrigger

package/dist/ui/menubar/menubar-sub-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { Menubar } from 'bits-ui';
-import { type PartProps } from '../../utils/index.js';
-declare const MenubarSubTrigger: import("svelte").Component<PartProps<Menubar.SubTriggerProps>, {}, "ref">;
+import { type OwnedPartProps } from '../../utils/index.js';
+declare const MenubarSubTrigger: import("svelte").Component<OwnedPartProps<Menubar.SubTriggerProps>, {}, "ref">;
 type MenubarSubTrigger = ReturnType<typeof MenubarSubTrigger>;
 export default MenubarSubTrigger;

package/dist/ui/meter/meter.svelte

@@ -1,3 +1,38 @@
+<script lang="ts" module>
+	import { tv } from '../../utils/index.js';
+
+	/*
+	 * A meter reports a LEVEL inside a known range — disk usage, a quota, a
+	 * score — so "how is this level doing" is the one thing it exists to say,
+	 * and it was the one thing it could not say. Consumers were reaching past
+	 * the component for it (`class="[&>div]:bg-destructive"`), which reaches
+	 * through a private child and breaks the moment the fill's markup changes.
+	 *
+	 * The tones are the library's five, spelled exactly as Badge and Button
+	 * spell them, so a meter beside a badge that both read "warning" render the
+	 * same hue. `default` stays bg-fg: a meter with nothing to report should not
+	 * look like it is reporting something.
+	 *
+	 * The tone is on the FILL, not the track. The track is the well the value
+	 * sits in — it belongs to the container, not to the reading — so tinting it
+	 * would say "this whole control is in a warning state" rather than "the
+	 * value has reached the warning band".
+	 */
+	export const meterFillVariants = tv({
+		base: 'h-full w-full transition-transform duration-base ease-base',
+		variants: {
+			tone: {
+				default: 'bg-fg',
+				accent: 'bg-primary',
+				destructive: 'bg-destructive',
+				success: 'bg-success',
+				warning: 'bg-warning'
+			}
+		},
+		defaultVariants: { tone: 'default' }
+	});
+</script>
+
 <script lang="ts">
 	import { Meter } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
@@ -7,9 +42,21 @@
 		value = 0,
 		min = 0,
 		max = 100,
+		tone = 'default',
 		class: className,
 		...restProps
-	}: Meter.RootProps = $props();
+	}: Meter.RootProps & {
+		/**
+		 * The band this reading falls in. Tone is the fill's colour only — the
+		 * track stays neutral, because the well belongs to the control and the
+		 * fill belongs to the value.
+		 *
+		 * Tone carries no semantics on its own: a meter in the destructive band
+		 * still needs an accessible label saying what has run out. Pair it with
+		 * `aria-label` / a visible label, never rely on the hue alone.
+		 */
+		tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
+	} = $props();
 
 	let percentage = $derived(((value - min) / (max - min)) * 100);
 </script>
@@ -19,6 +66,7 @@
 	{value}
 	{min}
 	{max}
+	data-tone={tone}
 	class={cn(
 		'h-(--era-sp) w-full overflow-hidden rounded-control bg-elevated shadow-well',
 		className
@@ -26,7 +74,7 @@
 	{...restProps}
 >
 	<div
-		class="h-full w-full bg-fg transition-transform duration-base ease-base"
+		class={meterFillVariants({ tone })}
 		style="transform: translateX(-{100 - percentage}%)"
 	></div>
 </Meter.Root>

package/dist/ui/meter/meter.svelte.d.ts

@@ -1,4 +1,41 @@
+export declare const meterFillVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: "bg-fg";
+        accent: "bg-primary";
+        destructive: "bg-destructive";
+        success: "bg-success";
+        warning: "bg-warning";
+    };
+}, undefined, "h-full w-full transition-transform duration-base ease-base", {
+    tone: {
+        default: "bg-fg";
+        accent: "bg-primary";
+        destructive: "bg-destructive";
+        success: "bg-success";
+        warning: "bg-warning";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        default: "bg-fg";
+        accent: "bg-primary";
+        destructive: "bg-destructive";
+        success: "bg-success";
+        warning: "bg-warning";
+    };
+}, undefined>>;
 import { Meter } from 'bits-ui';
-declare const Meter: import("svelte").Component<Meter.RootProps, {}, "ref">;
+type $$ComponentProps = Meter.RootProps & {
+    /**
+     * The band this reading falls in. Tone is the fill's colour only — the
+     * track stays neutral, because the well belongs to the control and the
+     * fill belongs to the value.
+     *
+     * Tone carries no semantics on its own: a meter in the destructive band
+     * still needs an accessible label saying what has run out. Pair it with
+     * `aria-label` / a visible label, never rely on the hue alone.
+     */
+    tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
+};
+declare const Meter: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Meter = ReturnType<typeof Meter>;
 export default Meter;

package/dist/ui/nav/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Bar } from './nav-bar.svelte';
+export { default as Item } from './nav-item.svelte';

package/dist/ui/nav/index.js

@@ -0,0 +1,2 @@
+export { default as Bar } from './nav-bar.svelte';
+export { default as Item } from './nav-item.svelte';

package/dist/ui/nav/nav-bar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	// Bar's geometry, imported rather than restated. A re-export here would be a
+	// second name for one thing; anyone who wants the variants imports them from
+	// Bar, which is where they are defined.
+	import { barVariants } from '../bar/bar.svelte';
+
+	let {
+		ref = $bindable(null),
+		size = 'bar',
+		content = 'tier',
+		label = 'Main',
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLElement> & {
+		ref?: HTMLElement | null;
+		/** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
+		size?: 'chip' | 'control' | 'bar';
+		/** Tier of the items inside, so the wall stays concentric to them. */
+		content?: 'tier' | 'pill';
+		/**
+		 * The accessible name for this landmark. A page may hold several
+		 * navigations (primary, breadcrumb, pagination, footer) and a screen
+		 * reader lists them all by name — unnamed, they read as "navigation",
+		 * "navigation", "navigation". Defaults to "Main" rather than nothing so
+		 * the common case is named without anyone having to know this.
+		 */
+		label?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!--
+	A <nav> LANDMARK, not a styled div, which is the entire reason this exists
+	next to Bar. Bar is a layout primitive: a flex row on a tier with concentric
+	walls, and deliberately semantics-free, so consumers were building tab bars
+	out of it and shipping a row of links no assistive technology could find or
+	skip. Nav.Bar is that same geometry — it literally reuses barVariants rather
+	than restating it — with the landmark and the name attached.
+-->
+<nav
+	bind:this={ref}
+	aria-label={label}
+	class={cn(barVariants({ size, content }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</nav>