fluentui-svelte 0.2.0 → 0.3.0

package/dist/components/auto-suggest-box/auto-suggest-box.svelte

@@ -47,8 +47,14 @@
 		children
 	}: AutoSuggestBoxProps = $props();
 
-	// svelte-ignore state_referenced_locally
-	if (selectOnFocus && multiselect) throw new Error('selectOnFocus is not supported when multiselect is true');
+	/**
+	 * The props the invariant rules over. The markup and the context read them through here, so
+	 * reading either of them validates the pair during SSR and on every prop update.
+	 */
+	const _box = $derived.by(() => {
+		if (selectOnFocus && multiselect) throw new Error('selectOnFocus is not supported when multiselect is true');
+		return { selectOnFocus, multiselect };
+	});
 
 	let items = new SvelteMap<string, OptionType>();
 
@@ -56,12 +62,6 @@
 
 	let roundClass = $state('bottom');
 
-	let config: AutoSuggestBoxContext['config'] = $derived({
-		selectOnFocus,
-		virtualized: virtualizer,
-		multiselect
-	});
-
 	let activeOption: OptionType | null = $state(null);
 
 	/** The arrow key behind the move Tabspot is reporting, for `selectOnFocus` to hand on. */
@@ -83,59 +83,71 @@
 		}
 	};
 
