fluentui-svelte 0.1.2 → 0.2.1

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

@@ -64,15 +64,21 @@ The `value` prop sets the value of the checkbox input. It is useful when the che
 
 ## Checkbox Props
 
-| Name                | Type                                          | Description                                                                                    |
-| ------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| `wrapperAs`         | `'div' \| 'label'`                            | The element the wrapper renders as. Set to `label` to show a visible label. Defaults to `div`. |
-| `children`          | `Snippet`                                     | Label content rendered next to the input. Only allowed when `wrapperAs="label"`.               |
-| `checked`           | `boolean`                                     | Determines if the checkbox is checked.                                                         |
-| `indeterminate`     | `boolean`                                     | Sets the checkbox to an indeterminate state.                                                   |
-| `disabled`          | `boolean`                                     | Disables the checkbox, preventing user interaction.                                            |
-| `value`             | `string`                                      | The value of the checkbox input, useful for form submissions.                                  |
-| `wrapperAttributes` | `object`                                      | Additional attributes for the wrapper element.                                                 |
-| `ref`               | bindable `HTMLInputElement`                   | The DOM reference of the checkbox input element.                                               |
-| `wrapperRef`        | bindable `HTMLDivElement \| HTMLLabelElement` | The DOM reference of the checkbox wrapper element.                                             |
-| Input Attributes    |                                               | Additional attributes for the checkbox input element.                                          |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CheckboxProps -->
+
+| Name                                            | Type                                       | Default   | Description                                                                                                                                                     |
+| ----------------------------------------------- | ------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                | `HTMLInputElement`                         |           | The DOM reference of the checkbox element.                                                                                                                      |
+| `wrapperAs`                                     | `'div'` &#124; `'label'`                   | `'label'` | The DOM element used to wrap the checkbox. `label` associates the children with the input; switch to `div` when the field is wrapped in a `<Label>` of its own. |
+| `wrapperRef` _bindable_                         | `HTMLDivElement` &#124; `HTMLLabelElement` |           | The DOM reference of the checkbox wrapper element.                                                                                                              |
+| `wrapperAttributes`                             | `PolymorphicProps`                         |           | The attributes to spread on the wrapper element.                                                                                                                |
+| `indeterminate` _bindable_                      | `boolean`                                  |           | Renders the checkbox in its mixed state, neither checked nor unchecked.                                                                                         |
+| `name`                                          | `string` &#124; `null`                     | `id`      | The name submitted with the form. Falls back to the id of the checkbox.                                                                                         |
+| `group`                                         | `string` &#124; `null`                     |           | The value of the group of checkboxes this input belongs to.                                                                                                     |
+| `checked` _bindable_                            | `boolean`                                  |           | Whether the checkbox is checked.                                                                                                                                |
+| `disabled`                                      | `boolean`                                  |           | Disables the user interaction.                                                                                                                                  |
+| `children`                                      | `Snippet`                                  |           | The content of the label. Only rendered when wrapperAs is set to label.                                                                                         |
+| `HTMLInputAttributes` without `on:`, `children` |                                            |           |                                                                                                                                                                 |
+
+<!-- /props:CheckboxProps -->

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

@@ -35,18 +35,28 @@ Use `hideDays`, `hideMonths`, or `hideYears` to hide individual selector columns
 
 ## Component Props
 
