daub-ui 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +378 -0
- package/components.json +1044 -0
- package/daub.css +5751 -0
- package/daub.d.ts +110 -0
- package/daub.js +1782 -0
- package/llms.txt +1242 -0
- package/package.json +35 -0
package/llms.txt
ADDED
|
@@ -0,0 +1,1242 @@
|
|
|
1
|
+
# DAUB UI — Considered Component Library for AI Agents
|
|
2
|
+
|
|
3
|
+
> Version: 2.6.0
|
|
4
|
+
> URL: https://daub.dev
|
|
5
|
+
> CSS: https://daub.dev/daub.css
|
|
6
|
+
> JS: https://daub.dev/daub.js
|
|
7
|
+
> Repo: https://github.com/sliday/daub
|
|
8
|
+
> License: MIT
|
|
9
|
+
> Components: 76
|
|
10
|
+
> Theme Families: 20 (40 variants total)
|
|
11
|
+
> Components JSON: https://daub.dev/components.json
|
|
12
|
+
> TypeScript: https://daub.dev/daub.d.ts
|
|
13
|
+
|
|
14
|
+
## Quick Start
|
|
15
|
+
|
|
16
|
+
```html
|
|
17
|
+
<link rel="stylesheet" href="https://daub.dev/daub.css">
|
|
18
|
+
<script src="https://daub.dev/daub.js"></script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Alternative CDNs (npm package: daub-ui):
|
|
22
|
+
```html
|
|
23
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@2.6.0/daub.css">
|
|
24
|
+
<script src="https://cdn.jsdelivr.net/npm/daub-ui@2.6.0/daub.js"></script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Fonts: System font stacks by default. Optional Google Fonts:
|
|
28
|
+
```html
|
|
29
|
+
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@300..900&family=Source+Serif+4:wght@300..900&family=Cabin:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
30
|
+
<style>
|
|
31
|
+
:root {
|
|
32
|
+
--db-font-heading: 'Fraunces', Georgia, serif;
|
|
33
|
+
--db-font-body: 'Source Serif 4', Georgia, serif;
|
|
34
|
+
--db-font-ui: 'Cabin', system-ui, sans-serif;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Icons (optional): `<script src="https://unpkg.com/lucide@latest"></script>`
|
|
40
|
+
|
|
41
|
+
## Class Prefix
|
|
42
|
+
|
|
43
|
+
All classes: `db-`. All CSS custom properties: `--db-`.
|
|
44
|
+
|
|
45
|
+
## Themes
|
|
46
|
+
|
|
47
|
+
20 theme families in 4 categories, each with light & dark modes (40 variants):
|
|
48
|
+
|
|
49
|
+
**Originals**: default, grunge, solarized, ink, ember, bone
|
|
50
|
+
**Classics**: dracula, nord, one-dark, monokai, gruvbox
|
|
51
|
+
**Modern**: night-owl, github, catppuccin, tokyo-night, material
|
|
52
|
+
**Trending**: synthwave, shades-of-purple, ayu, horizon
|
|
53
|
+
|
|
54
|
+
| Family | Light | Dark | Character |
|
|
55
|
+
|--------|-------|------|-----------|
|
|
56
|
+
| Default | `light` | `dark` | Warm cream / deep charcoal |
|
|
57
|
+
| Grunge | `grunge-light` | `grunge-dark` | Typewriter / ink-stained |
|
|
58
|
+
| Solarized | `solarized` | `solarized-dark` | Aged paper / antiqued leather |
|
|
59
|
+
| Ink | `ink-light` | `ink` | Cool editorial / navy silver |
|
|
60
|
+
| Ember | `ember-light` | `ember` | Sunlit pottery / copper glow |
|
|
61
|
+
| Bone | `bone` | `bone-dark` | Stark white / grayscale brutalism |
|
|
62
|
+
| Dracula | `dracula-light` | `dracula` | Alucard warmth / vampire purple |
|
|
63
|
+
| Nord | `nord-light` | `nord` | Snow storm / arctic frost |
|
|
64
|
+
| One Dark | `one-dark-light` | `one-dark` | Soft atom / midnight code |
|
|
65
|
+
| Monokai | `monokai-light` | `monokai` | Warm latte / neon noir |
|
|
66
|
+
| Gruvbox | `gruvbox-light` | `gruvbox` | Retro cream / earthy dark |
|
|
67
|
+
| Night Owl | `night-owl-light` | `night-owl` | Soft dawn / deep twilight |
|
|
68
|
+
| GitHub | `github` | `github-dark` | Clean primer / dimmed slate |
|
|
69
|
+
| Catppuccin | `catppuccin` | `catppuccin-dark` | Latte pastel / mocha warmth |
|
|
70
|
+
| Tokyo Night | `tokyo-night-light` | `tokyo-night` | Storm light / city neon |
|
|
71
|
+
| Material | `material-light` | `material` | Lighter paper / palenight haze |
|
|
72
|
+
| Synthwave | `synthwave-light` | `synthwave` | Warm retro / neon purple |
|
|
73
|
+
| Shades of Purple | `shades-of-purple-light` | `shades-of-purple` | Soft lavender / deep violet |
|
|
74
|
+
| Ayu | `ayu` | `ayu-dark` | Warm light / mirage dark |
|
|
75
|
+
| Horizon | `horizon-light` | `horizon` | Soft rose / warm dusk |
|
|
76
|
+
|
|
77
|
+
Set via attribute: `<html data-theme="dark">`
|
|
78
|
+
Family API: `DAUB.setFamily('ink')`, `DAUB.setScheme('dark')`, `DAUB.getFamily()`
|
|
79
|
+
Direct API: `DAUB.setTheme('ink')`, `DAUB.cycleTheme()`, `DAUB.getTheme()`
|
|
80
|
+
Accent API: `DAUB.setAccent('#6B7C3E')`, `DAUB.resetAccent()`, `DAUB.getAccent()`
|
|
81
|
+
Persisted in `localStorage` keys: `db-theme`, `db-scheme`, `db-accent`.
|
|
82
|
+
|
|
83
|
+
## Components (67)
|
|
84
|
+
|
|
85
|
+
### 1. Button — `.db-btn`
|
|
86
|
+
Variants: `db-btn--primary`, `db-btn--secondary`, `db-btn--ghost`
|
|
87
|
+
States: `db-btn--loading`, `db-btn--disabled`, `db-btn--pressed`
|
|
88
|
+
Sizes: `db-btn--sm`, `db-btn--lg`, `db-btn--icon`
|
|
89
|
+
Icon colors: `db-btn--icon-danger`, `db-btn--icon-success`, `db-btn--icon-accent`
|
|
90
|
+
```html
|
|
91
|
+
<button class="db-btn db-btn--primary">Save</button>
|
|
92
|
+
<button class="db-btn db-btn--secondary db-btn--sm">Cancel</button>
|
|
93
|
+
<button class="db-btn db-btn--ghost">Ghost</button>
|
|
94
|
+
<button class="db-btn db-btn--icon db-btn--icon-danger" aria-label="Delete">×</button>
|
|
95
|
+
<button class="db-btn db-btn--primary db-btn--loading" disabled>Saving</button>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### 2. Button Group — `.db-btn-group`
|
|
99
|
+
```html
|
|
100
|
+
<div class="db-btn-group">
|
|
101
|
+
<button class="db-btn db-btn--secondary">Copy</button>
|
|
102
|
+
<button class="db-btn db-btn--secondary">Cut</button>
|
|
103
|
+
<button class="db-btn db-btn--secondary">Paste</button>
|
|
104
|
+
</div>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 3. Text Field — `.db-field`
|
|
108
|
+
```html
|
|
109
|
+
<div class="db-field">
|
|
110
|
+
<label class="db-field__label">Email</label>
|
|
111
|
+
<input class="db-field__input" type="email" placeholder="you@example.com">
|
|
112
|
+
<span class="db-field__helper">We'll never share your email.</span>
|
|
113
|
+
</div>
|
|
114
|
+
```
|
|
115
|
+
Error state: add `db-field--error` to wrapper.
|
|
116
|
+
|
|
117
|
+
### 4. Input (standalone) — `.db-input`
|
|
118
|
+
Sizes: `db-input--sm`, `db-input--lg`. Error: `db-input--error`.
|
|
119
|
+
```html
|
|
120
|
+
<input class="db-input" type="text" placeholder="Standalone input">
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 5. Input Group — `.db-input-group`
|
|
124
|
+
```html
|
|
125
|
+
<div class="db-input-group">
|
|
126
|
+
<span class="db-input-group__addon">https://</span>
|
|
127
|
+
<input class="db-input" type="text" placeholder="example.com">
|
|
128
|
+
</div>
|
|
129
|
+
<div class="db-input-group">
|
|
130
|
+
<input class="db-input" type="email" placeholder="Email">
|
|
131
|
+
<button class="db-btn db-btn--primary">Subscribe</button>
|
|
132
|
+
</div>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### 6. Textarea (standalone) — `.db-textarea`
|
|
136
|
+
```html
|
|
137
|
+
<textarea class="db-textarea" placeholder="Write here..."></textarea>
|
|
138
|
+
```
|
|
139
|
+
Error: `db-textarea--error`.
|
|
140
|
+
|
|
141
|
+
### 7. Checkbox — `.db-checkbox`
|
|
142
|
+
```html
|
|
143
|
+
<label class="db-checkbox">
|
|
144
|
+
<input class="db-checkbox__input" type="checkbox">
|
|
145
|
+
<span class="db-checkbox__box"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>
|
|
146
|
+
Accept terms
|
|
147
|
+
</label>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### 8. Radio — `.db-radio`
|
|
151
|
+
```html
|
|
152
|
+
<div class="db-radio-group">
|
|
153
|
+
<label class="db-radio">
|
|
154
|
+
<input class="db-radio__input" type="radio" name="plan" value="free">
|
|
155
|
+
<span class="db-radio__circle"></span>
|
|
156
|
+
Free
|
|
157
|
+
</label>
|
|
158
|
+
</div>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### 9. Switch — `.db-switch`
|
|
162
|
+
```html
|
|
163
|
+
<div class="db-switch" role="switch" tabindex="0" aria-checked="false">
|
|
164
|
+
<span class="db-switch__track"><span class="db-switch__thumb"></span></span>
|
|
165
|
+
Label
|
|
166
|
+
</div>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### 10. Slider — `.db-slider`
|
|
170
|
+
```html
|
|
171
|
+
<div class="db-slider">
|
|
172
|
+
<div class="db-slider__label"><span>Volume</span><span class="db-slider__value">50</span></div>
|
|
173
|
+
<input class="db-slider__input" type="range" min="0" max="100" value="50">
|
|
174
|
+
</div>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### 11. Toggle — `.db-toggle`
|
|
178
|
+
Sizes: `db-toggle--sm`. Active: `aria-pressed="true"` or `db-toggle--active`.
|
|
179
|
+
```html
|
|
180
|
+
<button class="db-toggle" aria-pressed="false">Bold</button>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### 12. Toggle Group — `.db-toggle-group`
|
|
184
|
+
Single select by default. Add `data-multi` for multi-select.
|
|
185
|
+
```html
|
|
186
|
+
<div class="db-toggle-group">
|
|
187
|
+
<button class="db-toggle" aria-pressed="true">Left</button>
|
|
188
|
+
<button class="db-toggle" aria-pressed="false">Center</button>
|
|
189
|
+
<button class="db-toggle" aria-pressed="false">Right</button>
|
|
190
|
+
</div>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### 13. Native Select — `.db-select`
|
|
194
|
+
```html
|
|
195
|
+
<div class="db-select">
|
|
196
|
+
<label class="db-label">Framework</label>
|
|
197
|
+
<select class="db-select__input">
|
|
198
|
+
<option value="">Choose...</option>
|
|
199
|
+
<option>React</option>
|
|
200
|
+
<option>Vue</option>
|
|
201
|
+
</select>
|
|
202
|
+
</div>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### 14. Custom Select — `.db-custom-select`
|
|
206
|
+
With search/filter. JS auto-initializes.
|
|
207
|
+
```html
|
|
208
|
+
<div class="db-custom-select">
|
|
209
|
+
<button class="db-custom-select__trigger" type="button">
|
|
210
|
+
<span class="db-custom-select__placeholder">Select...</span>
|
|
211
|
+
<svg class="db-custom-select__icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
|
212
|
+
</button>
|
|
213
|
+
<div class="db-custom-select__dropdown">
|
|
214
|
+
<div class="db-custom-select__search"><input type="text" placeholder="Search..."></div>
|
|
215
|
+
<div class="db-custom-select__option">Option A</div>
|
|
216
|
+
<div class="db-custom-select__option">Option B</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### 15. Kbd — `.db-kbd`
|
|
222
|
+
Sizes: `db-kbd--sm`.
|
|
223
|
+
```html
|
|
224
|
+
<kbd class="db-kbd">Ctrl</kbd> + <kbd class="db-kbd">K</kbd>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### 16. Label — `.db-label`
|
|
228
|
+
Modifiers: `db-label--required` (adds *), `db-label--optional` (adds "(optional)").
|
|
229
|
+
```html
|
|
230
|
+
<label class="db-label db-label--required">Email</label>
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### 17. Spinner — `.db-spinner`
|
|
234
|
+
Sizes: `db-spinner--sm`, `db-spinner--lg`, `db-spinner--xl`.
|
|
235
|
+
```html
|
|
236
|
+
<span class="db-spinner"></span>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### 18. Input OTP — `.db-otp`
|
|
240
|
+
```html
|
|
241
|
+
<div class="db-otp">
|
|
242
|
+
<input class="db-otp__input" type="text" inputmode="numeric">
|
|
243
|
+
<input class="db-otp__input" type="text" inputmode="numeric">
|
|
244
|
+
<input class="db-otp__input" type="text" inputmode="numeric">
|
|
245
|
+
<span class="db-otp__separator">-</span>
|
|
246
|
+
<input class="db-otp__input" type="text" inputmode="numeric">
|
|
247
|
+
<input class="db-otp__input" type="text" inputmode="numeric">
|
|
248
|
+
<input class="db-otp__input" type="text" inputmode="numeric">
|
|
249
|
+
</div>
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### 19. Tabs — `.db-tabs`
|
|
253
|
+
```html
|
|
254
|
+
<div class="db-tabs">
|
|
255
|
+
<div class="db-tabs__list" role="tablist">
|
|
256
|
+
<button class="db-tabs__tab" aria-selected="true">Tab 1</button>
|
|
257
|
+
<button class="db-tabs__tab">Tab 2</button>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="db-tabs__panel">Content 1</div>
|
|
260
|
+
<div class="db-tabs__panel" hidden>Content 2</div>
|
|
261
|
+
</div>
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
### 20. Card — `.db-card`
|
|
265
|
+
Media variant: `db-card--media` removes padding for edge-to-edge images.
|
|
266
|
+
```html
|
|
267
|
+
<div class="db-card">
|
|
268
|
+
<div class="db-card__header">
|
|
269
|
+
<h3 class="db-card__title">Title</h3>
|
|
270
|
+
<p class="db-card__desc">Description</p>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="db-card__footer">
|
|
273
|
+
<button class="db-btn db-btn--primary db-btn--sm">Action</button>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
<!-- Media card (edge-to-edge image) -->
|
|
278
|
+
<div class="db-card db-card--media">
|
|
279
|
+
<div class="db-card__media"><img src="photo.jpg" alt=""></div>
|
|
280
|
+
<div class="db-card__body">
|
|
281
|
+
<h3 class="db-card__title">Title</h3>
|
|
282
|
+
<p class="db-card__desc">Description</p>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="db-card__footer">
|
|
285
|
+
<button class="db-btn db-btn--primary db-btn--sm">Action</button>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
### 21. Modal — `.db-modal`
|
|
291
|
+
```html
|
|
292
|
+
<div class="db-modal-overlay" id="my-modal" aria-hidden="true">
|
|
293
|
+
<div class="db-modal">
|
|
294
|
+
<div class="db-modal__header">
|
|
295
|
+
<h2 class="db-modal__title">Title</h2>
|
|
296
|
+
<button class="db-modal__close" aria-label="Close">×</button>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="db-modal__body">Content</div>
|
|
299
|
+
<div class="db-modal__footer">
|
|
300
|
+
<button class="db-btn db-btn--secondary">Cancel</button>
|
|
301
|
+
<button class="db-btn db-btn--primary">Confirm</button>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
```
|
|
306
|
+
Open: `DAUB.openModal('my-modal')`. Close: `DAUB.closeModal('my-modal')` or `DAUB.closeModal(overlayEl)`.
|
|
307
|
+
|
|
308
|
+
### 22. Alert Dialog — `.db-alert-dialog`
|
|
309
|
+
```html
|
|
310
|
+
<div class="db-alert-dialog" id="confirm-delete">
|
|
311
|
+
<div class="db-alert-dialog__overlay"></div>
|
|
312
|
+
<div class="db-alert-dialog__panel">
|
|
313
|
+
<h3 class="db-alert-dialog__title">Are you sure?</h3>
|
|
314
|
+
<p class="db-alert-dialog__desc">This action cannot be undone.</p>
|
|
315
|
+
<div class="db-alert-dialog__actions">
|
|
316
|
+
<button class="db-btn db-btn--secondary" data-action="cancel">Cancel</button>
|
|
317
|
+
<button class="db-btn db-btn--primary">Continue</button>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
```
|
|
322
|
+
Open: `DAUB.openAlertDialog('confirm-delete')`. Close: `DAUB.closeAlertDialog('confirm-delete')`.
|
|
323
|
+
|
|
324
|
+
### 23. Sheet — `.db-sheet`
|
|
325
|
+
Sides: `db-sheet--right`, `db-sheet--left`, `db-sheet--top`, `db-sheet--bottom`.
|
|
326
|
+
```html
|
|
327
|
+
<div class="db-sheet db-sheet--right" id="my-sheet">
|
|
328
|
+
<div class="db-sheet__overlay"></div>
|
|
329
|
+
<div class="db-sheet__panel">
|
|
330
|
+
<div class="db-sheet__header">
|
|
331
|
+
<span class="db-sheet__title">Title</span>
|
|
332
|
+
<button class="db-sheet__close" aria-label="Close">×</button>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="db-sheet__body">Content</div>
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
```
|
|
338
|
+
Open: `DAUB.openSheet('my-sheet')`. Close: `DAUB.closeSheet('my-sheet')`.
|
|
339
|
+
|
|
340
|
+
### 24. Drawer — `.db-drawer`
|
|
341
|
+
Mobile-friendly bottom panel.
|
|
342
|
+
```html
|
|
343
|
+
<div class="db-drawer" id="my-drawer">
|
|
344
|
+
<div class="db-drawer__overlay"></div>
|
|
345
|
+
<div class="db-drawer__panel">
|
|
346
|
+
<div class="db-drawer__handle"></div>
|
|
347
|
+
<div class="db-drawer__body">Content</div>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
```
|
|
351
|
+
Open: `DAUB.openDrawer('my-drawer')`. Close: `DAUB.closeDrawer('my-drawer')`.
|
|
352
|
+
|
|
353
|
+
### 25. Toast — via JS API
|
|
354
|
+
```js
|
|
355
|
+
DAUB.toast({ type: 'success', title: 'Saved', message: 'Changes saved.', duration: 4000 });
|
|
356
|
+
```
|
|
357
|
+
Types: `success`, `error`, `warning`, `info`.
|
|
358
|
+
|
|
359
|
+
### 26. Alert — `.db-alert`
|
|
360
|
+
```html
|
|
361
|
+
<div class="db-alert db-alert--warning">
|
|
362
|
+
<span class="db-alert__icon"><!-- icon --></span>
|
|
363
|
+
<div class="db-alert__content">
|
|
364
|
+
<div class="db-alert__title">Warning</div>
|
|
365
|
+
<p>Something needs attention.</p>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
```
|
|
369
|
+
Variants: `--info`, `--warning`, `--error`, `--success`.
|
|
370
|
+
|
|
371
|
+
### 27. Badge — `.db-badge`
|
|
372
|
+
```html
|
|
373
|
+
<span class="db-badge db-badge--new">New</span>
|
|
374
|
+
```
|
|
375
|
+
Variants: `--new`, `--updated`, `--warning`, `--error`.
|
|
376
|
+
|
|
377
|
+
### 28. Avatar — `.db-avatar`
|
|
378
|
+
```html
|
|
379
|
+
<div class="db-avatar db-avatar--md"><img src="photo.jpg" alt="User"></div>
|
|
380
|
+
<div class="db-avatar db-avatar--sm">AB</div>
|
|
381
|
+
```
|
|
382
|
+
Sizes: `--sm` (32px), `--md` (40px), `--lg` (56px).
|
|
383
|
+
|
|
384
|
+
Avatar Group: overlapping stack with overflow counter.
|
|
385
|
+
```html
|
|
386
|
+
<div class="db-avatar-group">
|
|
387
|
+
<div class="db-avatar db-avatar--md"><img src="user1.jpg" alt=""></div>
|
|
388
|
+
<div class="db-avatar db-avatar--md"><img src="user2.jpg" alt=""></div>
|
|
389
|
+
<div class="db-avatar db-avatar--md"><img src="user3.jpg" alt=""></div>
|
|
390
|
+
<span class="db-avatar-group__overflow">+5</span>
|
|
391
|
+
</div>
|
|
392
|
+
```
|
|
393
|
+
|
|
394
|
+
### 29. Table — `.db-table`
|
|
395
|
+
```html
|
|
396
|
+
<table class="db-table">
|
|
397
|
+
<thead><tr><th>Name</th><th>Role</th></tr></thead>
|
|
398
|
+
<tbody><tr><td>Alice</td><td>Engineer</td></tr></tbody>
|
|
399
|
+
</table>
|
|
400
|
+
```
|
|
401
|
+
Sortable: add `data-db-sort` to `<th>`.
|
|
402
|
+
|
|
403
|
+
### 30. Data Table — `.db-data-table`
|
|
404
|
+
Enhanced table with checkbox selection and sortable headers.
|
|
405
|
+
```html
|
|
406
|
+
<table class="db-data-table">
|
|
407
|
+
<thead><tr>
|
|
408
|
+
<th><input class="db-data-table__check" type="checkbox"></th>
|
|
409
|
+
<th data-sortable>Name</th>
|
|
410
|
+
<th data-sortable>Status</th>
|
|
411
|
+
</tr></thead>
|
|
412
|
+
<tbody><tr>
|
|
413
|
+
<td><input class="db-data-table__check" type="checkbox"></td>
|
|
414
|
+
<td>Item</td><td>Active</td>
|
|
415
|
+
</tr></tbody>
|
|
416
|
+
</table>
|
|
417
|
+
```
|
|
418
|
+
Table utilities: `db-data-table--numeric` for tabular-nums on whole table. `db-numeric` class on `<td>`/`<th>` for right-aligned numbers. `db-truncate` for ellipsis overflow (max-width 200px).
|
|
419
|
+
|
|
420
|
+
### 31. List — `.db-list`
|
|
421
|
+
```html
|
|
422
|
+
<div class="db-list">
|
|
423
|
+
<div class="db-list__item">
|
|
424
|
+
<div class="db-list__content">
|
|
425
|
+
<div class="db-list__title">Item</div>
|
|
426
|
+
<div class="db-list__secondary">Details</div>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
```
|
|
431
|
+
|
|
432
|
+
### 32. Breadcrumbs — `.db-breadcrumbs`
|
|
433
|
+
```html
|
|
434
|
+
<nav class="db-breadcrumbs" aria-label="Breadcrumb">
|
|
435
|
+
<ol><li><a href="/">Home</a></li><li aria-current="page">Current</li></ol>
|
|
436
|
+
</nav>
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
### 33. Pagination — `.db-pagination`
|
|
440
|
+
```html
|
|
441
|
+
<nav class="db-pagination" aria-label="Pagination">
|
|
442
|
+
<button class="db-pagination__btn" disabled>«</button>
|
|
443
|
+
<button class="db-pagination__btn" aria-current="page">1</button>
|
|
444
|
+
<button class="db-pagination__btn">2</button>
|
|
445
|
+
<button class="db-pagination__btn">»</button>
|
|
446
|
+
</nav>
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
### 34. Stepper — `.db-stepper`
|
|
450
|
+
```html
|
|
451
|
+
<div class="db-stepper">
|
|
452
|
+
<div class="db-stepper__step db-stepper__step--completed">
|
|
453
|
+
<div class="db-stepper__indicator">1</div>
|
|
454
|
+
<div class="db-stepper__label">Done</div>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="db-stepper__step db-stepper__step--active">
|
|
457
|
+
<div class="db-stepper__indicator">2</div>
|
|
458
|
+
<div class="db-stepper__label">Current</div>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
### 35. Nav Menu — `.db-nav-menu`
|
|
464
|
+
```html
|
|
465
|
+
<nav class="db-nav-menu">
|
|
466
|
+
<a class="db-nav-menu__item db-nav-menu__item--active" href="#">Home</a>
|
|
467
|
+
<a class="db-nav-menu__item" href="#">About</a>
|
|
468
|
+
<a class="db-nav-menu__item" href="#">Contact</a>
|
|
469
|
+
</nav>
|
|
470
|
+
```
|
|
471
|
+
|
|
472
|
+
### 36. Navbar — `.db-navbar`
|
|
473
|
+
Sticky top app bar with brand, nav links, spacer, and action buttons. Mobile hamburger toggle.
|
|
474
|
+
JS: `DAUB.toggleNavbar(el)`. Mobile auto-close on outside click.
|
|
475
|
+
```html
|
|
476
|
+
<nav class="db-navbar">
|
|
477
|
+
<a class="db-navbar__brand" href="/"><img src="logo.svg" alt=""> AppName</a>
|
|
478
|
+
<div class="db-navbar__nav">
|
|
479
|
+
<div class="db-nav-menu">
|
|
480
|
+
<a class="db-nav-menu__item db-nav-menu__item--active" href="/">Home</a>
|
|
481
|
+
<a class="db-nav-menu__item" href="/explore">Explore</a>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="db-navbar__spacer"></div>
|
|
485
|
+
<div class="db-navbar__actions">
|
|
486
|
+
<button class="db-btn db-btn--icon" aria-label="Notifications">🔔</button>
|
|
487
|
+
<div class="db-avatar db-avatar--sm"><img src="photo.jpg" alt="User"></div>
|
|
488
|
+
</div>
|
|
489
|
+
<button class="db-navbar__toggle" aria-label="Menu">
|
|
490
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
491
|
+
</button>
|
|
492
|
+
</nav>
|
|
493
|
+
```
|
|
494
|
+
|
|
495
|
+
### 37. Menubar — `.db-menubar`
|
|
496
|
+
```html
|
|
497
|
+
<div class="db-menubar">
|
|
498
|
+
<button class="db-menubar__item">File
|
|
499
|
+
<div class="db-menubar__dropdown">
|
|
500
|
+
<button class="db-dropdown__item">New</button>
|
|
501
|
+
<button class="db-dropdown__item">Open</button>
|
|
502
|
+
</div>
|
|
503
|
+
</button>
|
|
504
|
+
<button class="db-menubar__item">Edit</button>
|
|
505
|
+
</div>
|
|
506
|
+
```
|
|
507
|
+
|
|
508
|
+
### 37. Sidebar — `.db-sidebar`
|
|
509
|
+
Collapsible: add `db-sidebar--collapsed` class. Toggle: `db-sidebar__toggle` button.
|
|
510
|
+
Items need `data-tooltip="Label"` for collapsed hover tooltips.
|
|
511
|
+
JS: `DAUB.toggleSidebar(el)` or click `db-sidebar__toggle`.
|
|
512
|
+
```html
|
|
513
|
+
<aside class="db-sidebar">
|
|
514
|
+
<div class="db-sidebar__header">
|
|
515
|
+
<h3>App Name</h3>
|
|
516
|
+
<button class="db-sidebar__toggle" aria-label="Toggle sidebar">☰</button>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="db-sidebar__section">
|
|
519
|
+
<div class="db-sidebar__label">Main</div>
|
|
520
|
+
<a class="db-sidebar__item db-sidebar__item--active" data-tooltip="Dashboard" href="#">Dashboard</a>
|
|
521
|
+
<a class="db-sidebar__item" data-tooltip="Settings" href="#">Settings</a>
|
|
522
|
+
</div>
|
|
523
|
+
<div class="db-sidebar__footer">Footer content</div>
|
|
524
|
+
</aside>
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
### 38. Tooltip — `.db-tooltip`
|
|
528
|
+
Positions: `db-tooltip__content--top`, `--bottom`, `--left`, `--right`.
|
|
529
|
+
```html
|
|
530
|
+
<div class="db-tooltip">
|
|
531
|
+
<button class="db-btn">Hover me</button>
|
|
532
|
+
<span class="db-tooltip__content db-tooltip__content--top">Tooltip text</span>
|
|
533
|
+
</div>
|
|
534
|
+
```
|
|
535
|
+
|
|
536
|
+
### 39. Popover — `.db-popover`
|
|
537
|
+
Positions: `db-popover__content--top`, `--bottom`, `--left`, `--right`.
|
|
538
|
+
```html
|
|
539
|
+
<div class="db-popover">
|
|
540
|
+
<button class="db-btn db-popover__trigger">Click me</button>
|
|
541
|
+
<div class="db-popover__content db-popover__content--bottom">
|
|
542
|
+
<p>Popover content here.</p>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
```
|
|
546
|
+
|
|
547
|
+
### 40. Hover Card — `.db-hover-card`
|
|
548
|
+
```html
|
|
549
|
+
<div class="db-hover-card">
|
|
550
|
+
<a href="#">@username</a>
|
|
551
|
+
<div class="db-hover-card__content">
|
|
552
|
+
<p>User profile info shown on hover.</p>
|
|
553
|
+
</div>
|
|
554
|
+
</div>
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
### 41. Dropdown Menu — `.db-dropdown`
|
|
558
|
+
```html
|
|
559
|
+
<div class="db-dropdown">
|
|
560
|
+
<button class="db-btn db-dropdown__trigger">Options</button>
|
|
561
|
+
<div class="db-dropdown__content">
|
|
562
|
+
<div class="db-dropdown__label">Actions</div>
|
|
563
|
+
<button class="db-dropdown__item">Edit</button>
|
|
564
|
+
<button class="db-dropdown__item">Duplicate</button>
|
|
565
|
+
<hr class="db-dropdown__separator">
|
|
566
|
+
<button class="db-dropdown__item" style="color:var(--db-error);">Delete</button>
|
|
567
|
+
</div>
|
|
568
|
+
</div>
|
|
569
|
+
```
|
|
570
|
+
Right-aligned: add `db-dropdown__content--right`.
|
|
571
|
+
|
|
572
|
+
### 42. Context Menu — `.db-context-menu`
|
|
573
|
+
```html
|
|
574
|
+
<div data-context-menu="my-ctx-menu">Right-click here</div>
|
|
575
|
+
<div class="db-context-menu" id="my-ctx-menu">
|
|
576
|
+
<div class="db-context-menu__label">Actions</div>
|
|
577
|
+
<button class="db-context-menu__item">Copy</button>
|
|
578
|
+
<button class="db-context-menu__item">Paste</button>
|
|
579
|
+
<hr class="db-context-menu__separator">
|
|
580
|
+
<button class="db-context-menu__item db-context-menu__item--danger">Delete</button>
|
|
581
|
+
</div>
|
|
582
|
+
```
|
|
583
|
+
|
|
584
|
+
### 43. Command Palette — `.db-command`
|
|
585
|
+
Opens with Ctrl+K / Cmd+K globally.
|
|
586
|
+
```html
|
|
587
|
+
<div class="db-command" id="cmd">
|
|
588
|
+
<div class="db-command__overlay"></div>
|
|
589
|
+
<div class="db-command__panel">
|
|
590
|
+
<div class="db-command__input-wrap">
|
|
591
|
+
<svg><!-- search icon --></svg>
|
|
592
|
+
<input class="db-command__input" placeholder="Search...">
|
|
593
|
+
</div>
|
|
594
|
+
<div class="db-command__list">
|
|
595
|
+
<div class="db-command__group-label">Navigation</div>
|
|
596
|
+
<div class="db-command__item">Home
|
|
597
|
+
<span class="db-command__shortcut"><kbd class="db-kbd db-kbd--sm">H</kbd></span>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="db-command__empty" style="display:none;">No results.</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
```
|
|
604
|
+
Open: `DAUB.openCommand('cmd')`. Close: `DAUB.closeCommand('cmd')`.
|
|
605
|
+
|
|
606
|
+
### 44. Accordion — `.db-accordion`
|
|
607
|
+
Single mode by default. Add `data-multi` for multi-open.
|
|
608
|
+
```html
|
|
609
|
+
<div class="db-accordion">
|
|
610
|
+
<div class="db-accordion__item db-accordion__item--open">
|
|
611
|
+
<button class="db-accordion__trigger" aria-expanded="true">
|
|
612
|
+
Question 1
|
|
613
|
+
<svg class="db-accordion__icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
|
614
|
+
</button>
|
|
615
|
+
<div class="db-accordion__content">Answer 1</div>
|
|
616
|
+
</div>
|
|
617
|
+
<div class="db-accordion__item">
|
|
618
|
+
<button class="db-accordion__trigger" aria-expanded="false">
|
|
619
|
+
Question 2
|
|
620
|
+
<svg class="db-accordion__icon" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
|
621
|
+
</button>
|
|
622
|
+
<div class="db-accordion__content">Answer 2</div>
|
|
623
|
+
</div>
|
|
624
|
+
</div>
|
|
625
|
+
```
|
|
626
|
+
|
|
627
|
+
### 45. Collapsible — `.db-collapsible`
|
|
628
|
+
```html
|
|
629
|
+
<div class="db-collapsible">
|
|
630
|
+
<button class="db-collapsible__trigger" aria-expanded="false">
|
|
631
|
+
<svg class="db-collapsible__icon" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
|
|
632
|
+
Show more
|
|
633
|
+
</button>
|
|
634
|
+
<div class="db-collapsible__content">Hidden content</div>
|
|
635
|
+
</div>
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
### 46. Progress — `.db-progress`
|
|
639
|
+
```html
|
|
640
|
+
<div class="db-progress"><div class="db-progress__bar" style="--db-progress: 65%;"></div></div>
|
|
641
|
+
```
|
|
642
|
+
Indeterminate: add `db-progress--indeterminate`.
|
|
643
|
+
|
|
644
|
+
### 47. Skeleton — `.db-skeleton`
|
|
645
|
+
```html
|
|
646
|
+
<div class="db-skeleton db-skeleton--text"></div>
|
|
647
|
+
<div class="db-skeleton db-skeleton--heading"></div>
|
|
648
|
+
<div class="db-skeleton db-skeleton--avatar"></div>
|
|
649
|
+
```
|
|
650
|
+
|
|
651
|
+
### 48. Empty State — `.db-empty`
|
|
652
|
+
```html
|
|
653
|
+
<div class="db-empty">
|
|
654
|
+
<div class="db-empty__icon"><!-- icon --></div>
|
|
655
|
+
<h3 class="db-empty__title">No items</h3>
|
|
656
|
+
<p class="db-empty__desc">Get started by creating your first item.</p>
|
|
657
|
+
<button class="db-btn db-btn--primary">Create</button>
|
|
658
|
+
</div>
|
|
659
|
+
```
|
|
660
|
+
|
|
661
|
+
### 49. Calendar — `.db-calendar`
|
|
662
|
+
```html
|
|
663
|
+
<div class="db-calendar">
|
|
664
|
+
<div class="db-calendar__header">
|
|
665
|
+
<button class="db-calendar__nav">‹</button>
|
|
666
|
+
<span class="db-calendar__title">February 2026</span>
|
|
667
|
+
<button class="db-calendar__nav">›</button>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="db-calendar__grid">
|
|
670
|
+
<span class="db-calendar__day-label">Mo</span><!-- ...7 labels... -->
|
|
671
|
+
<button class="db-calendar__day">1</button>
|
|
672
|
+
<button class="db-calendar__day db-calendar__day--today">27</button>
|
|
673
|
+
<button class="db-calendar__day db-calendar__day--selected">15</button>
|
|
674
|
+
<button class="db-calendar__day db-calendar__day--outside">1</button>
|
|
675
|
+
</div>
|
|
676
|
+
</div>
|
|
677
|
+
```
|
|
678
|
+
|
|
679
|
+
### 50. Date Picker — `.db-date-picker`
|
|
680
|
+
Wraps Calendar in a trigger/dropdown.
|
|
681
|
+
```html
|
|
682
|
+
<div class="db-date-picker">
|
|
683
|
+
<button class="db-date-picker__trigger db-input" type="button">Select date...</button>
|
|
684
|
+
<div class="db-date-picker__dropdown">
|
|
685
|
+
<div class="db-calendar"><!-- calendar markup --></div>
|
|
686
|
+
</div>
|
|
687
|
+
</div>
|
|
688
|
+
```
|
|
689
|
+
|
|
690
|
+
### 51. Carousel — `.db-carousel`
|
|
691
|
+
```html
|
|
692
|
+
<div class="db-carousel">
|
|
693
|
+
<div class="db-carousel__track">
|
|
694
|
+
<div class="db-carousel__slide">Slide 1</div>
|
|
695
|
+
<div class="db-carousel__slide">Slide 2</div>
|
|
696
|
+
</div>
|
|
697
|
+
<button class="db-carousel__btn db-carousel__btn--prev">‹</button>
|
|
698
|
+
<button class="db-carousel__btn db-carousel__btn--next">›</button>
|
|
699
|
+
<div class="db-carousel__dots">
|
|
700
|
+
<button class="db-carousel__dot db-carousel__dot--active"></button>
|
|
701
|
+
<button class="db-carousel__dot"></button>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
```
|
|
705
|
+
|
|
706
|
+
### 52. CSS Bar Chart — `.db-chart`
|
|
707
|
+
```html
|
|
708
|
+
<div class="db-chart">
|
|
709
|
+
<div class="db-chart__bar" style="height:40%;"></div>
|
|
710
|
+
<div class="db-chart__bar" style="height:80%;"></div>
|
|
711
|
+
<div class="db-chart__bar db-chart__bar--secondary" style="height:60%;"></div>
|
|
712
|
+
</div>
|
|
713
|
+
<div class="db-chart__labels"><span>Mon</span><span>Tue</span><span>Wed</span></div>
|
|
714
|
+
```
|
|
715
|
+
|
|
716
|
+
### 53. Stat Card — `.db-stat`
|
|
717
|
+
KPI/metric card with label, value, and change indicator.
|
|
718
|
+
```html
|
|
719
|
+
<div class="db-stat">
|
|
720
|
+
<span class="db-stat__label">Total Users</span>
|
|
721
|
+
<span class="db-stat__value">12,847</span>
|
|
722
|
+
<span class="db-stat__change db-stat__change--up">↑ 12.5%</span>
|
|
723
|
+
</div>
|
|
724
|
+
```
|
|
725
|
+
Horizontal layout: add `db-stat--horizontal`. Optional icon slot: `.db-stat__icon`.
|
|
726
|
+
|
|
727
|
+
### 54. Chart Card — `.db-chart-card`
|
|
728
|
+
Card wrapper for any chart (Chart.js canvas, db-chart, etc.) with title/actions header.
|
|
729
|
+
```html
|
|
730
|
+
<div class="db-chart-card">
|
|
731
|
+
<div class="db-chart-card__header">
|
|
732
|
+
<span class="db-chart-card__title">Revenue</span>
|
|
733
|
+
<div class="db-chart-card__actions">
|
|
734
|
+
<button class="db-btn db-btn--sm db-btn--secondary">Export</button>
|
|
735
|
+
</div>
|
|
736
|
+
</div>
|
|
737
|
+
<div class="db-chart-card__body">
|
|
738
|
+
<canvas id="myChart"></canvas>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
```
|
|
742
|
+
|
|
743
|
+
### 55. Resizable — `.db-resizable`
|
|
744
|
+
```html
|
|
745
|
+
<div class="db-resizable" style="width:300px;height:200px;border:1px solid var(--db-sand);">
|
|
746
|
+
Content
|
|
747
|
+
<div class="db-resizable__handle db-resizable__handle--right"></div>
|
|
748
|
+
<div class="db-resizable__handle db-resizable__handle--bottom"></div>
|
|
749
|
+
</div>
|
|
750
|
+
```
|
|
751
|
+
|
|
752
|
+
### 56. Separator — `.db-separator`
|
|
753
|
+
```html
|
|
754
|
+
<hr class="db-separator">
|
|
755
|
+
<hr class="db-separator db-separator--dashed">
|
|
756
|
+
<hr class="db-separator db-separator--vertical">
|
|
757
|
+
<div class="db-separator__label">Or continue with</div>
|
|
758
|
+
```
|
|
759
|
+
|
|
760
|
+
### 57. Scroll Area — `.db-scroll-area`
|
|
761
|
+
```html
|
|
762
|
+
<div class="db-scroll-area" style="max-height:200px;">
|
|
763
|
+
<!-- long content -->
|
|
764
|
+
</div>
|
|
765
|
+
```
|
|
766
|
+
Variants: `db-scroll-area--horizontal`, `db-scroll-area--vertical`.
|
|
767
|
+
|
|
768
|
+
### 58. Aspect Ratio — `.db-aspect`
|
|
769
|
+
```html
|
|
770
|
+
<div class="db-aspect db-aspect--16-9"><img src="photo.jpg" alt=""></div>
|
|
771
|
+
```
|
|
772
|
+
Ratios: `--16-9`, `--4-3`, `--1-1`, `--21-9`.
|
|
773
|
+
|
|
774
|
+
### 59. Prose — `.db-prose`
|
|
775
|
+
Typographic defaults for long-form content. Scale: `--sm`, `--lg`, `--xl`, `--2xl`.
|
|
776
|
+
```html
|
|
777
|
+
<div class="db-prose">
|
|
778
|
+
<h2>Heading</h2>
|
|
779
|
+
<p>Paragraph with 1.75 line-height and 65ch max-width.</p>
|
|
780
|
+
<blockquote>Blockquote with left border.</blockquote>
|
|
781
|
+
<pre><code>Code block</code></pre>
|
|
782
|
+
</div>
|
|
783
|
+
```
|
|
784
|
+
|
|
785
|
+
### 60. Surface — `.db-surface`
|
|
786
|
+
```html
|
|
787
|
+
<div class="db-surface">Base</div>
|
|
788
|
+
<div class="db-surface--raised">Raised</div>
|
|
789
|
+
<div class="db-surface--inset">Inset</div>
|
|
790
|
+
<div class="db-surface--pressed">Pressed</div>
|
|
791
|
+
```
|
|
792
|
+
|
|
793
|
+
### 61. Typography — Heading/Body classes
|
|
794
|
+
```html
|
|
795
|
+
<h1 class="db-h1">Heading 1</h1>
|
|
796
|
+
<h2 class="db-h2">Heading 2</h2>
|
|
797
|
+
<p class="db-body">Body text</p>
|
|
798
|
+
<p class="db-body--sm">Small body</p>
|
|
799
|
+
<span class="db-caption">Caption</span>
|
|
800
|
+
```
|
|
801
|
+
|
|
802
|
+
### 62. Elevation — `.db-elevation-*`
|
|
803
|
+
```html
|
|
804
|
+
<div class="db-elevation-1">Level 1</div>
|
|
805
|
+
<div class="db-elevation-2">Level 2</div>
|
|
806
|
+
<div class="db-elevation-3">Level 3</div>
|
|
807
|
+
```
|
|
808
|
+
|
|
809
|
+
### 63. Layout — `.db-container`, `.db-flex`, `.db-grid`
|
|
810
|
+
Container: `db-container` (960px), `db-container--wide` (1200px), `db-container--narrow` (640px).
|
|
811
|
+
Grid: `db-grid--2` through `db-grid--6`. Auto-responsive: 4-6 cols → 2 cols at tablet, all → 1 col at mobile.
|
|
812
|
+
Visibility: `db-hide-mobile`, `db-show-mobile`, `db-hide-tablet`, `db-show-tablet`, `db-hide-desktop`, `db-show-desktop`.
|
|
813
|
+
```html
|
|
814
|
+
<div class="db-container db-container--wide">
|
|
815
|
+
<div class="db-grid db-grid--4 db-gap-4">
|
|
816
|
+
<div>Col 1</div><div>Col 2</div><div>Col 3</div><div>Col 4</div>
|
|
817
|
+
</div>
|
|
818
|
+
<p class="db-hide-mobile">Only visible on tablet and desktop</p>
|
|
819
|
+
<p class="db-show-mobile">Only visible on mobile</p>
|
|
820
|
+
</div>
|
|
821
|
+
```
|
|
822
|
+
|
|
823
|
+
### 64. Theme Switcher — `.db-theme-switcher`
|
|
824
|
+
Toggle button + categorized popover with 20 families + scheme row.
|
|
825
|
+
```html
|
|
826
|
+
<div class="db-theme-switcher" role="group" aria-label="Theme switcher">
|
|
827
|
+
<button class="db-theme-switcher__toggle" aria-label="Open theme picker" aria-expanded="false">
|
|
828
|
+
<!-- palette icon -->
|
|
829
|
+
</button>
|
|
830
|
+
<div class="db-theme-switcher__popover" id="db-theme-popover">
|
|
831
|
+
<!-- Auto-populated by daub.js with categorized family dots + scheme buttons -->
|
|
832
|
+
</div>
|
|
833
|
+
</div>
|
|
834
|
+
```
|
|
835
|
+
|
|
836
|
+
### 65. Utilities
|
|
837
|
+
```html
|
|
838
|
+
<span class="db-sr-only">Screen reader only</span>
|
|
839
|
+
<span class="db-text-muted">Muted</span>
|
|
840
|
+
<span class="db-text-accent">Accent</span>
|
|
841
|
+
<span class="db-text-error">Error</span>
|
|
842
|
+
<span class="db-text-success">Success</span>
|
|
843
|
+
```
|
|
844
|
+
Spacing: `db-mt-1` through `db-mt-6`, `db-mb-4`, `db-mb-5`.
|
|
845
|
+
Rounding: `db-rounded-0` through `db-rounded-full`.
|
|
846
|
+
|
|
847
|
+
### 66. Divider — `.db-divider`
|
|
848
|
+
```html
|
|
849
|
+
<hr class="db-divider">
|
|
850
|
+
```
|
|
851
|
+
|
|
852
|
+
### 67. Input with Icon — `.db-input-icon`
|
|
853
|
+
Positions: left (default), `db-input-icon--right`
|
|
854
|
+
Icon highlights on `:focus-within`.
|
|
855
|
+
```html
|
|
856
|
+
<div class="db-input-icon">
|
|
857
|
+
<span class="db-input-icon__icon">🔍</span>
|
|
858
|
+
<input class="db-input" placeholder="Search...">
|
|
859
|
+
</div>
|
|
860
|
+
<div class="db-input-icon db-input-icon--right">
|
|
861
|
+
<input class="db-input" type="email" placeholder="Email">
|
|
862
|
+
<span class="db-input-icon__icon">✉</span>
|
|
863
|
+
</div>
|
|
864
|
+
```
|
|
865
|
+
|
|
866
|
+
### 68. Search Input — `.db-search`
|
|
867
|
+
Search box with icon, clear button (auto-shows when input has text).
|
|
868
|
+
```html
|
|
869
|
+
<div class="db-search">
|
|
870
|
+
<svg class="db-search__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
871
|
+
<input class="db-input" type="search" placeholder="Search...">
|
|
872
|
+
<button class="db-search__clear" aria-label="Clear">×</button>
|
|
873
|
+
</div>
|
|
874
|
+
```
|
|
875
|
+
|
|
876
|
+
### 69. Bottom Navigation — `.db-bottom-nav`
|
|
877
|
+
Fixed mobile bottom bar. Hidden on desktop unless `db-bottom-nav--always`.
|
|
878
|
+
Badge: `db-bottom-nav__badge`. Safe-area aware via `env(safe-area-inset-bottom)`.
|
|
879
|
+
```html
|
|
880
|
+
<nav class="db-bottom-nav db-bottom-nav--always">
|
|
881
|
+
<a class="db-bottom-nav__item db-bottom-nav__item--active" href="#">
|
|
882
|
+
<svg>...</svg>
|
|
883
|
+
<span>Home</span>
|
|
884
|
+
</a>
|
|
885
|
+
<a class="db-bottom-nav__item" href="#">
|
|
886
|
+
<svg>...</svg>
|
|
887
|
+
<span>Search</span>
|
|
888
|
+
<span class="db-bottom-nav__badge">3</span>
|
|
889
|
+
</a>
|
|
890
|
+
<a class="db-bottom-nav__item" href="#">
|
|
891
|
+
<svg>...</svg>
|
|
892
|
+
<span>Profile</span>
|
|
893
|
+
</a>
|
|
894
|
+
</nav>
|
|
895
|
+
```
|
|
896
|
+
|
|
897
|
+
### 70. Chip / Tag — `.db-chip`
|
|
898
|
+
Presets: `db-chip--red`, `--green`, `--blue`, `--purple`, `--amber`, `--pink`.
|
|
899
|
+
Arbitrary color: `style="--db-chip-h:195; --db-chip-s:70%; --db-chip-l:42%"`.
|
|
900
|
+
Active/selected: `db-chip--active` (deeper fill, stronger border, bold).
|
|
901
|
+
Removable: add `db-chip__close` button (JS animated removal).
|
|
902
|
+
Toggle group: wrap chips in a container with `data-db-chip-toggle` — clicks toggle `db-chip--active`.
|
|
903
|
+
```html
|
|
904
|
+
<span class="db-chip db-chip--blue">Design</span>
|
|
905
|
+
<span class="db-chip db-chip--green db-chip--active">Selected</span>
|
|
906
|
+
<span class="db-chip db-chip--green">
|
|
907
|
+
Active
|
|
908
|
+
<button class="db-chip__close">×</button>
|
|
909
|
+
</span>
|
|
910
|
+
|
|
911
|
+
<!-- Toggle group (click to select/deselect) -->
|
|
912
|
+
<div data-db-chip-toggle>
|
|
913
|
+
<span class="db-chip db-chip--blue">Design</span>
|
|
914
|
+
<span class="db-chip db-chip--green">Dev</span>
|
|
915
|
+
<span class="db-chip db-chip--amber db-chip--active">Marketing</span>
|
|
916
|
+
</div>
|
|
917
|
+
```
|
|
918
|
+
|
|
919
|
+
## JS API Reference
|
|
920
|
+
|
|
921
|
+
```js
|
|
922
|
+
DAUB.init() // Re-initialize all components
|
|
923
|
+
DAUB.toast('Quick message') // String shorthand → info toast
|
|
924
|
+
DAUB.toast({ type, title, message, duration })
|
|
925
|
+
DAUB.openModal(idOrEl) // Open modal by id string or element
|
|
926
|
+
DAUB.closeModal(idOrEl) // Close modal by id string or element
|
|
927
|
+
DAUB.openAlertDialog(id) // Open alert dialog
|
|
928
|
+
DAUB.closeAlertDialog(id) // Close alert dialog
|
|
929
|
+
DAUB.openSheet(id) // Open sheet panel
|
|
930
|
+
DAUB.closeSheet(id) // Close sheet
|
|
931
|
+
DAUB.openDrawer(id) // Open drawer
|
|
932
|
+
DAUB.closeDrawer(id) // Close drawer
|
|
933
|
+
DAUB.openCommand(id) // Open command palette
|
|
934
|
+
DAUB.closeCommand(id) // Close command palette
|
|
935
|
+
DAUB.toggleSidebar(el) // Toggle sidebar collapse
|
|
936
|
+
DAUB.toggleNavbar(el) // Toggle mobile navbar menu
|
|
937
|
+
DAUB.refreshIcons() // Re-init Lucide icons after dynamic content
|
|
938
|
+
DAUB.setTheme(name) // Set theme (direct)
|
|
939
|
+
DAUB.getTheme() // Get current theme
|
|
940
|
+
DAUB.cycleTheme() // Cycle through 20 families
|
|
941
|
+
DAUB.THEMES // Array of all theme names
|
|
942
|
+
DAUB.setFamily(name) // Set theme family (20 families across 4 categories)
|
|
943
|
+
DAUB.getFamily() // Get current family
|
|
944
|
+
DAUB.setScheme(mode) // Set color scheme (auto/light/dark)
|
|
945
|
+
DAUB.getScheme() // Get current scheme
|
|
946
|
+
DAUB.THEME_FAMILIES // Family → {light, dark} map
|
|
947
|
+
DAUB.FAMILY_NAMES // Array of 20 family names
|
|
948
|
+
DAUB.THEME_CATEGORIES // Category → family[] map
|
|
949
|
+
DAUB.CATEGORY_NAMES // Array of category names
|
|
950
|
+
DAUB.getCategory(family) // Get category for a family name
|
|
951
|
+
DAUB.setAccent(hex) // Override accent color
|
|
952
|
+
DAUB.resetAccent() // Restore theme default accent
|
|
953
|
+
DAUB.getAccent() // Get current accent color
|
|
954
|
+
DAUB.getColor(token) // Get computed CSS variable value (e.g. 'terracotta' → --db-terracotta)
|
|
955
|
+
```
|
|
956
|
+
|
|
957
|
+
## CSS Custom Properties
|
|
958
|
+
|
|
959
|
+
Core: `--db-cream`, `--db-cream-dark`, `--db-sand`, `--db-terracotta`, `--db-clay`, `--db-warm-gray`, `--db-charcoal`, `--db-ink`, `--db-white`
|
|
960
|
+
Accents: `--db-accent-dark`, `--db-accent-light`, `--db-accent-hover`, `--db-accent-pressed`
|
|
961
|
+
Status: `--db-error`, `--db-success`, `--db-warning`
|
|
962
|
+
Semantic (theme-aware aliases): `--db-color-bg`, `--db-color-bg-alt`, `--db-color-surface`, `--db-color-text`, `--db-color-text-secondary`, `--db-color-text-muted`, `--db-color-border`, `--db-color-accent`, `--db-color-accent-hover`, `--db-color-success`, `--db-color-warning`, `--db-color-error`, `--db-color-overlay`
|
|
963
|
+
RGB channels: `--db-color-bg-rgb`, `--db-color-text-rgb`, `--db-color-surface-rgb`, `--db-color-accent-rgb`, `--db-color-border-rgb`
|
|
964
|
+
Fonts: `--db-font-heading`, `--db-font-body`, `--db-font-ui`
|
|
965
|
+
Spacing: `--db-space-0` through `--db-space-9`
|
|
966
|
+
Radius: `--db-radius-0` through `--db-radius-4`, `--db-radius-full`
|
|
967
|
+
Shadows: `--db-shadow-1`, `--db-shadow-2`, `--db-shadow-3`, `--db-shadow-inset`
|
|
968
|
+
|
|
969
|
+
## Data Attributes Reference
|
|
970
|
+
|
|
971
|
+
| Attribute | Element | Purpose |
|
|
972
|
+
|-----------|---------|---------|
|
|
973
|
+
| `data-theme` | `<html>` | Active theme variant (`light`, `dark`, `ink`, etc.) |
|
|
974
|
+
| `data-scheme` | `<html>` | Color scheme preference (`auto`, `light`, `dark`) |
|
|
975
|
+
| `data-db-texture` | `<html>` | Background texture (`grain`, `paper`, `metal`, `wood`, `glass`, `none`) |
|
|
976
|
+
| `data-db-modal-trigger` | button | Opens modal with matching ID on click |
|
|
977
|
+
| `data-db-chip-toggle` | container | Enables click-to-toggle `db-chip--active` on child chips |
|
|
978
|
+
| `data-db-sort` | `<th>` | Makes table column sortable |
|
|
979
|
+
| `data-multi` | accordion/toggle-group | Allows multiple items open simultaneously |
|
|
980
|
+
| `data-tooltip` | sidebar item | Tooltip text shown when sidebar is collapsed |
|
|
981
|
+
| `data-context-menu` | any element | ID of context menu to show on right-click |
|
|
982
|
+
| `data-action="cancel"` | button | Auto-closes parent alert dialog |
|
|
983
|
+
| `data-family` | button | Theme switcher family button (`default`, `grunge`, etc.) |
|
|
984
|
+
| `data-scheme` | button | Theme switcher scheme button (`auto`, `light`, `dark`) |
|
|
985
|
+
| `data-sortable` | `<th>` | Data table sortable column |
|
|
986
|
+
|
|
987
|
+
## Full-Page Recipes
|
|
988
|
+
|
|
989
|
+
### Recipe 1: Dashboard with Sidebar
|
|
990
|
+
|
|
991
|
+
```html
|
|
992
|
+
<!DOCTYPE html>
|
|
993
|
+
<html data-theme="light">
|
|
994
|
+
<head>
|
|
995
|
+
<meta charset="utf-8">
|
|
996
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
997
|
+
<title>Dashboard</title>
|
|
998
|
+
<link rel="stylesheet" href="https://daub.dev/daub.css">
|
|
999
|
+
</head>
|
|
1000
|
+
<body>
|
|
1001
|
+
<nav class="db-navbar">
|
|
1002
|
+
<a class="db-navbar__brand" href="/">Dashboard</a>
|
|
1003
|
+
<div class="db-navbar__nav">
|
|
1004
|
+
<div class="db-nav-menu">
|
|
1005
|
+
<a class="db-nav-menu__item db-nav-menu__item--active" href="/">Overview</a>
|
|
1006
|
+
<a class="db-nav-menu__item" href="/reports">Reports</a>
|
|
1007
|
+
</div>
|
|
1008
|
+
</div>
|
|
1009
|
+
<div class="db-navbar__spacer"></div>
|
|
1010
|
+
<div class="db-navbar__actions">
|
|
1011
|
+
<button class="db-btn db-btn--icon" aria-label="Notifications">🔔</button>
|
|
1012
|
+
<div class="db-avatar db-avatar--sm">JD</div>
|
|
1013
|
+
</div>
|
|
1014
|
+
<button class="db-navbar__toggle" aria-label="Menu">☰</button>
|
|
1015
|
+
</nav>
|
|
1016
|
+
|
|
1017
|
+
<div class="db-flex" style="min-height:calc(100vh - 56px);">
|
|
1018
|
+
<aside class="db-sidebar db-hide-mobile">
|
|
1019
|
+
<div class="db-sidebar__section">
|
|
1020
|
+
<div class="db-sidebar__label">Main</div>
|
|
1021
|
+
<a class="db-sidebar__item db-sidebar__item--active" href="#">Dashboard</a>
|
|
1022
|
+
<a class="db-sidebar__item" href="#">Analytics</a>
|
|
1023
|
+
<a class="db-sidebar__item" href="#">Settings</a>
|
|
1024
|
+
</div>
|
|
1025
|
+
</aside>
|
|
1026
|
+
|
|
1027
|
+
<main class="db-container" style="flex:1; padding-top:var(--db-space-6);">
|
|
1028
|
+
<div class="db-grid db-grid--3 db-gap-4 db-mb-5">
|
|
1029
|
+
<div class="db-card">
|
|
1030
|
+
<div class="db-card__header"><h3 class="db-card__title">Revenue</h3></div>
|
|
1031
|
+
<p class="db-h2">$12,450</p>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div class="db-card">
|
|
1034
|
+
<div class="db-card__header"><h3 class="db-card__title">Users</h3></div>
|
|
1035
|
+
<p class="db-h2">1,284</p>
|
|
1036
|
+
</div>
|
|
1037
|
+
<div class="db-card">
|
|
1038
|
+
<div class="db-card__header"><h3 class="db-card__title">Orders</h3></div>
|
|
1039
|
+
<p class="db-h2">342</p>
|
|
1040
|
+
</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
|
|
1043
|
+
<div class="db-card">
|
|
1044
|
+
<div class="db-card__header"><h3 class="db-card__title">Recent Orders</h3></div>
|
|
1045
|
+
<table class="db-table">
|
|
1046
|
+
<thead><tr><th>Customer</th><th>Amount</th><th>Status</th></tr></thead>
|
|
1047
|
+
<tbody>
|
|
1048
|
+
<tr><td>Alice</td><td>$120</td><td><span class="db-badge db-badge--new">Paid</span></td></tr>
|
|
1049
|
+
<tr><td>Bob</td><td>$85</td><td><span class="db-badge db-badge--warning">Pending</span></td></tr>
|
|
1050
|
+
</tbody>
|
|
1051
|
+
</table>
|
|
1052
|
+
</div>
|
|
1053
|
+
</main>
|
|
1054
|
+
</div>
|
|
1055
|
+
|
|
1056
|
+
<script src="https://daub.dev/daub.js"></script>
|
|
1057
|
+
</body>
|
|
1058
|
+
</html>
|
|
1059
|
+
```
|
|
1060
|
+
|
|
1061
|
+
### Recipe 2: Image Card Grid (Pinterest-style)
|
|
1062
|
+
|
|
1063
|
+
```html
|
|
1064
|
+
<!DOCTYPE html>
|
|
1065
|
+
<html data-theme="light">
|
|
1066
|
+
<head>
|
|
1067
|
+
<meta charset="utf-8">
|
|
1068
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
1069
|
+
<title>Explore</title>
|
|
1070
|
+
<link rel="stylesheet" href="https://daub.dev/daub.css">
|
|
1071
|
+
</head>
|
|
1072
|
+
<body>
|
|
1073
|
+
<nav class="db-navbar">
|
|
1074
|
+
<a class="db-navbar__brand" href="/">Pinboard</a>
|
|
1075
|
+
<div class="db-navbar__nav">
|
|
1076
|
+
<div class="db-nav-menu">
|
|
1077
|
+
<a class="db-nav-menu__item db-nav-menu__item--active" href="/">Home</a>
|
|
1078
|
+
<a class="db-nav-menu__item" href="/explore">Explore</a>
|
|
1079
|
+
</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
<div class="db-navbar__spacer"></div>
|
|
1082
|
+
<div class="db-navbar__actions">
|
|
1083
|
+
<div class="db-search db-hide-mobile">
|
|
1084
|
+
<svg class="db-search__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
1085
|
+
<input class="db-input" type="search" placeholder="Search pins...">
|
|
1086
|
+
<button class="db-search__clear" aria-label="Clear">×</button>
|
|
1087
|
+
</div>
|
|
1088
|
+
<div class="db-avatar db-avatar--sm"><img src="user.jpg" alt=""></div>
|
|
1089
|
+
</div>
|
|
1090
|
+
<button class="db-navbar__toggle" aria-label="Menu">☰</button>
|
|
1091
|
+
</nav>
|
|
1092
|
+
|
|
1093
|
+
<main class="db-container db-container--wide" style="padding-top:var(--db-space-6);">
|
|
1094
|
+
<div data-db-chip-toggle class="db-flex db-flex--wrap db-gap-2 db-mb-5">
|
|
1095
|
+
<span class="db-chip db-chip--blue db-chip--active">All</span>
|
|
1096
|
+
<span class="db-chip db-chip--green">Nature</span>
|
|
1097
|
+
<span class="db-chip db-chip--amber">Food</span>
|
|
1098
|
+
<span class="db-chip db-chip--purple">Art</span>
|
|
1099
|
+
<span class="db-chip db-chip--pink">Travel</span>
|
|
1100
|
+
</div>
|
|
1101
|
+
|
|
1102
|
+
<div class="db-grid db-grid--4 db-gap-4">
|
|
1103
|
+
<div class="db-card db-card--media">
|
|
1104
|
+
<div class="db-card__media"><img src="photo1.jpg" alt=""></div>
|
|
1105
|
+
<div class="db-card__body">
|
|
1106
|
+
<h3 class="db-card__title">Mountain Sunrise</h3>
|
|
1107
|
+
<p class="db-card__desc">Beautiful morning light over the peaks.</p>
|
|
1108
|
+
</div>
|
|
1109
|
+
<div class="db-card__footer">
|
|
1110
|
+
<div class="db-avatar-group">
|
|
1111
|
+
<div class="db-avatar db-avatar--sm"><img src="u1.jpg" alt=""></div>
|
|
1112
|
+
<div class="db-avatar db-avatar--sm"><img src="u2.jpg" alt=""></div>
|
|
1113
|
+
<span class="db-avatar-group__overflow">+3</span>
|
|
1114
|
+
</div>
|
|
1115
|
+
</div>
|
|
1116
|
+
</div>
|
|
1117
|
+
<!-- Repeat cards... -->
|
|
1118
|
+
</div>
|
|
1119
|
+
</main>
|
|
1120
|
+
|
|
1121
|
+
<script src="https://daub.dev/daub.js"></script>
|
|
1122
|
+
</body>
|
|
1123
|
+
</html>
|
|
1124
|
+
```
|
|
1125
|
+
|
|
1126
|
+
### Recipe 3: Settings Form
|
|
1127
|
+
|
|
1128
|
+
```html
|
|
1129
|
+
<!DOCTYPE html>
|
|
1130
|
+
<html data-theme="light">
|
|
1131
|
+
<head>
|
|
1132
|
+
<meta charset="utf-8">
|
|
1133
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
1134
|
+
<title>Settings</title>
|
|
1135
|
+
<link rel="stylesheet" href="https://daub.dev/daub.css">
|
|
1136
|
+
</head>
|
|
1137
|
+
<body>
|
|
1138
|
+
<nav class="db-navbar">
|
|
1139
|
+
<a class="db-navbar__brand" href="/">MyApp</a>
|
|
1140
|
+
<div class="db-navbar__nav">
|
|
1141
|
+
<div class="db-nav-menu">
|
|
1142
|
+
<a class="db-nav-menu__item" href="/">Home</a>
|
|
1143
|
+
<a class="db-nav-menu__item db-nav-menu__item--active" href="/settings">Settings</a>
|
|
1144
|
+
</div>
|
|
1145
|
+
</div>
|
|
1146
|
+
<div class="db-navbar__spacer"></div>
|
|
1147
|
+
<div class="db-navbar__actions">
|
|
1148
|
+
<div class="db-avatar db-avatar--sm">JD</div>
|
|
1149
|
+
</div>
|
|
1150
|
+
<button class="db-navbar__toggle" aria-label="Menu">☰</button>
|
|
1151
|
+
</nav>
|
|
1152
|
+
|
|
1153
|
+
<main class="db-container db-container--narrow" style="padding-top:var(--db-space-6);">
|
|
1154
|
+
<h1 class="db-h2 db-mb-5">Account Settings</h1>
|
|
1155
|
+
|
|
1156
|
+
<div class="db-card db-mb-5">
|
|
1157
|
+
<div class="db-card__header"><h3 class="db-card__title">Profile</h3></div>
|
|
1158
|
+
<div class="db-flex db-gap-4 db-mb-4" style="align-items:center;">
|
|
1159
|
+
<div class="db-avatar db-avatar--lg"><img src="photo.jpg" alt=""></div>
|
|
1160
|
+
<button class="db-btn db-btn--secondary db-btn--sm">Change Photo</button>
|
|
1161
|
+
</div>
|
|
1162
|
+
<div class="db-field db-mb-4">
|
|
1163
|
+
<label class="db-field__label">Display Name</label>
|
|
1164
|
+
<input class="db-field__input" type="text" value="Jane Doe">
|
|
1165
|
+
</div>
|
|
1166
|
+
<div class="db-field db-mb-4">
|
|
1167
|
+
<label class="db-field__label">Email</label>
|
|
1168
|
+
<input class="db-field__input" type="email" value="jane@example.com">
|
|
1169
|
+
<span class="db-field__helper">We'll never share your email.</span>
|
|
1170
|
+
</div>
|
|
1171
|
+
<div class="db-field">
|
|
1172
|
+
<label class="db-field__label">Bio</label>
|
|
1173
|
+
<textarea class="db-textarea" rows="3">Designer & developer</textarea>
|
|
1174
|
+
</div>
|
|
1175
|
+
</div>
|
|
1176
|
+
|
|
1177
|
+
<div class="db-card db-mb-5">
|
|
1178
|
+
<div class="db-card__header"><h3 class="db-card__title">Notifications</h3></div>
|
|
1179
|
+
<div class="db-flex" style="justify-content:space-between; align-items:center;" class="db-mb-4">
|
|
1180
|
+
<span>Email notifications</span>
|
|
1181
|
+
<div class="db-switch" role="switch" tabindex="0" aria-checked="true">
|
|
1182
|
+
<span class="db-switch__track"><span class="db-switch__thumb"></span></span>
|
|
1183
|
+
</div>
|
|
1184
|
+
</div>
|
|
1185
|
+
<hr class="db-separator">
|
|
1186
|
+
<div class="db-flex" style="justify-content:space-between; align-items:center;">
|
|
1187
|
+
<span>Push notifications</span>
|
|
1188
|
+
<div class="db-switch" role="switch" tabindex="0" aria-checked="false">
|
|
1189
|
+
<span class="db-switch__track"><span class="db-switch__thumb"></span></span>
|
|
1190
|
+
</div>
|
|
1191
|
+
</div>
|
|
1192
|
+
</div>
|
|
1193
|
+
|
|
1194
|
+
<div class="db-flex db-gap-3" style="justify-content:flex-end;">
|
|
1195
|
+
<button class="db-btn db-btn--secondary">Cancel</button>
|
|
1196
|
+
<button class="db-btn db-btn--primary">Save Changes</button>
|
|
1197
|
+
</div>
|
|
1198
|
+
</main>
|
|
1199
|
+
|
|
1200
|
+
<script src="https://daub.dev/daub.js"></script>
|
|
1201
|
+
</body>
|
|
1202
|
+
</html>
|
|
1203
|
+
```
|
|
1204
|
+
|
|
1205
|
+
## Chart.js Integration Recipe
|
|
1206
|
+
|
|
1207
|
+
Use `DAUB.getColor()` to read theme tokens for chart libraries:
|
|
1208
|
+
|
|
1209
|
+
```js
|
|
1210
|
+
const chart = new Chart(document.getElementById('revenue'), {
|
|
1211
|
+
type: 'bar',
|
|
1212
|
+
data: {
|
|
1213
|
+
labels: ['Jan','Feb','Mar','Apr','May','Jun'],
|
|
1214
|
+
datasets: [{
|
|
1215
|
+
label: 'Revenue',
|
|
1216
|
+
data: [12, 19, 3, 5, 2, 3],
|
|
1217
|
+
backgroundColor: DAUB.getColor('terracotta'),
|
|
1218
|
+
borderColor: DAUB.getColor('clay'),
|
|
1219
|
+
borderWidth: 1
|
|
1220
|
+
}]
|
|
1221
|
+
},
|
|
1222
|
+
options: {
|
|
1223
|
+
plugins: { legend: { labels: { color: DAUB.getColor('charcoal') } } },
|
|
1224
|
+
scales: {
|
|
1225
|
+
x: { ticks: { color: DAUB.getColor('warm-gray') }, grid: { color: DAUB.getColor('sand') } },
|
|
1226
|
+
y: { ticks: { color: DAUB.getColor('warm-gray') }, grid: { color: DAUB.getColor('sand') } }
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
});
|
|
1230
|
+
```
|
|
1231
|
+
|
|
1232
|
+
Wrap the canvas inside `db-chart-card` for consistent card framing:
|
|
1233
|
+
```html
|
|
1234
|
+
<div class="db-chart-card">
|
|
1235
|
+
<div class="db-chart-card__header">
|
|
1236
|
+
<span class="db-chart-card__title">Monthly Revenue</span>
|
|
1237
|
+
</div>
|
|
1238
|
+
<div class="db-chart-card__body">
|
|
1239
|
+
<canvas id="revenue"></canvas>
|
|
1240
|
+
</div>
|
|
1241
|
+
</div>
|
|
1242
|
+
```
|