SLAB Design System

Roadmap

Living changelog — bugs, improvements, and new components across all audit rounds. Updated as the system evolves.

14
bugs
fixed
14
improve-
ments
21
components
shipped
5
docs &
guidelines
5
type
definitions
Round 2

Audit — June 2026

✓ Complete

Full system audit: 7 bugs fixed, 6 improvements, 3 type definition updates, docs updated.

7 bugs fixed
Bugs → all resolved
Select.jsx — dropdown mispositions in nested layouts
Root wrapper was missing position: relative. Panel now anchors correctly to its trigger.
Select.jsx
Input.jsx — onFocus/onBlur overridden by {...rest} spread
Destructured both handlers before rest. Focus-lift animation now always fires even when consumer passes their own handlers.
Input.jsx
Tag.jsx — missing onMouseUp handler locks pressed state
After mousedown + release while hovering, the translate(2px,2px) state was stuck until cursor left. Added onMouseUp to snap back.
Tag.jsx
Table.jsx — wrong keyframe comment misled consumers
Comment said to manually copy slab-skeleton-pulse. It's already in animations.css / styles.css. Comment replaced.
Table.jsx
index.html — 3 wrong hex values in token swatches
Blue was #6CA0FF (actual: #6E8AED), coral was #FF5C5C (actual: #FF6B4A), neon was #39FF14 (actual: #2BFF88).
index.html
Modal.jsx — no real focus trap + no body scroll lock
Added Tab/Shift+Tab trap cycling focusable elements. Body overflow: hidden set on open and restored on close. Both effects clean up on unmount.
Modal.jsx
Checkbox.jsx — visual-only span, not keyboard accessible
Replaced click-on-label with a real hidden <input type="checkbox">. Tab + Space now work natively. Screen readers see a proper checkbox role.
Checkbox.jsx
6 improvements
Improvements → all applied
Global :focus-visible outline rules
Added to base.css using --focus-ring-color token. Covers all interactive elements without conflicting with inline box-shadows.
base.css
Dark mode semantic tokens in form components
Input, Switch, Tabs, Select replaced raw --slab-black/--slab-white with semantic aliases (--text-strong, --text-body, --surface-card, --surface-sunken). Dark mode now renders correctly throughout.
Input · Switch · Tabs · Select
Z-index token scale + transition shorthand
Added --z-dropdown: 200, --z-tooltip: 500, --z-modal: 1000, --z-toast: 2000, and --transition-lift shorthand to spacing.css. All four overlay components updated to use them.
spacing.css
Input.jsx — suffix slot added
Mirrors existing prefix prop. Useful for units (px, %, kg), clear buttons, and inline icons. Uses --surface-sunken for correct dark mode rendering.
Input.jsx
Tabs.jsx — lg size added
size="lg" now maps to 11px 22px padding and 17px font. Matches the sm/md/lg pattern of Button and IconButton.
Tabs.jsx
Tooltip arrow geometry corrected
Previous polygon() values produced lopsided off-center triangles. All four placements now use geometrically centered pointing triangles.
Tooltip.jsx
Phase 1

Component improvements

✓ Complete

Polish existing components — missing props, color gaps, API consistency.

8 improvements · existing files
Badge — added teal color
--slab-teal now mapped alongside blue/coral.
Badge.jsx
Avatar — added teal + neon colors
Both palette tokens now in Avatar's color map.
Avatar.jsx
Callout — added violet tone
Covers info/tip state with the primary action color.
Callout.jsx
Switch — added label prop
Now consistent with Checkbox. No more manual wrapper needed.
Switch.jsx
Tabs — added sm / md sizes
sm and md size props added (lg came in Round 2).
Tabs.jsx
Input — split style (wrapper) from inputStyle (inner field)
Width/margin on outer wrapper no longer bleeds into the <input> element itself.
Input.jsx
Focus tokens added to spacing.css
--focus-ring, --focus-ring-offset, --focus-ring-color defined.
spacing.css
Card — shadow="lime" variant documented
Token was already in Card.jsx; type annotation updated to reflect it.
Card.d.ts
Phase 2

High-priority new components

✓ Complete

Critical missing primitives — every real product UI needs these.

Select
✓ Shipped

Custom ink-bordered dropdown. Keyboard nav (↑↓ Enter Esc), disabled options, click-outside close.

components/forms/Select.jsx
Modal / Dialog
✓ Shipped

