@grayscale-dev/dragon 0.1.4 → 0.1.6

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.
@@ -0,0 +1,506 @@
1
+ {
2
+ "version": 1,
3
+ "package": "@grayscale-dev/dragon",
4
+ "components": [
5
+ {
6
+ "tag": "dui-input",
7
+ "title": "Input",
8
+ "description": "Text input field with optional above or floating label modes.",
9
+ "status": "stable",
10
+ "attributes": [
11
+ {
12
+ "name": "value",
13
+ "description": "Current text value for the input.",
14
+ "type": "string",
15
+ "default": "",
16
+ "control": "text"
17
+ },
18
+ {
19
+ "name": "placeholder",
20
+ "description": "Placeholder text shown when value is empty. Hidden in floating label mode unless regex placeholder is enabled while focused.",
21
+ "type": "string",
22
+ "default": "",
23
+ "control": "text"
24
+ },
25
+ {
26
+ "name": "regex",
27
+ "description": "Regex-like mask definition. Supported patterns include escaped literals and quantified slots such as ^\\(\\d{3}\\)\\s\\d{3}-\\d{4}$.",
28
+ "type": "string",
29
+ "default": "",
30
+ "control": "text"
31
+ },
32
+ {
33
+ "name": "show-regex-placeholder",
34
+ "description": "If true and regex is valid, placeholder is generated from the regex mask (for floating labels, shown only while focused).",
35
+ "type": "boolean",
36
+ "default": false,
37
+ "control": "boolean"
38
+ },
39
+ {
40
+ "name": "name",
41
+ "description": "Name used when submitting with a form.",
42
+ "type": "string",
43
+ "default": "",
44
+ "control": "text"
45
+ },
46
+ {
47
+ "name": "disabled",
48
+ "description": "Disables user interaction and removes value from form submission.",
49
+ "type": "boolean",
50
+ "default": false,
51
+ "control": "boolean"
52
+ },
53
+ {
54
+ "name": "required",
55
+ "description": "Marks the input as required for form validation.",
56
+ "type": "boolean",
57
+ "default": false,
58
+ "control": "boolean"
59
+ },
60
+ {
61
+ "name": "type",
62
+ "description": "Native input type.",
63
+ "type": "string",
64
+ "default": "text",
65
+ "control": "text"
66
+ },
67
+ {
68
+ "name": "autocomplete",
69
+ "description": "Native autocomplete hint passed to the internal input.",
70
+ "type": "string",
71
+ "control": "text"
72
+ },
73
+ {
74
+ "name": "label",
75
+ "description": "Visible label text.",
76
+ "type": "string",
77
+ "default": "",
78
+ "control": "text"
79
+ },
80
+ {
81
+ "name": "label-position",
82
+ "description": "Controls whether label appears above the field or as an in-field floating label.",
83
+ "type": "\"above\" | \"floating\"",
84
+ "default": "above",
85
+ "control": "select",
86
+ "options": [
87
+ {
88
+ "value": "above",
89
+ "label": "Above",
90
+ "description": "Label is rendered above the input field."
91
+ },
92
+ {
93
+ "value": "floating",
94
+ "label": "Floating",
95
+ "description": "Label starts in-field and moves to the top-left on focus/value."
96
+ }
97
+ ]
98
+ }
99
+ ],
100
+ "properties": [
101
+ {
102
+ "name": "value",
103
+ "description": "Live value property kept in sync with the internal input.",
104
+ "type": "string",
105
+ "default": ""
106
+ },
107
+ {
108
+ "name": "regex",
109
+ "description": "Mask source pattern used to constrain input formatting.",
110
+ "type": "string",
111
+ "default": ""
112
+ },
113
+ {
114
+ "name": "showRegexPlaceholder",
115
+ "description": "Enables regex-derived placeholder text.",
116
+ "type": "boolean",
117
+ "default": false
118
+ },
119
+ {
120
+ "name": "labelPosition",
121
+ "description": "Reflects the label presentation mode.",
122
+ "type": "\"above\" | \"floating\"",
123
+ "default": "above"
124
+ }
125
+ ],
126
+ "events": [
127
+ {
128
+ "name": "input",
129
+ "description": "Dispatched on each keystroke with bubbles=true and composed=true.",
130
+ "bubbles": true,
131
+ "composed": true
132
+ },
133
+ {
134
+ "name": "change",
135
+ "description": "Dispatched when value is committed (blur or Enter) with bubbles=true and composed=true.",
136
+ "bubbles": true,
137
+ "composed": true
138
+ }
139
+ ],
140
+ "parts": [
141
+ {
142
+ "name": "input",
143
+ "description": "Styles the internal native <input> element."
144
+ }
145
+ ],
146
+ "cssTokens": [
147
+ {
148
+ "name": "--ui-input-padding",
149
+ "group": "spacing",
150
+ "description": "Default input padding.",
151
+ "default": "8px 12px",
152
+ "control": "text",
153
+ "examples": [
154
+ "10px 14px"
155
+ ]
156
+ },
157
+ {
158
+ "name": "--ui-input-font-size",
159
+ "group": "typography",
160
+ "description": "Input text size.",
161
+ "default": "16px",
162
+ "control": "number",
163
+ "placeholder": "16px"
164
+ },
165
+ {
166
+ "name": "--ui-input-label-font-size",
167
+ "group": "label",
168
+ "description": "Label text size for above and floating modes.",
169
+ "default": "14px",
170
+ "control": "number",
171
+ "placeholder": "14px"
172
+ },
173
+ {
174
+ "name": "--ui-input-border",
175
+ "group": "border",
176
+ "description": "Complete input border declaration.",
177
+ "default": "1px solid #c6ccd5",
178
+ "control": "border"
179
+ },
180
+ {
181
+ "name": "--ui-input-radius",
182
+ "group": "shape",
183
+ "description": "Input border radius.",
184
+ "default": "8px",
185
+ "control": "number"
186
+ },
187
+ {
188
+ "name": "--ui-input-bg",
189
+ "group": "color",
190
+ "description": "Input background color and floating-label chip background.",
191
+ "default": "#ffffff",
192
+ "control": "color"
193
+ },
194
+ {
195
+ "name": "--ui-input-color",
196
+ "group": "color",
197
+ "description": "Input text color.",
198
+ "default": "#1f2937",
199
+ "control": "color"
200
+ },
201
+ {
202
+ "name": "--ui-input-placeholder-color",
203
+ "group": "color",
204
+ "description": "Placeholder color and inactive floating label color.",
205
+ "default": "#9aa4b2",
206
+ "control": "color"
207
+ },
208
+ {
209
+ "name": "--ui-input-label-color",
210
+ "group": "label",
211
+ "description": "Label color in above mode and active floating state.",
212
+ "default": "#475569",
213
+ "control": "color"
214
+ },
215
+ {
216
+ "name": "--ui-input-focus-ring",
217
+ "group": "state",
218
+ "description": "Focus ring box-shadow.",
219
+ "default": "0 0 0 3px rgba(24, 98, 255, 0.25)",
220
+ "control": "shadow"
221
+ },
222
+ {
223
+ "name": "--ui-input-floating-label-left",
224
+ "group": "floating",
225
+ "description": "Left offset of floating label.",
226
+ "default": "var(--ui-input-floating-padding-left, 12px)",
227
+ "control": "number"
228
+ },
229
+ {
230
+ "name": "--ui-input-floating-padding-top",
231
+ "group": "floating",
232
+ "description": "Top padding used in floating label mode.",
233
+ "default": "22px",
234
+ "control": "number"
235
+ },
236
+ {
237
+ "name": "--ui-input-floating-padding-right",
238
+ "group": "floating",
239
+ "description": "Right padding used in floating label mode.",
240
+ "default": "12px",
241
+ "control": "number"
242
+ },
243
+ {
244
+ "name": "--ui-input-floating-padding-bottom",
245
+ "group": "floating",
246
+ "description": "Bottom padding used in floating label mode.",
247
+ "default": "8px",
248
+ "control": "number"
249
+ },
250
+ {
251
+ "name": "--ui-input-floating-padding-left",
252
+ "group": "floating",
253
+ "description": "Left padding used in floating label mode.",
254
+ "default": "12px",
255
+ "control": "number"
256
+ }
257
+ ],
258
+ "builder": {
259
+ "groups": [
260
+ {
261
+ "id": "content",
262
+ "label": "Content",
263
+ "description": "Input content and labels.",
264
+ "order": 1
265
+ },
266
+ {
267
+ "id": "behavior",
268
+ "label": "Behavior",
269
+ "description": "Native input behavior options.",
270
+ "order": 2
271
+ },
272
+ {
273
+ "id": "mask",
274
+ "label": "Mask",
275
+ "description": "Regex masking controls.",
276
+ "order": 3
277
+ },
278
+ {
279
+ "id": "typography",
280
+ "label": "Typography",
281
+ "order": 4
282
+ },
283
+ {
284
+ "id": "spacing",
285
+ "label": "Spacing",
286
+ "order": 5
287
+ },
288
+ {
289
+ "id": "floating",
290
+ "label": "Floating Label",
291
+ "order": 6
292
+ },
293
+ {
294
+ "id": "shape",
295
+ "label": "Shape",
296
+ "order": 7
297
+ },
298
+ {
299
+ "id": "color",
300
+ "label": "Color",
301
+ "order": 8
302
+ },
303
+ {
304
+ "id": "state",
305
+ "label": "States",
306
+ "order": 9
307
+ }
308
+ ],
309
+ "controls": [
310
+ {
311
+ "id": "label",
312
+ "kind": "attribute",
313
+ "ref": "label",
314
+ "group": "content",
315
+ "label": "Label",
316
+ "order": 1
317
+ },
318
+ {
319
+ "id": "placeholder",
320
+ "kind": "attribute",
321
+ "ref": "placeholder",
322
+ "group": "content",
323
+ "label": "Placeholder",
324
+ "order": 2
325
+ },
326
+ {
327
+ "id": "label-position",
328
+ "kind": "attribute",
329
+ "ref": "label-position",
330
+ "group": "content",
331
+ "label": "Label Position",
332
+ "order": 3
333
+ },
334
+ {
335
+ "id": "type",
336
+ "kind": "attribute",
337
+ "ref": "type",
338
+ "group": "behavior",
339
+ "label": "Type",
340
+ "order": 1
341
+ },
342
+ {
343
+ "id": "autocomplete",
344
+ "kind": "attribute",
345
+ "ref": "autocomplete",
346
+ "group": "behavior",
347
+ "label": "Autocomplete",
348
+ "order": 2
349
+ },
350
+ {
351
+ "id": "disabled",
352
+ "kind": "attribute",
353
+ "ref": "disabled",
354
+ "group": "behavior",
355
+ "label": "Disabled",
356
+ "order": 3
357
+ },
358
+ {
359
+ "id": "required",
360
+ "kind": "attribute",
361
+ "ref": "required",
362
+ "group": "behavior",
363
+ "label": "Required",
364
+ "order": 4
365
+ },
366
+ {
367
+ "id": "regex",
368
+ "kind": "attribute",
369
+ "ref": "regex",
370
+ "group": "mask",
371
+ "label": "Regex Mask",
372
+ "order": 1
373
+ },
374
+ {
375
+ "id": "show-regex-placeholder",
376
+ "kind": "attribute",
377
+ "ref": "show-regex-placeholder",
378
+ "group": "mask",
379
+ "label": "Show Regex Placeholder",
380
+ "order": 2
381
+ },
382
+ {
383
+ "id": "token-font-size",
384
+ "kind": "cssToken",
385
+ "ref": "--ui-input-font-size",
386
+ "group": "typography",
387
+ "label": "Input Font Size",
388
+ "order": 1
389
+ },
390
+ {
391
+ "id": "token-label-font-size",
392
+ "kind": "cssToken",
393
+ "ref": "--ui-input-label-font-size",
394
+ "group": "typography",
395
+ "label": "Label Font Size",
396
+ "order": 2
397
+ },
398
+ {
399
+ "id": "token-padding",
400
+ "kind": "cssToken",
401
+ "ref": "--ui-input-padding",
402
+ "group": "spacing",
403
+ "label": "Padding",
404
+ "order": 1
405
+ },
406
+ {
407
+ "id": "token-floating-padding-top",
408
+ "kind": "cssToken",
409
+ "ref": "--ui-input-floating-padding-top",
410
+ "group": "floating",
411
+ "label": "Floating Padding Top",
412
+ "order": 1
413
+ },
414
+ {
415
+ "id": "token-floating-padding-right",
416
+ "kind": "cssToken",
417
+ "ref": "--ui-input-floating-padding-right",
418
+ "group": "floating",
419
+ "label": "Floating Padding Right",
420
+ "order": 2
421
+ },
422
+ {
423
+ "id": "token-floating-padding-bottom",
424
+ "kind": "cssToken",
425
+ "ref": "--ui-input-floating-padding-bottom",
426
+ "group": "floating",
427
+ "label": "Floating Padding Bottom",
428
+ "order": 3
429
+ },
430
+ {
431
+ "id": "token-floating-padding-left",
432
+ "kind": "cssToken",
433
+ "ref": "--ui-input-floating-padding-left",
434
+ "group": "floating",
435
+ "label": "Floating Padding Left",
436
+ "order": 4
437
+ },
438
+ {
439
+ "id": "token-floating-label-left",
440
+ "kind": "cssToken",
441
+ "ref": "--ui-input-floating-label-left",
442
+ "group": "floating",
443
+ "label": "Floating Label Left",
444
+ "order": 5
445
+ },
446
+ {
447
+ "id": "token-border",
448
+ "kind": "cssToken",
449
+ "ref": "--ui-input-border",
450
+ "group": "shape",
451
+ "label": "Border",
452
+ "order": 1
453
+ },
454
+ {
455
+ "id": "token-radius",
456
+ "kind": "cssToken",
457
+ "ref": "--ui-input-radius",
458
+ "group": "shape",
459
+ "label": "Radius",
460
+ "order": 2
461
+ },
462
+ {
463
+ "id": "token-bg",
464
+ "kind": "cssToken",
465
+ "ref": "--ui-input-bg",
466
+ "group": "color",
467
+ "label": "Background",
468
+ "order": 1
469
+ },
470
+ {
471
+ "id": "token-color",
472
+ "kind": "cssToken",
473
+ "ref": "--ui-input-color",
474
+ "group": "color",
475
+ "label": "Text Color",
476
+ "order": 2
477
+ },
478
+ {
479
+ "id": "token-placeholder-color",
480
+ "kind": "cssToken",
481
+ "ref": "--ui-input-placeholder-color",
482
+ "group": "color",
483
+ "label": "Placeholder Color",
484
+ "order": 3
485
+ },
486
+ {
487
+ "id": "token-label-color",
488
+ "kind": "cssToken",
489
+ "ref": "--ui-input-label-color",
490
+ "group": "color",
491
+ "label": "Label Color",
492
+ "order": 4
493
+ },
494
+ {
495
+ "id": "token-focus-ring",
496
+ "kind": "cssToken",
497
+ "ref": "--ui-input-focus-ring",
498
+ "group": "state",
499
+ "label": "Focus Ring",
500
+ "order": 1
501
+ }
502
+ ]
503
+ }
504
+ }
505
+ ]
506
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grayscale-dev/dragon",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "description": "Framework-agnostic Web Components built with Lit.",
5
5
  "type": "module",
6
6
  "files": [
@@ -14,13 +14,17 @@
14
14
  "import": "./dist/index.js",
15
15
  "require": "./dist/index.js",
16
16
  "default": "./dist/index.js"
17
+ },
18
+ "./manifest": {
19
+ "default": "./dist/manifest.json"
17
20
  }
18
21
  },
19
22
  "scripts": {
20
23
  "dev": "vite",
21
- "build": "vite build && tsc -p tsconfig.build.json",
24
+ "build": "vite build && tsc -p tsconfig.build.json && npm run build:manifest",
25
+ "build:manifest": "tsx src/manifest/build-manifest.ts",
22
26
  "preview": "vite preview",
23
- "test": "web-test-runner --config web-test-runner.config.mjs"
27
+ "test": "npm run build:manifest && web-test-runner --config web-test-runner.config.mjs"
24
28
  },
25
29
  "devDependencies": {
26
30
  "@open-wc/testing": "^4.0.0",
@@ -29,8 +33,10 @@
29
33
  "@web/test-runner": "^0.20.0",
30
34
  "@web/test-runner-playwright": "^0.11.0",
31
35
  "lit": "^3.2.1",
36
+ "tsx": "^4.20.5",
32
37
  "typescript": "^5.5.4",
33
- "vite": "^5.4.8"
38
+ "vite": "^5.4.8",
39
+ "zod": "^3.25.76"
34
40
  },
35
41
  "peerDependencies": {
36
42
  "lit": "^3.0.0"