feat: toggle group

[Hugos68]

Linked Issue

Closes -

Description

Implements the Toggle Group component

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: d56be03

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	Comments	Updated (UTC)
www.skeleton.dev	Ready	Preview	Comment	Oct 16, 2025 5:09pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
themes.skeleton.dev	Skipped			Oct 16, 2025 5:09pm

[Copilot]

Pull Request Overview

This PR implements a new Toggle Group component for the Skeleton UI library, providing grouped buttons for toggling option states using Zag.js as the underlying state management.

Key Changes

• Adds Toggle Group component implementation for both Svelte and React frameworks
• Integrates @zag-js/toggle-group dependency for state management and accessibility
• Provides comprehensive documentation and playground examples

Reviewed Changes

Copilot reviewed 35 out of 36 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds @zag-js/toggle-group dependency to the workspace catalog
packages/skeleton-common/src/classes/toggle-group.ts	Defines CSS classes and styling for the toggle group component
packages/skeleton-svelte/src/components/toggle-group/*	Implements Svelte version with provider pattern and anatomy components
packages/skeleton-react/src/components/toggle-group/*	Implements React version with hooks and context providers
sites/skeleton.dev/src/content/docs/components/toggle-group/*	Adds documentation pages for both frameworks
playgrounds/*	Provides working examples for testing both implementations

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 35 out of 36 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 35 out of 36 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 35 out of 36 changed files in this pull request and generated no new comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 39 out of 40 changed files in this pull request and generated 11 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Use 'class' instead of 'className' in Svelte components to ensure styles are applied.

Suggested change

	<BoldIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon className="size-4" />
	<BoldIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon class="size-4" />

[Copilot]

Use 'class' instead of 'className' in Svelte components.

Suggested change

	<BoldIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon className="size-4" />
	<BoldIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon class="size-4" />

[Copilot]

Use 'class' instead of 'className' in Svelte components so the icon receives the expected styling.

Suggested change

	<BoldIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon className="size-4" />
	<BoldIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon class="size-4" />

[Copilot]

In Svelte, use 'class' instead of 'className' to style components.

Suggested change

	<BoldIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon className="size-4" />
	<BoldIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon class="size-4" />

[Copilot]

Replace 'className' with 'class' in Svelte.

Suggested change

	<BoldIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon className="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon className="size-4" />
	<BoldIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="italic">
	<ItalicIcon class="size-4" />
	</ToggleGroup.Item>
	<ToggleGroup.Item value="underline">
	<UnderlineIcon class="size-4" />

[Copilot]

Pull Request Overview

Copilot reviewed 39 out of 40 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 41 out of 42 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}