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

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 (117) hide show
  1. package/dist/components/accordion/anatomy/{accordion-content.svelte → content.svelte} +8 -11
  2. package/dist/components/accordion/anatomy/{accordion-content.svelte.d.ts → content.svelte.d.ts} +4 -4
  3. package/dist/components/accordion/anatomy/{accordion-heading.svelte → heading.svelte} +5 -10
  4. package/dist/components/accordion/anatomy/heading.svelte.d.ts +13 -0
  5. package/dist/components/accordion/anatomy/{accordion-indicator.svelte → indicator.svelte} +8 -11
  6. package/dist/components/accordion/anatomy/{accordion-indicator.svelte.d.ts → indicator.svelte.d.ts} +4 -4
  7. package/dist/components/accordion/anatomy/{accordion-item-context.svelte → item-context.svelte} +3 -2
  8. package/dist/components/accordion/anatomy/item-context.svelte.d.ts +8 -0
  9. package/dist/components/accordion/anatomy/{accordion-item.svelte → item.svelte} +9 -13
  10. package/dist/components/accordion/anatomy/{accordion-item.svelte.d.ts → item.svelte.d.ts} +4 -4
  11. package/dist/components/accordion/anatomy/{accordion-root-context.svelte → root-context.svelte} +3 -2
  12. package/dist/components/accordion/anatomy/root-context.svelte.d.ts +8 -0
  13. package/dist/components/accordion/anatomy/{accordion-root.svelte → root.svelte} +6 -11
  14. package/dist/components/accordion/anatomy/{accordion-root.svelte.d.ts → root.svelte.d.ts} +4 -4
  15. package/dist/components/accordion/anatomy/{accordion-trigger.svelte → trigger.svelte} +8 -11
  16. package/dist/components/accordion/anatomy/{accordion-trigger.svelte.d.ts → trigger.svelte.d.ts} +4 -4
  17. package/dist/components/accordion/index.d.ts +11 -11
  18. package/dist/components/accordion/index.js +1 -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.js +2 -0
  22. package/dist/components/accordion/modules/root-context.js +2 -0
  23. package/dist/components/avatar/anatomy/{avatar-fallback.svelte → fallback.svelte} +7 -12
  24. package/dist/components/avatar/anatomy/{avatar-fallback.svelte.d.ts → fallback.svelte.d.ts} +4 -4
  25. package/dist/components/avatar/anatomy/{avatar-image.svelte → image.svelte} +7 -12
  26. package/dist/components/avatar/anatomy/{avatar-image.svelte.d.ts → image.svelte.d.ts} +4 -4
  27. package/dist/components/avatar/anatomy/{avatar-root-context.svelte → root-context.svelte} +3 -2
  28. package/dist/components/avatar/anatomy/root-context.svelte.d.ts +8 -0
  29. package/dist/components/avatar/anatomy/{avatar-root.svelte → root.svelte} +6 -11
  30. package/dist/components/avatar/anatomy/{avatar-root.svelte.d.ts → root.svelte.d.ts} +4 -4
  31. package/dist/components/avatar/index.d.ts +6 -6
  32. package/dist/components/avatar/index.js +1 -1
  33. package/dist/components/avatar/modules/anatomy.d.ts +5 -0
  34. package/dist/components/avatar/modules/anatomy.js +9 -0
  35. package/dist/components/avatar/modules/root-context.js +2 -0
  36. package/dist/components/progress-linear/anatomy/label.svelte +36 -0
  37. package/dist/components/progress-linear/anatomy/label.svelte.d.ts +7 -0
  38. package/dist/components/progress-linear/anatomy/range.svelte +36 -0
  39. package/dist/components/progress-linear/anatomy/range.svelte.d.ts +7 -0
  40. package/dist/components/progress-linear/anatomy/root-context.svelte +18 -0
  41. package/dist/components/progress-linear/anatomy/root-context.svelte.d.ts +8 -0
  42. package/dist/components/progress-linear/anatomy/root.svelte +53 -0
  43. package/dist/components/progress-linear/anatomy/root.svelte.d.ts +8 -0
  44. package/dist/components/progress-linear/anatomy/track.svelte +28 -0
  45. package/dist/components/progress-linear/anatomy/track.svelte.d.ts +7 -0
  46. package/dist/components/progress-linear/index.d.ts +7 -0
  47. package/dist/components/progress-linear/index.js +1 -0
  48. package/dist/components/progress-linear/modules/anatomy.d.ts +6 -0
  49. package/dist/components/progress-linear/modules/anatomy.js +11 -0
  50. package/dist/components/progress-linear/modules/root-context.d.ts +9 -0
  51. package/dist/components/{accordion/modules/accordion-item-context.js → progress-linear/modules/root-context.js} +1 -1
  52. package/dist/components/rating-group/anatomy/{rating-group-control.svelte → control.svelte} +7 -12
  53. package/dist/components/rating-group/anatomy/{rating-group-control.svelte.d.ts → control.svelte.d.ts} +4 -4
  54. package/dist/components/rating-group/anatomy/{rating-group-hidden-input.svelte → hidden-input.svelte} +7 -12
  55. package/dist/components/rating-group/anatomy/{rating-group-hidden-input.svelte.d.ts → hidden-input.svelte.d.ts} +4 -4
  56. package/dist/components/rating-group/anatomy/{rating-group-item-context.svelte → item-context.svelte} +3 -2
  57. package/dist/components/rating-group/anatomy/item-context.svelte.d.ts +8 -0
  58. package/dist/components/rating-group/anatomy/{rating-group-item.svelte → item.svelte} +10 -13
  59. package/dist/components/rating-group/anatomy/{rating-group-item.svelte.d.ts → item.svelte.d.ts} +4 -4
  60. package/dist/components/rating-group/anatomy/{rating-group-label.svelte → label.svelte} +7 -12
  61. package/dist/components/rating-group/anatomy/{rating-group-label.svelte.d.ts → label.svelte.d.ts} +4 -4
  62. package/dist/components/rating-group/anatomy/{rating-group-root-context.svelte → root-context.svelte} +3 -2
  63. package/dist/components/rating-group/anatomy/root-context.svelte.d.ts +8 -0
  64. package/dist/components/rating-group/anatomy/{rating-group-root.svelte → root.svelte} +6 -11
  65. package/dist/components/rating-group/anatomy/{rating-group-root.svelte.d.ts → root.svelte.d.ts} +4 -4
  66. package/dist/components/rating-group/index.d.ts +10 -10
  67. package/dist/components/rating-group/index.js +1 -1
  68. package/dist/components/rating-group/modules/anatomy.d.ts +8 -0
  69. package/dist/components/rating-group/modules/anatomy.js +15 -0
  70. package/dist/components/rating-group/modules/item-context.js +2 -0
  71. package/dist/components/rating-group/modules/root-context.js +2 -0
  72. package/dist/components/tabs/anatomy/{tabs-content.svelte → content.svelte} +6 -11
  73. package/dist/components/tabs/anatomy/{tabs-content.svelte.d.ts → content.svelte.d.ts} +4 -4
  74. package/dist/components/tabs/anatomy/{tabs-indicator.svelte → indicator.svelte} +6 -11
  75. package/dist/components/tabs/anatomy/{tabs-indicator.svelte.d.ts → indicator.svelte.d.ts} +4 -4
  76. package/dist/components/tabs/anatomy/{tabs-list.svelte → list.svelte} +6 -11
  77. package/dist/components/tabs/anatomy/{tabs-list.svelte.d.ts → list.svelte.d.ts} +4 -4
  78. package/dist/components/tabs/anatomy/{tabs-root-context.svelte → root-context.svelte} +3 -2
  79. package/dist/components/tabs/anatomy/root-context.svelte.d.ts +8 -0
  80. package/dist/components/tabs/anatomy/{tabs-root.svelte → root.svelte} +6 -11
  81. package/dist/components/tabs/anatomy/{tabs-root.svelte.d.ts → root.svelte.d.ts} +4 -4
  82. package/dist/components/tabs/anatomy/{tabs-trigger.svelte → trigger.svelte} +6 -11
  83. package/dist/components/tabs/anatomy/{tabs-trigger.svelte.d.ts → trigger.svelte.d.ts} +4 -4
  84. package/dist/components/tabs/index.d.ts +1 -1
  85. package/dist/components/tabs/index.js +1 -1
  86. package/dist/components/tabs/modules/anatomy.d.ts +7 -0
  87. package/dist/components/tabs/modules/anatomy.js +13 -0
  88. package/dist/components/tabs/modules/root-context.js +2 -0
  89. package/dist/index.d.ts +5 -4
  90. package/dist/index.js +5 -4
  91. package/package.json +3 -3
  92. package/dist/components/accordion/anatomy/accordion-heading.svelte.d.ts +0 -13
  93. package/dist/components/accordion/anatomy/accordion-item-context.svelte.d.ts +0 -9
  94. package/dist/components/accordion/anatomy/accordion-root-context.svelte.d.ts +0 -9
  95. package/dist/components/accordion/modules/accordion-anatomy.d.ts +0 -9
  96. package/dist/components/accordion/modules/accordion-anatomy.js +0 -17
  97. package/dist/components/accordion/modules/accordion-root-context.js +0 -2
  98. package/dist/components/avatar/anatomy/avatar-root-context.svelte.d.ts +0 -9
  99. package/dist/components/avatar/modules/avatar-anatomy.d.ts +0 -5
  100. package/dist/components/avatar/modules/avatar-anatomy.js +0 -9
  101. package/dist/components/avatar/modules/avatar-root-context.js +0 -2
  102. package/dist/components/rating-group/anatomy/rating-group-item-context.svelte.d.ts +0 -9
  103. package/dist/components/rating-group/anatomy/rating-group-root-context.svelte.d.ts +0 -9
  104. package/dist/components/rating-group/modules/rating-group-anatomy.d.ts +0 -8
  105. package/dist/components/rating-group/modules/rating-group-anatomy.js +0 -15
  106. package/dist/components/rating-group/modules/rating-group-item-context.js +0 -2
  107. package/dist/components/rating-group/modules/rating-group-root-context.js +0 -2
  108. package/dist/components/tabs/anatomy/tabs-root-context.svelte.d.ts +0 -9
  109. package/dist/components/tabs/modules/tabs-anatomy.d.ts +0 -7
  110. package/dist/components/tabs/modules/tabs-anatomy.js +0 -13
  111. package/dist/components/tabs/modules/tabs-root-context.js +0 -2
  112. /package/dist/components/accordion/modules/{accordion-item-context.d.ts → item-context.d.ts} +0 -0
  113. /package/dist/components/accordion/modules/{accordion-root-context.d.ts → root-context.d.ts} +0 -0
  114. /package/dist/components/avatar/modules/{avatar-root-context.d.ts → root-context.d.ts} +0 -0
  115. /package/dist/components/rating-group/modules/{rating-group-item-context.d.ts → item-context.d.ts} +0 -0
  116. /package/dist/components/rating-group/modules/{rating-group-root-context.d.ts → root-context.d.ts} +0 -0
  117. /package/dist/components/tabs/modules/{tabs-root-context.d.ts → root-context.d.ts} +0 -0
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
 
