@skeletonlabs/skeleton-svelte 4.7.4 → 4.9.0

package/dist/components/carousel/anatomy/autoplay-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselAutoplayTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselAutoplayTriggerProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getAutoplayTriggerProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/carousel/anatomy/autoplay-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselAutoplayTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const AutoplayTrigger: import("svelte").Component<CarouselAutoplayTriggerProps, {}, "">;
+type AutoplayTrigger = ReturnType<typeof AutoplayTrigger>;
+export default AutoplayTrigger;

package/dist/components/carousel/anatomy/control.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselControlProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getControlProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/control.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Control: import("svelte").Component<CarouselControlProps, {}, "">;
+type Control = ReturnType<typeof Control>;
+export default Control;

package/dist/components/carousel/anatomy/indicator-group.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselIndicatorGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselIndicatorGroupProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getIndicatorGroupProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/indicator-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselIndicatorGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const IndicatorGroup: import("svelte").Component<CarouselIndicatorGroupProps, {}, "">;
+type IndicatorGroup = ReturnType<typeof IndicatorGroup>;
+export default IndicatorGroup;

package/dist/components/carousel/anatomy/indicator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { IndicatorProps } from '@zag-js/carousel';
+
+	export interface CarouselIndicatorProps extends IndicatorProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { splitIndicatorProps } from '@zag-js/carousel';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselIndicatorProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const [indicatorProps, componentProps] = $derived(splitIndicatorProps(props));
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(mergeProps(carousel().getIndicatorProps(indicatorProps), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/carousel/anatomy/indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { IndicatorProps } from '@zag-js/carousel';
+export interface CarouselIndicatorProps extends IndicatorProps, PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const Indicator: import("svelte").Component<CarouselIndicatorProps, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/components/carousel/anatomy/item-group.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselItemGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselItemGroupProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getItemGroupProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/item-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselItemGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const ItemGroup: import("svelte").Component<CarouselItemGroupProps, {}, "">;
+type ItemGroup = ReturnType<typeof ItemGroup>;
+export default ItemGroup;

package/dist/components/carousel/anatomy/item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ItemProps } from '@zag-js/carousel';
+
+	export interface CarouselItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { splitItemProps } from '@zag-js/carousel';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselItemProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const [itemProps, componentProps] = $derived(splitItemProps(props));
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(mergeProps(carousel().getItemProps(itemProps), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/item.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { ItemProps } from '@zag-js/carousel';
+export interface CarouselItemProps extends ItemProps, PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Item: import("svelte").Component<CarouselItemProps, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/components/carousel/anatomy/next-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselNextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselNextTriggerProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getNextTriggerProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/carousel/anatomy/next-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselNextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const NextTrigger: import("svelte").Component<CarouselNextTriggerProps, {}, "">;
+type NextTrigger = ReturnType<typeof NextTrigger>;
+export default NextTrigger;

package/dist/components/carousel/anatomy/prev-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselPrevTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselPrevTriggerProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getPrevTriggerProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/carousel/anatomy/prev-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselPrevTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const PrevTrigger: import("svelte").Component<CarouselPrevTriggerProps, {}, "">;
+type PrevTrigger = ReturnType<typeof PrevTrigger>;
+export default PrevTrigger;

package/dist/components/carousel/anatomy/progress-text.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface CarouselProgressTextProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselProgressTextProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getProgressTextProps(), rest));
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/progress-text.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface CarouselProgressTextProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const ProgressText: import("svelte").Component<CarouselProgressTextProps, {}, "">;
+type ProgressText = ReturnType<typeof ProgressText>;
+export default ProgressText;

package/dist/components/carousel/anatomy/root-context.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import type { useCarousel } from '../modules/provider.svelte';
+	import type { Snippet } from 'svelte';
+
+	export interface CarouselRootContextProps {
+		children: Snippet<[ReturnType<typeof useCarousel>]>;
+	}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+
+	const props: CarouselRootContextProps = $props();
+
+	const carousel = RootContext.consume();
+
+	const { children } = $derived(props);
+</script>
+
+{@render children(carousel)}

package/dist/components/carousel/anatomy/root-context.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { useCarousel } from '../modules/provider.svelte';
+import type { Snippet } from 'svelte';
+export interface CarouselRootContextProps {
+    children: Snippet<[ReturnType<typeof useCarousel>]>;
+}
+import { RootContext } from '../modules/root-context.js';
+declare const RootContext: import("svelte").Component<CarouselRootContextProps, {}, "">;
+type RootContext = ReturnType<typeof RootContext>;
+export default RootContext;

package/dist/components/carousel/anatomy/root-provider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { useCarousel } from '../modules/provider.svelte';
+
+	export interface CarouselRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+		value: ReturnType<typeof useCarousel>;
+	}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselRootProviderProps = $props();
+	const { element, children, value: carousel, ...rest } = $derived(props);
+
+	const attributes = $derived(mergeProps(carousel().getRootProps(), rest));
+
+	RootContext.provide(() => carousel());
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/root-provider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { useCarousel } from '../modules/provider.svelte';
+export interface CarouselRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+    value: ReturnType<typeof useCarousel>;
+}
+declare const RootProvider: import("svelte").Component<CarouselRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/carousel/anatomy/root.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { Props } from '@zag-js/carousel';
+
+	export interface CarouselRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
+</script>
+
+<script lang="ts">
+	import { useCarousel } from '../modules/provider.svelte';
+	import { RootContext } from '../modules/root-context.js';
+	import { splitProps } from '@zag-js/carousel';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: CarouselRootProps = $props();
+	const [carouselProps, componentProps] = $derived(splitProps(props));
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const id = $props.id();
+	const carousel = useCarousel(() => ({
+		...carouselProps,
+		slideCount: props.slideCount,
+		id: id,
+	}));
+
+	const attributes = $derived(mergeProps(carousel().getRootProps(), rest));
+
+	RootContext.provide(() => carousel());
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/carousel/anatomy/root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+import type { Props } from '@zag-js/carousel';
+export interface CarouselRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
+}
+declare const Root: import("svelte").Component<CarouselRootProps, {}, "">;
+type Root = ReturnType<typeof Root>;
+export default Root;

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

