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/dialog/docs/llms.md CHANGED
@@ -80,52 +80,77 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
80
80
 
81
81
  ## Dialog Props
82
82
 
83
- | Name | Type | Description |
84
- | -------------- | ----------------------------------- | -------------------------------------------------- |
85
- | `type` | `'modal' \| 'non-modal' \| 'alert'` | The behavior type of the dialog. Default: `modal`. |
86
- | `open` | bindable `boolean` | Whether the dialog is open. |
87
- | `onOpenChange` | `(open: boolean) => void` | Callback fired when the dialog opens or closes. |
88
- | `children` | `Snippet` | The dialog sub-components to render. |
83
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
84
+ <!-- props:DialogProps -->
85
+
86
+ | Name | Type | Default | Description |
87
+ | ----------------- | ----------------------------------------------- | --------- | ------------------------------------------------- |
88
+ | `type` | `'modal'` &#124; `'non-modal'` &#124; `'alert'` | `'modal'` | How the dialog behaves once open. |
89
+ | `open` _bindable_ | `boolean` | | Controls the open state of the dialog. |
90
+ | `onOpenChange` | `(open: boolean) => void` | | Called whenever the dialog opens or closes. |
91
+ | `children` | `Snippet` | | The parts of the dialog: a trigger and a surface. |
92
+
93
+ <!-- /props:DialogProps -->
89
94
 
90
95
  ## DialogTrigger Props
91
96
 
92
- | Name | Type | Description |
93
- | -------------- | ----------------------- | ---------------------------------------- |
94
- | `ref` | `HTMLButtonElement` | The DOM reference of the trigger button. |
95
- | `children` | `Snippet` | The content of the trigger button. |
96
- | ...ButtonProps | `ButtonProps<'button'>` | Inherits all `Button` props. |
97
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
98
+ <!-- props:DialogTriggerProps -->
99
+
100
+ | Name | Type | Default | Description |
101
+ | ----------------------- | ------------------- | ------- | ----------------------------------------- |
102
+ | `ref` | `HTMLButtonElement` | | The DOM reference of the trigger element. |
103
+ | `ButtonProps<'button'>` | | | |
104
+
105
+ <!-- /props:DialogTriggerProps -->
97
106
 
98
107
  ## DialogSurface Props
99
108
 
100
- | Name | Type | Description |
101
- | ------------- | ----------------------------------- | ------------------------------------------------ |
102
- | `ref` | bindable `HTMLDialogElement` | The DOM reference of the dialog element. |
103
- | `children` | `Snippet` | The content to render inside the dialog surface. |
104
- | ...Attributes | `HTMLAttributes<HTMLDialogElement>` | All native `<dialog>` attributes are forwarded. |
109
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
110
+ <!-- props:DialogSurfaceProps -->
111
+
112
+ | Name | Type | Default | Description |
113
+ | ----------------------------- | ------------------- | ------- | ---------------------------------------- |
114
+ | `ref` _bindable_ | `HTMLDialogElement` | | The DOM reference of the dialog element. |
115
+ | Element Attributes (`dialog`) | | | |
116
+
117
+ <!-- /props:DialogSurfaceProps -->
105
118
 
106
119
  ## DialogTitle Props
107
120
 
108
- | Name | Type | Description |
109
- | ------------- | ---------------------- | ------------------------------------------------------------- |
110
- | `as` | `'div' \| 'h1'`–`'h6'` | The element to render the title as. Default: `h3`. |
111
- | `ref` | bindable element | The DOM reference of the title element. |
112
- | `children` | `Snippet` | The title content. |
113
- | ...Attributes | Polymorphic | All HTML attributes of the chosen `as` element are forwarded. |
121
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
122
+ <!-- props:DialogTitleProps -->
123
+
124
+ | Name | Type | Default | Description |
125
+ | ---------------- | -------------------------------------------- | ------- | ---------------------------------------- |
126
+ | `ref` _bindable_ | `HTMLDivElement` &#124; `HTMLHeadingElement` | | The DOM reference of the title element. |
127
+ | `as` | `DialogTitleTag` | `'h3'` | The HTML element to render the title as. |
128
+ | HTML Attributes | | | |
129
+
130
+ <!-- /props:DialogTitleProps -->
114
131
 
115
132
  ## DialogContent Props
