fluentui-svelte 0.2.1 → 0.4.0

package/dist/components/top-nav/top-nav-item.svelte

@@ -0,0 +1,234 @@
+<script lang="ts" generics="T extends TopNavItemGenerics = 'button'">
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import { COMPONENT_NAME, requireTopNavContext } from './top-nav.svelte.js';
+	import type { TopNavItemElementDOMType, TopNavItemGenerics, TopNavItemProps } from './types.js';
+
+	const ID = $props.id();
+
+	let {
+		as = 'button' as T,
+		ref = $bindable(),
+		value = `${COMPONENT_NAME}-${ID}`,
+		icon,
+		disabled,
+		onclick,
+		onfocus,
+		class: classes,
+		children,
+		...attributes
+	}: TopNavItemProps<T> = $props();
+
+	const context = requireTopNavContext();
+
+	const selected = $derived(context.state.selectedValue === value);
+
+	/** The item can be disabled on its own, and the strip can disable every one of them at once. */
+	const _disabled = $derived(disabled || context.config.disabled);
+
+	/**
+	 * The tag the invariant rules over. The markup renders it through here, so it is checked during
+	 * SSR and on every prop update rather than only once on mount.
+	 */
+	const _as = $derived.by(() => {
+		if (as !== 'button' && as !== 'a') throw new Error(`Invalid tag: ${as}. Must be one of button, a`);
+		return as;
+	});
+</script>
+
+<!--
+	@component
+	A single item of a `TopNav`. It reports its own selection and can carry an icon.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TopNav, TopNavItem } from 'fluentui-svelte';
+		import { AirplaneRegular } from 'fluentui-icons-svelte';
+	</script>
+
+	<TopNav selectedValue="arrivals" aria-label="Flights">
+		<TopNavItem value="arrivals" icon={AirplaneRegular}>Arrivals</TopNavItem>
+		<TopNavItem as="a" href="/departures" value="departures">Departures</TopNavItem>
+	</TopNav>
+	```
+-->
+<svelte:element
+	this={_as}
+	bind:this={ref as TopNavItemElementDOMType[T]}
+	type={_as === 'button' ? 'button' : undefined}
+	role="tab"
+	data-value={value}
+	aria-selected={selected}
+	disabled={_as === 'button' ? _disabled : undefined}
+	aria-disabled={_as === 'a' && _disabled ? true : undefined}
+	class={[
+		'fs-top-nav-item',
+		context.config.appearance,
+		{ selected, vertical: context.config.vertical, disabled: _disabled },
+		classes
+	]}
+	onclick={(e: MouseEvent) => invokeHandlers(e, _disabled, [() => context.methods.selectTab(e, value), onclick])}
+	onfocus={(e: FocusEvent) =>
+		invokeHandlers(e, _disabled, [
+			() => context.config.selectTabOnFocus && context.methods.selectTab(e, value),
+			onfocus
+		])}
+	{...attributes}
+>
+	{#if icon}
+		<span class="fs-top-nav-item-icon">
+			<RenderSoC SoC={icon} />
+		</span>
+	{/if}
+	<span class="fs-top-nav-item-content">
+		{@render children?.()}
+		{#if context.config.reserveSelectedTabSpace}
+			<!--
+				The label again, in the weight it takes once selected, laid out but never shown. The item
+				is then already as wide as its widest state, so selecting it cannot shove its neighbours
+				along. It is held out of the accessibility tree, where it would read as a second label.
+			-->
+			<span class="fs-top-nav-item-reserve" aria-hidden="true">{@render children?.()}</span>
+		{/if}
+	</span>
+</svelte:element>
+
+<style>
+	.fs-top-nav-item {
+		position: relative;
+		display: flex;
+		flex: 0 0 auto;
+		align-items: center;
+		justify-content: center;
+		gap: var(--fs-top-nav-item-gap, 0.5rem);
+		padding: var(--fs-top-nav-item-padding-block, 0.375rem) var(--fs-top-nav-item-padding-inline, 0.375rem);
+		border: none;
+		border-radius: var(--fs-control-border-radius);
+		background: transparent;
+		color: var(--fs-text-secondary);
+		font-family: inherit;
+		font-size: var(--fs-top-nav-item-font-size, var(--fs-body2-font-size));
+		line-height: var(--fs-top-nav-item-line-height, var(--fs-body2-line-height));
+		white-space: nowrap;
+		/* An anchor arrives underlined and in the colour of a link; an item is neither. */
+		text-decoration: none;
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		transition:
+			color var(--fs-fast-duration) var(--fs-point-to-point),
+			background var(--fs-fast-duration) var(--fs-point-to-point);
+		&:hover {
+			color: var(--fs-text-primary);
+		}
+		&:active {
+			color: var(--fs-text-secondary);
+		}
+		&:focus-visible {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.125rem;
+		}
+		&.selected {
+			color: var(--fs-text-primary);
+			font-weight: 600;
+		}
+		/* An anchor has no `:disabled` of its own, so the class is what both tags answer to. */
+		&.disabled {
+			color: var(--fs-text-disabled);
+			cursor: not-allowed;
+		}
+		/*
+		 * The line an item shows under itself while the pointer is on it. It is the item's own, not
+		 * the bar of the strip: the bar belongs to whatever is selected and never leaves it.
+		 */
+		&::after {
+			content: '';
+			position: absolute;
+			left: var(--fs-top-nav-item-padding-inline, 0.375rem);
+			right: var(--fs-top-nav-item-padding-inline, 0.375rem);
+			bottom: 0;
+			height: var(--fs-top-nav-bar-thickness, 0.1875rem);
+			border-radius: var(--fs-top-nav-bar-thickness, 0.1875rem);
+			background: var(--fs-control-strong-stroke-disabled);
+			opacity: 0;
+			transition: opacity var(--fs-fast-duration) var(--fs-point-to-point);
+			pointer-events: none;
+		}
+		&:hover:not(.selected):not(.disabled)::after {
+			opacity: 1;
+		}
+		&.vertical::after {
+			left: auto;
+			right: auto;
+			inset-inline-start: 0;
+			top: var(--fs-top-nav-item-padding-block, 0.375rem);
+			bottom: var(--fs-top-nav-item-padding-block, 0.375rem);
+			width: var(--fs-top-nav-bar-thickness, 0.1875rem);
+			height: auto;
+		}
+		&.subtle {
+			&:hover:not(.disabled) {
+				background: var(--fs-subtle-fill-secondary);
+			}
+			&:active:not(.disabled) {
+				background: var(--fs-subtle-fill-tertiary);
+			}
+		}
+		/* A pill takes the place of the bar, so the hover line steps aside for it. */
+		&.subtle-circular,
+		&.filled-circular {
+			border-radius: 999rem;
+			&::after {
+				content: none;
+			}
+			&:hover:not(.disabled) {
+				background: var(--fs-subtle-fill-secondary);
+			}
+			&:active:not(.disabled) {
+				background: var(--fs-subtle-fill-tertiary);
+			}
+		}
+		&.filled-circular {
+			background: var(--fs-subtle-fill-secondary);
+		}
+		&.subtle-circular.selected {
+			background: var(--fs-system-attention-bg);
+			box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fs-system-attention-text), transparent 50%);
+			color: var(--fs-system-attention-text);
+		}
+		&.filled-circular.selected {
+			background: var(--fs-accent-fill-default);
+			color: var(--fs-text-on-accent-primary);
+			&:hover:not(.disabled) {
+				background: var(--fs-accent-fill-secondary);
+			}
+			&:active:not(.disabled) {
+				background: var(--fs-accent-fill-tertiary);
+			}
+			&.disabled {
+				background: var(--fs-accent-fill-disabled);
+				color: var(--fs-text-on-accent-disabled);
+			}
+		}
+		& .fs-top-nav-item-icon {
+			display: flex;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: center;
+			& :global(svg) {
+				width: var(--fs-top-nav-item-icon-size, 1.25rem);
+				height: var(--fs-top-nav-item-icon-size, 1.25rem);
+			}
+		}
+		& .fs-top-nav-item-content {
+			display: block;
+		}
+		& .fs-top-nav-item-reserve {
+			display: block;
+			height: 0;
+			overflow: hidden;
+			visibility: hidden;
+			font-weight: 600;
+		}
+	}
+</style>

package/dist/components/top-nav/top-nav-item.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { TopNavItemGenerics, TopNavItemProps } from './types.ts';
+declare function $$render<T extends TopNavItemGenerics = 'button'>(): {
+    props: TopNavItemProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TopNavItemGenerics = 'button'> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TopNavItemGenerics = 'button'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TopNavItemGenerics = 'button'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A single item of a `TopNav`. It reports its own selection and can carry an icon.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TopNav, TopNavItem } from 'fluentui-svelte';
+ * 	import { AirplaneRegular } from 'fluentui-icons-svelte';
+ * </script>
+ *
+ * <TopNav selectedValue="arrivals" aria-label="Flights">
+ * 	<TopNavItem value="arrivals" icon={AirplaneRegular}>Arrivals</TopNavItem>
+ * 	<TopNavItem as="a" href="/departures" value="departures">Departures</TopNavItem>
+ * </TopNav>
+ * ```
+ */
+declare const TopNavItem: $$IsomorphicComponent;
+type TopNavItem<T extends TopNavItemGenerics = 'button'> = InstanceType<typeof TopNavItem<T>>;
+export default TopNavItem;

