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/menu/menu.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { getMenuContext, setMenuContext } from './menu.svelte.js';
3
- import type { MenuContext, MenuProps, MenuState } from './types.js';
3
+ import type { MenuContext, MenuProps } from './types.js';
4
4
 
5
5
  let {
6
6
  checkedValues = {} as Record<string, string[]>,
@@ -25,101 +25,112 @@
25
25
 
26
26
  let locked = $state(false);
27
27
 
28
- let config: MenuContext['config'] = $derived.by(() => {
29
- if (!PARENT_CONTEXT) {
30
- return {
31
- id,
32
- isSubMenu: false,
33
- hasCheckmarks,
34
- hasIcons,
35
- openingDelay,
36
- openOnHover,
37
- persistOnItemActivation,
38
- positionConfig,
39
- parentHasCheckmarks: false,
40
- parentHasIcons: false
41
- };
42
- } else {
43
- return {
44
- ...PARENT_CONTEXT.config,
45
- isSubMenu: true,
46
- id,
47
- hasCheckmarks,
48
- hasIcons,
49
- parentHasCheckmarks: !!PARENT_CONTEXT.config.hasCheckmarks,
50
- parentHasIcons: !!PARENT_CONTEXT.config.hasIcons
51
- };
52
- }
53
- });
54
-
55
- const _state: MenuState = {
56
- get open() {
57
- return open;
58
- },
59
- set open(v) {
60
- open = v;
61
- },
62
- get ref() {
63
- return ref;
64
- },
65
- set ref(v) {
66
- ref = v;
67
- },
68
- get locked() {
69
- return locked;
28
+ const context: MenuContext = $state({
29
+ // A submenu carries its own id, icons and checkmarks, and inherits the opening behaviour
30
+ // and placement of the menu it hangs off.
31
+ config: {
32
+ get id() {
33
+ return id;
34
+ },
35
+ get isSubMenu() {
36
+ return !!PARENT_CONTEXT;
37
+ },
38
+ get hasCheckmarks() {
39
+ return hasCheckmarks;
40
+ },
41
+ get hasIcons() {
42
+ return hasIcons;
43
+ },
44
+ get parentHasCheckmarks() {
45
+ return !!PARENT_CONTEXT?.config.hasCheckmarks;
46
+ },
47
+ get parentHasIcons() {
48
+ return !!PARENT_CONTEXT?.config.hasIcons;
49
+ },
50
+ get openingDelay() {
51
+ return PARENT_CONTEXT ? PARENT_CONTEXT.config.openingDelay : openingDelay;
52
+ },
53
+ get openOnHover() {
54
+ return PARENT_CONTEXT ? PARENT_CONTEXT.config.openOnHover : openOnHover;
55
+ },
56
+ get persistOnItemActivation() {
57
+ return PARENT_CONTEXT ? PARENT_CONTEXT.config.persistOnItemActivation : persistOnItemActivation;
58
+ },
59
+ get positionConfig() {
60
+ return PARENT_CONTEXT ? PARENT_CONTEXT.config.positionConfig : positionConfig;
61
+ }
70
62
  },
71
- set locked(v) {
72
- locked = v;
63
+ state: {
64
+ get open() {
65
+ return open;
66
+ },
67
+ set open(v) {
68
+ open = v;
69
+ },
70
+ get ref() {
71
+ return ref;
72
+ },
73
+ set ref(v) {
74
+ ref = v;
75
+ },
76
+ get locked() {
77
+ return locked;
78
+ },
79
+ set locked(v) {
80
+ locked = v;
81
+ },
82
+ get checkedValues() {
83
+ return checkedValues;
84
+ },
85
+ set checkedValues(v) {
86
+ checkedValues = v;
87
+ }
73
88
  },
74
- get checkedValues() {
75
- return checkedValues;
89
+ // A submenu reports to the root menu, so its own callbacks are never the ones invoked.
90
+ events: PARENT_CONTEXT?.events ?? {
91
+ onCheckedValueChange: (e, value) => onCheckedValueChange?.(e, value),
92
+ onOpenChange: (e, opened) => onOpenChange?.(e, opened)
76
93
  },
77
- set checkedValues(v) {
78
- checkedValues = v;
79
- }
80
- };
94
+ methods: {
95
+ toggle: (e: Event) => {
96
+ const { state, events } = context;
81
97
 
82
- let events: MenuContext['events'] = $derived.by(() => {
83
- if (!PARENT_CONTEXT) {
84
- return {
85
- onCheckedValueChange: (e, value) => onCheckedValueChange?.(e, value),
86
- onOpenChange: (e, opened) => onOpenChange?.(e, opened)
87
- };
88
- } else {
89
- return PARENT_CONTEXT.events;
90
- }
91
- });
98
+ state.open = !state.open;
99
+ events.onOpenChange?.(e, state.open);
100
+ },
101
+ open: (e: Event) => {
102
+ const { state, events } = context;
92
103
 
93
- let methods: MenuContext['methods'] = $derived({
94
- toggle: (e: Event) => {
95
- _state.open = !_state.open;
96
- events.onOpenChange?.(e, _state.open);
97
- },
98
- open: (e: Event) => {
99
- _state.open = true;
100
- events.onOpenChange?.(e, _state.open);
101
- },
102
- close: (e: Event) => {
103
- _state.open = false;
104
- events.onOpenChange?.(e, _state.open);
105
- },
106
- toggleCheckbox: (e: Event, value: string, name: string) => {
107
- const current = _state.checkedValues?.[name] ?? [];
108
- const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
109
- _state.checkedValues = { ..._state.checkedValues, [name]: updated };
110
- events.onCheckedValueChange?.(e, _state.checkedValues!);
111
- },
112
- toggleRadio: (e: Event, value: string, name: string) => {
113
- if (!_state.checkedValues?.[name]?.includes(value)) {
114
- _state.checkedValues = { ..._state.checkedValues, [name]: [value] };
115
- methods.close?.(e);
116
- events.onCheckedValueChange?.(e, _state.checkedValues!);
104
+ state.open = true;
105
+ events.onOpenChange?.(e, state.open);
106
+ },
107
+ close: (e: Event) => {
108
+ const { state, events } = context;
109
+
110
+ state.open = false;
111
+ events.onOpenChange?.(e, state.open);
112
+ },
113
+ toggleCheckbox: (e: Event, value: string, name: string) => {
114
+ const { state, events } = context;
115
+
116
+ const current = state.checkedValues?.[name] ?? [];
117
+ const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
118
+ state.checkedValues = { ...state.checkedValues, [name]: updated };
119
+ events.onCheckedValueChange?.(e, state.checkedValues!);
120
+ },
121
+ toggleRadio: (e: Event, value: string, name: string) => {
122
+ const { state, events, methods } = context;
123
+
124
+ if (!state.checkedValues?.[name]?.includes(value)) {
125
+ state.checkedValues = { ...state.checkedValues, [name]: [value] };
126
+ methods.close?.(e);
127
+ events.onCheckedValueChange?.(e, state.checkedValues!);
128
+ }
117
129
  }
118
130
  }
119
131
  });
120
132
 
121
- // svelte-ignore state_referenced_locally
122
- setMenuContext({ config, state: _state, events, methods });
133
+ setMenuContext(context);
123
134
  </script>
124
135
 
125
136
  {@render children?.()}
package/dist/components/number-box/docs/llms.md CHANGED
@@ -29,9 +29,13 @@ The variant prop determines the visual style of the NumberBox.
29
29
 
30
30
  ## Component Props
31
31
 
32
- | Name | Type | Description |
33
- | ------------- | ----------------------- | ------------------------------------------------------------- |
34
- | `value` | `number` | The current value of the NumberBox. |
35
- | `variant` | `'inline' \| 'compact'` | The visual style of the NumberBox, e.g., 'inline', 'compact'. |
36
- | `ref` | `HTMLInputElement` | The DOM reference to the input element. |
37
- | TextBox Props | | Additional props inherited from the TextBox component. |
32
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
33
+ <!-- props:NumberBoxProps -->
34
+
35
+ | Name | Type | Default | Description |
36
+ | ----------------------------- | ----------------------------- | ---------- | ----------------------------------------------------- |
37
+ | `value` _bindable_ | `number` | | The current value of the input. |
38
+ | `variant` | `'inline'` &#124; `'compact'` | `'inline'` | How the increment and decrement buttons are laid out. |
39
+ | `TextBoxProps` without `type` | | | |
40
+
41
+ <!-- /props:NumberBoxProps -->
package/dist/components/persona/docs/llms.md CHANGED
@@ -91,17 +91,22 @@ A Persona can display presence information, such as online status or availabilit
91
91
 
92
92
  ## Component Props
93
93
 
94
- | Name | Type | Description |
95
- | --------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
96
- | `name` | `string` | The full name of the person. |
97
- | `primaryText` | `string` | Main text, usually the person's role or title. |
98
- | `secondaryText` | `string` | Secondary text, for example location or status. |
99
- | `tertiaryText` | `string` | Tertiary text, for example team or department. |
100
- | `size` | `number` | Size in pixels for the avatar and text. |
101
- | `textAlign` | `string` | Alignment of the text. Possible values are 'left', 'center', and 'right'. |
102
- | `textPosition` | `string` | Position of the text relative to the avatar. Possible values are 'top', 'bottom', 'left', and 'right'. |
103
- | `avatarAlign` | `string` | Cross-axis alignment of the avatar relative to the text. Possible values are 'start', 'center', and 'end'. |
104
- | `avatar` | `object` | Avatar props object. See the Avatar component for details. |
105
- | `presence` | `object` | Presence object, for example { status: 'available' }. Status values are 'available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'blocked', and 'unknown'. |
106
- | `presenceOnly` | `boolean` | Shows only the presence indicator, with no avatar or text. |
107
- | `element` | `HTMLDivElement` | The DOM reference of the persona root element. |
94
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
95
+ <!-- props:PersonaProps -->
96
+
97
+ | Name | Type | Default | Description |
98
+ | -------------------- | ---------------------------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------- |
99
+ | `name` | `string` | | The name of the person or entity represented by this Persona. It is also used by the avatar for its initials. |
100
+ | `size` | `number` | `42` | The size of the avatar in pixels. The text scales with it. |
101
+ | `primaryText` | `string` | | Text to display below the name. |
102
+ | `secondaryText` | `string` | | Text to display below the primary text. |
103
+ | `tertiaryText` | `string` | | Text to display below the secondary text. |
104
+ | `textAlign` | `'left'` &#124; `'center'` &#124; `'right'` | `'left'` | How the text block is aligned. |
105
+ | `textPosition` | `'top'` &#124; `'bottom'` &#124; `'left'` &#124; `'right'` | `'right'` | Where the text block sits relative to the avatar. |
106
+ | `presenceOnly` | `boolean` | | Renders the presence badge on its own, without the avatar behind it. |
107
+ | `avatarAlign` | `'start'` &#124; `'center'` &#124; `'end'` | `'center'` | How the avatar is aligned against the text block. |
108
+ | `element` _bindable_ | `HTMLDivElement` | | The DOM reference of the persona element. |
109
+ | `avatar` | `AvatarProps` | | The props to spread on the avatar. |
110
+ | `presence` | `BadgePresence` | | The presence badge to display as a status indicator. |
111
+
112
+ <!-- /props:PersonaProps -->
package/dist/components/progress-bar/docs/llms.md CHANGED
@@ -55,13 +55,21 @@ The status prop allows you to set the status of the progress bar to 'paused' or
55
55
 
56
56
  ## Component Props
57
57
 
58
- | Name | Type | Description |
59
- | ----------------------- | ------------------------------ | --------------------------------------------------------- |
60
- | `value` | bindable `number \| undefined` | The current progress value of the bar, between 0 and 100. |
61
- | `indeterminate` | `boolean` | If true, the progress bar enters an indeterminate state. |
62
- | `hideRail` | `boolean` | If true, the progress bar rail is hidden. |
63
- | `status` | `'paused' \| 'error'` | The current status of the progress bar. |
64
- | `element` | bindable `SVGElement` | The DOM reference of the progress bar element. |
65
- | `railElement` | bindable `SVGRectElement` | The DOM reference of the rail element. |
66
- | `trackElement` | bindable `SVGRectElement` | The DOM reference of the track element. |
67
- | `secondaryTrackElement` | bindable `SVGRectElement` | The DOM reference of the secondary track element. |
58
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
59
+ <!-- props:ProgressBarProps -->
60
+
61
+ | Name | Type | Default | Description |
62
+ | ---------------------------------- | --------------------------- | ------- | ------------------------------------------------------------------------------- |
63
+ | `value` _bindable_ | `number` &#124; `null` | | The current value of the progress bar. Leave it unset for an indeterminate bar. |
64
+ | `class` | `string` | | The class to apply to the progress bar. |
65
+ | `ref` _bindable_ | `SVGElement` | | The DOM reference of the progress bar element. |
66
+ | `min` | `number` | `0` | The minimum value of the progress bar. |
67
+ | `max` | `number` | `100` | The maximum value of the progress bar. |
68
+ | `hideRail` | `boolean` | | Whether to hide the rail element. |
69
+ | `railElement` _bindable_ | `SVGRectElement` | | The DOM reference of the rail element. |
70
+ | `secondaryTrackElement` _bindable_ | `SVGRectElement` | | The DOM reference of the secondary track element, used while indeterminate. |
71
+ | `trackElement` _bindable_ | `SVGRectElement` | | The DOM reference of the track element. |
72
+ | `status` | `'paused'` &#124; `'error'` | | The current status of the progress bar, which recolors the track. |
73
+ | Element Attributes | | | |
74
+
75
+ <!-- /props:ProgressBarProps -->
package/dist/components/progress-ring/docs/llms.md CHANGED
@@ -62,15 +62,22 @@ The status prop allows you to set the status of the progress ring for visual fee
62
62
 
63
63
  ## Component Props
64
64
 
65
- | Name | Type | Description |
66
- | --------------- | --------------------- | ----------------------------------------------------------------- |
67
- | `value` | `number` | The percentage of the progress ring that is filled. |
68
- | `min` | `number` | The minimum value of the progress ring. Default is 0. |
69
- | `max` | `number` | The maximum value of the progress ring. Default is 100. |
70
- | `size` | `number` | The size of the progress ring in pixels. Default is 32. |
71
- | `indeterminate` | `boolean` | If true, the progress ring displays an indeterminate state. |
72
- | `hideRail` | `boolean` | If true, the progress ring hides the rail. |
73
- | `status` | `'paused' \| 'error'` | The status of the progress ring, for example 'paused' or 'error'. |
74
- | `ref` | `SVGElement` | The DOM reference to the SVG element. |
75
- | `railElement` | `SVGCircleElement` | The DOM reference to the rail element. |
76
- | `trackElement` | `SVGCircleElement` | The DOM reference to the track element. |
65
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
66
+ <!-- props:ProgressRingProps -->
67
+
68
+ | Name | Type | Default | Description |
69
+ | ------------------------- | --------------------------- | ------- | ------------------------------------------------------------------ |
70
+ | `value` _bindable_ | `number` | `0` | The current value of the progress ring. |
71
+ | `min` | `number` | `0` | The minimum value of the progress ring. |
72
+ | `max` | `number` | `100` | The maximum value of the progress ring. |
73
+ | `indeterminate` | `boolean` | | Spins the ring continuously instead of reporting a value. |
74
+ | `hideRail` | `boolean` | | Whether to hide the rail element. |
75
+ | `size` | `number` | `32` | The size of the progress ring in pixels. |
76
+ | `ref` _bindable_ | `SVGElement` | | The DOM reference of the progress ring element. |
77
+ | `railElement` _bindable_ | `SVGCircleElement` | | The DOM reference of the rail element. |
78
+ | `trackElement` _bindable_ | `SVGCircleElement` | | The DOM reference of the track element. |
79
+ | `status` | `'paused'` &#124; `'error'` | | The current status of the progress ring, which recolors the track. |
80
+ | `class` | `string` | | The class to apply to the progress ring. |
81
+ | Element Attributes | | | |
82
+
83
+ <!-- /props:ProgressRingProps -->
package/dist/components/radio-button/docs/llms.md CHANGED
@@ -54,11 +54,16 @@ The checked prop allows you to control the checked state of the radio button. Th
54
54
 
55
55
  ## Component Props
56
56
 
57
- | Name | Type | Description |
58
- | ------------------ | ------------------ | ------------------------------------------------------------------------------------ |
59
- | `label` | `string` | The label text for the radio button. |
60
- | `group` | `unknown` | Bindable value representing a group of radio inputs that the input will be bound to. |
61
- | `checked` | `boolean` | Indicates whether the radio button is checked. |
62
- | `disabled` | `boolean` | Indicates whether the radio button is disabled. |
63
- | `ref` | `HTMLInputElement` | Gets the DOM reference of the radio button element. |
64
- | Element Attributes | | All standard HTML attributes for input elements can be applied. |
57
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
58
+ <!-- props:RadioButtonProps -->
59
+
60
+ | Name | Type | Default | Description |
61
+ | ---------------------------- | ------------------ | ------- | ------------------------------------------------------------------------------------ |
62
+ | `label` | `string` | | The label displayed next to the radio button. |
63
+ | `group` _bindable_ | `unknown` | | Bindable value representing a group of radio inputs that the input will be bound to. |
64
+ | `checked` _bindable_ | `boolean` | `false` | Whether the radio button is selected. |
65
+ | `ref` _bindable_ | `HTMLInputElement` | | The DOM reference of the radio button element. |
66
+ | `labelAttributes` | `PolymorphicProps` | | The attributes to spread on the label wrapping the radio button. |
67
+ | Element Attributes (`input`) | | | |
68
+
69
+ <!-- /props:RadioButtonProps -->
package/dist/components/skeleton/docs/llms.md CHANGED
@@ -57,11 +57,16 @@ The `as` prop lets you choose the HTML tag used to render the skeleton. Possible
57
57
 
58
58
  ## Component Props
59
59
 
60
- | Name | Type | Description |
61
- | ------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
62
- | `as` | `'div' \| 'span'` | The HTML element used to render the skeleton. Default: `'div'`. |
63
- | `animation` | `'wave' \| 'pulse'` | The animation type for the skeleton. Default: `'wave'`. |
64
- | `shape` | `'circle' \| 'rounded' \| 'square'` | The shape of the skeleton. Default: `'rounded'`. |
65
- | `justify` | `boolean` | If `true` the skeleton fills the full width of its container; otherwise it keeps a `1:1` aspect ratio based on its width. |
66
- | `element` | `HTMLElement` | The DOM reference of the skeleton element (`bind:element`). |
67
- | Element Attributes | | All other attributes are passed to the root element of the skeleton. |
60
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
61
+ <!-- props:SkeletonProps -->
62
+
63
+ | Name | Type | Default | Description |
64
+ | ---------------- | ------------------------------------------------- | ----------- | ------------------------------------------------------------- |
65
+ | `as` | `'div'` &#124; `'span'` | `'div'` | The HTML element to render the skeleton as. |
66
+ | `animation` | `'wave'` &#124; `'pulse'` | `'wave'` | The animation played while the content is loading. |
67
+ | `shape` | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | The skeleton can have a circular, rounded or square shape. |
68
+ | `justify` | `boolean` | | The skeleton is justified to the full width of the container. |
69
+ | `ref` _bindable_ | `HTMLElement` | | The DOM reference of the skeleton element. |
70
+ | HTML Attributes | | | |
71
+
72
+ <!-- /props:SkeletonProps -->
package/dist/components/slider/docs/llms.md CHANGED
@@ -52,24 +52,36 @@ Set the `disabled` prop to prevent interaction with the slider.
52
52
 
53
53
  ## Component Props
54
54
 
55
- | Name | Type | Description |
56
- | ------------------ | --------------------------------- | -------------------------------------------------------------------------- |
57
- | `value` | `number` | The current value of the slider. Bindable. Default: `0`. |
58
- | `min` | `number` | The minimum value of the range. Default: `0`. |
59
- | `max` | `number` | The maximum value of the range. Default: `100`. |
60
- | `step` | `number` | The increment between selectable values. Default: `1`. |
61
- | `ticks` | `number[]` | An array of values at which to render tick marks. Default: `[]`. |
62
- | `tickPlacement` | `'around' \| 'before' \| 'after'` | Where tick marks are placed relative to the rail. Default: `around`. |
63
- | `prefix` | `string` | Text prepended to the value shown in the tooltip. Default: `''`. |
64
- | `suffix` | `string` | Text appended to the value shown in the tooltip. Default: `''`. |
65
- | `track` | `boolean` | Whether the filled track is shown. Default: `true`. |
66
- | `orientation` | `'horizontal' \| 'vertical'` | The layout direction of the slider. Default: `horizontal`. |
67
- | `reverse` | `boolean` | Reverses the direction of the slider. Default: `false`. |
68
- | `disabled` | `boolean` | Whether the slider is disabled. Default: `false`. |
69
- | `sync` | `boolean` | Snaps the initial value to the nearest step on initialization. |
70
- | `tooltip` | `boolean` | Whether the value tooltip is shown while interacting. Default: `true`. |
71
- | `tooltipPlacement` | `Placement` | The placement of the tooltip relative to the thumb. Default: `top`. |
72
- | `tooltipContent` | `string \| Snippet \| Component` | Custom content for the tooltip. Defaults to `prefix` + `value` + `suffix`. |
73
- | `onChange` | `(value: number) => void` | Callback fired when the value changes. |
74
- | `class` | `string` | Additional CSS classes applied to the slider. |
75
- | `ref` | `HTMLElement` | The DOM reference of the slider element. Bindable. |
55
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
56
+ <!-- props:SliderProps -->
57
+
58
+ | Name | Type | Default | Description |
59
+ | -------------------------- | --------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------- |
60
+ | `value` _bindable_ | `number` | `0` | The current value of the slider. |
61
+ | `min` | `number` | `0` | The minimum value of the slider. |
62
+ | `max` | `number` | `100` | The maximum value of the slider. |
63
+ | `step` | `number` | `1` | How much the value moves on every step. |
64
+ | `ticks` | `number[]` | `[]` | The values the tick marks are drawn at. |
65
+ | `tickPlacement` | `'around'` &#124; `'before'` &#124; `'after'` | `'around'` | Where the tick marks sit relative to the rail. |
66
+ | `prefix` | `string` | `''` | Text prepended to the value in the tooltip. |
67
+ | `suffix` | `string` | `''` | Text appended to the value in the tooltip. |
68
+ | `track` | `boolean` | `true` | Whether to fill the rail up to the current value. |
69
+ | `orientation` | `'horizontal'` &#124; `'vertical'` | `'horizontal'` | The direction the slider runs in. |
70
+ | `reverse` | `boolean` | `false` | Runs the slider from the maximum to the minimum instead. |
71
+ | `disabled` | `boolean` | `false` | Disables the user interaction. |
72
+ | `sync` | `boolean` | | Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. |
73
+ | `tooltip` | `boolean` | `true` | Whether to show the value in a tooltip while dragging. |
74
+ | `tooltipPlacement` | `Placement` | `'top'` | Where the tooltip is placed relative to the thumb. |
75
+ | `tooltipContent` | `string` &#124; `Snippet` &#124; `Component` | | Custom content for the tooltip, replacing the plain value. |
76
+ | `onChange` | `(value: number) => void` | | Called whenever the value changes. |
77
+ | `class` | `string` | | The class to apply to the slider. |
78
+ | `ref` _bindable_ | `HTMLElement` | | The DOM reference of the slider element. |
79
+ | `inputRef` _bindable_ | `HTMLInputElement` | | The DOM reference of the underlying input element. |
80
+ | `thumbRef` _bindable_ | `HTMLElement` | | The DOM reference of the thumb element. |
81
+ | `tooltipRef` _bindable_ | `HTMLElement` | | The DOM reference of the tooltip element. |
82
+ | `railRef` _bindable_ | `HTMLElement` | | The DOM reference of the rail element. |
83
+ | `trackRef` _bindable_ | `HTMLElement` | | The DOM reference of the track element. |
84
+ | `tickBarRef` _bindable_ | `HTMLElement` | | The DOM reference of the tick bar element. |
85
+ | Element Attributes (`div`) | | | |
86
+
87
+ <!-- /props:SliderProps -->
package/dist/components/slider/slider.svelte CHANGED
@@ -39,16 +39,18 @@
39
39
  ...attributes
40
40
  }: SliderProps = $props();
41
41
 
42
- watch(
43
- () => step,
44
- () => {
45
- if (step > max - min) {
46
- throw new Error('Step must be less than or equal to the difference between max and min');
47
- } else if (min >= max) {
48
- throw new Error('Min must be less than max');
49
- }
42
+ /**
43
+ * The props the invariants rule over. The markup renders them through here, so reading any of
44
+ * them validates the whole set during SSR and on every prop update.
45
+ */
46
+ const _range = $derived.by(() => {
47
+ if (step > max - min) {
48
+ throw new Error('Step must be less than or equal to the difference between max and min');
49
+ } else if (min >= max) {
50
+ throw new Error('Min must be less than max');
50
51
  }
51
- );
52
+ return { min, max, step };
53
+ });
52
54
 
53
55
  watch(
54
56
  () => value,
@@ -208,8 +210,8 @@
208
210
  role="slider"
209
211
  aria-label={ariaLabel}
210
212
  aria-orientation={orientation}
211
- aria-valuemin={min}
212
- aria-valuemax={max}
213
+ aria-valuemin={_range.min}
214
+ aria-valuemax={_range.max}
213
215
  aria-valuenow={value}
214
216
  aria-valuetext={prefix || suffix ? `${prefix}${value}${suffix}` : undefined}
215
217
  aria-disabled={disabled || undefined}
package/dist/components/text-box/docs/llms.md CHANGED
@@ -67,20 +67,26 @@ The `onClear` event is triggered when the input is cleared, allowing you to hand
67
67
 
68
68
  ## Component Props
69
69
 
70
- | Name | Type | Description |
71
- | ------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
72
- | `type` | `string` | The type of the input element. Possible values: `'text'`, `'search'`, `'email'`, `'url'`, `'tel'`, `'password'`, `'number'`. |
73
- | `ref` | `HTMLInputElement` | The DOM reference of the input element. |
74
- | `wrapperRef` | `HTMLDivElement` | The DOM reference of the wrapper element. |
75
- | `wrapperAttributes` | `HTMLAttributes<HTMLDivElement>` | Additional attributes forwarded to the wrapper element. |
76
- | `size` | `'small' \| 'medium' \| 'large'` | The size of the input. |
77
- | `readonly` | `boolean` | Whether the input is read-only. |
78
- | `placeholder` | `string` | The placeholder text for the input. |
79
- | `hideActionButtons` | `boolean` | Whether to hide the extra action buttons in the input. |
80
- | `justify` | `boolean` | Whether the input fills the full width of the container. |
81
- | `contentBefore` | `string \| Snippet \| Component` | Content rendered before the input (e.g. an icon). |
82
- | `contentAfter` | `string \| Snippet \| Component` | Content rendered after the input (e.g. an icon). |
83
- | `textChanged` | `(e: InputEvent, text: string) => void` | Event triggered when content changes in the text box. |
84
- | `querySubmitted` | `(e: MouseEvent \| KeyboardEvent, query: string) => void` | Event triggered when a query is submitted (Enter or search icon click on `type="search"`). |
85
- | `onClear` | `(e: MouseEvent) => void` | Event triggered when the input is cleared. |
86
- | `children` | `Snippet` | The children elements to render inside the input. |
70
+ <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
71
+ <!-- props:TextBoxProps -->
72
+
73
+ | Name | Type | Default | Description |
74
+ | ------------------------------------ | ---------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
75
+ | `type` | [`TextBoxTypes`](https://fluentui-svelte.dev/docs/types/#textboxtypes) | `'text'` | The type of the input element. |
76
+ | `value` _bindable_ | `string` &#124; `number` | | The current value of the input. |
77
+ | `wrapperRef` _bindable_ | `HTMLDivElement` | | The DOM reference of the wrapper element. |
78
+ | `ref` _bindable_ | `HTMLInputElement` | | The DOM reference of the input element. |
79
+ | `placeholder` | `string` | `'Fluent TextBox'` | The placeholder text for the input. |
80
+ | `hideActionButtons` | `boolean` | | Whether to hide the extra action buttons in the input. |
81
+ | `justify` | `boolean` | | Make the input fill the full width of the container. |
82
+ | `contentBefore` | `string` &#124; `Snippet` &#124; `Component` | | Content rendered before the input, inside the wrapper. |
83
+ | `contentAfter` | `string` &#124; `Snippet` &#124; `Component` | | Content rendered after the input, inside the wrapper. |
84
+ | `size` | `'small'` &#124; `'medium'` &#124; `'large'` | `'medium'` | The size of the input element. |
85
+ | `textChanged` | `(e: InputEvent, text: string) => void` | | Occurs when content changes in the text box. |
86
+ | `querySubmitted` | `(e: MouseEvent` &#124; `KeyboardEvent, query: string) => void` | | The QuerySubmitted event occurs when: 1. The input type is 'search'. 2. While the focus is in the text box, press Enter or click the query icon. |
87
+ | `onClear` | `(e: MouseEvent) => void` | | Occurs when the clear button is clicked. |
88
+ | `children` | `Snippet` | | The children elements to render inside the input. |
89
+ | `wrapperAttributes` | `HTMLAttributes` | | The attributes to apply to the wrapper element. |
90
+ | `HTMLInputAttributes` without `size` | | | |
91
+
92
+ <!-- /props:TextBoxProps -->