@skeletonlabs/skeleton-svelte 1.2.2 → 1.2.4

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/Modal/types.d.ts

@@ -1,6 +1,7 @@
 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;
@@ -53,5 +54,5 @@ export interface ModalProps extends Omit<dialog.Props, 'id'> {
     /** Provide the template contents of the dialog itself. */
     content?: Snippet;
     /** Handle the dialog button click event. */
-    onclick?: () => void;
+    onclick?: HTMLButtonAttributes['onclick'];
 }

package/dist/components/Pagination/Pagination.svelte

@@ -11,9 +11,9 @@
 		// Root
 		base = 'inline-flex items-stretch overflow-hidden',
 		background = 'preset-outlined-surface-200-800',
-		border = 'p-2',
+		border = '',
 		gap = 'gap-2',
-		padding = '',
+		padding = 'p-2',
 		rounded = 'rounded-container',
 		classes = '',
 		// Titles

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

@@ -1,5 +1,6 @@
 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'> {
     /** Enable display of the popover arrow. */
     arrow?: boolean;
@@ -38,5 +39,5 @@ export interface PopoverProps extends Omit<popover.Props, 'id'> {
     /** Provide the template contents of the popover itself. */
     content?: Snippet;
     /** Handle the popover button click event. */
-    onclick?: () => void;
+    onclick?: HTMLButtonAttributes['onclick'];
 }

package/dist/components/Segment/Segment.svelte

@@ -8,9 +8,9 @@
 		// Root
 		base = 'inline-flex items-stretch overflow-hidden',
 		background = 'preset-outlined-surface-200-800',
-		border = 'p-2',
+		border = '',
 		gap = 'gap-2',
-		padding = '',
+		padding = 'p-2',
 		rounded = 'rounded-container',
 		width = '',
 		classes = '',

package/dist/components/Tooltip/Tooltip.svelte

@@ -55,20 +55,23 @@
 		</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()}>
+						<div {...api.getArrowTipProps()} class="{arrowBase} {arrowBackground} {arrowClasses}"></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>

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

@@ -1,5 +1,6 @@
 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'> {
     /** Enable display of the popover arrow. */
     arrow?: boolean;
@@ -38,7 +39,7 @@ export interface TooltipProps extends Omit<tooltip.Props, 'id'> {
     /** Provide the template contents of the tooltip itself. */
     content?: Snippet;
     /** Handle the tooltip button hover event. */
-    onmouseover?: () => void;
+    onmouseover?: HTMLButtonAttributes['onmouseover'];
     /** Handle the tooltip button click event. */
-    onclick?: () => void;
+    onclick?: HTMLButtonAttributes['onclick'];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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.4"
   },
   "type": "module",
   "scripts": {