@skeletonlabs/skeleton-svelte 1.0.0-next.4 → 1.0.0-next.5

package/dist/components/Accordion/Accordion.svelte

@@ -1,6 +1,8 @@
-<script lang="ts">import { setAccordionContext } from "./context.js";
+<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 {
-  multiple = false,
   value = $bindable([]),
   animDuration = 200,
   // Root
@@ -13,43 +15,44 @@ let {
   // Snippets
   children,
   iconOpen,
-  iconClosed
+  iconClosed,
+  ...zagProps
 } = $props();
-function open(id) {
-  value = multiple ? [...value, id] : [id];
-}
-function close(id) {
-  value = value.filter((_id) => _id !== id);
-}
-function toggle(id) {
-  isOpen(id) ? close(id) : open(id);
-}
-function isOpen(id) {
-  return value.includes(id);
-}
+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({
-  open,
-  close,
-  toggle,
-  isOpen,
+  get api() {
+    return api;
+  },
   get animDuration() {
     return animDuration;
   },
-  get iconOpen() {
-    return iconOpen;
-  },
   get iconClosed() {
     return iconClosed;
+  },
+  get iconOpen() {
+    return iconOpen;
   }
 });
-$effect(() => {
-  if (!multiple && value.length > 1)
-    value = [value[0]];
-});
 </script>
 
-<!-- @component An Accordion parent component. -->
+<!-- @component Divide content into collapsible sections. -->
 
-<div class="{base} {padding} {spaceY} {rounded} {width} {classes}" data-testid="accordion">
+<div class="{base} {padding} {spaceY} {rounded} {width} {classes}" {...api.getRootProps()} data-testid="accordion">
 	{@render children()}
 </div>

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

@@ -1,16 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { AccordionProps } from './types.js';
-declare const __propDef: {
-    props: AccordionProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AccordionProps_ = typeof __propDef.props;
-export { AccordionProps_ as AccordionProps };
-export type AccordionEvents = typeof __propDef.events;
-export type AccordionSlots = typeof __propDef.slots;
-/** An Accordion parent component. */
-export default class Accordion extends SvelteComponent<AccordionProps_, AccordionEvents, AccordionSlots> {
+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>;
+export default Accordion;

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,75 +1,84 @@
 <script lang="ts">import { slide } from "svelte/transition";
 import { getAccordionContext } from "./context.js";
-let {
-  id = "",
-  disabled = false,
+const {
+  headingElement = "h3",
   // Root
-  base = "",
-  spaceY = "",
-  classes = "",
+  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 = "",
-  // Icons
-  iconsBase = "",
+  controlClasses,
+  // Lead
+  leadBase = "",
+  leadClasses = "",
+  // Content
+  contentBase = "flex-1",
+  contentClasses = "",
+  // Indicator
+  indicatorBase = "",
+  indicatorClasses = "",
   // Panel
-  panelBase = "",
+  panelBase,
   panelPadding = "py-2 px-4",
-  panelRounded = "",
-  panelClasses = "",
-  // Events
-  onclick = () => {
-  },
+  panelRounded,
+  panelClasses,
   // Snippets
   control,
-  controlLead,
-  panel
+  lead,
+  panel,
+  ...zagProps
 } = $props();
-function clickHandler(event) {
-  ctx.toggle(id);
-  onclick(event);
-}
 const ctx = getAccordionContext();
 </script>
 
-<!-- @component An Accordion child item. -->
+<!-- @component A accordion item component. -->
 
-<div class="{base} {spaceY} {classes}" data-testid="accordion-item">
+<div class="{base} {spaceY} {classes}" {...ctx.api.getItemProps(zagProps)} data-testid="accordion-item">
 	<!-- Control -->
-	<button
-		type="button"
-		{id}
-		class="{controlBase} {controlHover} {controlPadding} {controlRounded} {controlClasses}"
-		aria-expanded={ctx.isOpen(id)}
-		aria-controls="accordion-panel-{id}"
-		onclick={clickHandler}
-		{disabled}
-	>
-		<!-- Lead -->
-		{#if controlLead}<div>{@render controlLead()}</div>{/if}
-		<!-- Content -->
-		<div class="flex-1">{@render control()}</div>
-		<!-- Icons -->
-		<div class={iconsBase}>
-			{#if ctx.isOpen(id)}
-				{#if ctx.iconOpen}{@render ctx.iconOpen()}{:else}&minus;{/if}
-			{:else if ctx.iconClosed}{@render ctx.iconClosed()}{:else}&plus;{/if}
-		</div>
-	</button>
+	<svelte:element this={headingElement}>
+		<button
+			class="{controlBase} {controlHover} {controlPadding} {controlRounded} {controlClasses}"
+			{...ctx.api.getItemTriggerProps(zagProps)}
+			data-testid="accordion-control"
+		>
+			<!-- Lead -->
+			{#if lead}
+				<div class="{leadBase} {leadClasses}" data-testid="accordion-lead">{@render lead()}</div>
+			{/if}
+			<!-- Content -->
+			<div class="{contentBase} {contentClasses}" data-testid="accordion-control">
+				{@render control()}
+			</div>
+			<!-- Indicator -->
+			<div class="{indicatorBase} {indicatorClasses}" data-testid="accordion-indicator">
+				{#if ctx.api.value.includes(zagProps.value)}
+					{#if ctx.iconOpen}
+						{@render ctx.iconOpen()}
+					{:else}
+						&minus;
+					{/if}
+				{:else if ctx.iconClosed}
+					{@render ctx.iconClosed()}
+				{:else}
+					&plus;
+				{/if}
+			</div>
+		</button>
+	</svelte:element>
+
 	<!-- Panel -->
-	{#if panel && ctx.isOpen(id)}
+	{#if ctx.api.value.includes(zagProps.value)}
 		<div
 			class="{panelBase} {panelPadding} {panelRounded} {panelClasses}"
+			{...ctx.api.getItemContentProps(zagProps)}
 			transition:slide={{ duration: ctx.animDuration }}
-			id="accordion-panel-{id}"
-			role="region"
-			aria-hidden={ctx.isOpen(id)}
-			aria-labelledby={id}
+			data-testid="accordion-panel"
 		>
-			{@render panel()}
+			{@render panel?.()}
 		</div>
 	{/if}
 </div>

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

@@ -1,16 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { AccordionItemProps } from './types.js';
-declare const __propDef: {
-    props: AccordionItemProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AccordionItemProps_ = typeof __propDef.props;
-export { AccordionItemProps_ as AccordionItemProps };
-export type AccordionItemEvents = typeof __propDef.events;
-export type AccordionItemSlots = typeof __propDef.slots;
-/** An Accordion child item. */
-export default class AccordionItem extends SvelteComponent<AccordionItemProps_, AccordionItemEvents, AccordionItemSlots> {
+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>;
+export default AccordionItem;

package/dist/components/Accordion/context.js

@@ -1,8 +1,3 @@
 import { createContext } from '../../internal/create-context.js';
-export const [setAccordionContext, getAccordionContext, key] = createContext({
-    open: () => { },
-    close: () => { },
-    toggle: () => { },
-    isOpen: () => false,
-    animDuration: 0
-});
+// @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH
+export const [setAccordionContext, getAccordionContext, key] = createContext();

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

@@ -1,18 +1,12 @@
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
+import * as accordion from '@zag-js/accordion';
 export interface AccordionContext {
-    open: (id: string) => void;
-    close: (id: string) => void;
-    toggle: (id: string) => void;
-    isOpen: (id: string) => boolean;
+    api: ReturnType<typeof accordion.connect>;
     animDuration: number;
     iconOpen?: Snippet;
     iconClosed?: Snippet;
 }
-export interface AccordionProps {
-    /** Enables opening multiple items at once. */
-    multiple?: boolean;
-    /** Takes an array list of open items. */
-    value?: string[];
+export interface AccordionProps extends Omit<accordion.Context, 'id' | 'orientation'> {
     /** The slide animation duration in milliseconds. */
     animDuration?: number;
     /** Sets base styles. */
@@ -34,19 +28,15 @@ export interface AccordionProps {
     /** Set the closed state icon. */
     iconClosed?: Snippet;
 }
-export interface AccordionItemProps {
-    /** Set a unique ID for the item. */
-    id: string;
-    /** Set a disabled state for the item. */
-    disabled?: boolean;
+export interface AccordionItemProps extends accordion.ItemProps {
+    /** The element used as the header. */
+    headingElement?: string;
     /** Sets base styles. */
     base?: string;
     /** Set vertical spacing styles. */
     spaceY?: string;
     /** Provide arbitrary CSS classes. */
     classes?: string;
-    /** Triggers on item open or close. */
-    onclick?: (event: MouseEvent) => void;
     /** Sets control's base styles. */
     controlBase?: string;
     /** Sets control's the hover styles. */
@@ -57,8 +47,18 @@ export interface AccordionItemProps {
     controlRounded?: string;
     /** Provide arbitrary CSS classes to the control. */
     controlClasses?: string;
-    /** Set the base styles for the state icons. */
-    iconsBase?: string;
+    /** Sets the lead's base styles */
+    leadBase?: string;
+    /** Provide arbitrary CSS classes to the lead. */
+    leadClasses?: string;
+    /** Sets the lead's base styles */
+    contentBase?: string;
+    /** Provide arbitrary CSS classes to the content. */
+    contentClasses?: string;
+    /** Sets the lead's base styles */
+    indicatorBase?: string;
+    /** Provide arbitrary CSS classes to the indicator. */
+    indicatorClasses?: string;
     /** Set the panel's base styles. */
     panelBase?: string;
     /** Set the panel's padding styles. */
@@ -70,7 +70,7 @@ export interface AccordionItemProps {
     /** The control's default slot. */
     control: Snippet;
     /** The control's lead icon slot. */
-    controlLead?: Snippet;
+    lead?: Snippet;
     /** The panels's default slot. */
     panel?: Snippet;
 }

package/dist/components/Accordion/types.js

@@ -1 +1 @@
-import {} from 'svelte';
+import * as accordion from '@zag-js/accordion';

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

@@ -1,16 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { AppBarProps } from './types.js';
-declare const __propDef: {
-    props: AppBarProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AppBarProps_ = typeof __propDef.props;
-export { AppBarProps_ as AppBarProps };
-export type AppBarEvents = typeof __propDef.events;
-export type AppBarSlots = typeof __propDef.slots;
-/** A header element for the top of a page layout. */
-export default class AppBar extends SvelteComponent<AppBarProps_, AppBarEvents, AppBarSlots> {
+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>;
+export default AppBar;

package/dist/components/Avatar/Avatar.svelte

@@ -1,7 +1,11 @@
-<script lang="ts">let {
-  src = "",
-  alt = "",
-  filter = "",
+<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",
@@ -14,17 +18,40 @@
   // 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>
 
-<!-- @component An image with a fallback for representing the user. -->
+<!-- @component An image with a fallback for representing a single user. -->
 
-<figure class="{base} {background} {size} {font} {border} {rounded} {shadow} {classes}" data-testId="avatar">
-	{#if src}
-		<img class="{imageBase} {imageClasses}" {src} {alt} style:filter={filter && `url(${filter})`} />
-	{:else if children}
-		{@render children()}
+<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}
+	<!-- Fallback -->
+	<span {...api.getFallbackProps()} class="{fallbackBase} {fallbackClasses}" data-testid="avatar-fallback">
+		{#if children}
+			{@render children()}
+		{:else}
+			{getInitials(name)}
+		{/if}
+	</span>
 </figure>

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

@@ -1,16 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { AvatarProps } from './types.js';
-declare const __propDef: {
-    props: AvatarProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type AvatarProps_ = typeof __propDef.props;
-export { AvatarProps_ as AvatarProps };
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-/** An image with a fallback for representing the user. */
-export default class Avatar extends SvelteComponent<AvatarProps_, AvatarEvents, AvatarSlots> {
+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>;
+export default Avatar;

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

@@ -2,9 +2,11 @@ import type { Snippet } from 'svelte';
 export interface AvatarProps {
     /** Set avatar image source URL. */
     src?: string;
-    /** Set avatar image Alt text. */
-    alt?: string;
-    /** Set avatar image filter name. such as "#Apollo". */
+    /** 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;
@@ -26,6 +28,10 @@ export interface AvatarProps {
     imageBase?: string;
     /** Provide avatar image arbitrary CSS classes. */
     imageClasses?: string;
+    /** Set base classes for the fallback element. */
+    fallbackBase?: string;
+    /** Provide arbitrary CSS classes to fallback element. */
+    fallbackClasses?: string;
     /** The default child slot. */
     children?: Snippet;
 }

package/dist/components/Nav/NavBar.svelte

@@ -22,8 +22,7 @@ let {
 } = $props();
 function onSelectionHandler(id) {
   value = id;
-  if (onchange)
-    onchange(id);
+  if (onchange) onchange(id);
 }
 setNavigationContext({
   parent: "bar",
@@ -35,6 +34,8 @@ setNavigationContext({
 });
 </script>
 
+<!-- @component Provides a horizontal navigation interface. -->
+
 <aside class="{base} {background} {width} {height} {padding} {classes}" data-testid="nav-bar">
 	{#if children}
 		<nav class="{tilesBase} {tilesFlexDirection} {tilesJustify} {tilesItems} {tilesGap} {tilesClasses}">

package/dist/components/Nav/NavBar.svelte.d.ts

@@ -1,15 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { NavBarProps } from './types.js';
-declare const __propDef: {
-    props: NavBarProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type NavBarProps_ = typeof __propDef.props;
-export { NavBarProps_ as NavBarProps };
-export type NavBarEvents = typeof __propDef.events;
-export type NavBarSlots = typeof __propDef.slots;
-export default class NavBar extends SvelteComponent<NavBarProps_, NavBarEvents, NavBarSlots> {
+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;
 }
+/** Provides a horizontal navigation interface. */
+declare const NavBar: $$__sveltets_2_IsomorphicComponent<NavBarProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type NavBar = InstanceType<typeof NavBar>;
+export default NavBar;

package/dist/components/Nav/NavRail.svelte

@@ -40,8 +40,7 @@ let {
 } = $props();
 function onSelectionHandler(id) {
   value = id;
-  if (onchange)
-    onchange(id);
+  if (onchange) onchange(id);
 }
 setNavigationContext({
   parent: "rail",
@@ -56,6 +55,8 @@ setNavigationContext({
 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}

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

@@ -1,15 +1,17 @@
-import { SvelteComponent } from "svelte";
 import type { NavRailProps } from './types.js';
-declare const __propDef: {
-    props: NavRailProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type NavRailProps_ = typeof __propDef.props;
-export { NavRailProps_ as NavRailProps };
-export type NavRailEvents = typeof __propDef.events;
-export type NavRailSlots = typeof __propDef.slots;
-export default class NavRail extends SvelteComponent<NavRailProps_, NavRailEvents, NavRailSlots> {
+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;
 }
+/** Provides a vertical navigation interface. */
+declare const NavRail: $$__sveltets_2_IsomorphicComponent<NavRailProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type NavRail = InstanceType<typeof NavRail>;
+export default NavRail;

package/dist/components/Nav/NavTile.svelte

@@ -43,15 +43,14 @@ const classesExtended = $derived(`${expandedPadding} ${expandedGap} ${expandedCl
 const rxMode = $derived(ctx.expanded ? classesExtended : classesCollapsed);
 const rxBackground = $derived(selected || ctx.value === id ? active : `${background} ${hover}`);
 function onClickHandler() {
-  if (onclick && !id)
-    throw new Error("No ID was provided");
-  if (onclick && id)
-    onclick(id);
-  if (ctx.onSelectionHandler && id)
-    ctx.onSelectionHandler(id);
+  if (onclick && !id) throw new Error("No ID was provided");
+  if (onclick && id) onclick(id);
+  if (ctx.onSelectionHandler && id) ctx.onSelectionHandler(id);
 }
 </script>
 
+<!-- @component An individual Navgiation component tile. -->
+
 <svelte:element
 	this={element}
 	class="{base} {width} {rounded} {rxBackground} {rxMode}"