@skeletonlabs/skeleton-svelte 4.1.4 → 4.2.0

package/dist/components/listbox/anatomy/label.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface ListboxLabelProps extends PropsWithElement<'label'>, HTMLAttributes<'label'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesListbox } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

package/dist/components/listbox/anatomy/label.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface ListboxLabelProps extends PropsWithElement<'label'>, HTMLAttributes<'label'> {
 }
 declare const Label: import("svelte").Component<ListboxLabelProps, {}, "">;

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

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 
 	const props: ListboxRootContextProps = $props();
 

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

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 export interface ListboxRootContextProps {
     children: Snippet<[ReturnType<typeof useListbox>]>;
 }
-import { RootContext } from '../modules/root-context';
+import { RootContext } from '../modules/root-context.js';
 declare const RootContext: import("svelte").Component<ListboxRootContextProps, {}, "">;
 type RootContext = ReturnType<typeof RootContext>;
 export default RootContext;

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import type { useListbox } from '../modules/provider.svelte';
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface ListboxRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
 		value: ReturnType<typeof useListbox>;
@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesListbox } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,6 +1,6 @@
 import type { useListbox } from '../modules/provider.svelte';
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface ListboxRootProviderProps extends PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
     value: ReturnType<typeof useListbox>;
 }

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 	import type { Props } from '@zag-js/listbox';
 
 	export interface ListboxRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {}
@@ -8,7 +8,7 @@
 
 <script lang="ts">
 	import { useListbox } from '../modules/provider.svelte';
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesListbox } from '@skeletonlabs/skeleton-common';
 	import { splitProps } from '@zag-js/listbox';
 	import { mergeProps } from '@zag-js/svelte';

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import type { Props } from '@zag-js/listbox';
 export interface ListboxRootProps extends Omit<Props, 'id'>, PropsWithElement<'div'>, HTMLAttributes<'div', 'id' | 'dir'> {
 }

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

@@ -9,6 +9,6 @@ export type { ListboxLabelProps } from './anatomy/label.svelte';
 export type { ListboxRootProps } from './anatomy/root.svelte';
 export type { ListboxRootContextProps } from './anatomy/root-context.svelte';
 export type { ListboxRootProviderProps } from './anatomy/root-provider.svelte';
-export { Listbox } from './modules/anatomy';
-export { useListbox } from './modules/provider.svelte';
+export { Listbox } from './modules/anatomy.js';
+export { useListbox } from './modules/provider.svelte.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/listbox/index.js

@@ -1,2 +1,2 @@
-export { Listbox } from './modules/anatomy';
-export { useListbox } from './modules/provider.svelte';
+export { Listbox } from './modules/anatomy.js';
+export { useListbox } from './modules/provider.svelte.js';

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

