fluentui-svelte 0.2.0 → 0.3.0

package/dist/components/menu/menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getMenuContext, setMenuContext } from './menu.svelte.js';
-	import type { MenuContext, MenuProps, MenuState } from './types.js';
+	import type { MenuContext, MenuProps } from './types.js';
 
 	let {
 		checkedValues = {} as Record<string, string[]>,
@@ -25,101 +25,112 @@
 
 	let locked = $state(false);
 
-	let config: MenuContext['config'] = $derived.by(() => {
-		if (!PARENT_CONTEXT) {
-			return {
-				id,
-				isSubMenu: false,
-				hasCheckmarks,
-				hasIcons,
-				openingDelay,
-				openOnHover,
-				persistOnItemActivation,
-				positionConfig,
-				parentHasCheckmarks: false,
-				parentHasIcons: false
-			};
-		} else {
-			return {
-				...PARENT_CONTEXT.config,
-				isSubMenu: true,
-				id,
-				hasCheckmarks,
-				hasIcons,
-				parentHasCheckmarks: !!PARENT_CONTEXT.config.hasCheckmarks,
-				parentHasIcons: !!PARENT_CONTEXT.config.hasIcons
-			};
-		}
-	});
-
-	const _state: MenuState = {
-		get open() {
-			return open;
-		},
-		set open(v) {
-			open = v;
-		},
-		get ref() {
-			return ref;
-		},
-		set ref(v) {
-			ref = v;
-		},
-		get locked() {
-			return locked;
+	const context: MenuContext = $state({
+		// A submenu carries its own id, icons and checkmarks, and inherits the opening behaviour
+		// and placement of the menu it hangs off.
+		config: {
+			get id() {
+				return id;
+			},
+			get isSubMenu() {
+				return !!PARENT_CONTEXT;
+			},
+			get hasCheckmarks() {
+				return hasCheckmarks;
+			},
+			get hasIcons() {
+				return hasIcons;
+			},
+			get parentHasCheckmarks() {
+				return !!PARENT_CONTEXT?.config.hasCheckmarks;
+			},
+			get parentHasIcons() {
+				return !!PARENT_CONTEXT?.config.hasIcons;
+			},
+			get openingDelay() {
+				return PARENT_CONTEXT ? PARENT_CONTEXT.config.openingDelay : openingDelay;
+			},
+			get openOnHover() {
+				return PARENT_CONTEXT ? PARENT_CONTEXT.config.openOnHover : openOnHover;
+			},
+			get persistOnItemActivation() {
+				return PARENT_CONTEXT ? PARENT_CONTEXT.config.persistOnItemActivation : persistOnItemActivation;
+			},
+			get positionConfig() {
+				return PARENT_CONTEXT ? PARENT_CONTEXT.config.positionConfig : positionConfig;
+			}
 		},
-		set locked(v) {
-			locked = v;
+		state: {
+			get open() {
+				return open;
+			},
+			set open(v) {
+				open = v;
+			},
+			get ref() {
+				return ref;
+			},
+			set ref(v) {
+				ref = v;
+			},
+			get locked() {
+				return locked;
+			},
+			set locked(v) {
+				locked = v;
+			},
+			get checkedValues() {
+				return checkedValues;
+			},
+			set checkedValues(v) {
+				checkedValues = v;
+			}
 		},
-		get checkedValues() {
-			return checkedValues;
+		// A submenu reports to the root menu, so its own callbacks are never the ones invoked.
+		events: PARENT_CONTEXT?.events ?? {
+			onCheckedValueChange: (e, value) => onCheckedValueChange?.(e, value),
+			onOpenChange: (e, opened) => onOpenChange?.(e, opened)
 		},
-		set checkedValues(v) {
-			checkedValues = v;
-		}
-	};
+		methods: {
+			toggle: (e: Event) => {
+				const { state, events } = context;
 
-	let events: MenuContext['events'] = $derived.by(() => {
-		if (!PARENT_CONTEXT) {
-			return {
-				onCheckedValueChange: (e, value) => onCheckedValueChange?.(e, value),
-				onOpenChange: (e, opened) => onOpenChange?.(e, opened)
-			};
-		} else {
-			return PARENT_CONTEXT.events;
-		}
-	});
+				state.open = !state.open;
+				events.onOpenChange?.(e, state.open);
+			},
+			open: (e: Event) => {
+				const { state, events } = context;
 
-	let methods: MenuContext['methods'] = $derived({
-		toggle: (e: Event) => {
-			_state.open = !_state.open;
-			events.onOpenChange?.(e, _state.open);
-		},
-		open: (e: Event) => {
-			_state.open = true;
-			events.onOpenChange?.(e, _state.open);
-		},
-		close: (e: Event) => {
-			_state.open = false;
-			events.onOpenChange?.(e, _state.open);
-		},
-		toggleCheckbox: (e: Event, value: string, name: string) => {
-			const current = _state.checkedValues?.[name] ?? [];
-			const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
-			_state.checkedValues = { ..._state.checkedValues, [name]: updated };
-			events.onCheckedValueChange?.(e, _state.checkedValues!);
-		},
-		toggleRadio: (e: Event, value: string, name: string) => {
-			if (!_state.checkedValues?.[name]?.includes(value)) {
-				_state.checkedValues = { ..._state.checkedValues, [name]: [value] };
-				methods.close?.(e);
-				events.onCheckedValueChange?.(e, _state.checkedValues!);
+				state.open = true;
+				events.onOpenChange?.(e, state.open);
+			},
+			close: (e: Event) => {
+				const { state, events } = context;
+
+				state.open = false;
+				events.onOpenChange?.(e, state.open);
+			},
+			toggleCheckbox: (e: Event, value: string, name: string) => {
+				const { state, events } = context;
+
+				const current = state.checkedValues?.[name] ?? [];
+				const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+				state.checkedValues = { ...state.checkedValues, [name]: updated };
+				events.onCheckedValueChange?.(e, state.checkedValues!);
+			},
+			toggleRadio: (e: Event, value: string, name: string) => {
+				const { state, events, methods } = context;
+
+				if (!state.checkedValues?.[name]?.includes(value)) {
+					state.checkedValues = { ...state.checkedValues, [name]: [value] };
+					methods.close?.(e);
+					events.onCheckedValueChange?.(e, state.checkedValues!);
+				}
 			}
 		}
 	});
 
-	// svelte-ignore state_referenced_locally
-	setMenuContext({ config, state: _state, events, methods });
+	setMenuContext(context);
 </script>
 
 {@render children?.()}

package/dist/components/number-box/docs/llms.md

@@ -29,9 +29,13 @@ The variant prop determines the visual style of the NumberBox.
 
 ## Component Props
 
-| Name          | Type                    | Description                                                   |
-| ------------- | ----------------------- | ------------------------------------------------------------- |
-| `value`       | `number`                | The current value of the NumberBox.                           |
-| `variant`     | `'inline' \| 'compact'` | The visual style of the NumberBox, e.g., 'inline', 'compact'. |
-| `ref`         | `HTMLInputElement`      | The DOM reference to the input element.                       |
-| TextBox Props |                         | Additional props inherited from the TextBox component.        |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:NumberBoxProps -->
+
+| Name                          | Type                          | Default    | Description                                           |
+| ----------------------------- | ----------------------------- | ---------- | ----------------------------------------------------- |
+| `value` _bindable_            | `number`                      |            | The current value of the input.                       |
+| `variant`                     | `'inline'` &#124; `'compact'` | `'inline'` | How the increment and decrement buttons are laid out. |
+| `TextBoxProps` without `type` |                               |            |                                                       |
+
+<!-- /props:NumberBoxProps -->

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

@@ -91,17 +91,22 @@ A Persona can display presence information, such as online status or availabilit
 
 ## Component Props
 
-| Name            | Type             | Description                                                                                                                                                                  |
-| --------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`          | `string`         | The full name of the person.                                                                                                                                                 |
-| `primaryText`   | `string`         | Main text, usually the person's role or title.                                                                                                                               |
-| `secondaryText` | `string`         | Secondary text, for example location or status.                                                                                                                              |
-| `tertiaryText`  | `string`         | Tertiary text, for example team or department.                                                                                                                               |
-| `size`          | `number`         | Size in pixels for the avatar and text.                                                                                                                                      |
-| `textAlign`     | `string`         | Alignment of the text. Possible values are 'left', 'center', and 'right'.                                                                                                    |
-| `textPosition`  | `string`         | Position of the text relative to the avatar. Possible values are 'top', 'bottom', 'left', and 'right'.                                                                       |
-| `avatarAlign`   | `string`         | Cross-axis alignment of the avatar relative to the text. Possible values are 'start', 'center', and 'end'.                                                                   |
-| `avatar`        | `object`         | Avatar props object. See the Avatar component for details.                                                                                                                   |
-| `presence`      | `object`         | Presence object, for example { status: 'available' }. Status values are 'available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'blocked', and 'unknown'. |
-| `presenceOnly`  | `boolean`        | Shows only the presence indicator, with no avatar or text.                                                                                                                   |
-| `element`       | `HTMLDivElement` | The DOM reference of the persona root element.                                                                                                                               |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:PersonaProps -->
+
+| Name                 | Type                                                       | Default    | Description                                                                                                   |
+| -------------------- | ---------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
+| `name`               | `string`                                                   |            | The name of the person or entity represented by this Persona. It is also used by the avatar for its initials. |
+| `size`               | `number`                                                   | `42`       | The size of the avatar in pixels. The text scales with it.                                                    |
+| `primaryText`        | `string`                                                   |            | Text to display below the name.                                                                               |
+| `secondaryText`      | `string`                                                   |            | Text to display below the primary text.                                                                       |
+| `tertiaryText`       | `string`                                                   |            | Text to display below the secondary text.                                                                     |
+| `textAlign`          | `'left'` &#124; `'center'` &#124; `'right'`                | `'left'`   | How the text block is aligned.                                                                                |
+| `textPosition`       | `'top'` &#124; `'bottom'` &#124; `'left'` &#124; `'right'` | `'right'`  | Where the text block sits relative to the avatar.                                                             |
+| `presenceOnly`       | `boolean`                                                  |            | Renders the presence badge on its own, without the avatar behind it.                                          |
+| `avatarAlign`        | `'start'` &#124; `'center'` &#124; `'end'`                 | `'center'` | How the avatar is aligned against the text block.                                                             |
+| `element` _bindable_ | `HTMLDivElement`                                           |            | The DOM reference of the persona element.                                                                     |
+| `avatar`             | `AvatarProps`                                              |            | The props to spread on the avatar.                                                                            |
+| `presence`           | `BadgePresence`                                            |            | The presence badge to display as a status indicator.                                                          |
+
+<!-- /props:PersonaProps -->

package/dist/components/progress-bar/docs/llms.md

@@ -55,13 +55,21 @@ The status prop allows you to set the status of the progress bar to 'paused' or
 
 ## Component Props
 
-| Name                    | Type                           | Description                                               |
-| ----------------------- | ------------------------------ | --------------------------------------------------------- |
-| `value`                 | bindable `number \| undefined` | The current progress value of the bar, between 0 and 100. |
-| `indeterminate`         | `boolean`                      | If true, the progress bar enters an indeterminate state.  |
-| `hideRail`              | `boolean`                      | If true, the progress bar rail is hidden.                 |
-| `status`                | `'paused' \| 'error'`          | The current status of the progress bar.                   |
-| `element`               | bindable `SVGElement`          | The DOM reference of the progress bar element.            |
-| `railElement`           | bindable `SVGRectElement`      | The DOM reference of the rail element.                    |
-| `trackElement`          | bindable `SVGRectElement`      | The DOM reference of the track element.                   |
-| `secondaryTrackElement` | bindable `SVGRectElement`      | The DOM reference of the secondary track element.         |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:ProgressBarProps -->
+
+| Name                               | Type                        | Default | Description                                                                     |
+| ---------------------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `value` _bindable_                 | `number` &#124; `null`      |         | The current value of the progress bar. Leave it unset for an indeterminate bar. |
+| `class`                            | `string`                    |         | The class to apply to the progress bar.                                         |
+| `ref` _bindable_                   | `SVGElement`                |         | The DOM reference of the progress bar element.                                  |
+| `min`                              | `number`                    | `0`     | The minimum value of the progress bar.                                          |
+| `max`                              | `number`                    | `100`   | The maximum value of the progress bar.                                          |
+| `hideRail`                         | `boolean`                   |         | Whether to hide the rail element.                                               |
+| `railElement` _bindable_           | `SVGRectElement`            |         | The DOM reference of the rail element.                                          |
+| `secondaryTrackElement` _bindable_ | `SVGRectElement`            |         | The DOM reference of the secondary track element, used while indeterminate.     |
+| `trackElement` _bindable_          | `SVGRectElement`            |         | The DOM reference of the track element.                                         |
+| `status`                           | `'paused'` &#124; `'error'` |         | The current status of the progress bar, which recolors the track.               |
+| Element Attributes                 |                             |         |                                                                                 |
+
+<!-- /props:ProgressBarProps -->

package/dist/components/progress-ring/docs/llms.md

@@ -62,15 +62,22 @@ The status prop allows you to set the status of the progress ring for visual fee
 
 ## Component Props
 
-| Name            | Type                  | Description                                                       |
-| --------------- | --------------------- | ----------------------------------------------------------------- |
-| `value`         | `number`              | The percentage of the progress ring that is filled.               |
-| `min`           | `number`              | The minimum value of the progress ring. Default is 0.             |
-| `max`           | `number`              | The maximum value of the progress ring. Default is 100.           |
-| `size`          | `number`              | The size of the progress ring in pixels. Default is 32.           |
-| `indeterminate` | `boolean`             | If true, the progress ring displays an indeterminate state.       |
-| `hideRail`      | `boolean`             | If true, the progress ring hides the rail.                        |
-| `status`        | `'paused' \| 'error'` | The status of the progress ring, for example 'paused' or 'error'. |
-| `ref`           | `SVGElement`          | The DOM reference to the SVG element.                             |
-| `railElement`   | `SVGCircleElement`    | The DOM reference to the rail element.                            |
-| `trackElement`  | `SVGCircleElement`    | The DOM reference to the track element.                           |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:ProgressRingProps -->
+
+| Name                      | Type                        | Default | Description                                                        |
+| ------------------------- | --------------------------- | ------- | ------------------------------------------------------------------ |
+| `value` _bindable_        | `number`                    | `0`     | The current value of the progress ring.                            |
+| `min`                     | `number`                    | `0`     | The minimum value of the progress ring.                            |
+| `max`                     | `number`                    | `100`   | The maximum value of the progress ring.                            |
+| `indeterminate`           | `boolean`                   |         | Spins the ring continuously instead of reporting a value.          |
+| `hideRail`                | `boolean`                   |         | Whether to hide the rail element.                                  |
+| `size`                    | `number`                    | `32`    | The size of the progress ring in pixels.                           |
+| `ref` _bindable_          | `SVGElement`                |         | The DOM reference of the progress ring element.                    |
+| `railElement` _bindable_  | `SVGCircleElement`          |         | The DOM reference of the rail element.                             |
+| `trackElement` _bindable_ | `SVGCircleElement`          |         | The DOM reference of the track element.                            |
+| `status`                  | `'paused'` &#124; `'error'` |         | The current status of the progress ring, which recolors the track. |
+| `class`                   | `string`                    |         | The class to apply to the progress ring.                           |
+| Element Attributes        |                             |         |                                                                    |
+
+<!-- /props:ProgressRingProps -->

package/dist/components/radio-button/docs/llms.md

@@ -54,11 +54,16 @@ The checked prop allows you to control the checked state of the radio button. Th
 
 ## Component Props
 
-| Name               | Type               | Description                                                                          |
-| ------------------ | ------------------ | ------------------------------------------------------------------------------------ |
-| `label`            | `string`           | The label text for the radio button.                                                 |
-| `group`            | `unknown`          | Bindable value representing a group of radio inputs that the input will be bound to. |
-| `checked`          | `boolean`          | Indicates whether the radio button is checked.                                       |
-| `disabled`         | `boolean`          | Indicates whether the radio button is disabled.                                      |
-| `ref`              | `HTMLInputElement` | Gets the DOM reference of the radio button element.                                  |
-| Element Attributes |                    | All standard HTML attributes for input elements can be applied.                      |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:RadioButtonProps -->
+
+| Name                         | Type               | Default | Description                                                                          |
+| ---------------------------- | ------------------ | ------- | ------------------------------------------------------------------------------------ |
+| `label`                      | `string`           |         | The label displayed next to the radio button.                                        |
+| `group` _bindable_           | `unknown`          |         | Bindable value representing a group of radio inputs that the input will be bound to. |
+| `checked` _bindable_         | `boolean`          | `false` | Whether the radio button is selected.                                                |
+| `ref` _bindable_             | `HTMLInputElement` |         | The DOM reference of the radio button element.                                       |
+| `labelAttributes`            | `PolymorphicProps` |         | The attributes to spread on the label wrapping the radio button.                     |
+| Element Attributes (`input`) |                    |         |                                                                                      |
+
+<!-- /props:RadioButtonProps -->

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

@@ -57,11 +57,16 @@ The `as` prop lets you choose the HTML tag used to render the skeleton. Possible
 
 ## Component Props
 
-| Name               | Type                                | Description                                                                                                               |
-| ------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `as`               | `'div' \| 'span'`                   | The HTML element used to render the skeleton. Default: `'div'`.                                                           |
-| `animation`        | `'wave' \| 'pulse'`                 | The animation type for the skeleton. Default: `'wave'`.                                                                   |
-| `shape`            | `'circle' \| 'rounded' \| 'square'` | The shape of the skeleton. Default: `'rounded'`.                                                                          |
-| `justify`          | `boolean`                           | If `true` the skeleton fills the full width of its container; otherwise it keeps a `1:1` aspect ratio based on its width. |
-| `element`          | `HTMLElement`                       | The DOM reference of the skeleton element (`bind:element`).                                                               |
-| Element Attributes |                                     | All other attributes are passed to the root element of the skeleton.                                                      |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:SkeletonProps -->
+
+| Name             | Type                                              | Default     | Description                                                   |
+| ---------------- | ------------------------------------------------- | ----------- | ------------------------------------------------------------- |
+| `as`             | `'div'` &#124; `'span'`                           | `'div'`     | The HTML element to render the skeleton as.                   |
+| `animation`      | `'wave'` &#124; `'pulse'`                         | `'wave'`    | The animation played while the content is loading.            |
+| `shape`          | `'circular'` &#124; `'rounded'` &#124; `'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.                    |
+| HTML Attributes  |                                                   |             |                                                               |
+
+<!-- /props:SkeletonProps -->

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

@@ -52,24 +52,36 @@ Set the `disabled` prop to prevent interaction with the slider.
 
 ## Component Props
 
-| Name               | Type                              | Description                                                                |
-| ------------------ | --------------------------------- | -------------------------------------------------------------------------- |
-| `value`            | `number`                          | The current value of the slider. Bindable. Default: `0`.                   |
-| `min`              | `number`                          | The minimum value of the range. Default: `0`.                              |
-| `max`              | `number`                          | The maximum value of the range. Default: `100`.                            |
-| `step`             | `number`                          | The increment between selectable values. Default: `1`.                     |
-| `ticks`            | `number[]`                        | An array of values at which to render tick marks. Default: `[]`.           |
-| `tickPlacement`    | `'around' \| 'before' \| 'after'` | Where tick marks are placed relative to the rail. Default: `around`.       |
-| `prefix`           | `string`                          | Text prepended to the value shown in the tooltip. Default: `''`.           |
-| `suffix`           | `string`                          | Text appended to the value shown in the tooltip. Default: `''`.            |
-| `track`            | `boolean`                         | Whether the filled track is shown. Default: `true`.                        |
-| `orientation`      | `'horizontal' \| 'vertical'`      | The layout direction of the slider. Default: `horizontal`.                 |
-| `reverse`          | `boolean`                         | Reverses the direction of the slider. Default: `false`.                    |
-| `disabled`         | `boolean`                         | Whether the slider is disabled. Default: `false`.                          |
-| `sync`             | `boolean`                         | Snaps the initial value to the nearest step on initialization.             |
-| `tooltip`          | `boolean`                         | Whether the value tooltip is shown while interacting. Default: `true`.     |
-| `tooltipPlacement` | `Placement`                       | The placement of the tooltip relative to the thumb. Default: `top`.        |
-| `tooltipContent`   | `string \| Snippet \| Component`  | Custom content for the tooltip. Defaults to `prefix` + `value` + `suffix`. |
-| `onChange`         | `(value: number) => void`         | Callback fired when the value changes.                                     |
-| `class`            | `string`                          | Additional CSS classes applied to the slider.                              |
-| `ref`              | `HTMLElement`                     | The DOM reference of the slider element. Bindable.                         |
+<!-- 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`) |                                               |                |                                                                                          |
+
+<!-- /props:SliderProps -->

package/dist/components/slider/slider.svelte

@@ -39,16 +39,18 @@
 		...attributes
 	}: SliderProps = $props();
 
-	watch(
-		() => step,
-		() => {
-			if (step > max - min) {
-				throw new Error('Step must be less than or equal to the difference between max and min');
-			} else if (min >= max) {
-				throw new Error('Min must be less than max');
-			}
+	/**
+	 * The props the invariants rule over. The markup renders them through here, so reading any of
+	 * them validates the whole set during SSR and on every prop update.
+	 */
+	const _range = $derived.by(() => {
+		if (step > max - min) {
+			throw new Error('Step must be less than or equal to the difference between max and min');
+		} else if (min >= max) {
+			throw new Error('Min must be less than max');
 		}
-	);
+		return { min, max, step };
+	});
 
 	watch(
 		() => value,
@@ -208,8 +210,8 @@
 	role="slider"
 	aria-label={ariaLabel}
 	aria-orientation={orientation}
-	aria-valuemin={min}
-	aria-valuemax={max}
+	aria-valuemin={_range.min}
+	aria-valuemax={_range.max}
 	aria-valuenow={value}
 	aria-valuetext={prefix || suffix ? `${prefix}${value}${suffix}` : undefined}
 	aria-disabled={disabled || undefined}