The tailwind prettier plugin embeds the svelte prettier plugin and mainly does class re-ordering within strings. I've done a dry run locally and the changes are not that drastic at all (mainly affecting doc pages) and I think there is benefit to having things like all base classes appearing in the string before breakpoint variants of the classes and uniformity across the code base.

Instead of pushing a PR to see the changes, you can just do:

npm remove prettier-plugin-svelte
npm i -D prettier prettier-plugin-tailwindcss
npm run format

And preview the changes in the Source Control panel.

For example, when the menu is very close to the bottom of the page and there is not enough space to display the content, the menu origin should change from "tl" to "bl".

Chakra UI:

Skeleton:

Per @niktek's suggestion, we need a branch between master and feature branches. This will allow hotpatching on master if we need it. We start simple and build up. Something like:

• master - as is, we'll build/package on update. Manual for now, automated later with CI/CD.
• dev (or staging) - we introduce this as the proceeding branch. I don't think we need both yet.

General idea is dev will serve as our merge target. All PRs, etc target this. Updates from dev are merged into master when we're ready to deploy to production. We won't get any more complex than this until we need to.

This will come with updated guidance on the README and Contribution guidelines.

I welcome feedback on this, but expect it to appear tomorrow (US/CST time)

@niktek @thomasbjespersen and I discussed this on Discord.

General idea is we now have our Vitest configuration up to date, we have tests applied to every existing component, and we've improved the quality of these. However, we need to go a bit further to ensure we have an adequate number of quality of test cases per component. This will make it easier to introduce new features, handle refactors, and of course improve general QA testing.

@niktek has volunteered to aid with this, so please claim the ticket when you can sir! I can provide an in-depth overview of how the tests are implemented and working.

Notable changes may include:

• Ensure every component includes at least some rudimentary tests.
• Help update the Contributor guide to provide our requirements for testing newly introduced components
• Let's review what currently available test cases are providing value, and which are not

With the ultimate goal of ensuring we have a set of simple and robust test cases that are not too rigid. Some component design and features are still in flux, so tests that are too strict may not be helpful.

I'm a huge fan of Vitest's version of this concept:
https://vitest.dev/guide/comparisons.html

I'd love to introduce a similar doc to Skeleton, as we've had similar questions come up in the past. Like "how does Skeleton stack up to library X or Y?".

Here's my first draft:
https://docs.google.com/document/d/1yI7kIxnJzPpMdGTConB2Y97GkTfKQThrKggdyqNC03c/edit#

I'm currently comparing to other a small set of framework-specific or Tailwind-based libraries, which aligns with where we reside more than the big alts like Material Design or Tailwind. However, if you think I've missed something important please let me know! I just don't want this to be too long.

I'll look to implement this in the near future, so copy reviews and updates are welcome. Feel free to request direct access to the doc if you wish to make changes!

src/lib/button card and divider have lower case folder names, which cause an issue in src/lib/index.js imports and is probably why the @ts-nocheck was applied. Just need to capitalise the folder names and remove the ts-nocheck.

The following need to included as exports in /src/lib/index.js

// Dialog Types
import { type DialogAlert, type DialogConfirm, type DialogPrompt } from '@brainandbones/skeleton';

// Toast Types
import { type Toast } from '@brainandbones/skeleton';

This does not match the expectations provided in the current documentation instructions.

The theme generation form leaves a lot to be desired on the Themes section of the documentation site:
https://skeleton.brainandbonesllc.com/guides/themes

Consider updating it to operate more like the following tools:

• https://tailwindcolorgenerator.com/
• https://tailwind.simeongriggs.dev/blue/3B82F6

NOTE: Suggested by user "keeplearning" on the Svelte Discord (link)

I did a dry run through and it went really smoothly. Notes:

Must upgrade to SK version 405 pnpm i @sveltejs/[email protected]
Then npx svelte-migrate routes which will transform all the pages under routes/
Unpin 405 in package.json and upgrade to 408

