@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.11

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 (238) hide show
  1. package/dist/button/Button.svelte +6 -10
  2. package/dist/button/Button.svelte.d.ts +34 -26
  3. package/dist/checkbox/Checkbox.svelte +43 -25
  4. package/dist/checkbox/Checkbox.svelte.d.ts +42 -28
  5. package/dist/close-button/CloseButton.svelte +5 -4
  6. package/dist/close-button/CloseButton.svelte.d.ts +36 -13
  7. package/dist/combobox/Combobox.svelte +2 -2
  8. package/dist/combobox/Combobox.svelte.d.ts +9 -9
  9. package/dist/data-interactive/DataInteractive.svelte +41 -0
  10. package/dist/data-interactive/DataInteractive.svelte.d.ts +39 -0
  11. package/dist/data-interactive/index.d.ts +1 -0
  12. package/dist/data-interactive/index.js +1 -0
  13. package/dist/description/Description.svelte +10 -53
  14. package/dist/description/Description.svelte.d.ts +15 -32
  15. package/dist/description/context.svelte.d.ts +17 -0
  16. package/dist/description/context.svelte.js +51 -0
  17. package/dist/dialog/Dialog.svelte +51 -0
  18. package/dist/dialog/Dialog.svelte.d.ts +60 -0
  19. package/dist/dialog/DialogBackdrop.svelte +39 -0
  20. package/dist/dialog/DialogBackdrop.svelte.d.ts +38 -0
  21. package/dist/dialog/DialogPanel.svelte +46 -0
  22. package/dist/dialog/DialogPanel.svelte.d.ts +40 -0
  23. package/dist/dialog/DialogTitle.svelte +29 -0
  24. package/dist/dialog/DialogTitle.svelte.d.ts +34 -0
  25. package/dist/dialog/InternalDialog.svelte +233 -0
  26. package/dist/dialog/InternalDialog.svelte.d.ts +42 -0
  27. package/dist/dialog/context.svelte.d.ts +15 -0
  28. package/dist/dialog/context.svelte.js +16 -0
  29. package/dist/dialog/index.d.ts +4 -0
  30. package/dist/dialog/index.js +4 -0
  31. package/dist/field/Field.svelte +8 -11
  32. package/dist/field/Field.svelte.d.ts +21 -17
  33. package/dist/fieldset/Fieldset.svelte +11 -9
  34. package/dist/fieldset/Fieldset.svelte.d.ts +21 -17
  35. package/dist/focus-trap/FocusTrap.svelte +325 -0
  36. package/dist/focus-trap/FocusTrap.svelte.d.ts +46 -0
  37. package/dist/focus-trap/FocusTrapFeatures.d.ts +14 -0
  38. package/dist/focus-trap/FocusTrapFeatures.js +15 -0
  39. package/dist/hooks/use-controllable.svelte.d.ts +1 -1
  40. package/dist/hooks/use-controllable.svelte.js +3 -3
  41. package/dist/hooks/use-did-element-move.svelte.js +5 -10
  42. package/dist/hooks/use-escape.svelte.d.ts +5 -0
  43. package/dist/hooks/use-escape.svelte.js +26 -0
  44. package/dist/hooks/use-event-listener.svelte.d.ts +6 -0
  45. package/dist/hooks/use-event-listener.svelte.js +12 -0
  46. package/dist/hooks/use-inert-others.svelte.d.ts +2 -2
  47. package/dist/hooks/use-inert-others.svelte.js +3 -3
  48. package/dist/hooks/use-is-mounted.svelte.d.ts +3 -0
  49. package/dist/hooks/use-is-mounted.svelte.js +14 -0
  50. package/dist/hooks/use-is-touch-device.svelte.d.ts +3 -0
  51. package/dist/hooks/use-is-touch-device.svelte.js +20 -0
  52. package/dist/hooks/use-root-containers.svelte.d.ts +9 -0
  53. package/dist/hooks/use-root-containers.svelte.js +50 -0
  54. package/dist/hooks/use-tab-direction.svelte.d.ts +7 -0
  55. package/dist/hooks/use-tab-direction.svelte.js +25 -0
  56. package/dist/hooks/use-transition.svelte.js +14 -13
  57. package/dist/hooks/use-tree-walker.svelte.d.ts +8 -0
  58. package/dist/hooks/use-tree-walker.svelte.js +19 -0
  59. package/dist/hooks/use-watch.svelte.d.ts +4 -0
  60. package/dist/hooks/use-watch.svelte.js +16 -0
  61. package/dist/hooks/use-window-event.svelte.d.ts +6 -0
  62. package/dist/hooks/use-window-event.svelte.js +12 -0
  63. package/dist/index.d.ts +10 -0
  64. package/dist/index.js +10 -0
  65. package/dist/input/Input.svelte +59 -0
  66. package/dist/input/Input.svelte.d.ts +50 -0
  67. package/dist/input/index.d.ts +1 -0
  68. package/dist/input/index.js +1 -0
  69. package/dist/internal/FloatingProvider.svelte +12 -0
  70. package/dist/internal/FloatingProvider.svelte.d.ts +22 -0
  71. package/dist/internal/FocusSentinel.svelte.d.ts +4 -1
  72. package/dist/internal/ForcePortalRoot.svelte +6 -0
  73. package/dist/internal/ForcePortalRoot.svelte.d.ts +22 -0
  74. package/dist/internal/FormFields.svelte.d.ts +4 -1
  75. package/dist/internal/FormResolver.svelte.d.ts +4 -1
  76. package/dist/internal/Hidden.svelte +6 -14
  77. package/dist/internal/Hidden.svelte.d.ts +19 -15
  78. package/dist/internal/HiddenFeatures.d.ts +5 -0
  79. package/dist/internal/HiddenFeatures.js +9 -0
  80. package/dist/internal/HoistFormFields.svelte.d.ts +4 -1
  81. package/dist/internal/MainTreeProvider.svelte +45 -0
  82. package/dist/internal/MainTreeProvider.svelte.d.ts +31 -0
  83. package/dist/internal/Portal.svelte.d.ts +4 -1
  84. package/dist/internal/close-provider.d.ts +7 -0
  85. package/dist/internal/close-provider.js +7 -0
  86. package/dist/internal/floating-provider.svelte.d.ts +3 -0
  87. package/dist/internal/floating-provider.svelte.js +206 -0
  88. package/dist/internal/floating.svelte.d.ts +50 -20
  89. package/dist/internal/floating.svelte.js +100 -271
  90. package/dist/internal/inner.svelte.d.ts +91 -0
  91. package/dist/internal/inner.svelte.js +202 -0
  92. package/dist/internal/open-closed.d.ts +1 -1
  93. package/dist/internal/open-closed.js +1 -1
  94. package/dist/label/Label.svelte +17 -65
  95. package/dist/label/Label.svelte.d.ts +19 -32
  96. package/dist/label/context.svelte.d.ts +17 -0
  97. package/dist/label/context.svelte.js +56 -0
  98. package/dist/legend/Legend.svelte +4 -3
  99. package/dist/legend/Legend.svelte.d.ts +33 -15
  100. package/dist/listbox/Listbox.svelte +40 -74
  101. package/dist/listbox/Listbox.svelte.d.ts +30 -72
  102. package/dist/listbox/ListboxButton.svelte +16 -18
  103. package/dist/listbox/ListboxButton.svelte.d.ts +16 -7
  104. package/dist/listbox/ListboxOption.svelte +10 -10
  105. package/dist/listbox/ListboxOption.svelte.d.ts +22 -11
  106. package/dist/listbox/ListboxOptions.svelte +62 -60
  107. package/dist/listbox/ListboxOptions.svelte.d.ts +23 -7
  108. package/dist/listbox/ListboxSelectedOption.svelte +15 -7
  109. package/dist/listbox/ListboxSelectedOption.svelte.d.ts +24 -14
  110. package/dist/listbox/context.svelte.d.ts +75 -0
  111. package/dist/listbox/context.svelte.js +36 -0
  112. package/dist/menu/Menu.svelte +235 -0
  113. package/dist/menu/Menu.svelte.d.ts +42 -0
  114. package/dist/menu/MenuButton.svelte +129 -0
  115. package/dist/menu/MenuButton.svelte.d.ts +52 -0
  116. package/dist/menu/MenuHeading.svelte +19 -0
  117. package/dist/menu/MenuHeading.svelte.d.ts +39 -0
  118. package/dist/menu/MenuItem.svelte +114 -0
  119. package/dist/menu/MenuItem.svelte.d.ts +49 -0
  120. package/dist/menu/MenuItems.svelte +248 -0
  121. package/dist/menu/MenuItems.svelte.d.ts +55 -0
  122. package/dist/menu/MenuSection.svelte +14 -0
  123. package/dist/menu/MenuSection.svelte.d.ts +35 -0
  124. package/dist/menu/MenuSeparator.svelte +9 -0
  125. package/dist/menu/MenuSeparator.svelte.d.ts +35 -0
  126. package/dist/menu/context.svelte.d.ts +47 -0
  127. package/dist/menu/context.svelte.js +21 -0
  128. package/dist/menu/index.d.ts +7 -0
  129. package/dist/menu/index.js +7 -0
  130. package/dist/portal/InternalPortal.svelte +22 -33
  131. package/dist/portal/InternalPortal.svelte.d.ts +16 -7
  132. package/dist/portal/Portal.svelte +4 -8
  133. package/dist/portal/Portal.svelte.d.ts +6 -6
  134. package/dist/portal/PortalGroup.svelte +5 -6
  135. package/dist/portal/PortalGroup.svelte.d.ts +16 -7
  136. package/dist/switch/Switch.svelte +41 -37
  137. package/dist/switch/Switch.svelte.d.ts +24 -7
  138. package/dist/switch/SwitchGroup.svelte +7 -8
  139. package/dist/switch/SwitchGroup.svelte.d.ts +14 -7
  140. package/dist/tabs/Tab.svelte +9 -14
  141. package/dist/tabs/Tab.svelte.d.ts +18 -6
  142. package/dist/tabs/TabGroup.svelte +20 -23
  143. package/dist/tabs/TabGroup.svelte.d.ts +19 -6
  144. package/dist/tabs/TabList.svelte +5 -7
  145. package/dist/tabs/TabList.svelte.d.ts +13 -6
  146. package/dist/tabs/TabPanel.svelte +30 -32
  147. package/dist/tabs/TabPanel.svelte.d.ts +19 -6
  148. package/dist/tabs/TabPanels.svelte +5 -6
  149. package/dist/tabs/TabPanels.svelte.d.ts +13 -6
  150. package/dist/textarea/Textarea.svelte +67 -0
  151. package/dist/textarea/Textarea.svelte.d.ts +50 -0
  152. package/dist/textarea/index.d.ts +1 -0
  153. package/dist/textarea/index.js +1 -0
  154. package/dist/transition/InternalTransitionChild.svelte +178 -0
  155. package/dist/transition/InternalTransitionChild.svelte.d.ts +55 -0
  156. package/dist/transition/Transition.svelte +89 -0
  157. package/dist/transition/Transition.svelte.d.ts +42 -0
  158. package/dist/transition/TransitionChild.svelte +16 -0
  159. package/dist/transition/TransitionChild.svelte.d.ts +44 -0
  160. package/dist/transition/context.svelte.d.ts +64 -0
  161. package/dist/transition/context.svelte.js +120 -0
  162. package/dist/transition/index.d.ts +2 -0
  163. package/dist/transition/index.js +2 -0
  164. package/dist/utils/ElementOrComponent.svelte +26 -0
  165. package/dist/utils/ElementOrComponent.svelte.d.ts +56 -0
  166. package/dist/utils/Generic.svelte +44 -0
  167. package/dist/utils/Generic.svelte.d.ts +35 -0
  168. package/dist/utils/StableCollection.svelte +1 -1
  169. package/dist/utils/StableCollection.svelte.d.ts +4 -1
  170. package/dist/utils/active-element-history.d.ts +1 -0
  171. package/dist/utils/active-element-history.js +35 -0
  172. package/dist/utils/alternative-types.d.ts +21 -0
  173. package/dist/utils/alternative-types.js +1 -0
  174. package/dist/utils/class-names.d.ts +1 -0
  175. package/dist/utils/class-names.js +10 -0
  176. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte +17 -0
  177. package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte.d.ts +23 -0
  178. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte +50 -0
  179. package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte.d.ts +41 -0
  180. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.d.ts +6 -0
  181. package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js +158 -0
  182. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.d.ts +11 -0
  183. package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js +53 -0
  184. package/dist/utils/floating-ui/svelte/hooks/useId.svelte.d.ts +9 -0
  185. package/dist/utils/floating-ui/svelte/hooks/useId.svelte.js +28 -0
  186. package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.d.ts +23 -0
  187. package/dist/utils/floating-ui/svelte/hooks/useInteractions.svelte.js +72 -0
  188. package/dist/utils/floating-ui/svelte/index.d.ts +5 -0
  189. package/dist/utils/floating-ui/svelte/index.js +5 -0
  190. package/dist/utils/floating-ui/svelte/inner.svelte.d.ts +83 -0
  191. package/dist/utils/floating-ui/svelte/inner.svelte.js +178 -0
  192. package/dist/utils/floating-ui/svelte/types.d.ts +114 -0
  193. package/dist/utils/floating-ui/svelte/types.js +1 -0
  194. package/dist/utils/floating-ui/svelte/utils/createPubSub.d.ts +5 -0
  195. package/dist/utils/floating-ui/svelte/utils/createPubSub.js +14 -0
  196. package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.d.ts +2 -0
  197. package/dist/utils/floating-ui/svelte/utils/getFloatingFocusElement.js +13 -0
  198. package/dist/utils/floating-ui/svelte/utils/log.d.ts +2 -0
  199. package/dist/utils/floating-ui/svelte/utils/log.js +19 -0
  200. package/dist/utils/floating-ui/svelte/utils.d.ts +19 -0
  201. package/dist/utils/floating-ui/svelte/utils.js +136 -0
  202. package/dist/utils/floating-ui/svelte-dom/arrow.d.ts +22 -0
  203. package/dist/utils/floating-ui/svelte-dom/arrow.js +29 -0
  204. package/dist/utils/floating-ui/svelte-dom/index.d.ts +2 -0
  205. package/dist/utils/floating-ui/svelte-dom/index.js +2 -0
  206. package/dist/utils/floating-ui/svelte-dom/types.d.ts +80 -0
  207. package/dist/utils/floating-ui/svelte-dom/types.js +3 -0
  208. package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.d.ts +6 -0
  209. package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js +183 -0
  210. package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.d.ts +1 -0
  211. package/dist/utils/floating-ui/svelte-dom/utils/deepEqual.js +50 -0
  212. package/dist/utils/floating-ui/svelte-dom/utils/getDPR.d.ts +1 -0
  213. package/dist/utils/floating-ui/svelte-dom/utils/getDPR.js +7 -0
  214. package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.d.ts +1 -0
  215. package/dist/utils/floating-ui/svelte-dom/utils/roundByDPR.js +5 -0
  216. package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.d.ts +4 -0
  217. package/dist/utils/floating-ui/svelte-dom/utils/useLatestRef.js +7 -0
  218. package/dist/utils/focus-management.d.ts +2 -1
  219. package/dist/utils/focus-management.js +13 -13
  220. package/dist/utils/id.d.ts +1 -1
  221. package/dist/utils/id.js +1 -1
  222. package/dist/utils/on-document-ready.d.ts +1 -0
  223. package/dist/utils/on-document-ready.js +12 -0
  224. package/dist/utils/render.d.ts +3 -0
  225. package/dist/utils/render.js +63 -0
  226. package/dist/utils/state.d.ts +7 -1
  227. package/dist/utils/state.js +10 -6
  228. package/dist/utils/style.d.ts +2 -0
  229. package/dist/utils/style.js +6 -0
  230. package/dist/utils/types.d.ts +14 -17
  231. package/dist/utils/types.js +0 -5
  232. package/package.json +33 -31
  233. package/dist/internal/id.d.ts +0 -8
  234. package/dist/internal/id.js +0 -11
  235. package/dist/tabs/Button.svelte +0 -65
  236. package/dist/tabs/Button.svelte.d.ts +0 -39
  237. package/dist/utils/close.d.ts +0 -2
  238. package/dist/utils/close.js +0 -3