116
133
 
117
- | Name | Type | Description |
118
- | ------------- | -------------------------------- | --------------------------------------------- |
119
- | `ref` | `HTMLDivElement` | The DOM reference of the content element. |
120
- | `children` | `Snippet` | The content to render inside the dialog body. |
121
- | ...Attributes | `HTMLAttributes<HTMLDivElement>` | All native `<div>` attributes are forwarded. |
134
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
135
+ <!-- props:DialogContentProps -->
136
+
137
+ | Name | Type | Default | Description |
138
+ | -------------------------- | ---------------- | ------- | ----------------------------------------- |
139
+ | `ref` | `HTMLDivElement` | | The DOM reference of the content element. |
140
+ | Element Attributes (`div`) | | | |
141
+
142
+ <!-- /props:DialogContentProps -->
122
143
 
123
144
  ## DialogActions Props
124
145
 
125
- | Name | Type | Description |
126
- | ------------- | -------------------------------- | ------------------------------------------------------- |
127
- | `ref` | bindable `HTMLDivElement` | The DOM reference of the actions element. |
128
- | `position` | `'start' \| 'center' \| 'end'` | Horizontal alignment of the actions. Default: `end`. |
129
- | `fluid` | `boolean` | Whether the actions container uses a full-width layout. |
130
- | `children` | `Snippet` | The action elements to render, typically buttons. |
131
- | ...Attributes | `HTMLAttributes<HTMLDivElement>` | All native `<div>` attributes are forwarded. |
146
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
147
+ <!-- props:DialogActionsProps -->
148
+
149
+ | Name | Type | Default | Description |
150
+ | -------------------------- | ------------------------------------------ | ------- | ----------------------------------------------------------- |
151
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the actions element. |
152
+ | `fluid` | `boolean` | | Stretches every action to share the available width evenly. |
153
+ | `position` | `'start'` &#124; `'center'` &#124; `'end'` | `'end'` | Where the actions sit along the main axis. |
154
+ | Element Attributes (`div`) | | | |
155
+
156
+ <!-- /props:DialogActionsProps -->
package/dist/components/divider/docs/llms.md CHANGED
@@ -72,12 +72,17 @@ The `as` prop lets you change the underlying HTML element rendered by the divide
72
72
 
73
73
  ## Divider Props
74
74
 
75
- | Name | Type | Description |
76
- | -------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
77
- | `as` | `string` | The HTML element to render the divider as. Possible values: `'div'`, `'hr'`, `'span'`. |
78
- | `vertical` | `boolean` | Whether the divider is rendered vertically instead of horizontally. |
79
- | `alignContent` | `string` | The alignment of the content within the divider. Possible values: `'start'`, `'center'`, `'end'`. |
80
- | `appearance` | `string` | The appearance of the divider. Possible values: `'default'`, `'accent'`, `'standard'`, `'subtle'`. |
81
- | `inset` | `boolean` | Whether the divider has inline padding applied. |
82
- | `ref` | `HTMLDivElement \| HTMLHRElement \| HTMLSpanElement` | The DOM reference of the divider element, its type depends on the `as` prop. |
83
- | `children` | `Snippet` | The content to render as a label within the divider. |
75
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
76
+ <!-- props:DividerProps -->
77
+
78
+ | Name | Type | Default | Description |
79
+ | ---------------- | ------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------- |
80
+ | `as` | `'div'` &#124; `'hr'` &#124; `'span'` | `'div'` | The HTML element to render the divider as. |
81
+ | `ref` _bindable_ | `HTMLDivElement` &#124; `HTMLHRElement` &#124; `HTMLSpanElement` | | The DOM reference of the divider element. |
82
+ | `vertical` | `boolean` | | Renders the divider vertically instead of horizontally. |
83
+ | `alignContent` | `'start'` &#124; `'center'` &#124; `'end'` | `'center'` | Where the content of the divider sits along the line. |
84
+ | `inset` | `boolean` | | Removes the padding around the divider line. |
85
+ | `appearance` | `'accent'` &#124; `'standard'` &#124; `'subtle'` &#124; `'default'` | `'default'` | The divider line can be styled for greater emphasis or to be subtle. |
86
+ | HTML Attributes | | | |
87
+
88
+ <!-- /props:DividerProps -->
package/dist/components/dropdown/docs/llms.md CHANGED
@@ -50,21 +50,40 @@ Set the `multiple` prop to allow selecting more than one option.
50
50
 
