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/auto-suggest-box/auto-suggest-box.svelte CHANGED
@@ -47,8 +47,14 @@
47
47
  children
48
48
  }: AutoSuggestBoxProps = $props();
49
49
 
50
- // svelte-ignore state_referenced_locally
51
- if (selectOnFocus && multiselect) throw new Error('selectOnFocus is not supported when multiselect is true');
50
+ /**
51
+ * The props the invariant rules over. The markup and the context read them through here, so
52
+ * reading either of them validates the pair during SSR and on every prop update.
53
+ */
54
+ const _box = $derived.by(() => {
55
+ if (selectOnFocus && multiselect) throw new Error('selectOnFocus is not supported when multiselect is true');
56
+ return { selectOnFocus, multiselect };
57
+ });
52
58
 
53
59
  let items = new SvelteMap<string, OptionType>();
54
60
 
@@ -56,12 +62,6 @@
56
62
 
57
63
  let roundClass = $state('bottom');
58
64
 
59
- let config: AutoSuggestBoxContext['config'] = $derived({
60
- selectOnFocus,
61
- virtualized: virtualizer,
62
- multiselect
63
- });
64
-
65
65
  let activeOption: OptionType | null = $state(null);
66
66
 
67
67
  /** The arrow key behind the move Tabspot is reporting, for `selectOnFocus` to hand on. */
@@ -83,59 +83,71 @@
83
83
  }
84
84
  };
85
85
 
