@teseor/css 1.3.0 → 1.5.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.
Files changed (74) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +28 -9
  3. package/package.json +1 -1
  4. package/src/03-layout/app-shell/app-shell.api.json +18 -0
  5. package/src/03-layout/app-shell/app-shell.docs.json +18 -0
  6. package/src/03-layout/content/content-visual.png +0 -0
  7. package/src/03-layout/content/content.api.json +26 -0
  8. package/src/03-layout/content/content.docs.json +82 -0
  9. package/src/03-layout/content/content.visual.spec.ts +14 -0
  10. package/src/03-layout/content/index.scss +25 -0
  11. package/src/03-layout/footer/footer-visual.png +0 -0
  12. package/src/03-layout/footer/footer.api.json +45 -0
  13. package/src/03-layout/footer/footer.docs.json +110 -0
  14. package/src/03-layout/footer/footer.visual.spec.ts +14 -0
  15. package/src/03-layout/footer/index.scss +62 -0
  16. package/src/03-layout/index.scss +11 -6
  17. package/src/03-layout/main/index.scss +1 -0
  18. package/src/03-layout/nav-rail/index.scss +50 -0
  19. package/src/03-layout/nav-rail/nav-rail-visual.png +0 -0
  20. package/src/03-layout/nav-rail/nav-rail.api.json +35 -0
  21. package/src/03-layout/nav-rail/nav-rail.docs.json +76 -0
  22. package/src/03-layout/nav-rail/nav-rail.visual.spec.ts +14 -0
  23. package/src/03-layout/page-header/index.scss +52 -0
  24. package/src/03-layout/page-header/page-header-visual.png +0 -0
  25. package/src/03-layout/page-header/page-header.api.json +35 -0
  26. package/src/03-layout/page-header/page-header.docs.json +124 -0
  27. package/src/03-layout/page-header/page-header.visual.spec.ts +14 -0
  28. package/src/03-layout/sidebar/index.scss +2 -2
  29. package/src/03-layout/topbar/index.scss +62 -0
  30. package/src/03-layout/topbar/topbar-visual.png +0 -0
  31. package/src/03-layout/topbar/topbar.api.json +45 -0
  32. package/src/03-layout/topbar/topbar.docs.json +110 -0
  33. package/src/03-layout/topbar/topbar.visual.spec.ts +14 -0
  34. package/src/04-components/actions/close-button/close-button-visual.png +0 -0
  35. package/src/04-components/actions/close-button/close-button.api.json +71 -0
  36. package/src/04-components/actions/close-button/close-button.docs.json +264 -0
  37. package/src/04-components/actions/close-button/close-button.visual.spec.ts +14 -0
  38. package/src/04-components/actions/close-button/index.scss +101 -0
  39. package/src/04-components/data-display/avatar/avatar-visual.png +0 -0
  40. package/src/04-components/data-display/image/image-visual.png +0 -0
  41. package/src/04-components/data-display/image/image.api.json +76 -0
  42. package/src/04-components/data-display/image/image.docs.json +337 -0
  43. package/src/04-components/data-display/image/image.visual.spec.ts +14 -0
  44. package/src/04-components/data-display/image/index.scss +103 -0
  45. package/src/04-components/disclosure/accordion/accordion-visual.png +0 -0
  46. package/src/04-components/disclosure/disclosure/disclosure-visual.png +0 -0
  47. package/src/04-components/feedback/progress-circle/index.scss +92 -0
  48. package/src/04-components/feedback/progress-circle/progress-circle-visual.png +0 -0
  49. package/src/04-components/feedback/progress-circle/progress-circle.api.json +53 -0
  50. package/src/04-components/feedback/progress-circle/progress-circle.docs.json +377 -0
  51. package/src/04-components/feedback/progress-circle/progress-circle.visual.spec.ts +14 -0
  52. package/src/04-components/forms/field/field-visual.png +0 -0
  53. package/src/04-components/forms/fieldset/fieldset-visual.png +0 -0
  54. package/src/04-components/forms/fieldset/fieldset.api.json +49 -0
  55. package/src/04-components/forms/fieldset/fieldset.docs.json +520 -0
  56. package/src/04-components/forms/fieldset/fieldset.visual.spec.ts +14 -0
  57. package/src/04-components/forms/fieldset/index.scss +69 -0
  58. package/src/04-components/forms/form/form-visual.png +0 -0
  59. package/src/04-components/forms/form/form.api.json +38 -0
  60. package/src/04-components/forms/form/form.docs.json +482 -0
  61. package/src/04-components/forms/form/form.visual.spec.ts +14 -0
  62. package/src/04-components/forms/form/index.scss +62 -0
  63. package/src/04-components/forms/input/input-visual.png +0 -0
  64. package/src/04-components/index.scss +8 -1
  65. package/src/04-components/typography/code-block/code-block-visual.png +0 -0
  66. package/src/04-components/typography/code-block/code-block.api.json +56 -0
  67. package/src/04-components/typography/code-block/code-block.docs.json +289 -0
  68. package/src/04-components/typography/code-block/code-block.visual.spec.ts +14 -0
  69. package/src/04-components/typography/code-block/index.scss +87 -0
  70. package/src/04-components/typography/list/index.scss +65 -0
  71. package/src/04-components/typography/list/list-visual.png +0 -0
  72. package/src/04-components/typography/list/list.api.json +33 -0
  73. package/src/04-components/typography/list/list.docs.json +293 -0
  74. package/src/04-components/typography/list/list.visual.spec.ts +14 -0
