Fikir CSS — Component Playground

✦ M2 New Surfaces

Components and patterns added in the M2 milestone.

Segmented Control

List

Grid

Board

Toast Variants

Table States

No results found

Settings Panel experimental

General

Workspace nameDisplay name for your workspace.

Public accessAllow public discovery.

Toast Variants supported

Tone variants (inline preview)

Saved successfully

Your changes have been persisted.

Update available

A new version is ready to install.

Quota at 90%

Upgrade soon to avoid service limits.

Request failed

Check your connection and try again.

Live toast trigger

Toasts appear in the bottom-right corner.

Skeleton Presets supported

Form skeleton

Table skeleton

Card skeleton

Table Empty / Loading / Error States supported

Empty state

No projects yet

Loading state (table[data-loading])

Name	Status
Project Alpha	Active

Loading…

Error state

Failed to load data

Input Augmentation supported

Search Box

Inline search with attached action button.

Combobox

Filterable select with keyboard navigation. Use data-active on highlighted option, aria-selected on chosen value.

Autocomplete

Free-text input with inline suggestion list. aria-autocomplete="list" on the input; data-active tracks keyboard focus in the list.

Command Palette

Modal command launcher. Trigger with ⌘K. data-active tracks highlighted item.

Starter Templates & Example Pages

Starter templates

Copy-paste starting points for common app patterns.

App Shell Starter ↗ Settings Page Starter ↗ Data Workflow Starter ↗

Example pages

Getting started Form validation App shell Data display Dashboard Settings Settings workflow Tree table workflow Result & status Toast examples

1) Component Surface

Button

Input + Textarea + Select

Focusable input with semantic defaults.

Badge + Alert

Neutral Primary Danger

Action required

Your billing profile needs verification.

Core Extensions

Primary link Muted link Danger link

2) Layout Primitives

`stack` in a settings form

Name Email

`cluster` in an action toolbar

12 selected

`sidebar` for dashboard split

`container` + `center` + `grid` composition

Card A

Card B

Card C

Card D

`switcher` refinement with fixed card width

Overview

Billing

Security

3) Utility vs Semantic Override (3 examples)

Example C: Input radius

`input` vs `rounded-lg`

4) Light / Dark Theme Preview

5) Recipe Resolver Usage Snapshot

Source: `packages/recipes/button.ts` -> generated resolver output.

Rendered with resolver output

6) Input Validation Surface

`aria-invalid="true"` + `aria-invalid:ring-danger` birlikte kullanılır; disabled ve readonly görünümü ayrıdır.

7) Card Composition Surface

Plan: Team

Composition spacing is handled by `data-card-layout="stack"`.

Footer separator is handled by `data-card-slot="footer"` rule.

8) Choice Controls + Range + OTP

Auto-sync

Switch visual, checkbox semantics.

Volume

Range slider canonical surface.

OTP / Pin Input

Four-slot OTP composition with semantic slot surface.

9) Input Group Surface

Username

Prefix addon + input composition.

Price

USD

Price değeri zorunludur.

9.1) Number Input Surface

Quantity

Canonical number input composition with optional step controls.

Quota

Value must be between 0 and 100.

10) Modal Surface

Modal uses `data-open` state and semantic dialog attributes.

11) Toast Surface

Toast items use `data-open` and live region semantics.

12) Tooltip Surface

Tooltip state uses `data-open` and `aria-describedby` relation.

13) Popover Surface

Popover uses `data-open` with `aria-expanded` and `aria-controls` on trigger.

14) Dropdown Menu Surface

Dropdown menu uses `data-open` with trigger-controlled `aria-expanded` state.

14.1) Context Menu + Progress + Loading Overlay

Overlay extensions: context actions, progress feedback and in-place loading mask.

Sync progress: 68%

Quarterly report is being prepared.

Rows are temporarily locked during sync.

Loading report...

15) Drawer Surface

Drawer uses `data-open` state and dialog semantics on side panel.

16) Tabs Surface

Tabs use `data-active` on triggers/panels with one active panel at a time.

Profile settings and personal details.

Billing methods and invoice preferences.

Password, sessions and 2FA controls.

17) Accordion Surface

Accordion item open state is represented with `data-open` on each item.

Manage language, timezone and notification defaults.

Manage visibility and data sharing options.

18) Pagination Surface

Pagination uses semantic links/buttons; current page is marked with `aria-current`.

19) Breadcrumb Surface

Breadcrumb uses semantic nav/list markup with `aria-current` on current node.

20) Navbar Surface

Navbar surface combines brand area and navigation items.

20.1) Menu Bar Surface

Menu bar uses `data-open` on each item for disclosure content.

21) Sidebar Navigation Surface

Sidebar navigation uses `sidebar-nav` namespace to avoid layout `.sidebar` conflict.

22) Stepper Surface

Stepper uses `data-state` (`complete|active|upcoming`) on each item.

1 Account verified

2 Payment details