86
- const _state: AutoSuggestBoxContext['state'] = {
87
- get lastTypedValue() {
88
- return lastTypedValue;
89
- },
90
- get open() {
91
- return open;
92
- },
93
- set open(v) {
94
- open = v;
95
- },
96
- get textBoxRef() {
97
- return inputRef;
98
- },
99
- get activeOption() {
100
- return activeOption;
101
- },
102
- set activeOption(v) {
103
- activeOption = v;
104
- }
105
- };
106
-
107
- let methods: AutoSuggestBoxContext['methods'] = {
108
- setOption: ({ id, index, value, text, disabled }) => {
109
- items.set(id, { id, index, value, text, disabled });
86
+ const context: AutoSuggestBoxContext = $state({
87
+ config: {
88
+ get selectOnFocus() {
89
+ return _box.selectOnFocus;
90
+ },
91
+ get virtualized() {
92
+ return virtualizer;
93
+ },
94
+ get multiselect() {
95
+ return _box.multiselect;
96
+ }
110
97
  },
111
- deleteOption: (id: string) => {
112
- items.delete(id);
98
+ state: {
99
+ get lastTypedValue() {
100
+ return lastTypedValue;
101
+ },
102
+ get open() {
103
+ return open;
104
+ },
105
+ set open(v) {
106
+ open = v;
107
+ },
108
+ get textBoxRef() {
109
+ return inputRef;
110
+ },
111
+ get activeOption() {
112
+ return activeOption;
113
+ },
114
+ set activeOption(v) {
115
+ activeOption = v;
116
+ }
113
117
  },
114
- toggleSelection: (e, id) => {
115
- const item = items.get(id);
116
-
117
- if (item) {
118
- if (multiselect) {
119
- if (selectedOptions?.some((opt) => opt.id === id)) {
120
- selectedOptions = selectedOptions.filter((opt) => opt.id !== id);
118
+ events: null,
119
+ methods: {
120
+ setOption: ({ id, index, value, text, disabled }) => {
121
+ items.set(id, { id, index, value, text, disabled });
122
+ },
123
+ deleteOption: (id: string) => {
124
+ items.delete(id);
125
+ },
126
+ toggleSelection: (e, id) => {
127
+ const item = items.get(id);
128
+
129
+ if (item) {
130
+ if (_box.multiselect) {
131
+ if (selectedOptions?.some((opt) => opt.id === id)) {
132
+ selectedOptions = selectedOptions.filter((opt) => opt.id !== id);
133
+ } else {
134
+ selectedOptions = [...selectedOptions, { id, value: item.value }];
135
+ }
136
+
137
+ if (showTextualMultiselect) value = selectedOptions.map((opt) => opt.value).join(', ');
121
138
  } else {
122
- selectedOptions = [...selectedOptions, { id, value: item.value }];
123
- }
139
+ selectedOptions = [item];
124
140
 
125
- if (showTextualMultiselect) value = selectedOptions.map((opt) => opt.value).join(', ');
126
- } else {
127
- selectedOptions = [item];
141
+ value = item.text || item.value;
142
+ }
128
143
 
129
- value = item.text || item.value;
144
+ suggestionChosen?.(e, item.value);
130
145
  }
131
-
132
- suggestionChosen?.(e, item.value);
133
146
  }
134
147
  }
135
- };
148
+ });
136
149
 
137
- // svelte-ignore state_referenced_locally
138
- setAutoSuggestBoxContext({ config, state: _state, methods, events: null });
150
+ setAutoSuggestBoxContext(context);
139
151
 
140
152
  /**
141
153
  * Put the cursor on `option`, or send it home when there is none. `nearest`
@@ -179,10 +191,10 @@
179
191
 
180
192
  // selectOnFocus mirrors the option into the text box, which must not happen
181
193
  // while the user is the one typing in it.
182
- if (!selectOnFocus || !keyed || !cursorKey) return;
194
+ if (!_box.selectOnFocus || !keyed || !cursorKey) return;
183
195
 
184
196
  if (option) {
185
- methods.toggleSelection(cursorKey, option.id);
197
+ context.methods.toggleSelection(cursorKey, option.id);
186
198
  value = option.text || option.value;
187
199
  } else {
188
200
  value = lastTypedValue;
@@ -221,7 +233,7 @@
221
233
  e.preventDefault();
222
234
 
223
235
  if (activeOption) {
224
- methods.toggleSelection(e, activeOption.id);
236
+ context.methods.toggleSelection(e, activeOption.id);
225
237
  open = false;
226
238
  } else {
227
239
  querySubmitted?.(e, value);
@@ -354,7 +366,7 @@
354
366
  </script>
355
367
 
356
368
  <div
357
- class={['fs-autosuggestbox', { open }]}
369
+ class={['fs-autosuggestbox', { open, multiselect: _box.multiselect }]}
358
370
  style="--max-items: {maxItemsInView}; --current-items: {items.size};"
359
371
  bind:this={ref}
360
372
  >
package/dist/components/auto-suggest-box/docs/llms.md CHANGED
@@ -58,17 +58,49 @@ built-in filter that a plain option list applies is skipped.
58
58
 
59
59
  ## Component Props
60
60
 
61
- | Name | Type | Description |
62
- | ------------------ | --------------------------------------------------------- | ---------------------------------------------------------------------------- |
63
- | `placeholder` | `string` | Placeholder text shown in the input. |
64
- | `value` | `string` | The current value of the input field. |
65
- | `open` | `boolean` | Whether the suggestion flyout is open. Default: `false`. |
66
- | `multiselect` | `boolean` | Allow selecting multiple suggestions. |
67
- | `selectOnFocus` | `boolean` | Select a suggestion as it is focused during keyboard navigation. |
68
- | `openOnFocus` | `boolean` | Open the suggestion list as soon as the input takes focus. Default: `false`. |
69
- | `notFoundText` | `string` | Text shown when no suggestions match. Default: `No results found`. |
70
- | `maxItemsInView` | `number` | Number of suggestions visible before the flyout scrolls. Default: `6`. |
71
- | `ref` | `HTMLElement` | The DOM reference of the auto-suggest box element. |
72
- | `suggestionChosen` | `(e: Event, selection: string) => void` | Event triggered when a suggestion is chosen. |
73
- | `querySubmitted` | `(e: MouseEvent \| KeyboardEvent, query: string) => void` | Event triggered when a query is submitted. |
74
- | `virtualizer` | `{ size, scrollToIndex?, scrollToTop?, scrollToBottom? }` | Bridge to a windowed list. `size` is the total suggestion count. |
61
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
62
+ <!-- props:AutoSuggestBoxProps -->
63
+
64
+ | Name | Type | Default | Description |
65
+ | ----------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
66
+ | `ref` _bindable_ | `HTMLElement` | | The DOM reference of the wrapper element. |
67
+ | `inputRef` _bindable_ | `HTMLInputElement` | | The DOM reference of the text box element. |
68
+ | `value` _bindable_ | `string` | `''` | The current text of the box. |
69
+ | `open` _bindable_ | `boolean` | `false` | Controls the open state of the suggestion list. |
70
+ | `multiselect` | `boolean` | | Lets more than one suggestion be chosen, and keeps the list open after each one. |
71
+ | `selectOnFocus` | `boolean` | | Mirrors the suggestion under the cursor into the text box as it is walked over. Not supported together with `multiselect`. |
72
+ | `openOnFocus` | `boolean` | `false` | Opens the suggestion list as soon as the text box takes focus, instead of waiting for the first keystroke. Useful on touch devices, which have no arrow key to open the list with. |
73
+ | `showTextualMultiselect` | `boolean` | | Lists every chosen suggestion in the text box, comma separated. Multiselect only. |
74
+ | `notFoundText` | `string` | `'No results found'` | The message shown in place of the list when nothing matches. |
75
+ | `selectedOptions` _bindable_ | `{ id: string; value: string }[]` | `[]` | The suggestions currently chosen. |
76
+ | `suggestionChosen` | `(e: Event, selection: string) => void` | | Called when a suggestion is chosen: by clicking it, by pressing Enter on it, or by walking onto it while `selectOnFocus` is set. |
77
+ | `querySubmitted` | `(e: MouseEvent` &#124; `KeyboardEvent, query: string) => void` | | Called when Enter is pressed with no suggestion under the cursor, or when the search button is clicked. This is where a fresh set of suggestions is fetched. |
78
+ | `virtualizer` | `AutoSuggestVirtualizer` | | Bridge to a windowed list, for suggestion sets too long to render whole. |
79
+ | `maxItemsInView` | `number` | `6` | How many suggestions are visible before the list scrolls. |
80
+ | `textBoxRef` _bindable_ | `HTMLInputElement` | | The DOM reference of the underlying text box input. |
81
+ | `textBoxProps` | `TextBoxProps` | | The props to spread on the text box. |
82
+ | `flyoutRef` _bindable_ | `HTMLElement` | | The DOM reference of the flyout holding the suggestion list. |
83
+ | `flyoutProps` | `FlyoutProps` | | The props to spread on the flyout. |
84
+ | `listViewRef` _bindable_ | `HTMLUListElement` | | The DOM reference of the suggestion list. |
85
+ | `listViewProps` | `ListViewItemProps` | | The props to spread on the suggestion list. |
86
+ | `type`, `placeholder`, `hideActionButtons`, `textChanged` from `TextBoxProps` | | | |
87
+ | Element Attributes (`div`) | | | |
88
+
89
+ <!-- /props:AutoSuggestBoxProps -->
90
+
91
+ ## AutoSuggestBoxOption Props
92
+
93
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
94
+ <!-- props:AutoSuggestOptionProps -->
95
+
96
+ | Name | Type | Default | Description |
97
+ | ----------------------------------------------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
98
+ | `value` | `string` | | The value reported to the box when the suggestion is chosen. Falls back to the id. |
99
+ | `text` | `string` | | The text shown in the box once the suggestion is chosen. Falls back to `value`. |
100
+ | `id` | `string` | | The id of the option element, referenced by the box through `aria-activedescendant`. Falls back to a generated id. |
101
+ | `ref` _bindable_ | `HTMLLIElement` | | The DOM reference of the option element. |
102
+ | `disabled` | `boolean` | | Takes the suggestion out of reach: it is shown, but the cursor steps over it. |
103
+ | `index` | `number` | | Where the suggestion sits in the whole set. A windowed list needs the real index, not the position within the rendered slice. |
104
+ | `ListViewItemProps<'li'>` without `as`, `value` | | | |
105
+
106
+ <!-- /props:AutoSuggestOptionProps -->
package/dist/components/auto-suggest-box/option.svelte CHANGED
@@ -23,7 +23,8 @@
23
23
  if (!context) throw new Error('AutoSuggestOption must be used within an AutoSuggestBox');
24
24
 
25
25
  const { config, state: _state, methods } = context;
26
- const { selectOnFocus, virtualized } = config;
26
+ const selectOnFocus = $derived(config.selectOnFocus);
27
+ const virtualized = $derived(config.virtualized);
27
28
  const { setOption, deleteOption, toggleSelection } = methods;
28
29
 
29
30
  let isVisible = $derived(
package/dist/components/avatar/docs/llms.md CHANGED
@@ -76,17 +76,23 @@ An avatar can have its color automatically picked based on the name prop, or idF
76
76
 
77
77
  ## Component Props
78
78
 
79
- | Name | Type | Description |
80
- | ------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
81
- | `name` | `string` | The name of the person or entity represented by this Avatar. Used to determine initials and for accessibility tools. |
82
- | `image` | `{ src: string }` | The Avatar image. It can only be a single image URL. |
83
- | `ref` | `HTMLDivElement` | The DOM reference of the avatar element. |
84
- | `size` | `number` | Size of the avatar in pixels. |
85
- | `shape` | `string` | The shape of the avatar. Possible values: 'circular', 'rounded', 'square'. |
86
- | `color` | `string` | The color used when displaying either an icon or initials. Supports system colors. Possible values: 'information', 'attention', 'warning', 'success', 'critical', 'colorful'. |
87
- | `active` | `string` | Optional activity indicator. Possible values: 'active', 'inactive'. Active decorates the avatar according to activeAppearance. Inactive reduces size and makes it partially transparent. |
88
- | `activeAppearance` | `string` | The appearance used when active is set to active. Possible values: 'ring', 'shadow', 'ring-shadow'. |
89
- | `initials` | `string` | Custom initials. By default, initials are derived from the name prop using the getInitials function. They are displayed when there is no image. |
90
- | `idForColor` | `string` | A string used instead of the name to determine the color when color is set to colorful. Useful when a name is unavailable but another unique identifier exists. |
91
- | `icon` | `Snippet` \| `Component` | The icon to display when the avatar does not have an image or initials. |
92
- | `badge` | `object` | The badge to display as a status indicator. It can include a custom icon. |
79
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
80
+ <!-- props:AvatarProps -->
81
+
82
+ | Name | Type | Default | Description |
83
+ | ------------------ | ------------------------------------------------------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------- |
84
+ | `name` | `string` | `'Avatar'` | The name of the person or entity represented by this Avatar. This should always be provided if it is available. |
85
+ | `image` | `{ src: string; }` | | The Avatar's image |
86
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the avatar element. |
87
+ | `size` | `number` | `48` | Size of the avatar in pixels. |
88
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'circular'` | The avatar can have a circular, rounded or square shape. |
89
+ | `color` | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors) &#124; `'colorful'` | `'attention'` | The color when displaying either an icon or initials. For now it only supports system colors (plus colorful). |
90
+ | `active` | `'active'` &#124; `'inactive'` | | Optional activity indicator |
91
+ | `activeAppearance` | `'ring'` &#124; `'shadow'` &#124; `'ring-shadow'` | `'ring'` | The appearance when `active="active"` |
92
+ | `initials` | `string` | `name` | Custom initials by default they will be derived from the `name` prop. |
93
+ | `idForColor` | `string` | | Specify a string to be used instead of the name, to determine which color to use when color="colorful". |
94
+ | `icon` | `Snippet` &#124; `Component` | | Icon to be displayed when the avatar doesn't have an image or initials. |
95
+ | `badge` | `BadgePresence` | | The badge to display as a status indicator. (you can use with a custom icon) |
96
+ | HTML Attributes | | | |
97
+
98
+ <!-- /props:AvatarProps -->
package/dist/components/badge/docs/llms.md CHANGED
@@ -79,16 +79,21 @@ Use the icon prop to render an icon inside the badge. You can pass the icon as a
79
79
 
80
80
  ## Badge Props
81
81
 
82
- | Name | Type | Description |
83
- | -------------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
84
- | `size` | `number` | The size of the badge in pixels. |
85
- | `shape` | `string` | The shape of the badge. Possible values: 'circular', 'rounded', 'square'. |
86
- | `appearance` | `string` | The appearance of the badge. Possible values: 'filled', 'outline', 'ghost', 'tint'. |
87
- | `iconPosition` | `string` | The position of the icon inside the badge. Possible values: 'before', 'after'. |
88
- | `color` | `string` | The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'. |
89
- | `icon` | `Snippet` \| `Component` | The icon to display inside the badge. |
90
- | `ref` | `HTMLSpanElement` | The DOM reference of the badge element. |
91
- | `children` | `Snippet` | The children elements to render inside the badge. |
82
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
83
+ <!-- props:BadgeProps -->
84
+
85
+ | Name | Type | Default | Description |
86
+ | ---------------- | -------------------------------------------------------------- | --------------- | ----------------------------------------------------------------------------------------- |
87
+ | `size` | `number` | `20` | The size of the badge in pixels. |
88
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'circular'` | The badge can have a circular, rounded or square shape. |
89
+ | `appearance` | `'filled'` &#124; `'outline'` &#124; `'ghost'` &#124; `'tint'` | `'filled'` | The badge can have its background and border styled for greater emphasis or to be subtle. |
90
+ | `iconPosition` | `'before'` &#124; `'after'` | `'before'` | The position of the icon relative to the badge content. |
91
+ | `color` | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors) | `'information'` | The color of the badge. For now it only supports system colors. |
92
+ | `icon` | `Snippet` &#124; `Component` | | Icon to render inside the badge. |
93
+ | `ref` _bindable_ | `HTMLSpanElement` | | The DOM reference of the badge element. |
94
+ | HTML Attributes | | | |
95
+
96
+ <!-- /props:BadgeProps -->
92
97
 
93
98
  ## BadgeIcon API
94
99
 
@@ -125,9 +130,17 @@ By default, Avatar uses an instance of BadgeIcon. As you can see, the first exam
125
130
 
126
131
  ### BadgeIcon Props
127
132
 
128
- | Name | Type | Description |
129
- | ------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
130
- | `size` | `number` | The size of the badge in pixels. |
131
- | `color` | `string` | The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'. |
132
- | `icon` | `Snippet` \| `Component` | The icon to display inside the badge. |
133
- | `ref` | `HTMLSpanElement` | The DOM reference of the badge element. |
133
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
134
+ <!-- props:BadgeIconProps -->
135
+
136
+ | Name | Type | Default | Description |
137
+ | ---------------- | -------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------- |
138
+ | `status` | [`Statuses`](https://fluentui-svelte.dev/docs/types/#statuses) | `'available'` | The presence status to display. It picks both the icon and the color of the badge. |
139
+ | `outOfOffice` | `boolean` | `false` | Decorates the presence icon to signal that the person is out of office. |
140
+ | `size` | `number` | `20` | The size of the badge in pixels. |
141
+ | `color` | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors) | | Overrides the color the status would pick on its own. |
142
+ | `icon` | `Snippet` &#124; `Component` | | Custom icon, rendered instead of the one the status would pick on its own. |
143
+ | `ref` _bindable_ | `HTMLSpanElement` | | The DOM reference of the badge element. |
144
+ | HTML Attributes | | | |
145
+
146
+ <!-- /props:BadgeIconProps -->
package/dist/components/button/button.svelte CHANGED
@@ -21,10 +21,16 @@
21
21
  ...attributes
22
22
  }: ButtonProps<T> = $props();
23
23
 
24
- // svelte-ignore state_referenced_locally
25
- if (as !== 'button' && as !== 'a' && as !== 'div') {
26
- throw new Error(`Invalid 'as' prop value: ${as}. Expected 'button', 'a', or 'div'.`);
27
- }
24
+ /**
25
+ * The tag the invariant rules over. The markup renders it through here, so it is checked
26
+ * during SSR and on every prop update rather than only once on mount.
27
+ */
28
+ const _as = $derived.by(() => {
29
+ if (as !== 'button' && as !== 'a' && as !== 'div') {
30
+ throw new Error(`Invalid 'as' prop value: ${as}. Expected 'button', 'a', or 'div'.`);
31
+ }
32
+ return as;
33
+ });
28
34
  </script>
29
35
 
30
36
  <!--
@@ -42,7 +48,7 @@
42
48
  ```
43
49
  -->
44
50
  <svelte:element
45
- this={as}
51
+ this={_as}
46
52
  bind:this={ref}
47
53
  disabled={disabled && as !== 'div' ? true : undefined}
48
54
  aria-disabled={disabled && as !== 'div' ? true : undefined}
package/dist/components/button/docs/llms.md CHANGED
@@ -50,18 +50,23 @@ A button can have its content and borders styled for greater emphasis or to be s
50
50
 
51
51
  ## Component Props
52
52
 
53
- | Name | Type | Description |
54
- | ------------------- | ---------------------- | ------------------------------------------------------------------------------------------------- |
55
- | `ref` | `HTMLElement` | The DOM reference of the button element. |
56
- | `as` | `string` | The DOM element to render. Possible values: 'button', 'a', 'div'. |
57
- | `disabled` | `boolean` | Disables user interaction. |
58
- | `shape` | `string` | The shape of the button or buttons. Possible values: 'circular', 'rounded', 'square'. |
59
- | `appearance` | `string` | The appearance of the button or buttons. Possible values: 'accent', 'standard', 'subtle'. |
60
- | `disabledFocusable` | `boolean` | Allows the button to be focusable even when disabled. |
61
- | `isMenuButton` | `boolean` | Adds an icon that indicates the button triggers a menu. |
62
- | `indicatorPosition` | `'before' \| 'after'` | The position of the icon. Possible values: 'before', 'after'. |
63
- | `indicatorIcon` | `Snippet \| Component` | The icon used as the menu indicator. Defaults to a chevron-down icon. |
64
- | Element Attributes | | Based on the chosen component tag, you will get autocomplete for all HTML attributes of that tag. |
53
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
54
+ <!-- props:ButtonProps -->
55
+
56
+ | Name | Type | Default | Description |
57
+ | ------------------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------- |
58
+ | `ref` _bindable_ | `ButtonElementDOMType[T]` | | The DOM reference of the button element. |
59
+ | `as` | `'button'` &#124; `'a'` &#124; `'div'` | `'button'` | The DOM element to render. |
60
+ | `disabled` | `boolean` | | Disables the user interaction. |
61
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | A button can be rounded, circular, or square. |
62
+ | `appearance` | `'accent'` &#124; `'standard'` &#124; `'subtle'` | `'accent'` | A button can have its content and borders styled for greater emphasis or to be subtle. |
63
+ | `disabledFocusable` | `boolean` | `false` | When set, allows the button to be focusable even when it has been disabled. |
64
+ | `isMenuButton` | `boolean` | | Add an icon that indicates the button triggers a menu. |
65
+ | `indicatorPosition` | `'before'` &#124; `'after'` | `'after'` | Position of the menu indicator relative to the button content. |
66
+ | `indicatorIcon` | `Snippet` &#124; `Component` | | The icon used to indicate the button triggers a menu. |
67
+ | HTML Attributes | | | |
68
+
69
+ <!-- /props:ButtonProps -->
65
70
 
66
71
  ## Split Button
67
72
 
@@ -88,15 +93,19 @@ To add a menu to the split button, please refer to the Menu documentation for de
88
93
 
89
94
  ### Component Props
90
95
 
91
- | Name | Type | Description |
92
- | ------------------------- | ----------------------- | ----------------------------------------------------------------------------------------- |
93
- | `wrapperRef` | `HTMLDivElement` | The DOM reference of the split button wrapper element. |
94
- | `primaryButtonRef` | `HTMLButtonElement` | The DOM reference of the primary button element. |
95
- | `primaryButtonProps` | `ButtonProps<'button'>` | Additional props to pass to the primary button. |
96
- | `menuTriggerRef` | `HTMLButtonElement` | The DOM reference of the menu trigger button element. |
97
- | `menuTriggerProps` | `ButtonProps<'button'>` | Additional props to pass to the menu trigger button. |
98
- | `class` | `string` | Additional classes to add to the split button wrapper element. |
99
- | `shape` | `string` | The shape of the button or buttons. Possible values: 'circular', 'rounded', 'square'. |
100
- | `appearance` | `string` | The appearance of the button or buttons. Possible values: 'accent', 'standard', 'subtle'. |
101
- | `disabled` | `boolean` | Disables user interaction. |
102
- | WrapperElement Attributes | HTMLElement Attributes | All other attributes can be applied to the split button wrapper element. |
96
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
97
+ <!-- props:SplitButtonProps -->
98
+
99
+ | Name | Type | Default | Description |
100
+ | ----------------------------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------- |
101
+ | `appearance` | `'accent'` &#124; `'standard'` &#124; `'subtle'` | `'accent'` | Both buttons can have their content and borders styled for greater emphasis or to be subtle. |
102
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | Both buttons can be rounded, circular, or square. |
103
+ | `disabled` | `boolean` | `false` | Disables the user interaction on both buttons. |
104
+ | `primaryButtonProps` | `ButtonProps` | | The props to spread on the primary button. |
105
+ | `menuTriggerProps` | `ButtonProps` | | The props to spread on the button that opens the menu. |
106
+ | `wrapperRef` _bindable_ | `HTMLDivElement` | | The DOM reference of the element wrapping both buttons. |
107
+ | `primaryButtonRef` _bindable_ | `HTMLButtonElement` | | The DOM reference of the primary button. |
108
+ | `menuTriggerRef` _bindable_ | `HTMLButtonElement` | | The DOM reference of the button that opens the menu. |
109
+ | HTML Attributes | | | |
110
+
111
+ <!-- /props:SplitButtonProps -->
package/dist/components/calendar-date-picker/docs/llms.md CHANGED
@@ -20,13 +20,23 @@ The `CalendarDatePicker` combines a button trigger with a `CalendarView` popup.
20
20
 
21
21
  ## Component Props
22
22
 
23
- | Name | Type | Default | Description |
24
- | ------------------ | -------------------------------- | ------------------------------------------------------- | --------------------------------------------------------- |
25
- | `ref` | bindable `HTMLDivElement` | | The DOM reference of the picker element. |
26
- | `value` | bindable `Date \| null` | `null` | The selected date. |
27
- | `format` | `Intl.DateTimeFormatOptions` | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date shown on the trigger. |
28
- | `calendarPosition` | `Partial<ComputePositionConfig>` | | The floating UI configuration object of the popup. |
29
- | `onChange` | `(event, value) => void` | | Called whenever the selected date changes. |
23
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
24
+ <!-- props:CalendarDatePickerProps -->
25
+
26
+ | Name | Type | Default | Description |
27
+ | ------------------------------------------------------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
28
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the picker element. |
29
+ | `value` _bindable_ | `Date` &#124; `null` | `null` | The selected date. |
30
+ | `format` | `Intl.DateTimeFormatOptions` | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date rendered on the trigger. |
31
+ | `calendarPosition` | `Partial<ComputePositionConfig>` | | The floating UI configuration object of the calendar popup. Keys left out keep their default. |
32
+ | `onChange` | `(event: Event, value: Date` &#124; `null) => void` | | Called whenever the selected date changes. |
33
+ | `popupLabel` | `string` | `'Choose a date'` | The accessible name of the calendar popup, which is announced as a dialog. |
34
+ | `triggerRef` _bindable_ | `HTMLButtonElement` | | The DOM reference of the trigger button. |
35
+ | `popupRef` _bindable_ | `HTMLDivElement` | | The DOM reference of the calendar popup. |
36
+ | `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate`, `weekStart` from `CalendarViewProps` | | | |
37
+ | Element Attributes (`div`) | | | |
38
+
39
+ <!-- /props:CalendarDatePickerProps -->
30
40
 
31
41
  `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate` and `weekStart` are forwarded
32
42
  straight to the underlying `CalendarView`. All `div` HTML attributes are forwarded to the
package/dist/components/calendar-view/calendar-view-header.svelte CHANGED
@@ -7,9 +7,9 @@
7
7
  throw new Error('CalendarViewHeader must be used within a CalendarView');
8
8
  }
9
9
 
10
- let locale = context.config.locale;
10
+ let locale = $derived(context.config.locale);
11
11
 
12
- let weekStart = context.config.weekStart;
12
+ let weekStart = $derived(context.config.weekStart);
13
13
  </script>
14
14
 
15
15
  <!--
package/dist/components/calendar-view/calendar-view-header.svelte.d.ts CHANGED
@@ -1,18 +1,3 @@
1
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const CalendarViewHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type CalendarViewHeader = InstanceType<typeof CalendarViewHeader>;
1
+ declare const CalendarViewHeader: import("svelte").Component<Record<string, never>, {}, "">;
2
+ type CalendarViewHeader = ReturnType<typeof CalendarViewHeader>;
18
3
  export default CalendarViewHeader;
package/dist/components/calendar-view/calendar-view-months.svelte CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  const { selectMonth, updatePage } = CalendarContext.methods;
24
24
 
25
- let { locale, minDate, headers, maxDate, selectionMode } = CalendarContext.config;
25
+ let { locale, minDate, headers, maxDate, selectionMode } = $derived(CalendarContext.config);
26
26
 
27
27
  let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
28
28
 
package/dist/components/calendar-view/calendar-view-years.svelte CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  const { selectYear, updatePage } = CalendarContext.methods;
23
23
 
24
- let { locale, minDate, maxDate, selectionMode } = CalendarContext.config;
24
+ let { locale, minDate, maxDate, selectionMode } = $derived(CalendarContext.config);
25
25
 
26
26
  let { value, range, page, pageAnimationDirection } = $derived(CalendarContext.state);
27
27