hs-*
Elements
Additive. You never have to reach for one. Where the platform already solves a problem, the component wraps it rather than reimplementing it.
<hs-card>
Container-query padding on top of a styled article.
<hs-badge>
Inline status mark. Same as .badge.
<hs-alert>
Looks like .alert before JS; dismissal is the upgrade.
<hs-toast>
Transient sibling of alert. Lives in hs-toast-region.
<hs-field>
Wires label, hint, and the browser’s own validationMessage.
<hs-copy>
A real button plus the Clipboard API.
<hs-dialog>
A real <dialog>: top layer, backdrop, focus trap, Escape.
<hs-accordion>
Coordinates real <details> with exclusive grouping.
<hs-theme-toggle>
A real button that flips color-scheme.
<hs-tooltip>
aria-describedby cannot cross shadow, so the bubble stays light.
<hs-sortable>
Enhances a real <table>. Without JS it is still a table.
<hs-tabs>
No platform widget. Roving tabindex and ARIA from the panels.
<hs-toggle>
No cross-browser switch. Form-associated via ElementInternals.
<hs-combobox>
Not a <select>. Filtering a long list by typing.
<hs-menu>
<menu> is a list, not a widget. Popover + commands.
Invoice Due
CSS-only card. Container queries, not viewport media.
Same tokens on <p> and <hs-combobox>.
A platform dialog
Top layer, backdrop, focus trap, Escape. <form method="dialog"> still closes it.
What if JavaScript is off?
Light-DOM elements look right before they upgrade.
Do I need a class?
No. Tags are styled. Classes are opt-in atoms and variants.
| Name | Size |
|---|---|
| Report | 12 |
| Archive | 128 |
| Notes | 3 |
Full attributes, events, and parts: the README and custom-elements.json on this site. Use these tokens on markup you invented → · Wire the manifest into an agent →