twntyx-css 1.0.2 → 1.0.3
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/llm/components/ai-orb.json +0 -1
- package/llm/components/ai-perl.json +0 -1
- package/llm/components/{skeleton.json → loader-skeleton.json} +7 -5
- package/llm/components/{loader.json → loader-symbol.json} +8 -6
- package/llm/components/loader-text.json +100 -0
- package/llm/examples/loader-skeleton.html +1 -0
- package/llm/examples/loader-symbol.html +1 -0
- package/llm/examples/loader-text.html +1 -0
- package/llm/index.json +51 -28
- package/llm/tokens.json +647 -357
- package/package.json +1 -1
- package/styles/ai.css +3 -7
- package/styles/animation.css +203 -91
- package/styles/button.css +50 -39
- package/styles/card.css +3 -3
- package/styles/colors.css +226 -200
- package/styles/loader.css +26 -26
- package/styles/skeleton.css +2 -1
- package/llm/examples/loader.html +0 -1
- package/llm/examples/skeleton.html +0 -1
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
{
|
|
2
|
-
"id": "skeleton",
|
|
3
|
-
"name": "Skeleton",
|
|
2
|
+
"id": "loader-skeleton",
|
|
3
|
+
"name": "Skeleton loader",
|
|
4
4
|
"status": "stable",
|
|
5
5
|
"summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"animation",
|
|
8
8
|
"fallback",
|
|
9
9
|
"loader",
|
|
10
|
+
"loader skeleton",
|
|
11
|
+
"loader-skeleton",
|
|
10
12
|
"loading",
|
|
11
13
|
"placeholder",
|
|
12
14
|
"preview",
|
|
@@ -19,7 +21,7 @@
|
|
|
19
21
|
"wave"
|
|
20
22
|
],
|
|
21
23
|
"sourcePaths": [
|
|
22
|
-
"app/design-system/skeleton/page.js",
|
|
24
|
+
"app/design-system/loader-skeleton/page.js",
|
|
23
25
|
"assets/styles/skeleton.css"
|
|
24
26
|
],
|
|
25
27
|
"apiModel": "html-class",
|
|
@@ -68,8 +70,8 @@
|
|
|
68
70
|
"examples": [
|
|
69
71
|
{
|
|
70
72
|
"id": "canonical",
|
|
71
|
-
"file": "examples/skeleton.html",
|
|
72
|
-
"description": "Minimal canonical Skeleton usage."
|
|
73
|
+
"file": "examples/loader-skeleton.html",
|
|
74
|
+
"description": "Minimal canonical Skeleton loader usage."
|
|
73
75
|
}
|
|
74
76
|
],
|
|
75
77
|
"composition": {
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
{
|
|
2
|
-
"id": "loader",
|
|
3
|
-
"name": "
|
|
2
|
+
"id": "loader-symbol",
|
|
3
|
+
"name": "Symbol loader",
|
|
4
4
|
"status": "stable",
|
|
5
|
-
"summary": "Loading indicators and spinners to show content loading states.",
|
|
5
|
+
"summary": "Loading indicators and symbol-based spinners to show content loading states.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"animation",
|
|
8
8
|
"busy",
|
|
9
9
|
"indicator",
|
|
10
10
|
"loader",
|
|
11
|
+
"loader symbol",
|
|
12
|
+
"loader-symbol",
|
|
11
13
|
"loading",
|
|
12
14
|
"processing",
|
|
13
15
|
"progress",
|
|
@@ -16,7 +18,7 @@
|
|
|
16
18
|
"wait"
|
|
17
19
|
],
|
|
18
20
|
"sourcePaths": [
|
|
19
|
-
"app/design-system/loader/page.js",
|
|
21
|
+
"app/design-system/loader-symbol/page.js",
|
|
20
22
|
"assets/styles/loader.css"
|
|
21
23
|
],
|
|
22
24
|
"apiModel": "html-class",
|
|
@@ -102,8 +104,8 @@
|
|
|
102
104
|
"examples": [
|
|
103
105
|
{
|
|
104
106
|
"id": "canonical",
|
|
105
|
-
"file": "examples/loader.html",
|
|
106
|
-
"description": "Minimal canonical
|
|
107
|
+
"file": "examples/loader-symbol.html",
|
|
108
|
+
"description": "Minimal canonical Symbol loader usage."
|
|
107
109
|
}
|
|
108
110
|
],
|
|
109
111
|
"composition": {
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "loader-text",
|
|
3
|
+
"name": "Text loader",
|
|
4
|
+
"status": "stable",
|
|
5
|
+
"summary": "Animated loading text with configurable gradient colors for inline and page loading states.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"gradient",
|
|
8
|
+
"indicator",
|
|
9
|
+
"loader text",
|
|
10
|
+
"loader-text",
|
|
11
|
+
"loading",
|
|
12
|
+
"message",
|
|
13
|
+
"pulse",
|
|
14
|
+
"status",
|
|
15
|
+
"text loader",
|
|
16
|
+
"wait"
|
|
17
|
+
],
|
|
18
|
+
"sourcePaths": [
|
|
19
|
+
"app/design-system/loader-text/page.js",
|
|
20
|
+
"assets/styles/loader.css"
|
|
21
|
+
],
|
|
22
|
+
"apiModel": "html-class",
|
|
23
|
+
"baseClass": "loader-text",
|
|
24
|
+
"variants": [
|
|
25
|
+
{
|
|
26
|
+
"name": "from-[color]",
|
|
27
|
+
"className": "from-[color]",
|
|
28
|
+
"description": "Set the starting color of the text loader"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "to-[color]",
|
|
32
|
+
"className": "to-[color]",
|
|
33
|
+
"description": "Set the ending color of the text loader"
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"sizes": [],
|
|
37
|
+
"states": [],
|
|
38
|
+
"structure": {
|
|
39
|
+
"rootElement": "div",
|
|
40
|
+
"requiredClasses": [
|
|
41
|
+
"loader-text"
|
|
42
|
+
],
|
|
43
|
+
"optionalClasses": [
|
|
44
|
+
"from-[color]",
|
|
45
|
+
"to-[color]"
|
|
46
|
+
],
|
|
47
|
+
"requiredChildren": [],
|
|
48
|
+
"optionalChildren": []
|
|
49
|
+
},
|
|
50
|
+
"attributes": {
|
|
51
|
+
"allowed": [
|
|
52
|
+
"class"
|
|
53
|
+
],
|
|
54
|
+
"required": [],
|
|
55
|
+
"dataAttributes": [],
|
|
56
|
+
"roles": [],
|
|
57
|
+
"aria": []
|
|
58
|
+
},
|
|
59
|
+
"a11y": {
|
|
60
|
+
"interactive": false,
|
|
61
|
+
"requiredRoles": [],
|
|
62
|
+
"requiredAria": [],
|
|
63
|
+
"keyboardSupport": [],
|
|
64
|
+
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
65
|
+
},
|
|
66
|
+
"dos": [
|
|
67
|
+
"Apply the base class 'loader-text' on the root element.",
|
|
68
|
+
"Use documented modifiers for visual variants instead of ad-hoc custom classes.",
|
|
69
|
+
"Keep semantic color usage aligned with token classes for light/dark support."
|
|
70
|
+
],
|
|
71
|
+
"donts": [
|
|
72
|
+
"Do not combine conflicting state classes on the same element.",
|
|
73
|
+
"Do not rely on undocumented internal classes in production templates.",
|
|
74
|
+
"Do not remove required accessibility attributes when component is interactive."
|
|
75
|
+
],
|
|
76
|
+
"tokenUsage": [
|
|
77
|
+
"core-black",
|
|
78
|
+
"core-ui-200",
|
|
79
|
+
"core-ui-700",
|
|
80
|
+
"core-white",
|
|
81
|
+
"line-strong",
|
|
82
|
+
"text-default"
|
|
83
|
+
],
|
|
84
|
+
"examples": [
|
|
85
|
+
{
|
|
86
|
+
"id": "canonical",
|
|
87
|
+
"file": "examples/loader-text.html",
|
|
88
|
+
"description": "Minimal canonical Text loader usage."
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
"composition": {
|
|
92
|
+
"patterns": [],
|
|
93
|
+
"relatedComponents": [],
|
|
94
|
+
"notes": []
|
|
95
|
+
},
|
|
96
|
+
"breakingChangePolicy": {
|
|
97
|
+
"classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
|
|
98
|
+
"a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<div class="skeleton">Skeleton loader</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<div class="loader">Symbol loader</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<div class="loader-text from-[color]">Text loader</div>
|
package/llm/index.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"llmSchemaVersion": "1.0.0",
|
|
3
|
-
"designSystemVersion": "1.0.
|
|
3
|
+
"designSystemVersion": "1.0.3",
|
|
4
4
|
"packageName": "twntyx-css",
|
|
5
5
|
"apiModel": "html-class",
|
|
6
|
-
"sourceFingerprint": "
|
|
6
|
+
"sourceFingerprint": "3d83af24c73bdcd72a4b708f61c25fe52a177fe10b41c2b2ba325a3cf9abf037",
|
|
7
7
|
"files": {
|
|
8
8
|
"schema": "schema.json",
|
|
9
9
|
"tokens": "tokens.json",
|
|
@@ -892,16 +892,42 @@
|
|
|
892
892
|
]
|
|
893
893
|
},
|
|
894
894
|
{
|
|
895
|
-
"id": "loader",
|
|
896
|
-
"name": "
|
|
897
|
-
"file": "components/loader.json",
|
|
895
|
+
"id": "loader-skeleton",
|
|
896
|
+
"name": "Skeleton loader",
|
|
897
|
+
"file": "components/loader-skeleton.json",
|
|
898
898
|
"status": "stable",
|
|
899
|
-
"summary": "
|
|
899
|
+
"summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
|
|
900
|
+
"keywords": [
|
|
901
|
+
"animation",
|
|
902
|
+
"fallback",
|
|
903
|
+
"loader",
|
|
904
|
+
"loader skeleton",
|
|
905
|
+
"loader-skeleton",
|
|
906
|
+
"loading",
|
|
907
|
+
"placeholder",
|
|
908
|
+
"preview",
|
|
909
|
+
"progress",
|
|
910
|
+
"pulse",
|
|
911
|
+
"shimmer",
|
|
912
|
+
"skeleton",
|
|
913
|
+
"suspense",
|
|
914
|
+
"wait",
|
|
915
|
+
"wave"
|
|
916
|
+
]
|
|
917
|
+
},
|
|
918
|
+
{
|
|
919
|
+
"id": "loader-symbol",
|
|
920
|
+
"name": "Symbol loader",
|
|
921
|
+
"file": "components/loader-symbol.json",
|
|
922
|
+
"status": "stable",
|
|
923
|
+
"summary": "Loading indicators and symbol-based spinners to show content loading states.",
|
|
900
924
|
"keywords": [
|
|
901
925
|
"animation",
|
|
902
926
|
"busy",
|
|
903
927
|
"indicator",
|
|
904
928
|
"loader",
|
|
929
|
+
"loader symbol",
|
|
930
|
+
"loader-symbol",
|
|
905
931
|
"loading",
|
|
906
932
|
"processing",
|
|
907
933
|
"progress",
|
|
@@ -910,6 +936,25 @@
|
|
|
910
936
|
"wait"
|
|
911
937
|
]
|
|
912
938
|
},
|
|
939
|
+
{
|
|
940
|
+
"id": "loader-text",
|
|
941
|
+
"name": "Text loader",
|
|
942
|
+
"file": "components/loader-text.json",
|
|
943
|
+
"status": "stable",
|
|
944
|
+
"summary": "Animated loading text with configurable gradient colors for inline and page loading states.",
|
|
945
|
+
"keywords": [
|
|
946
|
+
"gradient",
|
|
947
|
+
"indicator",
|
|
948
|
+
"loader text",
|
|
949
|
+
"loader-text",
|
|
950
|
+
"loading",
|
|
951
|
+
"message",
|
|
952
|
+
"pulse",
|
|
953
|
+
"status",
|
|
954
|
+
"text loader",
|
|
955
|
+
"wait"
|
|
956
|
+
]
|
|
957
|
+
},
|
|
913
958
|
{
|
|
914
959
|
"id": "logotype",
|
|
915
960
|
"name": "Logotype",
|
|
@@ -1260,28 +1305,6 @@
|
|
|
1260
1305
|
"stack"
|
|
1261
1306
|
]
|
|
1262
1307
|
},
|
|
1263
|
-
{
|
|
1264
|
-
"id": "skeleton",
|
|
1265
|
-
"name": "Skeleton",
|
|
1266
|
-
"file": "components/skeleton.json",
|
|
1267
|
-
"status": "stable",
|
|
1268
|
-
"summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
|
|
1269
|
-
"keywords": [
|
|
1270
|
-
"animation",
|
|
1271
|
-
"fallback",
|
|
1272
|
-
"loader",
|
|
1273
|
-
"loading",
|
|
1274
|
-
"placeholder",
|
|
1275
|
-
"preview",
|
|
1276
|
-
"progress",
|
|
1277
|
-
"pulse",
|
|
1278
|
-
"shimmer",
|
|
1279
|
-
"skeleton",
|
|
1280
|
-
"suspense",
|
|
1281
|
-
"wait",
|
|
1282
|
-
"wave"
|
|
1283
|
-
]
|
|
1284
|
-
},
|
|
1285
1308
|
{
|
|
1286
1309
|
"id": "stacked-chart",
|
|
1287
1310
|
"name": "Stacked chart",
|