@skeletonlabs/skeleton-svelte 2.0.0-next.2 → 2.0.0-next.4

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 (216) hide show
  1. package/dist/components/accordion/anatomy/content.svelte +34 -0
  2. package/dist/components/accordion/anatomy/content.svelte.d.ts +7 -0
  3. package/dist/components/accordion/anatomy/{accordion-heading.svelte → heading.svelte} +12 -13
  4. package/dist/components/accordion/anatomy/heading.svelte.d.ts +13 -0
  5. package/dist/components/accordion/anatomy/indicator.svelte +30 -0
  6. package/dist/components/accordion/anatomy/indicator.svelte.d.ts +7 -0
  7. package/dist/components/accordion/anatomy/item.svelte +38 -0
  8. package/dist/components/accordion/anatomy/item.svelte.d.ts +8 -0
  9. package/dist/components/accordion/anatomy/root-context.svelte +20 -0
  10. package/dist/components/accordion/anatomy/root-context.svelte.d.ts +8 -0
  11. package/dist/components/accordion/anatomy/root-provider.svelte +31 -0
  12. package/dist/components/accordion/anatomy/root-provider.svelte.d.ts +9 -0
  13. package/dist/components/accordion/anatomy/root.svelte +42 -0
  14. package/dist/components/accordion/anatomy/root.svelte.d.ts +8 -0
  15. package/dist/components/accordion/anatomy/trigger.svelte +34 -0
  16. package/dist/components/accordion/anatomy/trigger.svelte.d.ts +7 -0
  17. package/dist/components/accordion/index.d.ts +10 -11
  18. package/dist/components/accordion/index.js +2 -1
  19. package/dist/components/accordion/modules/anatomy.d.ts +9 -0
  20. package/dist/components/accordion/modules/anatomy.js +17 -0
  21. package/dist/components/accordion/modules/item-context.d.ts +6 -0
  22. package/dist/components/accordion/modules/item-context.js +2 -0
  23. package/dist/components/accordion/modules/root-context.js +2 -0
  24. package/dist/components/accordion/modules/use-accordion.svelte.js +7 -0
  25. package/dist/components/avatar/anatomy/fallback.svelte +32 -0
  26. package/dist/components/avatar/anatomy/fallback.svelte.d.ts +7 -0
  27. package/dist/components/avatar/anatomy/image.svelte +30 -0
  28. package/dist/components/avatar/anatomy/image.svelte.d.ts +7 -0
  29. package/dist/components/avatar/anatomy/root-context.svelte +20 -0
  30. package/dist/components/avatar/anatomy/root-context.svelte.d.ts +8 -0
  31. package/dist/components/avatar/anatomy/root-provider.svelte +35 -0
  32. package/dist/components/avatar/anatomy/root-provider.svelte.d.ts +9 -0
  33. package/dist/components/avatar/anatomy/root.svelte +42 -0
  34. package/dist/components/avatar/anatomy/root.svelte.d.ts +8 -0
  35. package/dist/components/avatar/index.d.ts +7 -6
  36. package/dist/components/avatar/index.js +2 -1
  37. package/dist/components/avatar/modules/anatomy.d.ts +6 -0
  38. package/dist/components/avatar/modules/anatomy.js +11 -0
  39. package/dist/components/avatar/modules/root-context.js +2 -0
  40. package/dist/components/avatar/modules/use-avatar.svelte.js +7 -0
  41. package/dist/components/progress-linear/anatomy/label.svelte +32 -0
  42. package/dist/components/progress-linear/anatomy/label.svelte.d.ts +7 -0
  43. package/dist/components/progress-linear/anatomy/range.svelte +32 -0
  44. package/dist/components/progress-linear/anatomy/range.svelte.d.ts +7 -0
  45. package/dist/components/progress-linear/anatomy/root-context.svelte +20 -0
  46. package/dist/components/progress-linear/anatomy/root-context.svelte.d.ts +8 -0
  47. package/dist/components/progress-linear/anatomy/root-provider.svelte +35 -0
  48. package/dist/components/progress-linear/anatomy/root-provider.svelte.d.ts +9 -0
  49. package/dist/components/progress-linear/anatomy/root.svelte +42 -0
  50. package/dist/components/progress-linear/anatomy/root.svelte.d.ts +8 -0
  51. package/dist/components/progress-linear/anatomy/track.svelte +32 -0
  52. package/dist/components/progress-linear/anatomy/track.svelte.d.ts +7 -0
  53. package/dist/components/progress-linear/index.d.ts +8 -0
  54. package/dist/components/progress-linear/index.js +2 -0
  55. package/dist/components/progress-linear/modules/anatomy.d.ts +6 -0
  56. package/dist/components/progress-linear/modules/anatomy.js +11 -0
  57. package/dist/components/{accordion/modules/accordion-item-context.js → progress-linear/modules/root-context.js} +1 -1
  58. package/dist/components/progress-linear/modules/use-progress-linear.svelte.js +7 -0
  59. package/dist/components/rating-group/anatomy/control.svelte +32 -0
  60. package/dist/components/rating-group/anatomy/control.svelte.d.ts +7 -0
  61. package/dist/components/rating-group/anatomy/hidden-input.svelte +30 -0
  62. package/dist/components/rating-group/anatomy/hidden-input.svelte.d.ts +7 -0
  63. package/dist/components/rating-group/anatomy/{rating-group-item.svelte → item.svelte} +15 -24
  64. package/dist/components/rating-group/anatomy/{rating-group-item.svelte.d.ts → item.svelte.d.ts} +6 -6
  65. package/dist/components/rating-group/anatomy/label.svelte +32 -0
  66. package/dist/components/rating-group/anatomy/label.svelte.d.ts +7 -0
  67. package/dist/components/rating-group/anatomy/root-context.svelte +20 -0
  68. package/dist/components/rating-group/anatomy/root-context.svelte.d.ts +8 -0
  69. package/dist/components/rating-group/anatomy/root-provider.svelte +35 -0
  70. package/dist/components/rating-group/anatomy/root-provider.svelte.d.ts +9 -0
  71. package/dist/components/rating-group/anatomy/root.svelte +42 -0
  72. package/dist/components/rating-group/anatomy/root.svelte.d.ts +8 -0
  73. package/dist/components/rating-group/index.d.ts +9 -10
  74. package/dist/components/rating-group/index.js +2 -1
  75. package/dist/components/rating-group/modules/anatomy.d.ts +8 -0
  76. package/dist/components/rating-group/modules/anatomy.js +15 -0
  77. package/dist/components/rating-group/modules/root-context.js +2 -0
  78. package/dist/components/rating-group/modules/use-rating-group.svelte.js +7 -0
  79. package/dist/components/switch/anatomy/control.svelte +32 -0
  80. package/dist/components/switch/anatomy/control.svelte.d.ts +7 -0
  81. package/dist/components/switch/anatomy/hidden-input.svelte +30 -0
  82. package/dist/components/switch/anatomy/hidden-input.svelte.d.ts +7 -0
  83. package/dist/components/switch/anatomy/label.svelte +32 -0
  84. package/dist/components/switch/anatomy/label.svelte.d.ts +7 -0
  85. package/dist/components/switch/anatomy/root-context.svelte +20 -0
  86. package/dist/components/switch/anatomy/root-context.svelte.d.ts +8 -0
  87. package/dist/components/switch/anatomy/root-provider.svelte +35 -0
  88. package/dist/components/switch/anatomy/root-provider.svelte.d.ts +9 -0
  89. package/dist/components/switch/anatomy/root.svelte +42 -0
  90. package/dist/components/switch/anatomy/root.svelte.d.ts +8 -0
  91. package/dist/components/switch/anatomy/thumb.svelte +32 -0
  92. package/dist/components/switch/anatomy/thumb.svelte.d.ts +7 -0
  93. package/dist/components/switch/index.d.ts +9 -0
  94. package/dist/components/switch/index.js +2 -0
  95. package/dist/components/switch/modules/anatomy.d.ts +8 -0
  96. package/dist/components/switch/modules/anatomy.js +15 -0
  97. package/dist/components/switch/modules/root-context.js +2 -0
  98. package/dist/components/switch/modules/use-switch.svelte.js +7 -0
  99. package/dist/components/tabs/anatomy/{tabs-content.svelte → content.svelte} +13 -14
  100. package/dist/components/tabs/anatomy/content.svelte.d.ts +8 -0
  101. package/dist/components/tabs/anatomy/indicator.svelte +30 -0
  102. package/dist/components/tabs/anatomy/indicator.svelte.d.ts +7 -0
  103. package/dist/components/tabs/anatomy/list.svelte +32 -0
  104. package/dist/components/tabs/anatomy/list.svelte.d.ts +7 -0
  105. package/dist/components/tabs/anatomy/root-context.svelte +20 -0
  106. package/dist/components/tabs/anatomy/root-context.svelte.d.ts +8 -0
  107. package/dist/components/tabs/anatomy/root-provider.svelte +34 -0
  108. package/dist/components/tabs/anatomy/root-provider.svelte.d.ts +9 -0
  109. package/dist/components/tabs/anatomy/root.svelte +41 -0
  110. package/dist/components/tabs/anatomy/root.svelte.d.ts +8 -0
  111. package/dist/components/tabs/anatomy/{tabs-trigger.svelte → trigger.svelte} +13 -14
  112. package/dist/components/tabs/anatomy/trigger.svelte.d.ts +8 -0
  113. package/dist/components/tabs/index.d.ts +9 -1
  114. package/dist/components/tabs/index.js +2 -1
  115. package/dist/components/tabs/modules/anatomy.d.ts +8 -0
  116. package/dist/components/tabs/modules/anatomy.js +15 -0
  117. package/dist/components/tabs/modules/root-context.js +2 -0
  118. package/dist/components/tabs/modules/use-tabs.svelte.js +7 -0
  119. package/dist/components/toast/anatomy/action-trigger.svelte +32 -0
  120. package/dist/components/toast/anatomy/action-trigger.svelte.d.ts +7 -0
  121. package/dist/components/toast/anatomy/close-trigger.svelte +37 -0
  122. package/dist/components/toast/anatomy/close-trigger.svelte.d.ts +7 -0
  123. package/dist/components/toast/anatomy/description.svelte +32 -0
  124. package/dist/components/toast/anatomy/description.svelte.d.ts +7 -0
  125. package/dist/components/toast/anatomy/group.svelte +47 -0
  126. package/dist/components/toast/anatomy/group.svelte.d.ts +11 -0
  127. package/dist/components/toast/anatomy/message.svelte +29 -0
  128. package/dist/components/toast/anatomy/message.svelte.d.ts +7 -0
  129. package/dist/components/toast/anatomy/root-context.svelte +20 -0
  130. package/dist/components/toast/anatomy/root-context.svelte.d.ts +8 -0
  131. package/dist/components/toast/anatomy/root.svelte +74 -0
  132. package/dist/components/toast/anatomy/root.svelte.d.ts +9 -0
  133. package/dist/components/toast/anatomy/title.svelte +32 -0
  134. package/dist/components/toast/anatomy/title.svelte.d.ts +7 -0
  135. package/dist/components/toast/index.d.ts +9 -0
  136. package/dist/components/toast/index.js +2 -0
  137. package/dist/components/toast/modules/anatomy.d.ts +9 -0
  138. package/dist/components/toast/modules/anatomy.js +17 -0
  139. package/dist/components/toast/modules/group-context.d.ts +6 -0
  140. package/dist/components/toast/modules/group-context.js +2 -0
  141. package/dist/components/toast/modules/root-context.d.ts +6 -0
  142. package/dist/components/toast/modules/root-context.js +2 -0
  143. package/dist/index.d.ts +7 -4
  144. package/dist/index.js +7 -4
  145. package/dist/internal/components/x.svelte +14 -0
  146. package/dist/internal/components/x.svelte.d.ts +26 -0
  147. package/dist/internal/html-attributes.d.ts +2 -0
  148. package/dist/internal/html-attributes.js +1 -0
  149. package/dist/internal/props-with-element.d.ts +4 -4
  150. package/package.json +20 -20
  151. package/dist/components/accordion/anatomy/accordion-content.svelte +0 -35
  152. package/dist/components/accordion/anatomy/accordion-content.svelte.d.ts +0 -7
  153. package/dist/components/accordion/anatomy/accordion-heading.svelte.d.ts +0 -13
  154. package/dist/components/accordion/anatomy/accordion-indicator.svelte +0 -35
  155. package/dist/components/accordion/anatomy/accordion-indicator.svelte.d.ts +0 -7
  156. package/dist/components/accordion/anatomy/accordion-item-context.svelte +0 -17
  157. package/dist/components/accordion/anatomy/accordion-item-context.svelte.d.ts +0 -9
  158. package/dist/components/accordion/anatomy/accordion-item.svelte +0 -45
  159. package/dist/components/accordion/anatomy/accordion-item.svelte.d.ts +0 -8
  160. package/dist/components/accordion/anatomy/accordion-root-context.svelte +0 -17
  161. package/dist/components/accordion/anatomy/accordion-root-context.svelte.d.ts +0 -9
  162. package/dist/components/accordion/anatomy/accordion-root.svelte +0 -49
  163. package/dist/components/accordion/anatomy/accordion-root.svelte.d.ts +0 -8
  164. package/dist/components/accordion/anatomy/accordion-trigger.svelte +0 -35
  165. package/dist/components/accordion/anatomy/accordion-trigger.svelte.d.ts +0 -7
  166. package/dist/components/accordion/modules/accordion-anatomy.d.ts +0 -9
  167. package/dist/components/accordion/modules/accordion-anatomy.js +0 -17
  168. package/dist/components/accordion/modules/accordion-item-context.d.ts +0 -10
  169. package/dist/components/accordion/modules/accordion-root-context.d.ts +0 -9
  170. package/dist/components/accordion/modules/accordion-root-context.js +0 -2
  171. package/dist/components/avatar/anatomy/avatar-fallback.svelte +0 -33
  172. package/dist/components/avatar/anatomy/avatar-fallback.svelte.d.ts +0 -7
  173. package/dist/components/avatar/anatomy/avatar-image.svelte +0 -31
  174. package/dist/components/avatar/anatomy/avatar-image.svelte.d.ts +0 -7
  175. package/dist/components/avatar/anatomy/avatar-root-context.svelte +0 -17
  176. package/dist/components/avatar/anatomy/avatar-root-context.svelte.d.ts +0 -9
  177. package/dist/components/avatar/anatomy/avatar-root.svelte +0 -46
  178. package/dist/components/avatar/anatomy/avatar-root.svelte.d.ts +0 -8
  179. package/dist/components/avatar/modules/avatar-anatomy.d.ts +0 -5
  180. package/dist/components/avatar/modules/avatar-anatomy.js +0 -9
  181. package/dist/components/avatar/modules/avatar-root-context.d.ts +0 -9
  182. package/dist/components/avatar/modules/avatar-root-context.js +0 -2
  183. package/dist/components/rating-group/anatomy/rating-group-control.svelte +0 -31
  184. package/dist/components/rating-group/anatomy/rating-group-control.svelte.d.ts +0 -7
  185. package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte +0 -33
  186. package/dist/components/rating-group/anatomy/rating-group-hidden-input.svelte.d.ts +0 -7
  187. package/dist/components/rating-group/anatomy/rating-group-item-context.svelte +0 -17
  188. package/dist/components/rating-group/anatomy/rating-group-item-context.svelte.d.ts +0 -9
  189. package/dist/components/rating-group/anatomy/rating-group-label.svelte +0 -31
  190. package/dist/components/rating-group/anatomy/rating-group-label.svelte.d.ts +0 -7
  191. package/dist/components/rating-group/anatomy/rating-group-root-context.svelte +0 -17
  192. package/dist/components/rating-group/anatomy/rating-group-root-context.svelte.d.ts +0 -9
  193. package/dist/components/rating-group/anatomy/rating-group-root.svelte +0 -52
  194. package/dist/components/rating-group/anatomy/rating-group-root.svelte.d.ts +0 -8
  195. package/dist/components/rating-group/modules/rating-group-anatomy.d.ts +0 -8
  196. package/dist/components/rating-group/modules/rating-group-anatomy.js +0 -15
  197. package/dist/components/rating-group/modules/rating-group-item-context.d.ts +0 -9
  198. package/dist/components/rating-group/modules/rating-group-item-context.js +0 -2
  199. package/dist/components/rating-group/modules/rating-group-root-context.d.ts +0 -9
  200. package/dist/components/rating-group/modules/rating-group-root-context.js +0 -2
  201. package/dist/components/tabs/anatomy/tabs-content.svelte.d.ts +0 -8
  202. package/dist/components/tabs/anatomy/tabs-indicator.svelte +0 -31
  203. package/dist/components/tabs/anatomy/tabs-indicator.svelte.d.ts +0 -7
  204. package/dist/components/tabs/anatomy/tabs-list.svelte +0 -33
  205. package/dist/components/tabs/anatomy/tabs-list.svelte.d.ts +0 -7
  206. package/dist/components/tabs/anatomy/tabs-root-context.svelte +0 -17
  207. package/dist/components/tabs/anatomy/tabs-root-context.svelte.d.ts +0 -9
  208. package/dist/components/tabs/anatomy/tabs-root.svelte +0 -49
  209. package/dist/components/tabs/anatomy/tabs-root.svelte.d.ts +0 -8
  210. package/dist/components/tabs/anatomy/tabs-trigger.svelte.d.ts +0 -8
  211. package/dist/components/tabs/modules/tabs-anatomy.d.ts +0 -7
  212. package/dist/components/tabs/modules/tabs-anatomy.js +0 -13
  213. package/dist/components/tabs/modules/tabs-root-context.d.ts +0 -9
  214. package/dist/components/tabs/modules/tabs-root-context.js +0 -2
  215. package/dist/internal/test-utils.d.ts +0 -3
  216. package/dist/internal/test-utils.js +0 -9
