next: Svelte 5

[huntabyte]

Keeping track of progress on the rewrite for Svelte 5

Initial Component Implementation ✅

This is our first-pass rough implementation of each of the components. Once we have the full suite complete, we will go back over each to ensure consistency, share/reuse logic wherever possible, etc.

• Accordion
• Alert Dialog
• Aspect Ratio
• Avatar
• Calendar
• Checkbox
• Collapsible
• Combobox
• Context Menu
• Date Field
• Date Range Field
• Date Picker
• Date Range Picker
• Dialog
• Dropdown Menu
• Label
• Link Preview
• Menubar
• Navigation Menu
• Pagination
• Pin Input
• Popover
• Progress
• Radio Group
• Range Calendar
• Scroll Area
• Select
• Separator
• Slider
• Switch
• Tabs
• Toggle
• Toggle Group
• Toolbar
• Tooltip

---

Documentation/Examples

Until now, we've relied on the examples from Melt as examples for Bits. I'd like to have at least a few examples of each component, as well as documentation on usage, customization, styling, etc. for each component.

• Accordion
• Alert Dialog
• Aspect Ratio
• Avatar
• Calendar
• Checkbox
• Collapsible
• Combobox
• Context Menu
• Date Field
• Date Range Field
• Date Picker
• Date Range Picker
• Dialog
• Dropdown Menu
• Label
• Link Preview
• Menubar
• Navigation Menu
• Pagination
• Pin Input
• Popover
• Progress
• Radio Group
• Range Calendar
• Scroll Area
• Select
• Separator
• Slider
• Switch
• Tabs
• Toggle
• Toggle Group
• Toolbar
• Tooltip

Other Tasks

Here are some of the additional things that need to be fixed/addressed prior to next being ready for release.

• Make the component which receives the name prop consistent across the DateField and DateRangeField, DatePicker and DateRangePicker components.
• Determine how to handle validation for the various date and time components. Ideally in a way that those using libraries like sveltekit-superforms and those that aren't can both benefit from.
• Determine the ideal approach for managing the data-<component> attributes.
• Expose the various open states via snippet props for all compoents with the forceMount prop for controlled transitions and animations. Thinking more about this, we don't need to pass it via children, only via the child snippet.
• Handle the invalid state for the DateRangeField component.
• Determine how we can give users the ability to opt-out of Floating UI styles.
• Now that Select is more similar to a native <select> element and doesn't have a multiple prop, we need to come up with a solution/component for MultiSelect or just Select without the underlying <select> element and behavior. I want to have a separate Listbox component that doesn't have to be within a "popover-like" component and can just be static on the page. 🤔

Closes: #568 #563 #556 #546 #453 #537 #383 #459 #444 #426 #424 #423 #413 #315 #337 #235 #293 #254 #566 #563 #527 #602 #611 #609 #567 #656 #662 #655 #665 #528

[changeset-bot]

⚠️ No Changeset found

Latest commit: a37ff8c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
bits-ui	✅ Ready (View Log)	Visit Preview	a37ff8c

[pkg-pr-new]

commit: a37ff8c

pnpm add https://pkg.pr.new/bits-ui@469

Open in Stackblitz