@skeletonlabs/skeleton-svelte 4.5.3 → 4.6.0

package/dist/components/file-upload/anatomy/clear-trigger.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 FileUploadClearTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFileUpload } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FileUploadClearTriggerProps = $props();
+
+	const fileUpload = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			fileUpload().getClearTriggerProps(),
+			{
+				class: classesFileUpload.clearTrigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/file-upload/anatomy/clear-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 FileUploadClearTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const ClearTrigger: import("svelte").Component<FileUploadClearTriggerProps, {}, "">;
+type ClearTrigger = ReturnType<typeof ClearTrigger>;
+export default ClearTrigger;

package/dist/components/file-upload/index.d.ts

@@ -1,3 +1,4 @@
+export type { FileUploadClearTriggerProps } from './anatomy/clear-trigger.svelte';
 export type { FileUploadDropzoneProps } from './anatomy/dropzone.svelte';
 export type { FileUploadHiddenInputProps } from './anatomy/hidden-input.svelte';
 export type { FileUploadItemProps } from './anatomy/item.svelte';

package/dist/components/file-upload/modules/anatomy.d.ts

@@ -4,6 +4,7 @@ export declare const FileUpload: import("svelte").Component<import("../anatomy/r
     Label: import("svelte").Component<import("../anatomy/label.svelte").FileUploadLabelProps, {}, "">;
     Dropzone: import("svelte").Component<import("../anatomy/dropzone.svelte").FileUploadDropzoneProps, {}, "">;
     Trigger: import("svelte").Component<import("../anatomy/trigger.svelte").FileUploadTriggerProps, {}, "">;
+    ClearTrigger: import("svelte").Component<import("../anatomy/clear-trigger.svelte").FileUploadClearTriggerProps, {}, "">;
     HiddenInput: import("svelte").Component<import("../anatomy/hidden-input.svelte").FileUploadHiddenInputProps, {}, "">;
     ItemGroup: import("svelte").Component<import("../anatomy/item-group.svelte").FileUploadItemGroupProps, {}, "">;
     Item: import("svelte").Component<import("../anatomy/item.svelte").FileUploadItemProps, {}, "">;

package/dist/components/file-upload/modules/anatomy.js

@@ -1,3 +1,4 @@
+import ClearTrigger from '../anatomy/clear-trigger.svelte';
 import Dropzone from '../anatomy/dropzone.svelte';
 import HiddenInput from '../anatomy/hidden-input.svelte';
 import ItemDeleteTrigger from '../anatomy/item-delete-trigger.svelte';
@@ -16,6 +17,7 @@ export const FileUpload = Object.assign(Root, {
     Label: Label,
     Dropzone: Dropzone,
     Trigger: Trigger,
+    ClearTrigger: ClearTrigger,
     HiddenInput: HiddenInput,
     ItemGroup: ItemGroup,
     Item: Item,

package/dist/components/floating-panel/anatomy/body.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 FloatingPanelBodyProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelBodyProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getBodyProps(),
+			{
+				class: classesFloatingPanel.body,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/body.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 FloatingPanelBodyProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Body: import("svelte").Component<FloatingPanelBodyProps, {}, "">;
+type Body = ReturnType<typeof Body>;
+export default Body;

package/dist/components/floating-panel/anatomy/close-trigger.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 FloatingPanelCloseTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelCloseTriggerProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getCloseTriggerProps(),
+			{
+				class: classesFloatingPanel.closeTrigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/floating-panel/anatomy/close-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 FloatingPanelCloseTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const CloseTrigger: import("svelte").Component<FloatingPanelCloseTriggerProps, {}, "">;
+type CloseTrigger = ReturnType<typeof CloseTrigger>;
+export default CloseTrigger;

package/dist/components/floating-panel/anatomy/content.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 FloatingPanelContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelContentProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getContentProps(),
+			{
+				class: classesFloatingPanel.content,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/content.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 FloatingPanelContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Content: import("svelte").Component<FloatingPanelContentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/floating-panel/anatomy/control.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 FloatingPanelControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelControlProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getControlProps(),
+			{
+				class: classesFloatingPanel.control,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/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 FloatingPanelControlProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Control: import("svelte").Component<FloatingPanelControlProps, {}, "">;
+type Control = ReturnType<typeof Control>;
+export default Control;

package/dist/components/floating-panel/anatomy/drag-trigger.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 FloatingPanelDragTriggerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelDragTriggerProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getDragTriggerProps(),
+			{
+				class: classesFloatingPanel.dragTrigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/drag-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 FloatingPanelDragTriggerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const DragTrigger: import("svelte").Component<FloatingPanelDragTriggerProps, {}, "">;
+type DragTrigger = ReturnType<typeof DragTrigger>;
+export default DragTrigger;

package/dist/components/floating-panel/anatomy/header.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 FloatingPanelHeaderProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelHeaderProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getHeaderProps(),
+			{
+				class: classesFloatingPanel.header,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/header.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 FloatingPanelHeaderProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Header: import("svelte").Component<FloatingPanelHeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/floating-panel/anatomy/positioner.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 FloatingPanelPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelPositionerProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getPositionerProps(),
+			{
+				class: classesFloatingPanel.positioner,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/positioner.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 FloatingPanelPositionerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Positioner: import("svelte").Component<FloatingPanelPositionerProps, {}, "">;
+type Positioner = ReturnType<typeof Positioner>;
+export default Positioner;

package/dist/components/floating-panel/anatomy/resize-trigger.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
+	import type { ResizeTriggerProps } from '@zag-js/floating-panel';
+
+	export interface FloatingPanelResizeTriggerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'>, ResizeTriggerProps {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { splitResizeTriggerProps } from '@zag-js/floating-panel';
+	import type { ResizeTriggerProps as ZagResizeTriggerProps } from '@zag-js/floating-panel';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelResizeTriggerProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const [resizeTriggerProps, componentProps] = $derived(splitResizeTriggerProps(props));
+	const { element, children, ...rest } = $derived(componentProps);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getResizeTriggerProps(resizeTriggerProps as ZagResizeTriggerProps),
+			{
+				class: classesFloatingPanel.resizeTrigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/resize-trigger.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 { ResizeTriggerProps } from '@zag-js/floating-panel';
+export interface FloatingPanelResizeTriggerProps extends PropsWithElement<'div'>, HTMLAttributes<'div'>, ResizeTriggerProps {
+}
+declare const ResizeTrigger: import("svelte").Component<FloatingPanelResizeTriggerProps, {}, "">;
+type ResizeTrigger = ReturnType<typeof ResizeTrigger>;
+export default ResizeTrigger;

package/dist/components/floating-panel/anatomy/root-context.svelte

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

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

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

package/dist/components/floating-panel/anatomy/root-provider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import type { PropsWithChildren } from '../../../internal/props-with-children.js';
+	import type { useFloatingPanel } from '../modules/provider.svelte';
+
+	export interface FloatingPanelRootProviderProps extends PropsWithChildren {
+		value: ReturnType<typeof useFloatingPanel>;
+	}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+
+	const props: FloatingPanelRootProviderProps = $props();
+
+	const { children, value: floatingPanel } = $derived(props);
+
+	RootContext.provide(() => floatingPanel());
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from '../../../internal/props-with-children.js';
+import type { useFloatingPanel } from '../modules/provider.svelte';
+export interface FloatingPanelRootProviderProps extends PropsWithChildren {
+    value: ReturnType<typeof useFloatingPanel>;
+}
+declare const RootProvider: import("svelte").Component<FloatingPanelRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/floating-panel/anatomy/root.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	import type { PropsWithChildren } from '../../../internal/props-with-children.js';
+	import type { Props } from '@zag-js/floating-panel';
+
+	export interface FloatingPanelRootProps extends Omit<Props, 'id'>, PropsWithChildren {}
+</script>
+
+<script lang="ts">
+	import { useFloatingPanel } from '../modules/provider.svelte';
+	import { RootContext } from '../modules/root-context.js';
+	import { splitProps } from '@zag-js/floating-panel';
+
+	const props: FloatingPanelRootProps = $props();
+
+	const [floatingPanelProps, componentProps] = $derived(splitProps(props));
+	const { children } = $derived(componentProps);
+
+	const id = $props.id();
+	const floatingPanel = useFloatingPanel(() => ({
+		...floatingPanelProps,
+		id: id,
+	}));
+
+	RootContext.provide(() => floatingPanel());
+</script>
+
+{@render children?.()}

package/dist/components/floating-panel/anatomy/root.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from '../../../internal/props-with-children.js';
+import type { Props } from '@zag-js/floating-panel';
+export interface FloatingPanelRootProps extends Omit<Props, 'id'>, PropsWithChildren {
+}
+declare const Root: import("svelte").Component<FloatingPanelRootProps, {}, "">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/floating-panel/anatomy/stage-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';
+	import type { StageTriggerProps } from '@zag-js/floating-panel';
+
+	export interface FloatingPanelStageTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'>, StageTriggerProps {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelStageTriggerProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, stage, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getStageTriggerProps({ stage }),
+			{
+				class: classesFloatingPanel.stageTrigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/floating-panel/anatomy/stage-trigger.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 { StageTriggerProps } from '@zag-js/floating-panel';
+export interface FloatingPanelStageTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'>, StageTriggerProps {
+}
+declare const StageTrigger: import("svelte").Component<FloatingPanelStageTriggerProps, {}, "">;
+type StageTrigger = ReturnType<typeof StageTrigger>;
+export default StageTrigger;

package/dist/components/floating-panel/anatomy/title.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 FloatingPanelTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelTitleProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getTitleProps(),
+			{
+				class: classesFloatingPanel.title,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<div {...attributes}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/floating-panel/anatomy/title.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 FloatingPanelTitleProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
+}
+declare const Title: import("svelte").Component<FloatingPanelTitleProps, {}, "">;
+type Title = ReturnType<typeof Title>;
+export default Title;

package/dist/components/floating-panel/anatomy/trigger.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 FloatingPanelTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesFloatingPanel } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: FloatingPanelTriggerProps = $props();
+
+	const floatingPanel = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			floatingPanel().getTriggerProps(),
+			{
+				class: classesFloatingPanel.trigger,
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/floating-panel/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 FloatingPanelTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const Trigger: import("svelte").Component<FloatingPanelTriggerProps, {}, "">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

package/dist/components/floating-panel/index.d.ts

@@ -0,0 +1,16 @@
+export type { FloatingPanelBodyProps } from './anatomy/body.svelte';
+export type { FloatingPanelCloseTriggerProps } from './anatomy/close-trigger.svelte';
+export type { FloatingPanelContentProps } from './anatomy/content.svelte';
+export type { FloatingPanelControlProps } from './anatomy/control.svelte';
+export type { FloatingPanelDragTriggerProps } from './anatomy/drag-trigger.svelte';
+export type { FloatingPanelHeaderProps } from './anatomy/header.svelte';
+export type { FloatingPanelPositionerProps } from './anatomy/positioner.svelte';
+export type { FloatingPanelResizeTriggerProps } from './anatomy/resize-trigger.svelte';
+export type { FloatingPanelRootProps } from './anatomy/root.svelte';
+export type { FloatingPanelRootContextProps } from './anatomy/root-context.svelte';
+export type { FloatingPanelRootProviderProps } from './anatomy/root-provider.svelte';
+export type { FloatingPanelStageTriggerProps } from './anatomy/stage-trigger.svelte';
+export type { FloatingPanelTitleProps } from './anatomy/title.svelte';
+export type { FloatingPanelTriggerProps } from './anatomy/trigger.svelte';
+export { FloatingPanel } from './modules/anatomy.js';
+export { useFloatingPanel } from './modules/provider.svelte.js';

package/dist/components/floating-panel/index.js

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

package/dist/components/floating-panel/modules/anatomy.d.ts

@@ -0,0 +1,15 @@
+export declare const FloatingPanel: import("svelte").Component<import("../anatomy/root.svelte").FloatingPanelRootProps, {}, ""> & {
+    Provider: import("svelte").Component<import("../anatomy/root-provider.svelte").FloatingPanelRootProviderProps, {}, "">;
+    Context: import("svelte").Component<import("../anatomy/root-context.svelte").FloatingPanelRootContextProps, {}, "">;
+    Trigger: import("svelte").Component<import("../anatomy/trigger.svelte").FloatingPanelTriggerProps, {}, "">;
+    Positioner: import("svelte").Component<import("../anatomy/positioner.svelte").FloatingPanelPositionerProps, {}, "">;
+    Content: import("svelte").Component<import("../anatomy/content.svelte").FloatingPanelContentProps, {}, "">;
+    DragTrigger: import("svelte").Component<import("../anatomy/drag-trigger.svelte").FloatingPanelDragTriggerProps, {}, "">;
+    Header: import("svelte").Component<import("../anatomy/header.svelte").FloatingPanelHeaderProps, {}, "">;
+    Title: import("svelte").Component<import("../anatomy/title.svelte").FloatingPanelTitleProps, {}, "">;
+    Control: import("svelte").Component<import("../anatomy/control.svelte").FloatingPanelControlProps, {}, "">;
+    StageTrigger: import("svelte").Component<import("../anatomy/stage-trigger.svelte").FloatingPanelStageTriggerProps, {}, "">;
+    CloseTrigger: import("svelte").Component<import("../anatomy/close-trigger.svelte").FloatingPanelCloseTriggerProps, {}, "">;
+    Body: import("svelte").Component<import("../anatomy/body.svelte").FloatingPanelBodyProps, {}, "">;
+    ResizeTrigger: import("svelte").Component<import("../anatomy/resize-trigger.svelte").FloatingPanelResizeTriggerProps, {}, "">;
+};

package/dist/components/floating-panel/modules/anatomy.js

@@ -0,0 +1,29 @@
+import Body from '../anatomy/body.svelte';
+import CloseTrigger from '../anatomy/close-trigger.svelte';
+import Content from '../anatomy/content.svelte';
+import Control from '../anatomy/control.svelte';
+import DragTrigger from '../anatomy/drag-trigger.svelte';
+import Header from '../anatomy/header.svelte';
+import Positioner from '../anatomy/positioner.svelte';
+import ResizeTrigger from '../anatomy/resize-trigger.svelte';
+import RootContext from '../anatomy/root-context.svelte';
+import RootProvider from '../anatomy/root-provider.svelte';
+import Root from '../anatomy/root.svelte';
+import StageTrigger from '../anatomy/stage-trigger.svelte';
+import Title from '../anatomy/title.svelte';
+import Trigger from '../anatomy/trigger.svelte';
+export const FloatingPanel = Object.assign(Root, {
+    Provider: RootProvider,
+    Context: RootContext,
+    Trigger: Trigger,
+    Positioner: Positioner,
+    Content: Content,
+    DragTrigger: DragTrigger,
+    Header: Header,
+    Title: Title,
+    Control: Control,
+    StageTrigger: StageTrigger,
+    CloseTrigger: CloseTrigger,
+    Body: Body,
+    ResizeTrigger: ResizeTrigger,
+});

package/dist/components/floating-panel/modules/provider.svelte.d.ts

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

package/dist/components/floating-panel/modules/provider.svelte.js

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

package/dist/components/floating-panel/modules/root-context.d.ts

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

package/dist/components/floating-panel/modules/root-context.js

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

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/combobox/index.js';
 export * from './components/date-picker/index.js';
 export * from './components/dialog/index.js';
 export * from './components/file-upload/index.js';
+export * from './components/floating-panel/index.js';
 export * from './components/listbox/index.js';
 export * from './components/menu/index.js';
 export * from './components/navigation/index.js';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './components/combobox/index.js';
 export * from './components/date-picker/index.js';
 export * from './components/dialog/index.js';
 export * from './components/file-upload/index.js';
+export * from './components/floating-panel/index.js';
 export * from './components/listbox/index.js';
 export * from './components/menu/index.js';
 export * from './components/navigation/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonlabs/skeleton-svelte",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "description": "The Svelte package for Skeleton.",
   "author": "endigo9740 <chris@skeletonlabs.dev>",
   "repository": {
@@ -30,6 +30,7 @@
     "@zag-js/date-picker": "1.29.1",
     "@zag-js/dialog": "1.29.1",
     "@zag-js/file-upload": "1.29.1",
+    "@zag-js/floating-panel": "1.29.1",
     "@zag-js/listbox": "1.29.1",
     "@zag-js/menu": "1.29.1",
     "@zag-js/pagination": "1.29.1",
@@ -46,7 +47,7 @@
     "@zag-js/toggle-group": "1.29.1",
     "@zag-js/tooltip": "1.29.1",
     "@zag-js/tree-view": "1.29.1",
-    "@skeletonlabs/skeleton-common": "4.5.3"
+    "@skeletonlabs/skeleton-common": "4.6.0"
   },
   "peerDependencies": {
     "svelte": "^5.29.0"