@@ -0,0 +1,14 @@
+export type { CarouselAutoplayTriggerProps } from './anatomy/autoplay-trigger.svelte';
+export type { CarouselControlProps } from './anatomy/control.svelte';
+export type { CarouselIndicatorGroupProps } from './anatomy/indicator-group.svelte';
+export type { CarouselIndicatorProps } from './anatomy/indicator.svelte';
+export type { CarouselItemGroupProps } from './anatomy/item-group.svelte';
+export type { CarouselItemProps } from './anatomy/item.svelte';
+export type { CarouselNextTriggerProps } from './anatomy/next-trigger.svelte';
+export type { CarouselPrevTriggerProps } from './anatomy/prev-trigger.svelte';
+export type { CarouselProgressTextProps } from './anatomy/progress-text.svelte';
+export type { CarouselRootProps } from './anatomy/root.svelte';
+export type { CarouselRootContextProps } from './anatomy/root-context.svelte';
+export type { CarouselRootProviderProps } from './anatomy/root-provider.svelte';
+export { Carousel } from './modules/anatomy.js';
+export { useCarousel } from './modules/provider.svelte.js';

package/dist/components/carousel/index.js

@@ -0,0 +1,2 @@
+export { Carousel } from './modules/anatomy.js';
+export { useCarousel } from './modules/provider.svelte.js';

package/dist/components/carousel/modules/anatomy.d.ts

