fluentui-svelte 0.2.0 → 0.3.0

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

@@ -31,8 +31,8 @@
 	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
 	import type {
 		AnimationDirection,
+		CalendarViewContext,
 		CalendarViewProps,
-		CalendarViewState,
 		DateComparisonPrecision,
 		View
 	} from './types.js';
@@ -197,59 +197,70 @@
 		updateView(e, 'months', year);
 	}
 
-	const CALENDAR_STATE: CalendarViewState = {
-		get value() {
-			return value;
-		},
-		set value(v) {
-			value = v;
-		},
-		get range() {
-			return range;
-		},
-		set range(v) {
-			range = v;
-		},
-		get view() {
-			return view;
-		},
-		set view(v) {
-			view = v;
-		},
-		get page() {
-			return page;
-		},
-		set page(v) {
-			page = v;
-		},
-		get viewAnimationDirection() {
-			return viewAnimationDirection;
-		},
-		set viewAnimationDirection(v) {
-			viewAnimationDirection = v;
-		},
-		get pageAnimationDirection() {
-			return pageAnimationDirection;
-		},
-		set pageAnimationDirection(v) {
-			pageAnimationDirection = v;
-		}
-	};
-
-	// svelte-ignore state_referenced_locally
-	setCalendarViewContext({
+	const context: CalendarViewContext = $state({
 		config: {
-			minDate,
-			maxDate,
-			locale,
-			weekStart,
-			blackoutDates,
-			selectionMode,
-			blackoutBreaksRange,
-			headers
+			get minDate() {
+				return minDate;
+			},
+			get maxDate() {
+				return maxDate;
+			},
+			get locale() {
+				return locale;
+			},
+			get weekStart() {
+				return weekStart;
+			},
+			get blackoutDates() {
+				return blackoutDates;
+			},
+			get selectionMode() {
+				return selectionMode;
+			},
+			get blackoutBreaksRange() {
+				return blackoutBreaksRange;
+			},
+			get headers() {
+				return headers;
+			}
 		},
-		get state() {
-			return CALENDAR_STATE;
+		state: {
+			get value() {
+				return value;
+			},
+			set value(v) {
+				value = v;
+			},
+			get range() {
+				return range;
+			},
+			set range(v) {
+				range = v;
+			},
+			get view() {
+				return view;
+			},
+			set view(v) {
+				view = v;
+			},
+			get page() {
+				return page;
+			},
+			set page(v) {
+				page = v;
+			},
+			get viewAnimationDirection() {
+				return viewAnimationDirection;
+			},
+			set viewAnimationDirection(v) {
+				viewAnimationDirection = v;
+			},
+			get pageAnimationDirection() {
+				return pageAnimationDirection;
+			},
+			set pageAnimationDirection(v) {
+				pageAnimationDirection = v;
+			}
 		},
 		events: {
 			onChange: (e, value) => onChange?.(e, value),
@@ -264,6 +275,9 @@
 			clearSelection
 		}
 	});
+
+	setCalendarViewContext(context);
+
 	$effect.pre(() => {
 		pageAnimationDuration = getCSSDuration('--fs-normal-duration') || 333;
 

package/dist/components/calendar-view/docs/llms.md

@@ -82,40 +82,52 @@ changing it from the header button leaves focus on the button.
 
 ## CalendarView Props
 
-| Name                  | Type                                                  | Default                      | Description                                                                    |
-| --------------------- | ----------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------ |
-| `ref`                 | bindable `HTMLDivElement`                             |                              | The DOM reference of the calendar element.                                     |
-| `value`               | bindable `Date \| Date[] \| null`                     | `null`                       | The selected date, or an array of dates in `multiple` mode. Unused by `range`. |
-| `selectionMode`       | `'single' \| 'multiple' \| 'range'`                   | `'single'`                   | How many dates the grid hands out, and in what shape.                          |
-| `range`               | bindable `{ start: Date \| null; end: Date \| null }` | `{ start: null, end: null }` | The picked range. `end` is `null` until the range is closed.                   |
-| `blackoutBreaksRange` | `boolean`                                             | `false`                      | Stop a range from spanning a blacked-out date.                                 |
-| `blackoutDates`       | `Date[]`                                              |                              | Dates that are rendered but cannot be selected.                                |
-| `headers`             | `boolean`                                             |                              | Labels the first cell of a month or a year with its name.                      |
-| `minDate`             | `Date`                                                |                              | The earliest selectable date.                                                  |
-| `maxDate`             | `Date`                                                |                              | The latest selectable date.                                                    |
-| `view`                | `'days' \| 'months' \| 'years'`                       | `'days'`                     | The calendar page the view opens on.                                           |
-| `locale`              | `string`                                              | `'en-US'`                    | The locale used to format weekday and month names.                             |
-| `weekStart`           | `number`                                              | `1`                          | The first day of the week, where 0 is Sunday.                                  |
-| `floating`            | `CalendarViewFloating`                                |                              | Renders the calendar as a popup anchored to a reference element.               |
-| `onChange`            | `(event, value) => void`                              |                              | Called whenever the selection changes. Not called in `range` mode.             |
-| `onRangeChange`       | `(event, range) => void`                              |                              | Fired on every step of a range, including the one that leaves `end` null.      |
-| `onViewChange`        | `(event, view) => void`                               |                              | Called whenever the active calendar page changes.                              |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CalendarViewProps -->
+
+| Name                       | Type                                                                | Default                      | Description                                                                                                                  |
+| -------------------------- | ------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement`                                                    |                              | The DOM reference of the calendar element.                                                                                   |
+| `value` _bindable_         | `Date` &#124; `Date[]` &#124; `null`                                | `null`                       | The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.                           |
+| `selectionMode`            | `'single'` &#124; `'multiple'` &#124; `'range'`                     | `'single'`                   | How many dates the grid hands out, and in what shape.                                                                        |
+| `range` _bindable_         | `{ start: Date` &#124; `null; end: Date` &#124; `null; }`           | `{ start: null, end: null }` | The picked range. Only read and written when `selectionMode` is `'range'`, and `end` stays `null` until the range is closed. |
+| `blackoutBreaksRange`      | `boolean`                                                           | `false`                      | Stop a range from spanning a blacked-out date.                                                                               |
+| `blackoutDates`            | `Date[]`                                                            |                              | Dates that are rendered but cannot be selected.                                                                              |
+| `headers`                  | `boolean`                                                           |                              | Labels the first cell of a month or a year with its name.                                                                    |
+| `minDate`                  | `Date`                                                              |                              | The earliest selectable date.                                                                                                |
+| `maxDate`                  | `Date`                                                              |                              | The latest selectable date.                                                                                                  |
+| `view`                     | `'days'` &#124; `'months'` &#124; `'years'`                         | `'days'`                     | The calendar page the view opens on.                                                                                         |
+| `locale`                   | `string`                                                            | `'en-US'`                    | The locale used to format weekday and month names.                                                                           |
+| `weekStart`                | `number`                                                            | `1`                          | The first day of the week, where 0 is Sunday.                                                                                |
+| `floating`                 | `CalendarViewFloating`                                              |                              | Renders the calendar as a popup anchored to a reference element instead of inline.                                           |
+| `onChange`                 | `(event: Event, value: Date` &#124; `Date[]` &#124; `null) => void` |                              | Called whenever the selection changes. Not called in `'range'` mode.                                                         |
+| `onRangeChange`            | `(event: Event, range: CalendarDateRange) => void`                  |                              | Fired on every step of a range, including the one that leaves `end` null.                                                    |
+| `onViewChange`             | `(event: Event, view: View) => void`                                |                              | Called whenever the active calendar page changes.                                                                            |
+| Element Attributes (`div`) |                                                                     |                              |                                                                                                                              |
+
+<!-- /props:CalendarViewProps -->
 
 All `div` HTML attributes are forwarded to the root element.
 
 ## CalendarViewItem Props
 
-| Name               | Type                            | Default | Description                                                                       |
-| ------------------ | ------------------------------- | ------- | --------------------------------------------------------------------------------- |
-| `selected`         | `boolean`                       |         | Renders the cell as the selected one.                                             |
-| `disabled`         | `boolean`                       |         | Disables the user interaction.                                                    |
-| `current`          | `boolean`                       |         | Marks the cell as the current date.                                               |
-| `outOfRange`       | `boolean`                       |         | Renders the cell as belonging to a neighbouring page.                             |
-| `blackout`         | `boolean`                       |         | Renders the cell as blacked out, so it reads as unavailable rather than disabled. |
-| `rangePosition`    | `'start' \| 'between' \| 'end'` |         | Set on the days a range covers, which paints the band behind them.                |
-| `header`           | `string`                        |         | A small label rendered above the cell content.                                    |
-| `variant`          | `'day' \| 'monthYear'`          | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle otherwise.    |
-| `children`         | `Snippet`                       |         | The content of the cell.                                                          |
-| `buttonAttributes` | `HTMLButtonAttributes`          |         | The attributes to spread on the inner button element.                             |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CalendarViewItemProps -->
+
+| Name                       | Type                                        | Default | Description                                                                                |
+| -------------------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| `selected`                 | `boolean`                                   |         | Renders the cell as the selected one.                                                      |
+| `disabled`                 | `boolean`                                   |         | Disables the user interaction.                                                             |
+| `current`                  | `boolean`                                   |         | Marks the cell as the current date.                                                        |
+| `outOfRange`               | `boolean`                                   |         | Renders the cell as belonging to a neighbouring page.                                      |
+| `blackout`                 | `boolean`                                   |         | Renders the cell as blacked out, so it reads as unavailable rather than disabled.          |
+| `rangePosition`            | `'start'` &#124; `'between'` &#124; `'end'` |         | Set on the days a range covers, which paints the band behind them.                         |
+| `header`                   | `string`                                    |         | A small label rendered above the cell content.                                             |
+| `variant`                  | `'day'` &#124; `'monthYear'`                | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle for a month or a year. |
+| `children`                 | `Snippet`                                   |         | The content of the cell.                                                                   |
+| `buttonAttributes`         | `HTMLButtonAttributes`                      |         | The attributes to spread on the inner button element.                                      |
+| Element Attributes (`div`) |                                             |         |                                                                                            |
+
+<!-- /props:CalendarViewItemProps -->
 
 All `div` HTML attributes are forwarded to the cell element.

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

@@ -149,19 +149,24 @@ The footer renders the actions of the card at the bottom, spread across the avai
 
 ## Component Props
 
-| Name                 | Type                                      | Description                                                                                       |
-| -------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| `ref`                | `HTMLElement`                             | The DOM reference of the card element.                                                            |
-| `as`                 | `string`                                  | The DOM element to render. Possible values: 'div', 'article', 'section', 'a'.                     |
-| `orientation`        | `string`                                  | The axis the card lays its parts out on. Possible values: 'horizontal', 'vertical'.               |
-| `selectable`         | `boolean`                                 | Lets the user select the card by clicking anywhere on it.                                         |
-| `showFloatingAction` | `boolean`                                 | Floats the selection checkbox over the top right corner of the card. Requires `selectable`.       |
-| `id`                 | `string`                                  | The id of the card element. Falls back to a generated one.                                        |
-| `selected`           | `boolean`                                 | Whether the card is selected. Requires `selectable`.                                              |
-| `disabled`           | `boolean`                                 | Disables user interaction.                                                                        |
-| `appearance`         | `string`                                  | The appearance of the card. Possible values: 'filled', 'outlined', 'subtle'.                      |
-| `onSelectionChange`  | `(id: string, selected: boolean) => void` | Called with the id of the card whenever its selection changes.                                    |
-| 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:CardProps -->
+
+| Name                  | Type                                                       | Default        | Description                                                                             |
+| --------------------- | ---------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
+| `ref` _bindable_      | `CardElementDOMType[Tag]`                                  |                | The DOM reference of the card element.                                                  |
+| `as`                  | `'div'` &#124; `'article'` &#124; `'section'` &#124; `'a'` | `'div'`        | The DOM element to render.                                                              |
+| `orientation`         | `'horizontal'` &#124; `'vertical'`                         | `'horizontal'` | The axis the card lays its parts out on.                                                |
+| `selectable`          | `boolean`                                                  | `false`        | Lets the user select the card by clicking anywhere on it.                               |
+| `showFloatingAction`  | `boolean`                                                  | `false`        | Floats the selection checkbox over the top right corner of the card.                    |
+| `id`                  | `string`                                                   |                | The id of the card element. Falls back to a generated one.                              |
+| `selected` _bindable_ | `boolean`                                                  | `false`        | Whether the card is selected. Only available on selectable cards.                       |
+| `disabled`            | `boolean`                                                  | `false`        | Disables the user interaction.                                                          |
+| `appearance`          | `'filled'` &#124; `'outlined'` &#124; `'subtle'`           | `'filled'`     | A card can have its background and borders styled for greater emphasis or to be subtle. |
+| `onSelectionChange`   | `(id: string, selected: boolean) => void`                  |                | Called with the id of the card whenever its selection changes.                          |
+| HTML Attributes       |                                                            |                |                                                                                         |
+
+<!-- /props:CardProps -->
 
 ## CardPreview
 
@@ -169,13 +174,18 @@ The media shown at one edge of the card, with an optional logo overlaid on it.
 
 ### Component Props
 
-| Name               | Type                   | Description                                                                    |
-| ------------------ | ---------------------- | ------------------------------------------------------------------------------ |
-| `ref`              | `HTMLDivElement`       | The DOM reference of the preview element.                                      |
-| `logoSrc`          | `string`               | The URL of the logo overlaid on the bottom left corner of the preview.         |
-| `logoAlt`          | `string`               | The alternative text of the logo. Empty by default, so the logo is decorative. |
-| `children`         | `Snippet`              | The media to preview, usually an image.                                        |
-| Element Attributes | HTMLElement Attributes | All other attributes can be applied to the preview element.                    |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardPreviewProps -->
+
+| Name                                                | Type             | Default | Description                                                                             |
+| --------------------------------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement` |         | The DOM reference of the preview element.                                               |
+| `logoSrc`                                           | `string`         |         | The URL of the logo overlaid on the bottom left corner of the preview.                  |
+| `logoAlt`                                           | `string`         | `''`    | The alternative text of the logo. Empty by default, which marks the logo as decorative. |
+| `children`                                          | `Snippet`        |         | The media to preview, usually an image.                                                 |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                  |         |                                                                                         |
+
+<!-- /props:CardPreviewProps -->
 
 ## CardHeader
 
@@ -183,15 +193,20 @@ The title of the card, with an optional image, description and action.
 
 ### Component Props
 
-| Name               | Type                             | Description                                                                           |
-| ------------------ | -------------------------------- | ------------------------------------------------------------------------------------- |
-| `ref`              | `HTMLDivElement`                 | The DOM reference of the header element.                                              |
-| `title`            | `Snippet \| Component \| string` | The title of the card. A snippet or a component receives the id of the title.         |
-| `image`            | `Snippet \| Component \| string` | The image rendered before the title. A string is used as the `src` of an `<img>`.     |
-| `imageAlt`         | `string`                         | The alternative text of a string image. Empty by default, so the image is decorative. |
-| `description`      | `Snippet \| Component \| string` | A second line of text below the title.                                                |
-| `action`           | `Snippet \| Component`           | The action rendered at the end of the header. Not available on selectable cards.      |
-| Element Attributes | HTMLElement Attributes           | All other attributes can be applied to the header element.                            |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardHeaderProps -->
+
+| Name                                                         | Type                                         | Default | Description                                                                                           |
+| ------------------------------------------------------------ | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                             | `HTMLDivElement`                             |         | The DOM reference of the header element.                                                              |
+| `title`                                                      | `Snippet` &#124; `Component` &#124; `string` |         | The title of the card. A snippet or a component receives the id the floating checkbox is labelled by. |
+| `image`                                                      | `Snippet` &#124; `Component` &#124; `string` |         | The image rendered before the title. A string is used as the `src` of an `<img>`.                     |
+| `imageAlt`                                                   | `string`                                     | `''`    | The alternative text of a string image. Empty by default, which marks the image as decorative.        |
+| `description`                                                | `Snippet` &#124; `Component` &#124; `string` |         | A second line of text below the title.                                                                |
+| `action`                                                     | `Snippet` &#124; `Component`                 |         | The action rendered at the end of the header. Not available on selectable cards.                      |
+| `HTMLAttributes<HTMLDivElement>` without `children`, `title` |                                              |         |                                                                                                       |
+
+<!-- /props:CardHeaderProps -->
 
 ## CardFooter
 
@@ -199,8 +214,13 @@ The actions shown at the bottom of the card.
 
 ### Component Props
 
-| Name               | Type                   | Description                                                                |
-| ------------------ | ---------------------- | -------------------------------------------------------------------------- |
-| `ref`              | `HTMLDivElement`       | The DOM reference of the footer element.                                   |
-| `action`           | `Snippet \| Component` | The actions rendered inside the footer. Not available on selectable cards. |
-| Element Attributes | HTMLElement Attributes | All other attributes can be applied to the footer element.                 |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:CardFooterProps -->
+
+| Name                                                | Type                         | Default | Description                                                                |
+| --------------------------------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------- |
+| `ref` _bindable_                                    | `HTMLDivElement`             |         | The DOM reference of the footer element.                                   |
+| `action`                                            | `Snippet` &#124; `Component` |         | The actions rendered inside the footer. Not available on selectable cards. |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                              |         |                                                                            |
+
+<!-- /props:CardFooterProps -->

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?.()}