NEXT: Update components to use Zag.js

[Hugos68]

This PR integrates Zag into our existing suite of Svelte and React components. This also updates the respective documentation and examples for each component.

The following indicates the status of updates per components:

Component	Svelte	React	Docs	Owner
Accordion	✅	✅	✅	Hugo
Avatar	✅	✅	✅	Chris
Progress	✅	✅	✅	Hugo
Progress Ring	✅	✅	✅	Chris
Rating	✅	✅	✅	Hugo
Seg. Control	✅	✅	✅	Chris
Switch	✅	✅	✅	Chris
Tabs	✅	✅	✅	Chris

NOTE: AppBar and Navigation components will not use Zag.

Also implements:

• useId() local utility function for skeleton-svelte

Remaining Tasks

• Resolve Astro docs CI deployment issue
• Ensure React schema.ts information is up to date
• Run PR checklist tasks (format, lint, etc)

Documentation:

• React Ratings: do not handle interaction the same as Svelte (needs onValueChange)
• Segment Control: orientation example should not use item disable
• Segment Control: import button group example at bottom
• Switch: Improve List example (text on left, switch on right)
• Tabs: examples need more variety; too same-y

Framework Components:

• Verify all components have uniform use of data-testid attributes
• Verify consistent use of Svelte @component component comment descriptions
• Ensure Zag-related machine/api logic is co-located under a single // Zag comment (see Ratings)
• Accordion: has hardcoded flex-1 class in template - needs to be move to style prop
• Svelte Accordion: bindable value needs to be provided to context: {} ala Segment Control, etc
• React Accordion: animations not working as expected on panel close
  • Remove the React Framer Motion dependency, which is now covered by Zag
• React Accordion: the disabled prop is non-functional and not visually displayed
• Svelte Switch: bindable props need to be passed to context: {} (ex: checked, disabled, compact)

Post-Release Tasks

• Decide on the use of <figure> for data visualization components
• NEXT: Resolve regressions in the component unit tests #2805
• NEXT: Resolve global focus states for native elements and Zag-based components #2806
• NEXT: Update Svelte/React packages to utilize PNPM Catalogs for version syncing #2807
• NEXT: Improve the default SVG images for the Ratings component #2808
• NEXT: Contributor component documentation should cover Zag.js integration #2809
• NEXT: Implement Zag-based animations for the React Accordion component #2810
• NEXT: Review options for sharing and maintaining common component data between frameworks #2811

Checklist

Please read and apply all contribution requirements.

• Your branch should be prefixed with: docs/, feature/, chore/, bugfix/
• Skeleton v3 contributions must target the next branch (NEVER dev or master)
• 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

Changsets

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: 62adb69

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

This PR includes changesets to release 3 packages

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

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 Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
skeleton-docs	❌ Failed (Inspect)			Aug 13, 2024 5:15pm
skeleton-themes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 13, 2024 5:15pm

[vercel]

@Hugos68 is attempting to deploy a commit to the Skeleton Labs Team on Vercel.

A member of the Team first needs to authorize it.