Skeleton Next - Update 12 - Zag Components Implemented

[endigo9740]

Hey everyone, Chris here from Skeleton. In our previous Skeleton v3 progress update we mentioned the pending Zag.js component integration. Today we're excited to share that all existing v3 components now incorporate Zag.js for both Svelte 5 and React iterations!

This was a monumental effort spearheaded by long-time contributor @Hugos68, so please extend your thanks to him for these awesome contributions! Thanks Hugo! 🙏

What's Changed

When you update to the latest v3 packages starting today, you should see a few specific changes. Note that some of these fall under the umbrella of breaking changes:

• New or updated component props and component names
• The addition of a new sub-components (ex: <Tabs.Content>)
• Changes to animations and behavior for select components

While we've done our best to minimize these changes, some could not be avoided. However, this should represent a major milestone towards stabilizing our component APIs. The goal is for the majority of remaining changes will occur behind the scenes. We'll keep you posted if this changes.

Feature Updates

Honestly there's too many to list, but here's a few of our favorites:

• Accordions now support a collapsible prop - allowing you to to close the open panel in multiple mode.
• Avatars now support srcSet (sets of images in various formats) as well as automatic generation of fallback initials
• The Progress Ring indeterminate mode now features a fancy new spinning animation
• The Progress (Bar) component now includes an optional slot for providing an a11y-friendly label
• The Ratings component now features generic star-shaped SVGs by default - no need to supply your own
• The Segment Control now features a slide animation when selecting options, plus group/item disabled states
• The Switch component now includes an optional slot for providing an a11y-friendly label
• Tabs have also been modernized with all recent component improvements

A quick preview of the new animations:

The update to Zag also comes with improved accessibility through automatic ARIA attributes and keyboard interactions. As well as improved internationalization support for RTL (right-to-left) modes. Zag will also allow us to remove the extra Framer Motion dependency for our React components!

Known Issues

Please note there's still a number of known issues that we just couldn't squeeze in to today's update:

• Focus states are currently inconsistent or missing for some components. Expect a global fix for this soon.
• We will be aiming to improve the default Ratings star SVG icons soon - especially the half star state
• React Accordion animations are missing while we migrate from Framer Motion to Zag Presence.
• For contributors:
  • Our component contribution document has not yet been updated to detail Zag.js integration.
  • We have a pending update to to sync and maintain Zag package versions.
  • We've disabled a number of failing unit tests due to regressions. Please bear with us.
  • We are reviewing options to better streamline repetitive component data between frameworks, including component props and Typescript type declarations. Expect more news on this in the future.

Migrating Changes

We've given adequate warning about the early pre-release status of Skeleton v3. However, if you're an early adopter that has opted to forego that, then there will be no better source source of truth than the v3 documentation site. We will, however, be providing limited support in the comments section below and within the #skeleton-next channel on the Skeleton Discord. Please avoid the other Skeleton support channels as those remain limited to Skeleton v2 support.

What's Next?

Today's update represents a huge leap forward for Skeleton v3. We now have a solid foundation and reference for all components going forward. Our next priority will be resolving the known issues listed above, as well as continuing to integrate our addition components listed in the v3 milestones until we reach parity with Skeleton v2.

Feedback and Questions

As always, if you have any questions about today's updates please feel free to reach out in the comment section below or on Discord. We'll be glad to help you!

[kmalloy24]

Awesome work @Hugos68! This looks awesome.

[Hugos68]

Thank you! But it was very much a team effort! Chris is not getting enough credit 😄.

[Extarys]

@endigo9740 Thanks Chris! 😄