51
51
  ## Component Props
52
52
 
53
- | Name | Type | Description |
54
- | ----------------- | ----------------------------- | --------------------------------------------------------------------- |
55
- | `value` | bindable `string \| string[]` | The selected value, or an array of values when `multiple` is set. |
56
- | `multiple` | `boolean` | Allow selecting more than one option. |
57
- | `placeholder` | `string` | Text shown when no option is selected. Default: `'Select an option'`. |
58
- | `disabled` | `boolean` | Disables user interaction. |
59
- | `flyoutMaxHeight` | `number` | Maximum height of the options flyout before it scrolls. |
60
- | `name` | `string` | Name of the underlying form control. |
61
- | `ref` | bindable `HTMLElement` | The DOM reference of the dropdown element. |
62
- | `children` | `Snippet` | The `DropdownOption` items to render. |
53
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
54
+ <!-- props:DropdownProps -->
55
+
56
+ | Name | Type | Default | Description |
57
+ | ---------------------------------------------------- | -------------------------- | -------------------- | ----------------------------------------------------------------------- |
58
+ | `value` _bindable_ | `string` &#124; `string[]` | `multiple ? [] : ''` | The selected value. An array of values when `multiple` is set. |
59
+ | `multiple` | `boolean` | | Allows more than one option to be selected at a time. |
60
+ | `placeholder` | `string` | `'Select an option'` | The text shown by the trigger while no option is selected. |
61
+ | `disabled` | `boolean` | | Disables the user interaction. |
62
+ | `name` | `string` &#124; `null` | `id` | The name submitted with the form. Falls back to the id of the dropdown. |
63
+ | `ref` _bindable_ | `HTMLDivElement` | | The DOM reference of the dropdown element. |
64
+ | `onclick` | `(e: MouseEvent) => void` | | Called when the dropdown is clicked. |
65
+ | `wrapperProps` | `HTMLAttributes` | | The attributes to spread on the wrapper element. |
66
+ | `buttonRef` _bindable_ | `HTMLButtonElement` | | The DOM reference of the button that opens the dropdown. |
67
+ | `buttonProps` | `HTMLButtonAttributes` | | The attributes to spread on the button that opens the dropdown. |
68
+ | `inputRef` | `HTMLInputElement` | | The DOM reference of the hidden input holding the value. |
69
+ | `flyoutRef` _bindable_ | `HTMLDivElement` | | The DOM reference of the flyout element. |
70
+ | `flyoutProps` | `FlyoutProps` | | The props to spread on the flyout. |
71
+ | `flyoutMaxHeight` | `string` | | The maximum height of the flyout, as a CSS length. |
72
+ | `listboxRef` _bindable_ | `HTMLUListElement` | | The DOM reference of the listbox element. |
73
+ | `listboxProps` | `ListViewProps` | | The props to spread on the listbox rendered inside the flyout. |
74
+ | `DropdownMultipleValue` &#124; `DropdownSingleValue` | | | |
75
+ | `HTMLInputAttributes` without `value`, `onclick` | | | |
76
+
77
+ <!-- /props:DropdownProps -->
63
78
 
64
79
  ## DropdownOption Props
65
80
 
66
- | Name | Type | Description |
67
- | ---------- | --------- | ------------------------------------------------------------------------------ |
68
- | `value` | `string` | The value of the option, used for selection. |
69
- | `text` | `string` | Plain-text label used to display the selection when the flyout is closed. |
70
- | `children` | `Snippet` | The content rendered for the option (can be rich content such as a `Persona`). |
81
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
82
+ <!-- props:DropdownOptionProps -->
83
+
84
+ | Name | Type | Default | Description |
85
+ | ------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------ |
86
+ | `text` | `string` | | The text shown by the dropdown once the option is selected. Falls back to the rendered children. |
87
+ | `ListViewItemProps<'li'>` | | | |
88
+
89
+ <!-- /props:DropdownOptionProps -->
package/dist/components/dropdown/dropdown.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import { onClickOutside } from 'runed';
3
3
  import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
4
4
  import { Flyout, ListView, ListViewItem } from '../../index.js';
