grail-ui / grail-ui

A library of accessible component primitives, actions and utilities for Svelte.

Grail UI

Grail UI offers a set of component primitives, actions and utilities that help you build accessible and high quality Svelte applications faster, while providing a great developer experience. You can use it as the base of your design system and your component library, or adopt it incrementally inside your application.

🎪 Usage & Demo

For documentation and interactive demos, visit https://grail-ui.vercel.app

✨Features

• Accessible
• Composable
• Unstyled
• Uncontrolled
• Tiny
• Tree shakeable
• Fully typed
• SSR Friendly
• Performant

🏆 Vision

This project has one primary goal:

Provide high-quality tools that help Svelte developers build robust applications as fast and as easy as possible, with accessibility support.

What defines "high-quality"?

• Straightforward & consistent APIs that don't confuse developers.
• Behave as expected across a wide variety of use-cases without bugs.
• Well-tested behavior with both unit and integration tests.
• Performance cost is minimized.
• Clean and well-documented code that can be used as learning material.
• Fully customizable and configurable.

🧱 Contributing

We are always looking for quality contributions! Please check our Contributing Guide for guidelines.

🙏 Thanks

This project is heavily inspired by the following awesome projects.

• React Aria
• Radix
• VueUse
• Zag
• Angular CDK

📄 License

Licensed under the MIT License, Copyright© 2022-present

grail-ui's Issues

Adding extra examples on Menu Component

Id like to add some extra examples to the menu page like how to close the menu

Menu Component Keyboard Selection Issue

When the list items of a menu component contain anchor tags, and the menu item attributes are given to the anchor tags, just like the example in the official documentation, menu items are selectable with the keyboard.

However, when this pattern is not followed, keyboard selection stops working.

For example, in this repro there are no anchor tags, the menu item attributes are on the list item tags.
https://stackblitz.com/edit/zfttmz?file=src%2Froutes%2F%2Bpage.svelte

Support property ordering in docs API section

We need to group together similar props (eg utils, actions, attrs, callbacks).

Error installing grail-ui with Svelte 4

Hi

I have errors when installing @grail-ui/svelte from a project using Svelte 4.

$ npm i -D @grail-ui/svelte
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.2.8" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"3.x" from @grail-ui/[email protected]
npm ERR! node_modules/@grail-ui/svelte
npm ERR!   dev @grail-ui/svelte@"^0.11.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/cbenz/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/cbenz/.npm/_logs/2023-12-08T15_01_11_289Z-debug-0.log

However if I add the --force flag I can install it and use grail-ui without any trouble because it seems compatible with Svelte 4 as-is.

This is due to this line:

grail-ui/packages/grail-ui/package.json

Line 57 in 100d79b

"svelte": "3.x"

Would it be possible to relax the constraint like other projects do? cf example

---

PS: meanwhile I could solve this more elegantly than with --force by adding into the package.json of my project:

	"overrides": {
		"@grail-ui/svelte": {
		  "svelte": "^4.0.0"
		}
	},

Pagination is highlighting multiple pages in the documentation

I noticed that in the documentation when clicking on pages, it sometimes highlights multiple pages.

Example image:

Docs preferences are not respected

Although selected theme & packageManager stored in preferences cookie are respected locally when running the docs, this is not working as expected in https://grail-ui.vercel.app/.

Nested Menu?

Is it possible to implement nested menus?

I am running into the issue that the click on the nested menu closes the first menu before the click action can do anything. Is there any simple workaround for that?

[Feature Request] Tabs need ability to Load on Demand

The Grail-UI project looks like a pretty cool project. I was looking at your Tab-UI stuff because I currently maintain my own tab ui library, but it would be nice if it was something I could eliminate because of better library.

However, the Grail-UI Tabs component loads all tab content by default. This is very much a massive performance issue when you have complex data in each tab.

Screen shot from the GradleUI site showing all the content loaded by default...

I use tabs in my Launcher.

In my launcher, the Marketplace and Fab tabs, are both very heavy web pages. The assets tab is over 600 images in a grid. Not to mention the other tabs. If all that is loading when the main page is instantiated, it makes the app very sluggish on startup. In my Tab code, I added code to allow tabs to be loaded on demand. So when you click those tabs, the content is then loaded and then added to the DOM. Small tabs I let default to being added at runtime, but heavy tab's I tag as load-on-demand.

Adding an icon to a menu item makes onSelect stop working

To create the repro I forked the example at https://grail-ui.vercel.app/svelte/menu and changed

<li><a href="/" {...$itemAttrs('edit')}>Edit</a></li>

to

<li><a href="/" {...$itemAttrs('edit')}><span>icon</span>Edit</a></li>

Repro: https://stackblitz.com/edit/angular-lzm7r6?file=src/routes/+page.svelte

Repro steps

1. Open the stack blitz
2. Click "Menu"
3. Click on "icon" in the Edit menu item.

Expected
onSelected is called and an alert is shown.

Actual
Nothing happens.

It looks like onSelect only fires if the click event happens directly on the button or anchor. If you include any other elements in the button content, or wrap the content in a span, the click event is ignored.

New Component: Select

While it's possible to use the Menu as a select, a true Select component should adhere to the ListBox WAI-ARIA design pattern.

From looking at the source code, most of the code from the Menu could be reused with some slight modifications of the aria attributes, roles, etc.

I'm no expert in accessible component design, but I'm willing to take a shot at an initial implementation of this, as I intend on using some of the incredible work you all have done here as the primitives for some of the shadcn-svelte components.