@@ -0,0 +1,32 @@
1
+ <script lang="ts" module>
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
4
+
5
+ export interface ToastTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
6
+ </script>
7
+
8
+ <script lang="ts">
9
+ import { mergeProps } from '@zag-js/svelte';
10
+ import { classesToast } from '@skeletonlabs/skeleton-common';
11
+ import { ToastRootContext } from '../modules/root-context';
12
+
13
+ const props: ToastTitleProps = $props();
14
+
15
+ const toast = ToastRootContext.consume();
16
+
17
+ const { element, children, ...rest } = $derived(props);
18
+
19
+ const attributes = $derived(
20
+ mergeProps(toast().getTitleProps(), rest, {
21
+ class: classesToast.title
22
+ })
23
+ );
24
+ </script>
25
+
26
+ {#if element}
27
+ {@render element(attributes)}
28
+ {:else}
29
+ <div {...attributes}>
30
+ {@render children?.()}
31
+ </div>
32
+ {/if}
@@ -0,0 +1,7 @@
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
+ import type { HTMLAttributes } from '../../../internal/html-attributes';
3
+ export interface ToastTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
4
+ }
5
+ declare const Title: import("svelte").Component<ToastTitleProps, {}, "">;
6
+ type Title = ReturnType<typeof Title>;
7
+ export default Title;
@@ -0,0 +1,9 @@
1
+ export { Toast } from './modules/anatomy';
2
+ export { createStore as createToaster } from '@zag-js/toast';
3
+ export type { ToastGroupProps } from './anatomy/group.svelte';
4
+ export type { ToastRootProps } from './anatomy/root.svelte';
5
+ export type { ToastRootContextProps } from './anatomy/root-context.svelte';
6
+ export type { ToastMessageProps } from './anatomy/message.svelte';
7
+ export type { ToastTitleProps } from './anatomy/title.svelte';
8
+ export type { ToastDescriptionProps } from './anatomy/description.svelte';
9
+ export type { ToastCloseTriggerProps } from './anatomy/close-trigger.svelte';
@@ -0,0 +1,2 @@
1
+ export { Toast } from './modules/anatomy';
2
+ export { createStore as createToaster } from '@zag-js/toast';
@@ -0,0 +1,9 @@
1
+ export declare const Toast: import("svelte").Component<import("../anatomy/root.svelte").ToastRootProps, {}, ""> & {
2
+ Context: import("svelte").Component<import("../anatomy/root-context.svelte").ToastRootContextProps, {}, "">;
3
+ Group: import("svelte").Component<import("../anatomy/group.svelte").ToastGroupProps, {}, "">;
4
+ Message: import("svelte").Component<import("../anatomy/message.svelte").ToastMessageProps, {}, "">;
5
+ Title: import("svelte").Component<import("../anatomy/title.svelte").ToastTitleProps, {}, "">;
6
+ Description: import("svelte").Component<import("../anatomy/description.svelte").ToastDescriptionProps, {}, "">;
7
+ ActionTrigger: import("svelte").Component<import("../anatomy/action-trigger.svelte").ToastActionTriggerProps, {}, "">;
8
+ CloseTrigger: import("svelte").Component<import("../anatomy/close-trigger.svelte").ToastCloseTriggerProps, {}, "">;
9
+ };
@@ -0,0 +1,17 @@
1
+ import Root from '../anatomy/root.svelte';
2
+ import RootContext from '../anatomy/root-context.svelte';
3
+ import Group from '../anatomy/group.svelte';
4
+ import Message from '../anatomy/message.svelte';
5
+ import Title from '../anatomy/title.svelte';
6
+ import Description from '../anatomy/description.svelte';
7
+ import ActionTrigger from '../anatomy/action-trigger.svelte';
8
+ import CloseTrigger from '../anatomy/close-trigger.svelte';
9
+ export const Toast = Object.assign(Root, {
10
+ Context: RootContext,
11
+ Group: Group,
12
+ Message: Message,
13
+ Title: Title,
14
+ Description: Description,
15
+ ActionTrigger: ActionTrigger,
16
+ CloseTrigger: CloseTrigger
17
+ });
@@ -0,0 +1,6 @@
1
+ import type { GroupService } from '@zag-js/toast';
2
+ export declare const ToastGroupContext: {
3
+ key: symbol;
4
+ consume(): () => GroupService;
5
+ provide(value: () => GroupService): () => GroupService;
6
+ };
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const ToastGroupContext = createContext();
@@ -0,0 +1,6 @@
1
+ import type { Api } from '@zag-js/toast';
2
+ export declare const ToastRootContext: {
3
+ key: symbol;
4
+ consume(): () => Api;
5
+ provide(value: () => Api): () => Api;
6
+ };
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const ToastRootContext = createContext();
package/dist/index.d.ts CHANGED
@@ -1,4 +1,7 @@
1
- export * from './components/accordion/index.js';
2
- export * from './components/avatar/index.js';
3
- export * from './components/rating-group/index.js';
4
- export * from './components/tabs/index.js';
1
+ export * from './components/accordion/index';
2
+ export * from './components/avatar/index';
3
+ export * from './components/progress-linear/index';
4
+ export * from './components/rating-group/index';
5
+ export * from './components/switch/index';
6
+ export * from './components/tabs/index';
7
+ export * from './components/toast/index';
package/dist/index.js CHANGED
@@ -1,4 +1,7 @@
1
- export * from './components/accordion/index.js';
2
- export * from './components/avatar/index.js';
3
- export * from './components/rating-group/index.js';
4
- export * from './components/tabs/index.js';
1
+ export * from './components/accordion/index';
2
+ export * from './components/avatar/index';
3
+ export * from './components/progress-linear/index';
4
+ export * from './components/rating-group/index';
5
+ export * from './components/switch/index';
6
+ export * from './components/tabs/index';
7
+ export * from './components/toast/index';
@@ -0,0 +1,14 @@
1
+ <svg
2
+ xmlns="http://www.w3.org/2000/svg"
3
+ width="24"
4
+ height="24"
5
+ viewBox="0 0 24 24"
6
+ fill="none"
7
+ stroke="currentColor"
8
+ stroke-width="2"
9
+ stroke-linecap="round"
10
+ stroke-linejoin="round"
11
+ >
12
+ <path d="M18 6 6 18" />
13
+ <path d="m6 6 12 12" />
14
+ </svg>
@@ -0,0 +1,26 @@
1
+ export default X;
2
+ type X = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const X: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
15
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
16
+ $$bindings?: Bindings;
17
+ } & Exports;
18
+ (internal: unknown, props: {
19
+ $$events?: Events;
20
+ $$slots?: Slots;
21
+ }): Exports & {
22
+ $set?: any;
23
+ $on?: any;
24
+ };
25
+ z_$$bindings?: Bindings;
26
+ }
@@ -0,0 +1,2 @@
1
+ import type { SvelteHTMLElements } from 'svelte/elements';
2
+ export type HTMLAttributes<T extends keyof SvelteHTMLElements, U extends keyof SvelteHTMLElements[T] = never> = Omit<SvelteHTMLElements[T], U>;
@@ -0,0 +1 @@
1
+ export {};
@@ -1,10 +1,10 @@
1
1
  import type { Snippet } from 'svelte';
