fluentui-svelte 0.3.0 → 0.4.0

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;

package/dist/css/theme.css

@@ -158,7 +158,7 @@
 	/* System */
 	--fs-system-attention: rgb(var(--fs-accent-base));
 	/* 👇 changed from original #f6f6f608 to color mix with 75% white */
-	--fs-system-attetion-bg: color-mix(in srgb, rgb(var(--fs-accent-base)), white 75%);
+	--fs-system-attention-bg: color-mix(in srgb, rgb(var(--fs-accent-base)), white 85%);
 	--fs-system-attention-solid-bg: #f7f7f7;
 
 	--fs-system-success: #0f7b0f;

package/dist/index.d.ts

@@ -3,6 +3,10 @@ export { default as AutoSuggestBoxOption } from './components/auto-suggest-box/o
 export { default as Avatar } from './components/avatar/avatar.svelte';
 export { default as Badge } from './components/badge/badge.svelte';
 export { default as BadgeIcon } from './components/badge/badge-icon.svelte';
+export { default as Breadcrumb } from './components/breadcrumb/breadcrumb.svelte';
+export { default as BreadcrumbItem } from './components/breadcrumb/breadcrumb-item.svelte';
+export { default as BreadcrumbButton } from './components/breadcrumb/breadcrumb-button.svelte';
+export { default as BreadcrumbDivider } from './components/breadcrumb/breadcrumb-divider.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
 export { default as Card } from './components/card/card.svelte';
@@ -64,11 +68,15 @@ export { default as TableCell } from './components/table/table-cell.svelte';
 export { default as TableSelectionCell } from './components/table/table-selection-cell.svelte';
 export { default as TableCellLayout } from './components/table/table-cell-layout.svelte';
 export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
+export { default as TabView } from './components/tab-view/tab-view.svelte';
+export { default as TabViewTab } from './components/tab-view/tab-view-tab.svelte';
 export { default as TextArea } from './components/textarea/textarea.svelte';
 export { default as TextBox } from './components/text-box/text-box.svelte';
 export { default as TextBoxButton } from './components/text-box/text-box-button.svelte';
 export { default as TimePicker } from './components/time-picker/time-picker.svelte';
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
+export { default as TopNav } from './components/top-nav/top-nav.svelte';
+export { default as TopNavItem } from './components/top-nav/top-nav-item.svelte';
 export { default as Tooltip } from './components/tooltip/tooltip.svelte';
 export { default as TreeView } from './components/tree-view/tree-view.svelte';
 export { default as TreeViewItem } from './components/tree-view/tree-view-item.svelte';

package/dist/index.js

@@ -9,6 +9,12 @@ export { default as Avatar } from './components/avatar/avatar.svelte';
 export { default as Badge } from './components/badge/badge.svelte';
 export { default as BadgeIcon } from './components/badge/badge-icon.svelte';
 // End Badge Component
+// Start Breadcrumb Component
+export { default as Breadcrumb } from './components/breadcrumb/breadcrumb.svelte';
+export { default as BreadcrumbItem } from './components/breadcrumb/breadcrumb-item.svelte';
+export { default as BreadcrumbButton } from './components/breadcrumb/breadcrumb-button.svelte';
+export { default as BreadcrumbDivider } from './components/breadcrumb/breadcrumb-divider.svelte';
+// End Breadcrumb Component
 // Start Button Component
 export { default as Button } from './components/button/button.svelte';
 export { default as SplitButton } from './components/button/split-button.svelte';
@@ -120,6 +126,10 @@ export { default as TableSelectionCell } from './components/table/table-selectio
 export { default as TableCellLayout } from './components/table/table-cell-layout.svelte';
 export { default as TableCellActions } from './components/table/table-cell-actions.svelte';
 // End Table Component
+// Start TabView Component
+export { default as TabView } from './components/tab-view/tab-view.svelte';
+export { default as TabViewTab } from './components/tab-view/tab-view-tab.svelte';
+// End TabView Component
 // Start TextArea Component
 export { default as TextArea } from './components/textarea/textarea.svelte';
 // End TextArea Component
@@ -133,6 +143,10 @@ export { default as TimePicker } from './components/time-picker/time-picker.svel
 // Start ToggleSwitch Component
 export { default as ToggleSwitch } from './components/toggle-switch/toggle-switch.svelte';
 // End ToggleSwitch Component
+// Start TopNav Component
+export { default as TopNav } from './components/top-nav/top-nav.svelte';
+export { default as TopNavItem } from './components/top-nav/top-nav-item.svelte';
+// End TopNav Component
 // Start Tooltip Component
 export { default as Tooltip } from './components/tooltip/tooltip.svelte';
 // End Tooltip Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",