npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uswds/web-components

v0.0.1-alpha

Published

> [!CAUTION] > Work on the next version of the Design System is happening in this repo. The code in this repository is not yet ready for production use.

Downloads

208

Readme

[!CAUTION] Work on the next version of the Design System is happening in this repo. The code in this repository is not yet ready for production use.

USWDS Web Components

The United States Web Design System includes a library of open source UI components and a visual style guide for U.S. federal government websites.

This repository is for the code for the next version of the design system. We maintain another repository for the current version of the design system as well as its documentation and website. To see the design system and its documentation on the web, visit https://designsystem.digital.gov.

Over the course of the next several months (and beyond), we will incrementally build the next version of the design system. This version will introduce Web Component-based implementations of design system elements. We intend that, as we ship new components and new versions of existing components, you will be able to use them alongside older versions of USWDS.

Upgrading to Web Components

We are releasing these Web Components incrementally with the intent that they can also be added incrementally to existing sites that are currently using USWDS. If you are not currently using USWDS or you are using a version older than USWDS 3, we recommend adopting version 3 in the near term rather than waiting until the full suite of Web Components is production-ready.

Guiding Principles

Work here will accord with the design system's existing Product Values. However, in the course of building out the next version, we will be discovering and road-testing new values as well.

Open Questions

While this new version is meant to facilitate incremental adoption, the new components themselves represent a big shift in the underlying technologies from previous versions of USWDS. This presents an exciting opportunity to make choices that will help shape future development of the design system, but this will require answering some fundamental questions. Some of the questions we're going to explore in this work are:

  • What is the right amount of tooling If it's a goal to minimize dependencies, how little tooling can the project get away with while still being easy to use?
  • How should components enable customization? How much content should come into components via attributes/props as opposed to slots? How much should components use shadow DOM vs. light DOM? Should components be styled through custom properties in the components themselves or through external stylesheets? If the answer is a mixture of both, what is the right balance between the two approaches?
  • How can we be sure the new components are as accessible as possible? Existing USWDS components use JavaScript to progressively enhance semantic HTML to make them useable to as much of the public as possible. Because web components require JavaScript by default, developing the next version of design system components will require special attention to continuing the progressive enhancement approach.

This is not an exhaustive list, and we expect many more big and small questions to arise over the course of developing these components.