@skeletonlabs/skeleton-svelte 1.3.1 → 1.5.0

package/dist/components/Accordion/context.js

@@ -1,4 +1,3 @@
-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 var setAccordionContext = (_a = createContext(), _a[0]), getAccordionContext = _a[1], key = _a[2];
+export const [setAccordionContext, getAccordionContext, key] = createContext();

package/dist/components/Accordion/index.js

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

package/dist/components/Avatar/Avatar.svelte

@@ -7,6 +7,7 @@
 		src,
 		srcset,
 		name,
+		initials = [0, -1],
 		// Root
 		base = 'overflow-hidden isolate',
 		background = 'bg-surface-400-600',
@@ -38,11 +39,9 @@
 	const api = $derived(avatar.connect(service, normalizeProps));
 
 	// Generate Initials
-	function getInitials(name: string) {
-		return name
-			.split(' ')
-			.map((word) => word[0])
-			.join('');
+	function getInitials() {
+		const lettersArr = initials.map((index) => name.split(' ').at(index)?.charAt(0).toUpperCase());
+		return lettersArr.join('');
 	}
 </script>
 
@@ -59,7 +58,7 @@
 		{#if children}
 			{@render children()}
 		{:else}
-			{getInitials(name)}
+			{getInitials()}
 		{/if}
 	</span>
 	<!-- Image -->

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

@@ -8,6 +8,8 @@ export interface AvatarProps extends Omit<avatar.Props, 'id'>, Pick<HTMLAttribut
     srcset?: string;
     /** Provide a name or username for the avatar. */
     name: string;
+    /** Initials will be generated based on the name and this index array. */
+    initials?: number[];
     /** Set base styles. */
     base?: string;
     /** Set background styles. */

package/dist/components/Navigation/context.js

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

package/dist/components/Navigation/index.js

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

package/dist/components/Segment/context.js

@@ -1,7 +1,6 @@
-var _a;
 import * as radio from '@zag-js/radio-group';
 import { createContext } from '../../internal/create-context.js';
-export var setSegmentContext = (_a = createContext({
+export const [setSegmentContext, getSegmentContext, key] = createContext({
     api: {},
     indicatorText: ''
-}), _a[0]), getSegmentContext = _a[1], key = _a[2];
+});

package/dist/components/Segment/index.js

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

package/dist/components/Tabs/context.js

@@ -1,7 +1,6 @@
-var _a;
 import * as tabs from '@zag-js/tabs';
 import { createContext } from '../../internal/create-context.js';
-export var setTabContext = (_a = createContext({
+export const [setTabContext, getTabContext, key] = createContext({
     fluid: false,
     api: {}
-}), _a[0]), getTabContext = _a[1], key = _a[2];
+});

package/dist/components/Tabs/index.js

@@ -1,4 +1,4 @@
 import Tabs from './Tabs.svelte';
 import Control from './TabsControl.svelte';
 import Panel from './TabsPanel.svelte';
-export default /* @__PURE__ */ Object.assign(Tabs, { Control: Control, Panel: Panel });
+export default /* @__PURE__ */ Object.assign(Tabs, { Control, Panel });

package/dist/components/Toast/Toast.svelte

@@ -40,8 +40,12 @@
 	</div>
 	{#if api.closable}
 		<!-- Dismiss Button -->
-		<button class="{props.btnDismissBase} {props.btnDismissClasses}" {...api.getCloseTriggerProps()} data-testid="toast-dismiss"
-			>&times;</button
+		<button
+			class="{props.btnDismissBase} {props.btnDismissClasses}"
+			title={props.btnDismissTitle}
+			aria-label={props.btnDismissAriaLabel}
+			{...api.getCloseTriggerProps()}
+			data-testid="toast-dismiss">&times;</button
 		>
 	{/if}
 </div>

package/dist/components/Toast/Toaster.svelte

@@ -25,6 +25,8 @@
 		// Dismiss Button
 		btnDismissBase = 'btn-icon hover:preset-tonal',
 		btnDismissClasses = '',
+		btnDismissTitle = 'Dismiss',
+		btnDismissAriaLabel = 'Dismiss',
 		// State
 		stateInfo = 'preset-outlined-surface-200-800 preset-filled-surface-50-950',
 		stateSuccess = 'preset-filled-success-500',
@@ -56,6 +58,8 @@
 			{descriptionClasses}
 			{btnDismissBase}
 			{btnDismissClasses}
+			{btnDismissTitle}
+			{btnDismissAriaLabel}
 			{stateInfo}
 			{stateError}
 			{stateWarning}

package/dist/components/Toast/create-toaster.js

@@ -1,5 +1,4 @@
 import * as toast from '@zag-js/toast';
-export function createToaster(options) {
-    if (options === void 0) { options = {}; }
+export function createToaster(options = {}) {
     return toast.createStore(options);
 }

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

@@ -27,6 +27,10 @@ export interface ToasterProps extends toast.StoreProps {
     btnDismissBase?: string;
     /** Provide arbitrary classes for the dismiss button. */
     btnDismissClasses?: string;
+    /** Provide the title attribute for the dismiss button. */
+    btnDismissTitle?: string;
+    /** Provide the aria-label attribute for the dismiss button. */
+    btnDismissAriaLabel?: string;
     /** Provide base classes for info toasts. */
     stateInfo?: string;
     /** Provide base classes for success toasts. */

package/dist/composed/accordion/anatomy/accordion-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import type { AccordionContentProps } from '../modules/types.js';
+
+	const rootContext = AccordionRootContext.consume();
+	const itemContext = AccordionItemContext.consume();
+	const props: AccordionContentProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemContentProps(itemContext.itemProps),
+			{
+				class: 'skb:py-2 skb:px-4'
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/composed/accordion/anatomy/accordion-content.svelte.d.ts

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

package/dist/composed/accordion/anatomy/accordion-heading.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { AccordionHeadingProps } from '../modules/types.js';
+
+	const props: AccordionHeadingProps = $props();
+	const { level = 3, element, children, ...restAttributes } = $derived(props);
+	const tag = $derived(`h${level}`);
+</script>
+
+{#if element}
+	{@render element({ attributes: restAttributes })}
+{:else}
+	<svelte:element this={tag} {...restAttributes}>
+		{@render children?.()}
+	</svelte:element>
+{/if}

package/dist/composed/accordion/anatomy/accordion-heading.svelte.d.ts

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

package/dist/composed/accordion/anatomy/accordion-indicator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { AccordionRootContext, AccordionItemContext } from '../modules/context.js';
+	import type { AccordionIndicatorProps } from '../modules/types.js';
+
+	const rootContext = AccordionRootContext.consume();
+	const itemContext = AccordionItemContext.consume();
+	const props: AccordionIndicatorProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(mergeProps(rootContext.api.getItemIndicatorProps(itemContext.itemProps), restAttributes));
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/composed/accordion/anatomy/accordion-indicator.svelte.d.ts

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

package/dist/composed/accordion/anatomy/accordion-item.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import * as accordion from '@zag-js/accordion';
+	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import type { AccordionItemProps } from '../modules/types.js';
+
+	const rootContext = AccordionRootContext.consume();
+	const props: AccordionItemProps = $props();
+	const [itemProps, componentProps] = $derived(accordion.splitItemProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemProps(itemProps),
+			{
+				class: 'skb:grid skb:gap-2'
+			},
+			restAttributes
+		)
+	);
+	AccordionItemContext.provide({
+		get itemProps() {
+			return itemProps;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/composed/accordion/anatomy/accordion-item.svelte.d.ts

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

package/dist/composed/accordion/anatomy/accordion-root.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { mergeProps, normalizeProps, useMachine } from '@zag-js/svelte';
+	import * as accordion from '@zag-js/accordion';
+	import { AccordionRootContext } from '../modules/context.js';
+	import type { AccordionRootProps } from '../modules/types.js';
+
+	const props: AccordionRootProps = $props();
+	const [machineProps, componentProps] = $derived(accordion.splitProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const id = $props.id();
+	const service = useMachine(accordion.machine, () => ({
+		id: id,
+		...machineProps
+	}));
+	const api = $derived(accordion.connect(service, normalizeProps));
+	const attributes = $derived(
+		mergeProps(
+			api.getRootProps(),
+			{
+				class: 'skb:w-full skb:grid skb:gap-2'
+			},
+			restAttributes
+		)
+	);
+	AccordionRootContext.provide({
+		get api() {
+			return api;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/composed/accordion/anatomy/accordion-root.svelte.d.ts

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

package/dist/composed/accordion/anatomy/accordion-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { AccordionItemContext, AccordionRootContext } from '../modules/context.js';
+	import type { AccordionTriggerProps } from '../modules/types.js';
+
+	const rootContext = AccordionRootContext.consume();
+	const itemContext = AccordionItemContext.consume();
+	const props: AccordionTriggerProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getItemTriggerProps(itemContext.itemProps),
+			{
+				class:
+					'skb:w-full skb:grid skb:items-center skb:gap-4 skb:py-2 skb:px-4 skb:rounded-base skb:text-left skb:hover:preset-tonal-primary'
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/composed/accordion/anatomy/accordion-trigger.svelte.d.ts

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

package/dist/composed/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modules/types.js';
+export * from './modules/anatomy.js';

package/dist/composed/accordion/index.js

@@ -0,0 +1,2 @@
+export * from './modules/types.js';
+export * from './modules/anatomy.js';

package/dist/composed/accordion/modules/anatomy.d.ts

@@ -0,0 +1,8 @@
+declare const Accordion: import("svelte").Component<import("./types").AccordionRootProps, {}, ""> & {
+    Item: import("svelte").Component<import("./types").AccordionItemProps, {}, "">;
+    Heading: import("svelte").Component<import("./types").AccordionHeadingProps, {}, "">;
+    Trigger: import("svelte").Component<import("./types").AccordionTriggerProps, {}, "">;
+    Indicator: import("svelte").Component<import("./types").AccordionIndicatorProps, {}, "">;
+    Content: import("svelte").Component<import("./types").AccordionContentProps, {}, "">;
+};
+export { Accordion };

package/dist/composed/accordion/modules/anatomy.js

@@ -0,0 +1,14 @@
+import AccordionRoot from '../anatomy/accordion-root.svelte';
+import AccordionItem from '../anatomy/accordion-item.svelte';
+import AccordionHeading from '../anatomy/accordion-heading.svelte';
+import AccordionTrigger from '../anatomy/accordion-trigger.svelte';
+import AccordionIndicator from '../anatomy/accordion-indicator.svelte';
+import AccordionContent from '../anatomy/accordion-content.svelte';
+const Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
+    Heading: AccordionHeading,
+    Trigger: AccordionTrigger,
+    Indicator: AccordionIndicator,
+    Content: AccordionContent
+});
+export { Accordion };

package/dist/composed/accordion/modules/context.d.ts

@@ -0,0 +1,12 @@
+import type { AccordionItemContext as AccordionItemContextType, AccordionRootContext as AccordionRootContextType } from './types.js';
+declare const AccordionRootContext: {
+    key: symbol;
+    consume(): AccordionRootContextType;
+    provide(value: AccordionRootContextType): AccordionRootContextType;
+};
+declare const AccordionItemContext: {
+    key: symbol;
+    consume(): AccordionItemContextType;
+    provide(value: AccordionItemContextType): AccordionItemContextType;
+};
+export { AccordionRootContext, AccordionItemContext };

package/dist/composed/accordion/modules/context.js

@@ -0,0 +1,4 @@
+import { createContext } from '../../../internal/create-context-new.js';
+const AccordionRootContext = createContext();
+const AccordionItemContext = createContext();
+export { AccordionRootContext, AccordionItemContext };

package/dist/composed/accordion/modules/types.d.ts

@@ -0,0 +1,29 @@
+import * as accordion from '@zag-js/accordion';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { PropsWithChildren } from '../../../internal/props-with-children.js';
+interface AccordionRootProps extends PropsWithElement, PropsWithChildren, Omit<accordion.Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'defaultValue' | 'dir'> {
+}
+interface AccordionItemProps extends PropsWithElement, PropsWithChildren, accordion.ItemProps, HTMLAttributes<HTMLDivElement> {
+}
+interface AccordionHeadingProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The level of the heading. This is used to determine the heading level for accessibility purposes.
+     *
+     * @defaultValue 3
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+interface AccordionTriggerProps extends PropsWithElement, PropsWithChildren, HTMLButtonAttributes {
+}
+interface AccordionIndicatorProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+}
+interface AccordionContentProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLDivElement> {
+}
+interface AccordionRootContext {
+    api: accordion.Api;
+}
+interface AccordionItemContext {
+    itemProps: accordion.ItemProps;
+}
+export type { AccordionRootProps, AccordionItemProps, AccordionTriggerProps, AccordionHeadingProps, AccordionIndicatorProps, AccordionContentProps, AccordionRootContext, AccordionItemContext };

package/dist/composed/accordion/modules/types.js

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

package/dist/composed/avatar/anatomy/avatar-fallback.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { AvatarRootContext } from '../modules/context.js';
+	import type { AvatarFallbackProps } from '../modules/types.js';
+
+	const rootContext = AvatarRootContext.consume();
+	const props: AvatarFallbackProps = $props();
+	const { element, children, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getFallbackProps(),
+			{
+				class: 'skb:size-full skb:flex skb:justify-center skb:items-center'
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<span {...attributes}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/composed/avatar/anatomy/avatar-fallback.svelte.d.ts

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

package/dist/composed/avatar/anatomy/avatar-image.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { mergeProps } from '@zag-js/svelte';
+	import { AvatarRootContext } from '../modules/context.js';
+	import type { AvatarImageProps } from '../modules/types.js';
+
+	const rootContext = AvatarRootContext.consume();
+	const props: AvatarImageProps = $props();
+	const { element, ...restAttributes } = $derived(props);
+	const attributes = $derived(
+		mergeProps(
+			rootContext.api.getImageProps(),
+			{
+				class: 'skb:w-full skb:object-cover'
+			},
+			restAttributes
+		)
+	);
+</script>
+
+{#if element}
+	{@render element({ attributes })}
+{:else}
+	<img {...attributes} />
+{/if}

package/dist/composed/avatar/anatomy/avatar-image.svelte.d.ts

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

package/dist/composed/avatar/anatomy/avatar-root.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import * as avatar from '@zag-js/avatar';
+	import { useMachine, normalizeProps, mergeProps } from '@zag-js/svelte';
+	import { AvatarRootContext } from '../modules/context.js';
+	import type { AvatarRootProps } from '../modules/types.js';
+
+	const props: AvatarRootProps = $props();
+	const [machineProps, componentProps] = $derived(avatar.splitProps(props));
+	const { element, children, ...restAttributes } = $derived(componentProps);
+	const id = $props.id();
+	const service = useMachine(avatar.machine, () => ({
+		id: id,
+		...machineProps
+	}));
+	const api = $derived(avatar.connect(service, normalizeProps));
+	const attributes = $derived(
+		mergeProps(
+			api.getRootProps(),
+			{
+				class: 'skb:isolate skb:bg-surface-400-600 skb:size-16 skb:rounded-full skb:overflow-hidden'
+			},
+			restAttributes
+		)
+	);
+	AvatarRootContext.provide({
+		get api() {
+			return api;
+		}
+	});
+</script>
+
+{#if element}
+	{@render element({ attributes: restAttributes })}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/composed/avatar/anatomy/avatar-root.svelte.d.ts

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

package/dist/composed/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './modules/types.js';
+export * from './modules/anatomy.js';

package/dist/composed/avatar/index.js

@@ -0,0 +1,2 @@
+export * from './modules/types.js';
+export * from './modules/anatomy.js';

package/dist/composed/avatar/modules/anatomy.d.ts

@@ -0,0 +1,5 @@
+declare const Avatar: import("svelte").Component<import("./types").AvatarRootProps, {}, ""> & {
+    Image: import("svelte").Component<import("./types").AvatarImageProps, {}, "">;
+    Fallback: import("svelte").Component<import("./types").AvatarFallbackProps, {}, "">;
+};
+export { Avatar };

package/dist/composed/avatar/modules/anatomy.js

@@ -0,0 +1,8 @@
+import AvatarRoot from '../anatomy/avatar-root.svelte';
+import AvatarImage from '../anatomy/avatar-image.svelte';
+import AvatarFallback from '../anatomy/avatar-fallback.svelte';
+const Avatar = Object.assign(AvatarRoot, {
+    Image: AvatarImage,
+    Fallback: AvatarFallback
+});
+export { Avatar };

package/dist/composed/avatar/modules/context.d.ts

@@ -0,0 +1,7 @@
+import type { AvatarRootContext as AvatarRootContextType } from './types.js';
+declare const AvatarRootContext: {
+    key: symbol;
+    consume(): AvatarRootContextType;
+    provide(value: AvatarRootContextType): AvatarRootContextType;
+};
+export { AvatarRootContext };

package/dist/composed/avatar/modules/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../../../internal/create-context-new.js';
+const AvatarRootContext = createContext();
+export { AvatarRootContext };

package/dist/composed/avatar/modules/types.d.ts

@@ -0,0 +1,14 @@
+import * as avatar from '@zag-js/avatar';
+import type { HTMLAttributes, HTMLImgAttributes } from 'svelte/elements';
+import type { PropsWithChildren } from '../../../internal/props-with-children.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+interface AvatarRootProps extends PropsWithElement, PropsWithChildren, Omit<avatar.Props, 'id'>, Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'dir'> {
+}
+interface AvatarImageProps extends PropsWithElement, HTMLImgAttributes {
+}
+interface AvatarFallbackProps extends PropsWithElement, PropsWithChildren, HTMLAttributes<HTMLSpanElement> {
+}
+interface AvatarRootContext {
+    api: avatar.Api;
+}
+export type { AvatarRootProps, AvatarImageProps, AvatarFallbackProps, AvatarRootContext };

package/dist/composed/avatar/modules/types.js

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

package/dist/composed/index.d.ts

@@ -0,0 +1,2 @@
+export * from './accordion/index.js';
+export * from './avatar/index.js';

package/dist/composed/index.js

@@ -0,0 +1,2 @@
+export * from './accordion/index.js';
+export * from './avatar/index.js';

package/dist/internal/create-context-new.d.ts

@@ -0,0 +1,5 @@
+export declare function createContext<T>(): {
+    key: symbol;
+    consume(): T;
+    provide(value: T): T;
+};

package/dist/internal/create-context-new.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+export function createContext() {
+    const key = Symbol();
+    return {
+        key: key,
+        consume() {
+            return getContext(key);
+        },
+        provide(value) {
+            return setContext(key, value);
+        }
+    };
+}

package/dist/internal/create-context.js

@@ -5,8 +5,8 @@ import { getContext, setContext } from 'svelte';
  * @returns [set, get, key] The setter, getter and key for the context, the getter returns the default value if the context is not set
  */
 export function createContext(defaultValue) {
-    var key = Symbol();
-    var set = function (value) { return setContext(key, value); };
-    var get = function () { var _a; return (_a = getContext(key)) !== null && _a !== void 0 ? _a : defaultValue; };
+    const key = Symbol();
+    const set = (value) => setContext(key, value);
+    const get = () => getContext(key) ?? defaultValue;
     return [set, get, key];
 }

package/dist/internal/props-with-children.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+interface PropsWithChildren {
+    children?: Snippet;
+}
+export type { PropsWithChildren };

package/dist/internal/props-with-children.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/props-with-element.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface PropsWithElement {
+    element?: Snippet<[{
+        attributes: Record<string, unknown>;
+    }]>;
+}
+export type { PropsWithElement };

package/dist/internal/props-with-element.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/test-utils.js

@@ -1,9 +1,9 @@
 import { createRawSnippet } from 'svelte';
 /** Use `mockSnippet(value)` to create `<span>{value}</span>` snippet content. */
 export function mockSnippet(key) {
-    return createRawSnippet(function () {
+    return createRawSnippet(() => {
         return {
-            render: function () { return "<span>".concat(key, "</span>"); }
+            render: () => `<span>${key}</span>`
         };
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "types": "./dist/index.d.ts",
@@ -9,6 +9,11 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./composed": {
+      "types": "./dist/composed/index.d.ts",
+      "svelte": "./dist/composed/index.js",
+      "default": "./dist/composed/index.js"
     }
   },
   "files": [
@@ -55,12 +60,12 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.4",
     "vitest": "3.2.4",
-    "@skeletonlabs/skeleton": "3.1.7"
+    "@skeletonlabs/skeleton": "3.2.0"
   },
   "type": "module",
   "scripts": {
-    "build": "svelte-package --input src --output dist",
-    "dev": "svelte-package --input src --output dist --watch",
+    "build": "svelte-kit sync && svelte-package --input src --output dist",
+    "dev": "pnpm build --watch",
     "test": "vitest run",
     "test:watch": "vitest run --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"