2
- interface PropsWithElement {
2
+ import type { HTMLAttributes } from './html-attributes';
3
+ import type { SvelteHTMLElements } from 'svelte/elements';
4
+ interface PropsWithElement<T extends keyof SvelteHTMLElements> {
3
5
  /**
4
6
  * Render the element yourself
5
7
  */
6
- element?: Snippet<[{
7
- attributes: Record<string, unknown>;
8
- }]>;
8
+ element?: Snippet<[HTMLAttributes<T>]>;
9
9
  }
10
10
  export type { PropsWithElement };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skeletonlabs/skeleton-svelte",
3
- "version": "2.0.0-next.2",
3
+ "version": "2.0.0-next.4",
4
4
  "description": "The Svelte package for Skeleton.",
5
5
  "author": "endigo9740 <chris@skeletonlabs.dev>",
6
6
  "types": "./dist/index.d.ts",
@@ -16,24 +16,24 @@
16
16
  "dist"
17
17
  ],
18
18
  "dependencies": {
19
- "@zag-js/accordion": "^1.22.1",
20
- "@zag-js/avatar": "^1.22.1",
21
- "@zag-js/combobox": "^1.22.1",
22
- "@zag-js/dialog": "^1.22.1",
23
- "@zag-js/file-upload": "^1.22.1",
24
- "@zag-js/pagination": "^1.22.1",
25
- "@zag-js/popover": "^1.22.1",
26
- "@zag-js/progress": "^1.22.1",
27
- "@zag-js/radio-group": "^1.22.1",
28
- "@zag-js/rating-group": "^1.22.1",
29
- "@zag-js/slider": "^1.22.1",
30
- "@zag-js/svelte": "^1.22.1",
31
- "@zag-js/switch": "^1.22.1",
32
- "@zag-js/tabs": "^1.22.1",
33
- "@zag-js/tags-input": "^1.22.1",
34
- "@zag-js/toast": "^1.22.1",
35
- "@zag-js/tooltip": "^1.22.1",
36
- "@skeletonlabs/skeleton-common": "1.0.0-next.2"
19
+ "@zag-js/accordion": "^1.23.0",
20
+ "@zag-js/avatar": "^1.23.0",
21
+ "@zag-js/combobox": "^1.23.0",
22
+ "@zag-js/dialog": "^1.23.0",
23
+ "@zag-js/file-upload": "^1.23.0",
24
+ "@zag-js/pagination": "^1.23.0",
25
+ "@zag-js/popover": "^1.23.0",
26
+ "@zag-js/progress": "^1.23.0",
27
+ "@zag-js/radio-group": "^1.23.0",
28
+ "@zag-js/rating-group": "^1.23.0",
29
+ "@zag-js/slider": "^1.23.0",
30
+ "@zag-js/svelte": "^1.23.0",
31
+ "@zag-js/switch": "^1.23.0",
32
+ "@zag-js/tabs": "^1.23.0",
33
+ "@zag-js/tags-input": "^1.23.0",
34
+ "@zag-js/toast": "^1.23.0",
35
+ "@zag-js/tooltip": "^1.23.0",
36
+ "@skeletonlabs/skeleton-common": "1.0.0-next.4"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "svelte": "^5.20.0"
@@ -52,7 +52,7 @@
52
52
  "typescript": "^5.9.2",
53
53
  "vite": "^7.1.3",
54
54
  "vitest": "3.2.4",
55
- "@skeletonlabs/skeleton": "4.0.0-next.1"
55
+ "@skeletonlabs/skeleton": "4.0.0-next.2"
56
56
  },
