feature: First Page and Last Page buttons for svelte

[Uncle798]

Linked Issue

n/a

Description

Adding first page and last page button for Pagination for Svelte

Checklist

Please read and apply all contribution requirements.

• Your branch should be prefixed with: docs/, feature/, chore/, bugfix/
• Contributions should target the main branch
• Documentation should be updated to describe all relevant changes
• Run pnpm check in the root of the monorepo
• Run pnpm format in the root of the monorepo
• Run pnpm lint in the root of the monorepo
• Run pnpm test in the root of the monorepo
• If you modify /package projects, please supply a Changeset

Changesets

View our documentation to learn more about Changesets. To create a Changeset:

1. Navigate to the root of the monorepo in your terminal
2. Run pnpm changeset and follow the prompts
3. Commit and push the changeset before flagging your PR review for review.

[changeset-bot]

🦋 Changeset detected

Latest commit: 742f113

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@skeletonlabs/skeleton-common	Minor
@skeletonlabs/skeleton-svelte	Minor
@skeletonlabs/skeleton-react	Minor
skeleton	Minor
@skeletonlabs/skeleton	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
www.skeleton.dev	Ready	Preview	Oct 22, 2025 7:13pm

[Uncle798]

I screwed up the docs example, I put the wrong icon in Pagination.FirstTrigger it should be <ArrowLeftToLineIcon class='size-4' />

[endigo9740]

@Uncle798 I'll let @Hugos68 do a sweep as well. But overall looks like a good start, just a few things of note:

1. There's a few CI checks fail here. You may need to run the format/lint commands described in the original post above to help sort those.
2. Make sure to include a changeset, as you're modifying the /packages directory code (code we ship to users). Again the CLI command for this is in the original post above. This will be a minor version. I'll put an example of the changelog message below.
3. It doesn't include the React components, which we'll need as well to ship this. Even if you don't know React, you should be able to follow the same approach to the Svelte version. A lot of code will carry over because Zag is framework agnostic.
4. I'm actually going to suggest you remove any Skeleton documentation page changes. The reason being is we're quietly working on an overhaul to our docs. So we'll want to ensure this is implemented in the new format to ensure this feature's docs carry over.

If you need any specific help, ping Hugo or myself on Discord. I'm in and out so Hugo may respond faster though.

Recommended changeset description:

feat: Pagination first and last buttons

[Hugos68]

Some small things. We should also aim to add two tests and add the React version.

[Hugos68]

You can actually put this next to class:

Suggested change

	const attributes = $derived(
	mergeProps(
	{
	onclick: pagination().goToFirstPage()
	},
	{
	class: classesPagination.nextTrigger,
	},
	rest,
	),
	);
	const attributes = $derived(
	mergeProps(
	{
	class: classesPagination.nextTrigger,
	onclick: pagination().goToFirstPage()
	},
	rest,
	),
	);

[Hugos68]

Please put it in front of Prev as it's First, Prev, Next, Last

[Hugos68]

@Uncle798 Looks like you need to run the formatter, and the deployment on Vercel is failing because of:

Interface not found: PaginationLastTriggerProps

Make sure you are defining and exporting the 2 newly added interfaces from the components.

[Hugos68]

Make sure to put this in it's own closure, now it will be called once and the return value is passed to onclick, you would want. This shouldn't work.