fluentui-svelte 0.2.1 → 0.4.0

package/dist/components/tab-view/docs/llms.md

@@ -0,0 +1,146 @@
+# TabView
+
+TabView lays a set of tabs out as a strip, in the shape a browser gives its document tabs. Every tab can carry an icon and a close button, and a new tab button can sit at the end of the strip.
+
+The strip owns the selection and nothing else. What a tab opens is rendered by you, wherever it belongs on the page, so a tab can open a panel underneath it, swap a region somewhere else, or drive a route.
+
+To create a tab strip, you will need to use the following components:
+
+- `TabView`: The root component that creates the context every tab reads: which tab is selected, whether the tabs close, and how they take their width. It renders the `tablist` and, optionally, the new tab button.
+- `TabViewTab`: A single tab of the strip. It reports its own selection and can carry an icon and a close button.
+
+## Usage
+
+A tab strip expects a `value` on every tab and an `activeTab` to match it against. Bind `activeTab` to follow the selection, and render whatever the selected tab opens yourself.
+
+```svelte
+<script>
+	import { TabView, TabViewTab } from 'fluentui-svelte';
+
+	let activeTab = $state('document');
+</script>
+
+<TabView bind:activeTab listProps={{ 'aria-label': 'Workspaces' }}>
+	<TabViewTab id="tab-document" value="document">Document</TabViewTab>
+	<TabViewTab id="tab-mail" value="mail">Mail</TabViewTab>
+</TabView>
+
+{#if activeTab === 'document'}
+	<div role="tabpanel" aria-labelledby="tab-document">The document you are working on.</div>
+{:else}
+	<div role="tabpanel" aria-labelledby="tab-mail">Everything that landed in your inbox.</div>
+{/if}
+```
+
+## Examples
+
+### Closing Tabs
+
+`closable` gives every tab a close button, and a single tab can opt in or out on its own. The strip never removes a tab: the tabs are your markup, so `onTabClose` hands the value back and leaves the removal — and which tab takes over — to you.
+
+```svelte
+<script>
+	import { TabView, TabViewTab } from 'fluentui-svelte';
+
+	let tabs = $state([
+		{ value: 'notes', label: 'Notes' },
+		{ value: 'draft', label: 'Draft' }
+	]);
+	let activeTab = $state('notes');
+
+	const closeTab = (event, value) => {
+		const index = tabs.findIndex((tab) => tab.value === value);
+		tabs = tabs.filter((tab) => tab.value !== value);
+		if (activeTab !== value) return;
+		activeTab = tabs[Math.min(index, tabs.length - 1)]?.value ?? '';
+	};
+</script>
+
+<TabView bind:activeTab closable onTabClose={closeTab}>
+	{#each tabs as tab (tab.value)}
+		<TabViewTab value={tab.value}>{tab.label}</TabViewTab>
+	{/each}
+</TabView>
+```
+
+### New Tab Button
+
+`showNewTabButton` adds a button at the end of the strip, outside the `tablist` so it never reads as a tab. `onNewTab` fires when it is activated.
+
+```svelte
+<TabView bind:activeTab showNewTabButton onNewTab={addTab}>
+	{#each tabs as tab (tab.value)}
+		<TabViewTab value={tab.value}>{tab.label}</TabViewTab>
+	{/each}
+</TabView>
+```
+
+### Tab Width
+
+`tabWidthMode` decides how the tabs take their width: `equal` shares the strip evenly, `size-to-content` sizes every tab to its own label, and `compact` shrinks every resting tab to its icon and spells out only the selected one.
+
+```svelte
+<TabView tabWidthMode="equal">...</TabView>
+<TabView tabWidthMode="size-to-content">...</TabView>
+<TabView tabWidthMode="compact">...</TabView>
+```
+
+### Disabled
+
+A disabled tab cannot be selected, and the arrow keys pass over it rather than landing on it.
+
+```svelte
+<TabView activeTab="mail">
+	<TabViewTab value="document">Document</TabViewTab>
+	<TabViewTab value="mail">Mail</TabViewTab>
+	<TabViewTab value="calendar" disabled>Calendar</TabViewTab>
+</TabView>
+```
+
+## Component Props (TabView)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TabViewProps -->
+
+| Name                       | Type                                                    | Default   | Description                                                                                                                                       |
+| -------------------------- | ------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement`                                        |           | The DOM reference of the element wrapping the strip.                                                                                              |
+| `listRef` _bindable_       | `HTMLDivElement`                                        |           | The DOM reference of the tab list.                                                                                                                |
+| `listProps`                | `HTMLAttributes`                                        |           | The props to spread on the tab list element, where the `tablist` role and its label belong.                                                       |
+| `activeTab` _bindable_     | `string`                                                |           | The value of the selected tab.                                                                                                                    |
+| `onTabChange`              | `(event: Event, value: string) => void`                 |           | Fired when the selected tab changes.                                                                                                              |
+| `closable`                 | `boolean`                                               | `false`   | Every tab shows a close button, unless the tab opts out of it.                                                                                    |
+| `onTabClose`               | `(event: Event, value: string) => void`                 |           | Fired when a tab asks to be closed. Removing the tab is left to the consumer.                                                                     |
+| `showNewTabButton`         | `boolean`                                               | `false`   | Shows the button that adds a new tab at the end of the strip.                                                                                     |
+| `onNewTab`                 | `(event: MouseEvent) => void`                           |           | Fired when the new tab button is activated.                                                                                                       |
+| `newTabButtonProps`        | `HTMLButtonAttributes`                                  |           | The props to spread on the new tab button.                                                                                                        |
+| `tabWidthMode`             | `'equal'` &#124; `'size-to-content'` &#124; `'compact'` | `'equal'` | How the tabs take their width: sharing the strip evenly, sizing to their own content, or shrinking to the icon of every tab but the selected one. |
+| `disableTabspot`           | `boolean`                                               | `false`   | Opts the strip out of the tabspot focus management, to wire your own.                                                                             |
+| Element Attributes (`div`) |                                                         |           |                                                                                                                                                   |
+
+<!-- /props:TabViewProps -->
+
+## Component Props (TabViewTab)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TabViewTabProps -->
+
+| Name                       | Type                                    | Default | Description                                                                             |
+| -------------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement`                        |         | The DOM reference of the tab element.                                                   |
+| `value`                    | `string`                                |         | The value that identifies the tab. Defaults to a generated id.                          |
+| `icon`                     | `Snippet` &#124; `Component`            |         | The icon to display before the label.                                                   |
+| `closable`                 | `boolean`                               |         | Shows the close button of the tab. Falls back to the `closable` of the strip.           |
+| `disabled`                 | `boolean`                               |         | Disables the user interaction.                                                          |
+| `onClose`                  | `(event: Event, value: string) => void` |         | Fired when the tab asks to be closed, either from its close button or the `Delete` key. |
+| Element Attributes (`div`) |                                         |         |                                                                                         |
+
+<!-- /props:TabViewTabProps -->
+
+## Keyboard Navigation
+
+The strip is a single tab stop. `ArrowLeft` and `ArrowRight` walk the tabs, `Home` and `End` jump to the ends, `Enter` and `Space` select the focused tab, and `Delete` closes it when it is closable. `disableTabspot` hands the focus management back to you.
+
+## Accessibility
+
+The strip renders a `tablist` and every tab a `tab`, so give the list a name through the `aria-label` you pass in `listProps`. Since you render what a tab opens, give that element a `tabpanel` role and point its `aria-labelledby` at the `id` of its tab.