@@ -1,13 +1,13 @@
-export declare const Listbox: import("svelte").Component<import("..").ListboxRootProps, {}, ""> & {
-    Provider: import("svelte").Component<import("..").ListboxRootProviderProps, {}, "">;
-    Context: import("svelte").Component<import("..").ListboxRootContextProps, {}, "">;
-    Label: import("svelte").Component<import("..").ListboxLabelProps, {}, "">;
-    Input: import("svelte").Component<import("..").ListboxInputProps, {}, "">;
-    Content: import("svelte").Component<import("..").ListboxContentProps, {}, "">;
-    ItemGroup: import("svelte").Component<import("..").ListboxItemGroupProps, {}, "">;
-    ItemGroupLabel: import("svelte").Component<import("..").ListboxItemGroupLabelProps, {}, "">;
-    Item: import("svelte").Component<import("..").ListboxItemProps, {}, "">;
-    ItemText: import("svelte").Component<import("..").ListboxItemTextProps, {}, "">;
-    ItemIndicator: import("svelte").Component<import("..").ListboxItemIndicatorProps, {}, "">;
+export declare const Listbox: import("svelte").Component<import("../anatomy/root.svelte").ListboxRootProps, {}, ""> & {
+    Provider: import("svelte").Component<import("../anatomy/root-provider.svelte").ListboxRootProviderProps, {}, "">;
+    Context: import("svelte").Component<import("../anatomy/root-context.svelte").ListboxRootContextProps, {}, "">;
+    Label: import("svelte").Component<import("../anatomy/label.svelte").ListboxLabelProps, {}, "">;
+    Input: import("svelte").Component<import("../anatomy/input.svelte").ListboxInputProps, {}, "">;
+    Content: import("svelte").Component<import("../anatomy/content.svelte").ListboxContentProps, {}, "">;
+    ItemGroup: import("svelte").Component<import("../anatomy/item-group.svelte").ListboxItemGroupProps, {}, "">;
+    ItemGroupLabel: import("svelte").Component<import("../anatomy/item-group-label.svelte").ListboxItemGroupLabelProps, {}, "">;
+    Item: import("svelte").Component<import("../anatomy/item.svelte").ListboxItemProps, {}, "">;
+    ItemText: import("svelte").Component<import("../anatomy/item-text.svelte").ListboxItemTextProps, {}, "">;
+    ItemIndicator: import("svelte").Component<import("../anatomy/item-indicator.svelte").ListboxItemIndicatorProps, {}, "">;
 };
 //# sourceMappingURL=anatomy.d.ts.map

package/dist/components/listbox/modules/item-context.js

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

package/dist/components/listbox/modules/item-group-context.js

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

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

@@ -1,6 +1,6 @@
 export declare const RootContext: {
     key: symbol;
-    consume(): () => import("@zag-js/listbox").Api<import("@zag-js/svelte").PropTypes>;
-    provide(value: () => import("@zag-js/listbox").Api<import("@zag-js/svelte").PropTypes>): () => import("@zag-js/listbox").Api<import("@zag-js/svelte").PropTypes>;
+    consume(): () => import("@zag-js/listbox", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>;
+    provide(value: () => import("@zag-js/listbox", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>): () => import("@zag-js/listbox", { with: { "resolution-mode": "require" } }).Api<import("@zag-js/svelte").PropTypes>;
 };
 //# sourceMappingURL=root-context.d.ts.map

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

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

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationContentProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
 }
 declare const Content: import("svelte").Component<NavigationContentProps, {}, "">;

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationFooterProps extends PropsWithElement<'footer'>, HTMLAttributes<'footer'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationFooterProps extends PropsWithElement<'footer'>, HTMLAttributes<'footer'> {
 }
 declare const Footer: import("svelte").Component<NavigationFooterProps, {}, "">;

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationGroupProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
 }
 declare const Group: import("svelte").Component<NavigationGroupProps, {}, "">;

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationHeaderProps extends PropsWithElement<'header'>, HTMLAttributes<'header'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationHeaderProps extends PropsWithElement<'header'>, HTMLAttributes<'header'> {
 }
 declare const Header: import("svelte").Component<NavigationHeaderProps, {}, "">;

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationLabelProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationLabelProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
 }
 declare const Label: import("svelte").Component<NavigationLabelProps, {}, "">;

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationMenuProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationMenuProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
 }
 declare const Menu: import("svelte").Component<NavigationMenuProps, {}, "">;

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

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface NavigationRootProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
 		/**
@@ -13,7 +13,7 @@
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesNavigation } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 export interface NavigationRootProps extends PropsWithElement<'div'>, HTMLAttributes<'div'> {
     /**
      * Sets the data-layout attribute, which modifies the visual presentation of the component set.

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

@@ -5,5 +5,5 @@ 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 { Navigation } from './modules/anatomy';
+export { Navigation } from './modules/anatomy.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/navigation/index.js

@@ -1 +1 @@
-export { Navigation } from './modules/anatomy';
+export { Navigation } from './modules/anatomy.js';

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

@@ -1,9 +1,9 @@
-export declare const Navigation: import("svelte").Component<import("..").NavigationRootProps, {}, ""> & {
-    Header: import("svelte").Component<import("..").NavigationHeaderProps, {}, "">;
-    Content: import("svelte").Component<import("..").NavigationContentProps, {}, "">;
-    Group: import("svelte").Component<import("..").NavigationGroupProps, {}, "">;
-    Label: import("svelte").Component<import("..").NavigationLabelProps, {}, "">;
-    Menu: import("svelte").Component<import("..").NavigationMenuProps, {}, "">;
-    Footer: import("svelte").Component<import("..").NavigationFooterProps, {}, "">;
+export declare const Navigation: import("svelte").Component<import("../anatomy/root.svelte").NavigationRootProps, {}, ""> & {
+    Header: import("svelte").Component<import("../anatomy/header.svelte").NavigationHeaderProps, {}, "">;
+    Content: import("svelte").Component<import("../anatomy/content.svelte").NavigationContentProps, {}, "">;
+    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, {}, "">;
+    Footer: import("svelte").Component<import("../anatomy/footer.svelte").NavigationFooterProps, {}, "">;
 };
 //# sourceMappingURL=anatomy.d.ts.map

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

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

package/dist/components/pagination/anatomy/ellipsis.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 	import { splitEllipsisProps, type EllipsisProps } from '@zag-js/pagination';
 
 	export interface PaginationEllipsisProps extends EllipsisProps, PropsWithElement<'span'>, HTMLAttributes<'span'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesPagination } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

package/dist/components/pagination/anatomy/ellipsis.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { type EllipsisProps } from '@zag-js/pagination';
 export interface PaginationEllipsisProps extends EllipsisProps, PropsWithElement<'span'>, HTMLAttributes<'span'> {
 }

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

package/dist/components/pagination/anatomy/first-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';
+export interface PaginationFirstTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const FirstTrigger: import("svelte").Component<PaginationFirstTriggerProps, {}, "">;
+type FirstTrigger = ReturnType<typeof FirstTrigger>;
+export default FirstTrigger;
+//# sourceMappingURL=first-trigger.svelte.d.ts.map

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

@@ -1,13 +1,13 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 	import { splitItemProps, type ItemProps } from '@zag-js/pagination';
 
 	export interface PaginationItemProps extends ItemProps, PropsWithElement<'a'>, HTMLAttributes<'a', 'type'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesPagination } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from '../../../internal/html-attributes';
-import type { PropsWithElement } from '../../../internal/props-with-element';
+import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+import type { PropsWithElement } from '../../../internal/props-with-element.js';
 import { type ItemProps } from '@zag-js/pagination';
 export interface PaginationItemProps extends ItemProps, PropsWithElement<'a'>, HTMLAttributes<'a', 'type'> {
 }

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

package/dist/components/pagination/anatomy/last-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';
+export interface PaginationLastTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {
+}
+declare const LastTrigger: import("svelte").Component<PaginationLastTriggerProps, {}, "">;
+type LastTrigger = ReturnType<typeof LastTrigger>;
+export default LastTrigger;
+//# sourceMappingURL=last-trigger.svelte.d.ts.map

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface PaginationNextTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesPagination } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';
 
@@ -18,9 +18,9 @@
 
 	const attributes = $derived(
 		mergeProps(
-			pagination().getNextTriggerProps(),
 			{
 				class: classesPagination.nextTrigger,
+				onclick: pagination().getNextTriggerProps(),
 			},
 			rest,
 		),

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

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

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

@@ -1,12 +1,12 @@
 <script lang="ts" module>
-	import type { HTMLAttributes } from '../../../internal/html-attributes';
-	import type { PropsWithElement } from '../../../internal/props-with-element';
+	import type { HTMLAttributes } from '../../../internal/html-attributes.js';
+	import type { PropsWithElement } from '../../../internal/props-with-element.js';
 
 	export interface PaginationPrevTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
 </script>
 
 <script lang="ts">
-	import { RootContext } from '../modules/root-context';
+	import { RootContext } from '../modules/root-context.js';
 	import { classesPagination } from '@skeletonlabs/skeleton-common';
 	import { mergeProps } from '@zag-js/svelte';