@skeletonlabs/skeleton-svelte 1.0.0-next.9 → 1.1.0

package/dist/components/Navigation/NavRail.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { setNavigationContext } from './context.js';
+	import type { NavRailProps } from './types.js';
+
+	const {
+		value = '',
+		expanded = false,
+		// Root
+		base = 'h-full flex flex-col',
+		background = 'preset-filled-surface-100-900',
+		padding = 'p-1',
+		width = 'w-24',
+		widthExpanded = 'w-64',
+		height = 'h-full',
+		classes = '',
+		// Header
+		headerBase = 'flex',
+		headerFlexDirection = 'flex-col',
+		headerJustify = 'justify-center',
+		headerItems = 'items-center',
+		headerGap = 'gap-1',
+		headerClasses = '',
+		// Tiles
+		tilesBase = 'flex-1 flex',
+		tilesFlexDirection = 'flex-col',
+		tilesJustify = 'justify-center',
+		tilesItems = 'items-center',
+		tilesGap = 'gap-1',
+		tilesClasses = '',
+		// Footer
+		footerBase = 'flex',
+		footerFlexDirection = 'flex-col',
+		footerJustify = 'justify-center',
+		footerItems = 'items-center',
+		footerGap = 'gap-1',
+		footerClasses = '',
+		// Events
+		onValueChange,
+		// Snippets
+		header,
+		tiles,
+		footer
+	}: NavRailProps = $props();
+
+	// Context
+	setNavigationContext({
+		parent: 'rail',
+		get value() {
+			return value;
+		},
+		get expanded() {
+			return expanded;
+		},
+		get onValueChange() {
+			return onValueChange;
+		}
+	});
+
+	// Reactive
+	let rxWidth = $derived(expanded ? widthExpanded : width);
+</script>
+
+<!-- @component Provides a vertical navigation interface. -->
+
+<aside class="{base} {background} {height} {padding} {rxWidth} {classes}" data-testid="nav-rail">
+	<!-- Header -->
+	{#if header}
+		<header
+			class="{headerBase} {headerFlexDirection} {headerJustify} {headerItems} {headerGap} {headerClasses}"
+			data-testid="nav-rail-header"
+		>
+			{@render header()}
+		</header>
+	{/if}
+	<!-- Tiles -->
+	{#if tiles}
+		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}" data-testid="nav-rail-tiles">
+			{@render tiles()}
+		</nav>
+	{/if}
+	<!-- Footer -->
+	{#if footer}
+		<footer
+			class="{footerBase} {footerFlexDirection} {footerJustify} {footerItems} {footerGap} {footerClasses}"
+			data-testid="nav-rail-footer"
+		>
+			{@render footer()}
+		</footer>
+	{/if}
+</aside>

package/dist/components/Navigation/NavRail.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { NavRailProps } from './types.js';
+/** Provides a vertical navigation interface. */
+declare const NavRail: import("svelte").Component<NavRailProps, {}, "">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;

package/dist/components/Navigation/NavTile.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { getNavigationContext } from './context.js';
+	import type { NavTileProps } from './types.js';
+
+	const propsId = $props.id();
+
+	const {
+		id = propsId,
+		href,
+		target,
+		label,
+		labelExpanded,
+		title,
+		selected = undefined,
+		type = 'button',
+		// Root
+		base = 'flex items-center',
+		width = 'w-full',
+		aspect = 'aspect-square',
+		background = '',
+		hover = 'hover:preset-filled-surface-50-950',
+		active = 'preset-filled-primary-500',
+		padding = 'p-2',
+		gap = 'gap-1',
+		rounded = 'rounded-container',
+		classes = 'flex-col justify-center',
+		// Expanded
+		expandedPadding = 'py-3 px-4',
+		expandedGap = 'gap-4',
+		expandedClasses = '',
+		// Label (base)
+		labelBase = 'text-xs',
+		labelClasses = '',
+		// Label (expanded)
+		labelExpandedBase = '',
+		labelExpandedClasses = '',
+		// Events
+		onclick,
+		// Snippets
+		children
+	}: NavTileProps = $props();
+
+	// Context
+	const ctx = getNavigationContext();
+
+	// Reactive
+	const element = $derived(href ? 'a' : 'button');
+	const role = $derived(href ? undefined : 'button');
+	const rxSize = $derived(ctx.parent === 'bar' ? `h-full` : `${aspect}`);
+	const classesCollapsed = $derived(`${rxSize} ${padding} ${gap} ${classes}`);
+	const classesExtended = $derived(`${expandedPadding} ${expandedGap} ${expandedClasses}`);
+	const rxMode = $derived(ctx.expanded ? classesExtended : classesCollapsed);
+	const isActive = $derived(selected !== undefined ? selected : ctx.value === id);
+	const rxBackground = $derived(isActive ? active : `${background} ${hover}`);
+
+	function onClickHandler() {
+		if (onclick && !id) throw new Error('No ID was provided');
+		if (onclick && id) onclick(id);
+		ctx.onValueChange?.(id);
+	}
+</script>
+
+<!-- @component An individual Navigation component tile. -->
+
+<svelte:element
+	this={element}
+	class="{base} {width} {rounded} {rxBackground} {rxMode}"
+	{href}
+	{target}
+	type={element === 'button' ? type : undefined}
+	{title}
+	{role}
+	onclick={onClickHandler}
+	tabindex="0"
+	data-testid="nav-tile"
+>
+	<!-- Icon -->
+	{#if children}<div>{@render children()}</div>{/if}
+	<!-- Label (base) -->
+	{#if label && !ctx.expanded}
+		<div class="{labelBase} {labelClasses}" data-testid="nav-tile-label">{label}</div>
+	{/if}
+	<!-- Label (expanded) -->
+	{#if labelExpanded && ctx.expanded}
+		<div class="{labelExpandedBase} {labelExpandedClasses}" data-testid="nav-tile-label-expanded">{labelExpanded}</div>
+	{/if}
+</svelte:element>

package/dist/components/Navigation/NavTile.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { NavTileProps } from './types.js';
+/** An individual Navigation component tile. */
+declare const NavTile: import("svelte").Component<NavTileProps, {}, "">;
+type NavTile = ReturnType<typeof NavTile>;
+export default NavTile;

package/dist/components/Navigation/context.js

@@ -0,0 +1,7 @@
+var _a;
+import { createContext } from '../../internal/create-context.js';
+export var setNavigationContext = (_a = createContext({
+    parent: 'none',
+    value: '',
+    expanded: false
+}), _a[0]), getNavigationContext = _a[1], key = _a[2];

package/dist/components/Navigation/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("svelte").Component<import("./types").NavRailProps, {}, ""> & {
+    Rail: import("svelte").Component<import("./types").NavRailProps, {}, "">;
+    Bar: import("svelte").Component<import("./types").NavBarProps, {}, "">;
+    Tile: import("svelte").Component<import("./types").NavTileProps, {}, "">;
+};
+export default _default;

package/dist/components/{Nav → Navigation}/index.js

@@ -1,4 +1,4 @@
 import Bar from './NavBar.svelte';
 import Rail from './NavRail.svelte';
 import Tile from './NavTile.svelte';
-export default Object.assign(Rail, { Rail, Bar, Tile });
+export default /* @__PURE__ */ Object.assign(Rail, { Rail: Rail, Bar: Bar, Tile: Tile });

package/dist/components/{Nav → Navigation}/types.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 export interface NavContext {
     parent: 'bar' | 'rail' | 'none';
-    value: string;
+    value?: string;
     expanded: boolean;
-    onSelectionHandler: (id: string) => void;
+    onValueChange?: (id: string) => void;
 }
 export interface NavCommonProps {
     value?: string;
@@ -34,7 +34,7 @@ export interface NavCommonProps {
     /** Provide arbitrary CSS classes. */
     tilesClasses?: string;
     /** Triggers when selection occurs. */
-    onchange?: (id: string) => void;
+    onValueChange?: (id: string) => void;
 }
 export interface NavBarProps extends NavCommonProps {
     /** The default children snippet. */
@@ -89,6 +89,8 @@ export interface NavTileProps {
     title?: string;
     /** Enable the active selected state. */
     selected?: boolean;
+    /** Set button type. */
+    type?: 'button' | 'submit' | 'reset';
     /** Set base styles. */
     base?: string;
     /** Set width classes. */

package/dist/components/Pagination/Pagination.svelte

@@ -1,78 +1,69 @@
-<script lang="ts">import * as pagination from "@zag-js/pagination";
-import { normalizeProps, useMachine } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  page = $bindable(1),
-  pageSize = $bindable(10),
-  data,
-  alternative = false,
-  textSeparator = "of",
-  // Titles
-  titleFirst,
-  titlePrevious,
-  titleNumeral,
-  titleNext,
-  titleLast,
-  // Root
-  base = "inline-flex items-stretch overflow-hidden",
-  background = "preset-outlined-surface-200-800",
-  border = "p-2",
-  gap = "gap-2",
-  padding = "",
-  rounded = "rounded-container",
-  classes = "",
-  // Buttons
-  buttonBase = "btn",
-  buttonActive = "preset-filled",
-  buttonInactive = "preset-tonal",
-  buttonHover = "hover:preset-filled",
-  buttonClasses = "",
-  // Children
-  labelFirst,
-  labelPrevious,
-  labelEllipsis,
-  labelNext,
-  labelLast,
-  // Zag ---
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  pagination.machine({
-    id: useId(),
-    count: data.length,
-    onPageChange(details) {
-      page = details.page;
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get page() {
-        return page;
-      },
-      get pageSize() {
-        return pageSize;
-      }
-    }
-  }
-);
-const api = $derived(pagination.connect(snapshot, send, normalizeProps));
-const rxButtonActive = (page2) => {
-  return snapshot.context.page === page2.value ? buttonActive : `${buttonInactive} ${buttonHover}`;
-};
+<script lang="ts">
+	import * as pagination from '@zag-js/pagination';
+	import { normalizeProps, useMachine } from '@zag-js/svelte';
+	import type { PaginationProps } from './types.js';
+
+	const {
+		data = [],
+		alternative = false,
+		textSeparator = 'of',
+		showFirstLastButtons = false,
+		// Root
+		base = 'inline-flex items-stretch overflow-hidden',
+		background = 'preset-outlined-surface-200-800',
+		border = 'p-2',
+		gap = 'gap-2',
+		padding = '',
+		rounded = 'rounded-container',
+		classes = '',
+		// Titles
+		titleFirst,
+		titlePrevious,
+		titleNumeral,
+		titleNext,
+		titleLast,
+		// Buttons
+		buttonBase = 'btn',
+		buttonActive = 'preset-filled',
+		buttonInactive = 'preset-tonal',
+		buttonHover = 'hover:preset-filled',
+		buttonClasses = '',
+		// Children
+		labelFirst,
+		labelPrevious,
+		labelEllipsis,
+		labelNext,
+		labelLast,
+		// Zag ---
+		...zagProps
+	}: PaginationProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(pagination.machine, () => ({
+		id: id,
+		count: zagProps.count ?? data.length,
+		...zagProps
+	}));
+	const api = $derived(pagination.connect(service, normalizeProps));
+
+	// Reactive
+	const rxButtonActive = (page: { value: number }) => {
+		return service.prop('page') === page.value ? buttonActive : `${buttonInactive} ${buttonHover}`;
+	};
 </script>
 
 {#if api.totalPages > 1}
 	<div {...api.getRootProps()} class="{base} {background} {border} {gap} {padding} {rounded} {classes}" data-testid="pagination">
 		<!-- Button: First Page -->
-		{#if alternative}
+		{#if showFirstLastButtons}
 			<button
 				type="button"
 				onclick={api.goToFirstPage}
 				class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
 				title={titleFirst}
 				disabled={api.page === 1}
-				data-testid="pagination-button-previous"
+				data-testid="pagination-button-first"
 			>
 				{#if labelFirst}{@render labelFirst()}{:else}&laquo;{/if}
 			</button>
@@ -123,7 +114,7 @@ const rxButtonActive = (page2) => {
 				<span class="opacity-60">
 					{api.page}
 					{textSeparator}
-					{api.count}
+					{api.totalPages}
 				</span>
 			</span>
 		{/if}
@@ -139,14 +130,14 @@ const rxButtonActive = (page2) => {
 			{#if labelNext}{@render labelNext()}{:else}&rarr;{/if}
 		</button>
 		<!-- Button: Last Page -->
-		{#if alternative}
+		{#if showFirstLastButtons}
 			<button
 				type="button"
 				onclick={api.goToLastPage}
 				class="{buttonBase} {buttonInactive} {buttonHover} {buttonClasses}"
 				title={titleLast}
 				disabled={!api.nextPage}
-				data-testid="pagination-button-previous"
+				data-testid="pagination-button-last"
 			>
 				{#if labelLast}{@render labelLast()}{:else}&raquo;{/if}
 			</button>

package/dist/components/Pagination/Pagination.svelte.d.ts

@@ -1,16 +1,4 @@
 import type { PaginationProps } from './types.js';
-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> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const Pagination: $$__sveltets_2_IsomorphicComponent<PaginationProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "pageSize" | "page">;
-type Pagination = InstanceType<typeof Pagination>;
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
 export default Pagination;

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

@@ -1,24 +1,14 @@
 import type { Snippet } from 'svelte';
 import * as pagination from '@zag-js/pagination';
-export interface PaginationProps extends Omit<pagination.Context, 'id' | 'page' | 'pageSize'> {
-    /** Bind the current page. */
-    page: number;
-    /** Bind the number of data items to display. */
-    pageSize: number;
+export interface PaginationProps extends Omit<pagination.Props, 'id'> {
+    /** Provide source data as an array. */
     data: unknown[];
+    /** Enables alternative display with stats and first/last buttons. */
     alternative?: boolean;
     /** Set the separator text or character, such as "of" in "X of Y". */
     textSeparator?: string;
-    /** Set an optional title for the first button. */
-    titleFirst?: string;
-    /** Set an optional title for the previous button. */
-    titlePrevious?: string;
-    /** Set an optional title for the numeral buttons (ex: Page 1). */
-    titleNumeral?: string;
-    /** Set an optional title for the next button. */
-    titleNext?: string;
-    /** Set an optional title for the last button. */
-    titleLast?: string;
+    /** Show first and last page button. */
+    showFirstLastButtons?: boolean;
     /** Sets base classes for the list. */
     base?: string;
     /** Sets background classes for the list. */
@@ -33,6 +23,16 @@ export interface PaginationProps extends Omit<pagination.Context, 'id' | 'page'
     rounded?: string;
     /** Provide arbitrary CSS classes for the root. */
     classes?: string;
+    /** Set an optional title for the first button. */
+    titleFirst?: string;
+    /** Set an optional title for the previous button. */
+    titlePrevious?: string;
+    /** Set an optional title for the numeral buttons (ex: Page 1). */
+    titleNumeral?: string;
+    /** Set an optional title for the next button. */
+    titleNext?: string;
+    /** Set an optional title for the last button. */
+    titleLast?: string;
     /** Sets base classes for buttons. */
     buttonBase?: string;
     /** Sets active state classes for buttons. */

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	import * as popover from '@zag-js/popover';
+	import { portal, useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import type { PopoverProps } from './types.js';
+
+	const {
+		arrow = false,
+		zIndex = 'auto',
+		// Base
+		base = '',
+		classes = '',
+		// Trigger
+		triggerBase = '',
+		triggerBackground = '',
+		triggerClasses = '',
+		triggerAriaLabel = '',
+		// Positioner
+		positionerBase = '',
+		positionerClasses = '',
+		// Content
+		contentBase = '',
+		contentBackground = '',
+		contentClasses = '',
+		// Arrow
+		arrowBase = '',
+		arrowBackground = '!bg-surface-200 dark:!bg-surface-800',
+		arrowClasses = '',
+		// Snippets
+		trigger,
+		content,
+		// Events
+		onclick,
+		// Zag ---
+		...zagProps
+	}: PopoverProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(popover.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(popover.connect(service, normalizeProps));
+	const triggerProps = $derived(mergeProps(api.getTriggerProps(), { onclick }));
+</script>
+
+<span class="{base} {classes}" data-testid="popover">
+	<!-- Snippet: Trigger -->
+	{#if trigger}
+		<button {...triggerProps} class="{triggerBase} {triggerBackground} {triggerClasses}" type="button" aria-label={triggerAriaLabel}>
+			{@render trigger()}
+		</button>
+	{/if}
+	<!-- Portal -->
+	<div use:portal={{ disabled: !api.portalled }} {...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>
+			</div>
+		{/if}
+	</div>
+</span>
+
+<style>
+	:global([data-part='arrow']) {
+		--arrow-size: 10px;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { PopoverProps } from './types.js';
+declare const Popover: import("svelte").Component<PopoverProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import * as popover from '@zag-js/popover';
+export interface PopoverProps extends Omit<popover.Props, 'id'> {
+    /** Enable display of the popover arrow. */
+    arrow?: boolean;
+    /** Set z-index for the positioner. */
+    zIndex?: string;
+    /** Set base classes for the root element. */
+    base?: string;
+    /** Provide arbitrary classes for the root element. */
+    classes?: string;
+    /** Set base classes for the trigger. */
+    triggerBase?: string;
+    /** Set background classes for the trigger. */
+    triggerBackground?: string;
+    /** Provide arbitrary classes for the trigger. */
+    triggerClasses?: string;
+    /** Set the aria-label for the trigger. */
+    triggerAriaLabel?: string;
+    /** Set base classes for the positioner. */
+    positionerBase?: string;
+    /** Provide arbitrary classes for the positioner. */
+    positionerClasses?: string;
+    /** Set base classes for the content. */
+    contentBase?: string;
+    /** Set background classes for the content. */
+    contentBackground?: string;
+    /** Provide arbitrary classes for the content. */
+    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. */
+    trigger?: Snippet;
+    /** Provide the template contents of the popover itself. */
+    content?: Snippet;
+    /** Handle the popover button click event. */
+    onclick?: () => void;
+}

package/dist/components/Popover/types.js

@@ -0,0 +1 @@
+import * as popover from '@zag-js/popover';