package/dist/components/tab-view/tab-view-tab.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import DismissRegular from 'fluentui-icons-svelte/DismissRegular.svelte';
+	import { COMPONENT_NAME, requireTabViewContext } from './tab-view.svelte.js';
+	import type { TabViewTabProps } from './types.js';
+
+	const ID = $props.id();
+
+	let {
+		ref = $bindable(),
+		value = `${COMPONENT_NAME}-${ID}`,
+		icon,
+		closable,
+		disabled,
+		onClose,
+		onclick,
+		onkeydown,
+		class: classes,
+		children,
+		...attributes
+	}: TabViewTabProps = $props();
+
+	const context = requireTabViewContext();
+
+	const active = $derived(context.state.activeTab === value);
+
+	/** The tab decides for itself, and falls back to what the strip asked of every one of them. */
+	const _closable = $derived(closable ?? context.config.closable);
+
+	const close = (event: Event) => {
+		onClose?.(event, value);
+		context.methods.closeTab(event, value);
+	};
+
+	/**
+	 * A `div` carries the tab, because a `button` cannot hold the close `button` a browser tab has.
+	 * That costs the keys a button would have answered on its own, so they are handled here:
+	 * `Enter`/`Space` select, and `Delete` closes — the tabs pattern reserves it for exactly that.
+	 *
+	 * The close button is held out of the tab order, so the strip stays a single tab stop. `Delete`
+	 * is what reaches it from the keyboard, which is why the key is bound even while the pointer
+	 * has a button of its own.
+	 */
+	const onTabKeydown = (event: KeyboardEvent) => {
+		// A key spent inside the close button is already answered; only the tab itself speaks here.
+		if (event.target !== event.currentTarget || event.defaultPrevented) return;
+
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			context.methods.setActiveTab(event, value);
+		} else if (event.key === 'Delete' && _closable) {
+			event.preventDefault();
+			close(event);
+		}
+	};
+</script>
+
+<!--
+	@component
+	A single tab of a `TabView`. It reports its own selection, and can carry an icon and a close
+	button.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TabView, TabViewTab } from 'fluentui-svelte';
+		import { DocumentRegular } from 'fluentui-icons-svelte';
+	</script>
+
+	<TabView activeTab="notes">
+		<TabViewTab value="notes" icon={DocumentRegular} closable>Notes</TabViewTab>
+	</TabView>
+	```
+-->
+<div
+	bind:this={ref}
+	role="tab"
+	tabindex={disabled ? -1 : 0}
+	data-value={value}
+	aria-selected={active}
+	aria-disabled={disabled || undefined}
+	class={['fs-tab-view-tab', context.config.tabWidthMode, { active, disabled }, classes]}
+	onclick={(e: MouseEvent) => invokeHandlers(e, disabled, [() => context.methods.setActiveTab(e, value), onclick])}
+	onkeydown={(e: KeyboardEvent) => invokeHandlers(e, disabled, [onTabKeydown, onkeydown])}
+	{...attributes}
+>
+	{#if icon}
+		<span class="fs-tab-view-tab-icon">
+			<RenderSoC SoC={icon} />
+		</span>
+	{/if}
+	<span class="fs-tab-view-tab-label">{@render children?.()}</span>
+	{#if _closable}
+		<button
+			type="button"
+			class="fs-tab-view-tab-close"
+			aria-label="Close tab"
+			tabindex={-1}
+			{disabled}
+			onclick={(e: MouseEvent) => {
+				// The tab underneath would otherwise read the click as "select me".
+				e.stopPropagation();
+				close(e);
+			}}
+		>
+			<DismissRegular />
+		</button>
+	{/if}
+	{#if active}
+		<!--
+			The inverted corners of the base. They are elements rather than the two pseudo-elements of
+			the tab because each corner needs a box of its own to cast the fill and a second one to lay
+			the stroke over it: a box never paints its own border over its own shadow.
+		-->
+		<span class="fs-tab-view-tab-foot start"></span>
+		<span class="fs-tab-view-tab-foot end"></span>
+	{/if}
+</div>
+
+<style>
+	.fs-tab-view-tab {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		box-sizing: border-box;
+		height: var(--fs-tab-view-tab-height, 2.25rem);
+		padding: 0 0.5rem 0 0.75rem;
+		border: 1px solid transparent;
+		/* Only the top corners round: the bottom edge is where the tab meets what it opens. */
+		border-radius: var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0 0;
+		background: transparent;
+		color: var(--fs-text-secondary);
+		font-size: var(--fs-body-font-size);
+		line-height: var(--fs-body-line-height);
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+		/* Pull the tab down by 1px to overlap the strip below it. */
+		bottom: -1px;
+		&:hover {
+			background: var(--fs-subtle-fill-secondary);
+			color: var(--fs-text-primary);
+		}
+		&:focus-visible {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: -0.125rem;
+		}
+		&.active {
+			/* The selected tab is the page it opens, pulled up above the strip. */
+			background: var(--fs-solid-background-quaternary);
+			border-color: var(--fs-card-stroke-default);
+			/* The base is where the tab meets what it opens, so nothing is drawn across it. */
+			border-bottom: 1px solid var(--fs-solid-background-quaternary);
+			color: var(--fs-text-primary);
+			font-weight: 600;
+			/* The feet reach over the neighbouring tabs, so the selected one paints above them. */
+			z-index: 1;
+			bottom: -2px;
+		}
+		/*
+		 * The inverted corners a document tab has: instead of stopping square, each side curves out
+		 * into the strip, which is what reads as one surface rather than a button sitting on top of
+		 * one.
+		 *
+		 * The foot casts the fill. Its own shape — a box the size of the radius, rounded away from
+		 * the tab — is the quarter disc the curve leaves behind, and a shadow is never painted under
+		 * the shape casting it, so the spread lands exactly in the corner around the arc. The clip is
+		 * what makes that usable: a shadow spreads in every direction, and without it the surface
+		 * would bleed over the neighbouring tabs and below the base. A radius of spread reaches the
+		 * far corner of the box, which is all it has to.
+		 */
+		& .fs-tab-view-tab-foot {
+			position: absolute;
+			bottom: 1px;
+			width: var(--fs-tab-view-fillet, 0.4rem);
+			height: var(--fs-tab-view-fillet, 0.4rem);
+			box-shadow: 0 0 0 var(--fs-tab-view-fillet, 0.4rem) var(--fs-solid-background-quaternary);
+			pointer-events: none;
+			/*
+			 * The stroke that carries the border of the tab around the curve, laid over the fill
+			 * rather than beside it. A border cannot do that from the foot itself: an outer shadow
+			 * starts where the border box ends, so the two never overlap and the translucent stroke
+			 * would read against the strip instead of against the surface. A child paints after the
+			 * shadow of its parent, and sitting 1px outside the foot puts its border on the first
+			 * pixel of the fill — which leaves its inner edge exactly on the arc.
+			 *
+			 * Only the two sides the corner is rounded between are drawn, which is the arc and nothing
+			 * else. The other two run the length of the foot outside the clip, and a clipped edge
+			 * still leaves the sliver its antialiasing painted.
+			 */
+			&::after {
+				content: '';
+				position: absolute;
+				inset: -1px;
+				border: 0 solid var(--fs-card-stroke-default);
+			}
+			&.start {
+				left: calc(-1 * var(--fs-tab-view-fillet, 0.4rem) - 1px);
+				border-bottom-right-radius: var(--fs-tab-view-fillet, 0.4rem);
+				clip-path: polygon(0% 20%, 120% 10%, 120% 132%, 10% 132%);
+				&::after {
+					border-width: 0 1px 1px 0;
+					border-bottom-right-radius: calc(var(--fs-tab-view-fillet, 0.4rem) + 1px);
+				}
+			}
+			&.end {
+				right: calc(-1 * var(--fs-tab-view-fillet, 0.4rem) - 1px);
+				border-bottom-left-radius: var(--fs-tab-view-fillet, 0.4rem);
+				clip-path: polygon(-20% 10%, 90% 10%, 90% 132%, -20% 132%);
+				&::after {
+					border-width: 0 0 1px 1px;
+					border-bottom-left-radius: calc(var(--fs-tab-view-fillet, 0.4rem) + 1px);
+				}
+			}
+		}
+		&.disabled {
+			color: var(--fs-text-disabled);
+			cursor: not-allowed;
+			&:hover {
+				background: transparent;
+				color: var(--fs-text-disabled);
+			}
+			& .fs-tab-view-tab-close {
+				cursor: not-allowed;
+			}
+		}
+		/* Share the strip evenly, within the width a document tab is worth. */
+		&.equal {
+			flex: 1 1 0;
+			min-width: 5rem;
+			max-width: 12.5rem;
+		}
+		&.size-to-content {
+			flex: 0 0 auto;
+		}
+		/* A resting tab shrinks to its icon, and only the selected one spells itself out. */
+		&.compact:not(.active) {
+			flex: 0 0 auto;
+			padding: 0 0.5rem;
+			& .fs-tab-view-tab-label,
+			& .fs-tab-view-tab-close {
+				display: none;
+			}
+		}
+		& .fs-tab-view-tab-icon {
+			display: flex;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: center;
+			& :global(svg) {
+				width: 1rem;
+				height: 1rem;
+			}
+		}
+		& .fs-tab-view-tab-label {
+			flex: 1 1 auto;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			text-align: start;
+		}
+		& .fs-tab-view-tab-close {
+			display: flex;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: center;
+			width: 1.25rem;
+			height: 1.25rem;
+			padding: 0;
+			border: none;
+			border-radius: var(--fs-control-border-radius);
+			background: transparent;
+			color: inherit;
+			cursor: pointer;
+			&:hover:not(:disabled) {
+				background: var(--fs-subtle-fill-secondary);
+			}
+			&:active:not(:disabled) {
+				background: var(--fs-subtle-fill-tertiary);
+			}
+			& :global(svg) {
+				width: 0.75rem;
+				height: 0.75rem;
+			}
+		}
+	}
+	/* The hairline between two resting tabs is drawn by the strip: only it sees both of them. */
+</style>

package/dist/components/tab-view/tab-view-tab.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { TabViewTabProps } from './types.ts';
+/**
+ * A single tab of a `TabView`. It reports its own selection, and can carry an icon and a close
+ * button.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TabView, TabViewTab } from 'fluentui-svelte';
+ * 	import { DocumentRegular } from 'fluentui-icons-svelte';
+ * </script>
+ *
+ * <TabView activeTab="notes">
+ * 	<TabViewTab value="notes" icon={DocumentRegular} closable>Notes</TabViewTab>
+ * </TabView>
+ * ```
+ */
+declare const TabViewTab: import("svelte").Component<TabViewTabProps, {}, "ref">;
+type TabViewTab = ReturnType<typeof TabViewTab>;
+export default TabViewTab;

