@skeletonlabs/skeleton-svelte 1.2.4 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Combobox/types.d.ts +1 -1
  2. package/dist/components/Modal/types.d.ts +1 -1
  3. package/dist/components/Popover/Popover.svelte +6 -10
  4. package/dist/components/Popover/types.d.ts +6 -4
  5. package/dist/components/Tooltip/Tooltip.svelte +7 -11
  6. package/dist/components/Tooltip/types.d.ts +6 -4
  7. package/package.json +33 -33
package/dist/components/Combobox/types.d.ts CHANGED
@@ -5,7 +5,7 @@ export interface ComboboxProps<T extends ComboboxItem> extends Omit<combobox.Pro
5
5
  data?: T[];
6
6
  /** Set the label to display. */
7
7
  label?: string;
8
- /** Set z-index for the positioner. */
8
+ /** Set a positioner style for z-index, ex: "10" */
9
9
  zIndex?: string;
10
10
  /** Set base classes for the root element. */
11
11
  base?: string;
package/dist/components/Modal/types.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface ModalProps extends Omit<dialog.Props, 'id'> {
7
7
  base?: string;
8
8
  /** Provide arbitrary classes for the root element. */
9
9
  classes?: string;
10
- /** Set z-index for the positioner. */
10
+ /** Set a positioner style for z-index, ex: "10" */
11
11
  zIndex?: string;
12
12
  /** Set base classes for the trigger. */
13
13
  triggerBase?: string;
package/dist/components/Popover/Popover.svelte CHANGED
@@ -6,8 +6,11 @@
6
6
  import type { PopoverProps } from './types.js';
7
7
 
8
8
  const {
9
- arrow = false,
10
9
  zIndex = 'auto',
10
+ // Arrow
11
+ arrow = false,
12
+ arrowBackground = 'var(--color-surface-950-50)',
13
+ arrowSize = '10px',
11
14
  // Base
12
15
  base = '',
13
16
  classes = '',
@@ -25,7 +28,6 @@
25
28
  contentClasses = '',
26
29
  // Arrow
27
30
  arrowBase = '',
28
- arrowBackground = '!bg-surface-200 dark:!bg-surface-800',
29
31
  arrowClasses = '',
30
32
  // Snippets
31
33
  trigger,
@@ -60,8 +62,8 @@
60
62
  <div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
61
63
  <!-- Arrow -->
62
64
  {#if arrow}
63
- <div {...api.getArrowProps()}>
64
- <div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
65
+ <div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
66
+ <div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
65
67
  </div>
66
68
  {/if}
67
69
  <!-- Snippet: Content -->
@@ -70,9 +72,3 @@
70
72
  {/if}
71
73
  </div>
72
74
  </span>
73
-
74
- <style>
75
- :global([data-part='arrow']) {
76
- --arrow-size: 10px;
77
- }
78
- </style>
package/dist/components/Popover/types.d.ts CHANGED
@@ -2,10 +2,14 @@ import type { Snippet } from 'svelte';
2
2
  import * as popover from '@zag-js/popover';
3
3
  import type { HTMLButtonAttributes } from 'svelte/elements';
4
4
  export interface PopoverProps extends Omit<popover.Props, 'id'> {
5
+ /** Set a positioner style for z-index, ex: "10" */
6
+ zIndex?: string;
5
7
  /** Enable display of the popover arrow. */
6
8
  arrow?: boolean;
7
- /** Set z-index for the positioner. */
8
- zIndex?: string;
9
+ /** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
10
+ arrowBackground?: string;
11
+ /** Set a style value for --arrow-size, ex: "10px" */
12
+ arrowSize?: string;
9
13
  /** Set base classes for the root element. */
10
14
  base?: string;
11
15
  /** Provide arbitrary classes for the root element. */
@@ -30,8 +34,6 @@ export interface PopoverProps extends Omit<popover.Props, 'id'> {
30
34
  contentClasses?: string;
31
35
  /** Set base classes for the arrow. */
32
36
  arrowBase?: string;
33
- /** Set background classes for the arrow. */
34
- arrowBackground?: string;
35
37
  /** Provide arbitrary classes for the arrow. */
36
38
  arrowClasses?: string;
37
39
  /** Provide the template contents inside the trigger button. */
package/dist/components/Tooltip/Tooltip.svelte CHANGED
@@ -6,8 +6,11 @@
6
6
  import type { TooltipProps } from './types.js';
7
7
 
8
8
  const {
9
- arrow = false,
10
9
  zIndex = 'auto',
10
+ // Arrow
11
+ arrow = false,
12
+ arrowBackground = 'var(--color-surface-950-50)',
13
+ arrowSize = '10px',
11
14
  // Base
12
15
  base = '',
13
16
  classes = '',
@@ -25,7 +28,7 @@
25
28
  contentClasses = '',
26
29
  // Arrow
27
30
  arrowBase = '',
28
- arrowBackground = '!bg-white',
31
+ // arrowBackground = '',
29
32
  arrowClasses = '',
30
33
  // Snippets
31
34
  trigger,
@@ -61,8 +64,8 @@
61
64
  <div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
62
65
  <!-- Arrow -->
63
66
  {#if arrow}
64
- <div {...api.getArrowProps()}>
65
- <div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
67
+ <div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
68
+ <div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
66
69
  </div>
67
70
  {/if}
68
71
  <!-- Snippet Content -->
@@ -73,10 +76,3 @@
73
76
  {/if}
74
77
  </div>
75
78
  </span>
76
-
77
- <style>
78
- :global([data-part='arrow']) {
79
- --arrow-size: 10px;
80
- --arrow-background: white;
81
- }
82
- </style>
package/dist/components/Tooltip/types.d.ts CHANGED
@@ -2,10 +2,14 @@ import type { Snippet } from 'svelte';
2
2
  import * as tooltip from '@zag-js/tooltip';
3
3
  import type { HTMLButtonAttributes } from 'svelte/elements';
4
4
  export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
5
+ /** Set a positioner style for z-index, ex: "10" */
6
+ zIndex?: string;
5
7
  /** Enable display of the popover arrow. */
6
8
  arrow?: boolean;
7
- /** Set z-index for the positioner. */
8
- zIndex?: string;
9
+ /** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
10
+ arrowBackground?: string;
11
+ /** Set a style value for --arrow-size, ex: "10px" */
12
+ arrowSize?: string;
9
13
  /** Set base classes for the root element. */
10
14
  base?: string;
11
15
  /** Provide arbitrary classes for the root element. */
@@ -30,8 +34,6 @@ export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
30
34
  contentClasses?: string;
31
35
  /** Set base classes for the arrow. */
32
36
  arrowBase?: string;
33
- /** Set background classes for the arrow. */
34
- arrowBackground?: string;
35
37
  /** Provide arbitrary classes for the arrow. */
36
38
  arrowClasses?: string;
37
39
  /** Provide the template contents inside the trigger button. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skeletonlabs/skeleton-svelte",
3
- "version": "1.2.4",
3
+ "version": "1.3.1",
4
4
  "description": "The Svelte package for Skeleton.",
5
5
  "author": "endigo9740 <chris@skeletonlabs.dev>",
6
6
  "types": "./dist/index.d.ts",
@@ -16,46 +16,46 @@
16
16
  "!dist/**/*.test.*"
17
17
  ],
18
18
  "dependencies": {
19
- "@zag-js/accordion": "^1.7.0",
20
- "@zag-js/avatar": "^1.7.0",
21
- "@zag-js/combobox": "^1.7.0",
22
- "@zag-js/dialog": "^1.7.0",
23
- "@zag-js/file-upload": "^1.7.0",
24
- "@zag-js/pagination": "^1.7.0",
25
- "@zag-js/popover": "^1.7.0",
26
- "@zag-js/progress": "^1.7.0",
27
- "@zag-js/radio-group": "^1.7.0",
28
- "@zag-js/rating-group": "^1.7.0",
29
- "@zag-js/slider": "^1.7.0",
30
- "@zag-js/svelte": "^1.7.0",
31
- "@zag-js/switch": "^1.7.0",
32
- "@zag-js/tabs": "^1.7.0",
33
- "@zag-js/tags-input": "^1.7.0",
34
- "@zag-js/toast": "^1.7.0",
35
- "@zag-js/tooltip": "^1.7.0"
19
+ "@zag-js/accordion": "^1.18.3",
20
+ "@zag-js/avatar": "^1.18.3",
21
+ "@zag-js/combobox": "^1.18.3",
22
+ "@zag-js/dialog": "^1.18.3",
23
+ "@zag-js/file-upload": "^1.18.3",
24
+ "@zag-js/pagination": "^1.18.3",
25
+ "@zag-js/popover": "^1.18.3",
26
+ "@zag-js/progress": "^1.18.3",
27
+ "@zag-js/radio-group": "^1.18.3",
28
+ "@zag-js/rating-group": "^1.18.3",
29
+ "@zag-js/slider": "^1.18.3",
30
+ "@zag-js/svelte": "^1.18.3",
31
+ "@zag-js/switch": "^1.18.3",
32
+ "@zag-js/tabs": "^1.18.3",
33
+ "@zag-js/tags-input": "^1.18.3",
34
+ "@zag-js/toast": "^1.18.3",
35
+ "@zag-js/tooltip": "^1.18.3"
36
36
  },
37
37
  "peerDependencies": {
38
38
  "svelte": "^5.20.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@sveltejs/adapter-auto": "^5.0.0",
42
- "@sveltejs/kit": "^2.20.2",
43
- "@sveltejs/package": "^2.3.10",
44
- "@sveltejs/vite-plugin-svelte": "^5.0.3",
41
+ "@sveltejs/adapter-auto": "^6.0.1",
42
+ "@sveltejs/kit": "^2.24.0",
43
+ "@sveltejs/package": "^2.4.0",
44
+ "@sveltejs/vite-plugin-svelte": "^6.1.0",
45
45
  "@tailwindcss/forms": "^0.5.10",
46
- "@tailwindcss/vite": "^4.0.17",
46
+ "@tailwindcss/vite": "^4.1.11",
47
47
  "@testing-library/jest-dom": "^6.6.3",
48
- "@testing-library/svelte": "^5.2.7",
49
- "jsdom": "^26.0.0",
50
- "publint": "^0.3.9",
51
- "svelte": "^5.25.3",
52
- "svelte-check": "^4.1.5",
53
- "tailwindcss": "^4.0.17",
48
+ "@testing-library/svelte": "^5.2.8",
49
+ "jsdom": "^26.1.0",
50
+ "publint": "^0.3.12",
51
+ "svelte": "^5.36.1",
52
+ "svelte-check": "^4.2.2",
53
+ "tailwindcss": "^4.1.11",
54
54
  "tslib": "^2.8.1",
55
- "typescript": "^5.8.2",
56
- "vite": "^6.2.5",
57
- "vitest": "3.1.1",
58
- "@skeletonlabs/skeleton": "3.1.4"
55
+ "typescript": "^5.8.3",
56
+ "vite": "^7.0.4",
57
+ "vitest": "3.2.4",
58
+ "@skeletonlabs/skeleton": "3.1.7"
59
59
  },
60
60
  "type": "module",
61
61
  "scripts": {