Ink-bordered overlay. Slam-in animation, real focus trap, body scroll lock, Esc/scrim close. sm/md/lg sizes.

components/ui/Modal.jsx
Toast / Notification
✓ Shipped

Transient feedback stack. success/error/warning/info tones. Auto-dismiss with progress bar. useToast() hook.

components/feedback/Toast.jsx
Tag / Chip
✓ Shipped

Interactive filter chip. Toggleable, removable ×, 7 colors, pill option, slam press.

components/core/Tag.jsx
IconButton
✓ Shipped

Square icon-only button. sm/md/lg, 6 variants, full snap motion. Enforces square constraint.

components/core/IconButton.jsx
Tooltip
✓ Shipped

Ink-bordered hover label. 4 placements with centered arrow geometry. Pure CSS position.

components/ui/Tooltip.jsx
Phase 3

Medium-priority new components

✓ Complete

Enrichment — fits SLAB's bold aesthetic + rounds out common UI patterns.

Progress
✓ Shipped

Ink-bordered track with colored fill. Linear + step variants. Indeterminate shimmer mode.

components/feedback/Progress.jsx
Stat / KPI Card
✓ Shipped

Bold mono number + label + optional trend arrow. SLAB's heavy numerics are purpose-built for this.

components/ui/Stat.jsx
Skeleton
✓ Shipped

Standalone loading placeholder with pulse animation. Configurable width, height, radius.

components/feedback/Skeleton.jsx
Breadcrumb
✓ Shipped

Navigation trail. Mono text, chevron separators, last item in bold ink. Violet hover on links.

components/ui/Breadcrumb.jsx
ThemeToggle
✓ Shipped

Light/dark mode switch. Animated sliding knob, mono label, localStorage persistence. Drop-in for any header.

components/ui/ThemeToggle.jsx
App

Web app — July 2026

✓ Complete

Ported the design system into a real Next.js app at slab.clicker.id — component directory, guideline docs, and live UI kit demos, with the source locked down from public exposure.

Route-group restructure
✓ Shipped

Site chrome (header/footer) scoped to a (site) route group so /ui_kits/* renders full-viewport with no chrome leak, and every other route keeps its exact URL.

app/app/(site)/layout.tsx
Component directory
✓ Shipped

Searchable, filterable directory with 21 live component detail pages rendering the real @slab/components/** source.

/guidelines/components/*
Guideline pages
✓ Shipped

All 9 guideline topics (colors, spacing, typography, motion, dark mode, integrations, forms, tables) ported to real routes.

/guidelines/*
UI kit demos
✓ Shipped

Typography, Todo, Studio, and Studio Mobile ported from Babel-CDN HTML demos into real, dependency-backed Next.js routes with lucide-react icons.

/ui_kits/*
Source-exposure lockdown
✓ Shipped

Removed direct public access to the raw guidelines/**, ui_kits/**, tokens/**, SKILL.md, and README.md source, with redirects so legacy links still resolve.

next.config.js
Production deployment
✓ Shipped

Live on Vercel at slab.clicker.id, backed by a private GitHub repo, with Open Graph / Twitter card metadata for link previews.

slab.clicker.id
Next

Proposed additions

Planned

Highest-value components and improvements not yet built. Prioritised by coverage gap.

Missing form primitives
F1
Textarea
Multi-line text input. Forms have Input, Checkbox, Switch, Select — but nothing for longer text. Critical gap.
forms/Textarea.jsx
F2
Radio / RadioGroup
Single-selection from a set. Fundamental form pattern completely absent.
forms/Radio.jsx
F3
NumberInput
Input with +/− steppers. Common for quantity, price, duration fields.
forms/NumberInput.jsx
High-value UI patterns
U1
Accordion
Expandable/collapsible sections. The most commonly needed pattern not yet in the system.
ui/Accordion.jsx
U2
DropdownMenu
Action menu on button click. Distinct from Select (form value picker) — this is for commands (Edit, Delete, Share…).
ui/DropdownMenu.jsx
U3
Spinner
slab-spin keyframe already exists in animations.css — no component wraps it yet.
feedback/Spinner.jsx
U4
Drawer / Sheet
Slide-in side panel. Natural companion to Modal for mobile and sidebar-style flows.
ui/Drawer.jsx
U5
Banner / Alert
Full-width persistent dismissible page alert. Callout is inline; Toast is transient — nothing fills this role.
feedback/Banner.jsx