@skeletonlabs/skeleton-svelte 1.0.0-next.8 → 1.0.0

package/README.md

@@ -8,7 +8,7 @@ This project has been created using a [SvelteKit](https://kit.svelte.dev/) proje
 
 ## Exports
 
-Library exports are contained within `/src/lib/index.ts`
+Library exports are contained within `/src/lib/migrate.ts`
 
 ## Dev
 

package/dist/components/Accordion/Accordion.svelte

@@ -1,58 +1,55 @@
-<script lang="ts">import * as accordion from "@zag-js/accordion";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-import { setAccordionContext } from "./context.js";
-let {
-  value = $bindable([]),
-  animDuration = 200,
-  // Root
-  base = "",
-  padding = "",
-  spaceY = "space-y-2",
-  rounded = "rounded",
-  width = "w-full",
-  classes = "",
-  // Snippets
-  children,
-  iconOpen,
-  iconClosed,
-  ...zagProps
-} = $props();
-const [snapshot, send] = useMachine(
-  accordion.machine({
-    id: useId(),
-    onValueChange(details) {
-      value = details.value;
-    }
-  }),
-  {
-    context: {
-      ...zagProps,
-      get value() {
-        return $state.snapshot(value);
-      }
-    }
-  }
-);
-const api = $derived(accordion.connect(snapshot, send, normalizeProps));
-setAccordionContext({
-  get api() {
-    return api;
-  },
-  get animDuration() {
-    return animDuration;
-  },
-  get iconClosed() {
-    return iconClosed;
-  },
-  get iconOpen() {
-    return iconOpen;
-  }
-});
+<script lang="ts">
+	import * as accordion from '@zag-js/accordion';
+	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import { setAccordionContext } from './context.js';
+	import type { AccordionProps } from './types.js';
+
+	// Props
+	const {
+		animationConfig = {
+			duration: 200
+		},
+		// Root
+		base = '',
+		padding = '',
+		spaceY = 'space-y-2',
+		rounded = 'rounded-base',
+		width = 'w-full',
+		classes = '',
+		// Snippets
+		children,
+		iconOpen,
+		iconClosed,
+		...zagProps
+	}: AccordionProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(accordion.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(accordion.connect(service, normalizeProps));
+
+	// Context
+	setAccordionContext({
+		get api() {
+			return api;
+		},
+		get animationConfig() {
+			return animationConfig;
+		},
+		get iconClosed() {
+			return iconClosed;
+		},
+		get iconOpen() {
+			return iconOpen;
+		}
+	});
 </script>
 
 <!-- @component Divide content into collapsible sections. -->
 
 <div class="{base} {padding} {spaceY} {rounded} {width} {classes}" {...api.getRootProps()} data-testid="accordion">
-	{@render children()}
+	{@render children?.()}
 </div>

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

@@ -1,17 +1,5 @@
 import type { AccordionProps } 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;
-}
 /** Divide content into collapsible sections. */
-declare const Accordion: $$__sveltets_2_IsomorphicComponent<AccordionProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
-type Accordion = InstanceType<typeof Accordion>;
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,45 +1,51 @@
-<script lang="ts">import { slide } from "svelte/transition";
-import { getAccordionContext } from "./context.js";
-const {
-  headingElement = "h3",
-  // Root
-  base,
-  spaceY,
-  classes,
-  // Control
-  controlBase = "flex text-start items-center space-x-4 w-full",
-  controlHover = "hover:preset-tonal-primary",
-  controlPadding = "py-2 px-4",
-  controlRounded = "rounded",
-  controlClasses,
-  // Lead
-  leadBase = "",
-  leadClasses = "",
-  // Content
-  contentBase = "flex-1",
-  contentClasses = "",
-  // Indicator
-  indicatorBase = "",
-  indicatorClasses = "",
-  // Panel
-  panelBase,
-  panelPadding = "py-2 px-4",
-  panelRounded,
-  panelClasses,
-  // Snippets
-  control,
-  lead,
-  panel,
-  ...zagProps
-} = $props();
-const ctx = getAccordionContext();
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { getAccordionContext } from './context.js';
+	import type { AccordionItemProps } from './types.js';
+
+	// Props
+	const {
+		headingLevel = 3,
+		// Root
+		base,
+		spaceY,
+		classes,
+		// Control
+		controlBase = 'flex text-start items-center space-x-4 w-full',
+		controlHover = 'hover:preset-tonal-primary',
+		controlPadding = 'py-2 px-4',
+		controlRounded = 'rounded-base',
+		controlClasses,
+		// Lead
+		leadBase = '',
+		leadClasses = '',
+		// Content
+		contentBase = 'flex-1',
+		contentClasses = '',
+		// Indicator
+		indicatorBase = '',
+		indicatorClasses = '',
+		// Panel
+		panelBase,
+		panelPadding = 'py-2 px-4',
+		panelRounded,
+		panelClasses,
+		// Snippets
+		control,
+		lead,
+		panel,
+		...zagProps
+	}: AccordionItemProps = $props();
+
+	// Context
+	const ctx = getAccordionContext();
 </script>
 
 <!-- @component A accordion item component. -->
 
 <div class="{base} {spaceY} {classes}" {...ctx.api.getItemProps(zagProps)} data-testid="accordion-item">
 	<!-- Control -->
-	<svelte:element this={headingElement}>
+	<svelte:element this={`h${headingLevel}`}>
 		<button
 			class="{controlBase} {controlHover} {controlPadding} {controlRounded} {controlClasses}"
 			{...ctx.api.getItemTriggerProps(zagProps)}
@@ -75,7 +81,7 @@ const ctx = getAccordionContext();
 		<div
 			class="{panelBase} {panelPadding} {panelRounded} {panelClasses}"
 			{...ctx.api.getItemContentProps(zagProps)}
-			transition:slide={{ duration: ctx.animDuration }}
+			transition:slide={ctx.animationConfig}
 			data-testid="accordion-panel"
 		>
 			{@render panel?.()}

package/dist/components/Accordion/AccordionItem.svelte.d.ts

@@ -1,17 +1,5 @@
 import type { AccordionItemProps } 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;
-}
 /** A accordion item component. */
