fluentui-svelte 0.6.0 → 0.7.0

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

@@ -0,0 +1,355 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { onClickOutside } from 'runed';
+	import NavigationRegular from 'fluentui-icons-svelte/NavigationRegular.svelte';
+	import Button from '../button/button.svelte';
+	import { getAppWindowContext } from '../app-window/app-window.js';
+	import { invokeHandlers, RenderSoC, toLength } from '../../internal/index.js';
+	import { PREFIX } from '../../internal/constants.js';
+	import SideNavList from './side-nav-list.svelte';
+	import { setSideNavContext } from './side-nav.js';
+	import type { SideNavContent, SideNavContext, SideNavProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'side-nav';
+	const BODY_ID = `${PREFIX}-${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(null),
+		label = 'Main navigation',
+		collapsed = $bindable(false),
+		position = 'left',
+		showToggle,
+		floating = false,
+		width = 200,
+		expandLabel = 'Expand navigation',
+		collapseLabel = 'Collapse navigation',
+		closeOnSelect = true,
+		onCollapsedChange,
+		selectedItems = $bindable([]),
+		listViewProps,
+		header,
+		topContent,
+		footerContent,
+		footer,
+		children,
+		onkeydown,
+		onfocusout,
+		class: classes,
+		...attributes
+	}: SideNavProps = $props();
+
+	let toggleRef = $state<HTMLButtonElement | null>(null);
+
+	/** Docked, a collapsed navigation is a rail of icons. Floating, it is only the toggle. */
+	const compact = $derived(collapsed && !floating);
+	const toggleLabel = $derived(collapsed ? expandLabel : collapseLabel);
+
+	function setCollapsed(event: Event, value: boolean) {
+		if (collapsed === value) return;
+		collapsed = value;
+		onCollapsedChange?.(event, value);
+	}
+
+	const context: SideNavContext = {
+		config: {
+			get floating() {
+				return floating;
+			},
+			get listViewProps() {
+				return listViewProps;
+			}
+		},
+		state: {
+			get collapsed() {
+				return collapsed;
+			},
+			get compact() {
+				return compact;
+			},
+			get selectedItems() {
+				return selectedItems;
+			},
+			set selectedItems(value) {
+				selectedItems = value;
+			}
+		},
+		events: null,
+		methods: {
+			setCollapsed,
+			activate: (event) => {
+				if (floating && closeOnSelect && !event.defaultPrevented) setCollapsed(event, true);
+			}
+		}
+	};
+	setSideNavContext(context);
+
+	const appWindow = getAppWindowContext();
+	// The global navigation button of the title bar controls the navigation, and takes the place of its own toggle.
+	const globalNav = $derived(appWindow?.state.globalNav);
+	const toggleVisible = $derived(showToggle ?? !globalNav?.enabled);
+	// Without a toggle, the navigation itself is where the focus lands when a floating one closes: it takes focus, but is not a tab stop.
+	const focusTarget = $derived(toggleVisible ? {} : { tabindex: -1 });
+
+	const unregister = appWindow?.methods.registerSideNav({
+		get ref() {
+			return ref;
+		},
+		get collapsed() {
+			return collapsed;
+		},
+		get floating() {
+			return floating;
+		},
+		get position() {
+			return position;
+		},
+		setCollapsed
+	});
+	onDestroy(() => unregister?.());
+
+	// The body of a floating navigation hides when it closes, so the focus moves to the button that opens it first.
+	$effect.pre(() => {
+		if (floating && collapsed && ref?.contains(ref.ownerDocument.activeElement))
+			(toggleRef ?? globalNav?.ref ?? ref)?.focus();
+	});
+
+	/** The button of the title bar that opens and closes the navigation is not outside it: its own click toggles it. */
+	const isGlobalNav = (target: EventTarget | null) => target instanceof Node && !!globalNav?.ref?.contains(target);
+
+	// A floating navigation is not modal: it closes with an outside press, with Escape and when the focus leaves it.
+	onClickOutside(
+		() => ref,
+		(event) => {
+			if (floating && !collapsed && !isGlobalNav(event.target)) setCollapsed(event, true);
+		}
+	);
+
+	function handleKeydown(event: KeyboardEvent) {
+		// Escape belongs to a nested disclosure or menu first: they cancel it when they handle it.
+		if (event.defaultPrevented || !floating || collapsed || event.key !== 'Escape') return;
+		event.preventDefault();
+		event.stopPropagation();
+		setCollapsed(event, true);
+	}
+
+	function handleFocusout(event: FocusEvent) {
+		const next = event.relatedTarget;
+		if (floating && !collapsed && next instanceof Node && !ref?.contains(next) && !isGlobalNav(next))
+			setCollapsed(event, true);
+	}
+</script>
+
+{#snippet region(value?: SideNavContent)}
+	{#if value && !(compact && typeof value === 'string')}
+		<div class="fs-side-nav-content">
+			{#if typeof value === 'string'}
+				{value}
+			{:else}
+				<RenderSoC SoC={value} args={{ collapsed, floating }} />
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<!--
+	@component
+	Collapsible app navigation. Place it directly inside AppWindow next to AppSurface.
+	AppWindow handles docked layout and the floating overlay below its title bar.
+	Use SideNavItem for links and SideNavBranch for nested navigation.
+
+	- Usage:
+	```tsx
+	<script>
+		import { AppSurface, AppWindow, SideNav, SideNavItem } from 'fluentui-svelte';
+		import { HomeRegular } from 'fluentui-icons-svelte';
+	</script>
+
+	<AppWindow width={480} height={320}>
+		<SideNav header="My app">
+			<SideNavItem href="/" label="Home" icon={HomeRegular} />
+		</SideNav>
+		<AppSurface>The content of the app.</AppSurface>
+	</AppWindow>
+	```
+-->
+<nav
+	aria-label={label}
+	{...focusTarget}
+	{...attributes}
+	bind:this={ref}
+	class={[
+		'fs-side-nav',
+		{ collapsed, floating, compact, 'no-toggle': !toggleVisible, 'position-right': position === 'right' },
+		classes
+	]}
+	style:--fs-side-nav-width={toLength(width)}
+	onkeydown={(e) => invokeHandlers(e, [], [onkeydown, handleKeydown])}
+	onfocusout={(e) => invokeHandlers(e, [], [onfocusout, handleFocusout])}
+>
+	{#if toggleVisible || (header && !collapsed)}
+		<div class={['fs-side-nav-header', { 'no-toggle': !toggleVisible }]}>
+			{#if toggleVisible}
+				<Button
+					bind:ref={toggleRef}
+					type="button"
+					appearance="subtle"
+					class="fs-side-nav-toggle"
+					aria-label={toggleLabel}
+					title={toggleLabel}
+					aria-controls={BODY_ID}
+					aria-expanded={!collapsed}
+					onclick={(event) => setCollapsed(event, !collapsed)}
+				>
+					<NavigationRegular aria-hidden="true" />
+				</Button>
+			{/if}
+			{#if header && !collapsed}
+				<span class="fs-side-nav-heading">{header}</span>
+			{/if}
+		</div>
+	{/if}
+	<div id={BODY_ID} class="fs-side-nav-body" hidden={floating && collapsed}>
+		{@render region(topContent)}
+
+		<div class="fs-side-nav-items">
+			<SideNavList>
+				{@render children?.()}
+			</SideNavList>
+		</div>
+
+		{#if footerContent || footer}
+			<div class="fs-side-nav-footer">
+				{@render region(footerContent)}
+
+				{#if footer}
+					<SideNavList>
+						{@render footer()}
+					</SideNavList>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</nav>
+
+<style>
+	.fs-side-nav {
+		box-sizing: border-box;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex: none;
+		inline-size: var(--fs-side-nav-width);
+		max-inline-size: 100%;
+		min-block-size: 0;
+		color: var(--fs-text-primary);
+		font-family: var(--fs-font-family-base);
+		font-size: var(--fs-body-font-size);
+		/* The line of its items and toggle, which the buttons of a TitleBar share. */
+		line-height: 1.4;
+		padding-top: 0.25rem;
+		/* Without its own toggle the list sits right under the title bar, which already has its button. */
+		&.no-toggle:not(.floating) {
+			padding-top: 0;
+		}
+		&.collapsed {
+			/* The rail is one item wide: its icon (1rem) and the padding of the item (0.5rem) and of the list (0.25rem). */
+			inline-size: 2.5rem;
+			& .fs-side-nav-content {
+				padding-bottom: 0;
+			}
+		}
+		&.floating {
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: 0;
+			z-index: 3;
+			&.position-right {
+				inset-inline: auto 0;
+			}
+			&:not(.collapsed) {
+				background: var(--fs-acrylic-background-default);
+				border: 1px solid var(--fs-control-surface-stroke-flyout);
+				border-radius: var(--fs-control-overlay-border-radius);
+				box-shadow: var(--fs-shadow-flyout);
+			}
+			&.collapsed {
+				/* Only the toggle is left, and the content below it stays reachable. */
+				pointer-events: none;
+			}
+		}
+		/* The icons keep their place in the rail and out of it, aligned with the toggle. */
+		& :global(.fs-list-view-item),
+		& :global(.fs-list-view-item-branch-trigger) {
+			padding-inline: 0.5rem;
+			margin: 0.2rem 0;
+		}
+		&.compact {
+			& :global(.fs-list-view-item-branch-region),
+			& :global(.branch-chevron) {
+				display: none;
+			}
+			/* The label still names the branch for assistive technology. */
+			& :global(.fs-list-view-branch-label) {
+				position: absolute;
+				inline-size: 1px;
+				block-size: 1px;
+				clip-path: inset(50%);
+				overflow: hidden;
+			}
+			& .fs-side-nav-content {
+				padding-inline: 0.25rem;
+			}
+		}
+	}
+	.fs-side-nav-header {
+		display: flex;
+		align-items: center;
+		flex: none;
+		gap: 0.5rem;
+		padding-inline: 0.25rem;
+		box-sizing: border-box;
+		&.no-toggle {
+			padding-inline: 0.75rem;
+		}
+		/* The toggle is the size of an item: the same padding around an icon, and the same line of text under it. */
+		& :global(.fs-side-nav-toggle) {
+			flex: none;
+			padding: 0.275rem 0.5rem 0.4rem;
+			font-size: var(--fs-body2-font-size);
+			line-height: inherit;
+			min-block-size: calc(1lh + 0.675rem);
+			pointer-events: auto;
+			& :global(svg) {
+				inline-size: 1rem;
+				block-size: 1rem;
+			}
+		}
+	}
+	.fs-side-nav-heading {
+		min-inline-size: 0;
+		font-weight: 600;
+	}
+	.fs-side-nav-body {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-block-size: 0;
+		&[hidden] {
+			display: none;
+		}
+	}
+	.fs-side-nav-content {
+		padding: 0.125rem 0.25rem 0.125rem 0.75rem;
+	}
+	.fs-side-nav-items {
+		flex: 1;
+		min-block-size: 0;
+		overflow: auto;
+		padding-inline: 0.25rem;
+	}
+	.fs-side-nav-footer {
+		flex: none;
+		padding: 0.125rem 0.25rem;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { SideNavProps } from './types.ts';
+/**
+ * Collapsible app navigation. Place it directly inside AppWindow next to AppSurface.
+ * AppWindow handles docked layout and the floating overlay below its title bar.
+ * Use SideNavItem for links and SideNavBranch for nested navigation.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { AppSurface, AppWindow, SideNav, SideNavItem } from 'fluentui-svelte';
+ * 	import { HomeRegular } from 'fluentui-icons-svelte';
+ * </script>
+ *
+ * <AppWindow width={480} height={320}>
+ * 	<SideNav header="My app">
+ * 		<SideNavItem href="/" label="Home" icon={HomeRegular} />
+ * 	</SideNav>
+ * 	<AppSurface>The content of the app.</AppSurface>
+ * </AppWindow>
+ * ```
+ */
+declare const SideNav: import("svelte").Component<SideNavProps, {}, "ref" | "selectedItems" | "collapsed">;
+type SideNav = ReturnType<typeof SideNav>;
+export default SideNav;

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

@@ -0,0 +1,149 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+import type { PolymorphicProps } from '../../types/index.js';
+import type { ListViewItemBranchProps, ListViewItemDOM, ListViewItemProps, ListViewProps } from '../list-view/types.ts';
+export type SideNavRenderState = {
+    collapsed: boolean;
+    floating: boolean;
+};
+export type SideNavContent = string | Snippet<[SideNavRenderState]> | Component<SideNavRenderState>;
+export type SideNavListViewProps = Omit<ListViewProps<'ul'>, 'children' | 'ref' | 'selectedItems'>;
+/** @propsmith SideNavProps */
+export type SideNavProps = {
+    /** The DOM reference of the navigation landmark.
+     * @bindable
+     */
+    ref?: HTMLElement | null;
+    /** The accessible name of the navigation landmark.
+     * @default 'Main navigation'
+     */
+    label?: string;
+    /** Shows an icon rail when docked, or only the toggle when floating.
+     * @default false
+     * @bindable
+     */
+    collapsed?: boolean;
+    /** The side of the window the navigation is on. It mirrors in right-to-left layouts, and AppSurface rounds the corners that face it.
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /** Whether the navigation shows its own hamburger toggle. By default it hides it when the title bar of its window has a global navigation button, which then controls the navigation. Set it to true to keep both, or to false to control the navigation yourself.
+     * @default Automatic
+     */
+    showToggle?: boolean;
+    /** Overlays the content of a positioned parent instead of taking layout space. The overlay is non-modal.
+     * @default false
+     */
+    floating?: boolean;
+    /** The expanded width. Numbers are pixels converted to rem; strings are CSS lengths.
+     * @default 200
+     */
+    width?: number | string;
+    /** The accessible label of the toggle while collapsed.
+     * @default 'Expand navigation'
+     */
+    expandLabel?: string;
+    /** The accessible label of the toggle while expanded.
+     * @default 'Collapse navigation'
+     */
+    collapseLabel?: string;
+    /** Closes a floating panel after activating a SideNavItem.
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /** Called when the user expands or collapses the navigation. */
+    onCollapsedChange?: (event: Event, collapsed: boolean) => void;
+    /** The selection shared by every list in the navigation. Selection is off by default.
+     * @bindable
+     */
+    selectedItems?: string[];
+    /** Overrides the defaults of every list in the navigation, the main one, the footer and the ones inside a SideNavBranch: native list semantics, no selection and one tab stop per item.
+     * @type SideNavListViewProps
+     */
+    listViewProps?: SideNavListViewProps;
+    /** The text heading beside the hamburger button. Hidden in the compact rail. */
+    header?: string;
+    /** Custom content between the hamburger section and the list. Text, snippets and components are supported. Renderers receive collapsed and floating; strings are hidden in the compact rail.
+     * @type string | Snippet | Component
+     */
+    topContent?: SideNavContent;
+    /** Custom content after the scrolling list and before the pinned footer. Text, snippets and components are supported. Renderers receive collapsed and floating; strings are hidden in the compact rail.
+     * @type string | Snippet | Component
+     */
+    footerContent?: SideNavContent;
+    /** Footer list items pinned to the bottom, outside the main list's scroll area. */
+    footer?: Snippet;
+    /** Main navigation items. Use SideNavItem and SideNavBranch. */
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+/** @propsmith SideNavItemProps */
+export type SideNavItemProps<T extends 'li' | 'a' | 'button' | 'div' = 'a'> = {
+    /** The HTML tag. Links are the default; use button for actions and li or div for custom controls.
+     * @type 'li' | 'a' | 'button' | 'div'
+     * @default 'a'
+     */
+    as?: T;
+    /** The DOM reference of the item.
+     * @type HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
+     * @bindable
+     */
+    ref?: ListViewItemDOM[T] | null;
+    /** The accessible label, also used as visible content when children are absent. */
+    label: string;
+    /** The decorative icon shown in both expanded and collapsed modes.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Optional item markup, following ListViewItem. The label is rendered when children are absent. */
+    children?: Snippet;
+} & Pick<ListViewItemProps, 'shape' | 'value' | 'active' | 'role' | 'disabled' | 'checkmark' | 'onAction' | 'onfocus'> & PolymorphicProps<T, 'children' | 'ref' | 'onfocus'>;
+/** @propsmith SideNavBranchProps */
+export type SideNavBranchProps = {
+    /** The accessible label of the disclosure button. In the compact rail, its initial stands in when there is no icon. */
+    label: string;
+    /** The decorative icon before the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Whether the nested items are visible. Branches only expand or collapse and are never selectable. The compact rail reports a branch as collapsed, and opens the navigation when one is pressed.
+     * @default false
+     * @bindable
+     */
+    expanded?: boolean;
+    /** Called when a user expands or collapses the branch. */
+    onExpandedChange?: (e: Event, expanded: boolean) => void;
+    /** Disables the disclosure button.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The DOM reference of the native disclosure button. Additional HTML attributes, including class and id, also target this button.
+     * @type HTMLButtonElement
+     * @bindable
+     */
+    ref?: HTMLButtonElement | null;
+    /** The DOM reference of the wrapper element, the list item that holds the button and the nested list.
+     * @type HTMLLIElement | HTMLDivElement
+     * @bindable
+     */
+    wrapperRef?: HTMLLIElement | HTMLDivElement | null;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLLIElement | HTMLDivElement>;
+    /** The disclosure button shape. Inherited from the list by default. */
+    shape?: ListViewItemBranchProps['shape'];
+    /** The nested SideNavItem and SideNavBranch content. */
+    children?: Snippet;
+} & Omit<HTMLButtonAttributes, 'children' | 'role' | 'type' | 'value' | 'aria-expanded' | 'aria-controls'>;
+export type SideNavContext = FSContext<{
+    readonly floating: boolean;
+    readonly listViewProps: SideNavListViewProps | undefined;
+}, {
+    readonly collapsed: boolean;
+    readonly compact: boolean;
+    selectedItems: string[];
+}, null, {
+    setCollapsed: (event: Event, collapsed: boolean) => void;
+    activate: (event: Event) => void;
+}>;

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

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

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

@@ -66,7 +66,7 @@ The `as` prop lets you choose the HTML tag used to render the skeleton. Possible
 | `animation`      | `'wave'` | `'pulse'`                         | `'wave'`    | The animation played while the content is loading.            |
 | `shape`          | `'circular'` | `'rounded'` | `'square'` | `'rounded'` | The skeleton can have a circular, rounded or square shape.    |
 | `justify`        | `boolean`                                         |             | The skeleton is justified to the full width of the container. |
-| `ref` _bindable_ | `HTMLElement`                                     |             | The DOM reference of the skeleton element.                    |
+| `ref` _bindable_ | `HTMLElement` | `null`                       |             | The DOM reference of the skeleton element.                    |
 | HTML Attributes  |                                                   |             |                                                               |
 
 <!-- /props:SkeletonProps -->

package/dist/components/skeleton/skeleton.svelte

@@ -8,7 +8,7 @@
 		shape = 'rounded',
 		justify,
 		class: classes,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...attributes
 	}: SkeletonProps<Tag> = $props();
 
@@ -36,10 +36,10 @@
  -->
 <svelte:element
 	this={as}
+	{...attributes}
 	bind:this={ref}
 	aria-hidden="true"
 	class={['fs-skeleton', animation, shape, classes, { justify }]}
-	{...attributes}
 ></svelte:element>
 
 <style>

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

@@ -20,5 +20,5 @@ export type SkeletonProps<Tag extends SkeletonTags = 'div'> = {
     /** The DOM reference of the skeleton element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
 } & PolymorphicProps<Tag>;

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

@@ -50,38 +50,41 @@ Set the `disabled` prop to prevent interaction with the slider.
 <Slider value={30} disabled />
 ```
 
+The root is the control element. HTML attributes, class and ref apply to that element. There is no separate wrapper API.
+
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:SliderProps -->
 
-| Name                       | Type                                          | Default        | Description                                                                              |
-| -------------------------- | --------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------- |
-| `value` _bindable_         | `number`                                      | `0`            | The current value of the slider.                                                         |
-| `min`                      | `number`                                      | `0`            | The minimum value of the slider.                                                         |
-| `max`                      | `number`                                      | `100`          | The maximum value of the slider.                                                         |
-| `step`                     | `number`                                      | `1`            | How much the value moves on every step.                                                  |
-| `ticks`                    | `number[]`                                    | `[]`           | The values the tick marks are drawn at.                                                  |
-| `tickPlacement`            | `'around'` &#124; `'before'` &#124; `'after'` | `'around'`     | Where the tick marks sit relative to the rail.                                           |
-| `prefix`                   | `string`                                      | `''`           | Text prepended to the value in the tooltip.                                              |
-| `suffix`                   | `string`                                      | `''`           | Text appended to the value in the tooltip.                                               |
-| `track`                    | `boolean`                                     | `true`         | Whether to fill the rail up to the current value.                                        |
-| `orientation`              | `'horizontal'` &#124; `'vertical'`            | `'horizontal'` | The direction the slider runs in.                                                        |
-| `reverse`                  | `boolean`                                     | `false`        | Runs the slider from the maximum to the minimum instead.                                 |
-| `disabled`                 | `boolean`                                     | `false`        | Disables the user interaction.                                                           |
-| `sync`                     | `boolean`                                     |                | Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. |
-| `tooltip`                  | `boolean`                                     | `true`         | Whether to show the value in a tooltip while dragging.                                   |
-| `tooltipPlacement`         | `Placement`                                   | `'top'`        | Where the tooltip is placed relative to the thumb.                                       |
-| `tooltipContent`           | `string` &#124; `Snippet` &#124; `Component`  |                | Custom content for the tooltip, replacing the plain value.                               |
-| `onChange`                 | `(value: number) => void`                     |                | Called whenever the value changes.                                                       |
-| `class`                    | `string`                                      |                | The class to apply to the slider.                                                        |
-| `ref` _bindable_           | `HTMLElement`                                 |                | The DOM reference of the slider element.                                                 |
-| `inputRef` _bindable_      | `HTMLInputElement`                            |                | The DOM reference of the underlying input element.                                       |
-| `thumbRef` _bindable_      | `HTMLElement`                                 |                | The DOM reference of the thumb element.                                                  |
-| `tooltipRef` _bindable_    | `HTMLElement`                                 |                | The DOM reference of the tooltip element.                                                |
-| `railRef` _bindable_       | `HTMLElement`                                 |                | The DOM reference of the rail element.                                                   |
-| `trackRef` _bindable_      | `HTMLElement`                                 |                | The DOM reference of the track element.                                                  |
-| `tickBarRef` _bindable_    | `HTMLElement`                                 |                | The DOM reference of the tick bar element.                                               |
-| Element Attributes (`div`) |                                               |                |                                                                                          |
+| Name                                         | Type                                          | Default        | Description                                                                                                                                                                                                        |
+| -------------------------------------------- | --------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value` _bindable_                           | `number`                                      | `0`            | The current value of the slider.                                                                                                                                                                                   |
+| `defaultValue`                               | `number`                                      | `min`          | The value a form reset returns the slider to. A range input without one would fall back to an empty value.                                                                                                         |
+| `min`                                        | `number`                                      | `0`            | The minimum value of the slider.                                                                                                                                                                                   |
+| `max`                                        | `number`                                      | `100`          | The maximum value of the slider.                                                                                                                                                                                   |
+| `step`                                       | `number`                                      | `1`            | How much the value moves on every step.                                                                                                                                                                            |
+| `ticks`                                      | `number[]`                                    | `[]`           | The values the tick marks are drawn at.                                                                                                                                                                            |
+| `tickPlacement`                              | `'around'` &#124; `'before'` &#124; `'after'` | `'around'`     | Where the tick marks sit relative to the rail.                                                                                                                                                                     |
+| `prefix`                                     | `string`                                      | `''`           | Text prepended to the value in the tooltip.                                                                                                                                                                        |
+| `suffix`                                     | `string`                                      | `''`           | Text appended to the value in the tooltip.                                                                                                                                                                         |
+| `track`                                      | `boolean`                                     | `true`         | Whether to fill the rail up to the current value.                                                                                                                                                                  |
+| `orientation`                                | `'horizontal'` &#124; `'vertical'`            | `'horizontal'` | The direction the slider runs in.                                                                                                                                                                                  |
+| `reverse`                                    | `boolean`                                     | `false`        | Runs the slider from the maximum to the minimum instead.                                                                                                                                                           |
+| `disabled`                                   | `boolean`                                     | `false`        | Disables the user interaction.                                                                                                                                                                                     |
+| `sync`                                       | `boolean`                                     |                | Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. Without it, a value between two steps is drawn as it is, while the native input, and so the form, holds the nearest step. |
+| `tooltip`                                    | `boolean`                                     | `true`         | Whether to show the value in a tooltip while dragging.                                                                                                                                                             |
+| `tooltipPlacement`                           | `Placement`                                   | `'top'`        | Where the tooltip is placed relative to the thumb.                                                                                                                                                                 |
+| `tooltipContent`                             | `string` &#124; `Snippet` &#124; `Component`  |                | Custom content for the tooltip, replacing the plain value.                                                                                                                                                         |
+| `onChange`                                   | `(value: number) => void`                     |                | Called whenever the value changes.                                                                                                                                                                                 |
+| `ref` _bindable_                             | `HTMLInputElement` &#124; `null`              |                | The DOM reference of the native range input that holds the value and takes the keyboard focus. The other attributes of the slider are applied to it.                                                               |
+| `wrapperRef` _bindable_                      | `HTMLDivElement` &#124; `null`                |                | The DOM reference of the element that draws the slider.                                                                                                                                                            |
+| `wrapperAttributes`                          | `HTMLAttributes`                              |                | The attributes to spread on the element that draws the slider.                                                                                                                                                     |
+| `thumbRef` _bindable_                        | `HTMLElement` &#124; `null`                   |                | The DOM reference of the thumb element.                                                                                                                                                                            |
+| `tooltipRef` _bindable_                      | `HTMLElement` &#124; `null`                   |                | The DOM reference of the tooltip element.                                                                                                                                                                          |
+| `railRef` _bindable_                         | `HTMLElement` &#124; `null`                   |                | The DOM reference of the rail element.                                                                                                                                                                             |
+| `trackRef` _bindable_                        | `HTMLElement` &#124; `null`                   |                | The DOM reference of the track element.                                                                                                                                                                            |
+| `tickBarRef` _bindable_                      | `HTMLElement` &#124; `null`                   |                | The DOM reference of the tick bar element.                                                                                                                                                                         |
+| `HiddenInputAttributes<HTMLInputAttributes>` |                                               |                |                                                                                                                                                                                                                    |
 
 <!-- /props:SliderProps -->