fluentui-svelte 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/dist/components/auto-suggest-box/auto-suggest-box.svelte +68 -56
  2. package/dist/components/auto-suggest-box/docs/llms.md +46 -14
  3. package/dist/components/auto-suggest-box/option.svelte +2 -1
  4. package/dist/components/avatar/docs/llms.md +20 -14
  5. package/dist/components/badge/docs/llms.md +29 -16
  6. package/dist/components/button/button.svelte +11 -5
  7. package/dist/components/button/docs/llms.md +33 -24
  8. package/dist/components/calendar-date-picker/docs/llms.md +17 -7
  9. package/dist/components/calendar-view/calendar-view-header.svelte +2 -2
  10. package/dist/components/calendar-view/calendar-view-header.svelte.d.ts +2 -17
  11. package/dist/components/calendar-view/calendar-view-months.svelte +1 -1
  12. package/dist/components/calendar-view/calendar-view-years.svelte +1 -1
  13. package/dist/components/calendar-view/calendar-view.svelte +66 -52
  14. package/dist/components/calendar-view/docs/llms.md +42 -30
  15. package/dist/components/card/docs/llms.md +54 -34
  16. package/dist/components/checkbox/docs/llms.md +18 -12
  17. package/dist/components/date-picker/docs/llms.md +25 -15
  18. package/dist/components/dialog/dialog-surface.svelte +8 -8
  19. package/dist/components/dialog/dialog.svelte +41 -39
  20. package/dist/components/dialog/docs/llms.md +59 -34
  21. package/dist/components/divider/docs/llms.md +14 -9
  22. package/dist/components/dropdown/docs/llms.md +34 -15
  23. package/dist/components/dropdown/dropdown.svelte +4 -2
  24. package/dist/components/dropdown-select/docs/llms.md +28 -14
  25. package/dist/components/expander/docs/llms.md +19 -12
  26. package/dist/components/flyout/docs/llms.md +17 -11
  27. package/dist/components/hyperlink/docs/llms.md +11 -7
  28. package/dist/components/info-bar/docs/llms.md +15 -9
  29. package/dist/components/label/docs/llms.md +15 -11
  30. package/dist/components/list-view/docs/llms.md +34 -24
  31. package/dist/components/list-view/list-view-item.svelte +10 -4
  32. package/dist/components/list-view/list-view.svelte +68 -63
  33. package/dist/components/menu/context-menu-trigger.svelte +45 -40
  34. package/dist/components/menu/docs/llms.md +63 -34
  35. package/dist/components/menu/menu-item-checkbox.svelte +3 -1
  36. package/dist/components/menu/menu-item-radio.svelte +3 -1
  37. package/dist/components/menu/menu-item-switch.svelte +3 -1
  38. package/dist/components/menu/menu-item.svelte +5 -1
  39. package/dist/components/menu/menu-popover.svelte +21 -10
  40. package/dist/components/menu/menu-trigger.svelte +22 -9
  41. package/dist/components/menu/menu.svelte +98 -87
  42. package/dist/components/number-box/docs/llms.md +10 -6
  43. package/dist/components/persona/docs/llms.md +19 -14
  44. package/dist/components/progress-bar/docs/llms.md +18 -10
  45. package/dist/components/progress-ring/docs/llms.md +19 -12
  46. package/dist/components/radio-button/docs/llms.md +13 -8
  47. package/dist/components/skeleton/docs/llms.md +13 -8
  48. package/dist/components/slider/docs/llms.md +33 -21
  49. package/dist/components/slider/slider.svelte +13 -11
  50. package/dist/components/text-box/docs/llms.md +23 -17
  51. package/dist/components/textarea/docs/llms.md +16 -7
  52. package/dist/components/time-picker/docs/llms.md +20 -10
  53. package/dist/components/toggle-switch/docs/llms.md +13 -9
  54. package/dist/components/tooltip/docs/llms.md +24 -10
  55. package/dist/components/tree-view/docs/llms.md +53 -35
  56. package/dist/components/tree-view/tree-view-item-content.svelte +1 -1
  57. package/dist/components/tree-view/tree-view-item.svelte +3 -3
  58. package/dist/components/tree-view/tree-view.svelte +89 -93
  59. package/dist/providers/fluentui-svelte/fluentui-svelte.svelte +15 -15
  60. package/package.json +1 -1