-| Name             | Type                           | Description                                                                   |
-| ---------------- | ------------------------------ | ----------------------------------------------------------------------------- |
-| `value`          | bindable `string`              | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`). |
-| `format`         | `'MM/dd/yyyy' \| 'dd/MM/yyyy'` | The display format of the date. Default: `'dd/MM/yyyy'`.                      |
-| `open`           | bindable `boolean`             | Whether the picker flyout is open.                                            |
-| `hideYears`      | `boolean`                      | Hide the year selector column.                                                |
-| `hideMonths`     | `boolean`                      | Hide the month selector column.                                               |
-| `hideDays`       | `boolean`                      | Hide the day selector column.                                                 |
-| `minYear`        | `number`                       | Earliest selectable year. Default: current year − 100.                        |
-| `maxYear`        | `number`                       | Latest selectable year. Default: current year.                                |
-| `disabledDates`  | `Date[]`                       | Specific days (year-month-day) that cannot be selected.                       |
-| `disabledMonths` | `Date[]`                       | Specific months (by month + year) that cannot be selected.                    |
-| `disabledYears`  | `Date[]`                       | Specific years (by year) that cannot be selected.                             |
-| `element`        | bindable `HTMLElement`         | The DOM reference of the date picker root element.                            |
-| `inputElement`   | bindable `HTMLInputElement`    | The DOM reference of the underlying input element.                            |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DatePickerProps -->
+
+| Name                          | Type                                 | Default           | Description                                                                                         |
+| ----------------------------- | ------------------------------------ | ----------------- | --------------------------------------------------------------------------------------------------- |
+| `value` _bindable_            | `string`                             | `''`              | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`).                       |
+| `format`                      | `'MM/dd/yyyy'` &#124; `'dd/MM/yyyy'` | `'dd/MM/yyyy'`    | The order the three columns are laid out in.                                                        |
+| `open` _bindable_             | `boolean`                            | `false`           | Controls the open state of the picker.                                                              |
+| `hideYears`                   | `boolean`                            | `false`           | Removes the year column.                                                                            |
+| `hideMonths`                  | `boolean`                            | `false`           | Removes the month column.                                                                           |
+| `hideDays`                    | `boolean`                            | `false`           | Removes the day column.                                                                             |
+| `minYear`                     | `number`                             | `Current - 100`   | The first year offered by the year column.                                                          |
+| `maxYear`                     | `number`                             | `Current + 100`   | The last year offered by the year column.                                                           |
+| `disabledDates`               | `Date[]`                             | `[]`              | Specific days (year-month-day) that cannot be selected.                                             |
+| `disabledMonths`              | `Date[]`                             | `[]`              | Specific months (by month + year) that cannot be selected.                                          |
+| `disabledYears`               | `Date[]`                             | `[]`              | Specific years (by year) that cannot be selected.                                                   |
+| `ref` _bindable_              | `HTMLButtonElement`                  |                   | The DOM reference of the trigger button.                                                            |
+| `wrapperRef` _bindable_       | `HTMLDivElement`                     |                   | The DOM reference of the element wrapping the trigger and its input.                                |
+| `wrapperAttributes`           | `HTMLAttributes`                     |                   | The attributes to spread on the wrapper element.                                                    |
+| `inputElement` _bindable_     | `HTMLInputElement`                   |                   | The DOM reference of the underlying input element.                                                  |
+| `inputProps`                  | `HTMLInputAttributes`                |                   | HTML attributes for the underlying input element. Give it a `name` to submit the value with a form. |
+| `popupLabel`                  | `string`                             | `'Choose a date'` | The accessible name of the popup, which is announced as a dialog.                                   |
+| Element Attributes (`button`) |                                      |                   |                                                                                                     |
+
+<!-- /props:DatePickerProps -->

package/dist/components/dialog/dialog-surface.svelte

@@ -17,14 +17,14 @@
 
 	const { closeDialog } = methods;
 