package/dist/components/tab-view/tab-view.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import AddRegular from 'fluentui-icons-svelte/AddRegular.svelte';
+	import { setTabViewContext, TABSPOT_ITEMS, TABSPOT_SKIP } from './tab-view.svelte.js';
+	import type { TabViewContext, TabViewProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		listRef = $bindable(),
+		listProps,
+		activeTab = $bindable(''),
+		onTabChange,
+		closable = false,
+		onTabClose,
+		showNewTabButton = false,
+		onNewTab,
+		newTabButtonProps,
+		tabWidthMode = 'equal',
+		disableTabspot = false,
+		class: classes,
+		children,
+		...attributes
+	}: TabViewProps = $props();
+
+	const context: TabViewContext = $state({
+		config: {
+			get closable() {
+				return closable;
+			},
+			get tabWidthMode() {
+				return tabWidthMode;
+			}
+		},
+		state: {
+			get activeTab() {
+				return activeTab;
+			},
+			set activeTab(value: string) {
+				activeTab = value;
+			}
+		},
+		events: null,
+		methods: {
+			setActiveTab: (event: Event, value: string) => {
+				if (activeTab === value) return;
+				activeTab = value;
+				onTabChange?.(event, value);
+			},
+			// Which tab takes over — and whether the tab goes at all — is the consumer's call: the
+			// tabs are their markup, so only they can remove one.
+			closeTab: (event: Event, value: string) => onTabClose?.(event, value)
+		}
+	});
+
+	setTabViewContext(context);
+
+	/**
+	 * A single tab stop for the whole strip: the arrows walk the tabs and `Home`/`End` jump to the
+	 * ends. `Escape` is left alone, a tab strip has nothing to exit to.
+	 */
+	const tabspotAttributes = $derived(
+		!disableTabspot &&
+			getTabspotAttributes({
+				root: { manageSpecialKeys: { Home: true, End: true } },
+				mover: { axis: 'horizontal', items: TABSPOT_ITEMS, skip: TABSPOT_SKIP }
+			})
+	);
+</script>
+
+<!--
+	@component
+	A tab view lays a set of tabs out as a strip, in the shape a browser gives its document tabs.
+	It owns the selection alone: what a tab shows is rendered by the consumer, wherever it belongs.
+
+	- Usage:
+	```tsx
+	<script>
+		import { TabView, TabViewTab } from 'fluentui-svelte';
+
+		let activeTab = $state('home');
+	</script>
+
+	<TabView bind:activeTab closable showNewTabButton>
+		<TabViewTab value="home">Home</TabViewTab>
+		<TabViewTab value="about">About</TabViewTab>
+	</TabView>
+
+	{#if activeTab === 'home'}
+		<p>Home</p>
+	{/if}
+	```
+-->
+<div bind:this={ref} class={['fs-tab-view', classes]} {...attributes}>
+	<div bind:this={listRef} role="tablist" class="fs-tab-view-list" {...tabspotAttributes} {...listProps}>
+		{@render children?.()}
+	</div>
+	{#if showNewTabButton}
+		<button
+			type="button"
+			class="fs-tab-view-new-tab"
+			aria-label="Add new tab"
+			onclick={(e: MouseEvent) => onNewTab?.(e)}
+			{...newTabButtonProps}
+		>
+			<AddRegular />
+		</button>
+	{/if}
+</div>
+
+<style>
+	.fs-tab-view {
+		display: flex;
+		/* The tabs grow up from the baseline of the strip, the way a document tab meets its page. */
+		align-items: flex-end;
+		font-family: var(--fs-font-family-base);
+		color: var(--fs-text-primary);
+		/* Read by every tab, so a height change ripples out of the root alone. */
+		--fs-tab-view-tab-height: 2.25rem;
+		/* The radius of the feet the selected tab curves out into, on either side of its base. */
+		--fs-tab-view-fillet: 0.4rem;
+		& .fs-tab-view-list {
+			display: flex;
+			align-items: stretch;
+			/* Room for the feet of the first and the last tab, which the scroll box would clip. */
+			padding-inline: calc(var(--fs-tab-view-fillet, 0.4rem) * 2);
+			/* `equal` divides this, and a strip that outgrows it scrolls rather than wrapping. */
+			flex: 1 1 auto;
+			min-width: 0;
+			scrollbar-width: none;
+			/*
+			 * The hairline that tells one resting tab from the next. A selected or hovered tab draws
+			 * an edge of its own, so the line steps aside on either side of it. It lives here rather
+			 * than in the tab, which renders one element and so can never see its own sibling.
+			 */
+			& :global(.fs-tab-view-tab:not(.active):not(:hover) + .fs-tab-view-tab:not(.active):not(:hover)::before) {
+				content: '';
+				position: absolute;
+				inset-inline-start: 0;
+				top: 25%;
+				bottom: 25%;
+				width: 1px;
+				background: var(--fs-divider-stroke-default);
+			}
+		}
+		& .fs-tab-view-new-tab {
+			position: relative;
+			display: flex;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: center;
+			width: 2rem;
+			height: var(--fs-tab-view-tab-height);
+			margin-inline-start: 0.5rem;
+			border: none;
+			border-radius: var(--fs-control-border-radius);
+			background: transparent;
+			color: var(--fs-text-secondary);
+			cursor: pointer;
+			outline: none;
+			&:hover {
+				background: var(--fs-subtle-fill-secondary);
+				color: var(--fs-text-primary);
+			}
+			&:active {
+				background: var(--fs-subtle-fill-tertiary);
+				color: var(--fs-text-secondary);
+			}
+			&:focus-visible {
+				outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+				outline-offset: 0.063rem;
+			}
+			/* The hairline that separates the button from the last tab. */
+			&::before {
+				content: '';
+				position: absolute;
+				inset-inline-start: -0.25rem;
+				top: 25%;
+				bottom: 25%;
+				width: 1px;
+				background: var(--fs-divider-stroke-default);
+			}
+			& :global(svg) {
+				width: 1rem;
+				height: 1rem;
+			}
+		}
+	}
+</style>

package/dist/components/tab-view/tab-view.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TabViewProps } from './types.ts';
+/**
+ * A tab view lays a set of tabs out as a strip, in the shape a browser gives its document tabs.
+ * It owns the selection alone: what a tab shows is rendered by the consumer, wherever it belongs.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { TabView, TabViewTab } from 'fluentui-svelte';
+ *
+ * 	let activeTab = $state('home');
+ * </script>
+ *
+ * <TabView bind:activeTab closable showNewTabButton>
+ * 	<TabViewTab value="home">Home</TabViewTab>
+ * 	<TabViewTab value="about">About</TabViewTab>
+ * </TabView>
+ *
+ * {#if activeTab === 'home'}
+ * 	<p>Home</p>
+ * {/if}
+ * ```
+ */
+declare const TabView: import("svelte").Component<TabViewProps, {}, "ref" | "listRef" | "activeTab">;
+type TabView = ReturnType<typeof TabView>;
+export default TabView;

package/dist/components/tab-view/tab-view.svelte.js

@@ -0,0 +1,15 @@
+import { PREFIX } from '../../internal/constants.js';
+import { createFSContext } from '../../internal/index.js';
+export const COMPONENT_NAME = `${PREFIX}-tab-view`;
+export const [getTabViewContext, setTabViewContext] = createFSContext();
+/** The tabs a mover lands on. The new tab button sits outside the list, so it is never one of them. */
+export const TABSPOT_ITEMS = '.fs-tab-view-tab';
+/** Tabs the cursor passes over instead of landing on: a disabled tab answers nothing once reached. */
+export const TABSPOT_SKIP = '[aria-disabled="true"]';
+/** Reads the tab view context, or fails loudly when a tab is rendered outside a `TabView`. */
+export const requireTabViewContext = () => {
+    const context = getTabViewContext();
+    if (!context)
+        throw new Error(`No TabViewContext found for ${COMPONENT_NAME}.`);
+    return context;
+};