@@ -0,0 +1,233 @@
1
+ <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">import { useId } from "../hooks/use-id.js";
2
+ import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js";
3
+ import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js";
4
+ import { useNestedPortals } from "../portal/InternalPortal.svelte";
5
+ import { getOwnerDocument } from "../utils/owner.js";
6
+ import { DEFAULT_DIALOG_TAG, DialogRenderFeatures } from "./Dialog.svelte";
7
+ import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
8
+ import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
9
+ import { useEscape } from "../hooks/use-escape.svelte.js";
10
+ import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
11
+ import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
12
+ import { setContext } from "svelte";
13
+ import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js";
14
+ import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte";
15
+ import Portal from "../portal/Portal.svelte";
16
+ import PortalGroup from "../portal/PortalGroup.svelte";
17
+ import ForcePortalRoot from "../internal/ForcePortalRoot.svelte";
18
+ import { createCloseContext } from "../internal/close-provider.js";
19
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte";
20
+ import { DialogStates } from "./context.svelte.js";
21
+ import { useDescriptions } from "../description/context.svelte.js";
22
+ const internalId = useId();
23
+ let {
24
+ ref = $bindable(),
25
+ id = `headlessui-dialog-${internalId}`,
26
+ open: theirOpen,
27
+ onclose,
28
+ initialFocus,
29
+ role: theirRole = "dialog",
30
+ autofocus = true,
31
+ __demoMode = false,
32
+ unmount = false,
33
+ ...theirProps
34
+ } = $props();
35
+ let didWarnOnRole = $state(false);
36
+ const role = $derived.by(() => {
37
+ if (theirRole === "dialog" || theirRole === "alertdialog") {
38
+ return theirRole;
39
+ }
40
+ if (!didWarnOnRole) {
41
+ didWarnOnRole = true;
42
+ console.warn(
43
+ `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
44
+ );
45
+ }
46
+ return "dialog";
47
+ });
48
+ const usesOpenClosedState = useOpenClosed();
49
+ const open = $derived(
50
+ theirOpen === void 0 && usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : theirOpen
51
+ );
52
+ const ownerDocument = $derived(getOwnerDocument(ref));
53
+ const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed);
54
+ let _state = $state({
55
+ titleId: null,
56
+ panelRef: null
57
+ });
58
+ const close = $derived(() => onclose(false));
59
+ const setTitleId = (id2) => _state.titleId = id2;
60
+ const enabled = $derived(dialogState === DialogStates.Open);
61
+ const nestedPortals = useNestedPortals();
62
+ const { portals } = $derived(nestedPortals);
63
+ const defaultContainer = {
64
+ get current() {
65
+ return _state.panelRef ?? ref;
66
+ }
67
+ };
68
+ const mainTreeNode = useMainTreeNode();
69
+ let { resolvedContainers: resolvedRootContainers } = $derived(
70
+ useRootContainers({
71
+ get mainTreeNode() {
72
+ return mainTreeNode.node;
73
+ },
74
+ get portals() {
75
+ return portals;
76
+ },
77
+ get defaultContainers() {
78
+ return defaultContainer.current ? [defaultContainer.current] : [];
79
+ }
80
+ })
81
+ );
82
+ const isClosing = $derived(
83
+ usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
84
+ );
85
+ const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
86
+ useInertOthers({
87
+ get enabled() {
88
+ return inertOthersEnabled;
89
+ },
90
+ elements: {
91
+ get allowed() {
92
+ return [
93
+ // Allow the headlessui-portal of the Dialog to be interactive. This
94
+ // contains the current dialog and the necessary focus guard elements.
95
+ ref?.closest("[data-headlessui-portal]") ?? null
96
+ ];
97
+ },
98
+ get disallowed() {
99
+ return [
100
+ // Disallow the "main" tree root node
101
+ mainTreeNode.node?.closest("body > *:not(#headlessui-portal-root)") ?? null
102
+ ];
103
+ }
104
+ }
105
+ });
106
+ useOutsideClick({
107
+ get enabled() {
108
+ return enabled;
109
+ },
110
+ get containers() {
111
+ return resolvedRootContainers;
112
+ },
113
+ cb(event) {
114
+ event.preventDefault();
115
+ close();
116
+ }
117
+ });
118
+ useEscape({
119
+ get enabled() {
120
+ return enabled;
121
+ },
122
+ get view() {
123
+ return ownerDocument?.defaultView ?? null;
124
+ },
125
+ cb(event) {
126
+ event.preventDefault();
127
+ event.stopPropagation();
128
+ if (document.activeElement && "blur" in document.activeElement && typeof document.activeElement.blur === "function") {
129
+ document.activeElement.blur();
130
+ }
131
+ close();
132
+ }
133
+ });
134
+ const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
135
+ useScrollLock({
136
+ get enabled() {
137
+ return scrollLockEnabled;
138
+ },
139
+ get ownerDocument() {
140
+ return ownerDocument;
141
+ },
142
+ resolveAllowedContainers() {
143
+ return resolvedRootContainers;
144
+ }
145
+ });
146
+ useOnDisappear({
147
+ get enabled() {
148
+ return enabled;
149
+ },
150
+ get ref() {
151
+ return ref;
152
+ },
153
+ get ondisappear() {
154
+ return close;
155
+ }
156
+ });
157
+ const describedby = useDescriptions();
158
+ setContext("DialogContext", {
159
+ get titleId() {
160
+ return _state.titleId;
161
+ },
162
+ get panelRef() {
163
+ return _state.panelRef;
164
+ },
165
+ get dialogState() {
166
+ return dialogState;
167
+ },
168
+ get close() {
169
+ return close;
170
+ },
171
+ get unmount() {
172
+ return unmount;
173
+ },
174
+ setTitleId
175
+ });
176
+ const slot = $derived({ open: dialogState === DialogStates.Open });
177
+ const ourProps = $derived({
178
+ id,
179
+ role,
180
+ tabIndex: -1,
181
+ "aria-modal": __demoMode ? void 0 : dialogState === DialogStates.Open ? true : void 0,
182
+ "aria-labelledby": _state.titleId,
183
+ "aria-describedby": describedby.value,
184
+ unmount
185
+ });
186
+ const shouldMoveFocusInside = !useIsTouchDevice().value;
187
+ const focusTrapFeatures = $derived.by(() => {
188
+ let focusTrapFeatures2 = FocusTrapFeatures.None;
189
+ if (enabled && !__demoMode) {
190
+ focusTrapFeatures2 |= FocusTrapFeatures.RestoreFocus;
191
+ focusTrapFeatures2 |= FocusTrapFeatures.TabLock;
192
+ if (autofocus) {
193
+ focusTrapFeatures2 |= FocusTrapFeatures.AutoFocus;
194
+ }
195
+ if (shouldMoveFocusInside) {
196
+ focusTrapFeatures2 |= FocusTrapFeatures.InitialFocus;
197
+ }
198
+ }
199
+ return focusTrapFeatures2;
200
+ });
201
+ clearOpenClosedContext();
202
+ createCloseContext({
203
+ get close() {
204
+ return close;
205
+ }
206
+ });
207
+ </script>
208
+
209
+ <ForcePortalRoot force={true}>
210
+ <Portal>
211
+ <PortalGroup target={ref ?? null}>
212
+ <ForcePortalRoot force={false}>
213
+ <FocusTrap
214
+ {initialFocus}
215
+ initialFocusFallback={ref}
216
+ containers={resolvedRootContainers}
217
+ features={focusTrapFeatures}
218
+ >
219
+ <ElementOrComponent
220
+ {ourProps}
221
+ {theirProps}
222
+ slots={slot}
223
+ defaultTag={DEFAULT_DIALOG_TAG}
224
+ features={DialogRenderFeatures}
225
+ visible={dialogState === DialogStates.Open}
226
+ name="Dialog"
227
+ bind:ref
228
+ />
229
+ </FocusTrap>
230
+ </ForcePortalRoot>
231
+ </PortalGroup>
232
+ </Portal>
233
+ </ForcePortalRoot>
@@ -0,0 +1,42 @@
1
+ import { DEFAULT_DIALOG_TAG, type DialogRenderPropArg } from "./Dialog.svelte";
2
+ import type { ElementType } from "../utils/types.js";
3
+ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
4
+ props(): {
5
+ as?: TTag | undefined;
6
+ } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | ("aria-describedby" | "aria-labelledby" | "aria-modal") | "open" | "transition" | "__demoMode"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
7
+ children?: import("../utils/types.js").Children<DialogRenderPropArg> | undefined;
8
+ ref?: HTMLElement;
9
+ } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
10
+ class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: DialogRenderPropArg) => string) | undefined;
11
+ } : {}) & {
12
+ static?: boolean | undefined;
13
+ unmount?: boolean | undefined;
14
+ } & {
15
+ id?: string;
16
+ open?: boolean;
17
+ onclose(value: boolean): void;
18
+ initialFocus?: HTMLElement;
19
+ role?: "dialog" | "alertdialog";
20
+ autofocus?: boolean;
21
+ transition?: boolean;
22
+ __demoMode?: boolean;
23
+ };
24
+ events(): {} & {
25
+ [evt: string]: CustomEvent<any>;
26
+ };
27
+ slots(): {};
28
+ bindings(): "ref";
29
+ exports(): {};
30
+ }
31
+ interface $$IsomorphicComponent {
32
+ new <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
33
+ $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
34
+ } & ReturnType<__sveltets_Render<TTag>['exports']>;
35
+ <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
36
+ $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
37
+ }): ReturnType<__sveltets_Render<TTag>['exports']>;
38
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
39
+ }
40
+ declare const InternalDialog: $$IsomorphicComponent;
41
+ type InternalDialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = InstanceType<typeof InternalDialog<TTag>>;
42
+ export default InternalDialog;
@@ -0,0 +1,15 @@
1
+ export declare enum DialogStates {
2
+ Open = 0,
3
+ Closed = 1
4
+ }
5
+ export interface StateDefinition {
6
+ titleId: string | null;
7
+ panelRef: HTMLElement | null;
8
+ }
9
+ export type DialogContext = StateDefinition & {
10
+ dialogState: DialogStates;
11
+ unmount: boolean;
12
+ close(): void;
13
+ setTitleId(id: string | null): void;
14
+ };
15
+ export declare function useDialogContext(component: string): DialogContext;
@@ -0,0 +1,16 @@
1
+ import { getContext } from "svelte";
2
+ export var DialogStates;
3
+ (function (DialogStates) {
4
+ DialogStates[DialogStates["Open"] = 0] = "Open";
5
+ DialogStates[DialogStates["Closed"] = 1] = "Closed";
6
+ })(DialogStates || (DialogStates = {}));
7
+ export function useDialogContext(component) {
8
+ const context = getContext("DialogContext");
9
+ if (context === null) {
10
+ let err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
11
+ if (Error.captureStackTrace)
12
+ Error.captureStackTrace(err, useDialogContext);
13
+ throw err;
14
+ }
15
+ return context;
16
+ }
@@ -0,0 +1,4 @@
1
+ export { default as Dialog, type DialogProps } from "./Dialog.svelte";
2
+ export { default as DialogBackdrop, type DialogBackdropProps } from "./DialogBackdrop.svelte";
3
+ export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel.svelte";
4
+ export { default as DialogTitle, type DialogTitleProps } from "./DialogTitle.svelte";
@@ -0,0 +1,4 @@
1
+ export { default as Dialog } from "./Dialog.svelte";
2
+ export { default as DialogBackdrop } from "./DialogBackdrop.svelte";
3
+ export { default as DialogPanel } from "./DialogPanel.svelte";
4
+ export { default as DialogTitle } from "./DialogTitle.svelte";
@@ -1,14 +1,14 @@
1
- <script lang="ts" context="module">const DEFAULT_FIELD_TAG = "div";
1
+ <script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
2
2
  </script>
3
3
 
4
- <script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { useDisabled } from "../hooks/use-disabled.js";
4
+ <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
5
5
  import { createIdContext } from "../utils/id.js";
6
- import { stateFromSlot } from "../utils/state.js";
7
6
  import { nanoid } from "nanoid";
8
7
  import { setContext } from "svelte";
9
- import { useLabels } from "../label/Label.svelte";
10
- import { useDescriptions } from "../description/Description.svelte";
11
- let { as, disabled: ownDisabled = false, children, ...theirProps } = $props();
8
+ import { useLabels } from "../label/context.svelte.js";
9
+ import { useDescriptions } from "../description/context.svelte.js";
10
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte";
11
+ let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps } = $props();
12
12
  const inputId = `headlessui-control-${nanoid(8)}`;
13
13
  createIdContext(inputId);
14
14
  useLabels();
@@ -23,11 +23,8 @@ setContext("DisabledContext", {
23
23
  const slot = $derived({ disabled });
24
24
  const ourProps = $derived({
25
25
  disabled: disabled || void 0,
26
- "aria-disabled": disabled || void 0,
27
- ...stateFromSlot(slot)
26
+ "aria-disabled": disabled || void 0
28
27
  });
29
28
  </script>
30
29
 
31
- <svelte:element this={as ?? DEFAULT_FIELD_TAG} {...ourProps} {...theirProps}>
32
- {#if children}{@render children(slot)}{/if}
33
- </svelte:element>
30
+ <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />
@@ -1,33 +1,37 @@
1
- import type { SvelteHTMLElements } from "svelte/elements";
2
- export type FieldProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_FIELD_TAG> = SvelteHTMLElements[TTag] & {
3
- as?: TTag;
1
+ import type { ElementType, Props } from "../utils/types.js";
2
+ declare let DEFAULT_FIELD_TAG: "div";
3
+ type FieldRenderPropArg = {};
4
+ type FieldPropsWeControl = never;
5
+ export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<TTag, FieldRenderPropArg, FieldPropsWeControl, {
4
6
  disabled?: boolean;
5
- children?: Snippet<[
6
- {
7
- disabled: boolean;
8
- }
9
- ]>;
10
- };
11
- declare const DEFAULT_FIELD_TAG: "div";
12
- import { type Snippet } from "svelte";
13
- declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
14
- props(): FieldProps<TTag>;
7
+ }>;
8
+ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> {
9
+ props(): {
10
+ as?: TTag | undefined;
11
+ } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
12
+ children?: import("../utils/types.js").Children<FieldRenderPropArg> | undefined;
13
+ ref?: HTMLElement;
14
+ } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
15
+ class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: FieldRenderPropArg) => string) | undefined;
16
+ } : {}) & {
17
+ disabled?: boolean;
18
+ };
15
19
  events(): {} & {
16
20
  [evt: string]: CustomEvent<any>;
17
21
  };
18
22
  slots(): {};
19
- bindings(): "";
23
+ bindings(): "ref";
20
24
  exports(): {};
21
25
  }
22
26
  interface $$IsomorphicComponent {
23
- new <TTag extends keyof SvelteHTMLElements>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
27
+ new <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
24
28
  $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
25
29
  } & ReturnType<__sveltets_Render<TTag>['exports']>;
26
- <TTag extends keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
30
+ <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
27
31
  $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
28
32
  }): ReturnType<__sveltets_Render<TTag>['exports']>;
29
33
  z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
30
34
  }
31
35
  declare const Field: $$IsomorphicComponent;
32
- type Field<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Field<TTag>>;
36
+ type Field<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = InstanceType<typeof Field<TTag>>;
33
37
  export default Field;
@@ -1,10 +1,15 @@
1
- <script lang="ts" context="module">const DEFAULT_FIELDSET_TAG = "fieldset";
1
+ <script lang="ts" module>let DEFAULT_FIELDSET_TAG = "fieldset";
2
2
  </script>
3
3
 
4
- <script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { setContext } from "svelte";
4
+ <script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">import { setContext } from "svelte";
5
5
  import { useDisabled } from "../hooks/use-disabled.js";
6
- import { useLabels } from "../label/Label.svelte";
7
- let { as, disabled: ownDisabled = false, children, ...theirProps } = $props();
6
+ import { useLabels } from "../label/context.svelte.js";
7
+ import ElementOrComponent from "../utils/ElementOrComponent.svelte";
8
+ let {
9
+ ref = $bindable(),
10
+ disabled: ownDisabled = false,
11
+ ...theirProps
12
+ } = $props();
8
13
  const providedDisabled = useDisabled();
9
14
  const disabled = $derived(providedDisabled.value || ownDisabled);
10
15
  setContext("DisabledContext", {
@@ -12,11 +17,10 @@ setContext("DisabledContext", {
12
17
  return disabled;
13
18
  }
14
19
  });
15
- const tag = $state(as ?? DEFAULT_FIELDSET_TAG);
16
20
  const labelledBy = useLabels();
17
21
  const slot = $derived({ disabled });
18
22
  const ourProps = $derived(
19
- tag === "fieldset" ? {
23
+ (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset" ? {
20
24
  "aria-labelledby": labelledBy.value,
21
25
  disabled: disabled || void 0
22
26
  } : {
@@ -27,6 +31,4 @@ const ourProps = $derived(
27
31
  );
28
32
  </script>
29
33
 
30
- <svelte:element this={tag} {...ourProps} {...theirProps}>
31
- {#if children}{@render children(slot)}{/if}
32
- </svelte:element>
34
+ <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:ref />
@@ -1,33 +1,37 @@
1
- import type { SvelteHTMLElements } from "svelte/elements";
2
- export type FieldsetProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_FIELDSET_TAG> = SvelteHTMLElements[TTag] & {
3
- as?: TTag;
1
+ import type { ElementType, Props } from "../utils/types.js";
2
+ declare let DEFAULT_FIELDSET_TAG: "fieldset";
3
+ type FieldsetRenderPropArg = {};
4
+ type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role";
5
+ export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<TTag, FieldsetRenderPropArg, FieldsetPropsWeControl, {
4
6
  disabled?: boolean;
5
- children?: Snippet<[
6
- {
7
- disabled: boolean;
8
- }
9
- ]>;
10
- };
11
- declare const DEFAULT_FIELDSET_TAG: "fieldset";
12
- import { type Snippet } from "svelte";
13
- declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
14
- props(): FieldsetProps<TTag>;
7
+ }>;
8
+ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> {
9
+ props(): {
10
+ as?: TTag | undefined;
11
+ } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | FieldsetPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
12
+ children?: import("../utils/types.js").Children<FieldsetRenderPropArg> | undefined;
13
+ ref?: HTMLElement;
14
+ } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
15
+ class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: FieldsetRenderPropArg) => string) | undefined;
16
+ } : {}) & {
17
+ disabled?: boolean;
18
+ };
15
19
  events(): {} & {
16
20
  [evt: string]: CustomEvent<any>;
17
21
  };
18
22
  slots(): {};
19
- bindings(): "";
23
+ bindings(): "ref";
20
24
  exports(): {};
21
25
  }
22
26
  interface $$IsomorphicComponent {
23
- new <TTag extends keyof SvelteHTMLElements>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
27
+ new <TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
24
28
  $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
25
29
  } & ReturnType<__sveltets_Render<TTag>['exports']>;
26
- <TTag extends keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
30
+ <TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
27
31
  $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
28
32
  }): ReturnType<__sveltets_Render<TTag>['exports']>;
29
33
  z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
30
34
  }
31
35
  declare const Fieldset: $$IsomorphicComponent;
32
- type Fieldset<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Fieldset<TTag>>;
36
+ type Fieldset<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = InstanceType<typeof Fieldset<TTag>>;
33
37
  export default Fieldset;