@@ -0,0 +1,13 @@
+export declare const Carousel: import("svelte").Component<import("../anatomy/root.svelte").CarouselRootProps, {}, ""> & {
+    Provider: import("svelte").Component<import("../anatomy/root-provider.svelte").CarouselRootProviderProps, {}, "">;
+    Context: import("svelte").Component<import("../anatomy/root-context.svelte").CarouselRootContextProps, {}, "">;
+    Control: import("svelte").Component<import("../anatomy/control.svelte").CarouselControlProps, {}, "">;
+    ItemGroup: import("svelte").Component<import("../anatomy/item-group.svelte").CarouselItemGroupProps, {}, "">;
+    Item: import("svelte").Component<import("../anatomy/item.svelte").CarouselItemProps, {}, "">;
+    PrevTrigger: import("svelte").Component<import("../anatomy/prev-trigger.svelte").CarouselPrevTriggerProps, {}, "">;
+    NextTrigger: import("svelte").Component<import("../anatomy/next-trigger.svelte").CarouselNextTriggerProps, {}, "">;
+    AutoplayTrigger: import("svelte").Component<import("../anatomy/autoplay-trigger.svelte").CarouselAutoplayTriggerProps, {}, "">;
+    IndicatorGroup: import("svelte").Component<import("../anatomy/indicator-group.svelte").CarouselIndicatorGroupProps, {}, "">;
+    Indicator: import("svelte").Component<import("../anatomy/indicator.svelte").CarouselIndicatorProps, {}, "">;
+    ProgressText: import("svelte").Component<import("../anatomy/progress-text.svelte").CarouselProgressTextProps, {}, "">;
+};

package/dist/components/carousel/modules/anatomy.js

@@ -0,0 +1,25 @@
+import AutoplayTrigger from '../anatomy/autoplay-trigger.svelte';
+import Control from '../anatomy/control.svelte';
+import Indicator from '../anatomy/indicator.svelte';
+import IndicatorGroup from '../anatomy/indicator-group.svelte';
+import Item from '../anatomy/item.svelte';
+import ItemGroup from '../anatomy/item-group.svelte';
+import NextTrigger from '../anatomy/next-trigger.svelte';
+import PrevTrigger from '../anatomy/prev-trigger.svelte';
+import ProgressText from '../anatomy/progress-text.svelte';
+import RootContext from '../anatomy/root-context.svelte';
+import RootProvider from '../anatomy/root-provider.svelte';
+import Root from '../anatomy/root.svelte';
+export const Carousel = Object.assign(Root, {
+    Provider: RootProvider,
+    Context: RootContext,
+    Control: Control,
+    ItemGroup: ItemGroup,
+    Item: Item,
+    PrevTrigger: PrevTrigger,
+    NextTrigger: NextTrigger,
+    AutoplayTrigger: AutoplayTrigger,
+    IndicatorGroup: IndicatorGroup,
+    Indicator: Indicator,
+    ProgressText: ProgressText,
+});

package/dist/components/carousel/modules/provider.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type PropTypes } from '@zag-js/svelte';
+import type { Api, Props } from '@zag-js/carousel';
+export declare function useCarousel(props: Props | (() => Props)): () => Api<PropTypes>;

package/dist/components/carousel/modules/provider.svelte.js

@@ -0,0 +1,7 @@
+import { normalizeProps, useMachine } from '@zag-js/svelte';
+import { connect, machine } from '@zag-js/carousel';
+export function useCarousel(props) {
+    const service = useMachine(machine, props);
+    const carousel = $derived(connect(service, normalizeProps));
+    return () => carousel;
+}

package/dist/components/carousel/modules/root-context.d.ts

