Navigation
Period picker
Arrows that step through weeks, months or your own list, with the label sliding in from the direction of the click.
Example
<div data-u="period"></div>
<div data-u="period" data-u-props='{"mode": "month"}'></div>
<div data-u="period" data-u-props='{"items": ["Q1", "Q2", "Q3"], "index": 1, "label": "Quarter"}'></div>Installation
Period picker ships in the full package, in unslop.css and unslop.js:
curl -fsSL unslop.leallabs.dev/i | shA ready-made block that uses period picker:
curl -fsSL unslop.leallabs.dev/i | sh -s add wall-alertsNo build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.
Props
They go in data-u-props, as JSON.
| Prop | Type | Default | What it does |
|---|---|---|---|
mode | string | weeks | "month" lists the 12 months and opens on June. Without mode, it's 14 weeks starting in June 2026. |
items | array | no default | Your own list of labels. Takes priority over mode. |
index | number | no default | Starting position. |
label | string | Period | Group name (aria-label). |
Accessibility and keyboard
State and roles
| Where | Attribute | What it says |
|---|---|---|
| host | role="group", aria-label | Set by the JS. |
| arrows | aria-label, aria-disabled | "Previous period" and "Next period". At the end of the list, the arrow gets aria-disabled="true". |
| label | aria-live="polite" | Screen readers announce the new period. |
Keyboard
| Key | Does |
|---|---|
| Tab | focuses the arrows |
| Enter or Space | moves one period |
Events and API
| Event | detail | When |
|---|---|---|
u:change | { index, label } | On every period change. Bars in the same card listen and swap the series. |
Every event bubbles up the page. Listen on the element itself: el.addEventListener("u:change", (e) => e.detail).
el._u.index reads the current position.