5
5
  export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
6
6
  </script>
@@ -8,21 +8,18 @@
8
8
  <script lang="ts">
9
9
  import { mergeProps } from '@zag-js/svelte';
10
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';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+ import { AccordionItemContext } from '../modules/item-context';
13
+
14
+ const props: AccordionContentProps = $props();
13
15
 
14
16
  const rootContext = AccordionRootContext.consume();
15
17
  const itemContext = AccordionItemContext.consume();
16
- const props: AccordionContentProps = $props();
18
+
17
19
  const { element, children, ...restAttributes } = $derived(props);
20
+
18
21
  const attributes = $derived(
19
- mergeProps(
20
- rootContext.api.getItemContentProps(itemContext.itemProps),
21
- {
22
- class: classesAccordion.content
23
- },
24
- restAttributes
25
- )
22
+ mergeProps(rootContext.api.getItemContentProps(itemContext.itemProps), { class: classesAccordion.content }, restAttributes)
26
23
  );
27
24
  </script>
28
25
 
@@ -1,7 +1,7 @@
1
1
  import type { HTMLAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  export interface AccordionContentProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
4
4
  }
5
- declare const AccordionContent: import("svelte").Component<AccordionContentProps, {}, "">;
6
- type AccordionContent = ReturnType<typeof AccordionContent>;
7
- export default AccordionContent;
5
+ declare const Content: import("svelte").Component<AccordionContentProps, {}, "">;
6
+ type Content = ReturnType<typeof Content>;
7
+ export default Content;
@@ -1,10 +1,10 @@
1
1
  <script lang="ts" module>
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
 