Everything works, even the data tables demo pages.
However, it clearly renames all of the files under routes - so creating a PR for this, even if it was based off the a11y branch is not going to be a nice merge. This would also be a good time to start looking at release/* branches to merge multiple feature branches into without jeopardising master in case of a hot fix release being needed.

Per Roadmap > Documentation > SEO

Make some minor modifications to the HTML <head> element to include the following:
https://www.link-assistant.com/news/html-tags-for-seo.html

• Title - more descriptive
• Meta Description
• Meta Keywords
• Meta Theme Color (because why not)
• Open Graph Tags (reference)
  • Title
  • Description
  • Type
  • (more later)

Currently we use a mix of +/- 10% brightness for a lot of hover states (ex: Buttons, etc). The standard for most libraries is to increase brightness on hover state, so we'll aim for that to be our new default. Of course this can typically be overwritten and changed on a per-component basis using the props/TW styles. But consistent defaults would be nice!

Hi,

Maybe I'm doing something really wrong but if I have something simple like:

<Button
  disabled={!enabled}
  type="submit"
  variant="filled-primary"
  class="inline-flex ml-3">
    Save
</Button>

And I change the enabled variable value from true to false, I lose all the Skeleton styling and only the 'class' values are used for styling.

If can't reproduce let me know a decent website I can post an example to and happily will.

Card with href tag is not generating an anchor object in the final page

An example for the href value passed is provided in the last screenshot

When opening or closing a menu, an empty style tag is added to the head.

STR:

1. Open Dev Tools and select Elements (or click on page-> Inspect)
2. Go to the Menu docs and open/close a menu
3. Inspect the head in dev tools

Hello,

I am currently working on a template using Webpack Encore with Svelte. After following the installation instructions, I encountered a few issues when trying to run Webpack. I also found #68 and the errors seem to be the same for the most part ($app/env and $app/stores).

Here are the errors encountered when running Webpack :

Module build failed: Module not found:
"./node_modules/@brainandbones/skeleton/LightSwitch/LightSwitch.svelte" contains a reference to the file "$app/env".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@brainandbones/skeleton/Menu/Menu.svelte" contains a reference to the file "$app/stores".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@brainandbones/skeleton/index.js" contains a reference to the file "./Filters/filter".
This file can not be found, please check it for typos or update it if the file got moved.

"./node_modules/@brainandbones/skeleton/index.js" contains a reference to the file "./Notifications/Stores".
This file can not be found, please check it for typos or update it if the file got moved.

Also worth mentioning that Tailwindcss works fine on its own. This is certainly not a priority but I thought I'd share the errors I encountered to help with non-SvelteKit apps.

Safari seems to be the main culprit here:

The LHS menu of the docs site, none of the ListItems are available to tab navigation - Safari only.

Looking at the /routes/components/lists/ page, clicking an item and then trying to shift tab to go up the list does not work in Safari

On the same page - tabbing to a new item and then pressing space or enter does not highlight the ListItem in FF, Chrome, Safari due to elemItem being null - line 48 in ListItem.svelte

https://vitest.dev/

Vitest has made great progress and updated quite a bit since we originally configured and added it to the project back in February. However, our configuration has remain mostly static during that time. I'm going to review and see if there's some general improvements to be made to better optimize our use of this.

The current design:

Proposed design:

The current Discord link has expired (sorry!) This includes the follow locations:

• Docs site > homepage
• README > badge
• README > text link

It needs to be replaced with the following perma-link:
https://discord.gg/EXqV7W8MtY

Updated the scope of this ticket to track the progress of documenting instruction and issues when utilizing Skeleton within a Vite/Svelte project.

NOTE: This was originally reported by @JensPfeifle

npm install highlight.js --save-dev as suggested in the docs didn't fix the HighlightJS issue for me. This is with npm/Vite/Svelte and Skeleton v0.30.7.

https://astro.build/

Astro has support for Svelte components. As part of our on-going effort to decouple Skeleton from SvelteKit I think it's a prime candidate for this effort. Plus it recently hit v1.0, which means there's a lot of new eyeballs on the framework which could help garner more attention for Skeleton.

I'll begin the process of testing and documenting the steps to implement and use Skeleton within an Astro project here. But welcome help in testing this.

Basic requirements:

• Determine best instructions for scaffolding a base project
• Determine any required config to enable Svelte components
• Determine the best manner to setup Tailwind (svelte-add won't be available)
• Identify equivalent files to SvelteKit's __layout.svelte (root element) and app.css (global stylesheet)

The aim is to improve overall accessibility across all component. This will be an on-going process that may be subdivided in to multiple parts.

ARIA reference

A11y Tooling

Highly recommend this video showcasing each of the following tools.

• axe DevTools
• Web Disability Simulator
• taba11y

Part 1 (components)

The following suggestions were provided by user "Tropical" on the Svelte Discord

Accordions

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

• Convert to use <details> and <summary>
• Support tab focus
• Provide keyboard interaction
• ARIA

NOTES:
- Animation not well supported with the <details> content region, so no animations for now
- Both slot ids have been updated to match the semantic names of their wrapping elements
- ARIA require unique ids, so we're generating these automatically, but can be overwritten on-demand

Buttons

https://www.w3.org/WAI/ARIA/apg/patterns/button/

• Support tab focus
• ARIA

NOTE: these updates are available to all components that embed a Button component

List

https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

• Support tab focus
• Provide keyboard interaction
• ARIA

NOTES:
- ListGroup/ListItem have been completely rebuilt to better support a11y
- NavItem component has been removed, replace with ListItem
- List docs are updated to reflect all changes

Menus

https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
https://www.w3.org/WAI/ARIA/apg/patterns/menu/

• Support tab focus
• Provide keyboard interaction
• ARIA

NOTE: most Menu improvements are derived from the updates to the List/ListItem components

Radio Groups

https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/

• Support tab focus
• Provide keyboard interaction
• ARIA

Slide Toggles

https://www.w3.org/WAI/ARIA/apg/patterns/switch/

• Support tab focus
• Provide keyboard interaction
• ARIA

Tabs

https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

• Support tab focus
• Provide keyboard interaction
• ARIA

NOTE: users must provide their own 'tabpanel'.

All of the testing I have been doing so far was based on forking and working in the skeleton repo itself, not using it in a brand new project.

When creating a new svelte-kit project as per the getting started guide, as soon as you import a component (e.g. Card), it will complain that it is not able to resolve highlight.js for CodeBlock, which makes sense as in the skeleton repo highlight.js is listed as a dev dependency. Either docs need to be updated to tell end users to install it npm I highlight.js, which does fix the issue, or it is added as a non dev dependancy to Skeleton UI.

http://localhost:5173/components/badges

Expand Skeleton's support and instruction for any framework where Svelte and Tailwind can be used. Including, but not limited to:

• Vite - via #83 - works with v0.32.19+
• Astro - via #93 - works with v0.32.19+
• Routify - (coming soon)
• Client-side only or Micro-Framewoks:
  • Symphony for PHP - via #85 (need more testing on this)
  • (Django/Flask for Python, ..., others?)
• (welcoming other suggestions here)

Evaluate different conventions to use to better organize component and documentation SVG icons.

See my comment here talking about this in greater detail:
#118

These include but are not limited to the following:

• windi
• unocss

General idea is some folks choose to use these in favor of Tailwind. We've had a handful of questions or requests for support of these. So the first step is to review what can be done, document hurdles to overcome, then discuss adjustments that would allow for these to run.

See @niktek message regarding progression on Windi:
#79 (comment)

Known issues can be documented below:

• The Skeleton's Tailwind-specific plugin would have to be replaced
• (will expand this as we investigate further)

Reported on Reddit here:
https://www.reddit.com/r/sveltejs/comments/wmnkoi/comment/ik1a8va/?utm_source=share&utm_medium=web2x&context=

I've reproduced the issue in the iOS simulator here. Most likely a missing overflow:hidden style! Note it only occurs for avatars using an image source as shown:

NOTE: moving this here to track progress

For reference - highlightjs/highlight.js#3527 there is a screen grab showing the exact error we get.

I've also gone ahead and asked them for any advice highlightjs/highlight.js#3597

Originally posted by @niktek in #83 (comment)

The old default port for SvelteKit's dev server was specified as 3000:

"scripts": {
    "dev": "vite dev --port 3000",
}

However, in new SvelteKit projects the port is no longer provided, meaning it uses Vite's default of 5173

"scripts": {
    "dev": "vite dev",
 }

You can then open the local dev site at:

http://localhost:5173/

I don't believe we document the port anywhere, so this should just be a small one-line change!

Looks like we have at least one or two missing exports in /lib/index.js, per: #102

So far the only component I know needs to be added is:

• Step - a child component for the Stepper component

Please do not add or modify the following:

• NavItem - reported missing, but it's being dropped in the next release
• CodeBlock - is being removed in the next release.
• ConicGradient -a work in progress, not ready for end users
• ThemeGenerator - this is only for use in the Docs.

If you're unsure of any others just let me know. I'll clarify asap!

Currently the value for RadioGroup components has to be passed in and retrieved using a writable store.
It would be nice if you could bind to the value the same way you can with native input elements.

This would have two advantages:

1. It would match the way you work with values when using native input elements
2. It would be more convenient and flexible, especially when you want to bind to a value which is nested inside some larger data object.

As reported here, we're well overdue for a linting pass: #67

I'd advise we handle this immediately following completion and merge of the a11y branch per this ticket: #41

I'm anticipating this to be a lot of small issues (missing semicolon, etc.), so general process should go something like this

• Create the branch following convention (ex: bugfix/linting)
• Run the Prettier lint command npm run lint
• Address each issue provided one-by-one
• Run automated test via Vitest to check for regressions npm run test
• Do a manual pass through the project to check for regressions

Contact either @thomasbjespersen or myself if you have questions or need assistance

In the future we'll look to make this a regular process and/or automate with a CI/CD pipeline.

The Button component currently supports "href" which works very well, but not the target attribute to specify "_blank" for a new tab.
for me, this leads to issues with wrapping the button with "a" crashing any browser I try it on (I have absolutely no idea why) or the inner "a" value having a very small "hitbox" to click on.

My specific use case here is a chrome extension written in SvelteKit, I will poke around your source and see if I can contribute to a fix

<Button
	background="bg-primary-500"
	class="grow"
	color="text-white"
	href={`vscode://DeepLinkingWorksFine`}
>
	Open in Visual Studio Code
</Button>
<Button
	background="bg-primary-500"
	class="grow"
	color="text-white"
	href={`/RouteLinksWorkFine`}
>
	Open Different SvelteKit Route
</Button>
<Button
	background="bg-primary-500"
	class="grow"
	color="text-white"
	href={`https://github.com/LukeHagar/ExternalLinksInNewTabsDoNotWork`}
    target="_blank"
>
	Open Site URL in New Tab
</Button>

Writable store are no longer needed for the accordion, so the whole Typescript code block shown can be removed from the docs page:

CodeBlock's use of Highlight.js is causing a number of issues. For reference, see the following:

• #68
• #83
• #85
• See also this Discord thread

Given the number of issues reported I'm going to go ahead and disable and remove access to the CodeBlock component for the next slated release. If you're using this component in your project, please make considerations to move away from this for now. We will, however, bring it back in the future - though please note it may operate differently, may require you to install extra dependencies, etc.

Sorry for the trouble on this, but I will aim to bring this back asap! If you need help implementing a replacement, please see the #support channel on our Discord. I can provide some guidance:
https://discord.gg/EXqV7W8MtY

Thanks for your understanding.

Currently working on a new logo design for branding. I may revise this over time, but this is a good start!

.

Just a quick heads up:

When running npm run test, Avatar, Button and Alert had issues with @testing-library/dom not being present - needs to be added to the package.json

npm run lint is currently showing issues in 141 files - just want to check what's going on here.

Cheers,
Nik

Can we add a convention of using branches named chore/* for things like update of packages/linting/etc ?

Also, just want to flag that there are same major semver updates available to packages like the eslint and svelte eslint plugins that could have ramifications for the options available to us on #70

Although I've done a pnpm upgrade and it all runs fine - I just want to check in with regards to how npm update --save is meant to work, because it doesn't upgrade svelte-kit to .405 or the adaptors to their latest versions either.

Improvements:

• Review and improve tests and test coverage for all existing test
• Add tests to components that currently do not include them.
• Resolve the warnings for certain components without required props
• Improve the test name descriptions
• Ensure we have with/without prop test cases bare minimum
• Improved a number of tests (not all)

The Skeleton documentation has been using the <CodeBlock> component internally for a white. I believe it's adequately mature now. Let's go ahead and document this and make available as part of the library.

This will include the following changes:

• Add Utilities > Code Blocks to the Skeleton docs navigation
• Minor updates to the CodeBlock documentation, including instructions for setting up Highlight.js
• Add the CodeBlock component to the package exports in /lib/index.js

If we add class as a prop for any component then it won't be included restProps. See #45 for more details.

This should be a test that is applied to all applicable components.

There is a new option now for npm create svelte@next that adds a library project type.

I've done a diff on the two project structures and the main things we should look at are:

package.json:
"build": "svelte-kit sync && svelte-package" which presumably ensures that the types are properly generated before the packaging is done.

tsconfig.json
"moduleResolution": "NodeNext" under compilerOptions.

I've done a test of these settings in Skeleton and there doesn't seem to be any issues at first glance.

The current release of Skeleton provides support for tab focus, keyboard shortcuts, semantic elements, and of course implements changes to support the ARAI spec per each component.

That said, we still have several items to address in regards to a11y support. The the next major update should include further refinement and support for visual impairments. This includes but is not limited to:

• Support for color blindness
• Support for low visibility or visual impaired users
• Improve color contrast support - note this may involve introducing new and dedicated themes

We should consider making suggestions for tools dedicated to testing. These can include:

• axe DevTools
• Web Disability Simulator

Finally, this will be a bit less of a concrete fix, as color values are completely in control of the users generating the theme. We may want to make considerations for improving a11y support for our theme, or creating separate/dedicated themes specifically built with a11y in mind. Likewise we should update documentation or provide recommendations for a11y (ex: "be mindful of color contrast radio when overriding color values", etc)

Update

Great find for a11y color generation and testing here:
https://stephaniewalter.design/blog/color-accessibility-tools-resources-to-design-inclusive-products/

Dark Theme recommendations:
https://twitter.com/vitalyf/status/1564607043406815233

Leonardo:
https://leonardocolor.io/

Current users are required to do the following:

• Go to the docs site
• Navigate to the Themes section
• Tap on an preset theme, or generate their own
• Copy the CSS there
• Create a new themes.css locally within their project
• Import the theme into the root of their project, alongside app.post.css

We would dramatically improve this part of the process be embedding the theses into the /lib directory. This will mean they get packaged and distributed as part of the package. Then can then just import the CSS like many other packages do.

Likewise, we should make considerations for other CSS files to be included as well, such as our canned global styles.

I want to note as well since its the item that failed at the top, that TabGroup doesn't work with a manually specified class prop for me at all

Originally posted by @LukeHagar in #127 (comment)

Setup new social channels to extend interaction with the community beyond Github. This will initially include:

• Twitter: to track news, updates, and releases. As well as provide a means for the team to retweet community efforts
• Discord: This will house all passive and real time communication between contributors. This will include discussion, support, and other channels, which may expand over time.

Open to other options in the future, but aiming to keep this small. We're a small team and don't want moderation to overwhelm us!

The Step component gives the below error:

`<Step> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: <Step> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at Module.validate_component (/node_modules/svelte/internal/index.mjs:1747:15)
    at Object.default (/src/routes/+page.svelte:189:37)
    at Stepper.svelte:20:49
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at eval (/src/routes/+page.svelte:187:86)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at Object.default (root.svelte:44:39)
    at eval (/src/routes/+layout.svelte:13:47)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at root.svelte:38:37`

Is there a way to SSR this? Below is the package.json:

{
	"name": "sveltekit-skeleton-demo",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"package": "svelte-kit package",
		"preview": "vite preview",
		"check": "svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
		"format": "prettier --write --plugin-search-dir=. ."
	},
	"devDependencies": {
		"@brainandbones/skeleton": "^0.30.7",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"@tailwindcss/aspect-ratio": "^0.4.0",
		"@tailwindcss/forms": "^0.5.2",
		"@tailwindcss/line-clamp": "^0.4.0",
		"@tailwindcss/typography": "^0.5.4",
		"@types/cookie": "^0.5.1",
		"@typescript-eslint/eslint-plugin": "^5.27.0",
		"@typescript-eslint/parser": "^5.27.0",
		"autoprefixer": "^10.4.7",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"postcss": "^8.4.14",
		"postcss-load-config": "^4.0.1",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.46.0",
		"svelte-check": "^2.7.1",
		"svelte-preprocess": "^4.10.7",
		"tailwindcss": "^3.1.5",
		"tslib": "^2.3.1",
		"typescript": "^4.7.4",
		"vite": "^3.0.0"
	},
	"type": "module",
	"dependencies": {
		"@fontsource/fira-mono": "^4.5.0",
		"cookie": "^0.4.1"
	}
}

The import { Step } from '@brainandbones/skeleton' gives error, so I manually added NavItem component to /node_modules/@brainandbones/skeleton/index.d.ts.

The import { NavItem } from '@brainandbones/skeleton' also gives error, added it manually to both index.js and index.d.ts in /node_modules/@brainandbones/skeleton/.

See the screenshots below. Will need to research the issue, but most tests are failing.

This is 100% a @sveltejs/package issue. Setting up on a new laptop:

pnpm i

Running postinstall script, failed in 145ms
.../node_modules/@sveltejs/kit postinstall$ node svelte-kit.js sync
│ > config.kit.package has been removed — use @sveltejs/package instead

Removing the package key in svelte.config.js (which we used to prevent the tests from being packaged and conflicting with the testing commands) does make it work again. However their documentation hasn't changed yet in terms of where we now add the config to exclude these files. Doesn't seem to affect npm installs afaics.