@skeletonlabs/skeleton-svelte 1.2.3 → 1.3.0

package/dist/components/AppBar/AppBar.svelte

@@ -43,7 +43,7 @@
 
 <!-- @component A header element for the top of a page layout. -->
 
-<header class="{base} {background} {spaceY} {border} {padding} {shadow} {classes}" role="toolbar" data-testid="app-bar">
+<header class="{base} {background} {spaceY} {border} {padding} {shadow} {classes}" data-testid="app-bar">
 	<section class="{toolbarBase} {toolbarGridCols} {toolbarGap} {toolbarClasses}" data-testid="app-bar-toolbar">
 		{#if lead}
 			<div class="{leadBase} {leadSpaceX} {leadPadding} {leadClasses}">

package/dist/components/Combobox/types.d.ts

@@ -5,7 +5,7 @@ export interface ComboboxProps<T extends ComboboxItem> extends Omit<combobox.Pro
     data?: T[];
     /** Set the label to display. */
     label?: string;
-    /** Set z-index for the positioner. */
+    /** Set a positioner style for z-index, ex: "10" */
     zIndex?: string;
     /** Set base classes for the root element. */
     base?: string;

package/dist/components/Modal/types.d.ts

@@ -1,12 +1,13 @@
 import type { Snippet } from 'svelte';
 import * as dialog from '@zag-js/dialog';
 import type { FlyParams, FadeParams } from 'svelte/transition';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface ModalProps extends Omit<dialog.Props, 'id'> {
     /** Set base classes for the root element. */
     base?: string;
     /** Provide arbitrary classes for the root element. */
     classes?: string;
-    /** Set z-index for the positioner. */
+    /** Set a positioner style for z-index, ex: "10" */
     zIndex?: string;
     /** Set base classes for the trigger. */
     triggerBase?: string;

package/dist/components/Popover/Popover.svelte

@@ -6,8 +6,11 @@
 	import type { PopoverProps } from './types.js';
 
 	const {
-		arrow = false,
 		zIndex = 'auto',
+		// Arrow
+		arrow = false,
+		arrowBackground = 'var(--color-surface-950-50)',
+		arrowSize = '10px',
 		// Base
 		base = '',
 		classes = '',
@@ -25,7 +28,6 @@
 		contentClasses = '',
 		// Arrow
 		arrowBase = '',
-		arrowBackground = '!bg-surface-200 dark:!bg-surface-800',
 		arrowClasses = '',
 		// Snippets
 		trigger,
@@ -60,8 +62,8 @@
 			<div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
 				<!-- Arrow -->
 				{#if arrow}
-					<div {...api.getArrowProps()}>
-						<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
+					<div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
+						<div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
 					</div>
 				{/if}
 				<!-- Snippet: Content -->
@@ -70,9 +72,3 @@
 		{/if}
 	</div>
 </span>
-
-<style>
-	:global([data-part='arrow']) {
-		--arrow-size: 10px;
-	}
-</style>

package/dist/components/Popover/types.d.ts

@@ -1,10 +1,15 @@
 import type { Snippet } from 'svelte';
 import * as popover from '@zag-js/popover';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface PopoverProps extends Omit<popover.Props, 'id'> {
+    /** Set a positioner style for z-index, ex: "10" */
+    zIndex?: string;
     /** Enable display of the popover arrow. */
     arrow?: boolean;
-    /** Set z-index for the positioner. */
-    zIndex?: string;
+    /** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
+    arrowBackground?: string;
+    /** Set a style value for --arrow-size, ex: "10px" */
+    arrowSize?: string;
     /** Set base classes for the root element. */
     base?: string;
     /** Provide arbitrary classes for the root element. */
@@ -29,8 +34,6 @@ export interface PopoverProps extends Omit<popover.Props, 'id'> {
     contentClasses?: string;
     /** Set base classes for the arrow. */
     arrowBase?: string;
-    /** Set background classes for the arrow. */
-    arrowBackground?: string;
     /** Provide arbitrary classes for the arrow. */
     arrowClasses?: string;
     /** Provide the template contents inside the trigger button. */

package/dist/components/Tooltip/Tooltip.svelte

@@ -6,8 +6,11 @@
 	import type { TooltipProps } from './types.js';
 
 	const {
-		arrow = false,
 		zIndex = 'auto',
+		// Arrow
+		arrow = false,
+		arrowBackground = 'var(--color-surface-950-50)',
+		arrowSize = '10px',
 		// Base
 		base = '',
 		classes = '',
@@ -25,7 +28,7 @@
 		contentClasses = '',
 		// Arrow
 		arrowBase = '',
-		arrowBackground = '!bg-white',
+		// arrowBackground = '',
 		arrowClasses = '',
 		// Snippets
 		trigger,
@@ -55,25 +58,21 @@
 		</button>
 	{/if}
 	<!-- Tooltip Content -->
-	{#if api.open}
-		<div {...api.getPositionerProps()} transition:fade={{ duration: 100 }} class="{positionerBase} {positionerClasses}">
-			<!-- Arrow -->
-			{#if arrow}
-				<div {...api.getArrowProps()}>
-					<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></div>
+	<div {...api.getPositionerProps()} class="{positionerBase} {positionerClasses}">
+		<!-- Popover -->
+		{#if api.open}
+			<div {...api.getContentProps()} transition:fade={{ duration: 100 }} style="z-index: {zIndex};">
+				<!-- Arrow -->
+				{#if arrow}
+					<div {...api.getArrowProps()} style:--arrow-size={arrowSize}>
+						<div {...api.getArrowTipProps()} class="{arrowBase} {arrowClasses}" style:--arrow-background={arrowBackground}></div>
+					</div>
+				{/if}
+				<!-- Snippet Content -->
+				<div class="{contentBase} {contentBackground} {contentClasses}">
+					{@render content?.()}
 				</div>
-			{/if}
-			<!-- Snippet Content -->
-			<div {...api.getContentProps()} class="{contentBase} {contentBackground} {contentClasses}" style="z-index: {zIndex};">
-				{@render content?.()}
 			</div>
-		</div>
-	{/if}
+		{/if}
+	</div>
 </span>
-
-<style>
-	:global([data-part='arrow']) {
-		--arrow-size: 10px;
-		--arrow-background: white;
-	}
-</style>

package/dist/components/Tooltip/types.d.ts

@@ -1,10 +1,15 @@
 import type { Snippet } from 'svelte';
 import * as tooltip from '@zag-js/tooltip';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
+    /** Set a positioner style for z-index, ex: "10" */
+    zIndex?: string;
     /** Enable display of the popover arrow. */
     arrow?: boolean;
-    /** Set z-index for the positioner. */
-    zIndex?: string;
+    /** Set a style value for --arrow-background, ex: "var(--color-surface-50-950)" */
+    arrowBackground?: string;
+    /** Set a style value for --arrow-size, ex: "10px" */
+    arrowSize?: string;
     /** Set base classes for the root element. */
     base?: string;
     /** Provide arbitrary classes for the root element. */
@@ -29,8 +34,6 @@ export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
     contentClasses?: string;
     /** Set base classes for the arrow. */
     arrowBase?: string;
-    /** Set background classes for the arrow. */
-    arrowBackground?: string;
     /** Provide arbitrary classes for the arrow. */
     arrowClasses?: string;
     /** Provide the template contents inside the trigger button. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -55,7 +55,7 @@
     "typescript": "^5.8.2",
     "vite": "^6.2.5",
     "vitest": "3.1.1",
-    "@skeletonlabs/skeleton": "3.1.3"
+    "@skeletonlabs/skeleton": "3.1.5"
   },
   "type": "module",
   "scripts": {