@@ -0,0 +1,5 @@
+export declare const RootContext: {
+    key: symbol;
+    consume(): () => import("@zag-js/carousel", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>;
+    provide(value: () => import("@zag-js/carousel", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>): () => import("@zag-js/carousel", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>;
+};

package/dist/components/carousel/modules/root-context.js

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

package/dist/components/navigation/anatomy/trigger-anchor.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface NavigationTriggerAnchorProps extends PropsWithElement<'anchor'>, HTMLAttributes<'anchor'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: NavigationTriggerAnchorProps = $props();
+
+	const navigation = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			{
+				'data-scope': 'navigation',
+				'data-part': 'trigger-anchor',
+				'data-layout': navigation().layout,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<a {...attributes}>
+		{@render children?.()}
+	</a>
+{/if}

package/dist/components/navigation/anatomy/trigger-anchor.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface NavigationTriggerAnchorProps extends PropsWithElement<'anchor'>, HTMLAttributes<'anchor'> {
+}
+declare const TriggerAnchor: import("svelte").Component<NavigationTriggerAnchorProps, {}, "">;
+type TriggerAnchor = ReturnType<typeof TriggerAnchor>;
+export default TriggerAnchor;

package/dist/components/navigation/anatomy/trigger-text.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface NavigationTriggerTextProps extends PropsWithElement<'span'>, HTMLAttributes<'span'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: NavigationTriggerTextProps = $props();
+
+	const navigation = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			{
+				'data-scope': 'navigation',
+				'data-part': 'trigger-text',
+				'data-layout': navigation().layout,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<span {...attributes}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/components/navigation/anatomy/trigger-text.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface NavigationTriggerTextProps extends PropsWithElement<'span'>, HTMLAttributes<'span'> {
+}
+declare const TriggerText: import("svelte").Component<NavigationTriggerTextProps, {}, "">;
+type TriggerText = ReturnType<typeof TriggerText>;
+export default TriggerText;

package/dist/components/navigation/anatomy/trigger.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+
+	export interface NavigationTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: NavigationTriggerProps = $props();
+
+	const navigation = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			{
+				'data-scope': 'navigation',
+				'data-part': 'trigger',
+				'data-layout': navigation().layout,
+				type: 'button',
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button type="button" {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/navigation/anatomy/trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
+export interface NavigationTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const Trigger: import("svelte").Component<NavigationTriggerProps, {}, "">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

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

@@ -5,4 +5,7 @@ export type { NavigationContentProps } from './anatomy/content.svelte';
 export type { NavigationFooterProps } from './anatomy/footer.svelte';
 export type { NavigationGroupProps } from './anatomy/group.svelte';
 export type { NavigationLabelProps } from './anatomy/label.svelte';
+export type { NavigationTriggerAnchorProps } from './anatomy/trigger-anchor.svelte';
+export type { NavigationTriggerProps } from './anatomy/trigger.svelte';
+export type { NavigationTriggerTextProps } from './anatomy/trigger-text.svelte';
 export { Navigation } from './modules/anatomy.js';

package/dist/components/navigation/modules/anatomy.d.ts

@@ -4,5 +4,8 @@ export declare const Navigation: import("svelte").Component<import("../anatomy/r
     Group: import("svelte").Component<import("../anatomy/group.svelte").NavigationGroupProps, {}, "">;
     Label: import("svelte").Component<import("../anatomy/label.svelte").NavigationLabelProps, {}, "">;
     Menu: import("svelte").Component<import("../anatomy/menu.svelte").NavigationMenuProps, {}, "">;
+    Trigger: import("svelte").Component<import("../anatomy/trigger.svelte").NavigationTriggerProps, {}, "">;
+    TriggerAnchor: import("svelte").Component<import("../anatomy/trigger-anchor.svelte").NavigationTriggerAnchorProps, {}, "">;
+    TriggerText: import("svelte").Component<import("../anatomy/trigger-text.svelte").NavigationTriggerTextProps, {}, "">;
     Footer: import("svelte").Component<import("../anatomy/footer.svelte").NavigationFooterProps, {}, "">;
 };

package/dist/components/navigation/modules/anatomy.js

@@ -4,6 +4,9 @@ import Group from '../anatomy/group.svelte';
 import Header from '../anatomy/header.svelte';
 import Label from '../anatomy/label.svelte';
 import Menu from '../anatomy/menu.svelte';
+import TriggerAnchor from '../anatomy/trigger-anchor.svelte';
+import Trigger from '../anatomy/trigger.svelte';
+import TriggerText from '../anatomy/trigger-text.svelte';
 import Root from '../anatomy/root.svelte';
 export const Navigation = Object.assign(Root, {
     Header: Header,
@@ -11,5 +14,8 @@ export const Navigation = Object.assign(Root, {
     Group: Group,
     Label: Label,
     Menu: Menu,
+    Trigger: Trigger,
+    TriggerAnchor: TriggerAnchor,
+    TriggerText: TriggerText,
     Footer: Footer,
 });

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/accordion/index.js';
 export * from './components/app-bar/index.js';
 export * from './components/avatar/index.js';
+export * from './components/carousel/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/combobox/index.js';
 export * from './components/date-picker/index.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from './components/accordion/index.js';
 export * from './components/app-bar/index.js';
 export * from './components/avatar/index.js';
+export * from './components/carousel/index.js';
 export * from './components/collapsible/index.js';
 export * from './components/combobox/index.js';
 export * from './components/date-picker/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "4.7.4",
+  "version": "4.9.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "repository": {
@@ -21,34 +21,35 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@internationalized/date": "3.10.0",
-    "@zag-js/accordion": "1.31.0",
-    "@zag-js/avatar": "1.31.0",
-    "@zag-js/collapsible": "1.31.0",
-    "@zag-js/collection": "1.31.0",
-    "@zag-js/combobox": "1.31.0",
-    "@zag-js/date-picker": "1.31.0",
-    "@zag-js/dialog": "1.31.0",
-    "@zag-js/file-upload": "1.31.0",
-    "@zag-js/floating-panel": "1.31.0",
-    "@zag-js/listbox": "1.31.0",
-    "@zag-js/menu": "1.31.0",
-    "@zag-js/pagination": "1.31.0",
-    "@zag-js/popover": "1.31.0",
-    "@zag-js/progress": "1.31.0",
-    "@zag-js/radio-group": "1.31.0",
-    "@zag-js/rating-group": "1.31.0",
-    "@zag-js/slider": "1.31.0",
-    "@zag-js/steps": "1.31.0",
-    "@zag-js/svelte": "1.31.0",
-    "@zag-js/switch": "1.31.0",
-    "@zag-js/tabs": "1.31.0",
-    "@zag-js/tags-input": "1.31.0",
-    "@zag-js/toast": "1.31.0",
-    "@zag-js/toggle-group": "1.31.0",
-    "@zag-js/tooltip": "1.31.0",
-    "@zag-js/tree-view": "1.31.0",
-    "@skeletonlabs/skeleton-common": "4.7.4"
+    "@internationalized/date": "3.10.1",
+    "@zag-js/accordion": "1.31.1",
+    "@zag-js/avatar": "1.31.1",
+    "@zag-js/carousel": "1.31.1",
+    "@zag-js/collapsible": "1.31.1",
+    "@zag-js/collection": "1.31.1",
+    "@zag-js/combobox": "1.31.1",
+    "@zag-js/date-picker": "1.31.1",
+    "@zag-js/dialog": "1.31.1",
+    "@zag-js/file-upload": "1.31.1",
+    "@zag-js/floating-panel": "1.31.1",
+    "@zag-js/listbox": "1.31.1",
+    "@zag-js/menu": "1.31.1",
+    "@zag-js/pagination": "1.31.1",
+    "@zag-js/popover": "1.31.1",
+    "@zag-js/progress": "1.31.1",
+    "@zag-js/radio-group": "1.31.1",
+    "@zag-js/rating-group": "1.31.1",
+    "@zag-js/slider": "1.31.1",
+    "@zag-js/steps": "1.31.1",
+    "@zag-js/svelte": "1.31.1",
+    "@zag-js/switch": "1.31.1",
+    "@zag-js/tabs": "1.31.1",
+    "@zag-js/tags-input": "1.31.1",
+    "@zag-js/toast": "1.31.1",
+    "@zag-js/toggle-group": "1.31.1",
+    "@zag-js/tooltip": "1.31.1",
+    "@zag-js/tree-view": "1.31.1",
+    "@skeletonlabs/skeleton-common": "4.9.0"
   },
   "peerDependencies": {
     "svelte": "^5.29.0"