What's new
Slab 0.1.3
Nine new components, from Menubar to Color Picker, and ranges of days in Calendar.
0.1.3 is Slab's biggest release since the first. It fills in most of what was left of the APG's patterns, with nine new components and a range attribute for Calendar. Each is headless, as ever: the keyboard, focus, ARIA and forms are done, and the look is yours. Every example below is live, and styled the way this site styles them.
0.1.3 isn't on npm yet. This is what's in it, from main,
ahead of the release.
Menubar
A row of Menus, such as File, Edit and View, as in a desktop app. Tab reaches it once, and Left and Right move between the Menus, open or not. Each Menu is a plain slab-menu, unchanged.
Usage
<script type="module">
import 'slab-elements/menubar.js';
</script>
<slab-menubar label="Editor">
<slab-menu label="File">
<button slot="anchor">File</button>
<slab-menu-item>New</slab-menu-item>
<slab-menu-item>Open…</slab-menu-item>
</slab-menu>
<slab-menu label="Edit">
<button slot="anchor">Edit</button>
<slab-menu-item>Undo</slab-menu-item>
<slab-menu-item>Redo</slab-menu-item>
</slab-menu>
</slab-menubar>Context Menu
Menu Items in place of the browser's own menu, opened at the pointer on a right-click, where it was pressed on a long-press, and from the keyboard with Shift+F10 or the Menu key.
Usage
<script type="module">
import 'slab-elements/context-menu.js';
import 'slab-elements/menu.item.js';
</script>
<slab-context-menu label="File">
<div slot="target" tabindex="0">Right-click me</div>
<slab-menu-item>Rename</slab-menu-item>
<slab-menu-item>Duplicate</slab-menu-item>
<slab-menu-item disabled>Delete</slab-menu-item>
</slab-context-menu>Carousel
Slides in a CSS scroll snap container, so swiping and scrolling are the browser's own. Previous, Next and the markers are real buttons, so they work and look the same in every browser, and slides out of view are inert.
Set and braced by 6 a.m. Check the grade stakes before the truck backs in.
38 cubic yards of 4,000 psi, placed from the northeast corner.
Bull float, edge, then a broom finish across the slope.
Keep it wet for seven days before it takes a load.
Usage
<script type="module">
import 'slab-elements/carousel.js';
</script>
<slab-carousel label="Featured">
<figure>…</figure>
<figure>…</figure>
<figure>…</figure>
</slab-carousel>Color Picker
A saturation and brightness area, hue and alpha sliders, a hex field and swatches, all from the keyboard as well as the pointer. The form gets a "#rrggbb", or "#rrggbbaa" with alpha.
Usage
<script type="module">
import 'slab-elements/color-picker.js';
</script>
<slab-color-picker label="Fill" name="fill" value="#3399ff" swatches="#ff0000 #00ff00 #0000ff" alpha></slab-color-picker>Rating
Native radios, one per star, that preview the value under the pointer. With step="0.5", each star is two radios, so the value can be a half.
Usage
<script type="module">
import 'slab-elements/rating.js';
</script>
<slab-rating label="Rating" name="rating" value="3"></slab-rating>Pin Input
A PIN or one-time code as a row of inputs that submits as one value. A pasted or autofilled code is spread across them, with separators like "-" left out.
Usage
<script type="module">
import 'slab-elements/pin-input.js';
</script>
<slab-pin-input label="Verification code" name="code" autocomplete="one-time-code" required></slab-pin-input>Splitter
Two panes and a separator between them that resizes them. Drag it, move it with the arrow keys, or press Enter to collapse the first pane and restore it.
Footing, slab, wall.
4,000 psi, a 4-inch slump, broom finish. Cure for seven days before it takes a load.
Usage
<script type="module">
import 'slab-elements/splitter.js';
</script>
<slab-splitter label="Sidebar" min="15" max="50" value="25">
<nav slot="primary">…</nav>
<main slot="secondary">…</main>
</slab-splitter>Range Slider
Two thumbs on one track for a range, such as a price from and to. They can meet but not pass, and the form gets both values.
Usage
<script type="module">
import 'slab-elements/range-slider.js';
</script>
<slab-range-slider label="Price" name="price" min="0" max="500" start-value="100" end-value="300"></slab-range-slider>Time Field
A native time input with the same API as Date Field. Its value is a 24-hour "hh:mm" whatever clock the browser shows, and a max earlier than min is a range across midnight.
Usage
<script type="module">
import 'slab-elements/time-field.js';
</script>
<slab-time-field label="Start time" name="start" min="09:00" max="17:00" required></slab-time-field>Calendar ranges
Calendar takes range, to pick a range of days rather than one. The first day picked starts it and the second ends it, and value is an ISO 8601 interval, "yyyy-mm-dd/yyyy-mm-dd".
Usage
<script type="module">
import 'slab-elements/calendar.js';
</script>
<slab-calendar range value="2026-03-09/2026-03-13"></slab-calendar>Upgrade
It's a patch release, with nothing to change in what you have.
pnpm add slab-elements@0.1.3