-	const { type } = config;
-
-	if (type !== 'alert') {
-		onClickOutside(
-			() => ref,
-			() => closeDialog()
-		);
-	}
+	// Registered unconditionally and guarded from inside, so switching `type` after mount is honored.
+	onClickOutside(
+		() => ref,
+		() => {
+			if (config.type === 'alert') return;
+			closeDialog();
+		}
+	);
 
 	$effect(() => {
 		if (!ref) return;

package/dist/components/dialog/dialog.svelte

@@ -8,57 +8,59 @@
 
 	let titleId: string | undefined = $state();
 
-	const config: DialogContext['config'] = $derived({
-		type
-	});
-
-	const _state: DialogContext['state'] = {
-		get open() {
-			return open;
-		},
-		get dialogRef() {
-			return dialogRef;
-		},
-		set dialogRef(v) {
-			dialogRef = v;
-		},
-		get titleId() {
-			return titleId;
+	const context: DialogContext = $state({
+		config: {
+			get type() {
+				return type;
+			}
 		},
-		set titleId(v) {
-			titleId = v;
-		}
-	};
-
-	const methods: DialogContext['methods'] = $derived({
-		openDialog: () => {
-			if (type !== 'non-modal') {
-				dialogRef?.showModal();
-			} else {
-				open = true;
+		state: {
+			get open() {
+				return open;
+			},
+			get dialogRef() {
+				return dialogRef;
+			},
+			set dialogRef(v) {
+				dialogRef = v;
+			},
+			get titleId() {
+				return titleId;
+			},
+			set titleId(v) {
+				titleId = v;
 			}
-			onOpenChange?.(true);
 		},
-		closeDialog: () => {
-			if (type !== 'non-modal') {
-				dialogRef?.close();
-			} else {
-				open = false;
+		events: null,
+		methods: {
+			openDialog: () => {
+				if (type !== 'non-modal') {
+					dialogRef?.showModal();
+				} else {
+					open = true;
+				}
+				onOpenChange?.(true);
+			},
+			closeDialog: () => {
+				if (type !== 'non-modal') {
+					dialogRef?.close();
+				} else {
+					open = false;
+				}
+				onOpenChange?.(false);
 			}
-			onOpenChange?.(false);
 		}
 	});
 
+	setDialogContext(context);
+
 	export function openDialog() {
-		methods.openDialog();
+		context.methods.openDialog();
 	}
 
 	export function closeDialog() {
-		methods.closeDialog();
+		context.methods.closeDialog();
 	}
-
-	// svelte-ignore state_referenced_locally
-	setDialogContext({ config, state: _state, events: null, methods });
 </script>
 
 {@render children?.()}

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

@@ -80,52 +80,77 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 
 ## Dialog Props
 
-| Name           | Type                                | Description                                        |
-| -------------- | ----------------------------------- | -------------------------------------------------- |
-| `type`         | `'modal' \| 'non-modal' \| 'alert'` | The behavior type of the dialog. Default: `modal`. |
-| `open`         | bindable `boolean`                  | Whether the dialog is open.                        |
-| `onOpenChange` | `(open: boolean) => void`           | Callback fired when the dialog opens or closes.    |
-| `children`     | `Snippet`                           | The dialog sub-components to render.               |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DialogProps -->
+
+| Name              | Type                                            | Default   | Description                                       |
+| ----------------- | ----------------------------------------------- | --------- | ------------------------------------------------- |
+| `type`            | `'modal'` &#124; `'non-modal'` &#124; `'alert'` | `'modal'` | How the dialog behaves once open.                 |
+| `open` _bindable_ | `boolean`                                       |           | Controls the open state of the dialog.            |
+| `onOpenChange`    | `(open: boolean) => void`                       |           | Called whenever the dialog opens or closes.       |
+| `children`        | `Snippet`                                       |           | The parts of the dialog: a trigger and a surface. |
+
+<!-- /props:DialogProps -->
 
 ## DialogTrigger Props
 
-| Name           | Type                    | Description                              |
-| -------------- | ----------------------- | ---------------------------------------- |
-| `ref`          | `HTMLButtonElement`     | The DOM reference of the trigger button. |
-| `children`     | `Snippet`               | The content of the trigger button.       |
-| ...ButtonProps | `ButtonProps<'button'>` | Inherits all `Button` props.             |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DialogTriggerProps -->
+
+| Name                    | Type                | Default | Description                               |
+| ----------------------- | ------------------- | ------- | ----------------------------------------- |
+| `ref`                   | `HTMLButtonElement` |         | The DOM reference of the trigger element. |
+| `ButtonProps<'button'>` |                     |         |                                           |
+
+<!-- /props:DialogTriggerProps -->
 
 ## DialogSurface Props
 
-| Name          | Type                                | Description                                      |
-| ------------- | ----------------------------------- | ------------------------------------------------ |
-| `ref`         | bindable `HTMLDialogElement`        | The DOM reference of the dialog element.         |
-| `children`    | `Snippet`                           | The content to render inside the dialog surface. |
-| ...Attributes | `HTMLAttributes<HTMLDialogElement>` | All native `<dialog>` attributes are forwarded.  |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DialogSurfaceProps -->
+
+| Name                          | Type                | Default | Description                              |
+| ----------------------------- | ------------------- | ------- | ---------------------------------------- |
+| `ref` _bindable_              | `HTMLDialogElement` |         | The DOM reference of the dialog element. |
+| Element Attributes (`dialog`) |                     |         |                                          |
+
+<!-- /props:DialogSurfaceProps -->
 
 ## DialogTitle Props
 
-| Name          | Type                   | Description                                                   |
-| ------------- | ---------------------- | ------------------------------------------------------------- |
-| `as`          | `'div' \| 'h1'`–`'h6'` | The element to render the title as. Default: `h3`.            |
-| `ref`         | bindable element       | The DOM reference of the title element.                       |
-| `children`    | `Snippet`              | The title content.                                            |
-| ...Attributes | Polymorphic            | All HTML attributes of the chosen `as` element are forwarded. |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DialogTitleProps -->
+
+| Name             | Type                                         | Default | Description                              |
+| ---------------- | -------------------------------------------- | ------- | ---------------------------------------- |
+| `ref` _bindable_ | `HTMLDivElement` &#124; `HTMLHeadingElement` |         | The DOM reference of the title element.  |
+| `as`             | `DialogTitleTag`                             | `'h3'`  | The HTML element to render the title as. |
+| HTML Attributes  |                                              |         |                                          |
+
+<!-- /props:DialogTitleProps -->
 
 ## DialogContent Props
 
-| Name          | Type                             | Description                                   |
-| ------------- | -------------------------------- | --------------------------------------------- |
-| `ref`         | `HTMLDivElement`                 | The DOM reference of the content element.     |
-| `children`    | `Snippet`                        | The content to render inside the dialog body. |
-| ...Attributes | `HTMLAttributes<HTMLDivElement>` | All native `<div>` attributes are forwarded.  |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DialogContentProps -->
+
+| Name                       | Type             | Default | Description                               |
+| -------------------------- | ---------------- | ------- | ----------------------------------------- |
+| `ref`                      | `HTMLDivElement` |         | The DOM reference of the content element. |
+| Element Attributes (`div`) |                  |         |                                           |
+
+<!-- /props:DialogContentProps -->
 
 ## DialogActions Props
 
-| Name          | Type                             | Description                                             |
-| ------------- | -------------------------------- | ------------------------------------------------------- |
-| `ref`         | bindable `HTMLDivElement`        | The DOM reference of the actions element.               |
-| `position`    | `'start' \| 'center' \| 'end'`   | Horizontal alignment of the actions. Default: `end`.    |
-| `fluid`       | `boolean`                        | Whether the actions container uses a full-width layout. |
-| `children`    | `Snippet`                        | The action elements to render, typically buttons.       |
-| ...Attributes | `HTMLAttributes<HTMLDivElement>` | All native `<div>` attributes are forwarded.            |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DialogActionsProps -->
+
+| Name                       | Type                                       | Default | Description                                                 |
+| -------------------------- | ------------------------------------------ | ------- | ----------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement`                           |         | The DOM reference of the actions element.                   |
+| `fluid`                    | `boolean`                                  |         | Stretches every action to share the available width evenly. |
+| `position`                 | `'start'` &#124; `'center'` &#124; `'end'` | `'end'` | Where the actions sit along the main axis.                  |
+| Element Attributes (`div`) |                                            |         |                                                             |
+
+<!-- /props:DialogActionsProps -->

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

@@ -72,12 +72,17 @@ The `as` prop lets you change the underlying HTML element rendered by the divide
 
 ## Divider Props
 
-| Name           | Type                                                 | Description                                                                                        |
-| -------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| `as`           | `string`                                             | The HTML element to render the divider as. Possible values: `'div'`, `'hr'`, `'span'`.             |
-| `vertical`     | `boolean`                                            | Whether the divider is rendered vertically instead of horizontally.                                |
-| `alignContent` | `string`                                             | The alignment of the content within the divider. Possible values: `'start'`, `'center'`, `'end'`.  |
-| `appearance`   | `string`                                             | The appearance of the divider. Possible values: `'default'`, `'accent'`, `'standard'`, `'subtle'`. |
-| `inset`        | `boolean`                                            | Whether the divider has inline padding applied.                                                    |
-| `ref`          | `HTMLDivElement \| HTMLHRElement \| HTMLSpanElement` | The DOM reference of the divider element, its type depends on the `as` prop.                       |
-| `children`     | `Snippet`                                            | The content to render as a label within the divider.                                               |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DividerProps -->
+
+| Name             | Type                                                                | Default     | Description                                                          |
+| ---------------- | ------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------- |
+| `as`             | `'div'` &#124; `'hr'` &#124; `'span'`                               | `'div'`     | The HTML element to render the divider as.                           |
+| `ref` _bindable_ | `HTMLDivElement` &#124; `HTMLHRElement` &#124; `HTMLSpanElement`    |             | The DOM reference of the divider element.                            |
+| `vertical`       | `boolean`                                                           |             | Renders the divider vertically instead of horizontally.              |
+| `alignContent`   | `'start'` &#124; `'center'` &#124; `'end'`                          | `'center'`  | Where the content of the divider sits along the line.                |
+| `inset`          | `boolean`                                                           |             | Removes the padding around the divider line.                         |
+| `appearance`     | `'accent'` &#124; `'standard'` &#124; `'subtle'` &#124; `'default'` | `'default'` | The divider line can be styled for greater emphasis or to be subtle. |
+| HTML Attributes  |                                                                     |             |                                                                      |
+
+<!-- /props:DividerProps -->

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

@@ -50,21 +50,40 @@ Set the `multiple` prop to allow selecting more than one option.
 
 ## Component Props
 
-| Name              | Type                          | Description                                                           |
-| ----------------- | ----------------------------- | --------------------------------------------------------------------- |
-| `value`           | bindable `string \| string[]` | The selected value, or an array of values when `multiple` is set.     |
-| `multiple`        | `boolean`                     | Allow selecting more than one option.                                 |
-| `placeholder`     | `string`                      | Text shown when no option is selected. Default: `'Select an option'`. |
-| `disabled`        | `boolean`                     | Disables user interaction.                                            |
-| `flyoutMaxHeight` | `number`                      | Maximum height of the options flyout before it scrolls.               |
-| `name`            | `string`                      | Name of the underlying form control.                                  |
-| `ref`             | bindable `HTMLElement`        | The DOM reference of the dropdown element.                            |
-| `children`        | `Snippet`                     | The `DropdownOption` items to render.                                 |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DropdownProps -->
+
+| Name                                                 | Type                       | Default              | Description                                                             |
+| ---------------------------------------------------- | -------------------------- | -------------------- | ----------------------------------------------------------------------- |
+| `value` _bindable_                                   | `string` &#124; `string[]` | `multiple ? [] : ''` | The selected value. An array of values when `multiple` is set.          |
+| `multiple`                                           | `boolean`                  |                      | Allows more than one option to be selected at a time.                   |
+| `placeholder`                                        | `string`                   | `'Select an option'` | The text shown by the trigger while no option is selected.              |
+| `disabled`                                           | `boolean`                  |                      | Disables the user interaction.                                          |
+| `name`                                               | `string` &#124; `null`     | `id`                 | The name submitted with the form. Falls back to the id of the dropdown. |
+| `ref` _bindable_                                     | `HTMLDivElement`           |                      | The DOM reference of the dropdown element.                              |
+| `onclick`                                            | `(e: MouseEvent) => void`  |                      | Called when the dropdown is clicked.                                    |
+| `wrapperProps`                                       | `HTMLAttributes`           |                      | The attributes to spread on the wrapper element.                        |
+| `buttonRef` _bindable_                               | `HTMLButtonElement`        |                      | The DOM reference of the button that opens the dropdown.                |
+| `buttonProps`                                        | `HTMLButtonAttributes`     |                      | The attributes to spread on the button that opens the dropdown.         |
+| `inputRef`                                           | `HTMLInputElement`         |                      | The DOM reference of the hidden input holding the value.                |
+| `flyoutRef` _bindable_                               | `HTMLDivElement`           |                      | The DOM reference of the flyout element.                                |
+| `flyoutProps`                                        | `FlyoutProps`              |                      | The props to spread on the flyout.                                      |
+| `flyoutMaxHeight`                                    | `string`                   |                      | The maximum height of the flyout, as a CSS length.                      |
+| `listboxRef` _bindable_                              | `HTMLUListElement`         |                      | The DOM reference of the listbox element.                               |
+| `listboxProps`                                       | `ListViewProps`            |                      | The props to spread on the listbox rendered inside the flyout.          |
+| `DropdownMultipleValue` &#124; `DropdownSingleValue` |                            |                      |                                                                         |
+| `HTMLInputAttributes` without `value`, `onclick`     |                            |                      |                                                                         |
+
+<!-- /props:DropdownProps -->
 
 ## DropdownOption Props
 
-| Name       | Type      | Description                                                                    |
-| ---------- | --------- | ------------------------------------------------------------------------------ |
-| `value`    | `string`  | The value of the option, used for selection.                                   |
-| `text`     | `string`  | Plain-text label used to display the selection when the flyout is closed.      |
-| `children` | `Snippet` | The content rendered for the option (can be rich content such as a `Persona`). |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DropdownOptionProps -->
+
+| Name                      | Type     | Default | Description                                                                                      |
+| ------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------ |
+| `text`                    | `string` |         | The text shown by the dropdown once the option is selected. Falls back to the rendered children. |
+| `ListViewItemProps<'li'>` |          |         |                                                                                                  |
+
+<!-- /props:DropdownOptionProps -->

package/dist/components/dropdown/dropdown.svelte

@@ -2,7 +2,7 @@
 	import { onClickOutside } from 'runed';
 	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
 	import { Flyout, ListView, ListViewItem } from '../../index.js';
-	import type { DropdownProps } from './types.js';
+	import type { DropdownContext, DropdownProps } from './types.js';
 	import { tick } from 'svelte';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { setTabspotAttributes, unsetTabspotSection } from 'tabspot';
@@ -45,7 +45,7 @@
 	// for every value here to keep rendering the selection once the list is closed.
 	const optionLabels = new SvelteMap<string, string>();
 
-	setDropdownContext({
+	const context: DropdownContext = $state({
 		config: null,
 		state: null,
 		events: null,
@@ -54,6 +54,8 @@
 		}
 	});
 
+	setDropdownContext(context);
+
 	const selectedValues = $derived(multiple ? (Array.isArray(value) ? value : []) : value ? [value as string] : []);
 
 	const hasValue = $derived(selectedValues.length > 0);

package/dist/components/dropdown-select/docs/llms.md

@@ -53,20 +53,34 @@ Set the `multiple` prop to allow selecting more than one option.
 
 ## Component Props
 
-| Name              | Type                          | Description                                                                 |
-| ----------------- | ----------------------------- | --------------------------------------------------------------------------- |
-| `value`           | bindable `string \| string[]` | The selected value, or an array of values when `multiple` is set.           |
-| `multiple`        | `boolean`                     | Allow selecting more than one option.                                       |
-| `placeholder`     | `string`                      | Text shown when no option is selected. Default: `'Native Select Dropdown'`. |
-| `hidePlaceholder` | `boolean`                     | Hides the placeholder option.                                               |
-| `ref`             | bindable `HTMLSelectElement`  | The DOM reference of the underlying `<select>` element.                     |
-| `wrapperRef`      | bindable `HTMLDivElement`     | The DOM reference of the wrapper element.                                   |
-| `children`        | `Snippet`                     | The `DropdownSelectOption` items to render.                                 |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DropdownSelectProps -->
+
+| Name                          | Type                       | Default                    | Description                                                            |
+| ----------------------------- | -------------------------- | -------------------------- | ---------------------------------------------------------------------- |
+| `value` _bindable_            | `string` &#124; `string[]` | `multiple ? [] : ''`       | The selected value. An array of values when `multiple` is set.         |
+| `multiple`                    | `boolean`                  |                            | Allows more than one option to be selected at a time.                  |
+| `placeholder`                 | `string`                   | `'Native Select Dropdown'` | The text shown while no option is selected.                            |
+| `hidePlaceholder`             | `boolean`                  |                            | Keeps the placeholder out of the option list once a value is selected. |
+| `ref` _bindable_              | `HTMLSelectElement`        |                            | The DOM reference of the select element.                               |
+| `wrapperRef` _bindable_       | `HTMLDivElement`           |                            | The DOM reference of the wrapper element.                              |
+| `wrapperProps`                | `HTMLAttributes`           |                            | The attributes to spread on the wrapper element.                       |
+| Element Attributes (`select`) |                            |                            |                                                                        |
+
+<!-- /props:DropdownSelectProps -->
 
 ## DropdownSelectOption Props
 
-| Name       | Type      | Description                                                             |
-| ---------- | --------- | ----------------------------------------------------------------------- |
-| `value`    | `string`  | The value of the option, used for selection.                            |
-| `text`     | `string`  | Plain-text label used to display the selection when the list is closed. |
-| `children` | `Snippet` | The content rendered for the option.                                    |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:DropdownSelectOptionProps -->
+
+| Name                          | Type          | Default | Description                                                   |
+| ----------------------------- | ------------- | ------- | ------------------------------------------------------------- |
+| `value`                       | `string`      |         | The value reported to the select when the option is picked.   |
+| `text`                        | `string`      |         | The label of the option. Falls back to the rendered children. |
+| `disabled`                    | `boolean`     |         | Disables the user interaction.                                |
+| `ref` _bindable_              | `HTMLElement` |         | The DOM reference of the option element.                      |
+| `children`                    | `Snippet`     |         | The content of the option, used when no `text` is given.      |
+| Element Attributes (`option`) |               |         |                                                               |
+
+<!-- /props:DropdownSelectOptionProps -->

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

@@ -74,15 +74,22 @@ You can easily add an icon to an expander's header using the `Icon` prop. You ca
 
 ## Component Props
 
-| Name          | Type                   | Description                                                               |
-| ------------- | ---------------------- | ------------------------------------------------------------------------- |
-| `header`      | `string`               | Label of the expander.                                                    |
-| `description` | `string`               | Description to render below the header.                                   |
-| `direction`   | `string`               | The opening direction of the expander. Possible values: `'down'`, `'up'`. |
-| `justify`     | `boolean`              | Whether the expander is justified to the full width of the container.     |
-| `disabled`    | `boolean`              | Disables the user interaction.                                            |
-| `animation`   | `object`               | The animation configuration.                                              |
-| `expanded`    | `boolean`              | Controls the opening state of the expander.                               |
-| `element`     | `HTMLDetailsElement`   | The DOM reference of the expander element.                                |
-| `Icon`        | `Snippet \| Component` | The icon to display before the label.                                     |
-| `children`    | `Snippet`              | The children elements to render inside the expander.                      |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:ExpanderProps -->
+
+| Name                           | Type                                    | Default  | Description                                                               |
+| ------------------------------ | --------------------------------------- | -------- | ------------------------------------------------------------------------- |
+| `header`                       | `string`                                |          | Label of the expander.                                                    |
+| `description`                  | `string`                                |          | Description to render below the header.                                   |
+| `direction`                    | `'down'` &#124; `'up'`                  | `'down'` | Set the opening direction of the expander.                                |
+| `justify`                      | `boolean`                               | `false`  | The expander is justified to the full width of the container.             |
+| `disabled`                     | `boolean`                               | `false`  | Disables the user interaction.                                            |
+| `animation`                    | `{ duration: number; easing: string; }` |          | The animation configuration. Reduced motion is always honoured over this. |
+| `expanded` _bindable_          | `boolean`                               | `false`  | Control the opening state of the expander.                                |
+| `ref` _bindable_               | `HTMLDetailsElement`                    |          | The DOM reference of the expander element.                                |
+| `Icon`                         | `Snippet` &#124; `Component`            |          | The icon to display before the label.                                     |
+| `summaryRef` _bindable_        | `HTMLElement`                           |          | The DOM reference of the summary element.                                 |
+| `summaryProps`                 | `HTMLAttributes`                        |          | The props to spread on the summary element.                               |
+| Element Attributes (`details`) |                                         |          |                                                                           |
+
+<!-- /props:ExpanderProps -->

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

@@ -18,14 +18,20 @@ The Flyout.
 
 ## Component Props
 
-| Name                | Type                                              | Description                                                     |
-| ------------------- | ------------------------------------------------- | --------------------------------------------------------------- |
-| `ref`               | Bindable `HTMLElement`                            | The DOM reference to the flyout element.                        |
-| `children`          | `Snippet`                                         | The content to be displayed inside the flyout.                  |
-| `floating`          | `boolean`                                         | Whether to use Floating UI for positioning. Default: false.     |
-| `reference`         | `HTMLElement`                                     | The reference element for Floating UI.                          |
-| `placement`         | `Placement`                                       | The placement for Floating UI positioning. Default: 'bottom'.   |
-| `onPlacementChange` | `(placement: Placement) => void`                  | A callback that is called when the placement changes.           |
-| `roundCorners`      | `'all' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Which corners to round. Default: 'all'.                         |
-| `offset`            | `number`                                          | The offset for Floating UI positioning. Default: 8.             |
-| Element Attributes  |                                                   | All other attributes that can be applied to the flyout element. |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:FlyoutProps -->
+
+| Name                       | Type                                                                      | Default    | Description                                                                     |
+| -------------------------- | ------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLElement`                                                             |            | The DOM reference of the flyout element.                                        |
+| `children`                 | `Snippet`                                                                 |            | The content of the flyout.                                                      |
+| `floating`                 | `boolean`                                                                 | `false`    | Positions the flyout with floating-ui instead of leaving it in the normal flow. |
+| `reference`                | `HTMLElement`                                                             |            | The element the flyout is positioned against when `floating` is set.            |
+| `placement`                | `Placement`                                                               | `'bottom'` | Where the flyout is placed relative to its reference.                           |
+| `onPlacementChange`        | `(placement: Placement) => void`                                          |            | Called whenever floating-ui settles on a different placement.                   |
+| `roundCorners`             | `'all'` &#124; `'top'` &#124; `'bottom'` &#124; `'left'` &#124; `'right'` | `'all'`    | Which corners of the flyout are rounded.                                        |
+| `offset`                   | `number`                                                                  | `8`        | The distance in pixels between the flyout and its reference.                    |
+| `placementConfig`          | `AutoPlacementOptions`                                                    |            | The auto placement configuration handed over to floating-ui.                    |
+| Element Attributes (`div`) |                                                                           |            |                                                                                 |
+
+<!-- /props:FlyoutProps -->