-declare const AccordionItem: $$__sveltets_2_IsomorphicComponent<AccordionItemProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type AccordionItem = InstanceType<typeof AccordionItem>;
+declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;

package/dist/components/Accordion/context.js

@@ -1,3 +1,4 @@
+var _a;
 import { createContext } from '../../internal/create-context.js';
 // @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH
-export const [setAccordionContext, getAccordionContext, key] = createContext();
+export var setAccordionContext = (_a = createContext(), _a[0]), getAccordionContext = _a[1], key = _a[2];

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

@@ -0,0 +1,4 @@
+declare const _default: import("svelte").Component<import("./types").AccordionProps, {}, ""> & {
+    Item: import("svelte").Component<import("./types").AccordionItemProps, {}, "">;
+};
+export default _default;

package/dist/components/Accordion/index.js

@@ -1,3 +1,3 @@
 import Accordion from './Accordion.svelte';
 import Item from './AccordionItem.svelte';
-export default Object.assign(Accordion, { Item });
+export default /* @__PURE__ */ Object.assign(Accordion, { Item: Item });

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

@@ -1,14 +1,12 @@
 import type { Snippet } from 'svelte';
 import * as accordion from '@zag-js/accordion';
-export interface AccordionContext {
+import type { SlideParams } from 'svelte/transition';
+export interface AccordionContext extends Pick<AccordionProps, 'animationConfig' | 'iconOpen' | 'iconClosed'> {
     api: ReturnType<typeof accordion.connect>;
-    animDuration: number;
-    iconOpen?: Snippet;
-    iconClosed?: Snippet;
 }
-export interface AccordionProps extends Omit<accordion.Context, 'id' | 'orientation'> {
-    /** The slide animation duration in milliseconds. */
-    animDuration?: number;
+export interface AccordionProps extends Omit<accordion.Props, 'id' | 'orientation'> {
+    /** The animation configuration */
+    animationConfig?: SlideParams;
     /** Sets base styles. */
     base?: string;
     /** Set padding styles. */
@@ -29,8 +27,8 @@ export interface AccordionProps extends Omit<accordion.Context, 'id' | 'orientat
     iconClosed?: Snippet;
 }
 export interface AccordionItemProps extends accordion.ItemProps {
-    /** The element used as the header. */
-    headingElement?: string;
+    /** The heading level. */
+    headingLevel?: number;
     /** Sets base styles. */
     base?: string;
     /** Set vertical spacing styles. */

package/dist/components/AppBar/AppBar.svelte

@@ -1,47 +1,50 @@
-<script lang="ts">let {
-  // Root
-  base = "w-full flex flex-col",
-  background = "bg-surface-100-900",
-  spaceY = "space-y-4",
-  border = "",
-  padding = "p-4",
-  shadow = "",
-  classes = "",
-  // Toolbar
-  toolbarBase = "flex justify-between",
-  toolbarGridCols = "grid-cols-[auto_1fr_auto]",
-  toolbarGap = "gap-4",
-  toolbarClasses = "",
-  // Lead
-  leadBase = "flex",
-  leadSpaceX = "space-x-4 rtl:space-x-reverse",
-  leadPadding = "",
-  leadClasses = "",
-  // Center
-  centerBase = "grow",
-  centerAlign = "text-center",
-  centerPadding = "",
-  centerClasses = "",
-  // Trail
-  trailBase = "flex",
-  trailSpaceX = "space-x-4 rtl:space-x-reverse",
-  trailPadding = "",
-  trailClasses = "",
-  // Headline
-  headlineBase = "w-full",
-  headlineClasses = "",
-  // Snippets
-  children,
-  lead,
-  trail,
-  headline
-} = $props();
+<script lang="ts">
+	import type { AppBarProps } from './types.js';
+
+	const {
+		// Root
+		base = 'w-full flex flex-col',
+		background = 'bg-surface-100-900',
+		spaceY = 'space-y-4',
+		border = '',
+		padding = 'p-4',
+		shadow = '',
+		classes = '',
+		// Toolbar
+		toolbarBase = 'flex justify-between',
+		toolbarGridCols = 'grid-cols-[auto_1fr_auto]',
+		toolbarGap = 'gap-4',
+		toolbarClasses = '',
+		// Lead
+		leadBase = 'flex',
+		leadSpaceX = 'space-x-4 rtl:space-x-reverse',
+		leadPadding = '',
+		leadClasses = '',
+		// Center
+		centerBase = 'grow',
+		centerAlign = 'text-center',
+		centerPadding = '',
+		centerClasses = '',
+		// Trail
+		trailBase = 'flex',
+		trailSpaceX = 'space-x-4 rtl:space-x-reverse',
+		trailPadding = '',
+		trailClasses = '',
+		// Headline
+		headlineBase = 'w-full',
+		headlineClasses = '',
+		// Snippets
+		children,
+		lead,
+		trail,
+		headline
+	}: AppBarProps = $props();
 </script>
 
 <!-- @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">
-	<section class="{toolbarBase} {toolbarGridCols} {toolbarGap} {toolbarClasses}">
+	<section class="{toolbarBase} {toolbarGridCols} {toolbarGap} {toolbarClasses}" data-testid="app-bar-toolbar">
 		{#if lead}
 			<div class="{leadBase} {leadSpaceX} {leadPadding} {leadClasses}">
 				{@render lead()}
@@ -62,7 +65,7 @@
 	</section>
 
 	{#if headline}
-		<section class="{headlineBase} {headlineClasses}">
+		<section class="{headlineBase} {headlineClasses}" data-testid="app-bar-headline">
 			{@render headline()}
 		</section>
 	{/if}

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

@@ -1,17 +1,5 @@
 import type { AppBarProps } 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;
-}
 /** A header element for the top of a page layout. */
-declare const AppBar: $$__sveltets_2_IsomorphicComponent<AppBarProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type AppBar = InstanceType<typeof AppBar>;
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

package/dist/components/Avatar/Avatar.svelte

@@ -1,51 +1,59 @@
-<script lang="ts">import * as avatar from "@zag-js/avatar";
-import { useMachine, normalizeProps } from "@zag-js/svelte";
-import { useId } from "../../internal/use-id.js";
-let {
-  src,
-  srcset,
-  name,
-  filter,
-  // Root
-  base = "overflow-hidden isolate",
-  background = "bg-surface-400-600",
-  size = "size-16",
-  font = "",
-  border = "",
-  rounded = "rounded-full",
-  shadow = "",
-  classes = "",
-  // Image
-  imageBase = "w-full object-cover",
-  imageClasses = "",
-  // Fallback
-  fallbackBase = "w-full h-full flex justify-center items-center",
-  fallbackClasses = "",
-  // Snippets
-  children
-} = $props();
-const [snapshot, send] = useMachine(avatar.machine({ id: useId() }));
-const api = $derived(avatar.connect(snapshot, send, normalizeProps));
-function getInitials(name2) {
-  return name2.split(" ").map((word) => word[0]).join("");
-}
+<script lang="ts">
+	import * as avatar from '@zag-js/avatar';
+	import { useMachine, normalizeProps } from '@zag-js/svelte';
+	import type { AvatarProps } from './types.js';
+
+	const {
+		src,
+		srcset,
+		name,
+		// Root
+		base = 'overflow-hidden isolate',
+		background = 'bg-surface-400-600',
+		size = 'size-16',
+		font = '',
+		border = '',
+		rounded = 'rounded-full',
+		shadow = '',
+		classes = '',
+		// Image
+		imageBase = 'w-full object-cover',
+		imageClasses = '',
+		style = '',
+		// Fallback
+		fallbackBase = 'w-full h-full flex justify-center items-center',
+		fallbackClasses = '',
+		// Snippets
+		children,
+		// Zag
+		...zagProps
+	}: AvatarProps = $props();
+
+	// Zag
+	const id = $props.id();
+	const service = useMachine(avatar.machine, () => ({
+		id: id,
+		...zagProps
+	}));
+	const api = $derived(avatar.connect(service, normalizeProps));
+
+	// Generate Initials
+	function getInitials(name: string) {
+		return name
+			.split(' ')
+			.map((word) => word[0])
+			.join('');
+	}
 </script>
 
 <!-- @component An image with a fallback for representing a single user. -->
 
-<figure {...api.getRootProps()} class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}" data-testid="avatar">
-	<!-- Image -->
-	{#if src || srcset}
-		<img
-			{...api.getImageProps()}
-			{src}
-			{srcset}
-			alt={name}
-			class="{imageBase} {imageClasses}"
-			style:filter={filter && `url(${filter})`}
-			data-testid="avatar-image"
-		/>
-	{/if}
+<figure
+	{...api.getRootProps()}
+	class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}"
+	{style}
+	data-testid="avatar"
+>
 	<!-- Fallback -->
 	<span {...api.getFallbackProps()} class="{fallbackBase} {fallbackClasses}" data-testid="avatar-fallback">
 		{#if children}
@@ -54,4 +62,8 @@ function getInitials(name2) {
 			{getInitials(name)}
 		{/if}
 	</span>
+	<!-- Image -->
+	{#if src || srcset}
+		<img {...api.getImageProps()} {src} {srcset} alt={name} class="{imageBase} {imageClasses}" data-testid="avatar-image" />
+	{/if}
 </figure>

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

@@ -1,17 +1,5 @@
 import type { AvatarProps } 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;
-}
 /** An image with a fallback for representing a single user. */
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<AvatarProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Avatar = InstanceType<typeof Avatar>;
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

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

@@ -1,13 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-export interface AvatarProps {
+import type * as avatar from '@zag-js/avatar';
+export interface AvatarProps extends Omit<avatar.Props, 'id'>, Pick<HTMLAttributes<HTMLElement>, 'style'> {
     /** Set avatar image source URL. */
     src?: string;
     /** The source set of the avatar image. */
     srcset?: string;
     /** Provide a name or username for the avatar. */
     name: string;
-    /** Set avatar image filter name, such as: "#Apollo". */
-    filter?: string;
     /** Set base styles. */
     base?: string;
     /** Set background styles. */