-	const _state: AutoSuggestBoxContext['state'] = {
-		get lastTypedValue() {
-			return lastTypedValue;
-		},
-		get open() {
-			return open;
-		},
-		set open(v) {
-			open = v;
-		},
-		get textBoxRef() {
-			return inputRef;
-		},
-		get activeOption() {
-			return activeOption;
-		},
-		set activeOption(v) {
-			activeOption = v;
-		}
-	};
-
-	let methods: AutoSuggestBoxContext['methods'] = {
-		setOption: ({ id, index, value, text, disabled }) => {
-			items.set(id, { id, index, value, text, disabled });
+	const context: AutoSuggestBoxContext = $state({
+		config: {
+			get selectOnFocus() {
+				return _box.selectOnFocus;
+			},
+			get virtualized() {
+				return virtualizer;
+			},
+			get multiselect() {
+				return _box.multiselect;
+			}
 		},
-		deleteOption: (id: string) => {
-			items.delete(id);
+		state: {
+			get lastTypedValue() {
+				return lastTypedValue;
+			},
+			get open() {
+				return open;
+			},
+			set open(v) {
+				open = v;
+			},
+			get textBoxRef() {
+				return inputRef;
+			},
+			get activeOption() {
+				return activeOption;
+			},
+			set activeOption(v) {
+				activeOption = v;
+			}
 		},
-		toggleSelection: (e, id) => {
-			const item = items.get(id);
-
-			if (item) {
-				if (multiselect) {
-					if (selectedOptions?.some((opt) => opt.id === id)) {
-						selectedOptions = selectedOptions.filter((opt) => opt.id !== id);
+		events: null,
+		methods: {
+			setOption: ({ id, index, value, text, disabled }) => {
+				items.set(id, { id, index, value, text, disabled });
+			},
+			deleteOption: (id: string) => {
+				items.delete(id);
+			},
+			toggleSelection: (e, id) => {
+				const item = items.get(id);
+
+				if (item) {
+					if (_box.multiselect) {
+						if (selectedOptions?.some((opt) => opt.id === id)) {
+							selectedOptions = selectedOptions.filter((opt) => opt.id !== id);
+						} else {
+							selectedOptions = [...selectedOptions, { id, value: item.value }];
+						}
+
+						if (showTextualMultiselect) value = selectedOptions.map((opt) => opt.value).join(', ');
 					} else {
-						selectedOptions = [...selectedOptions, { id, value: item.value }];
-					}
+						selectedOptions = [item];
 
-					if (showTextualMultiselect) value = selectedOptions.map((opt) => opt.value).join(', ');
-				} else {
-					selectedOptions = [item];
+						value = item.text || item.value;
+					}
 
-					value = item.text || item.value;
+					suggestionChosen?.(e, item.value);
 				}
-
-				suggestionChosen?.(e, item.value);
 			}
 		}
-	};
+	});
 
-	// svelte-ignore state_referenced_locally
-	setAutoSuggestBoxContext({ config, state: _state, methods, events: null });
+	setAutoSuggestBoxContext(context);
 
 	/**
 	 * Put the cursor on `option`, or send it home when there is none. `nearest`
@@ -179,10 +191,10 @@
 
 		// selectOnFocus mirrors the option into the text box, which must not happen
 		// while the user is the one typing in it.
-		if (!selectOnFocus || !keyed || !cursorKey) return;
+		if (!_box.selectOnFocus || !keyed || !cursorKey) return;
 
 		if (option) {
-			methods.toggleSelection(cursorKey, option.id);
+			context.methods.toggleSelection(cursorKey, option.id);
 			value = option.text || option.value;
 		} else {
 			value = lastTypedValue;
@@ -221,7 +233,7 @@
 		e.preventDefault();
 
 		if (activeOption) {
-			methods.toggleSelection(e, activeOption.id);
+			context.methods.toggleSelection(e, activeOption.id);
 			open = false;
 		} else {
 			querySubmitted?.(e, value);
@@ -354,7 +366,7 @@
 </script>
 
 <div
-	class={['fs-autosuggestbox', { open }]}
+	class={['fs-autosuggestbox', { open, multiselect: _box.multiselect }]}
 	style="--max-items: {maxItemsInView}; --current-items: {items.size};"
 	bind:this={ref}
 >

package/dist/components/auto-suggest-box/docs/llms.md

@@ -58,17 +58,49 @@ built-in filter that a plain option list applies is skipped.
 
 ## Component Props
 
-| Name               | Type                                                      | Description                                                                  |
-| ------------------ | --------------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `placeholder`      | `string`                                                  | Placeholder text shown in the input.                                         |
-| `value`            | `string`                                                  | The current value of the input field.                                        |
-| `open`             | `boolean`                                                 | Whether the suggestion flyout is open. Default: `false`.                     |
-| `multiselect`      | `boolean`                                                 | Allow selecting multiple suggestions.                                        |
-| `selectOnFocus`    | `boolean`                                                 | Select a suggestion as it is focused during keyboard navigation.             |
-| `openOnFocus`      | `boolean`                                                 | Open the suggestion list as soon as the input takes focus. Default: `false`. |
-| `notFoundText`     | `string`                                                  | Text shown when no suggestions match. Default: `No results found`.           |
-| `maxItemsInView`   | `number`                                                  | Number of suggestions visible before the flyout scrolls. Default: `6`.       |
-| `ref`              | `HTMLElement`                                             | The DOM reference of the auto-suggest box element.                           |
-| `suggestionChosen` | `(e: Event, selection: string) => void`                   | Event triggered when a suggestion is chosen.                                 |
-| `querySubmitted`   | `(e: MouseEvent \| KeyboardEvent, query: string) => void` | Event triggered when a query is submitted.                                   |
-| `virtualizer`      | `{ size, scrollToIndex?, scrollToTop?, scrollToBottom? }` | Bridge to a windowed list. `size` is the total suggestion count.             |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:AutoSuggestBoxProps -->
+
+| Name                                                                          | Type                                                            | Default              | Description                                                                                                                                                                        |
+| ----------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                                              | `HTMLElement`                                                   |                      | The DOM reference of the wrapper element.                                                                                                                                          |
+| `inputRef` _bindable_                                                         | `HTMLInputElement`                                              |                      | The DOM reference of the text box element.                                                                                                                                         |
+| `value` _bindable_                                                            | `string`                                                        | `''`                 | The current text of the box.                                                                                                                                                       |
+| `open` _bindable_                                                             | `boolean`                                                       | `false`              | Controls the open state of the suggestion list.                                                                                                                                    |
+| `multiselect`                                                                 | `boolean`                                                       |                      | Lets more than one suggestion be chosen, and keeps the list open after each one.                                                                                                   |
+| `selectOnFocus`                                                               | `boolean`                                                       |                      | Mirrors the suggestion under the cursor into the text box as it is walked over. Not supported together with `multiselect`.                                                         |
+| `openOnFocus`                                                                 | `boolean`                                                       | `false`              | Opens the suggestion list as soon as the text box takes focus, instead of waiting for the first keystroke. Useful on touch devices, which have no arrow key to open the list with. |
+| `showTextualMultiselect`                                                      | `boolean`                                                       |                      | Lists every chosen suggestion in the text box, comma separated. Multiselect only.                                                                                                  |
+| `notFoundText`                                                                | `string`                                                        | `'No results found'` | The message shown in place of the list when nothing matches.                                                                                                                       |
+| `selectedOptions` _bindable_                                                  | `{ id: string; value: string }[]`                               | `[]`                 | The suggestions currently chosen.                                                                                                                                                  |
+| `suggestionChosen`                                                            | `(e: Event, selection: string) => void`                         |                      | Called when a suggestion is chosen: by clicking it, by pressing Enter on it, or by walking onto it while `selectOnFocus` is set.                                                   |
+| `querySubmitted`                                                              | `(e: MouseEvent` &#124; `KeyboardEvent, query: string) => void` |                      | Called when Enter is pressed with no suggestion under the cursor, or when the search button is clicked. This is where a fresh set of suggestions is fetched.                       |
+| `virtualizer`                                                                 | `AutoSuggestVirtualizer`                                        |                      | Bridge to a windowed list, for suggestion sets too long to render whole.                                                                                                           |
+| `maxItemsInView`                                                              | `number`                                                        | `6`                  | How many suggestions are visible before the list scrolls.                                                                                                                          |
+| `textBoxRef` _bindable_                                                       | `HTMLInputElement`                                              |                      | The DOM reference of the underlying text box input.                                                                                                                                |
+| `textBoxProps`                                                                | `TextBoxProps`                                                  |                      | The props to spread on the text box.                                                                                                                                               |
+| `flyoutRef` _bindable_                                                        | `HTMLElement`                                                   |                      | The DOM reference of the flyout holding the suggestion list.                                                                                                                       |
+| `flyoutProps`                                                                 | `FlyoutProps`                                                   |                      | The props to spread on the flyout.                                                                                                                                                 |
+| `listViewRef` _bindable_                                                      | `HTMLUListElement`                                              |                      | The DOM reference of the suggestion list.                                                                                                                                          |
+| `listViewProps`                                                               | `ListViewItemProps`                                             |                      | The props to spread on the suggestion list.                                                                                                                                        |
+| `type`, `placeholder`, `hideActionButtons`, `textChanged` from `TextBoxProps` |                                                                 |                      |                                                                                                                                                                                    |
+| Element Attributes (`div`)                                                    |                                                                 |                      |                                                                                                                                                                                    |
+
+<!-- /props:AutoSuggestBoxProps -->
+
+## AutoSuggestBoxOption Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:AutoSuggestOptionProps -->
+
+| Name                                            | Type            | Default | Description                                                                                                                   |
+| ----------------------------------------------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `value`                                         | `string`        |         | The value reported to the box when the suggestion is chosen. Falls back to the id.                                            |
+| `text`                                          | `string`        |         | The text shown in the box once the suggestion is chosen. Falls back to `value`.                                               |
+| `id`                                            | `string`        |         | The id of the option element, referenced by the box through `aria-activedescendant`. Falls back to a generated id.            |
+| `ref` _bindable_                                | `HTMLLIElement` |         | The DOM reference of the option element.                                                                                      |
+| `disabled`                                      | `boolean`       |         | Takes the suggestion out of reach: it is shown, but the cursor steps over it.                                                 |
+| `index`                                         | `number`        |         | Where the suggestion sits in the whole set. A windowed list needs the real index, not the position within the rendered slice. |
+| `ListViewItemProps<'li'>` without `as`, `value` |                 |         |                                                                                                                               |
+
+<!-- /props:AutoSuggestOptionProps -->

package/dist/components/auto-suggest-box/option.svelte

@@ -23,7 +23,8 @@
 	if (!context) throw new Error('AutoSuggestOption must be used within an AutoSuggestBox');
 
 	const { config, state: _state, methods } = context;
-	const { selectOnFocus, virtualized } = config;
+	const selectOnFocus = $derived(config.selectOnFocus);
+	const virtualized = $derived(config.virtualized);
 	const { setOption, deleteOption, toggleSelection } = methods;
 
 	let isVisible = $derived(

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

@@ -76,17 +76,23 @@ An avatar can have its color automatically picked based on the name prop, or idF
 
 ## Component Props
 
-| Name               | Type                     | Description                                                                                                                                                                              |
-| ------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`             | `string`                 | The name of the person or entity represented by this Avatar. Used to determine initials and for accessibility tools.                                                                     |
-| `image`            | `{ src: string }`        | The Avatar image. It can only be a single image URL.                                                                                                                                     |
-| `ref`              | `HTMLDivElement`         | The DOM reference of the avatar element.                                                                                                                                                 |
-| `size`             | `number`                 | Size of the avatar in pixels.                                                                                                                                                            |
-| `shape`            | `string`                 | The shape of the avatar. Possible values: 'circular', 'rounded', 'square'.                                                                                                               |
-| `color`            | `string`                 | The color used when displaying either an icon or initials. Supports system colors. Possible values: 'information', 'attention', 'warning', 'success', 'critical', 'colorful'.            |
-| `active`           | `string`                 | Optional activity indicator. Possible values: 'active', 'inactive'. Active decorates the avatar according to activeAppearance. Inactive reduces size and makes it partially transparent. |
-| `activeAppearance` | `string`                 | The appearance used when active is set to active. Possible values: 'ring', 'shadow', 'ring-shadow'.                                                                                      |
-| `initials`         | `string`                 | Custom initials. By default, initials are derived from the name prop using the getInitials function. They are displayed when there is no image.                                          |
-| `idForColor`       | `string`                 | A string used instead of the name to determine the color when color is set to colorful. Useful when a name is unavailable but another unique identifier exists.                          |
-| `icon`             | `Snippet` \| `Component` | The icon to display when the avatar does not have an image or initials.                                                                                                                  |
-| `badge`            | `object`                 | The badge to display as a status indicator. It can include a custom icon.                                                                                                                |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:AvatarProps -->
+
+| Name               | Type                                                                           | Default       | Description                                                                                                     |
+| ------------------ | ------------------------------------------------------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------- |
+| `name`             | `string`                                                                       | `'Avatar'`    | The name of the person or entity represented by this Avatar. This should always be provided if it is available. |
+| `image`            | `{ src: string; }`                                                             |               | The Avatar's image                                                                                              |
+| `ref` _bindable_   | `HTMLDivElement`                                                               |               | The DOM reference of the avatar element.                                                                        |
+| `size`             | `number`                                                                       | `48`          | Size of the avatar in pixels.                                                                                   |
+| `shape`            | `'circular'` &#124; `'rounded'` &#124; `'square'`                              | `'circular'`  | The avatar can have a circular, rounded or square shape.                                                        |
+| `color`            | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors) &#124; `'colorful'` | `'attention'` | The color when displaying either an icon or initials. For now it only supports system colors (plus colorful).   |
+| `active`           | `'active'` &#124; `'inactive'`                                                 |               | Optional activity indicator                                                                                     |
+| `activeAppearance` | `'ring'` &#124; `'shadow'` &#124; `'ring-shadow'`                              | `'ring'`      | The appearance when `active="active"`                                                                           |
+| `initials`         | `string`                                                                       | `name`        | Custom initials by default they will be derived from the `name` prop.                                           |
+| `idForColor`       | `string`                                                                       |               | Specify a string to be used instead of the name, to determine which color to use when color="colorful".         |
+| `icon`             | `Snippet` &#124; `Component`                                                   |               | Icon to be displayed when the avatar doesn't have an image or initials.                                         |
+| `badge`            | `BadgePresence`                                                                |               | The badge to display as a status indicator. (you can use with a custom icon)                                    |
+| HTML Attributes    |                                                                                |               |                                                                                                                 |
+
+<!-- /props:AvatarProps -->

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

@@ -79,16 +79,21 @@ Use the icon prop to render an icon inside the badge. You can pass the icon as a
 
 ## Badge Props
 
-| Name           | Type                     | Description                                                                                            |
-| -------------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
-| `size`         | `number`                 | The size of the badge in pixels.                                                                       |
-| `shape`        | `string`                 | The shape of the badge. Possible values: 'circular', 'rounded', 'square'.                              |
-| `appearance`   | `string`                 | The appearance of the badge. Possible values: 'filled', 'outline', 'ghost', 'tint'.                    |
-| `iconPosition` | `string`                 | The position of the icon inside the badge. Possible values: 'before', 'after'.                         |
-| `color`        | `string`                 | The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'. |
-| `icon`         | `Snippet` \| `Component` | The icon to display inside the badge.                                                                  |
-| `ref`          | `HTMLSpanElement`        | The DOM reference of the badge element.                                                                |
-| `children`     | `Snippet`                | The children elements to render inside the badge.                                                      |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BadgeProps -->
+
+| Name             | Type                                                           | Default         | Description                                                                               |
+| ---------------- | -------------------------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------- |
+| `size`           | `number`                                                       | `20`            | The size of the badge in pixels.                                                          |
+| `shape`          | `'circular'` &#124; `'rounded'` &#124; `'square'`              | `'circular'`    | The badge can have a circular, rounded or square shape.                                   |
+| `appearance`     | `'filled'` &#124; `'outline'` &#124; `'ghost'` &#124; `'tint'` | `'filled'`      | The badge can have its background and border styled for greater emphasis or to be subtle. |
+| `iconPosition`   | `'before'` &#124; `'after'`                                    | `'before'`      | The position of the icon relative to the badge content.                                   |
+| `color`          | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors)     | `'information'` | The color of the badge. For now it only supports system colors.                           |
+| `icon`           | `Snippet` &#124; `Component`                                   |                 | Icon to render inside the badge.                                                          |
+| `ref` _bindable_ | `HTMLSpanElement`                                              |                 | The DOM reference of the badge element.                                                   |
+| HTML Attributes  |                                                                |                 |                                                                                           |
+
+<!-- /props:BadgeProps -->
 
 ## BadgeIcon API
 
@@ -125,9 +130,17 @@ By default, Avatar uses an instance of BadgeIcon. As you can see, the first exam
 
 ### BadgeIcon Props
 
-| Name    | Type                     | Description                                                                                            |
-| ------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
-| `size`  | `number`                 | The size of the badge in pixels.                                                                       |
-| `color` | `string`                 | The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'. |
-| `icon`  | `Snippet` \| `Component` | The icon to display inside the badge.                                                                  |
-| `ref`   | `HTMLSpanElement`        | The DOM reference of the badge element.                                                                |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BadgeIconProps -->
+
+| Name             | Type                                                           | Default       | Description                                                                        |
+| ---------------- | -------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------- |
+| `status`         | [`Statuses`](https://fluentui-svelte.dev/docs/types/#statuses) | `'available'` | The presence status to display. It picks both the icon and the color of the badge. |
+| `outOfOffice`    | `boolean`                                                      | `false`       | Decorates the presence icon to signal that the person is out of office.            |
+| `size`           | `number`                                                       | `20`          | The size of the badge in pixels.                                                   |
+| `color`          | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors)     |               | Overrides the color the status would pick on its own.                              |
+| `icon`           | `Snippet` &#124; `Component`                                   |               | Custom icon, rendered instead of the one the status would pick on its own.         |
+| `ref` _bindable_ | `HTMLSpanElement`                                              |               | The DOM reference of the badge element.                                            |
+| HTML Attributes  |                                                                |               |                                                                                    |
+
+<!-- /props:BadgeIconProps -->

package/dist/components/button/button.svelte

@@ -21,10 +21,16 @@
 		...attributes
 	}: ButtonProps<T> = $props();
 
-	// svelte-ignore state_referenced_locally
-	if (as !== 'button' && as !== 'a' && as !== 'div') {
-		throw new Error(`Invalid 'as' prop value: ${as}. Expected 'button', 'a', or 'div'.`);
-	}
+	/**
+	 * The tag the invariant rules over. The markup renders it through here, so it is checked
+	 * during SSR and on every prop update rather than only once on mount.
+	 */
+	const _as = $derived.by(() => {
+		if (as !== 'button' && as !== 'a' && as !== 'div') {
+			throw new Error(`Invalid 'as' prop value: ${as}. Expected 'button', 'a', or 'div'.`);
+		}
+		return as;
+	});
 </script>
 
 <!-- 
@@ -42,7 +48,7 @@
     ```
  -->
 <svelte:element
-	this={as}
+	this={_as}
 	bind:this={ref}
 	disabled={disabled && as !== 'div' ? true : undefined}
 	aria-disabled={disabled && as !== 'div' ? true : undefined}

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

@@ -50,18 +50,23 @@ A button can have its content and borders styled for greater emphasis or to be s
 
 ## Component Props
 
-| Name                | Type                   | Description                                                                                       |
-| ------------------- | ---------------------- | ------------------------------------------------------------------------------------------------- |
-| `ref`               | `HTMLElement`          | The DOM reference of the button element.                                                          |
-| `as`                | `string`               | The DOM element to render. Possible values: 'button', 'a', 'div'.                                 |
-| `disabled`          | `boolean`              | Disables user interaction.                                                                        |
-| `shape`             | `string`               | The shape of the button or buttons. Possible values: 'circular', 'rounded', 'square'.             |
-| `appearance`        | `string`               | The appearance of the button or buttons. Possible values: 'accent', 'standard', 'subtle'.         |
-| `disabledFocusable` | `boolean`              | Allows the button to be focusable even when disabled.                                             |
-| `isMenuButton`      | `boolean`              | Adds an icon that indicates the button triggers a menu.                                           |
-| `indicatorPosition` | `'before' \| 'after'`  | The position of the icon. Possible values: 'before', 'after'.                                     |
-| `indicatorIcon`     | `Snippet \| Component` | The icon used as the menu indicator. Defaults to a chevron-down icon.                             |
-| Element Attributes  |                        | Based on the chosen component tag, you will get autocomplete for all HTML attributes of that tag. |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:ButtonProps -->
+
+| Name                | Type                                              | Default     | Description                                                                            |
+| ------------------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------- |
+| `ref` _bindable_    | `ButtonElementDOMType[T]`                         |             | The DOM reference of the button element.                                               |
+| `as`                | `'button'` &#124; `'a'` &#124; `'div'`            | `'button'`  | The DOM element to render.                                                             |
+| `disabled`          | `boolean`                                         |             | Disables the user interaction.                                                         |
+| `shape`             | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | A button can be rounded, circular, or square.                                          |
+| `appearance`        | `'accent'` &#124; `'standard'` &#124; `'subtle'`  | `'accent'`  | A button can have its content and borders styled for greater emphasis or to be subtle. |
+| `disabledFocusable` | `boolean`                                         | `false`     | When set, allows the button to be focusable even when it has been disabled.            |
+| `isMenuButton`      | `boolean`                                         |             | Add an icon that indicates the button triggers a menu.                                 |
+| `indicatorPosition` | `'before'` &#124; `'after'`                       | `'after'`   | Position of the menu indicator relative to the button content.                         |
+| `indicatorIcon`     | `Snippet` &#124; `Component`                      |             | The icon used to indicate the button triggers a menu.                                  |
+| HTML Attributes     |                                                   |             |                                                                                        |
+
+<!-- /props:ButtonProps -->
 
 ## Split Button
 
@@ -88,15 +93,19 @@ To add a menu to the split button, please refer to the Menu documentation for de
 
 ### Component Props
 
-| Name                      | Type                    | Description                                                                               |
-| ------------------------- | ----------------------- | ----------------------------------------------------------------------------------------- |
-| `wrapperRef`              | `HTMLDivElement`        | The DOM reference of the split button wrapper element.                                    |
-| `primaryButtonRef`        | `HTMLButtonElement`     | The DOM reference of the primary button element.                                          |
-| `primaryButtonProps`      | `ButtonProps<'button'>` | Additional props to pass to the primary button.                                           |
-| `menuTriggerRef`          | `HTMLButtonElement`     | The DOM reference of the menu trigger button element.                                     |
-| `menuTriggerProps`        | `ButtonProps<'button'>` | Additional props to pass to the menu trigger button.                                      |
-| `class`                   | `string`                | Additional classes to add to the split button wrapper element.                            |
-| `shape`                   | `string`                | The shape of the button or buttons. Possible values: 'circular', 'rounded', 'square'.     |
-| `appearance`              | `string`                | The appearance of the button or buttons. Possible values: 'accent', 'standard', 'subtle'. |
-| `disabled`                | `boolean`               | Disables user interaction.                                                                |
-| WrapperElement Attributes | HTMLElement Attributes  | All other attributes can be applied to the split button wrapper element.                  |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:SplitButtonProps -->
+
+| Name                          | Type                                              | Default     | Description                                                                                  |
+| ----------------------------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------- |
+| `appearance`                  | `'accent'` &#124; `'standard'` &#124; `'subtle'`  | `'accent'`  | Both buttons can have their content and borders styled for greater emphasis or to be subtle. |
+| `shape`                       | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | Both buttons can be rounded, circular, or square.                                            |
+| `disabled`                    | `boolean`                                         | `false`     | Disables the user interaction on both buttons.                                               |
+| `primaryButtonProps`          | `ButtonProps`                                     |             | The props to spread on the primary button.                                                   |
+| `menuTriggerProps`            | `ButtonProps`                                     |             | The props to spread on the button that opens the menu.                                       |
+| `wrapperRef` _bindable_       | `HTMLDivElement`                                  |             | The DOM reference of the element wrapping both buttons.                                      |
+| `primaryButtonRef` _bindable_ | `HTMLButtonElement`                               |             | The DOM reference of the primary button.                                                     |
+| `menuTriggerRef` _bindable_   | `HTMLButtonElement`                               |             | The DOM reference of the button that opens the menu.                                         |
+| HTML Attributes               |                                                   |             |                                                                                              |
+
+<!-- /props:SplitButtonProps -->

package/dist/components/calendar-date-picker/docs/llms.md

@@ -20,13 +20,23 @@ The `CalendarDatePicker` combines a button trigger with a `CalendarView` popup.
 
 ## Component Props
 
-| Name               | Type                             | Default                                                 | Description                                               |
-| ------------------ | -------------------------------- | ------------------------------------------------------- | --------------------------------------------------------- |
-| `ref`              | bindable `HTMLDivElement`        |                                                         | The DOM reference of the picker element.                  |
-| `value`            | bindable `Date \| null`          | `null`                                                  | The selected date.                                        |
-| `format`           | `Intl.DateTimeFormatOptions`     | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date shown on the trigger. |
-| `calendarPosition` | `Partial<ComputePositionConfig>` |                                                         | The floating UI configuration object of the popup.        |
-| `onChange`         | `(event, value) => void`         |                                                         | Called whenever the selected date changes.                |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CalendarDatePickerProps -->
+
+| Name                                                                                             | Type                                                | Default                                                 | Description                                                                                   |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                                                                 | `HTMLDivElement`                                    |                                                         | The DOM reference of the picker element.                                                      |
+| `value` _bindable_                                                                               | `Date` &#124; `null`                                | `null`                                                  | The selected date.                                                                            |
+| `format`                                                                                         | `Intl.DateTimeFormatOptions`                        | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date rendered on the trigger.                                  |
+| `calendarPosition`                                                                               | `Partial<ComputePositionConfig>`                    |                                                         | The floating UI configuration object of the calendar popup. Keys left out keep their default. |
+| `onChange`                                                                                       | `(event: Event, value: Date` &#124; `null) => void` |                                                         | Called whenever the selected date changes.                                                    |
+| `popupLabel`                                                                                     | `string`                                            | `'Choose a date'`                                       | The accessible name of the calendar popup, which is announced as a dialog.                    |
+| `triggerRef` _bindable_                                                                          | `HTMLButtonElement`                                 |                                                         | The DOM reference of the trigger button.                                                      |
+| `popupRef` _bindable_                                                                            | `HTMLDivElement`                                    |                                                         | The DOM reference of the calendar popup.                                                      |
+| `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate`, `weekStart` from `CalendarViewProps` |                                                     |                                                         |                                                                                               |
+| Element Attributes (`div`)                                                                       |                                                     |                                                         |                                                                                               |
+
+<!-- /props:CalendarDatePickerProps -->
 
 `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate` and `weekStart` are forwarded
 straight to the underlying `CalendarView`. All `div` HTML attributes are forwarded to the

package/dist/components/calendar-view/calendar-view-header.svelte

@@ -7,9 +7,9 @@
 		throw new Error('CalendarViewHeader must be used within a CalendarView');
 	}
 
-	let locale = context.config.locale;
+	let locale = $derived(context.config.locale);
 
-	let weekStart = context.config.weekStart;
+	let weekStart = $derived(context.config.weekStart);
 </script>
 
 <!--

package/dist/components/calendar-view/calendar-view-header.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CalendarViewHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CalendarViewHeader = InstanceType<typeof CalendarViewHeader>;
+declare const CalendarViewHeader: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarViewHeader = ReturnType<typeof CalendarViewHeader>;
 export default CalendarViewHeader;

package/dist/components/calendar-view/calendar-view-months.svelte

@@ -22,7 +22,7 @@
 
 	const { selectMonth, updatePage } = CalendarContext.methods;
 
-	let { locale, minDate, headers, maxDate, selectionMode } = CalendarContext.config;
+	let { locale, minDate, headers, maxDate, selectionMode } = $derived(CalendarContext.config);
 
 	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
 

package/dist/components/calendar-view/calendar-view-years.svelte

@@ -21,7 +21,7 @@
 
 	const { selectYear, updatePage } = CalendarContext.methods;
 
-	let { locale, minDate, maxDate, selectionMode } = CalendarContext.config;
+	let { locale, minDate, maxDate, selectionMode } = $derived(CalendarContext.config);
 
 	let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);