5
- import type { DropdownProps } from './types.js';
5
+ import type { DropdownContext, DropdownProps } from './types.js';
6
6
  import { tick } from 'svelte';
7
7
  import { SvelteMap } from 'svelte/reactivity';
8
8
  import { setTabspotAttributes, unsetTabspotSection } from 'tabspot';
@@ -45,7 +45,7 @@
45
45
  // for every value here to keep rendering the selection once the list is closed.
46
46
  const optionLabels = new SvelteMap<string, string>();
47
47
 
48
- setDropdownContext({
48
+ const context: DropdownContext = $state({
49
49
  config: null,
50
50
  state: null,
51
51
  events: null,
@@ -54,6 +54,8 @@
54
54
  }
55
55
  });
56
56
 
57
+ setDropdownContext(context);
58
+
57
59
  const selectedValues = $derived(multiple ? (Array.isArray(value) ? value : []) : value ? [value as string] : []);
58
60
 
59
61
  const hasValue = $derived(selectedValues.length > 0);
package/dist/components/dropdown-select/docs/llms.md CHANGED
@@ -53,20 +53,34 @@ Set the `multiple` prop to allow selecting more than one option.
53
53
 
54
54
  ## Component Props
55
55
 
56
- | Name | Type | Description |
57
- | ----------------- | ----------------------------- | --------------------------------------------------------------------------- |
58
- | `value` | bindable `string \| string[]` | The selected value, or an array of values when `multiple` is set. |
59
- | `multiple` | `boolean` | Allow selecting more than one option. |
60
- | `placeholder` | `string` | Text shown when no option is selected. Default: `'Native Select Dropdown'`. |
61
- | `hidePlaceholder` | `boolean` | Hides the placeholder option. |
62
- | `ref` | bindable `HTMLSelectElement` | The DOM reference of the underlying `<select>` element. |
63
- | `wrapperRef` | bindable `HTMLDivElement` | The DOM reference of the wrapper element. |
64
- | `children` | `Snippet` | The `DropdownSelectOption` items to render. |
56
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
57
+ <!-- props:DropdownSelectProps -->
58
+
59
+ | Name | Type | Default | Description |
60
+ | ----------------------------- | -------------------------- | -------------------------- | ---------------------------------------------------------------------- |
61
+ | `value` _bindable_ | `string` &#124; `string[]` | `multiple ? [] : ''` | The selected value. An array of values when `multiple` is set. |
62
+ | `multiple` | `boolean` | | Allows more than one option to be selected at a time. |
63
+ | `placeholder` | `string` | `'Native Select Dropdown'` | The text shown while no option is selected. |
64
+ | `hidePlaceholder` | `boolean` | | Keeps the placeholder out of the option list once a value is selected. |
65
+ | `ref` _bindable_ | `HTMLSelectElement` | | The DOM reference of the select element. |
66
+ | `wrapperRef` _bindable_ | `HTMLDivElement` | | The DOM reference of the wrapper element. |
67
+ | `wrapperProps` | `HTMLAttributes` | | The attributes to spread on the wrapper element. |
68
+ | Element Attributes (`select`) | | | |
69
+
70
+ <!-- /props:DropdownSelectProps -->
65
71
 
66
72
  ## DropdownSelectOption Props
67
73
 
68
- | Name | Type | Description |
69
- | ---------- | --------- | ----------------------------------------------------------------------- |
70
- | `value` | `string` | The value of the option, used for selection. |
71
- | `text` | `string` | Plain-text label used to display the selection when the list is closed. |
72
- | `children` | `Snippet` | The content rendered for the option. |
74
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
75
+ <!-- props:DropdownSelectOptionProps -->
76
+
77
+ | Name | Type | Default | Description |
78
+ | ----------------------------- | ------------- | ------- | ------------------------------------------------------------- |
79
+ | `value` | `string` | | The value reported to the select when the option is picked. |
80
+ | `text` | `string` | | The label of the option. Falls back to the rendered children. |
81
+ | `disabled` | `boolean` | | Disables the user interaction. |
82
+ | `ref` _bindable_ | `HTMLElement` | | The DOM reference of the option element. |
83
+ | `children` | `Snippet` | | The content of the option, used when no `text` is given. |
84
+ | Element Attributes (`option`) | | | |
85
+
86
+ <!-- /props:DropdownSelectOptionProps -->
package/dist/components/expander/docs/llms.md CHANGED
@@ -74,15 +74,22 @@ You can easily add an icon to an expander's header using the `Icon` prop. You ca
74
74
 
75
75
  ## Component Props
76
76
 
77
- | Name | Type | Description |
78
- | ------------- | ---------------------- | ------------------------------------------------------------------------- |
79
- | `header` | `string` | Label of the expander. |
80
- | `description` | `string` | Description to render below the header. |
81
- | `direction` | `string` | The opening direction of the expander. Possible values: `'down'`, `'up'`. |
82
- | `justify` | `boolean` | Whether the expander is justified to the full width of the container. |
83
- | `disabled` | `boolean` | Disables the user interaction. |
84
- | `animation` | `object` | The animation configuration. |
85
- | `expanded` | `boolean` | Controls the opening state of the expander. |
86
- | `element` | `HTMLDetailsElement` | The DOM reference of the expander element. |
87
- | `Icon` | `Snippet \| Component` | The icon to display before the label. |
88
- | `children` | `Snippet` | The children elements to render inside the expander. |
77
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
78
+ <!-- props:ExpanderProps -->
79
+
80
+ | Name | Type | Default | Description |
81
+ | ------------------------------ | --------------------------------------- | -------- | ------------------------------------------------------------------------- |
82
+ | `header` | `string` | | Label of the expander. |
83
+ | `description` | `string` | | Description to render below the header. |
84
+ | `direction` | `'down'` &#124; `'up'` | `'down'` | Set the opening direction of the expander. |
85
+ | `justify` | `boolean` | `false` | The expander is justified to the full width of the container. |
86
+ | `disabled` | `boolean` | `false` | Disables the user interaction. |
87
+ | `animation` | `{ duration: number; easing: string; }` | | The animation configuration. Reduced motion is always honoured over this. |
88
+ | `expanded` _bindable_ | `boolean` | `false` | Control the opening state of the expander. |
89
+ | `ref` _bindable_ | `HTMLDetailsElement` | | The DOM reference of the expander element. |
90
+ | `Icon` | `Snippet` &#124; `Component` | | The icon to display before the label. |
91
+ | `summaryRef` _bindable_ | `HTMLElement` | | The DOM reference of the summary element. |
92
+ | `summaryProps` | `HTMLAttributes` | | The props to spread on the summary element. |
93
+ | Element Attributes (`details`) | | | |
94
+
95
+ <!-- /props:ExpanderProps -->
package/dist/components/flyout/docs/llms.md CHANGED
@@ -18,14 +18,20 @@ The Flyout.
18
18
 
19
19
  ## Component Props
20
20
 
21
- | Name | Type | Description |
22
- | ------------------- | ------------------------------------------------- | --------------------------------------------------------------- |
23
- | `ref` | Bindable `HTMLElement` | The DOM reference to the flyout element. |
24
- | `children` | `Snippet` | The content to be displayed inside the flyout. |
25
- | `floating` | `boolean` | Whether to use Floating UI for positioning. Default: false. |
26
- | `reference` | `HTMLElement` | The reference element for Floating UI. |
27
- | `placement` | `Placement` | The placement for Floating UI positioning. Default: 'bottom'. |
28
- | `onPlacementChange` | `(placement: Placement) => void` | A callback that is called when the placement changes. |
29
- | `roundCorners` | `'all' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Which corners to round. Default: 'all'. |
30
- | `offset` | `number` | The offset for Floating UI positioning. Default: 8. |
31
- | Element Attributes | | All other attributes that can be applied to the flyout element. |
21
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
22
+ <!-- props:FlyoutProps -->
23
+
24
+ | Name | Type | Default | Description |
25
+ | -------------------------- | ------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------- |
26
+ | `ref` _bindable_ | `HTMLElement` | | The DOM reference of the flyout element. |
27
+ | `children` | `Snippet` | | The content of the flyout. |
28
+ | `floating` | `boolean` | `false` | Positions the flyout with floating-ui instead of leaving it in the normal flow. |
29
+ | `reference` | `HTMLElement` | | The element the flyout is positioned against when `floating` is set. |
30
+ | `placement` | `Placement` | `'bottom'` | Where the flyout is placed relative to its reference. |
31
+ | `onPlacementChange` | `(placement: Placement) => void` | | Called whenever floating-ui settles on a different placement. |
32
+ | `roundCorners` | `'all'` &#124; `'top'` &#124; `'bottom'` &#124; `'left'` &#124; `'right'` | `'all'` | Which corners of the flyout are rounded. |
33
+ | `offset` | `number` | `8` | The distance in pixels between the flyout and its reference. |
34
+ | `placementConfig` | `AutoPlacementOptions` | | The auto placement configuration handed over to floating-ui. |
35
+ | Element Attributes (`div`) | | | |
36
+
37
+ <!-- /props:FlyoutProps -->
package/dist/components/hyperlink/docs/llms.md CHANGED
@@ -24,10 +24,14 @@ Disables the hyperlink and prevents navigation.
24
24
 
25
25
  ## Component Props
26
26
 
27
- | Name | Type | Description |
28
- | ------------------ | ------------------- | ----------------------------------------------------------------------- |
29
- | `href` | `string` | The URL to navigate to when the link is clicked. |
30
- | `disabled` | `boolean` | Disables the hyperlink and prevents navigation. |
31
- | `children` | `Snippet` | The content of the hyperlink. |
32
- | `ref` | `HTMLAnchorElement` | A bindable reference to the underlying anchor element. |
33
- | Element Attributes | | You can use any valid HTML anchor attributes (e.g., target, rel, etc.). |
27
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
28
+ <!-- props:HyperlinkProps -->
29
+
30
+ | Name | Type | Default | Description |
31
+ | ------------------------ | ------------------- | ------- | ---------------------------------------- |
32
+ | `href` | `string` | `'#'` | The URL the hyperlink points to. |
33
+ | `disabled` | `boolean` | | Disables the user interaction. |
34
+ | `ref` _bindable_ | `HTMLAnchorElement` | | The DOM reference of the anchor element. |
35
+ | Element Attributes (`a`) | | | |
36
+
37
+ <!-- /props:HyperlinkProps -->
package/dist/components/info-bar/docs/llms.md CHANGED
@@ -70,12 +70,18 @@ The hideCloseButton prop allows you to hide the close button in the InfoBar.
70
70
 
71
71
  ## Component Props
72
72
 
73
- | Name | Type | Description |
74
- | ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
75
- | `status` | `string` | The status of the InfoBar. Possible values: 'information', 'attention', 'warning', 'critical', 'success'. |
76
- | `style` | `string` | The style of the InfoBar. Possible values: 'inline', 'multiline'. |
77
- | `title` | `string` | The title of the InfoBar. |
78
- | `icon` | `Snippet \| Component` | The icon to display in the InfoBar. |
79
- | `iconSize` | `number` | The size of the icon in pixels. Default: 20. |
80
- | `hideCloseButton` | `boolean` | Whether to hide the close button. Default: false. |
81
- | `children` | `Snippet` | The child elements to render inside the InfoBar. |
73
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
74
+ <!-- props:InfoBarProps -->
75
+
76
+ | Name | Type | Default | Description |
77
+ | -------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------- |
78
+ | `status` | `'information'` &#124; `'attention'` &#124; `'warning'` &#124; `'critical'` &#124; `'success'` | `'information'` | The severity of the message, which picks the icon and the colors. |
79
+ | `style` | `'inline'` &#124; `'multiline'` | `'inline'` | Lays the message out on a single line, or stacked below the title. |
80
+ | `title` | `string` | | The title of the InfoBar. |
81
+ | `icon` | `Snippet` &#124; `Component` | | Custom icon, rendered instead of the one the `status` would pick on its own. |
82
+ | `iconSize` | `number` | `20` | The size of the icon in pixels. |
83
+ | `hideCloseButton` | `boolean` | | Removes the button that dismisses the InfoBar. |
84
+ | `children` | `Snippet` | | The message of the InfoBar. |
85
+ | Element Attributes (`div`) | | | |
86
+
87
+ <!-- /props:InfoBarProps -->
package/dist/components/label/docs/llms.md CHANGED
@@ -54,14 +54,18 @@ Pass a `required` object to mark the label as required and render a required ind
54
54
 
55
55
  ## Component Props
56
56
 
57
- | Name | Type | Description |
58
- | --------------- | ------------------------------------------- | ------------------------------------------------------------------------------- |
59
- | `label` | `string` | The text content of the label. Default: `'Label Element'`. |
60
- | `size` | `'small' \| 'medium' \| 'large'` | The size of the label text. Default: `'medium'`. |
61
- | `weight` | `'regular' \| 'semibold'` | The font weight of the label. Default: `'regular'`. |
62
- | `labelPosition` | `'before' \| 'after' \| 'above' \| 'below'` | Position of the label text relative to the wrapped content. Default: `'after'`. |
63
- | `required` | `{ message?: string; abbr?: string }` | Marks the label as required and renders a required indicator (default `*`). |
64
- | `disabled` | `boolean` | Renders the label in a disabled style and disables pointer events. |
65
- | `class` | `string` | Additional classes applied to the label element. |
66
- | `ref` | bindable `HTMLLabelElement` | The DOM reference of the label element. |
67
- | `children` | `Snippet` | The content wrapped by the label (typically a form control). |
57
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
58
+ <!-- props:LabelProps -->
59
+
60
+ | Name | Type | Default | Description |
61
+ | ---------------------------- | ------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------- |
62
+ | `label` | `string` | `'Label Element'` | The text of the label. Falls back to the rendered children. |
63
+ | `size` | `'small'` &#124; `'medium'` &#124; `'large'` | `'medium'` | The size of the label text. |
64
+ | `weight` | `'regular'` &#124; `'semibold'` | `'regular'` | The weight of the label text. |
65
+ | `labelPosition` | `'before'` &#124; `'after'` &#124; `'above'` &#124; `'below'` | `'after'` | Where the label sits relative to the field it describes. |
66
+ | `required` | `{ abbr?: string; message: string; }` | | Marks the field as required, and describes why through the given message. |
67
+ | `disabled` | `boolean` | | Renders the label as disabled, to match the field it describes. |
68
+ | `ref` _bindable_ | `HTMLLabelElement` | | The DOM reference of the label element. |
69
+ | Element Attributes (`label`) | | | |
70
+
71
+ <!-- /props:LabelProps -->
package/dist/components/list-view/docs/llms.md CHANGED
@@ -81,30 +81,40 @@ Add and configure a checkbox for the element. You can use the same props for the
81
81
 
82
82
  ## ListView Props
83
83
 
84
- | Name | Type | Description |
85
- | ------------------- | --------------------------- | --------------------------------------------------------------------------------------------- |
86
- | `as` | `string` | The HTML tag to use for the list container. Possible values: ul, ol, div. |
87
- | `selectionMode` | `string` | Selection mode for the list. Possible values: single, multiselect, extended. |
88
- | `navigationMode` | `string` | Navigation mode for keyboard navigation. Possible values: items, composite. |
89
- | `selectedItems` | `string[]` | The currently selected item values. |
90
- | `shape` | `string` | The shape of the list items. Possible values: rounded, circular, square. |
91
- | `onSelectionChange` | `(Event, string[]) => void` | Callback fired when the selection changes. |
92
- | `element` | Dynamic | Reference to the list DOM element. Depends on the selected as value. |
93
- | `children` | Only `ListViewItem` | The ListViewItem children of the list. |
94
- | Element Attributes | Dynamic | Based on the chosen as value, you will have autocomplete for all HTML attributes of that tag. |
84
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
85
+ <!-- props:ListViewProps -->
86
+
87
+ | Name | Type | Default | Description |
88
+ | -------------------------- | --------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
89
+ | `selectionMode` | `'none'` &#124; `'single'` &#124; `'multiselect'` &#124; `'extended'` | `'none'` | How many items can be selected, and how the selection is made. |
90
+ | `navigationMode` | `'items'` &#124; `'composite'` | `'items'` | Whether the list itself takes a single tab stop, or every item takes its own. |
91
+ | `selectedItems` _bindable_ | `string[]` | | The values of the selected items. |
92
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | The items can have a circular, rounded or square shape. |
93
+ | `onSelectionChange` | `(e: Event, selectedItems: string[]` &#124; `[]) => void` | | Called whenever the selection changes. |
94
+ | `as` | `'ul'` &#124; `'ol'` &#124; `'div'` | `'ul'` | The HTML element to render the list as. |
95
+ | `ref` _bindable_ | `HTMLUListElement` &#124; `HTMLOListElement` &#124; `HTMLDivElement` | | The DOM reference of the list element. |
96
+ | `disableTabspot` | `boolean` | `false` | Opts the list out of the tabspot focus management, to wire your own. |
97
+ | HTML Attributes | | | |
98
+
99
+ <!-- /props:ListViewProps -->
95
100
 
96
101
  ## ListViewItem Props
97
102
 
98
- | Name | Type | Description |
99
- | ------------------ | ------------------------------ | --------------------------------------------------------------------------------------------- |
100
- | `as` | `string` | The HTML tag to use for the item container. Possible values: li, a, div. |
101
- | `active` | `boolean` | Whether the item is currently active or selected. |
102
- | `shape` | `string` | The shape of the item. Possible values: rounded, circular, square. |
103
- | `value` | `string` | The value of the item used for selection. |
104
- | `onAction` | `(MouseEvent, string) => void` | Callback fired when the item is activated. |
105
- | `onFocus` | `(Event, string) => void` | Callback fired when the item receives focus. |
106
- | `role` | `string` | ARIA role for the item. Possible values: treeitem, menuitem, option, row. |
107
- | `disabled` | `boolean` | Whether the item is disabled. |
108
- | `checkmark` | `object` | Props for the checkmark or checkbox. |
109
- | `children` | `Snippet` | The content of the item. |
110
- | Element Attributes | Dynamic | Based on the chosen as value, you will have autocomplete for all HTML attributes of that tag. |
103
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
104
+ <!-- props:ListViewItemProps -->
105
+
106
+ | Name | Type | Default | Description |
107
+ | ---------------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------ |
108
+ | `as` | `'li'` &#124; `'a'` &#124; `'div'` | `'li'` | The HTML element to render the item as. |
109
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | | The item can have a circular, rounded or square shape. Inherited from the list by default. |
110
+ | `value` | `string` | | The value reported to the list when the item is selected. Falls back to a generated id. |
111
+ | `active` | `boolean` | | Renders the item in its pressed state. |
112
+ | `role` | `'treeitem'` &#124; `'menuitem'` &#124; `'option'` &#124; `'row'` | | The ARIA role of the item. Derived from the list by default. |
113
+ | `disabled` | `boolean` | | Disables the user interaction. |
114
+ | `checkmark` | `CheckboxProps` | | The props to spread on the checkbox rendered when the list is multiselect. |
115
+ | `onAction` | `(e: MouseEvent, value: string) => void` | | Called when the item is clicked or activated with the keyboard. |
116
+ | `onfocus` | `(e: Event, value: string) => void` | | Called when the item receives the focus. |
117
+ | `ref` _bindable_ | `HTMLLIElement` &#124; `HTMLAnchorElement` &#124; `HTMLDivElement` | | The DOM reference of the item element. |
118
+ | HTML Attributes | | | |
119
+
120
+ <!-- /props:ListViewItemProps -->
package/dist/components/list-view/list-view-item.svelte CHANGED
@@ -24,14 +24,20 @@
24
24
  ...attributes
25
25
  }: ListViewItemProps<T> = $props();
26
26
 
27
- // svelte-ignore state_referenced_locally
28
- if (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
27
+ /**
28
+ * The tag the invariant rules over. The markup renders it through here, so it is checked
29
+ * during SSR and on every prop update rather than only once on mount.
30
+ */
31
+ const _as = $derived.by(() => {
32
+ if (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
33
+ return as;
34
+ });
29
35
 
30
36
  const CONTEXT = getListViewContext();
31
37
 
32
38
  if (!CONTEXT) throw new Error('ListViewItem must be used within a ListView');
33
39
 
34
- const { shape: _shape } = CONTEXT.config;
40
+ const _shape = $derived(CONTEXT.config.shape);
35
41
  const { state: _state } = CONTEXT;
36
42
  const { handleSelection, registerItem, unregisterItem, getChildrenRole } = CONTEXT.methods;
37
43
  const role = $derived(_role || getChildrenRole(as));
@@ -58,7 +64,7 @@
58
64
  </script>
59
65
 
60
66
  <svelte:element
61
- this={as}
67
+ this={_as}
62
68
  {role}
63
69
  data-value={value}
64
70
  aria-selected={role === 'option' ? active : undefined}