57
57
  "type": "module",
58
58
  "scripts": {
@@ -1,35 +0,0 @@
1
- <script lang="ts" module>
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
-
5
- export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import { mergeProps } from '@zag-js/svelte';
10
- import { classesAccordion } from '@skeletonlabs/skeleton-common';
11
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
12
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
13
-
14
- const rootContext = AccordionRootContext.consume();
15
- const itemContext = AccordionItemContext.consume();
16
- const props: AccordionContentProps = $props();
17
- const { element, children, ...restAttributes } = $derived(props);
18
- const attributes = $derived(
19
- mergeProps(
20
- rootContext.api.getItemContentProps(itemContext.itemProps),
21
- {
22
- class: classesAccordion.content
23
- },
24
- restAttributes
25
- )
26
- );
27
- </script>
28
-
29
- {#if element}
30
- {@render element({ attributes })}
31
- {:else}
32
- <div {...attributes}>
33
- {@render children?.()}
34
- </div>
35
- {/if}
@@ -1,7 +0,0 @@
1
- import type { HTMLAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
- export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
4
- }
5
- declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "">;
6
- type AccordionContent = ReturnType<typeof AccordionContent>;
7
- export default AccordionContent;
@@ -1,13 +0,0 @@
1
- import type { HTMLAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
- export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
4
- /**
5
- * The level of the heading. This is used to determine the heading level for accessibility purposes.
6
- *
7
- * @default 3
8
- */
9
- level?: 1 | 2 | 3 | 4 | 5 | 6;
10
- }
11
- declare const AccordionHeading: import("svelte").Component<AccordionHeadingProps, {}, "">;
12
- type AccordionHeading = ReturnType<typeof AccordionHeading>;
13
- export default AccordionHeading;
@@ -1,35 +0,0 @@
1
- <script lang="ts" module>
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
- import type { HTMLAttributes } from 'svelte/elements';
4
-
5
- export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import { mergeProps } from '@zag-js/svelte';
10
- import { classesAccordion } from '@skeletonlabs/skeleton-common';
11
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
12
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
13
-
14
- const rootContext = AccordionRootContext.consume();
15
- const itemContext = AccordionItemContext.consume();
16
- const props: AccordionIndicatorProps = $props();
17
- const { element, children, ...restAttributes } = $derived(props);
18
- const attributes = $derived(
19
- mergeProps(
20
- rootContext.api.getItemIndicatorProps(itemContext.itemProps),
21
- {
22
- class: classesAccordion.indicator
23
- },
24
- restAttributes
25
- )
26
- );
27
- </script>
28
-
29
- {#if element}
30
- {@render element({ attributes })}
31
- {:else}
32
- <div {...attributes}>
33
- {@render children?.()}
34
- </div>
35
- {/if}
@@ -1,7 +0,0 @@
1
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
4
- }
5
- declare const AccordionIndicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
6
- type AccordionIndicator = ReturnType<typeof AccordionIndicator>;
7
- export default AccordionIndicator;
@@ -1,17 +0,0 @@
1
- <script lang="ts" module>
2
- import type { Snippet } from 'svelte';
3
- import type { AccordionItemContextType } from '../modules/accordion-item-context.js';
4
-
5
- export interface AccordionItemContextProps {
6
- children: Snippet<[AccordionItemContextType]>;
7
- }
8
- </script>
9
-
10
- <script lang="ts">
11
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
12
-
13
- const props: AccordionItemContextProps = $props();
14
- const itemContext = AccordionItemContext.consume();
15
- </script>
16
-
17
- {@render props.children(itemContext)}
@@ -1,9 +0,0 @@
1
- import type { Snippet } from 'svelte';
2
- import type { AccordionItemContextType } from '../modules/accordion-item-context.js';
3
- export interface AccordionItemContextProps {
4
- children: Snippet<[AccordionItemContextType]>;
5
- }
6
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
7
- declare const AccordionItemContext: import("svelte").Component<AccordionItemContextProps, {}, "">;
8
- type AccordionItemContext = ReturnType<typeof AccordionItemContext>;
9
- export default AccordionItemContext;
@@ -1,45 +0,0 @@
1
- <script lang="ts" module>
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
- import type { ItemProps } from '@zag-js/accordion';
5
-
6
- export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {}
7
- </script>
8
-
9
- <script lang="ts">
10
- import { mergeProps } from '@zag-js/svelte';
11
- import { splitItemProps } from '@zag-js/accordion';
12
- import { classesAccordion } from '@skeletonlabs/skeleton-common';
13
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
14
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
15
-
16
- const rootContext = AccordionRootContext.consume();
17
- const props: AccordionItemProps = $props();
18
- const [itemProps, componentProps] = $derived(splitItemProps(props));
19
- const { element, children, ...restAttributes } = $derived(componentProps);
20
- const attributes = $derived(
21
- mergeProps(
22
- rootContext.api.getItemProps(itemProps),
23
- {
24
- class: classesAccordion.item
25
- },
26
- restAttributes
27
- )
28
- );
29
- AccordionItemContext.provide({
30
- get itemProps() {
31
- return itemProps;
32
- },
33
- get itemState() {
34
- return rootContext.api.getItemState(itemProps);
35
- }
36
- });
37
- </script>
38
-
39
- {#if element}
40
- {@render element({ attributes })}
41
- {:else}
42
- <div {...attributes}>
43
- {@render children?.()}
44
- </div>
45
- {/if}
@@ -1,8 +0,0 @@
1
- import type { HTMLAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
- import type { ItemProps } from '@zag-js/accordion';
4
- export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {
5
- }
6
- declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
7
- type AccordionItem = ReturnType<typeof AccordionItem>;
8
- export default AccordionItem;
@@ -1,17 +0,0 @@
1
- <script lang="ts" module>
2
- import type { Snippet } from 'svelte';
3
- import type { AccordionRootContextType } from '../modules/accordion-root-context.js';
4
-
5
- export interface AccordionRootContextProps {
6
- children: Snippet<[AccordionRootContextType]>;
7
- }
8
- </script>
9
-
10
- <script lang="ts">
11
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
12
-
13
- const props: AccordionRootContextProps = $props();
14
- const rootContext = AccordionRootContext.consume();
15
- </script>
16
-
17
- {@render props.children(rootContext)}
@@ -1,9 +0,0 @@
1
- import type { Snippet } from 'svelte';
2
- import type { AccordionRootContextType } from '../modules/accordion-root-context.js';
3
- export interface AccordionRootContextProps {
4
- children: Snippet<[AccordionRootContextType]>;
5
- }
6
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
7
- declare const AccordionRootContext: import("svelte").Component<AccordionRootContextProps, {}, "">;
8
- type AccordionRootContext = ReturnType<typeof AccordionRootContext>;
9
- export default AccordionRootContext;
@@ -1,49 +0,0 @@
1
- <script lang="ts" module>
2
- import type { Props } from '@zag-js/accordion';
3
- import type { HTMLAttributes } from 'svelte/elements';
4
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
5
-
6
- export interface AccordionRootProps
7
- extends PropsWithElement,
8
- Omit<Props, 'id'>,
9
- Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {}
10
- </script>
11
-
12
- <script lang="ts">
13
- import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
14
- import { machine, connect, splitProps } from '@zag-js/accordion';
15
- import { classesAccordion } from '@skeletonlabs/skeleton-common';
16
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
17
-
18
- const props: AccordionRootProps = $props();
19
- const [machineProps, componentProps] = $derived(splitProps(props));
20
- const { element, children, ...restAttributes } = $derived(componentProps);
21
- const id = $props.id();
22
- const service = useMachine(machine, () => ({
23
- id: id,
24
- ...machineProps
25
- }));
26
- const api = $derived(connect(service, normalizeProps));
27
- const attributes = $derived(
28
- mergeProps(
29
- api.getRootProps(),
30
- {
31
- class: classesAccordion.root
32
- },
33
- restAttributes
34
- )
35
- );
36
- AccordionRootContext.provide({
37
- get api() {
38
- return api;
39
- }
40
- });
41
- </script>
42
-
43
- {#if element}
44
- {@render element({ attributes })}
45
- {:else}
46
- <div {...attributes}>
47
- {@render children?.()}
48
- </div>
49
- {/if}
@@ -1,8 +0,0 @@
1
- import type { Props } from '@zag-js/accordion';
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
- export interface AccordionRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
5
- }
6
- declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "">;
7
- type AccordionRoot = ReturnType<typeof AccordionRoot>;
8
- export default AccordionRoot;
@@ -1,35 +0,0 @@
1
- <script lang="ts" module>
2
- import type { HTMLButtonAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
-
5
- export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {}
6
- </script>
7
-
8
- <script lang="ts">
9
- import { mergeProps } from '@zag-js/svelte';
10
- import { classesAccordion } from '@skeletonlabs/skeleton-common';
11
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
12
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
13
-
14
- const rootContext = AccordionRootContext.consume();
15
- const itemContext = AccordionItemContext.consume();
16
- const props: AccordionTriggerProps = $props();
17
- const { element, children, ...restAttributes } = $derived(props);
18
- const attributes = $derived(
19
- mergeProps(
20
- rootContext.api.getItemTriggerProps(itemContext.itemProps),
21
- {
22
- class: classesAccordion.trigger
23
- },
24
- restAttributes
25
- )
26
- );
27
- </script>
28
-
29
- {#if element}
30
- {@render element({ attributes })}
31
- {:else}
32
- <button {...attributes}>
33
- {@render children?.()}
34
- </button>
35
- {/if}
@@ -1,7 +0,0 @@
1
- import type { HTMLButtonAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
- export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {
4
- }
5
- declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
6
- type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
7
- export default AccordionTrigger;
@@ -1,9 +0,0 @@
1
- export declare const Accordion: import("svelte").Component<import("../anatomy/accordion-root.svelte").AccordionRootProps, {}, ""> & {
2
- Context: import("svelte").Component<import("../anatomy/accordion-root-context.svelte").AccordionRootContextProps, {}, "">;
3
- Item: import("svelte").Component<import("../anatomy/accordion-item.svelte").AccordionItemProps, {}, "">;
4
- ItemContext: import("svelte").Component<import("../anatomy/accordion-item-context.svelte").AccordionItemContextProps, {}, "">;
5
- Heading: import("svelte").Component<import("../anatomy/accordion-heading.svelte").AccordionHeadingProps, {}, "">;
6
- Trigger: import("svelte").Component<import("../anatomy/accordion-trigger.svelte").AccordionTriggerProps, {}, "">;
7
- Indicator: import("svelte").Component<import("../anatomy/accordion-indicator.svelte").AccordionIndicatorProps, {}, "">;
8
- Content: import("svelte").Component<import("../anatomy/accordion-content.svelte").AccordionContentProps, {}, "">;
9
- };
@@ -1,17 +0,0 @@
1
- import AccordionRoot from '../anatomy/accordion-root.svelte';
2
- import AccordionItem from '../anatomy/accordion-item.svelte';
3
- import AccordionHeading from '../anatomy/accordion-heading.svelte';
4
- import AccordionTrigger from '../anatomy/accordion-trigger.svelte';
5
- import AccordionIndicator from '../anatomy/accordion-indicator.svelte';
6
- import AccordionContent from '../anatomy/accordion-content.svelte';
7
- import AccordionRootContext from '../anatomy/accordion-root-context.svelte';
8
- import AccordionItemContext from '../anatomy/accordion-item-context.svelte';
9
- export const Accordion = Object.assign(AccordionRoot, {
10
- Context: AccordionRootContext,
11
- Item: AccordionItem,
12
- ItemContext: AccordionItemContext,
13
- Heading: AccordionHeading,
14
- Trigger: AccordionTrigger,
15
- Indicator: AccordionIndicator,
16
- Content: AccordionContent
17
- });
@@ -1,10 +0,0 @@
1
- import type { ItemProps, ItemState } from '@zag-js/accordion';
2
- export interface AccordionItemContextType {
3
- itemProps: ItemProps;
4
- itemState: ItemState;
5
- }
6
- export declare const AccordionItemContext: {
7
- key: symbol;
8
- consume(): AccordionItemContextType;
9
- provide(value: AccordionItemContextType): AccordionItemContextType;
10
- };
@@ -1,9 +0,0 @@
1
- import type { Api } from '@zag-js/accordion';
2
- export interface AccordionRootContextType {
3
- api: Api;
4
- }
5
- export declare const AccordionRootContext: {
6
- key: symbol;
7
- consume(): AccordionRootContextType;
8
- provide(value: AccordionRootContextType): AccordionRootContextType;
9
- };