package/dist/components/calendar-view/calendar-view.svelte CHANGED
@@ -31,8 +31,8 @@
31
31
  import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
32
32
  import type {
33
33
  AnimationDirection,
34
+ CalendarViewContext,
34
35
  CalendarViewProps,
35
- CalendarViewState,
36
36
  DateComparisonPrecision,
37
37
  View
38
38
  } from './types.js';
@@ -197,59 +197,70 @@
197
197
  updateView(e, 'months', year);
198
198
  }
199
199
 
200
- const CALENDAR_STATE: CalendarViewState = {
201
- get value() {
202
- return value;
203
- },
204
- set value(v) {
205
- value = v;
206
- },
207
- get range() {
208
- return range;
209
- },
210
- set range(v) {
211
- range = v;
212
- },
213
- get view() {
214
- return view;
215
- },
216
- set view(v) {
217
- view = v;
218
- },
219
- get page() {
220
- return page;
221
- },
222
- set page(v) {
223
- page = v;
224
- },
225
- get viewAnimationDirection() {
226
- return viewAnimationDirection;
227
- },
228
- set viewAnimationDirection(v) {
229
- viewAnimationDirection = v;
230
- },
231
- get pageAnimationDirection() {
232
- return pageAnimationDirection;
233
- },
234
- set pageAnimationDirection(v) {
235
- pageAnimationDirection = v;
236
- }
237
- };
238
-
239
- // svelte-ignore state_referenced_locally
240
- setCalendarViewContext({
200
+ const context: CalendarViewContext = $state({
241
201
  config: {
242
- minDate,
243
- maxDate,
244
- locale,
245
- weekStart,
246
- blackoutDates,
247
- selectionMode,
248
- blackoutBreaksRange,
249
- headers
202
+ get minDate() {
203
+ return minDate;
204
+ },
205
+ get maxDate() {
206
+ return maxDate;
207
+ },
208
+ get locale() {
209
+ return locale;
210
+ },
211
+ get weekStart() {
212
+ return weekStart;
213
+ },
214
+ get blackoutDates() {
215
+ return blackoutDates;
216
+ },
217
+ get selectionMode() {
218
+ return selectionMode;
219
+ },
220
+ get blackoutBreaksRange() {
221
+ return blackoutBreaksRange;
222
+ },
223
+ get headers() {
224
+ return headers;
225
+ }
250
226
  },
251
- get state() {
252
- return CALENDAR_STATE;
227
+ state: {
228
+ get value() {
229
+ return value;
230
+ },
231
+ set value(v) {
232
+ value = v;
233
+ },
234
+ get range() {
235
+ return range;
236
+ },
237
+ set range(v) {
238
+ range = v;
239
+ },
240
+ get view() {
241
+ return view;
242
+ },
243
+ set view(v) {
244
+ view = v;
245
+ },
246
+ get page() {
247
+ return page;
248
+ },
249
+ set page(v) {
250
+ page = v;
251
+ },
252
+ get viewAnimationDirection() {
253
+ return viewAnimationDirection;
254
+ },
255
+ set viewAnimationDirection(v) {
256
+ viewAnimationDirection = v;
257
+ },
258
+ get pageAnimationDirection() {
259
+ return pageAnimationDirection;
260
+ },
261
+ set pageAnimationDirection(v) {
262
+ pageAnimationDirection = v;
263
+ }
253
264
  },
254
265
  events: {
255
266
  onChange: (e, value) => onChange?.(e, value),
@@ -264,6 +275,9 @@
264
275
  clearSelection
265
276
  }
266
277
  });
278
+
279
+ setCalendarViewContext(context);
280
+
267
281
  $effect.pre(() => {
268
282
  pageAnimationDuration = getCSSDuration('--fs-normal-duration') || 333;
269
283
 
package/dist/components/calendar-view/docs/llms.md CHANGED
@@ -82,40 +82,52 @@ changing it from the header button leaves focus on the button.
82
82
 
83
83
  ## CalendarView Props
84
84
 
85
- | Name | Type | Default | Description |
86
- | --------------------- | ----------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------ |
87
- | `ref` | bindable `HTMLDivElement` | | The DOM reference of the calendar element. |
88
- | `value` | bindable `Date \| Date[] \| null` | `null` | The selected date, or an array of dates in `multiple` mode. Unused by `range`. |
89
- | `selectionMode` | `'single' \| 'multiple' \| 'range'` | `'single'` | How many dates the grid hands out, and in what shape. |
90
- | `range` | bindable `{ start: Date \| null; end: Date \| null }` | `{ start: null, end: null }` | The picked range. `end` is `null` until the range is closed. |
91
- | `blackoutBreaksRange` | `boolean` | `false` | Stop a range from spanning a blacked-out date. |
92
- | `blackoutDates` | `Date[]` | | Dates that are rendered but cannot be selected. |
93
- | `headers` | `boolean` | | Labels the first cell of a month or a year with its name. |
94
- | `minDate` | `Date` | | The earliest selectable date. |
95
- | `maxDate` | `Date` | | The latest selectable date. |
96
- | `view` | `'days' \| 'months' \| 'years'` | `'days'` | The calendar page the view opens on. |
97
- | `locale` | `string` | `'en-US'` | The locale used to format weekday and month names. |
98
- | `weekStart` | `number` | `1` | The first day of the week, where 0 is Sunday. |
99
- | `floating` | `CalendarViewFloating` | | Renders the calendar as a popup anchored to a reference element. |
100
- | `onChange` | `(event, value) => void` | | Called whenever the selection changes. Not called in `range` mode. |
101
- | `onRangeChange` | `(event, range) => void` | | Fired on every step of a range, including the one that leaves `end` null. |
102
- | `onViewChange` | `(event, view) => void` | | Called whenever the active calendar page changes. |
85
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
86
+ <!-- props:CalendarViewProps -->
87
+
88
+ | Name | Type | Default | Description |
89
+ | -------------------------- | ------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
90
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the calendar element. |
91
+ | `value` _bindable_ | `Date` &#124; `Date[]` &#124; `null` | `null` | The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`. |
92
+ | `selectionMode` | `'single'` &#124; `'multiple'` &#124; `'range'` | `'single'` | How many dates the grid hands out, and in what shape. |
93
+ | `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. |
94
+ | `blackoutBreaksRange` | `boolean` | `false` | Stop a range from spanning a blacked-out date. |
95
+ | `blackoutDates` | `Date[]` | | Dates that are rendered but cannot be selected. |
96
+ | `headers` | `boolean` | | Labels the first cell of a month or a year with its name. |
97
+ | `minDate` | `Date` | | The earliest selectable date. |
98
+ | `maxDate` | `Date` | | The latest selectable date. |
99
+ | `view` | `'days'` &#124; `'months'` &#124; `'years'` | `'days'` | The calendar page the view opens on. |
100
+ | `locale` | `string` | `'en-US'` | The locale used to format weekday and month names. |
101
+ | `weekStart` | `number` | `1` | The first day of the week, where 0 is Sunday. |
102
+ | `floating` | `CalendarViewFloating` | | Renders the calendar as a popup anchored to a reference element instead of inline. |
103
+ | `onChange` | `(event: Event, value: Date` &#124; `Date[]` &#124; `null) => void` | | Called whenever the selection changes. Not called in `'range'` mode. |
104
+ | `onRangeChange` | `(event: Event, range: CalendarDateRange) => void` | | Fired on every step of a range, including the one that leaves `end` null. |
105
+ | `onViewChange` | `(event: Event, view: View) => void` | | Called whenever the active calendar page changes. |
106
+ | Element Attributes (`div`) | | | |
107
+
108
+ <!-- /props:CalendarViewProps -->
103
109
 
104
110
  All `div` HTML attributes are forwarded to the root element.
105
111
 
106
112
  ## CalendarViewItem Props
107
113
 
108
- | Name | Type | Default | Description |
109
- | ------------------ | ------------------------------- | ------- | --------------------------------------------------------------------------------- |
110
- | `selected` | `boolean` | | Renders the cell as the selected one. |
111
- | `disabled` | `boolean` | | Disables the user interaction. |
112
- | `current` | `boolean` | | Marks the cell as the current date. |
113
- | `outOfRange` | `boolean` | | Renders the cell as belonging to a neighbouring page. |
114
- | `blackout` | `boolean` | | Renders the cell as blacked out, so it reads as unavailable rather than disabled. |
115
- | `rangePosition` | `'start' \| 'between' \| 'end'` | | Set on the days a range covers, which paints the band behind them. |
116
- | `header` | `string` | | A small label rendered above the cell content. |
117
- | `variant` | `'day' \| 'monthYear'` | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle otherwise. |
118
- | `children` | `Snippet` | | The content of the cell. |
119
- | `buttonAttributes` | `HTMLButtonAttributes` | | The attributes to spread on the inner button element. |
114
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
115
+ <!-- props:CalendarViewItemProps -->
116
+
117
+ | Name | Type | Default | Description |
118
+ | -------------------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------ |
119
+ | `selected` | `boolean` | | Renders the cell as the selected one. |
120
+ | `disabled` | `boolean` | | Disables the user interaction. |
121
+ | `current` | `boolean` | | Marks the cell as the current date. |
122
+ | `outOfRange` | `boolean` | | Renders the cell as belonging to a neighbouring page. |
123
+ | `blackout` | `boolean` | | Renders the cell as blacked out, so it reads as unavailable rather than disabled. |
124
+ | `rangePosition` | `'start'` &#124; `'between'` &#124; `'end'` | | Set on the days a range covers, which paints the band behind them. |
125
+ | `header` | `string` | | A small label rendered above the cell content. |
126
+ | `variant` | `'day'` &#124; `'monthYear'` | `'day'` | Which shape the cell takes: a circle for a day, a rounded rectangle for a month or a year. |
127
+ | `children` | `Snippet` | | The content of the cell. |
128
+ | `buttonAttributes` | `HTMLButtonAttributes` | | The attributes to spread on the inner button element. |
129
+ | Element Attributes (`div`) | | | |
130
+
131
+ <!-- /props:CalendarViewItemProps -->
120
132
 
121
133
  All `div` HTML attributes are forwarded to the cell element.
package/dist/components/card/docs/llms.md CHANGED
@@ -149,19 +149,24 @@ The footer renders the actions of the card at the bottom, spread across the avai
149
149
 
150
150
  ## Component Props
151
151
 
152
- | Name | Type | Description |
153
- | -------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------- |
154
- | `ref` | `HTMLElement` | The DOM reference of the card element. |
155
- | `as` | `string` | The DOM element to render. Possible values: 'div', 'article', 'section', 'a'. |
156
- | `orientation` | `string` | The axis the card lays its parts out on. Possible values: 'horizontal', 'vertical'. |
157
- | `selectable` | `boolean` | Lets the user select the card by clicking anywhere on it. |
158
- | `showFloatingAction` | `boolean` | Floats the selection checkbox over the top right corner of the card. Requires `selectable`. |
159
- | `id` | `string` | The id of the card element. Falls back to a generated one. |
160
- | `selected` | `boolean` | Whether the card is selected. Requires `selectable`. |
161
- | `disabled` | `boolean` | Disables user interaction. |
162
- | `appearance` | `string` | The appearance of the card. Possible values: 'filled', 'outlined', 'subtle'. |
163
- | `onSelectionChange` | `(id: string, selected: boolean) => void` | Called with the id of the card whenever its selection changes. |
164
- | Element Attributes | | Based on the chosen component tag, you will get autocomplete for all HTML attributes of that tag. |
152
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
153
+ <!-- props:CardProps -->
154
+
155
+ | Name | Type | Default | Description |
156
+ | --------------------- | ---------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
157
+ | `ref` _bindable_ | `CardElementDOMType[Tag]` | | The DOM reference of the card element. |
158
+ | `as` | `'div'` &#124; `'article'` &#124; `'section'` &#124; `'a'` | `'div'` | The DOM element to render. |
159
+ | `orientation` | `'horizontal'` &#124; `'vertical'` | `'horizontal'` | The axis the card lays its parts out on. |
160
+ | `selectable` | `boolean` | `false` | Lets the user select the card by clicking anywhere on it. |
161
+ | `showFloatingAction` | `boolean` | `false` | Floats the selection checkbox over the top right corner of the card. |
162
+ | `id` | `string` | | The id of the card element. Falls back to a generated one. |
163
+ | `selected` _bindable_ | `boolean` | `false` | Whether the card is selected. Only available on selectable cards. |
164
+ | `disabled` | `boolean` | `false` | Disables the user interaction. |
165
+ | `appearance` | `'filled'` &#124; `'outlined'` &#124; `'subtle'` | `'filled'` | A card can have its background and borders styled for greater emphasis or to be subtle. |
166
+ | `onSelectionChange` | `(id: string, selected: boolean) => void` | | Called with the id of the card whenever its selection changes. |
167
+ | HTML Attributes | | | |
168
+
169
+ <!-- /props:CardProps -->
165
170
 
166
171
  ## CardPreview
167
172
 
@@ -169,13 +174,18 @@ The media shown at one edge of the card, with an optional logo overlaid on it.
169
174
 
170
175
  ### Component Props
171
176
 
172
- | Name | Type | Description |
173
- | ------------------ | ---------------------- | ------------------------------------------------------------------------------ |
174
- | `ref` | `HTMLDivElement` | The DOM reference of the preview element. |
175
- | `logoSrc` | `string` | The URL of the logo overlaid on the bottom left corner of the preview. |
176
- | `logoAlt` | `string` | The alternative text of the logo. Empty by default, so the logo is decorative. |
177
- | `children` | `Snippet` | The media to preview, usually an image. |
178
- | Element Attributes | HTMLElement Attributes | All other attributes can be applied to the preview element. |
177
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
178
+ <!-- props:CardPreviewProps -->
179
+
180
+ | Name | Type | Default | Description |
181
+ | --------------------------------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------- |
182
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the preview element. |
183
+ | `logoSrc` | `string` | | The URL of the logo overlaid on the bottom left corner of the preview. |
184
+ | `logoAlt` | `string` | `''` | The alternative text of the logo. Empty by default, which marks the logo as decorative. |
185
+ | `children` | `Snippet` | | The media to preview, usually an image. |
186
+ | `HTMLAttributes<HTMLDivElement>` without `children` | | | |
187
+
188
+ <!-- /props:CardPreviewProps -->
179
189
 
180
190
  ## CardHeader
181
191
 
@@ -183,15 +193,20 @@ The title of the card, with an optional image, description and action.
183
193
 
184
194
  ### Component Props
185
195
 
186
- | Name | Type | Description |
187
- | ------------------ | -------------------------------- | ------------------------------------------------------------------------------------- |
188
- | `ref` | `HTMLDivElement` | The DOM reference of the header element. |
189
- | `title` | `Snippet \| Component \| string` | The title of the card. A snippet or a component receives the id of the title. |
190
- | `image` | `Snippet \| Component \| string` | The image rendered before the title. A string is used as the `src` of an `<img>`. |
191
- | `imageAlt` | `string` | The alternative text of a string image. Empty by default, so the image is decorative. |
192
- | `description` | `Snippet \| Component \| string` | A second line of text below the title. |
193
- | `action` | `Snippet \| Component` | The action rendered at the end of the header. Not available on selectable cards. |
194
- | Element Attributes | HTMLElement Attributes | All other attributes can be applied to the header element. |
196
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
197
+ <!-- props:CardHeaderProps -->
198
+
199
+ | Name | Type | Default | Description |
200
+ | ------------------------------------------------------------ | -------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
201
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the header element. |
202
+ | `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. |
203
+ | `image` | `Snippet` &#124; `Component` &#124; `string` | | The image rendered before the title. A string is used as the `src` of an `<img>`. |
204
+ | `imageAlt` | `string` | `''` | The alternative text of a string image. Empty by default, which marks the image as decorative. |
205
+ | `description` | `Snippet` &#124; `Component` &#124; `string` | | A second line of text below the title. |
206
+ | `action` | `Snippet` &#124; `Component` | | The action rendered at the end of the header. Not available on selectable cards. |
207
+ | `HTMLAttributes<HTMLDivElement>` without `children`, `title` | | | |
208
+
209
+ <!-- /props:CardHeaderProps -->
195
210
 
196
211
  ## CardFooter
197
212
 
@@ -199,8 +214,13 @@ The actions shown at the bottom of the card.
199
214
 
200
215
  ### Component Props
201
216
 
202
- | Name | Type | Description |
203
- | ------------------ | ---------------------- | -------------------------------------------------------------------------- |
204
- | `ref` | `HTMLDivElement` | The DOM reference of the footer element. |
205
- | `action` | `Snippet \| Component` | The actions rendered inside the footer. Not available on selectable cards. |
206
- | Element Attributes | HTMLElement Attributes | All other attributes can be applied to the footer element. |
217
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
218
+ <!-- props:CardFooterProps -->
219
+
220
+ | Name | Type | Default | Description |
221
+ | --------------------------------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------- |
222
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the footer element. |
223
+ | `action` | `Snippet` &#124; `Component` | | The actions rendered inside the footer. Not available on selectable cards. |
224
+ | `HTMLAttributes<HTMLDivElement>` without `children` | | | |
225
+
226
+ <!-- /props:CardFooterProps -->
package/dist/components/checkbox/docs/llms.md CHANGED
@@ -64,15 +64,21 @@ The `value` prop sets the value of the checkbox input. It is useful when the che
64
64
 
65
65
  ## Checkbox Props
66
66
 
67
- | Name | Type | Description |
68
- | ------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------- |
69
- | `wrapperAs` | `'div' \| 'label'` | The element the wrapper renders as. Set to `label` to show a visible label. Defaults to `div`. |
70
- | `children` | `Snippet` | Label content rendered next to the input. Only allowed when `wrapperAs="label"`. |
71
- | `checked` | `boolean` | Determines if the checkbox is checked. |
72
- | `indeterminate` | `boolean` | Sets the checkbox to an indeterminate state. |
73
- | `disabled` | `boolean` | Disables the checkbox, preventing user interaction. |
74
- | `value` | `string` | The value of the checkbox input, useful for form submissions. |
75
- | `wrapperAttributes` | `object` | Additional attributes for the wrapper element. |
76
- | `ref` | bindable `HTMLInputElement` | The DOM reference of the checkbox input element. |
77
- | `wrapperRef` | bindable `HTMLDivElement \| HTMLLabelElement` | The DOM reference of the checkbox wrapper element. |
78
- | Input Attributes | | Additional attributes for the checkbox input element. |
67
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
68
+ <!-- props:CheckboxProps -->
69
+
70
+ | Name | Type | Default | Description |
71
+ | ----------------------------------------------- | ------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
72
+ | `ref` _bindable_ | `HTMLInputElement` | | The DOM reference of the checkbox element. |
73
+ | `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. |
74
+ | `wrapperRef` _bindable_ | `HTMLDivElement` &#124; `HTMLLabelElement` | | The DOM reference of the checkbox wrapper element. |
75
+ | `wrapperAttributes` | `PolymorphicProps` | | The attributes to spread on the wrapper element. |
76
+ | `indeterminate` _bindable_ | `boolean` | | Renders the checkbox in its mixed state, neither checked nor unchecked. |
77
+ | `name` | `string` &#124; `null` | `id` | The name submitted with the form. Falls back to the id of the checkbox. |
78
+ | `group` | `string` &#124; `null` | | The value of the group of checkboxes this input belongs to. |
79
+ | `checked` _bindable_ | `boolean` | | Whether the checkbox is checked. |
80
+ | `disabled` | `boolean` | | Disables the user interaction. |
81
+ | `children` | `Snippet` | | The content of the label. Only rendered when wrapperAs is set to label. |
82
+ | `HTMLInputAttributes` without `on:`, `children` | | | |
83
+
84
+ <!-- /props:CheckboxProps -->
package/dist/components/date-picker/docs/llms.md CHANGED
@@ -35,18 +35,28 @@ Use `hideDays`, `hideMonths`, or `hideYears` to hide individual selector columns
35
35
 
36
36
  ## Component Props
37
37
 
38
- | Name | Type | Description |
39
- | ---------------- | ------------------------------ | ----------------------------------------------------------------------------- |
40
- | `value` | bindable `string` | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`). |
41
- | `format` | `'MM/dd/yyyy' \| 'dd/MM/yyyy'` | The display format of the date. Default: `'dd/MM/yyyy'`. |
42
- | `open` | bindable `boolean` | Whether the picker flyout is open. |
43
- | `hideYears` | `boolean` | Hide the year selector column. |
44
- | `hideMonths` | `boolean` | Hide the month selector column. |
45
- | `hideDays` | `boolean` | Hide the day selector column. |
46
- | `minYear` | `number` | Earliest selectable year. Default: current year − 100. |
47
- | `maxYear` | `number` | Latest selectable year. Default: current year. |
48
- | `disabledDates` | `Date[]` | Specific days (year-month-day) that cannot be selected. |
49
- | `disabledMonths` | `Date[]` | Specific months (by month + year) that cannot be selected. |
50
- | `disabledYears` | `Date[]` | Specific years (by year) that cannot be selected. |
51
- | `element` | bindable `HTMLElement` | The DOM reference of the date picker root element. |
52
- | `inputElement` | bindable `HTMLInputElement` | The DOM reference of the underlying input element. |
38
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
39
+ <!-- props:DatePickerProps -->
40
+
41
+ | Name | Type | Default | Description |
42
+ | ----------------------------- | ------------------------------------ | ----------------- | --------------------------------------------------------------------------------------------------- |
43
+ | `value` _bindable_ | `string` | `''` | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`). |
44
+ | `format` | `'MM/dd/yyyy'` &#124; `'dd/MM/yyyy'` | `'dd/MM/yyyy'` | The order the three columns are laid out in. |
45
+ | `open` _bindable_ | `boolean` | `false` | Controls the open state of the picker. |
46
+ | `hideYears` | `boolean` | `false` | Removes the year column. |
47
+ | `hideMonths` | `boolean` | `false` | Removes the month column. |
48
+ | `hideDays` | `boolean` | `false` | Removes the day column. |
49
+ | `minYear` | `number` | `Current - 100` | The first year offered by the year column. |
50
+ | `maxYear` | `number` | `Current + 100` | The last year offered by the year column. |
51
+ | `disabledDates` | `Date[]` | `[]` | Specific days (year-month-day) that cannot be selected. |
52
+ | `disabledMonths` | `Date[]` | `[]` | Specific months (by month + year) that cannot be selected. |
53
+ | `disabledYears` | `Date[]` | `[]` | Specific years (by year) that cannot be selected. |
54
+ | `ref` _bindable_ | `HTMLButtonElement` | | The DOM reference of the trigger button. |
55
+ | `wrapperRef` _bindable_ | `HTMLDivElement` | | The DOM reference of the element wrapping the trigger and its input. |
56
+ | `wrapperAttributes` | `HTMLAttributes` | | The attributes to spread on the wrapper element. |
57
+ | `inputElement` _bindable_ | `HTMLInputElement` | | The DOM reference of the underlying input element. |
58
+ | `inputProps` | `HTMLInputAttributes` | | HTML attributes for the underlying input element. Give it a `name` to submit the value with a form. |
59
+ | `popupLabel` | `string` | `'Choose a date'` | The accessible name of the popup, which is announced as a dialog. |
60
+ | Element Attributes (`button`) | | | |
61
+
62
+ <!-- /props:DatePickerProps -->
package/dist/components/dialog/dialog-surface.svelte CHANGED
@@ -17,14 +17,14 @@
17
17
 
18
18
  const { closeDialog } = methods;
19
19
 
20
- const { type } = config;
21
-
22
- if (type !== 'alert') {
23
- onClickOutside(
24
- () => ref,
25
- () => closeDialog()
26
- );
27
- }
20
+ // Registered unconditionally and guarded from inside, so switching `type` after mount is honored.
21
+ onClickOutside(
22
+ () => ref,
23
+ () => {
24
+ if (config.type === 'alert') return;
25
+ closeDialog();
26
+ }
27
+ );
28
28
 
29
29
  $effect(() => {
30
30
  if (!ref) return;
package/dist/components/dialog/dialog.svelte CHANGED
@@ -8,57 +8,59 @@
8
8
 
9
9
  let titleId: string | undefined = $state();
10
10
 
11
- const config: DialogContext['config'] = $derived({
12
- type
13
- });
14
-
15
- const _state: DialogContext['state'] = {
16
- get open() {
17
- return open;
18
- },
19
- get dialogRef() {
20
- return dialogRef;
21
- },
22
- set dialogRef(v) {
23
- dialogRef = v;
24
- },
25
- get titleId() {
26
- return titleId;
11
+ const context: DialogContext = $state({
12
+ config: {
13
+ get type() {
14
+ return type;
15
+ }
27
16
  },
28
- set titleId(v) {
29
- titleId = v;
30
- }
31
- };
32
-
33
- const methods: DialogContext['methods'] = $derived({
34
- openDialog: () => {
35
- if (type !== 'non-modal') {
36
- dialogRef?.showModal();
37
- } else {
38
- open = true;
17
+ state: {
18
+ get open() {
19
+ return open;
20
+ },
21
+ get dialogRef() {
22
+ return dialogRef;
23
+ },
24
+ set dialogRef(v) {
25
+ dialogRef = v;
26
+ },
27
+ get titleId() {
28
+ return titleId;
29
+ },
30
+ set titleId(v) {
31
+ titleId = v;
39
32
  }
40
- onOpenChange?.(true);
41
33
  },
42
- closeDialog: () => {
43
- if (type !== 'non-modal') {
44
- dialogRef?.close();
45
- } else {
46
- open = false;
34
+ events: null,
35
+ methods: {
36
+ openDialog: () => {
37
+ if (type !== 'non-modal') {
38
+ dialogRef?.showModal();
39
+ } else {
40
+ open = true;
41
+ }
42
+ onOpenChange?.(true);
43
+ },
44
+ closeDialog: () => {
45
+ if (type !== 'non-modal') {
46
+ dialogRef?.close();
47
+ } else {
48
+ open = false;
49
+ }
50
+ onOpenChange?.(false);
47
51
  }
48
- onOpenChange?.(false);
49
52
  }
50
53
  });
51
54
 
55
+ setDialogContext(context);
56
+
52
57
  export function openDialog() {
53
- methods.openDialog();
58
+ context.methods.openDialog();
54
59
  }
55
60
 
56
61
  export function closeDialog() {
57
- methods.closeDialog();
62
+ context.methods.closeDialog();
58
63
  }
59
-
60
- // svelte-ignore state_referenced_locally
61
- setDialogContext({ config, state: _state, events: null, methods });
62
64
  </script>
63
65
 
64
66
  {@render children?.()}