5
5
  export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
6
6
  /**
7
- * The level of the heading. This is used to determine the heading level for accessibility purposes.
7
+ * The level of the heading.
8
8
  *
9
9
  * @default 3
10
10
  */
@@ -18,15 +18,10 @@
18
18
 
19
19
  const props: AccordionHeadingProps = $props();
20
20
  const { level = 3, element, children, ...restAttributes } = $derived(props);
21
- const attributes = $derived(
22
- mergeProps(
23
- {
24
- class: classesAccordion.heading
25
- },
26
- restAttributes
27
- )
28
- );
21
+
29
22
  const tag = $derived(`h${level}`);
23
+
24
+ const attributes = $derived(mergeProps({ class: classesAccordion.heading }, restAttributes));
30
25
  </script>
31
26
 
32
27
  {#if element}
@@ -0,0 +1,13 @@
1
+ import type { HTMLAttributes } from 'svelte/elements';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
+ export interface AccordionHeadingProps extends PropsWithElement, HTMLAttributes<HTMLHeadingElement> {
4
+ /**
5
+ * The level of the heading.
6
+ *
7
+ * @default 3
8
+ */
9
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
10
+ }
11
+ declare const Heading: import("svelte").Component<AccordionHeadingProps, {}, "">;
12
+ type Heading = ReturnType<typeof Heading>;
13
+ export default Heading;
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
4
 
5
5
  export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {}
@@ -8,21 +8,18 @@
8
8
  <script lang="ts">
9
9
  import { mergeProps } from '@zag-js/svelte';
10
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';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+ import { AccordionItemContext } from '../modules/item-context';
13
+
14
+ const props: AccordionIndicatorProps = $props();
13
15
 
14
16
  const rootContext = AccordionRootContext.consume();
15
17
  const itemContext = AccordionItemContext.consume();
16
- const props: AccordionIndicatorProps = $props();
18
+
17
19
  const { element, children, ...restAttributes } = $derived(props);
20
+
18
21
  const attributes = $derived(
19
- mergeProps(
20
- rootContext.api.getItemIndicatorProps(itemContext.itemProps),
21
- {
22
- class: classesAccordion.indicator
23
- },
24
- restAttributes
25
- )
22
+ mergeProps(rootContext.api.getItemIndicatorProps(itemContext.itemProps), { class: classesAccordion.indicator }, restAttributes)
26
23
  );
27
24
  </script>
28
25
 
@@ -1,7 +1,7 @@
1
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
  export interface AccordionIndicatorProps extends PropsWithElement, HTMLAttributes<HTMLDivElement> {
4
4
  }
5
- declare const AccordionIndicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
6
- type AccordionIndicator = ReturnType<typeof AccordionIndicator>;
7
- export default AccordionIndicator;
5
+ declare const Indicator: import("svelte").Component<AccordionIndicatorProps, {}, "">;
6
+ type Indicator = ReturnType<typeof Indicator>;
7
+ export default Indicator;
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { Snippet } from 'svelte';
3
- import type { AccordionItemContextType } from '../modules/accordion-item-context.js';
3
+ import type { AccordionItemContextType } from '../modules/item-context';
4
4
 
5
5
  export interface AccordionItemContextProps {
6
6
  children: Snippet<[AccordionItemContextType]>;
@@ -8,9 +8,10 @@
8
8
  </script>
9
9
 
10
10
  <script lang="ts">
11
- import { AccordionItemContext } from '../modules/accordion-item-context.js';
11
+ import { AccordionItemContext } from '../modules/item-context';
12
12
 
13
13
  const props: AccordionItemContextProps = $props();
14
+
14
15
  const itemContext = AccordionItemContext.consume();
15
16
  </script>
16
17
 
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { AccordionItemContextType } from '../modules/item-context';
3
+ export interface AccordionItemContextProps {
4
+ children: Snippet<[AccordionItemContextType]>;
5
+ }
6
+ declare const ItemContext: import("svelte").Component<AccordionItemContextProps, {}, "">;
7
+ type ItemContext = ReturnType<typeof ItemContext>;
8
+ export default ItemContext;
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
  import type { ItemProps } from '@zag-js/accordion';
5
5
 
6
6
  export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {}
@@ -10,22 +10,18 @@
10
10
  import { mergeProps } from '@zag-js/svelte';
11
11
  import { splitItemProps } from '@zag-js/accordion';
12
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';
13
+ import { AccordionRootContext } from '../modules/root-context';
14
+ import { AccordionItemContext } from '../modules/item-context';
15
15
 
16
- const rootContext = AccordionRootContext.consume();
17
16
  const props: AccordionItemProps = $props();
17
+
18
+ const rootContext = AccordionRootContext.consume();
19
+
18
20
  const [itemProps, componentProps] = $derived(splitItemProps(props));
19
21
  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
- );
22
+
23
+ const attributes = $derived(mergeProps(rootContext.api.getItemProps(itemProps), { class: classesAccordion.item }, restAttributes));
24
+
29
25
  AccordionItemContext.provide({
30
26
  get itemProps() {
31
27
  return itemProps;
@@ -1,8 +1,8 @@
1
1
  import type { HTMLAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  import type { ItemProps } from '@zag-js/accordion';
4
4
  export interface AccordionItemProps extends PropsWithElement, ItemProps, HTMLAttributes<HTMLDivElement> {
5
5
  }
6
- declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
7
- type AccordionItem = ReturnType<typeof AccordionItem>;
8
- export default AccordionItem;
6
+ declare const Item: import("svelte").Component<AccordionItemProps, {}, "">;
7
+ type Item = ReturnType<typeof Item>;
8
+ export default Item;
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { Snippet } from 'svelte';
3
- import type { AccordionRootContextType } from '../modules/accordion-root-context.js';
3
+ import type { AccordionRootContextType } from '../modules/root-context';
4
4
 
5
5
  export interface AccordionRootContextProps {
6
6
  children: Snippet<[AccordionRootContextType]>;
@@ -8,9 +8,10 @@
8
8
  </script>
9
9
 
10
10
  <script lang="ts">
11
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
12
 
13
13
  const props: AccordionRootContextProps = $props();
14
+
14
15
  const rootContext = AccordionRootContext.consume();
15
16
  </script>
16
17
 
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { AccordionRootContextType } from '../modules/root-context';
3
+ export interface AccordionRootContextProps {
4
+ children: Snippet<[AccordionRootContextType]>;
5
+ }
6
+ declare const RootContext: import("svelte").Component<AccordionRootContextProps, {}, "">;
7
+ type RootContext = ReturnType<typeof RootContext>;
8
+ export default RootContext;
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" module>
2
2
  import type { Props } from '@zag-js/accordion';
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
4
+ import type { PropsWithElement } from '../../../internal/props-with-element';
5
5
 
6
6
  export interface AccordionRootProps
7
7
  extends PropsWithElement,
@@ -13,26 +13,21 @@
13
13
  import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
14
14
  import { machine, connect, splitProps } from '@zag-js/accordion';
15
15
  import { classesAccordion } from '@skeletonlabs/skeleton-common';
16
- import { AccordionRootContext } from '../modules/accordion-root-context.js';
16
+ import { AccordionRootContext } from '../modules/root-context';
17
17
 
18
18
  const props: AccordionRootProps = $props();
19
19
  const [machineProps, componentProps] = $derived(splitProps(props));
20
20
  const { element, children, ...restAttributes } = $derived(componentProps);
21
+
21
22
  const id = $props.id();
22
23
  const service = useMachine(machine, () => ({
23
24
  id: id,
24
25
  ...machineProps
25
26
  }));
26
27
  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
- );
28
+
29
+ const attributes = $derived(mergeProps(api.getRootProps(), { class: classesAccordion.root }, restAttributes));
30
+
36
31
  AccordionRootContext.provide({
37
32
  get api() {
38
33
  return api;
@@ -1,8 +1,8 @@
1
1
  import type { Props } from '@zag-js/accordion';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
  export interface AccordionRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
5
5
  }
6
- declare const AccordionRoot: import("svelte").Component<AccordionRootProps, {}, "">;
7
- type AccordionRoot = ReturnType<typeof AccordionRoot>;
8
- export default AccordionRoot;
6
+ declare const Root: import("svelte").Component<AccordionRootProps, {}, "">;
7
+ type Root = ReturnType<typeof Root>;
8
+ export default Root;
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { HTMLButtonAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
 
5
5
  export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {}
6
6
  </script>
@@ -8,21 +8,18 @@
8
8
  <script lang="ts">
9
9
  import { mergeProps } from '@zag-js/svelte';
10
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';
11
+ import { AccordionRootContext } from '../modules/root-context';
12
+ import { AccordionItemContext } from '../modules/item-context';
13
+
14
+ const props: AccordionTriggerProps = $props();
13
15
 
14
16
  const rootContext = AccordionRootContext.consume();
15
17
  const itemContext = AccordionItemContext.consume();
16
- const props: AccordionTriggerProps = $props();
18
+
17
19
  const { element, children, ...restAttributes } = $derived(props);
20
+
18
21
  const attributes = $derived(
19
- mergeProps(
20
- rootContext.api.getItemTriggerProps(itemContext.itemProps),
21
- {
22
- class: classesAccordion.trigger
23
- },
24
- restAttributes
25
- )
22
+ mergeProps(rootContext.api.getItemTriggerProps(itemContext.itemProps), { class: classesAccordion.trigger }, restAttributes)
26
23
  );
27
24
  </script>
28
25
 
@@ -1,7 +1,7 @@
1
1
  import type { HTMLButtonAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  export interface AccordionTriggerProps extends PropsWithElement, HTMLButtonAttributes {
4
4
  }
5
- declare const AccordionTrigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
6
- type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
7
- export default AccordionTrigger;
5
+ declare const Trigger: import("svelte").Component<AccordionTriggerProps, {}, "">;
6
+ type Trigger = ReturnType<typeof Trigger>;
7
+ export default Trigger;
@@ -1,11 +1,11 @@
1
- export { Accordion } from './modules/accordion-anatomy';
2
- export type { AccordionRootProps } from './anatomy/accordion-root.svelte';
3
- export type { AccordionRootContextProps } from './anatomy/accordion-root-context.svelte';
4
- export type { AccordionItemProps } from './anatomy/accordion-item.svelte';
5
- export type { AccordionItemContextProps } from './anatomy/accordion-item-context.svelte';
6
- export type { AccordionHeadingProps } from './anatomy/accordion-heading.svelte';
7
- export type { AccordionTriggerProps } from './anatomy/accordion-trigger.svelte';
8
- export type { AccordionIndicatorProps } from './anatomy/accordion-indicator.svelte';
9
- export type { AccordionContentProps } from './anatomy/accordion-content.svelte';
10
- export type { AccordionRootContextType as AccordionRootContext } from './modules/accordion-root-context.js';
11
- export type { AccordionItemContextType as AccordionItemContext } from './modules/accordion-item-context.js';
1
+ export { Accordion } from './modules/anatomy';
2
+ export type { AccordionRootProps } from './anatomy/root.svelte';
3
+ export type { AccordionRootContextProps } from './anatomy/root-context.svelte';
4
+ export type { AccordionItemProps } from './anatomy/item.svelte';
5
+ export type { AccordionItemContextProps } from './anatomy/item-context.svelte';
6
+ export type { AccordionHeadingProps } from './anatomy/heading.svelte';
7
+ export type { AccordionTriggerProps } from './anatomy/trigger.svelte';
8
+ export type { AccordionIndicatorProps } from './anatomy/indicator.svelte';
9
+ export type { AccordionContentProps } from './anatomy/content.svelte';
10
+ export type { AccordionRootContextType as AccordionRootContext } from './modules/root-context';
11
+ export type { AccordionItemContextType as AccordionItemContext } from './modules/item-context';
@@ -1 +1 @@
1
- export { Accordion } from './modules/accordion-anatomy';
1
+ export { Accordion } from './modules/anatomy';
@@ -0,0 +1,9 @@
1
+ export declare const Accordion: import("svelte").Component<import("../anatomy/root.svelte").AccordionRootProps, {}, ""> & {
2
+ Context: import("svelte").Component<import("../anatomy/root-context.svelte").AccordionRootContextProps, {}, "">;
3
+ Item: import("svelte").Component<import("../anatomy/item.svelte").AccordionItemProps, {}, "">;
4
+ ItemContext: import("svelte").Component<import("../anatomy/item-context.svelte").AccordionItemContextProps, {}, "">;
5
+ Heading: import("svelte").Component<import("../anatomy/heading.svelte").AccordionHeadingProps, {}, "">;
6
+ Trigger: import("svelte").Component<import("../anatomy/trigger.svelte").AccordionTriggerProps, {}, "">;
7
+ Indicator: import("svelte").Component<import("../anatomy/indicator.svelte").AccordionIndicatorProps, {}, "">;
8
+ Content: import("svelte").Component<import("../anatomy/content.svelte").AccordionContentProps, {}, "">;
9
+ };
@@ -0,0 +1,17 @@
1
+ import Root from '../anatomy/root.svelte';
2
+ import RootContext from '../anatomy/root-context.svelte';
3
+ import Item from '../anatomy/item.svelte';
4
+ import ItemContext from '../anatomy/item-context.svelte';
5
+ import Heading from '../anatomy/heading.svelte';
6
+ import Trigger from '../anatomy/trigger.svelte';
7
+ import Indicator from '../anatomy/indicator.svelte';
8
+ import Content from '../anatomy/content.svelte';
9
+ export const Accordion = Object.assign(Root, {
10
+ Context: RootContext,
11
+ Item: Item,
12
+ ItemContext: ItemContext,
13
+ Heading: Heading,
14
+ Trigger: Trigger,
15
+ Indicator: Indicator,
16
+ Content: Content
17
+ });
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const AccordionItemContext = createContext();
@@ -0,0 +1,2 @@
1
+ import { createContext } from '../../../internal/create-context';
2
+ export const AccordionRootContext = createContext();
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  import type { HTMLAttributes } from 'svelte/elements';
4
4
 
5
5
  export interface AvatarFallbackProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {}
@@ -8,20 +8,15 @@
8
8
  <script lang="ts">
9
9
  import { mergeProps } from '@zag-js/svelte';
10
10
  import { classesAvatar } from '@skeletonlabs/skeleton-common';
11
- import { AvatarRootContext } from '../modules/avatar-root-context.js';
11
+ import { AvatarRootContext } from '../modules/root-context';
12
12
 
13
- const rootContext = AvatarRootContext.consume();
14
13
  const props: AvatarFallbackProps = $props();
14
+
15
+ const rootContext = AvatarRootContext.consume();
16
+
15
17
  const { element, children, ...restAttributes } = $derived(props);
16
- const attributes = $derived(
17
- mergeProps(
18
- rootContext.api.getFallbackProps(),
19
- {
20
- class: classesAvatar.fallback
21
- },
22
- restAttributes
23
- )
24
- );
18
+
19
+ const attributes = $derived(mergeProps(rootContext.api.getFallbackProps(), { class: classesAvatar.fallback }, restAttributes));
25
20
  </script>
26
21
 
27
22
  {#if element}
@@ -1,7 +1,7 @@
1
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
  export interface AvatarFallbackProps extends PropsWithElement, HTMLAttributes<HTMLSpanElement> {
4
4
  }
5
- declare const AvatarFallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
6
- type AvatarFallback = ReturnType<typeof AvatarFallback>;
7
- export default AvatarFallback;
5
+ declare const Fallback: import("svelte").Component<AvatarFallbackProps, {}, "">;
6
+ type Fallback = ReturnType<typeof Fallback>;
7
+ export default Fallback;
@@ -1,5 +1,5 @@
1
1
  <script lang="ts" module>
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  import type { HTMLImgAttributes } from 'svelte/elements';
4
4
 
5
5
  export interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {}
@@ -8,20 +8,15 @@
8
8
  <script lang="ts">
9
9
  import { mergeProps } from '@zag-js/svelte';
10
10
  import { classesAvatar } from '@skeletonlabs/skeleton-common';
11
- import { AvatarRootContext } from '../modules/avatar-root-context.js';
11
+ import { AvatarRootContext } from '../modules/root-context';
12
12
 
13
- const rootContext = AvatarRootContext.consume();
14
13
  const props: AvatarImageProps = $props();
14
+
15
+ const rootContext = AvatarRootContext.consume();
16
+
15
17
  const { element, ...restAttributes } = $derived(props);
16
- const attributes = $derived(
17
- mergeProps(
18
- rootContext.api.getImageProps(),
19
- {
20
- class: classesAvatar.image
21
- },
22
- restAttributes
23
- )
24
- );
18
+
19
+ const attributes = $derived(mergeProps(rootContext.api.getImageProps(), { class: classesAvatar.image }, restAttributes));
25
20
  </script>
26
21
 
27
22
  {#if element}
@@ -1,7 +1,7 @@
1
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
1
+ import type { PropsWithElement } from '../../../internal/props-with-element';
2
2
  import type { HTMLImgAttributes } from 'svelte/elements';
3
3
  export interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {
4
4
  }
5
- declare const AvatarImage: import("svelte").Component<AvatarImageProps, {}, "">;
6
- type AvatarImage = ReturnType<typeof AvatarImage>;
7
- export default AvatarImage;
5
+ declare const Image: import("svelte").Component<AvatarImageProps, {}, "">;
6
+ type Image = ReturnType<typeof Image>;
7
+ export default Image;
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { Snippet } from 'svelte';
3
- import type { AvatarRootContextType } from '../modules/avatar-root-context.js';
3
+ import type { AvatarRootContextType } from '../modules/root-context';
4
4
 
5
5
  export interface AvatarRootContextProps {
6
6
  children: Snippet<[AvatarRootContextType]>;
@@ -8,9 +8,10 @@
8
8
  </script>
9
9
 
10
10
  <script lang="ts">
11
- import { AvatarRootContext } from '../modules/avatar-root-context.js';
11
+ import { AvatarRootContext } from '../modules/root-context';
12
12
 
13
13
  const props: AvatarRootContextProps = $props();
14
+
14
15
  const rootContext = AvatarRootContext.consume();
15
16
  </script>
16
17
 
@@ -0,0 +1,8 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { AvatarRootContextType } from '../modules/root-context';
3
+ export interface AvatarRootContextProps {
4
+ children: Snippet<[AvatarRootContextType]>;
5
+ }
6
+ declare const RootContext: import("svelte").Component<AvatarRootContextProps, {}, "">;
7
+ type RootContext = ReturnType<typeof RootContext>;
8
+ export default RootContext;
@@ -1,6 +1,6 @@
1
1
  <script lang="ts" module>
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
3
+ import type { PropsWithElement } from '../../../internal/props-with-element';
4
4
  import type { Props } from '@zag-js/avatar';
5
5
 
6
6
  export interface AvatarRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {}
@@ -9,27 +9,22 @@
9
9
  <script lang="ts">
10
10
  import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
11
11
  import { classesAvatar } from '@skeletonlabs/skeleton-common';
12
- import { AvatarRootContext } from '../modules/avatar-root-context.js';
12
+ import { AvatarRootContext } from '../modules/root-context';
13
13
  import { connect, machine, splitProps } from '@zag-js/avatar';
14
14
 
15
15
  const props: AvatarRootProps = $props();
16
16
  const [machineProps, componentProps] = $derived(splitProps(props));
17
17
  const { element, children, ...restAttributes } = $derived(componentProps);
18
+
18
19
  const id = $props.id();
19
20
  const service = useMachine(machine, () => ({
20
21
  id: id,
21
22
  ...machineProps
22
23
  }));
23
24
  const api = $derived(connect(service, normalizeProps));
24
- const attributes = $derived(
25
- mergeProps(
26
- api.getRootProps(),
27
- {
28
- class: classesAvatar.root
29
- },
30
- restAttributes
31
- )
32
- );
25
+
26
+ const attributes = $derived(mergeProps(api.getRootProps(), { class: classesAvatar.root }, restAttributes));
27
+
33
28
  AvatarRootContext.provide({
34
29
  get api() {
35
30
  return api;
@@ -1,8 +1,8 @@
1
1
  import type { HTMLAttributes } from 'svelte/elements';
2
- import type { PropsWithElement } from '../../../internal/props-with-element.js';
2
+ import type { PropsWithElement } from '../../../internal/props-with-element';
3
3
  import type { Props } from '@zag-js/avatar';
4
4
  export interface AvatarRootProps extends PropsWithElement, Omit<Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {
5
5
  }
6
- declare const AvatarRoot: import("svelte").Component<AvatarRootProps, {}, "">;
7
- type AvatarRoot = ReturnType<typeof AvatarRoot>;
8
- export default AvatarRoot;
6
+ declare const Root: import("svelte").Component<AvatarRootProps, {}, "">;
7
+ type Root = ReturnType<typeof Root>;
8
+ export default Root;
@@ -1,6 +1,6 @@
1
- export { Avatar } from './modules/avatar-anatomy';
2
- export type { AvatarRootProps } from './anatomy/avatar-root.svelte';
3
- export type { AvatarRootContextProps } from './anatomy/avatar-root-context.svelte';
4
- export type { AvatarImageProps } from './anatomy/avatar-image.svelte';
5
- export type { AvatarFallbackProps } from './anatomy/avatar-fallback.svelte';
6
- export type { AvatarRootContextType as AvatarRootContext } from './modules/avatar-root-context.js';
1
+ export { Avatar } from './modules/anatomy';
2
+ export type { AvatarRootProps } from './anatomy/root.svelte';
3
+ export type { AvatarRootContextProps } from './anatomy/root-context.svelte';
4
+ export type { AvatarImageProps } from './anatomy/image.svelte';
5
+ export type { AvatarFallbackProps } from './anatomy/fallback.svelte';
6
+ export type { AvatarRootContextType as AvatarRootContext } from './modules/root-context';
@@ -1 +1 @@
1
- export { Avatar } from './modules/avatar-anatomy';
1
+ export { Avatar } from './modules/anatomy';