package/dist/components/top-nav/top-nav.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import { setTopNavContext, TABSPOT_ITEMS, TABSPOT_SKIP } from './top-nav.svelte.js';
+	import type { TopNavContext, TopNavProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		selectedValue = $bindable(''),
+		onTabSelect,
+		appearance = 'transparent',
+		size = 'medium',
+		vertical = false,
+		disabled = false,
+		selectTabOnFocus = false,
+		reserveSelectedTabSpace = true,
+		disableTabspot = false,
+		class: classes,
+		children,
+		...attributes
+	}: TopNavProps = $props();
+
+	const context: TopNavContext = $state({
+		config: {
+			get appearance() {
+				return appearance;
+			},
+			get size() {
+				return size;
+			},
+			get vertical() {
+				return vertical;
+			},
+			get disabled() {
+				return disabled;
+			},
+			get selectTabOnFocus() {
+				return selectTabOnFocus;
+			},
+			get reserveSelectedTabSpace() {
+				return reserveSelectedTabSpace;
+			}
+		},
+		state: {
+			get selectedValue() {
+				return selectedValue;
+			},
+			set selectedValue(value: string) {
+				selectedValue = value;
+			}
+		},
+		events: null,
+		methods: {
+			selectTab: (event: Event, value: string) => {
+				if (selectedValue === value) return;
+				selectedValue = value;
+				onTabSelect?.(event, value);
+			}
+		}
+	});
+
+	setTopNavContext(context);
+
+	/**
+	 * A single tab stop for the whole strip: the arrows walk the items along the axis they are laid
+	 * out on, and `Home`/`End` jump to the ends.
+	 */
+	const tabspotAttributes = $derived(
+		!disableTabspot &&
+			getTabspotAttributes({
+				root: { manageSpecialKeys: { Home: true, End: true } },
+				mover: {
+					axis: vertical ? 'vertical' : 'horizontal',
+					items: TABSPOT_ITEMS,
+					skip: TABSPOT_SKIP
+				}
+			})
+	);
+
+	/** The circular appearances fill the selected item instead of underlining it. */
+	const hasIndicator = $derived(appearance === 'transparent' || appearance === 'subtle');
+
+	/** Where the bar sits along the axis, and how far it reaches. Both are read off the DOM. */
+	let offset = $state(0);
+	let extent = $state(0);
+	let measured = $state(false);
+
+	/**
+	 * The bar belongs to the strip rather than to the selected item, which is what lets it travel:
+	 * one element that stays mounted and moves, instead of one per item appearing and disappearing.
+	 * That costs a measurement, since only the DOM knows where an item ended up.
+	 *
+	 * It spans the content of the item rather than its whole box, so the padding is taken off both
+	 * ends — the same padding the item lays its own hover bar within.
+	 */
+	const measure = () => {
+		const root = ref;
+		if (!root) return;
+
+		const item = [...root.querySelectorAll<HTMLElement>(TABSPOT_ITEMS)].find(
+			(el) => el.dataset.value === selectedValue
+		);
+		if (!item) {
+			measured = false;
+			return;
+		}
+
+		const style = getComputedStyle(item);
+		const before = parseFloat(vertical ? style.paddingTop : style.paddingLeft) || 0;
+		const after = parseFloat(vertical ? style.paddingBottom : style.paddingRight) || 0;
+
+		offset = (vertical ? item.offsetTop : item.offsetLeft) + before;
+		extent = Math.max(0, (vertical ? item.offsetHeight : item.offsetWidth) - before - after);
+		measured = true;
+	};
+
+	// The selection and the axis are what move the bar; both are read through `measure`.
+	$effect(() => {
+		measure();
+	});
+
+	/**
+	 * Everything else that moves it does so through the layout: a label that rewrapped, a font that
+	 * finished loading, an item that was added or removed. The observers are what catch those, since
+	 * none of them is a change to a prop.
+	 */
+	$effect(() => {
+		const root = ref;
+		if (!root || !hasIndicator) return;
+
+		const resize = new ResizeObserver(measure);
+		const watch = () => {
+			resize.disconnect();
+			resize.observe(root);
+			for (const item of root.querySelectorAll(TABSPOT_ITEMS)) resize.observe(item);
+		};
+		const mutations = new MutationObserver(() => {
+			watch();
+			measure();
+		});
+
+		watch();
+		mutations.observe(root, { childList: true, subtree: true });
+
+		return () => {
+			resize.disconnect();
+			mutations.disconnect();
+		};
+	});
+</script>
+
+<!--
+	@component
+	A top nav gives a single selection from a row of items, with a bar that travels to whichever one
+	is selected. It owns the selection alone: what an item opens is rendered by the consumer.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TopNav, TopNavItem } from 'fluentui-svelte';
+
+		let selectedValue = $state('arrivals');
+	</script>
+
+	<TopNav bind:selectedValue aria-label="Flights">
+		<TopNavItem value="arrivals">Arrivals</TopNavItem>
+		<TopNavItem value="departures">Departures</TopNavItem>
+	</TopNav>
+
+	{#if selectedValue === 'arrivals'}
+		<p>Arrivals</p>
+	{/if}
+	```
+-->
+<div
+	bind:this={ref}
+	role="tablist"
+	aria-orientation={vertical ? 'vertical' : undefined}
+	class={['fs-top-nav', appearance, size, { vertical }, classes]}
+	{...tabspotAttributes}
+	{...attributes}
+>
+	{@render children?.()}
+	{#if hasIndicator && measured}
+		<span
+			class="fs-top-nav-indicator"
+			aria-hidden="true"
+			style:--fs-top-nav-indicator-offset="{offset}px"
+			style:--fs-top-nav-indicator-extent="{extent}px"
+		></span>
+	{/if}
+</div>
+
+<style>
+	.fs-top-nav {
+		position: relative;
+		display: flex;
+		align-items: stretch;
+		font-family: var(--fs-font-family-base);
+		color: var(--fs-text-primary);
+		/* Read by every item, so a size change ripples out of the strip alone. */
+		--fs-top-nav-item-padding-inline: 0.625rem;
+		--fs-top-nav-item-padding-block: 0.375rem;
+		--fs-top-nav-item-font-size: var(--fs-body2-font-size);
+		--fs-top-nav-item-line-height: var(--fs-body2-line-height);
+		--fs-top-nav-item-gap: 0.5rem;
+		--fs-top-nav-item-icon-size: 1.25rem;
+		--fs-top-nav-bar-thickness: 0.1875rem;
+		&.small {
+			--fs-top-nav-item-padding-inline: 0.5rem;
+			--fs-top-nav-item-padding-block: 0.375rem;
+			--fs-top-nav-item-font-size: var(--fs-caption-font-size);
+			--fs-top-nav-item-line-height: var(--fs-caption-line-height);
+			--fs-top-nav-item-gap: 0.375rem;
+			--fs-top-nav-item-icon-size: 1rem;
+			--fs-top-nav-bar-thickness: 0.125rem;
+		}
+		&.large {
+			--fs-top-nav-item-padding-block: 0.875rem;
+			--fs-top-nav-item-font-size: var(--fs-body-font-size);
+			--fs-top-nav-item-line-height: var(--fs-body-line-height);
+		}
+		&.vertical {
+			flex-direction: column;
+			align-items: stretch;
+		}
+	}
+
+	/*
+	 * The bar. It is placed from the measurement rather than laid out, so moving it is a transform
+	 * the compositor can carry — and a transform is what keeps it on screen the whole way across,
+	 * instead of leaving one item and arriving at the next.
+	 */
+	.fs-top-nav-indicator {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: var(--fs-top-nav-indicator-extent, 0);
+		height: var(--fs-top-nav-bar-thickness);
+		border-radius: var(--fs-top-nav-bar-thickness);
+		background: var(--fs-accent-fill-default);
+		/* `offsetLeft` is measured from the left whichever way the strip is written. */
+		transform: translateX(var(--fs-top-nav-indicator-offset, 0));
+		transition:
+			transform var(--fs-normal-duration) var(--fs-point-to-point),
+			width var(--fs-normal-duration) var(--fs-point-to-point),
+			height var(--fs-normal-duration) var(--fs-point-to-point);
+		pointer-events: none;
+	}
+	.fs-top-nav.vertical .fs-top-nav-indicator {
+		top: 0;
+		bottom: auto;
+		/* The leading edge, so a strip written right to left grows its bar on the right. */
+		left: auto;
+		inset-inline-start: 0;
+		width: var(--fs-top-nav-bar-thickness);
+		height: var(--fs-top-nav-indicator-extent, 0);
+		transform: translateY(var(--fs-top-nav-indicator-offset, 0));
+	}
+</style>

package/dist/components/top-nav/top-nav.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TopNavProps } from './types.ts';
+/**
+ * A top nav gives a single selection from a row of items, with a bar that travels to whichever one
+ * is selected. It owns the selection alone: what an item opens is rendered by the consumer.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TopNav, TopNavItem } from 'fluentui-svelte';
+ *
+ * 	let selectedValue = $state('arrivals');
+ * </script>
+ *
+ * <TopNav bind:selectedValue aria-label="Flights">
+ * 	<TopNavItem value="arrivals">Arrivals</TopNavItem>
+ * 	<TopNavItem value="departures">Departures</TopNavItem>
+ * </TopNav>
+ *
+ * {#if selectedValue === 'arrivals'}
+ * 	<p>Arrivals</p>
+ * {/if}
+ * ```
+ */
+declare const TopNav: import("svelte").Component<TopNavProps, {}, "ref" | "selectedValue">;
+type TopNav = ReturnType<typeof TopNav>;
+export default TopNav;

package/dist/components/top-nav/top-nav.svelte.js

@@ -0,0 +1,18 @@
+import { PREFIX } from '../../internal/constants.js';
+import { createFSContext } from '../../internal/index.js';
+export const COMPONENT_NAME = `${PREFIX}-top-nav`;
+export const [getTopNavContext, setTopNavContext] = createFSContext();
+/** The items a mover lands on, and what the bar is measured against. */
+export const TABSPOT_ITEMS = '.fs-top-nav-item';
+/**
+ * Items the cursor passes over instead of landing on: a disabled item answers nothing once reached.
+ * A button says so with the attribute of its own; an anchor, which has none, says it to ARIA.
+ */
+export const TABSPOT_SKIP = '[disabled], [aria-disabled="true"]';
+/** Reads the top nav context, or fails loudly when an item is rendered outside a `TopNav`. */
+export const requireTopNavContext = () => {
+    const context = getTopNavContext();
+    if (!context)
+        throw new Error(`No TopNavContext found for ${COMPONENT_NAME}.`);
+    return context;
+};

package/dist/components/top-nav/types.d.ts

@@ -0,0 +1,89 @@
+import type { FSContext } from '../../internal/index.js';
+import type { PolymorphicProps, Sizes } from '../../types/index.js';
+import type { Snippet, Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** How the strip and every item in it is painted. */
+export type TopNavAppearance = 'transparent' | 'subtle' | 'subtle-circular' | 'filled-circular';
+/** An item is a button by default, and an anchor when it goes somewhere. */
+export type TopNavItemGenerics = 'button' | 'a';
+export type TopNavItemElementDOMType = {
+    button: HTMLButtonElement;
+    a: HTMLAnchorElement;
+};
+export type TopNavContext = FSContext<{
+    appearance: TopNavAppearance;
+    size: Sizes;
+    vertical: boolean;
+    disabled: boolean;
+    selectTabOnFocus: boolean;
+    reserveSelectedTabSpace: boolean;
+}, {
+    selectedValue: string;
+}, null, {
+    selectTab: (event: Event, value: string) => void;
+}>;
+/** @propsmith TopNavProps */
+export type TopNavProps = {
+    /** The DOM reference of the strip.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The value of the selected item.
+     * @bindable
+     */
+    selectedValue?: string;
+    /** Fired when an item is selected. */
+    onTabSelect?: (event: Event, value: string) => void;
+    /** How the strip is painted: `transparent` has no background of its own, `subtle` fills an item
+     * while it is engaged, and the two circular appearances trade the moving bar for a pill.
+     * @default 'transparent'
+     */
+    appearance?: TopNavAppearance;
+    /** The size of every item of the strip.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** Arranges the items in a column, with the bar down their leading edge.
+     * @default false
+     */
+    vertical?: boolean;
+    /** Disables the user interaction on every item.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Selects an item as soon as the focus reaches it, rather than waiting to be asked.
+     * @default false
+     */
+    selectTabOnFocus?: boolean;
+    /** A selected item sets its label in semibold, which is wider than the same label at rest. This
+     * holds that width from the start, so selecting an item never shifts the ones beside it.
+     * @default true
+     */
+    reserveSelectedTabSpace?: boolean;
+    /** Opts the strip out of the tabspot focus management, to wire your own.
+     * @default false
+     */
+    disableTabspot?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+/** @propsmith TopNavItemProps */
+export type TopNavItemProps<T extends TopNavItemGenerics = 'button'> = {
+    /** The DOM reference of the item.
+     * @type TopNavItemElementDOMType[T]
+     * @bindable
+     */
+    ref?: TopNavItemElementDOMType[T];
+    /** The DOM element to render. An anchor takes the attributes of one, `href` among them, and is
+     * what an item that navigates should be.
+     * @type 'button' | 'a'
+     * @default 'button'
+     */
+    as?: T;
+    /** The value that identifies the item. Defaults to a generated id. */
+    value?: string;
+    /** The icon to display before the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+} & PolymorphicProps<T>;

package/dist/components/top-nav/types.js

@@ -0,0 +1 @@
+export {};

package/dist/css/class-darkmode.css

@@ -140,7 +140,7 @@
 
 	/* System */
 	--fs-system-attention: rgb(var(--fs-accent-light-3));
-	--fs-system-attetion-bg: #f6f6f608;
+	--fs-system-attention-bg: #f6f6f608;
 	--fs-system-attention-solid-bg: #2e2e2e;
 
 	--fs-system-success: #6ccb5f;

package/dist/css/media-darkmode.css

@@ -141,7 +141,7 @@
 
 		/* System */
 		--fs-system-attention: rgb(var(--fs-accent-light-3));
-		--fs-system-attetion-bg: #f6f6f608;
+		--fs-system-attention-bg: #f6f6f608;
 		--fs-system-attention-solid-bg: #2e2e2e;
 
 		--fs-system-success: #6ccb5f;