3 Review and submit

23) Page Header Surface

Page header groups title/meta and action area.

24) Section Block Surface

Section block creates heading/body structure for product pages.

Security

Two-factor authentication is enabled for all admins.

Last review completed on 2026-04-02.

25) App Shell Surface

App shell combines topbar, sidebar area and main content area.

Overview

Main content area grows while sidebar stays structured.

25.1) Split Pane Surface

Split pane creates responsive dual-region product layouts.

Editor

Main content/editing region with larger width.

26) Table + Empty State Surface

Table surface for dense data rows with selected row state.

Project	Owner	Status	MRR
Atlas CRM	Ada	Healthy	$12,400
Pulse Ops	Grace	At risk	$7,980
Nova Billing	Linus	Healthy	$4,200

When rows are empty, pair table workflows with empty-state fallback.

No records found

There is no matching result for the current filters. Reset filters or create a new record.

26.1) Data Grid Surface

Minimal data-grid surface with role-based semantics and selected row state.

Account

Owner

Plan

MRR

Atlas CRM

Ada

Pro

$12,400

Pulse Ops

Grace

Enterprise

$22,900

27) Avatar + Stat Surface

Avatar surface supports image and fallback content with size classes.

LT GH

Stat surface is a compact metric block for dashboards.

Monthly Revenue

$24,580

+8.2% vs last month

Active Teams

128

3 new this week

27.1) Avatar Group + Tag Chip Surface

Avatar group overlaps members while preserving per-avatar semantics.

A L G

status: active owner: platform tier: enterprise

28) Timeline + KPI Card Surface

Timeline surface lists ordered events with marker and meta information.

v0.2 foundation freeze

2026-04-01 · Contract validation stabilized.
P4 data package started

2026-04-11 · Table and empty-state shipped.
P4 data package expansion

2026-04-11 · Avatar, stat, timeline and KPI card added.

KPI card surface for dashboard metric summaries.

Conversion rate

4.8%

+0.6%

Compared to previous 7 days.

Churn risk accounts

-2

Manual review queue size.

29) List + Description List Surface

List surface provides a simple structured item stack.

Build completed
Contract validation passed
Release notes updated

Description list surface presents key/value metadata.

Version: v0.2.0
Build date: 2026-04-11
Status: Foundation preview

30) Combobox + Search Box Surface

31) Autocomplete + Command Palette Surface

Autocomplete surface: input + öneri listesi görsel katmanı.

Repository

Command palette surface: dialog içinde komut arama/listesi.

32) Command Bar + Filter Bar Composite

Command bar: arama + hızlı aksiyon birleşimi.

workspace: core

Filter bar implementation: mevcut controls ile filtre kompozisyonu.

Status High priority

Search + filter composite summary.

status: active priority: high 12 results

Issue #241 — Input validation doc update
Issue #248 — Naming contract checks

33) Data Table Toolbar Pattern

Data table toolbar: search + filter + bulk action kompozisyonu.

status: open 3 selected

Issue	Owner	State
#248 Naming contract checks	Core Team	Open
#251 Input validation docs	Design Ops	Open
#260 Build pipeline polish	Platform	Closed

34) Date Picker Surface

Date picker surface: input + trigger + panel + day grid kompozisyonu.

Due date

35) Date Range Picker Surface

Date range picker surface: start/end input + panel + range day states.

Reporting range

36) Calendar Surface

Calendar surface: header + nav + weekday/day grid kompozisyonu.

April 2026

Mo Tu We Th Fr Sa Su

37) File Upload Surface

38) Dropzone Surface

39) Editable Field Surface

40) Hover Card Surface

41) Content / Rich UI Surface

Typography Surface

Text component keeps body copy readable in product surfaces.

Use code for inline snippets.

npm run test:ci

Migration Reminder

Keep selector contract and RFC docs aligned before release.

“Stable CSS contracts make UI changes predictable for teams.”

Quick action: Ctrl + K

Release Notes

Foundation package refinements completed for navigation, data and content surfaces.

Contract checks passed.
Playground examples updated.
Build pipeline remains green.

npm run build

42) Fluid Token Pilot (`clamp`) Comparison

Pilot only: compare fixed values vs fluid `clamp()` values for type and spacing rhythm.

Fixed Title Scale

Uses a fixed title size and fixed top spacing baseline.

Spacing remains static across viewport widths.

Fluid Clamp Title Scale

Uses `clamp()` for responsive title sizing and spacing progression.

Spacing scales within controlled min/max boundaries.

43) Rating Surface

Rating surface with active state, readonly and disabled examples.

Interactive rating

Use active marker on selected items and semantic group labeling.

Disabled rating

44) Result / Status Surface

45) Tree View Surface

Tree-view surface for nested navigation/data hierarchies.

46) Tags Input Surface

Tags input surface with removable items and inline entry field.

Labels

urgent backend

Restricted tags

archived

This project cannot accept more tags.