fluentui-svelte 0.3.0 → 0.4.0

package/dist/components/breadcrumb/breadcrumb-button.svelte

@@ -0,0 +1,130 @@
+<script lang="ts" generics="T extends BreadcrumbItemGenerics = 'button'">
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import type { BreadcrumbButtonProps, BreadcrumbItemElementDOMType, BreadcrumbItemGenerics } from './types.js';
+
+	let {
+		as = 'button' as T,
+		ref = $bindable(),
+		icon,
+		iconPosition = 'before',
+		current = false,
+		disabled,
+		disabledFocusable = false,
+		onclick,
+		class: classes,
+		children,
+		...attributes
+	}: BreadcrumbButtonProps<T> = $props();
+
+	const _as = $derived.by(() => {
+		if (as !== 'button' && as !== 'a') throw new Error(`Invalid tag: ${as}. Must be one of button, a`);
+		return as;
+	});
+
+	const nativelyDisabled = $derived(_as === 'button' && disabled && !disabledFocusable);
+</script>
+
+<!--
+	@component
+	A step of a `Breadcrumb` that can be activated: an anchor when it goes somewhere, a button when
+	it does something. The last step is the page itself, and `current` is what announces it.
+
+	- Usage:
+	```tsx
+	<BreadcrumbButton as="a" href="/files" icon={FolderRegular}>Files</BreadcrumbButton>
+	<BreadcrumbButton current>This page</BreadcrumbButton>
+	```
+-->
+<svelte:element
+	this={_as}
+	bind:this={ref as BreadcrumbItemElementDOMType[T]}
+	type={_as === 'button' ? 'button' : undefined}
+	disabled={nativelyDisabled || undefined}
+	aria-disabled={disabled || undefined}
+	aria-current={current ? 'page' : undefined}
+	class={['fs-breadcrumb-button', { current, disabled }, classes]}
+	onclick={(e: MouseEvent) => invokeHandlers(e, disabled, [onclick])}
+	{...attributes}
+>
+	{#if icon && iconPosition === 'before'}
+		<span class="fs-breadcrumb-button-icon">
+			<RenderSoC SoC={icon} />
+		</span>
+	{/if}
+	<span class="fs-breadcrumb-button-label">
+		{@render children?.()}
+	</span>
+	{#if icon && iconPosition === 'after'}
+		<span class="fs-breadcrumb-button-icon">
+			<RenderSoC SoC={icon} />
+		</span>
+	{/if}
+</svelte:element>
+
+<style>
+	.fs-breadcrumb-button {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--fs-breadcrumb-gap, 0.25rem);
+		box-sizing: border-box;
+		min-width: 0;
+		height: var(--fs-breadcrumb-height, 1.5rem);
+		padding: 0 var(--fs-breadcrumb-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-breadcrumb-font-size, var(--fs-body2-font-size));
+		line-height: var(--fs-breadcrumb-line-height, var(--fs-body2-line-height));
+		/* An anchor arrives underlined and in the colour of a link; a step is neither. */
+		text-decoration: none;
+		cursor: pointer;
+		outline: none;
+		transition:
+			color var(--fs-fast-duration) var(--fs-point-to-point),
+			background var(--fs-fast-duration) var(--fs-point-to-point);
+		&:hover:not(.disabled) {
+			background: var(--fs-subtle-fill-secondary);
+			color: var(--fs-text-primary);
+		}
+		&:active:not(.disabled) {
+			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.125rem;
+		}
+		/* The end of the trail is where the reader already is, so it reads as text, not as a way out. */
+		&.current {
+			color: var(--fs-text-primary);
+			font-weight: 600;
+			cursor: default;
+			&:hover,
+			&:active {
+				background: transparent;
+				color: var(--fs-text-primary);
+			}
+		}
+		&.disabled {
+			color: var(--fs-text-disabled);
+			cursor: not-allowed;
+		}
+		& .fs-breadcrumb-button-icon {
+			display: flex;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: center;
+			& :global(svg) {
+				width: var(--fs-breadcrumb-icon-size, 1rem);
+				height: var(--fs-breadcrumb-icon-size, 1rem);
+			}
+		}
+		& .fs-breadcrumb-button-label {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+</style>

package/dist/components/breadcrumb/breadcrumb-button.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { BreadcrumbButtonProps, BreadcrumbItemGenerics } from './types.ts';
+declare function $$render<T extends BreadcrumbItemGenerics = 'button'>(): {
+    props: BreadcrumbButtonProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends BreadcrumbItemGenerics = '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 BreadcrumbItemGenerics = '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 BreadcrumbItemGenerics = 'button'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A step of a `Breadcrumb` that can be activated: an anchor when it goes somewhere, a button when
+ * it does something. The last step is the page itself, and `current` is what announces it.
+ *
+ * - Usage:
+ * ```tsx
+ * <BreadcrumbButton as="a" href="/files" icon={FolderRegular}>Files</BreadcrumbButton>
+ * <BreadcrumbButton current>This page</BreadcrumbButton>
+ * ```
+ */
+declare const BreadcrumbButton: $$IsomorphicComponent;
+type BreadcrumbButton<T extends BreadcrumbItemGenerics = 'button'> = InstanceType<typeof BreadcrumbButton<T>>;
+export default BreadcrumbButton;

package/dist/components/breadcrumb/breadcrumb-divider.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import ChevronRightRegular from 'fluentui-icons-svelte/ChevronRightRegular.svelte';
+	import type { BreadcrumbDividerProps } from './types.js';
+
+	let { ref = $bindable(), class: classes, children, ...attributes }: BreadcrumbDividerProps = $props();
+</script>
+
+<!--
+	@component
+	The mark between two steps of a `Breadcrumb`. It is decoration, so it is held out of the
+	accessibility tree: a reader counting the steps of the trail should not be read a chevron
+	between each one, nor be told the list is twice as long as it is.
+
+	- Usage:
+	```tsx
+	<BreadcrumbDivider />
+	```
+-->
+<li bind:this={ref} aria-hidden="true" class={['fs-breadcrumb-divider', classes]} {...attributes}>
+	{#if children}
+		{@render children()}
+	{:else}
+		<ChevronRightRegular />
+	{/if}
+</li>
+
+<style>
+	.fs-breadcrumb-divider {
+		display: flex;
+		flex: 0 0 auto;
+		align-items: center;
+		justify-content: center;
+		color: var(--fs-text-secondary);
+		& :global(svg) {
+			width: var(--fs-breadcrumb-divider-size, 0.75rem);
+			height: var(--fs-breadcrumb-divider-size, 0.75rem);
+		}
+	}
+</style>

package/dist/components/breadcrumb/breadcrumb-divider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { BreadcrumbDividerProps } from './types.ts';
+/**
+ * The mark between two steps of a `Breadcrumb`. It is decoration, so it is held out of the
+ * accessibility tree: a reader counting the steps of the trail should not be read a chevron
+ * between each one, nor be told the list is twice as long as it is.
+ *
+ * - Usage:
+ * ```tsx
+ * <BreadcrumbDivider />
+ * ```
+ */
+declare const BreadcrumbDivider: import("svelte").Component<BreadcrumbDividerProps, {}, "ref">;
+type BreadcrumbDivider = ReturnType<typeof BreadcrumbDivider>;
+export default BreadcrumbDivider;

package/dist/components/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { BreadcrumbItemProps } from './types.js';
+
+	let { ref = $bindable(), class: classes, children, ...attributes }: BreadcrumbItemProps = $props();
+</script>
+
+<!--
+	@component
+	One step of a `Breadcrumb`: the list item the step lives in. What goes inside is usually a
+	`BreadcrumbButton`, but it takes anything — a menu holding the steps that were folded away, for
+	instance.
+
+	- Usage:
+	```tsx
+	<BreadcrumbItem>
+		<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
+	</BreadcrumbItem>
+	```
+-->
+<li bind:this={ref} class={['fs-breadcrumb-item', classes]} {...attributes}>
+	{@render children?.()}
+</li>
+
+<style>
+	.fs-breadcrumb-item {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+	}
+</style>

package/dist/components/breadcrumb/breadcrumb-item.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { BreadcrumbItemProps } from './types.ts';
+/**
+ * One step of a `Breadcrumb`: the list item the step lives in. What goes inside is usually a
+ * `BreadcrumbButton`, but it takes anything — a menu holding the steps that were folded away, for
+ * instance.
+ *
+ * - Usage:
+ * ```tsx
+ * <BreadcrumbItem>
+ * 	<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
+ * </BreadcrumbItem>
+ * ```
+ */
+declare const BreadcrumbItem: import("svelte").Component<BreadcrumbItemProps, {}, "ref">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/components/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import type { BreadcrumbProps } from './types.js';
+
+	/** The steps a mover lands on when the trail takes a single tab stop. */
+	const TABSPOT_ITEMS = '.fs-breadcrumb-button';
+
+	let {
+		ref = $bindable(),
+		listRef = $bindable(),
+		listProps,
+		size = 'medium',
+		focusMode = 'tab',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		class: classes,
+		children,
+		...attributes
+	}: BreadcrumbProps = $props();
+
+	const tabspotAttributes = $derived(
+		focusMode === 'arrow' &&
+			getTabspotAttributes({
+				root: { manageSpecialKeys: { Home: true, End: true } },
+				mover: { axis: 'horizontal', items: TABSPOT_ITEMS }
+			})
+	);
+</script>
+
+<!--
+	@component
+	A breadcrumb shows where a page sits in the hierarchy above it, and gives the reader a way back
+	up. It renders a landmark of its own, so a screen reader can jump straight to it.
+
+	- Usage:
+	```tsx
+	<script>
+		import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from 'fluentui-svelte';
+	</script>
+
+	<Breadcrumb>
+		<BreadcrumbItem>
+			<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
+		</BreadcrumbItem>
+		<BreadcrumbDivider />
+		<BreadcrumbItem>
+			<BreadcrumbButton current>This page</BreadcrumbButton>
+		</BreadcrumbItem>
+	</Breadcrumb>
+	```
+-->
+<nav
+	bind:this={ref}
+	aria-label={ariaLabelledby ? undefined : (ariaLabel ?? 'Breadcrumb')}
+	aria-labelledby={ariaLabelledby}
+	class={['fs-breadcrumb', size, classes]}
+	{...attributes}
+>
+	<ol bind:this={listRef} class="fs-breadcrumb-list" {...tabspotAttributes} {...listProps}>
+		{@render children?.()}
+	</ol>
+</nav>
+
+<style>
+	.fs-breadcrumb {
+		font-family: var(--fs-font-family-base);
+		color: var(--fs-text-primary);
+		/* Read by every step and divider */
+		--fs-breadcrumb-font-size: var(--fs-body2-font-size);
+		--fs-breadcrumb-line-height: var(--fs-body2-line-height);
+		--fs-breadcrumb-height: 1.5rem;
+		--fs-breadcrumb-padding-inline: 0.375rem;
+		--fs-breadcrumb-gap: 0.25rem;
+		--fs-breadcrumb-icon-size: 1rem;
+		--fs-breadcrumb-divider-size: 1rem;
+		&.small {
+			--fs-breadcrumb-font-size: var(--fs-caption-font-size);
+			--fs-breadcrumb-line-height: var(--fs-caption-line-height);
+			--fs-breadcrumb-height: 1.25rem;
+			--fs-breadcrumb-padding-inline: 0.25rem;
+			--fs-breadcrumb-icon-size: 0.875rem;
+			--fs-breadcrumb-divider-size: 0.625rem;
+		}
+		&.large {
+			--fs-breadcrumb-font-size: var(--fs-body-font-size);
+			--fs-breadcrumb-line-height: var(--fs-body-line-height);
+			--fs-breadcrumb-height: 2rem;
+			--fs-breadcrumb-padding-inline: 0.5rem;
+			--fs-breadcrumb-icon-size: 1.25rem;
+			--fs-breadcrumb-divider-size: 1.25rem;
+		}
+		& .fs-breadcrumb-list {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+		}
+	}
+</style>

package/dist/components/breadcrumb/breadcrumb.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { BreadcrumbProps } from './types.ts';
+/**
+ * A breadcrumb shows where a page sits in the hierarchy above it, and gives the reader a way back
+ * up. It renders a landmark of its own, so a screen reader can jump straight to it.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from 'fluentui-svelte';
+ * </script>
+ *
+ * <Breadcrumb>
+ * 	<BreadcrumbItem>
+ * 		<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
+ * 	</BreadcrumbItem>
+ * 	<BreadcrumbDivider />
+ * 	<BreadcrumbItem>
+ * 		<BreadcrumbButton current>This page</BreadcrumbButton>
+ * 	</BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProps, {}, "ref" | "listRef">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/docs/llms.md

@@ -0,0 +1,193 @@
+# Breadcrumb
+
+A breadcrumb shows where a page sits in the hierarchy above it, and gives the reader a way back up. It renders a `nav` landmark around an ordered list, so a screen reader can jump straight to it.
+
+The landmark names itself `Breadcrumb`, the trail is an `ol` so its order is part of the markup rather than of the styling, the last step carries `aria-current="page"`, and the dividers are held out of the accessibility tree — a trail of three steps reads as three, not as five. Every one of those can be overridden: pass your own `aria-label`, or an `aria-labelledby`, and the default steps aside.
+
+To create a breadcrumb, you will need to use the following components:
+
+- `Breadcrumb`: The landmark and the list. It creates the context the rest read.
+- `BreadcrumbItem`: One step of the trail — the list item the step lives in. It takes anything, not only a step.
+- `BreadcrumbButton`: A step that can be activated: an anchor when it goes somewhere, a button when it does something.
+- `BreadcrumbDivider`: The mark between two steps. It is decoration, and is hidden from assistive technology.
+
+## Usage
+
+A breadcrumb is a list of steps with a divider between them. The last step is the page the reader is already on, so it is marked `current` rather than linked away.
+
+```svelte
+<script>
+	import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from 'fluentui-svelte';
+</script>
+
+<Breadcrumb>
+	<BreadcrumbItem>
+		<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
+	</BreadcrumbItem>
+	<BreadcrumbDivider />
+	<BreadcrumbItem>
+		<BreadcrumbButton as="a" href="/files">Files</BreadcrumbButton>
+	</BreadcrumbItem>
+	<BreadcrumbDivider />
+	<BreadcrumbItem>
+		<BreadcrumbButton current>Quarterly report</BreadcrumbButton>
+	</BreadcrumbItem>
+</Breadcrumb>
+```
+
+## Examples
+
+### Size
+
+`size` sets the type, the height and the divider of every step at once.
+
+```svelte
+<Breadcrumb size="small">...</Breadcrumb>
+<Breadcrumb size="medium">...</Breadcrumb>
+<Breadcrumb size="large">...</Breadcrumb>
+```
+
+### Icon
+
+`icon` takes a snippet or a component and renders it beside the label, on the side `iconPosition` asks for.
+
+```svelte
+<BreadcrumbItem>
+	<BreadcrumbButton as="a" href="/files" icon={FolderRegular}>Files</BreadcrumbButton>
+</BreadcrumbItem>
+```
+
+### Current Step
+
+`current` marks the step as the page the trail ends at. It announces `aria-current="page"` and reads as text rather than as a way out, so the last step does not offer to take the reader where they already are.
+
+```svelte
+<BreadcrumbItem>
+	<BreadcrumbButton current>Quarterly report</BreadcrumbButton>
+</BreadcrumbItem>
+```
+
+### Overflow Menu
+
+A step takes whatever you put in it, so a long trail folds its middle into a menu by making that menu a step of its own. Which steps fold is your call — slice the list wherever the layout needs it.
+
+```svelte
+<script>
+	// Keep the root and the last two steps; everything between them goes into the menu.
+	const head = trail.slice(0, 1);
+	const folded = trail.slice(1, -2);
+	const tail = trail.slice(-2);
+</script>
+
+<Breadcrumb>
+	{#each head as item (item.name)}
+		<BreadcrumbItem>
+			<BreadcrumbButton as="a" href={item.href}>{item.name}</BreadcrumbButton>
+		</BreadcrumbItem>
+		<BreadcrumbDivider />
+	{/each}
+
+	<BreadcrumbItem>
+		<Menu>
+			<MenuTrigger>
+				{#snippet children({ state, menuTriggerProps })}
+					<Button bind:ref={state.ref} {...menuTriggerProps} appearance="subtle" aria-label="More steps">
+						<MoreHorizontalRegular />
+					</Button>
+				{/snippet}
+			</MenuTrigger>
+			<MenuPopover>
+				<MenuList>
+					<!-- A step that goes somewhere is a link, in the menu as much as in the trail. -->
+					{#each folded as item (item.name)}
+						<MenuItem href={item.href}>{item.name}</MenuItem>
+					{/each}
+				</MenuList>
+			</MenuPopover>
+		</Menu>
+	</BreadcrumbItem>
+	<BreadcrumbDivider />
+
+	{#each tail as item (item.name)}
+		<BreadcrumbItem>
+			<BreadcrumbButton current>{item.name}</BreadcrumbButton>
+		</BreadcrumbItem>
+	{/each}
+</Breadcrumb>
+```
+
+The label on the menu button is yours to write, and it is worth writing: a trigger with only an icon says nothing to a screen reader. Note also that what lives inside a `MenuPopover` is not rendered until the menu opens, so the folded steps are not in the HTML a crawler reads.
+
+### Focus Mode
+
+`focusMode` decides how the focus walks the trail. `tab`, the default, leaves every step its own tab stop, which is what a reader expects of a row of links. `arrow` gives the whole trail a single tab stop and moves between steps with the arrow keys, with `Home` and `End` for the ends.
+
+```svelte
+<Breadcrumb focusMode="arrow">...</Breadcrumb>
+```
+
+## Component Props (Breadcrumb)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbProps -->
+
+| Name                 | Type                                         | Default    | Description                                                                                                                                                |
+| -------------------- | -------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_     | `HTMLElement`                                |            | The DOM reference of the `nav`.                                                                                                                            |
+| `listRef` _bindable_ | `HTMLOListElement`                           |            | The DOM reference of the list.                                                                                                                             |
+| `listProps`          | `HTMLOlAttributes`                           |            | The props to spread on the list element.                                                                                                                   |
+| `size`               | `'small'` &#124; `'medium'` &#124; `'large'` | `'medium'` | The size of every step and divider of the trail.                                                                                                           |
+| `focusMode`          | `'tab'` &#124; `'arrow'`                     | `'tab'`    | How the focus walks the trail: `tab` leaves every step its own tab stop, `arrow` gives the trail a single one and moves between steps with the arrow keys. |
+| Element Attributes   |                                              |            |                                                                                                                                                            |
+
+<!-- /props:BreadcrumbProps -->
+
+## Component Props (BreadcrumbItem)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbItemProps -->
+
+| Name                      | Type            | Default | Description                    |
+| ------------------------- | --------------- | ------- | ------------------------------ |
+| `ref` _bindable_          | `HTMLLIElement` |         | The DOM reference of the item. |
+| Element Attributes (`li`) |                 |         |                                |
+
+<!-- /props:BreadcrumbItemProps -->
+
+## Component Props (BreadcrumbButton)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbButtonProps -->
+
+| Name                | Type                              | Default    | Description                                                                                            |
+| ------------------- | --------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------ |
+| `ref` _bindable_    | `BreadcrumbItemElementDOMType[T]` |            | The DOM reference of the step.                                                                         |
+| `as`                | `'button'` &#124; `'a'`           | `'button'` | The DOM element to render. A step that goes somewhere is an anchor and takes `href`.                   |
+| `icon`              | `Snippet` &#124; `Component`      |            | The icon to display beside the label.                                                                  |
+| `iconPosition`      | `'before'` &#124; `'after'`       | `'before'` | Which side of the label the icon sits on.                                                              |
+| `current`           | `boolean`                         | `false`    | Marks the step as the page the trail ends at, which is what `aria-current` announces.                  |
+| `disabled`          | `boolean`                         |            | Disables the user interaction.                                                                         |
+| `disabledFocusable` | `boolean`                         | `false`    | Keeps a disabled step focusable, so the tab order stays the same for a keyboard or screen reader user. |
+| HTML Attributes     |                                   |            |                                                                                                        |
+
+<!-- /props:BreadcrumbButtonProps -->
+
+## Component Props (BreadcrumbDivider)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbDividerProps -->
+
+| Name                      | Type            | Default | Description                       |
+| ------------------------- | --------------- | ------- | --------------------------------- |
+| `ref` _bindable_          | `HTMLLIElement` |         | The DOM reference of the divider. |
+| Element Attributes (`li`) |                 |         |                                   |
+
+<!-- /props:BreadcrumbDividerProps -->
+
+## Accessibility
+
+The landmark is named `Breadcrumb` by default, which is what a screen reader announces when jumping to it. Give it your own `aria-label` when a page carries more than one trail, so each is distinguishable, or an `aria-labelledby` pointing at a heading you already render — the default steps aside for both.
+
+The dividers are decoration and are hidden, so the list reads as the number of steps it has. The last step carries `aria-current="page"`. A step with an icon and no label needs an `aria-label` of its own.
+
+Structured data is left to you. A breadcrumb is one of the few components a search engine reads directly, through `BreadcrumbList` from schema.org, but the text of a step lives in your markup and the URLs live in your routing — so the trail you publish is yours to build, in whichever shape your site already uses.

package/dist/components/breadcrumb/types.d.ts

@@ -0,0 +1,80 @@
+import type { BeforeOrAfter, PolymorphicProps, Sizes } from '../../types/index.js';
+import type { Snippet, Component } from 'svelte';
+import type { HTMLAttributes, HTMLOlAttributes } from 'svelte/elements';
+/** How the focus walks the trail. */
+export type BreadcrumbFocusMode = 'tab' | 'arrow';
+export type BreadcrumbItemGenerics = 'button' | 'a';
+export type BreadcrumbItemElementDOMType = {
+    button: HTMLButtonElement;
+    a: HTMLAnchorElement;
+};
+/** @propsmith BreadcrumbProps */
+export type BreadcrumbProps = {
+    /** The DOM reference of the `nav`.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The DOM reference of the list.
+     * @bindable
+     */
+    listRef?: HTMLOListElement;
+    /** The props to spread on the list element.
+     * @type HTMLOlAttributes
+     */
+    listProps?: HTMLOlAttributes;
+    /** The size of every step and divider of the trail.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** How the focus walks the trail: `tab` leaves every step its own tab stop, `arrow` gives the
+     * trail a single one and moves between steps with the arrow keys.
+     * @default 'tab'
+     */
+    focusMode?: BreadcrumbFocusMode;
+} & HTMLAttributes<HTMLElement>;
+/** @propsmith BreadcrumbItemProps */
+export type BreadcrumbItemProps = {
+    /** The DOM reference of the item.
+     * @bindable
+     */
+    ref?: HTMLLIElement;
+} & HTMLAttributes<HTMLLIElement>;
+/** @propsmith BreadcrumbButtonProps */
+export type BreadcrumbButtonProps<T extends BreadcrumbItemGenerics = 'button'> = {
+    /** The DOM reference of the step.
+     * @type BreadcrumbItemElementDOMType[T]
+     * @bindable
+     */
+    ref?: BreadcrumbItemElementDOMType[T];
+    /** The DOM element to render. A step that goes somewhere is an anchor and takes `href`.
+     * @type 'button' | 'a'
+     * @default 'button'
+     */
+    as?: T;
+    /** The icon to display beside the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Which side of the label the icon sits on.
+     * @default 'before'
+     */
+    iconPosition?: BeforeOrAfter;
+    /** Marks the step as the page the trail ends at, which is what `aria-current` announces.
+     * @default false
+     */
+    current?: boolean;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** Keeps a disabled step focusable, so the tab order stays the same for a keyboard or screen
+     * reader user.
+     * @default false
+     */
+    disabledFocusable?: boolean;
+} & PolymorphicProps<T>;
+/** @propsmith BreadcrumbDividerProps */
+export type BreadcrumbDividerProps = {
+    /** The DOM reference of the divider.
+     * @bindable
+     */
+    ref?: HTMLLIElement;
+} & HTMLAttributes<HTMLLIElement>;

package/dist/components/breadcrumb/types.js

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