package/src/04-components/feedback/progress-circle/progress-circle.docs.json ADDED
@@ -0,0 +1,377 @@
1
+ {
2
+ "id": "progress-circle",
3
+ "type": "component",
4
+ "title": "Progress Circle",
5
+ "description": "Circular progress indicator showing completion as a donut ring. Set value via --ui-progress-circle-value (0-100).",
6
+ "api": "./progress-circle.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "Default",
10
+ "examples": [
11
+ {
12
+ "layout": "cluster",
13
+ "items": [
14
+ {
15
+ "tag": "svg",
16
+ "class": "ui-progress-circle",
17
+ "attrs": {
18
+ "xmlns": "http://www.w3.org/2000/svg",
19
+ "viewBox": "0 0 100 100",
20
+ "role": "progressbar",
21
+ "aria-valuenow": "25",
22
+ "aria-valuemin": "0",
23
+ "aria-valuemax": "100"
24
+ },
25
+ "style": { "--ui-progress-circle-value": "25" },
26
+ "children": [
27
+ {
28
+ "tag": "circle",
29
+ "class": "ui-progress-circle__track",
30
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
31
+ },
32
+ {
33
+ "tag": "circle",
34
+ "class": "ui-progress-circle__fill",
35
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
36
+ }
37
+ ]
38
+ },
39
+ {
40
+ "tag": "svg",
41
+ "class": "ui-progress-circle",
42
+ "attrs": {
43
+ "xmlns": "http://www.w3.org/2000/svg",
44
+ "viewBox": "0 0 100 100",
45
+ "role": "progressbar",
46
+ "aria-valuenow": "50",
47
+ "aria-valuemin": "0",
48
+ "aria-valuemax": "100"
49
+ },
50
+ "style": { "--ui-progress-circle-value": "50" },
51
+ "children": [
52
+ {
53
+ "tag": "circle",
54
+ "class": "ui-progress-circle__track",
55
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
56
+ },
57
+ {
58
+ "tag": "circle",
59
+ "class": "ui-progress-circle__fill",
60
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
61
+ }
62
+ ]
63
+ },
64
+ {
65
+ "tag": "svg",
66
+ "class": "ui-progress-circle",
67
+ "attrs": {
68
+ "xmlns": "http://www.w3.org/2000/svg",
69
+ "viewBox": "0 0 100 100",
70
+ "role": "progressbar",
71
+ "aria-valuenow": "75",
72
+ "aria-valuemin": "0",
73
+ "aria-valuemax": "100"
74
+ },
75
+ "style": { "--ui-progress-circle-value": "75" },
76
+ "children": [
77
+ {
78
+ "tag": "circle",
79
+ "class": "ui-progress-circle__track",
80
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
81
+ },
82
+ {
83
+ "tag": "circle",
84
+ "class": "ui-progress-circle__fill",
85
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
86
+ }
87
+ ]
88
+ }
89
+ ],
90
+ "code": "<svg class=\"ui-progress-circle\" viewBox=\"0 0 100 100\"\n role=\"progressbar\" aria-valuenow=\"75\"\n style=\"--ui-progress-circle-value: 75\">\n <circle class=\"ui-progress-circle__track\" cx=\"50\" cy=\"50\" r=\"45\" />\n <circle class=\"ui-progress-circle__fill\" cx=\"50\" cy=\"50\" r=\"45\" />\n</svg>"
91
+ }
92
+ ]
93
+ },
94
+ {
95
+ "title": "Sizes",
96
+ "examples": [
97
+ {
98
+ "layout": "cluster",
99
+ "items": [
100
+ {
101
+ "tag": "svg",
102
+ "class": "ui-progress-circle ui-progress-circle--sm",
103
+ "attrs": {
104
+ "xmlns": "http://www.w3.org/2000/svg",
105
+ "viewBox": "0 0 100 100",
106
+ "role": "progressbar",
107
+ "aria-valuenow": "50",
108
+ "aria-valuemin": "0",
109
+ "aria-valuemax": "100"
110
+ },
111
+ "style": { "--ui-progress-circle-value": "50" },
112
+ "children": [
113
+ {
114
+ "tag": "circle",
115
+ "class": "ui-progress-circle__track",
116
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
117
+ },
118
+ {
119
+ "tag": "circle",
120
+ "class": "ui-progress-circle__fill",
121
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
122
+ }
123
+ ]
124
+ },
125
+ {
126
+ "tag": "svg",
127
+ "class": "ui-progress-circle",
128
+ "attrs": {
129
+ "xmlns": "http://www.w3.org/2000/svg",
130
+ "viewBox": "0 0 100 100",
131
+ "role": "progressbar",
132
+ "aria-valuenow": "50",
133
+ "aria-valuemin": "0",
134
+ "aria-valuemax": "100"
135
+ },
136
+ "style": { "--ui-progress-circle-value": "50" },
137
+ "children": [
138
+ {
139
+ "tag": "circle",
140
+ "class": "ui-progress-circle__track",
141
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
142
+ },
143
+ {
144
+ "tag": "circle",
145
+ "class": "ui-progress-circle__fill",
146
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
147
+ }
148
+ ]
149
+ },
150
+ {
151
+ "tag": "svg",
152
+ "class": "ui-progress-circle ui-progress-circle--lg",
153
+ "attrs": {
154
+ "xmlns": "http://www.w3.org/2000/svg",
155
+ "viewBox": "0 0 100 100",
156
+ "role": "progressbar",
157
+ "aria-valuenow": "50",
158
+ "aria-valuemin": "0",
159
+ "aria-valuemax": "100"
160
+ },
161
+ "style": { "--ui-progress-circle-value": "50" },
162
+ "children": [
163
+ {
164
+ "tag": "circle",
165
+ "class": "ui-progress-circle__track",
166
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
167
+ },
168
+ {
169
+ "tag": "circle",
170
+ "class": "ui-progress-circle__fill",
171
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
172
+ }
173
+ ]
174
+ },
175
+ {
176
+ "tag": "svg",
177
+ "class": "ui-progress-circle ui-progress-circle--xl",
178
+ "attrs": {
179
+ "xmlns": "http://www.w3.org/2000/svg",
180
+ "viewBox": "0 0 100 100",
181
+ "role": "progressbar",
182
+ "aria-valuenow": "50",
183
+ "aria-valuemin": "0",
184
+ "aria-valuemax": "100"
185
+ },
186
+ "style": { "--ui-progress-circle-value": "50" },
187
+ "children": [
188
+ {
189
+ "tag": "circle",
190
+ "class": "ui-progress-circle__track",
191
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
192
+ },
193
+ {
194
+ "tag": "circle",
195
+ "class": "ui-progress-circle__fill",
196
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
197
+ }
198
+ ]
199
+ }
200
+ ],
201
+ "code": "<svg class=\"ui-progress-circle ui-progress-circle--sm\" ...>...</svg>\n<svg class=\"ui-progress-circle\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--lg\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--xl\" ...>...</svg>"
202
+ }
203
+ ]
204
+ },
205
+ {
206
+ "title": "Colors",
207
+ "examples": [
208
+ {
209
+ "layout": "cluster",
210
+ "items": [
211
+ {
212
+ "tag": "svg",
213
+ "class": "ui-progress-circle",
214
+ "attrs": {
215
+ "xmlns": "http://www.w3.org/2000/svg",
216
+ "viewBox": "0 0 100 100",
217
+ "role": "progressbar",
218
+ "aria-valuenow": "65",
219
+ "aria-valuemin": "0",
220
+ "aria-valuemax": "100"
221
+ },
222
+ "style": { "--ui-progress-circle-value": "65" },
223
+ "children": [
224
+ {
225
+ "tag": "circle",
226
+ "class": "ui-progress-circle__track",
227
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
228
+ },
229
+ {
230
+ "tag": "circle",
231
+ "class": "ui-progress-circle__fill",
232
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
233
+ }
234
+ ]
235
+ },
236
+ {
237
+ "tag": "svg",
238
+ "class": "ui-progress-circle ui-progress-circle--success",
239
+ "attrs": {
240
+ "xmlns": "http://www.w3.org/2000/svg",
241
+ "viewBox": "0 0 100 100",
242
+ "role": "progressbar",
243
+ "aria-valuenow": "65",
244
+ "aria-valuemin": "0",
245
+ "aria-valuemax": "100"
246
+ },
247
+ "style": { "--ui-progress-circle-value": "65" },
248
+ "children": [
249
+ {
250
+ "tag": "circle",
251
+ "class": "ui-progress-circle__track",
252
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
253
+ },
254
+ {
255
+ "tag": "circle",
256
+ "class": "ui-progress-circle__fill",
257
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
258
+ }
259
+ ]
260
+ },
261
+ {
262
+ "tag": "svg",
263
+ "class": "ui-progress-circle ui-progress-circle--warning",
264
+ "attrs": {
265
+ "xmlns": "http://www.w3.org/2000/svg",
266
+ "viewBox": "0 0 100 100",
267
+ "role": "progressbar",
268
+ "aria-valuenow": "65",
269
+ "aria-valuemin": "0",
270
+ "aria-valuemax": "100"
271
+ },
272
+ "style": { "--ui-progress-circle-value": "65" },
273
+ "children": [
274
+ {
275
+ "tag": "circle",
276
+ "class": "ui-progress-circle__track",
277
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
278
+ },
279
+ {
280
+ "tag": "circle",
281
+ "class": "ui-progress-circle__fill",
282
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
283
+ }
284
+ ]
285
+ },
286
+ {
287
+ "tag": "svg",
288
+ "class": "ui-progress-circle ui-progress-circle--danger",
289
+ "attrs": {
290
+ "xmlns": "http://www.w3.org/2000/svg",
291
+ "viewBox": "0 0 100 100",
292
+ "role": "progressbar",
293
+ "aria-valuenow": "65",
294
+ "aria-valuemin": "0",
295
+ "aria-valuemax": "100"
296
+ },
297
+ "style": { "--ui-progress-circle-value": "65" },
298
+ "children": [
299
+ {
300
+ "tag": "circle",
301
+ "class": "ui-progress-circle__track",
302
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
303
+ },
304
+ {
305
+ "tag": "circle",
306
+ "class": "ui-progress-circle__fill",
307
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
308
+ }
309
+ ]
310
+ }
311
+ ],
312
+ "code": "<svg class=\"ui-progress-circle ui-progress-circle--success\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--warning\" ...>...</svg>\n<svg class=\"ui-progress-circle ui-progress-circle--danger\" ...>...</svg>"
313
+ }
314
+ ]
315
+ },
316
+ {
317
+ "title": "Indeterminate",
318
+ "description": "For unknown progress duration",
319
+ "examples": [
320
+ {
321
+ "items": [
322
+ {
323
+ "tag": "svg",
324
+ "class": "ui-progress-circle ui-progress-circle--indeterminate",
325
+ "attrs": {
326
+ "xmlns": "http://www.w3.org/2000/svg",
327
+ "viewBox": "0 0 100 100",
328
+ "role": "progressbar",
329
+ "aria-label": "Loading"
330
+ },
331
+ "children": [
332
+ {
333
+ "tag": "circle",
334
+ "class": "ui-progress-circle__track",
335
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
336
+ },
337
+ {
338
+ "tag": "circle",
339
+ "class": "ui-progress-circle__fill",
340
+ "attrs": { "cx": "50", "cy": "50", "r": "45" }
341
+ }
342
+ ]
343
+ }
344
+ ],
345
+ "code": "<svg class=\"ui-progress-circle ui-progress-circle--indeterminate\"\n viewBox=\"0 0 100 100\" role=\"progressbar\" aria-label=\"Loading\">\n <circle class=\"ui-progress-circle__track\" cx=\"50\" cy=\"50\" r=\"45\" />\n <circle class=\"ui-progress-circle__fill\" cx=\"50\" cy=\"50\" r=\"45\" />\n</svg>"
346
+ }
347
+ ]
348
+ }
349
+ ],
350
+ "customization": [
351
+ {
352
+ "token": "--ui-progress-circle-size",
353
+ "default": "calc(var(--unit) * 6)",
354
+ "description": "Circle diameter"
355
+ },
356
+ {
357
+ "token": "--ui-progress-circle-stroke-width",
358
+ "default": "8",
359
+ "description": "Ring thickness (SVG units)"
360
+ },
361
+ {
362
+ "token": "--ui-progress-circle-fill-color",
363
+ "default": "var(--ui-color-primary)",
364
+ "description": "Progress arc color"
365
+ },
366
+ {
367
+ "token": "--ui-progress-circle-track-color",
368
+ "default": "var(--ui-color-border)",
369
+ "description": "Background ring color"
370
+ },
371
+ {
372
+ "token": "--ui-progress-circle-value",
373
+ "default": "0",
374
+ "description": "Progress value (0-100)"
375
+ }
376
+ ]
377
+ }
package/src/04-components/feedback/progress-circle/progress-circle.visual.spec.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { resolve } from 'node:path';
2
+ import { expect, test } from '@playwright/test';
3
+ import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
4
+
5
+ const DOCS_PATH = resolve(__dirname, 'progress-circle.docs.json');
6
+
7
+ test.describe('progress-circle visual regression', () => {
8
+ test('all variations', async ({ page }) => {
9
+ await setupVisualTestFromDocs(page, DOCS_PATH);
10
+ await validateGridRhythm(page, 'progress-circle');
11
+ await saveForLostPixel(page, 'progress-circle');
12
+ await expect(page.locator('body')).toHaveScreenshot('progress-circle.visual.png');
13
+ });
14
+ });
package/src/04-components/forms/fieldset/fieldset.api.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "name": "fieldset",
3
+ "element": "fieldset",
4
+ "modifiers": {
5
+ "bordered": {
6
+ "type": "boolean"
7
+ },
8
+ "compact": {
9
+ "type": "boolean"
10
+ }
11
+ },
12
+ "elements": {
13
+ "legend": {}
14
+ },
15
+ "cssVars": [
16
+ {
17
+ "name": "--ui-fieldset-spacing",
18
+ "default": "var(--ui-space-2)"
19
+ },
20
+ {
21
+ "name": "--ui-fieldset-border-color",
22
+ "default": "var(--ui-color-border)"
23
+ },
24
+ {
25
+ "name": "--ui-fieldset-border-width",
26
+ "default": "var(--ui-border-width-sm)"
27
+ },
28
+ {
29
+ "name": "--ui-fieldset-border-radius",
30
+ "default": "var(--ui-radius-md)"
31
+ },
32
+ {
33
+ "name": "--ui-fieldset-padding",
34
+ "default": "var(--ui-space-2)"
35
+ },
36
+ {
37
+ "name": "--ui-fieldset-legend-size",
38
+ "default": "var(--ui-font-size-sm)"
39
+ },
40
+ {
41
+ "name": "--ui-fieldset-legend-weight",
42
+ "default": "var(--ui-weight-medium)"
43
+ },
44
+ {
45
+ "name": "--ui-fieldset-legend-color",
46
+ "default": "var(--ui-color-text)"
47
+ }
48
+ ]
49
+ }