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/components.json
ADDED
|
@@ -0,0 +1,1044 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": "2.3.0",
|
|
3
|
+
"prefix": "db-",
|
|
4
|
+
"cdn": {
|
|
5
|
+
"css": "https://daub.dev/daub.css",
|
|
6
|
+
"js": "https://daub.dev/daub.js"
|
|
7
|
+
},
|
|
8
|
+
"components": [
|
|
9
|
+
{
|
|
10
|
+
"name": "Button",
|
|
11
|
+
"class": "db-btn",
|
|
12
|
+
"category": "controls",
|
|
13
|
+
"element": "button",
|
|
14
|
+
"modifiers": ["--primary", "--secondary", "--ghost", "--sm", "--lg", "--icon", "--loading", "--disabled", "--pressed", "--icon-danger", "--icon-success", "--icon-accent"],
|
|
15
|
+
"children": [],
|
|
16
|
+
"js": false,
|
|
17
|
+
"html": "<button class=\"db-btn db-btn--primary\">Label</button>",
|
|
18
|
+
"notes": "Icon-only: add --icon. Loading: add --loading (disables pointer events). Ghost: transparent bg with hover fill."
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "Button Group",
|
|
22
|
+
"class": "db-btn-group",
|
|
23
|
+
"category": "controls",
|
|
24
|
+
"element": "div",
|
|
25
|
+
"modifiers": [],
|
|
26
|
+
"children": [],
|
|
27
|
+
"js": false,
|
|
28
|
+
"html": "<div class=\"db-btn-group\">\n <button class=\"db-btn db-btn--secondary\">Copy</button>\n <button class=\"db-btn db-btn--secondary\">Paste</button>\n</div>",
|
|
29
|
+
"notes": "Groups buttons with connected borders. Children should be db-btn elements."
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "Text Field",
|
|
33
|
+
"class": "db-field",
|
|
34
|
+
"category": "controls",
|
|
35
|
+
"element": "div",
|
|
36
|
+
"modifiers": ["--error"],
|
|
37
|
+
"children": [
|
|
38
|
+
{ "class": "db-field__label", "element": "label", "required": false },
|
|
39
|
+
{ "class": "db-field__input", "element": "input", "required": true },
|
|
40
|
+
{ "class": "db-field__helper", "element": "span", "required": false }
|
|
41
|
+
],
|
|
42
|
+
"js": false,
|
|
43
|
+
"html": "<div class=\"db-field\">\n <label class=\"db-field__label\">Email</label>\n <input class=\"db-field__input\" type=\"email\" placeholder=\"you@example.com\">\n <span class=\"db-field__helper\">We'll never share your email.</span>\n</div>",
|
|
44
|
+
"notes": "Error state: add db-field--error to wrapper."
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "Input",
|
|
48
|
+
"class": "db-input",
|
|
49
|
+
"category": "controls",
|
|
50
|
+
"element": "input",
|
|
51
|
+
"modifiers": ["--sm", "--lg", "--error"],
|
|
52
|
+
"children": [],
|
|
53
|
+
"js": false,
|
|
54
|
+
"html": "<input class=\"db-input\" type=\"text\" placeholder=\"Standalone input\">",
|
|
55
|
+
"notes": "Standalone text input. Use db-field for label+helper combos."
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": "Input Group",
|
|
59
|
+
"class": "db-input-group",
|
|
60
|
+
"category": "controls",
|
|
61
|
+
"element": "div",
|
|
62
|
+
"modifiers": [],
|
|
63
|
+
"children": [
|
|
64
|
+
{ "class": "db-input-group__addon", "element": "span", "required": false }
|
|
65
|
+
],
|
|
66
|
+
"js": false,
|
|
67
|
+
"html": "<div class=\"db-input-group\">\n <span class=\"db-input-group__addon\">https://</span>\n <input class=\"db-input\" type=\"text\" placeholder=\"example.com\">\n</div>",
|
|
68
|
+
"notes": "Combine addon spans and db-input/db-btn children."
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"name": "Input with Icon",
|
|
72
|
+
"class": "db-input-icon",
|
|
73
|
+
"category": "controls",
|
|
74
|
+
"element": "div",
|
|
75
|
+
"modifiers": ["--right"],
|
|
76
|
+
"children": [
|
|
77
|
+
{ "class": "db-input-icon__icon", "element": "span", "required": true }
|
|
78
|
+
],
|
|
79
|
+
"js": false,
|
|
80
|
+
"html": "<div class=\"db-input-icon\">\n <span class=\"db-input-icon__icon\">\ud83d\udd0d</span>\n <input class=\"db-input\" placeholder=\"Search...\">\n</div>",
|
|
81
|
+
"notes": "Icon highlights on :focus-within. Use --right for trailing icon."
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "Search Input",
|
|
85
|
+
"class": "db-search",
|
|
86
|
+
"category": "controls",
|
|
87
|
+
"element": "div",
|
|
88
|
+
"modifiers": [],
|
|
89
|
+
"children": [
|
|
90
|
+
{ "class": "db-search__icon", "element": "svg", "required": false },
|
|
91
|
+
{ "class": "db-search__clear", "element": "button", "required": false }
|
|
92
|
+
],
|
|
93
|
+
"js": false,
|
|
94
|
+
"html": "<div class=\"db-search\">\n <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>\n <input class=\"db-input\" type=\"search\" placeholder=\"Search...\">\n <button class=\"db-search__clear\" aria-label=\"Clear\">×</button>\n</div>",
|
|
95
|
+
"notes": "Clear button auto-shows when input has text."
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "Textarea",
|
|
99
|
+
"class": "db-textarea",
|
|
100
|
+
"category": "controls",
|
|
101
|
+
"element": "textarea",
|
|
102
|
+
"modifiers": ["--error"],
|
|
103
|
+
"children": [],
|
|
104
|
+
"js": false,
|
|
105
|
+
"html": "<textarea class=\"db-textarea\" placeholder=\"Write here...\"></textarea>",
|
|
106
|
+
"notes": "Error state: add db-textarea--error."
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"name": "Checkbox",
|
|
110
|
+
"class": "db-checkbox",
|
|
111
|
+
"category": "controls",
|
|
112
|
+
"element": "label",
|
|
113
|
+
"modifiers": [],
|
|
114
|
+
"children": [
|
|
115
|
+
{ "class": "db-checkbox__input", "element": "input", "required": true },
|
|
116
|
+
{ "class": "db-checkbox__box", "element": "span", "required": true }
|
|
117
|
+
],
|
|
118
|
+
"js": true,
|
|
119
|
+
"html": "<label class=\"db-checkbox\">\n <input class=\"db-checkbox__input\" type=\"checkbox\">\n <span class=\"db-checkbox__box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"/></svg></span>\n Accept terms\n</label>",
|
|
120
|
+
"notes": "JS handles visual state sync."
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "Radio",
|
|
124
|
+
"class": "db-radio",
|
|
125
|
+
"category": "controls",
|
|
126
|
+
"element": "label",
|
|
127
|
+
"modifiers": [],
|
|
128
|
+
"children": [
|
|
129
|
+
{ "class": "db-radio__input", "element": "input", "required": true },
|
|
130
|
+
{ "class": "db-radio__circle", "element": "span", "required": true }
|
|
131
|
+
],
|
|
132
|
+
"js": true,
|
|
133
|
+
"html": "<label class=\"db-radio\">\n <input class=\"db-radio__input\" type=\"radio\" name=\"plan\" value=\"free\">\n <span class=\"db-radio__circle\"></span>\n Free\n</label>",
|
|
134
|
+
"notes": "Wrap in db-radio-group for grouped radios."
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"name": "Radio Group",
|
|
138
|
+
"class": "db-radio-group",
|
|
139
|
+
"category": "controls",
|
|
140
|
+
"element": "div",
|
|
141
|
+
"modifiers": [],
|
|
142
|
+
"children": [],
|
|
143
|
+
"js": false,
|
|
144
|
+
"html": "<div class=\"db-radio-group\">\n <label class=\"db-radio\">\n <input class=\"db-radio__input\" type=\"radio\" name=\"plan\" value=\"free\">\n <span class=\"db-radio__circle\"></span>\n Free\n </label>\n</div>",
|
|
145
|
+
"notes": "Groups db-radio children with consistent spacing."
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"name": "Switch",
|
|
149
|
+
"class": "db-switch",
|
|
150
|
+
"category": "controls",
|
|
151
|
+
"element": "div",
|
|
152
|
+
"modifiers": [],
|
|
153
|
+
"children": [
|
|
154
|
+
{ "class": "db-switch__track", "element": "span", "required": true },
|
|
155
|
+
{ "class": "db-switch__thumb", "element": "span", "required": true }
|
|
156
|
+
],
|
|
157
|
+
"js": true,
|
|
158
|
+
"html": "<div class=\"db-switch\" role=\"switch\" tabindex=\"0\" aria-checked=\"false\">\n <span class=\"db-switch__track\"><span class=\"db-switch__thumb\"></span></span>\n Label\n</div>",
|
|
159
|
+
"notes": "JS toggles aria-checked on click/keypress."
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "Slider",
|
|
163
|
+
"class": "db-slider",
|
|
164
|
+
"category": "controls",
|
|
165
|
+
"element": "div",
|
|
166
|
+
"modifiers": [],
|
|
167
|
+
"children": [
|
|
168
|
+
{ "class": "db-slider__label", "element": "div", "required": false },
|
|
169
|
+
{ "class": "db-slider__value", "element": "span", "required": false },
|
|
170
|
+
{ "class": "db-slider__input", "element": "input", "required": true }
|
|
171
|
+
],
|
|
172
|
+
"js": true,
|
|
173
|
+
"html": "<div class=\"db-slider\">\n <div class=\"db-slider__label\"><span>Volume</span><span class=\"db-slider__value\">50</span></div>\n <input class=\"db-slider__input\" type=\"range\" min=\"0\" max=\"100\" value=\"50\">\n</div>",
|
|
174
|
+
"notes": "JS syncs __value text with range input."
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "Toggle",
|
|
178
|
+
"class": "db-toggle",
|
|
179
|
+
"category": "controls",
|
|
180
|
+
"element": "button",
|
|
181
|
+
"modifiers": ["--active", "--sm"],
|
|
182
|
+
"children": [],
|
|
183
|
+
"js": true,
|
|
184
|
+
"html": "<button class=\"db-toggle\" aria-pressed=\"false\">Bold</button>",
|
|
185
|
+
"notes": "Active state via aria-pressed=\"true\" or db-toggle--active."
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"name": "Toggle Group",
|
|
189
|
+
"class": "db-toggle-group",
|
|
190
|
+
"category": "controls",
|
|
191
|
+
"element": "div",
|
|
192
|
+
"modifiers": [],
|
|
193
|
+
"children": [],
|
|
194
|
+
"js": true,
|
|
195
|
+
"html": "<div class=\"db-toggle-group\">\n <button class=\"db-toggle\" aria-pressed=\"true\">Left</button>\n <button class=\"db-toggle\" aria-pressed=\"false\">Center</button>\n <button class=\"db-toggle\" aria-pressed=\"false\">Right</button>\n</div>",
|
|
196
|
+
"notes": "Single select by default. Add data-multi for multi-select."
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "Native Select",
|
|
200
|
+
"class": "db-select",
|
|
201
|
+
"category": "controls",
|
|
202
|
+
"element": "div",
|
|
203
|
+
"modifiers": [],
|
|
204
|
+
"children": [
|
|
205
|
+
{ "class": "db-select__input", "element": "select", "required": true }
|
|
206
|
+
],
|
|
207
|
+
"js": false,
|
|
208
|
+
"html": "<div class=\"db-select\">\n <label class=\"db-label\">Framework</label>\n <select class=\"db-select__input\">\n <option value=\"\">Choose...</option>\n <option>React</option>\n </select>\n</div>",
|
|
209
|
+
"notes": "Styled native select element."
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "Custom Select",
|
|
213
|
+
"class": "db-custom-select",
|
|
214
|
+
"category": "controls",
|
|
215
|
+
"element": "div",
|
|
216
|
+
"modifiers": ["--open"],
|
|
217
|
+
"children": [
|
|
218
|
+
{ "class": "db-custom-select__trigger", "element": "button", "required": true },
|
|
219
|
+
{ "class": "db-custom-select__dropdown", "element": "div", "required": true },
|
|
220
|
+
{ "class": "db-custom-select__option", "element": "div", "required": true },
|
|
221
|
+
{ "class": "db-custom-select__search", "element": "div", "required": false }
|
|
222
|
+
],
|
|
223
|
+
"js": true,
|
|
224
|
+
"html": "<div class=\"db-custom-select\">\n <button class=\"db-custom-select__trigger\" type=\"button\">\n <span class=\"db-custom-select__placeholder\">Select...</span>\n <svg class=\"db-custom-select__icon\" viewBox=\"0 0 24 24\"><path d=\"m6 9 6 6 6-6\"/></svg>\n </button>\n <div class=\"db-custom-select__dropdown\">\n <div class=\"db-custom-select__option\">Option A</div>\n <div class=\"db-custom-select__option\">Option B</div>\n </div>\n</div>",
|
|
225
|
+
"notes": "JS auto-initializes. Optional search filter via __search child."
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "Label",
|
|
229
|
+
"class": "db-label",
|
|
230
|
+
"category": "foundations",
|
|
231
|
+
"element": "label",
|
|
232
|
+
"modifiers": ["--required", "--optional"],
|
|
233
|
+
"children": [],
|
|
234
|
+
"js": false,
|
|
235
|
+
"html": "<label class=\"db-label db-label--required\">Email</label>",
|
|
236
|
+
"notes": "--required appends *, --optional appends (optional)."
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"name": "Kbd",
|
|
240
|
+
"class": "db-kbd",
|
|
241
|
+
"category": "foundations",
|
|
242
|
+
"element": "kbd",
|
|
243
|
+
"modifiers": ["--sm"],
|
|
244
|
+
"children": [],
|
|
245
|
+
"js": false,
|
|
246
|
+
"html": "<kbd class=\"db-kbd\">Ctrl</kbd> + <kbd class=\"db-kbd\">K</kbd>",
|
|
247
|
+
"notes": "Keyboard key display. Use --sm for smaller inline size."
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "Spinner",
|
|
251
|
+
"class": "db-spinner",
|
|
252
|
+
"category": "feedback",
|
|
253
|
+
"element": "span",
|
|
254
|
+
"modifiers": ["--sm", "--lg", "--xl"],
|
|
255
|
+
"children": [],
|
|
256
|
+
"js": false,
|
|
257
|
+
"html": "<span class=\"db-spinner\"></span>",
|
|
258
|
+
"notes": "Animated loading spinner. Inherits current text color."
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "Input OTP",
|
|
262
|
+
"class": "db-otp",
|
|
263
|
+
"category": "controls",
|
|
264
|
+
"element": "div",
|
|
265
|
+
"modifiers": [],
|
|
266
|
+
"children": [
|
|
267
|
+
{ "class": "db-otp__input", "element": "input", "required": true },
|
|
268
|
+
{ "class": "db-otp__separator", "element": "span", "required": false }
|
|
269
|
+
],
|
|
270
|
+
"js": true,
|
|
271
|
+
"html": "<div class=\"db-otp\">\n <input class=\"db-otp__input\" type=\"text\" inputmode=\"numeric\">\n <input class=\"db-otp__input\" type=\"text\" inputmode=\"numeric\">\n <input class=\"db-otp__input\" type=\"text\" inputmode=\"numeric\">\n <span class=\"db-otp__separator\">-</span>\n <input class=\"db-otp__input\" type=\"text\" inputmode=\"numeric\">\n <input class=\"db-otp__input\" type=\"text\" inputmode=\"numeric\">\n <input class=\"db-otp__input\" type=\"text\" inputmode=\"numeric\">\n</div>",
|
|
272
|
+
"notes": "JS auto-focuses next input and handles paste."
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "Tabs",
|
|
276
|
+
"class": "db-tabs",
|
|
277
|
+
"category": "navigation",
|
|
278
|
+
"element": "div",
|
|
279
|
+
"modifiers": [],
|
|
280
|
+
"children": [
|
|
281
|
+
{ "class": "db-tabs__list", "element": "div", "required": true },
|
|
282
|
+
{ "class": "db-tabs__tab", "element": "button", "required": true },
|
|
283
|
+
{ "class": "db-tabs__panel", "element": "div", "required": true }
|
|
284
|
+
],
|
|
285
|
+
"js": true,
|
|
286
|
+
"html": "<div class=\"db-tabs\">\n <div class=\"db-tabs__list\" role=\"tablist\">\n <button class=\"db-tabs__tab\" aria-selected=\"true\">Tab 1</button>\n <button class=\"db-tabs__tab\">Tab 2</button>\n </div>\n <div class=\"db-tabs__panel\">Content 1</div>\n <div class=\"db-tabs__panel\" hidden>Content 2</div>\n</div>",
|
|
287
|
+
"notes": "JS handles tab switching and panel visibility."
|
|
288
|
+
},
|
|
289
|
+
{
|
|
290
|
+
"name": "Card",
|
|
291
|
+
"class": "db-card",
|
|
292
|
+
"category": "data-display",
|
|
293
|
+
"element": "div",
|
|
294
|
+
"modifiers": ["--clip", "--media"],
|
|
295
|
+
"children": [
|
|
296
|
+
{ "class": "db-card__header", "element": "div", "required": false },
|
|
297
|
+
{ "class": "db-card__title", "element": "h3", "required": false },
|
|
298
|
+
{ "class": "db-card__desc", "element": "p", "required": false },
|
|
299
|
+
{ "class": "db-card__body", "element": "div", "required": false },
|
|
300
|
+
{ "class": "db-card__media", "element": "div", "required": false },
|
|
301
|
+
{ "class": "db-card__footer", "element": "div", "required": false }
|
|
302
|
+
],
|
|
303
|
+
"js": false,
|
|
304
|
+
"html": "<div class=\"db-card\">\n <div class=\"db-card__header\">\n <h3 class=\"db-card__title\">Title</h3>\n <p class=\"db-card__desc\">Description</p>\n </div>\n <div class=\"db-card__footer\">\n <button class=\"db-btn db-btn--primary db-btn--sm\">Action</button>\n </div>\n</div>",
|
|
305
|
+
"notes": "Default allows overflow (tooltips/dropdowns). Add --clip for overflow:hidden. --media for edge-to-edge images."
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"name": "Modal",
|
|
309
|
+
"class": "db-modal",
|
|
310
|
+
"category": "overlays",
|
|
311
|
+
"element": "div",
|
|
312
|
+
"modifiers": [],
|
|
313
|
+
"children": [
|
|
314
|
+
{ "class": "db-modal__header", "element": "div", "required": false },
|
|
315
|
+
{ "class": "db-modal__title", "element": "h2", "required": false },
|
|
316
|
+
{ "class": "db-modal__close", "element": "button", "required": false },
|
|
317
|
+
{ "class": "db-modal__body", "element": "div", "required": false },
|
|
318
|
+
{ "class": "db-modal__footer", "element": "div", "required": false }
|
|
319
|
+
],
|
|
320
|
+
"js": true,
|
|
321
|
+
"html": "<div class=\"db-modal-overlay\" id=\"my-modal\" aria-hidden=\"true\">\n <div class=\"db-modal\">\n <div class=\"db-modal__header\">\n <h2 class=\"db-modal__title\">Title</h2>\n <button class=\"db-modal__close\" aria-label=\"Close\">×</button>\n </div>\n <div class=\"db-modal__body\">Content</div>\n <div class=\"db-modal__footer\">\n <button class=\"db-btn db-btn--primary\">Confirm</button>\n </div>\n </div>\n</div>",
|
|
322
|
+
"notes": "Wrap in db-modal-overlay with id. Open: DAUB.openModal('id'). Close: DAUB.closeModal('id')."
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "Modal Overlay",
|
|
326
|
+
"class": "db-modal-overlay",
|
|
327
|
+
"category": "overlays",
|
|
328
|
+
"element": "div",
|
|
329
|
+
"modifiers": [],
|
|
330
|
+
"children": [],
|
|
331
|
+
"js": true,
|
|
332
|
+
"html": "<div class=\"db-modal-overlay\" id=\"my-modal\" aria-hidden=\"true\">\n <div class=\"db-modal\">...</div>\n</div>",
|
|
333
|
+
"notes": "Container for db-modal. Must have an id attribute for JS API."
|
|
334
|
+
},
|
|
335
|
+
{
|
|
336
|
+
"name": "Alert Dialog",
|
|
337
|
+
"class": "db-alert-dialog",
|
|
338
|
+
"category": "overlays",
|
|
339
|
+
"element": "div",
|
|
340
|
+
"modifiers": ["--open"],
|
|
341
|
+
"children": [
|
|
342
|
+
{ "class": "db-alert-dialog__overlay", "element": "div", "required": true },
|
|
343
|
+
{ "class": "db-alert-dialog__panel", "element": "div", "required": true },
|
|
344
|
+
{ "class": "db-alert-dialog__title", "element": "h3", "required": false },
|
|
345
|
+
{ "class": "db-alert-dialog__desc", "element": "p", "required": false },
|
|
346
|
+
{ "class": "db-alert-dialog__actions", "element": "div", "required": false }
|
|
347
|
+
],
|
|
348
|
+
"js": true,
|
|
349
|
+
"html": "<div class=\"db-alert-dialog\" id=\"confirm-delete\">\n <div class=\"db-alert-dialog__overlay\"></div>\n <div class=\"db-alert-dialog__panel\">\n <h3 class=\"db-alert-dialog__title\">Are you sure?</h3>\n <p class=\"db-alert-dialog__desc\">This action cannot be undone.</p>\n <div class=\"db-alert-dialog__actions\">\n <button class=\"db-btn db-btn--secondary\" data-action=\"cancel\">Cancel</button>\n <button class=\"db-btn db-btn--primary\">Continue</button>\n </div>\n </div>\n</div>",
|
|
350
|
+
"notes": "Open: DAUB.openAlertDialog('id'). data-action=\"cancel\" auto-closes."
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
"name": "Sheet",
|
|
354
|
+
"class": "db-sheet",
|
|
355
|
+
"category": "overlays",
|
|
356
|
+
"element": "div",
|
|
357
|
+
"modifiers": ["--open", "--right", "--left", "--top", "--bottom"],
|
|
358
|
+
"children": [
|
|
359
|
+
{ "class": "db-sheet__overlay", "element": "div", "required": true },
|
|
360
|
+
{ "class": "db-sheet__panel", "element": "div", "required": true },
|
|
361
|
+
{ "class": "db-sheet__header", "element": "div", "required": false },
|
|
362
|
+
{ "class": "db-sheet__title", "element": "span", "required": false },
|
|
363
|
+
{ "class": "db-sheet__close", "element": "button", "required": false },
|
|
364
|
+
{ "class": "db-sheet__body", "element": "div", "required": false }
|
|
365
|
+
],
|
|
366
|
+
"js": true,
|
|
367
|
+
"html": "<div class=\"db-sheet db-sheet--right\" id=\"my-sheet\">\n <div class=\"db-sheet__overlay\"></div>\n <div class=\"db-sheet__panel\">\n <div class=\"db-sheet__header\">\n <span class=\"db-sheet__title\">Title</span>\n <button class=\"db-sheet__close\" aria-label=\"Close\">×</button>\n </div>\n <div class=\"db-sheet__body\">Content</div>\n </div>\n</div>",
|
|
368
|
+
"notes": "Sides: --right (default), --left, --top, --bottom. Open: DAUB.openSheet('id')."
|
|
369
|
+
},
|
|
370
|
+
{
|
|
371
|
+
"name": "Drawer",
|
|
372
|
+
"class": "db-drawer",
|
|
373
|
+
"category": "overlays",
|
|
374
|
+
"element": "div",
|
|
375
|
+
"modifiers": ["--open"],
|
|
376
|
+
"children": [
|
|
377
|
+
{ "class": "db-drawer__overlay", "element": "div", "required": true },
|
|
378
|
+
{ "class": "db-drawer__panel", "element": "div", "required": true },
|
|
379
|
+
{ "class": "db-drawer__handle", "element": "div", "required": false },
|
|
380
|
+
{ "class": "db-drawer__body", "element": "div", "required": false }
|
|
381
|
+
],
|
|
382
|
+
"js": true,
|
|
383
|
+
"html": "<div class=\"db-drawer\" id=\"my-drawer\">\n <div class=\"db-drawer__overlay\"></div>\n <div class=\"db-drawer__panel\">\n <div class=\"db-drawer__handle\"></div>\n <div class=\"db-drawer__body\">Content</div>\n </div>\n</div>",
|
|
384
|
+
"notes": "Mobile-friendly bottom panel. Open: DAUB.openDrawer('id')."
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "Toast",
|
|
388
|
+
"class": "db-toast",
|
|
389
|
+
"category": "feedback",
|
|
390
|
+
"element": "div",
|
|
391
|
+
"modifiers": ["--success", "--error", "--warning", "--removing"],
|
|
392
|
+
"children": [
|
|
393
|
+
{ "class": "db-toast__icon", "element": "span", "required": false },
|
|
394
|
+
{ "class": "db-toast__content", "element": "div", "required": false },
|
|
395
|
+
{ "class": "db-toast__title", "element": "div", "required": false },
|
|
396
|
+
{ "class": "db-toast__message", "element": "div", "required": false },
|
|
397
|
+
{ "class": "db-toast__close", "element": "button", "required": false }
|
|
398
|
+
],
|
|
399
|
+
"js": true,
|
|
400
|
+
"html": "DAUB.toast('Hello!')\nDAUB.toast({ type: 'success', title: 'Saved', message: 'Changes saved.', duration: 4000 })",
|
|
401
|
+
"notes": "Created via JS API only. String shorthand: DAUB.toast('msg'). Types: info, success, warning, error."
|
|
402
|
+
},
|
|
403
|
+
{
|
|
404
|
+
"name": "Toast Stack",
|
|
405
|
+
"class": "db-toast-stack",
|
|
406
|
+
"category": "feedback",
|
|
407
|
+
"element": "div",
|
|
408
|
+
"modifiers": [],
|
|
409
|
+
"children": [],
|
|
410
|
+
"js": true,
|
|
411
|
+
"html": "<!-- Auto-created by DAUB.toast() -->",
|
|
412
|
+
"notes": "Container auto-created by JS when first toast fires. Fixed bottom-right."
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"name": "Alert",
|
|
416
|
+
"class": "db-alert",
|
|
417
|
+
"category": "feedback",
|
|
418
|
+
"element": "div",
|
|
419
|
+
"modifiers": ["--info", "--warning", "--error", "--success"],
|
|
420
|
+
"children": [
|
|
421
|
+
{ "class": "db-alert__icon", "element": "span", "required": false },
|
|
422
|
+
{ "class": "db-alert__content", "element": "div", "required": false },
|
|
423
|
+
{ "class": "db-alert__title", "element": "div", "required": false }
|
|
424
|
+
],
|
|
425
|
+
"js": false,
|
|
426
|
+
"html": "<div class=\"db-alert db-alert--warning\">\n <span class=\"db-alert__icon\"><!-- icon --></span>\n <div class=\"db-alert__content\">\n <div class=\"db-alert__title\">Warning</div>\n <p>Something needs attention.</p>\n </div>\n</div>",
|
|
427
|
+
"notes": "Static inline alert. Variants: --info, --warning, --error, --success."
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"name": "Badge",
|
|
431
|
+
"class": "db-badge",
|
|
432
|
+
"category": "data-display",
|
|
433
|
+
"element": "span",
|
|
434
|
+
"modifiers": ["--new", "--updated", "--warning", "--error"],
|
|
435
|
+
"children": [],
|
|
436
|
+
"js": false,
|
|
437
|
+
"html": "<span class=\"db-badge db-badge--new\">New</span>",
|
|
438
|
+
"notes": "Small status indicator. Color variants for different states."
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"name": "Avatar",
|
|
442
|
+
"class": "db-avatar",
|
|
443
|
+
"category": "data-display",
|
|
444
|
+
"element": "div",
|
|
445
|
+
"modifiers": ["--sm", "--md", "--lg"],
|
|
446
|
+
"children": [],
|
|
447
|
+
"js": false,
|
|
448
|
+
"html": "<div class=\"db-avatar db-avatar--md\"><img src=\"photo.jpg\" alt=\"User\"></div>",
|
|
449
|
+
"notes": "Sizes: --sm (32px), --md (40px), --lg (56px). Supports img or text initials."
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"name": "Avatar Group",
|
|
453
|
+
"class": "db-avatar-group",
|
|
454
|
+
"category": "data-display",
|
|
455
|
+
"element": "div",
|
|
456
|
+
"modifiers": [],
|
|
457
|
+
"children": [
|
|
458
|
+
{ "class": "db-avatar-group__overflow", "element": "span", "required": false }
|
|
459
|
+
],
|
|
460
|
+
"js": false,
|
|
461
|
+
"html": "<div class=\"db-avatar-group\">\n <div class=\"db-avatar db-avatar--md\"><img src=\"user1.jpg\" alt=\"\"></div>\n <div class=\"db-avatar db-avatar--md\"><img src=\"user2.jpg\" alt=\"\"></div>\n <span class=\"db-avatar-group__overflow\">+5</span>\n</div>",
|
|
462
|
+
"notes": "Overlapping avatar stack with optional overflow counter."
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"name": "Table",
|
|
466
|
+
"class": "db-table",
|
|
467
|
+
"category": "data-display",
|
|
468
|
+
"element": "table",
|
|
469
|
+
"modifiers": [],
|
|
470
|
+
"children": [],
|
|
471
|
+
"js": false,
|
|
472
|
+
"html": "<table class=\"db-table\">\n <thead><tr><th>Name</th><th>Role</th></tr></thead>\n <tbody><tr><td>Alice</td><td>Engineer</td></tr></tbody>\n</table>",
|
|
473
|
+
"notes": "Sortable columns: add data-db-sort to th."
|
|
474
|
+
},
|
|
475
|
+
{
|
|
476
|
+
"name": "Data Table",
|
|
477
|
+
"class": "db-data-table",
|
|
478
|
+
"category": "data-display",
|
|
479
|
+
"element": "table",
|
|
480
|
+
"modifiers": [],
|
|
481
|
+
"children": [
|
|
482
|
+
{ "class": "db-data-table__check", "element": "input", "required": false }
|
|
483
|
+
],
|
|
484
|
+
"js": false,
|
|
485
|
+
"html": "<table class=\"db-data-table\">\n <thead><tr>\n <th><input class=\"db-data-table__check\" type=\"checkbox\"></th>\n <th data-sortable>Name</th>\n </tr></thead>\n <tbody><tr>\n <td><input class=\"db-data-table__check\" type=\"checkbox\"></td>\n <td>Item</td>\n </tr></tbody>\n</table>",
|
|
486
|
+
"notes": "Enhanced table with checkbox selection and sortable headers via data-sortable."
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
"name": "List",
|
|
490
|
+
"class": "db-list",
|
|
491
|
+
"category": "data-display",
|
|
492
|
+
"element": "div",
|
|
493
|
+
"modifiers": [],
|
|
494
|
+
"children": [
|
|
495
|
+
{ "class": "db-list__item", "element": "div", "required": true },
|
|
496
|
+
{ "class": "db-list__content", "element": "div", "required": false },
|
|
497
|
+
{ "class": "db-list__title", "element": "div", "required": false },
|
|
498
|
+
{ "class": "db-list__secondary", "element": "div", "required": false }
|
|
499
|
+
],
|
|
500
|
+
"js": false,
|
|
501
|
+
"html": "<div class=\"db-list\">\n <div class=\"db-list__item\">\n <div class=\"db-list__content\">\n <div class=\"db-list__title\">Item</div>\n <div class=\"db-list__secondary\">Details</div>\n </div>\n </div>\n</div>",
|
|
502
|
+
"notes": "Vertical list of items with optional title and secondary text."
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"name": "Chip",
|
|
506
|
+
"class": "db-chip",
|
|
507
|
+
"category": "data-display",
|
|
508
|
+
"element": "span",
|
|
509
|
+
"modifiers": ["--red", "--green", "--blue", "--purple", "--amber", "--pink", "--active"],
|
|
510
|
+
"children": [
|
|
511
|
+
{ "class": "db-chip__close", "element": "button", "required": false }
|
|
512
|
+
],
|
|
513
|
+
"js": true,
|
|
514
|
+
"html": "<span class=\"db-chip db-chip--blue\">Design</span>",
|
|
515
|
+
"notes": "Color presets or custom via --db-chip-h/s/l. --active for selected state. Removable via __close button. Toggle group: wrap in container with data-db-chip-toggle."
|
|
516
|
+
},
|
|
517
|
+
{
|
|
518
|
+
"name": "Breadcrumbs",
|
|
519
|
+
"class": "db-breadcrumbs",
|
|
520
|
+
"category": "navigation",
|
|
521
|
+
"element": "nav",
|
|
522
|
+
"modifiers": [],
|
|
523
|
+
"children": [],
|
|
524
|
+
"js": false,
|
|
525
|
+
"html": "<nav class=\"db-breadcrumbs\" aria-label=\"Breadcrumb\">\n <ol><li><a href=\"/\">Home</a></li><li aria-current=\"page\">Current</li></ol>\n</nav>",
|
|
526
|
+
"notes": "Use ol/li children. Mark current page with aria-current=\"page\"."
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
"name": "Pagination",
|
|
530
|
+
"class": "db-pagination",
|
|
531
|
+
"category": "navigation",
|
|
532
|
+
"element": "nav",
|
|
533
|
+
"modifiers": [],
|
|
534
|
+
"children": [
|
|
535
|
+
{ "class": "db-pagination__btn", "element": "button", "required": true },
|
|
536
|
+
{ "class": "db-pagination__ellipsis", "element": "span", "required": false }
|
|
537
|
+
],
|
|
538
|
+
"js": false,
|
|
539
|
+
"html": "<nav class=\"db-pagination\" aria-label=\"Pagination\">\n <button class=\"db-pagination__btn\" disabled>«</button>\n <button class=\"db-pagination__btn\" aria-current=\"page\">1</button>\n <button class=\"db-pagination__btn\">2</button>\n <button class=\"db-pagination__btn\">»</button>\n</nav>",
|
|
540
|
+
"notes": "Mark current page with aria-current=\"page\"."
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "Stepper",
|
|
544
|
+
"class": "db-stepper",
|
|
545
|
+
"category": "navigation",
|
|
546
|
+
"element": "div",
|
|
547
|
+
"modifiers": ["--vertical"],
|
|
548
|
+
"children": [
|
|
549
|
+
{ "class": "db-stepper__step", "element": "div", "required": true },
|
|
550
|
+
{ "class": "db-stepper__indicator", "element": "div", "required": true },
|
|
551
|
+
{ "class": "db-stepper__label", "element": "div", "required": false }
|
|
552
|
+
],
|
|
553
|
+
"js": true,
|
|
554
|
+
"html": "<div class=\"db-stepper\">\n <div class=\"db-stepper__step db-stepper__step--completed\">\n <div class=\"db-stepper__indicator\">1</div>\n <div class=\"db-stepper__label\">Done</div>\n </div>\n <div class=\"db-stepper__step db-stepper__step--active\">\n <div class=\"db-stepper__indicator\">2</div>\n <div class=\"db-stepper__label\">Current</div>\n </div>\n</div>",
|
|
555
|
+
"notes": "Step states: --completed, --active. Use --vertical for vertical layout."
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
"name": "Nav Menu",
|
|
559
|
+
"class": "db-nav-menu",
|
|
560
|
+
"category": "navigation",
|
|
561
|
+
"element": "nav",
|
|
562
|
+
"modifiers": [],
|
|
563
|
+
"children": [
|
|
564
|
+
{ "class": "db-nav-menu__item", "element": "a", "required": true }
|
|
565
|
+
],
|
|
566
|
+
"js": false,
|
|
567
|
+
"html": "<nav class=\"db-nav-menu\">\n <a class=\"db-nav-menu__item db-nav-menu__item--active\" href=\"#\">Home</a>\n <a class=\"db-nav-menu__item\" href=\"#\">About</a>\n</nav>",
|
|
568
|
+
"notes": "Horizontal navigation links. Use --active for current item."
|
|
569
|
+
},
|
|
570
|
+
{
|
|
571
|
+
"name": "Navbar",
|
|
572
|
+
"class": "db-navbar",
|
|
573
|
+
"category": "navigation",
|
|
574
|
+
"element": "nav",
|
|
575
|
+
"modifiers": ["--open"],
|
|
576
|
+
"children": [
|
|
577
|
+
{ "class": "db-navbar__brand", "element": "a", "required": false },
|
|
578
|
+
{ "class": "db-navbar__nav", "element": "div", "required": false },
|
|
579
|
+
{ "class": "db-navbar__spacer", "element": "div", "required": false },
|
|
580
|
+
{ "class": "db-navbar__actions", "element": "div", "required": false },
|
|
581
|
+
{ "class": "db-navbar__toggle", "element": "button", "required": false }
|
|
582
|
+
],
|
|
583
|
+
"js": true,
|
|
584
|
+
"html": "<nav class=\"db-navbar\">\n <a class=\"db-navbar__brand\" href=\"/\">AppName</a>\n <div class=\"db-navbar__nav\">\n <div class=\"db-nav-menu\">\n <a class=\"db-nav-menu__item db-nav-menu__item--active\" href=\"/\">Home</a>\n </div>\n </div>\n <div class=\"db-navbar__spacer\"></div>\n <div class=\"db-navbar__actions\">\n <button class=\"db-btn db-btn--icon\" aria-label=\"Notifications\">Bell</button>\n </div>\n <button class=\"db-navbar__toggle\" aria-label=\"Menu\">Menu</button>\n</nav>",
|
|
585
|
+
"notes": "Sticky top bar. JS: DAUB.toggleNavbar(el). Mobile hamburger auto-close on outside click."
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
"name": "Menubar",
|
|
589
|
+
"class": "db-menubar",
|
|
590
|
+
"category": "navigation",
|
|
591
|
+
"element": "div",
|
|
592
|
+
"modifiers": [],
|
|
593
|
+
"children": [
|
|
594
|
+
{ "class": "db-menubar__item", "element": "button", "required": true },
|
|
595
|
+
{ "class": "db-menubar__dropdown", "element": "div", "required": false }
|
|
596
|
+
],
|
|
597
|
+
"js": true,
|
|
598
|
+
"html": "<div class=\"db-menubar\">\n <button class=\"db-menubar__item\">File\n <div class=\"db-menubar__dropdown\">\n <button class=\"db-dropdown__item\">New</button>\n <button class=\"db-dropdown__item\">Open</button>\n </div>\n </button>\n <button class=\"db-menubar__item\">Edit</button>\n</div>",
|
|
599
|
+
"notes": "Desktop menu bar. Dropdown items use db-dropdown__item class."
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"name": "Sidebar",
|
|
603
|
+
"class": "db-sidebar",
|
|
604
|
+
"category": "navigation",
|
|
605
|
+
"element": "aside",
|
|
606
|
+
"modifiers": ["--collapsed"],
|
|
607
|
+
"children": [
|
|
608
|
+
{ "class": "db-sidebar__header", "element": "div", "required": false },
|
|
609
|
+
{ "class": "db-sidebar__section", "element": "div", "required": false },
|
|
610
|
+
{ "class": "db-sidebar__label", "element": "div", "required": false },
|
|
611
|
+
{ "class": "db-sidebar__item", "element": "a", "required": true },
|
|
612
|
+
{ "class": "db-sidebar__footer", "element": "div", "required": false },
|
|
613
|
+
{ "class": "db-sidebar__toggle", "element": "button", "required": false }
|
|
614
|
+
],
|
|
615
|
+
"js": true,
|
|
616
|
+
"html": "<aside class=\"db-sidebar\">\n <div class=\"db-sidebar__header\">\n <h3>App Name</h3>\n <button class=\"db-sidebar__toggle\" aria-label=\"Toggle sidebar\">Toggle</button>\n </div>\n <div class=\"db-sidebar__section\">\n <div class=\"db-sidebar__label\">Main</div>\n <a class=\"db-sidebar__item db-sidebar__item--active\" data-tooltip=\"Dashboard\" href=\"#\">Dashboard</a>\n </div>\n</aside>",
|
|
617
|
+
"notes": "Collapsible via --collapsed. Items need data-tooltip for collapsed hover labels. JS: DAUB.toggleSidebar(el)."
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "Bottom Navigation",
|
|
621
|
+
"class": "db-bottom-nav",
|
|
622
|
+
"category": "navigation",
|
|
623
|
+
"element": "nav",
|
|
624
|
+
"modifiers": ["--always"],
|
|
625
|
+
"children": [
|
|
626
|
+
{ "class": "db-bottom-nav__item", "element": "a", "required": true },
|
|
627
|
+
{ "class": "db-bottom-nav__badge", "element": "span", "required": false }
|
|
628
|
+
],
|
|
629
|
+
"js": false,
|
|
630
|
+
"html": "<nav class=\"db-bottom-nav\">\n <a class=\"db-bottom-nav__item db-bottom-nav__item--active\" href=\"#\">\n <svg>...</svg>\n <span>Home</span>\n </a>\n <a class=\"db-bottom-nav__item\" href=\"#\">\n <svg>...</svg>\n <span>Search</span>\n <span class=\"db-bottom-nav__badge\">3</span>\n </a>\n</nav>",
|
|
631
|
+
"notes": "Fixed mobile bottom bar. Hidden on desktop unless --always. Safe-area aware."
|
|
632
|
+
},
|
|
633
|
+
{
|
|
634
|
+
"name": "Tooltip",
|
|
635
|
+
"class": "db-tooltip",
|
|
636
|
+
"category": "overlays",
|
|
637
|
+
"element": "div",
|
|
638
|
+
"modifiers": ["--visible", "--open"],
|
|
639
|
+
"children": [
|
|
640
|
+
{ "class": "db-tooltip__content", "element": "span", "required": true }
|
|
641
|
+
],
|
|
642
|
+
"js": true,
|
|
643
|
+
"html": "<div class=\"db-tooltip\">\n <button class=\"db-btn\">Hover me</button>\n <span class=\"db-tooltip__content db-tooltip__content--top\">Tooltip text</span>\n</div>",
|
|
644
|
+
"notes": "Positions: __content--top, --bottom, --left, --right."
|
|
645
|
+
},
|
|
646
|
+
{
|
|
647
|
+
"name": "Popover",
|
|
648
|
+
"class": "db-popover",
|
|
649
|
+
"category": "overlays",
|
|
650
|
+
"element": "div",
|
|
651
|
+
"modifiers": ["--open"],
|
|
652
|
+
"children": [
|
|
653
|
+
{ "class": "db-popover__trigger", "element": "button", "required": true },
|
|
654
|
+
{ "class": "db-popover__content", "element": "div", "required": true }
|
|
655
|
+
],
|
|
656
|
+
"js": true,
|
|
657
|
+
"html": "<div class=\"db-popover\">\n <button class=\"db-btn db-popover__trigger\">Click me</button>\n <div class=\"db-popover__content db-popover__content--bottom\">\n <p>Popover content here.</p>\n </div>\n</div>",
|
|
658
|
+
"notes": "Positions: __content--top, --bottom, --left, --right."
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"name": "Hover Card",
|
|
662
|
+
"class": "db-hover-card",
|
|
663
|
+
"category": "overlays",
|
|
664
|
+
"element": "div",
|
|
665
|
+
"modifiers": [],
|
|
666
|
+
"children": [
|
|
667
|
+
{ "class": "db-hover-card__content", "element": "div", "required": true }
|
|
668
|
+
],
|
|
669
|
+
"js": false,
|
|
670
|
+
"html": "<div class=\"db-hover-card\">\n <a href=\"#\">@username</a>\n <div class=\"db-hover-card__content\">\n <p>User profile info shown on hover.</p>\n </div>\n</div>",
|
|
671
|
+
"notes": "Content appears on hover with smooth transition."
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"name": "Dropdown Menu",
|
|
675
|
+
"class": "db-dropdown",
|
|
676
|
+
"category": "overlays",
|
|
677
|
+
"element": "div",
|
|
678
|
+
"modifiers": ["--open"],
|
|
679
|
+
"children": [
|
|
680
|
+
{ "class": "db-dropdown__trigger", "element": "button", "required": true },
|
|
681
|
+
{ "class": "db-dropdown__content", "element": "div", "required": true },
|
|
682
|
+
{ "class": "db-dropdown__item", "element": "button", "required": true },
|
|
683
|
+
{ "class": "db-dropdown__separator", "element": "hr", "required": false },
|
|
684
|
+
{ "class": "db-dropdown__label", "element": "div", "required": false }
|
|
685
|
+
],
|
|
686
|
+
"js": true,
|
|
687
|
+
"html": "<div class=\"db-dropdown\">\n <button class=\"db-btn db-dropdown__trigger\">Options</button>\n <div class=\"db-dropdown__content\">\n <div class=\"db-dropdown__label\">Actions</div>\n <button class=\"db-dropdown__item\">Edit</button>\n <hr class=\"db-dropdown__separator\">\n <button class=\"db-dropdown__item\">Delete</button>\n </div>\n</div>",
|
|
688
|
+
"notes": "JS auto-initializes toggle. Right-aligned: add db-dropdown__content--right."
|
|
689
|
+
},
|
|
690
|
+
{
|
|
691
|
+
"name": "Context Menu",
|
|
692
|
+
"class": "db-context-menu",
|
|
693
|
+
"category": "overlays",
|
|
694
|
+
"element": "div",
|
|
695
|
+
"modifiers": ["--open"],
|
|
696
|
+
"children": [
|
|
697
|
+
{ "class": "db-context-menu__label", "element": "div", "required": false },
|
|
698
|
+
{ "class": "db-context-menu__item", "element": "button", "required": true },
|
|
699
|
+
{ "class": "db-context-menu__separator", "element": "hr", "required": false }
|
|
700
|
+
],
|
|
701
|
+
"js": true,
|
|
702
|
+
"html": "<div data-context-menu=\"my-ctx-menu\">Right-click here</div>\n<div class=\"db-context-menu\" id=\"my-ctx-menu\">\n <div class=\"db-context-menu__label\">Actions</div>\n <button class=\"db-context-menu__item\">Copy</button>\n <hr class=\"db-context-menu__separator\">\n <button class=\"db-context-menu__item\">Delete</button>\n</div>",
|
|
703
|
+
"notes": "Triggered by data-context-menu attribute on right-click target."
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "Command Palette",
|
|
707
|
+
"class": "db-command",
|
|
708
|
+
"category": "overlays",
|
|
709
|
+
"element": "div",
|
|
710
|
+
"modifiers": ["--open"],
|
|
711
|
+
"children": [
|
|
712
|
+
{ "class": "db-command__overlay", "element": "div", "required": true },
|
|
713
|
+
{ "class": "db-command__panel", "element": "div", "required": true },
|
|
714
|
+
{ "class": "db-command__input-wrap", "element": "div", "required": true },
|
|
715
|
+
{ "class": "db-command__input", "element": "input", "required": true },
|
|
716
|
+
{ "class": "db-command__list", "element": "div", "required": true },
|
|
717
|
+
{ "class": "db-command__group-label", "element": "div", "required": false },
|
|
718
|
+
{ "class": "db-command__item", "element": "div", "required": true },
|
|
719
|
+
{ "class": "db-command__shortcut", "element": "span", "required": false },
|
|
720
|
+
{ "class": "db-command__empty", "element": "div", "required": false }
|
|
721
|
+
],
|
|
722
|
+
"js": true,
|
|
723
|
+
"html": "<div class=\"db-command\" id=\"cmd\">\n <div class=\"db-command__overlay\"></div>\n <div class=\"db-command__panel\">\n <div class=\"db-command__input-wrap\">\n <input class=\"db-command__input\" placeholder=\"Search...\">\n </div>\n <div class=\"db-command__list\">\n <div class=\"db-command__group-label\">Navigation</div>\n <div class=\"db-command__item\">Home</div>\n </div>\n </div>\n</div>",
|
|
724
|
+
"notes": "Opens with Ctrl+K / Cmd+K. JS: DAUB.openCommand('id'), DAUB.closeCommand('id')."
|
|
725
|
+
},
|
|
726
|
+
{
|
|
727
|
+
"name": "Accordion",
|
|
728
|
+
"class": "db-accordion",
|
|
729
|
+
"category": "data-display",
|
|
730
|
+
"element": "div",
|
|
731
|
+
"modifiers": [],
|
|
732
|
+
"children": [
|
|
733
|
+
{ "class": "db-accordion__item", "element": "div", "required": true },
|
|
734
|
+
{ "class": "db-accordion__trigger", "element": "button", "required": true },
|
|
735
|
+
{ "class": "db-accordion__icon", "element": "svg", "required": false },
|
|
736
|
+
{ "class": "db-accordion__content", "element": "div", "required": true }
|
|
737
|
+
],
|
|
738
|
+
"js": true,
|
|
739
|
+
"html": "<div class=\"db-accordion\">\n <div class=\"db-accordion__item\">\n <button class=\"db-accordion__trigger\" aria-expanded=\"false\">\n Question\n <svg class=\"db-accordion__icon\" viewBox=\"0 0 24 24\"><path d=\"m6 9 6 6 6-6\"/></svg>\n </button>\n <div class=\"db-accordion__content\">Answer</div>\n </div>\n</div>",
|
|
740
|
+
"notes": "Single-open by default. Add data-multi for multi-open."
|
|
741
|
+
},
|
|
742
|
+
{
|
|
743
|
+
"name": "Collapsible",
|
|
744
|
+
"class": "db-collapsible",
|
|
745
|
+
"category": "data-display",
|
|
746
|
+
"element": "div",
|
|
747
|
+
"modifiers": ["--open"],
|
|
748
|
+
"children": [
|
|
749
|
+
{ "class": "db-collapsible__trigger", "element": "button", "required": true },
|
|
750
|
+
{ "class": "db-collapsible__icon", "element": "svg", "required": false },
|
|
751
|
+
{ "class": "db-collapsible__content", "element": "div", "required": true }
|
|
752
|
+
],
|
|
753
|
+
"js": true,
|
|
754
|
+
"html": "<div class=\"db-collapsible\">\n <button class=\"db-collapsible__trigger\" aria-expanded=\"false\">\n <svg class=\"db-collapsible__icon\" viewBox=\"0 0 24 24\"><path d=\"m9 18 6-6-6-6\"/></svg>\n Show more\n </button>\n <div class=\"db-collapsible__content\">Hidden content</div>\n</div>",
|
|
755
|
+
"notes": "JS toggles open state and aria-expanded."
|
|
756
|
+
},
|
|
757
|
+
{
|
|
758
|
+
"name": "Progress",
|
|
759
|
+
"class": "db-progress",
|
|
760
|
+
"category": "feedback",
|
|
761
|
+
"element": "div",
|
|
762
|
+
"modifiers": ["--indeterminate"],
|
|
763
|
+
"children": [
|
|
764
|
+
{ "class": "db-progress__bar", "element": "div", "required": true }
|
|
765
|
+
],
|
|
766
|
+
"js": false,
|
|
767
|
+
"html": "<div class=\"db-progress\"><div class=\"db-progress__bar\" style=\"--db-progress: 65%;\"></div></div>",
|
|
768
|
+
"notes": "Set progress via --db-progress custom property. Add --indeterminate for animated state."
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"name": "Skeleton",
|
|
772
|
+
"class": "db-skeleton",
|
|
773
|
+
"category": "feedback",
|
|
774
|
+
"element": "div",
|
|
775
|
+
"modifiers": ["--text", "--heading", "--avatar", "--btn"],
|
|
776
|
+
"children": [],
|
|
777
|
+
"js": false,
|
|
778
|
+
"html": "<div class=\"db-skeleton db-skeleton--text\"></div>\n<div class=\"db-skeleton db-skeleton--heading\"></div>\n<div class=\"db-skeleton db-skeleton--avatar\"></div>",
|
|
779
|
+
"notes": "Placeholder loading shapes. Animated shimmer effect."
|
|
780
|
+
},
|
|
781
|
+
{
|
|
782
|
+
"name": "Empty State",
|
|
783
|
+
"class": "db-empty",
|
|
784
|
+
"category": "feedback",
|
|
785
|
+
"element": "div",
|
|
786
|
+
"modifiers": [],
|
|
787
|
+
"children": [
|
|
788
|
+
{ "class": "db-empty__icon", "element": "div", "required": false },
|
|
789
|
+
{ "class": "db-empty__title", "element": "h3", "required": false },
|
|
790
|
+
{ "class": "db-empty__desc", "element": "p", "required": false }
|
|
791
|
+
],
|
|
792
|
+
"js": false,
|
|
793
|
+
"html": "<div class=\"db-empty\">\n <div class=\"db-empty__icon\"><!-- icon --></div>\n <h3 class=\"db-empty__title\">No items</h3>\n <p class=\"db-empty__desc\">Get started by creating your first item.</p>\n <button class=\"db-btn db-btn--primary\">Create</button>\n</div>",
|
|
794
|
+
"notes": "Centered empty state with icon, title, description, and optional CTA."
|
|
795
|
+
},
|
|
796
|
+
{
|
|
797
|
+
"name": "Calendar",
|
|
798
|
+
"class": "db-calendar",
|
|
799
|
+
"category": "data-display",
|
|
800
|
+
"element": "div",
|
|
801
|
+
"modifiers": [],
|
|
802
|
+
"children": [
|
|
803
|
+
{ "class": "db-calendar__header", "element": "div", "required": true },
|
|
804
|
+
{ "class": "db-calendar__title", "element": "span", "required": true },
|
|
805
|
+
{ "class": "db-calendar__nav", "element": "button", "required": true },
|
|
806
|
+
{ "class": "db-calendar__grid", "element": "div", "required": true },
|
|
807
|
+
{ "class": "db-calendar__day-label", "element": "span", "required": true },
|
|
808
|
+
{ "class": "db-calendar__day", "element": "button", "required": true }
|
|
809
|
+
],
|
|
810
|
+
"js": true,
|
|
811
|
+
"html": "<div class=\"db-calendar\">\n <div class=\"db-calendar__header\">\n <button class=\"db-calendar__nav\">‹</button>\n <span class=\"db-calendar__title\">February 2026</span>\n <button class=\"db-calendar__nav\">›</button>\n </div>\n <div class=\"db-calendar__grid\">\n <span class=\"db-calendar__day-label\">Mo</span>\n <button class=\"db-calendar__day\">1</button>\n <button class=\"db-calendar__day db-calendar__day--today\">27</button>\n </div>\n</div>",
|
|
812
|
+
"notes": "Day states: --today, --selected, --outside. JS handles month navigation."
|
|
813
|
+
},
|
|
814
|
+
{
|
|
815
|
+
"name": "Date Picker",
|
|
816
|
+
"class": "db-date-picker",
|
|
817
|
+
"category": "controls",
|
|
818
|
+
"element": "div",
|
|
819
|
+
"modifiers": [],
|
|
820
|
+
"children": [
|
|
821
|
+
{ "class": "db-date-picker__trigger", "element": "button", "required": true },
|
|
822
|
+
{ "class": "db-date-picker__dropdown", "element": "div", "required": true }
|
|
823
|
+
],
|
|
824
|
+
"js": true,
|
|
825
|
+
"html": "<div class=\"db-date-picker\">\n <button class=\"db-date-picker__trigger db-input\" type=\"button\">Select date...</button>\n <div class=\"db-date-picker__dropdown\">\n <div class=\"db-calendar\"><!-- calendar markup --></div>\n </div>\n</div>",
|
|
826
|
+
"notes": "Wraps Calendar in a trigger/dropdown. Click trigger to open calendar."
|
|
827
|
+
},
|
|
828
|
+
{
|
|
829
|
+
"name": "Carousel",
|
|
830
|
+
"class": "db-carousel",
|
|
831
|
+
"category": "data-display",
|
|
832
|
+
"element": "div",
|
|
833
|
+
"modifiers": [],
|
|
834
|
+
"children": [
|
|
835
|
+
{ "class": "db-carousel__track", "element": "div", "required": true },
|
|
836
|
+
{ "class": "db-carousel__slide", "element": "div", "required": true },
|
|
837
|
+
{ "class": "db-carousel__btn", "element": "button", "required": false },
|
|
838
|
+
{ "class": "db-carousel__dots", "element": "div", "required": false },
|
|
839
|
+
{ "class": "db-carousel__dot", "element": "button", "required": false }
|
|
840
|
+
],
|
|
841
|
+
"js": true,
|
|
842
|
+
"html": "<div class=\"db-carousel\">\n <div class=\"db-carousel__track\">\n <div class=\"db-carousel__slide\">Slide 1</div>\n <div class=\"db-carousel__slide\">Slide 2</div>\n </div>\n <button class=\"db-carousel__btn db-carousel__btn--prev\">‹</button>\n <button class=\"db-carousel__btn db-carousel__btn--next\">›</button>\n <div class=\"db-carousel__dots\">\n <button class=\"db-carousel__dot db-carousel__dot--active\"></button>\n <button class=\"db-carousel__dot\"></button>\n </div>\n</div>",
|
|
843
|
+
"notes": "JS handles slide navigation, dot sync, and swipe."
|
|
844
|
+
},
|
|
845
|
+
{
|
|
846
|
+
"name": "CSS Bar Chart",
|
|
847
|
+
"class": "db-chart",
|
|
848
|
+
"category": "data-display",
|
|
849
|
+
"element": "div",
|
|
850
|
+
"modifiers": [],
|
|
851
|
+
"children": [
|
|
852
|
+
{ "class": "db-chart__bar", "element": "div", "required": true },
|
|
853
|
+
{ "class": "db-chart__labels", "element": "div", "required": false }
|
|
854
|
+
],
|
|
855
|
+
"js": false,
|
|
856
|
+
"html": "<div class=\"db-chart\">\n <div class=\"db-chart__bar\" style=\"height:40%;\"></div>\n <div class=\"db-chart__bar\" style=\"height:80%;\"></div>\n</div>\n<div class=\"db-chart__labels\"><span>Mon</span><span>Tue</span></div>",
|
|
857
|
+
"notes": "Pure CSS bar chart. Set bar height via inline style. --secondary modifier for alt color."
|
|
858
|
+
},
|
|
859
|
+
{
|
|
860
|
+
"name": "Stat Card",
|
|
861
|
+
"class": "db-stat",
|
|
862
|
+
"category": "data-display",
|
|
863
|
+
"element": "div",
|
|
864
|
+
"modifiers": ["--horizontal"],
|
|
865
|
+
"children": [
|
|
866
|
+
{ "class": "db-stat__label", "element": "span", "required": true },
|
|
867
|
+
{ "class": "db-stat__value", "element": "span", "required": true },
|
|
868
|
+
{ "class": "db-stat__change", "element": "span", "required": false },
|
|
869
|
+
{ "class": "db-stat__icon", "element": "div", "required": false }
|
|
870
|
+
],
|
|
871
|
+
"js": false,
|
|
872
|
+
"html": "<div class=\"db-stat\">\n <span class=\"db-stat__label\">Total Users</span>\n <span class=\"db-stat__value\">12,847</span>\n <span class=\"db-stat__change db-stat__change--up\">\u2191 12.5%</span>\n</div>",
|
|
873
|
+
"notes": "KPI/metric card. --horizontal for row layout. __change--up (green) / --down (red). Optional __icon slot."
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
"name": "Chart Card",
|
|
877
|
+
"class": "db-chart-card",
|
|
878
|
+
"category": "data-display",
|
|
879
|
+
"element": "div",
|
|
880
|
+
"modifiers": [],
|
|
881
|
+
"children": [
|
|
882
|
+
{ "class": "db-chart-card__header", "element": "div", "required": false },
|
|
883
|
+
{ "class": "db-chart-card__title", "element": "span", "required": false },
|
|
884
|
+
{ "class": "db-chart-card__actions", "element": "div", "required": false },
|
|
885
|
+
{ "class": "db-chart-card__body", "element": "div", "required": true }
|
|
886
|
+
],
|
|
887
|
+
"js": false,
|
|
888
|
+
"html": "<div class=\"db-chart-card\">\n <div class=\"db-chart-card__header\">\n <span class=\"db-chart-card__title\">Revenue</span>\n <div class=\"db-chart-card__actions\"><button class=\"db-btn db-btn--sm db-btn--secondary\">Export</button></div>\n </div>\n <div class=\"db-chart-card__body\">\n <canvas id=\"myChart\"></canvas>\n </div>\n</div>",
|
|
889
|
+
"notes": "Card wrapper for any chart. Header with title/actions. Body auto-sizes canvas to 100% width."
|
|
890
|
+
},
|
|
891
|
+
{
|
|
892
|
+
"name": "Resizable",
|
|
893
|
+
"class": "db-resizable",
|
|
894
|
+
"category": "layout-utility",
|
|
895
|
+
"element": "div",
|
|
896
|
+
"modifiers": [],
|
|
897
|
+
"children": [
|
|
898
|
+
{ "class": "db-resizable__handle", "element": "div", "required": true }
|
|
899
|
+
],
|
|
900
|
+
"js": true,
|
|
901
|
+
"html": "<div class=\"db-resizable\" style=\"width:300px;height:200px;\">\n Content\n <div class=\"db-resizable__handle db-resizable__handle--right\"></div>\n <div class=\"db-resizable__handle db-resizable__handle--bottom\"></div>\n</div>",
|
|
902
|
+
"notes": "Handle positions: --right, --bottom. JS enables drag-to-resize."
|
|
903
|
+
},
|
|
904
|
+
{
|
|
905
|
+
"name": "Separator",
|
|
906
|
+
"class": "db-separator",
|
|
907
|
+
"category": "layout-utility",
|
|
908
|
+
"element": "hr",
|
|
909
|
+
"modifiers": ["--vertical", "--dashed"],
|
|
910
|
+
"children": [
|
|
911
|
+
{ "class": "db-separator__label", "element": "div", "required": false }
|
|
912
|
+
],
|
|
913
|
+
"js": false,
|
|
914
|
+
"html": "<hr class=\"db-separator\">\n<hr class=\"db-separator db-separator--dashed\">\n<div class=\"db-separator__label\">Or continue with</div>",
|
|
915
|
+
"notes": "Horizontal divider. --vertical for flex row separators. --dashed for dashed style."
|
|
916
|
+
},
|
|
917
|
+
{
|
|
918
|
+
"name": "Divider",
|
|
919
|
+
"class": "db-divider",
|
|
920
|
+
"category": "layout-utility",
|
|
921
|
+
"element": "hr",
|
|
922
|
+
"modifiers": [],
|
|
923
|
+
"children": [],
|
|
924
|
+
"js": false,
|
|
925
|
+
"html": "<hr class=\"db-divider\">",
|
|
926
|
+
"notes": "Simple horizontal divider line."
|
|
927
|
+
},
|
|
928
|
+
{
|
|
929
|
+
"name": "Scroll Area",
|
|
930
|
+
"class": "db-scroll-area",
|
|
931
|
+
"category": "layout-utility",
|
|
932
|
+
"element": "div",
|
|
933
|
+
"modifiers": ["--horizontal", "--vertical"],
|
|
934
|
+
"children": [],
|
|
935
|
+
"js": false,
|
|
936
|
+
"html": "<div class=\"db-scroll-area\" style=\"max-height:200px;\">\n <!-- long content -->\n</div>",
|
|
937
|
+
"notes": "Styled scrollbar container. --horizontal for horizontal scroll only."
|
|
938
|
+
},
|
|
939
|
+
{
|
|
940
|
+
"name": "Aspect Ratio",
|
|
941
|
+
"class": "db-aspect",
|
|
942
|
+
"category": "layout-utility",
|
|
943
|
+
"element": "div",
|
|
944
|
+
"modifiers": ["--16-9", "--4-3", "--1-1", "--21-9"],
|
|
945
|
+
"children": [],
|
|
946
|
+
"js": false,
|
|
947
|
+
"html": "<div class=\"db-aspect db-aspect--16-9\"><img src=\"photo.jpg\" alt=\"\"></div>",
|
|
948
|
+
"notes": "Aspect ratio container. Children fill the box."
|
|
949
|
+
},
|
|
950
|
+
{
|
|
951
|
+
"name": "Surface",
|
|
952
|
+
"class": "db-surface",
|
|
953
|
+
"category": "foundations",
|
|
954
|
+
"element": "div",
|
|
955
|
+
"modifiers": ["--raised", "--inset", "--pressed"],
|
|
956
|
+
"children": [],
|
|
957
|
+
"js": false,
|
|
958
|
+
"html": "<div class=\"db-surface\">Base</div>\n<div class=\"db-surface--raised\">Raised</div>\n<div class=\"db-surface--inset\">Inset</div>",
|
|
959
|
+
"notes": "Base surface with variants for depth/shadow effects."
|
|
960
|
+
},
|
|
961
|
+
{
|
|
962
|
+
"name": "Elevation",
|
|
963
|
+
"class": "db-elevation",
|
|
964
|
+
"category": "foundations",
|
|
965
|
+
"element": "div",
|
|
966
|
+
"modifiers": ["-1", "-2", "-3"],
|
|
967
|
+
"children": [],
|
|
968
|
+
"js": false,
|
|
969
|
+
"html": "<div class=\"db-elevation-1\">Level 1</div>\n<div class=\"db-elevation-2\">Level 2</div>\n<div class=\"db-elevation-3\">Level 3</div>",
|
|
970
|
+
"notes": "Shadow utility classes. Three levels of elevation."
|
|
971
|
+
},
|
|
972
|
+
{
|
|
973
|
+
"name": "Prose",
|
|
974
|
+
"class": "db-prose",
|
|
975
|
+
"category": "foundations",
|
|
976
|
+
"element": "article",
|
|
977
|
+
"modifiers": ["--sm", "--lg", "--xl", "--2xl"],
|
|
978
|
+
"children": [],
|
|
979
|
+
"js": false,
|
|
980
|
+
"html": "<div class=\"db-prose\">\n <h2>Heading</h2>\n <p>Paragraph with 1.75 line-height and 65ch max-width.</p>\n <blockquote>Blockquote with left border.</blockquote>\n</div>",
|
|
981
|
+
"notes": "Typographic defaults for long-form content. Scale: --sm, --lg, --xl, --2xl."
|
|
982
|
+
},
|
|
983
|
+
{
|
|
984
|
+
"name": "Container",
|
|
985
|
+
"class": "db-container",
|
|
986
|
+
"category": "layout-utility",
|
|
987
|
+
"element": "div",
|
|
988
|
+
"modifiers": ["--wide", "--narrow"],
|
|
989
|
+
"children": [],
|
|
990
|
+
"js": false,
|
|
991
|
+
"html": "<div class=\"db-container\">960px centered</div>\n<div class=\"db-container db-container--wide\">1200px centered</div>",
|
|
992
|
+
"notes": "Centered max-width container. Default 960px, --wide 1200px, --narrow 640px."
|
|
993
|
+
},
|
|
994
|
+
{
|
|
995
|
+
"name": "Flex",
|
|
996
|
+
"class": "db-flex",
|
|
997
|
+
"category": "layout-utility",
|
|
998
|
+
"element": "div",
|
|
999
|
+
"modifiers": ["--col", "--wrap", "--center"],
|
|
1000
|
+
"children": [],
|
|
1001
|
+
"js": false,
|
|
1002
|
+
"html": "<div class=\"db-flex db-gap-4\">\n <div>Item 1</div>\n <div>Item 2</div>\n</div>",
|
|
1003
|
+
"notes": "Flexbox layout utility. Combine with db-gap-* for spacing."
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
"name": "Grid",
|
|
1007
|
+
"class": "db-grid",
|
|
1008
|
+
"category": "layout-utility",
|
|
1009
|
+
"element": "div",
|
|
1010
|
+
"modifiers": ["--2", "--3", "--4", "--5", "--6"],
|
|
1011
|
+
"children": [],
|
|
1012
|
+
"js": false,
|
|
1013
|
+
"html": "<div class=\"db-grid db-grid--3 db-gap-4\">\n <div>Col 1</div>\n <div>Col 2</div>\n <div>Col 3</div>\n</div>",
|
|
1014
|
+
"notes": "CSS grid utility. 2-6 columns. Auto-responsive: collapses at smaller screens."
|
|
1015
|
+
},
|
|
1016
|
+
{
|
|
1017
|
+
"name": "Theme Switcher",
|
|
1018
|
+
"class": "db-theme-switcher",
|
|
1019
|
+
"category": "navigation",
|
|
1020
|
+
"element": "div",
|
|
1021
|
+
"modifiers": [],
|
|
1022
|
+
"children": [
|
|
1023
|
+
{ "class": "db-theme-switcher__toggle", "element": "button", "required": false },
|
|
1024
|
+
{ "class": "db-theme-switcher__popover", "element": "div", "required": false }
|
|
1025
|
+
],
|
|
1026
|
+
"js": true,
|
|
1027
|
+
"html": "<div class=\"db-theme-switcher\" role=\"group\" aria-label=\"Theme switcher\"></div>",
|
|
1028
|
+
"notes": "Auto-populates toggle + popover if empty. Popover shows 20 families in 4 categories + scheme buttons."
|
|
1029
|
+
},
|
|
1030
|
+
{
|
|
1031
|
+
"name": "Accent Picker",
|
|
1032
|
+
"class": "db-accent-picker",
|
|
1033
|
+
"category": "controls",
|
|
1034
|
+
"element": "div",
|
|
1035
|
+
"modifiers": [],
|
|
1036
|
+
"children": [
|
|
1037
|
+
{ "class": "db-accent-picker__dot", "element": "button", "required": true }
|
|
1038
|
+
],
|
|
1039
|
+
"js": true,
|
|
1040
|
+
"html": "<div class=\"db-accent-picker\">\n <button class=\"db-accent-picker__dot\" data-accent=\"#6B7C3E\" style=\"--dot-color:#6B7C3E\"></button>\n <button class=\"db-accent-picker__dot\" data-accent=\"reset\">Reset</button>\n</div>",
|
|
1041
|
+
"notes": "Color dots for accent override. data-accent=\"reset\" restores theme default."
|
|
1042
|
+
}
|
|
1043
|
+
]
|
|
1044
|
+
}
|