twntyx-css 1.0.1 → 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/chat-ai.json +89 -0
- package/llm/components/chat-footer.json +99 -0
- package/llm/components/chat-person-to-person.json +157 -0
- package/llm/components/chat.json +11 -80
- package/llm/components/demo.json +88 -0
- package/llm/components/icons-reference.json +1 -1
- package/llm/components/{skeleton.json → loader-skeleton.json} +7 -5
- package/llm/components/{loader.json → loader-symbol.json} +10 -7
- package/llm/components/loader-text.json +100 -0
- package/llm/components/menu.json +10 -0
- package/llm/examples/chat-ai.html +1 -0
- package/llm/examples/chat-footer.html +1 -0
- package/llm/examples/chat-person-to-person.html +1 -0
- package/llm/examples/chat.html +1 -1
- package/llm/examples/demo.html +1 -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 +119 -32
- 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/chat.css +207 -0
- package/styles/colors.css +226 -200
- package/styles/loader.css +32 -24
- package/styles/skeleton.css +2 -1
- package/llm/examples/loader.html +0 -1
- package/llm/examples/skeleton.html +0 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "chat-ai",
|
|
3
|
+
"name": "AI chat structure",
|
|
4
|
+
"status": "stable",
|
|
5
|
+
"summary": "AI chat conversation patterns with text, media, MCP bubbles, loading, and assistant response loop simulations.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"ai chat",
|
|
8
|
+
"assistant",
|
|
9
|
+
"chat",
|
|
10
|
+
"chat ai",
|
|
11
|
+
"chat-ai",
|
|
12
|
+
"chatbot",
|
|
13
|
+
"loading state",
|
|
14
|
+
"mcp fallback",
|
|
15
|
+
"mcp result",
|
|
16
|
+
"mcp tool action",
|
|
17
|
+
"new message state"
|
|
18
|
+
],
|
|
19
|
+
"sourcePaths": [
|
|
20
|
+
"app/design-system/chat-ai/page.js"
|
|
21
|
+
],
|
|
22
|
+
"apiModel": "html-class",
|
|
23
|
+
"baseClass": "chat-ai",
|
|
24
|
+
"variants": [],
|
|
25
|
+
"sizes": [],
|
|
26
|
+
"states": [],
|
|
27
|
+
"structure": {
|
|
28
|
+
"rootElement": "div",
|
|
29
|
+
"requiredClasses": [
|
|
30
|
+
"chat-ai"
|
|
31
|
+
],
|
|
32
|
+
"optionalClasses": [],
|
|
33
|
+
"requiredChildren": [],
|
|
34
|
+
"optionalChildren": []
|
|
35
|
+
},
|
|
36
|
+
"attributes": {
|
|
37
|
+
"allowed": [
|
|
38
|
+
"class"
|
|
39
|
+
],
|
|
40
|
+
"required": [],
|
|
41
|
+
"dataAttributes": [
|
|
42
|
+
"data-loading"
|
|
43
|
+
],
|
|
44
|
+
"roles": [
|
|
45
|
+
"status"
|
|
46
|
+
],
|
|
47
|
+
"aria": [
|
|
48
|
+
"aria-label"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"a11y": {
|
|
52
|
+
"interactive": false,
|
|
53
|
+
"requiredRoles": [
|
|
54
|
+
"status"
|
|
55
|
+
],
|
|
56
|
+
"requiredAria": [
|
|
57
|
+
"aria-label"
|
|
58
|
+
],
|
|
59
|
+
"keyboardSupport": [],
|
|
60
|
+
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
61
|
+
},
|
|
62
|
+
"dos": [
|
|
63
|
+
"Apply the base class 'chat-ai' on the root element.",
|
|
64
|
+
"Use documented modifiers for visual variants instead of ad-hoc custom classes.",
|
|
65
|
+
"Keep semantic color usage aligned with token classes for light/dark support."
|
|
66
|
+
],
|
|
67
|
+
"donts": [
|
|
68
|
+
"Do not combine conflicting state classes on the same element.",
|
|
69
|
+
"Do not rely on undocumented internal classes in production templates.",
|
|
70
|
+
"Do not remove required accessibility attributes when component is interactive."
|
|
71
|
+
],
|
|
72
|
+
"tokenUsage": [],
|
|
73
|
+
"examples": [
|
|
74
|
+
{
|
|
75
|
+
"id": "canonical",
|
|
76
|
+
"file": "examples/chat-ai.html",
|
|
77
|
+
"description": "Minimal canonical AI chat structure usage."
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"composition": {
|
|
81
|
+
"patterns": [],
|
|
82
|
+
"relatedComponents": [],
|
|
83
|
+
"notes": []
|
|
84
|
+
},
|
|
85
|
+
"breakingChangePolicy": {
|
|
86
|
+
"classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
|
|
87
|
+
"a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "chat-footer",
|
|
3
|
+
"name": "Chat footer",
|
|
4
|
+
"status": "stable",
|
|
5
|
+
"summary": "Chat composer/footer patterns including the current footer and a full variant with file upload trigger, model selector, and dictation simulation.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"attachment",
|
|
8
|
+
"chat",
|
|
9
|
+
"chat footer",
|
|
10
|
+
"chat input",
|
|
11
|
+
"chat-footer",
|
|
12
|
+
"composer",
|
|
13
|
+
"dictation",
|
|
14
|
+
"footer",
|
|
15
|
+
"ghost select",
|
|
16
|
+
"model selector"
|
|
17
|
+
],
|
|
18
|
+
"sourcePaths": [
|
|
19
|
+
"app/design-system/chat-footer/page.js",
|
|
20
|
+
"assets/styles/chat.css",
|
|
21
|
+
"assets/styles/panel.css"
|
|
22
|
+
],
|
|
23
|
+
"apiModel": "html-class",
|
|
24
|
+
"baseClass": "chat-footer",
|
|
25
|
+
"variants": [],
|
|
26
|
+
"sizes": [],
|
|
27
|
+
"states": [],
|
|
28
|
+
"structure": {
|
|
29
|
+
"rootElement": "div",
|
|
30
|
+
"requiredClasses": [
|
|
31
|
+
"chat-footer"
|
|
32
|
+
],
|
|
33
|
+
"optionalClasses": [],
|
|
34
|
+
"requiredChildren": [],
|
|
35
|
+
"optionalChildren": []
|
|
36
|
+
},
|
|
37
|
+
"attributes": {
|
|
38
|
+
"allowed": [
|
|
39
|
+
"class"
|
|
40
|
+
],
|
|
41
|
+
"required": [],
|
|
42
|
+
"dataAttributes": [],
|
|
43
|
+
"roles": [],
|
|
44
|
+
"aria": [
|
|
45
|
+
"aria-label"
|
|
46
|
+
]
|
|
47
|
+
},
|
|
48
|
+
"a11y": {
|
|
49
|
+
"interactive": false,
|
|
50
|
+
"requiredRoles": [],
|
|
51
|
+
"requiredAria": [
|
|
52
|
+
"aria-label"
|
|
53
|
+
],
|
|
54
|
+
"keyboardSupport": [],
|
|
55
|
+
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
56
|
+
},
|
|
57
|
+
"dos": [
|
|
58
|
+
"Apply the base class 'chat-footer' on the root element.",
|
|
59
|
+
"Use documented modifiers for visual variants instead of ad-hoc custom classes.",
|
|
60
|
+
"Keep semantic color usage aligned with token classes for light/dark support."
|
|
61
|
+
],
|
|
62
|
+
"donts": [
|
|
63
|
+
"Do not combine conflicting state classes on the same element.",
|
|
64
|
+
"Do not rely on undocumented internal classes in production templates.",
|
|
65
|
+
"Do not remove required accessibility attributes when component is interactive."
|
|
66
|
+
],
|
|
67
|
+
"tokenUsage": [
|
|
68
|
+
"background-error",
|
|
69
|
+
"background-page",
|
|
70
|
+
"background-surface",
|
|
71
|
+
"background-surface-elevated",
|
|
72
|
+
"background-surface-sunken",
|
|
73
|
+
"core-black",
|
|
74
|
+
"core-white",
|
|
75
|
+
"line-default",
|
|
76
|
+
"line-strong",
|
|
77
|
+
"text-default",
|
|
78
|
+
"text-link",
|
|
79
|
+
"text-link-hover",
|
|
80
|
+
"text-secondary",
|
|
81
|
+
"text-tertiary"
|
|
82
|
+
],
|
|
83
|
+
"examples": [
|
|
84
|
+
{
|
|
85
|
+
"id": "canonical",
|
|
86
|
+
"file": "examples/chat-footer.html",
|
|
87
|
+
"description": "Minimal canonical Chat footer usage."
|
|
88
|
+
}
|
|
89
|
+
],
|
|
90
|
+
"composition": {
|
|
91
|
+
"patterns": [],
|
|
92
|
+
"relatedComponents": [],
|
|
93
|
+
"notes": []
|
|
94
|
+
},
|
|
95
|
+
"breakingChangePolicy": {
|
|
96
|
+
"classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
|
|
97
|
+
"a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
|
|
98
|
+
}
|
|
99
|
+
}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "chat-person-to-person",
|
|
3
|
+
"name": "Person to person chat structure",
|
|
4
|
+
"status": "stable",
|
|
5
|
+
"summary": "Conversation patterns between people, including text, image attachments, MCP content, loading and new-message simulation states.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"chat",
|
|
8
|
+
"chat person to person",
|
|
9
|
+
"chat structure",
|
|
10
|
+
"chat-person-to-person",
|
|
11
|
+
"conversation",
|
|
12
|
+
"human chat",
|
|
13
|
+
"loading state",
|
|
14
|
+
"mcp",
|
|
15
|
+
"message attachments",
|
|
16
|
+
"messages",
|
|
17
|
+
"person to person"
|
|
18
|
+
],
|
|
19
|
+
"sourcePaths": [
|
|
20
|
+
"app/design-system/chat-person-to-person/page.js",
|
|
21
|
+
"assets/styles/button.css",
|
|
22
|
+
"assets/styles/chat.css",
|
|
23
|
+
"assets/styles/form-text-select.css",
|
|
24
|
+
"assets/styles/panel.css",
|
|
25
|
+
"assets/styles/toast.css"
|
|
26
|
+
],
|
|
27
|
+
"apiModel": "html-class",
|
|
28
|
+
"baseClass": "chat",
|
|
29
|
+
"variants": [],
|
|
30
|
+
"sizes": [],
|
|
31
|
+
"states": [
|
|
32
|
+
{
|
|
33
|
+
"name": "is-owner",
|
|
34
|
+
"className": "is-owner",
|
|
35
|
+
"description": "Indicates messages from the current user"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "is-loading",
|
|
39
|
+
"className": "is-loading",
|
|
40
|
+
"description": "Loading state that reveals"
|
|
41
|
+
}
|
|
42
|
+
],
|
|
43
|
+
"structure": {
|
|
44
|
+
"rootElement": "div",
|
|
45
|
+
"requiredClasses": [
|
|
46
|
+
"chat"
|
|
47
|
+
],
|
|
48
|
+
"optionalClasses": [
|
|
49
|
+
"is-owner",
|
|
50
|
+
"is-loading"
|
|
51
|
+
],
|
|
52
|
+
"requiredChildren": [],
|
|
53
|
+
"optionalChildren": []
|
|
54
|
+
},
|
|
55
|
+
"attributes": {
|
|
56
|
+
"allowed": [
|
|
57
|
+
"class"
|
|
58
|
+
],
|
|
59
|
+
"required": [],
|
|
60
|
+
"dataAttributes": [
|
|
61
|
+
"data-loading"
|
|
62
|
+
],
|
|
63
|
+
"roles": [
|
|
64
|
+
"status"
|
|
65
|
+
],
|
|
66
|
+
"aria": [
|
|
67
|
+
"aria-label"
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
"a11y": {
|
|
71
|
+
"interactive": false,
|
|
72
|
+
"requiredRoles": [
|
|
73
|
+
"status"
|
|
74
|
+
],
|
|
75
|
+
"requiredAria": [
|
|
76
|
+
"aria-label"
|
|
77
|
+
],
|
|
78
|
+
"keyboardSupport": [],
|
|
79
|
+
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
80
|
+
},
|
|
81
|
+
"dos": [
|
|
82
|
+
"Apply the base class 'chat' on the root element.",
|
|
83
|
+
"Use documented modifiers for visual variants instead of ad-hoc custom classes.",
|
|
84
|
+
"Keep semantic color usage aligned with token classes for light/dark support."
|
|
85
|
+
],
|
|
86
|
+
"donts": [
|
|
87
|
+
"Do not combine conflicting state classes on the same element.",
|
|
88
|
+
"Do not rely on undocumented internal classes in production templates.",
|
|
89
|
+
"Do not remove required accessibility attributes when component is interactive."
|
|
90
|
+
],
|
|
91
|
+
"tokenUsage": [
|
|
92
|
+
"background-brand",
|
|
93
|
+
"background-brand-active",
|
|
94
|
+
"background-error",
|
|
95
|
+
"background-error-active",
|
|
96
|
+
"background-info",
|
|
97
|
+
"background-info-active",
|
|
98
|
+
"background-inverted",
|
|
99
|
+
"background-page",
|
|
100
|
+
"background-success",
|
|
101
|
+
"background-success-active",
|
|
102
|
+
"background-surface",
|
|
103
|
+
"background-surface-elevated",
|
|
104
|
+
"background-surface-sunken",
|
|
105
|
+
"background-warning",
|
|
106
|
+
"background-warning-active",
|
|
107
|
+
"brand-default",
|
|
108
|
+
"brand-moderate",
|
|
109
|
+
"brand-strong",
|
|
110
|
+
"core-black",
|
|
111
|
+
"core-ui-100",
|
|
112
|
+
"core-ui-50",
|
|
113
|
+
"core-ui-700",
|
|
114
|
+
"core-ui-800",
|
|
115
|
+
"core-ui-900",
|
|
116
|
+
"core-white",
|
|
117
|
+
"line-default",
|
|
118
|
+
"line-error",
|
|
119
|
+
"line-focus",
|
|
120
|
+
"line-highlight",
|
|
121
|
+
"line-info",
|
|
122
|
+
"line-strong",
|
|
123
|
+
"line-success",
|
|
124
|
+
"line-warning",
|
|
125
|
+
"text-attention",
|
|
126
|
+
"text-brand",
|
|
127
|
+
"text-brand-active",
|
|
128
|
+
"text-brand-hover",
|
|
129
|
+
"text-default",
|
|
130
|
+
"text-disabled",
|
|
131
|
+
"text-error",
|
|
132
|
+
"text-info",
|
|
133
|
+
"text-inverted",
|
|
134
|
+
"text-link",
|
|
135
|
+
"text-link-hover",
|
|
136
|
+
"text-secondary",
|
|
137
|
+
"text-success",
|
|
138
|
+
"text-tertiary",
|
|
139
|
+
"text-warning"
|
|
140
|
+
],
|
|
141
|
+
"examples": [
|
|
142
|
+
{
|
|
143
|
+
"id": "canonical",
|
|
144
|
+
"file": "examples/chat-person-to-person.html",
|
|
145
|
+
"description": "Minimal canonical Person to person chat structure usage."
|
|
146
|
+
}
|
|
147
|
+
],
|
|
148
|
+
"composition": {
|
|
149
|
+
"patterns": [],
|
|
150
|
+
"relatedComponents": [],
|
|
151
|
+
"notes": []
|
|
152
|
+
},
|
|
153
|
+
"breakingChangePolicy": {
|
|
154
|
+
"classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
|
|
155
|
+
"a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
|
|
156
|
+
}
|
|
157
|
+
}
|
package/llm/components/chat.json
CHANGED
|
@@ -1,56 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"id": "chat",
|
|
3
3
|
"name": "Chat",
|
|
4
|
-
"status": "
|
|
5
|
-
"summary": "
|
|
4
|
+
"status": "preview",
|
|
5
|
+
"summary": "Documentation and contract metadata for Chat in the twntyX design system.",
|
|
6
6
|
"keywords": [
|
|
7
|
-
"
|
|
8
|
-
"chat",
|
|
9
|
-
"chatbot",
|
|
10
|
-
"communication",
|
|
11
|
-
"conversation",
|
|
12
|
-
"messages"
|
|
7
|
+
"chat"
|
|
13
8
|
],
|
|
14
9
|
"sourcePaths": [
|
|
15
10
|
"app/design-system/chat/page.js",
|
|
16
|
-
"assets/styles/button.css",
|
|
17
11
|
"assets/styles/chat.css",
|
|
18
|
-
"assets/styles/
|
|
19
|
-
"assets/styles/panel.css",
|
|
20
|
-
"assets/styles/toast.css"
|
|
12
|
+
"assets/styles/panel.css"
|
|
21
13
|
],
|
|
22
14
|
"apiModel": "html-class",
|
|
23
15
|
"baseClass": "chat",
|
|
24
|
-
"variants": [
|
|
25
|
-
{
|
|
26
|
-
"name": "chat-secondary",
|
|
27
|
-
"className": "chat-secondary",
|
|
28
|
-
"description": "Alternative styling for AI chat"
|
|
29
|
-
}
|
|
30
|
-
],
|
|
16
|
+
"variants": [],
|
|
31
17
|
"sizes": [],
|
|
32
|
-
"states": [
|
|
33
|
-
{
|
|
34
|
-
"name": "is-owner",
|
|
35
|
-
"className": "is-owner",
|
|
36
|
-
"description": "Indicates messages from the current user"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"name": "is-loading",
|
|
40
|
-
"className": "is-loading",
|
|
41
|
-
"description": "Loading state that reveals"
|
|
42
|
-
}
|
|
43
|
-
],
|
|
18
|
+
"states": [],
|
|
44
19
|
"structure": {
|
|
45
20
|
"rootElement": "div",
|
|
46
21
|
"requiredClasses": [
|
|
47
22
|
"chat"
|
|
48
23
|
],
|
|
49
|
-
"optionalClasses": [
|
|
50
|
-
"chat-secondary",
|
|
51
|
-
"is-owner",
|
|
52
|
-
"is-loading"
|
|
53
|
-
],
|
|
24
|
+
"optionalClasses": [],
|
|
54
25
|
"requiredChildren": [],
|
|
55
26
|
"optionalChildren": []
|
|
56
27
|
},
|
|
@@ -59,19 +30,13 @@
|
|
|
59
30
|
"class"
|
|
60
31
|
],
|
|
61
32
|
"required": [],
|
|
62
|
-
"dataAttributes": [
|
|
63
|
-
|
|
64
|
-
],
|
|
65
|
-
"roles": [
|
|
66
|
-
"status"
|
|
67
|
-
],
|
|
33
|
+
"dataAttributes": [],
|
|
34
|
+
"roles": [],
|
|
68
35
|
"aria": []
|
|
69
36
|
},
|
|
70
37
|
"a11y": {
|
|
71
38
|
"interactive": false,
|
|
72
|
-
"requiredRoles": [
|
|
73
|
-
"status"
|
|
74
|
-
],
|
|
39
|
+
"requiredRoles": [],
|
|
75
40
|
"requiredAria": [],
|
|
76
41
|
"keyboardSupport": [],
|
|
77
42
|
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
@@ -87,54 +52,20 @@
|
|
|
87
52
|
"Do not remove required accessibility attributes when component is interactive."
|
|
88
53
|
],
|
|
89
54
|
"tokenUsage": [
|
|
90
|
-
"background-brand",
|
|
91
|
-
"background-brand-active",
|
|
92
55
|
"background-error",
|
|
93
|
-
"background-error-active",
|
|
94
|
-
"background-info",
|
|
95
|
-
"background-info-active",
|
|
96
|
-
"background-inverted",
|
|
97
56
|
"background-page",
|
|
98
|
-
"background-success",
|
|
99
|
-
"background-success-active",
|
|
100
57
|
"background-surface",
|
|
101
58
|
"background-surface-elevated",
|
|
102
59
|
"background-surface-sunken",
|
|
103
|
-
"background-warning",
|
|
104
|
-
"background-warning-active",
|
|
105
|
-
"brand-default",
|
|
106
|
-
"brand-moderate",
|
|
107
|
-
"brand-strong",
|
|
108
60
|
"core-black",
|
|
109
|
-
"core-ui-100",
|
|
110
|
-
"core-ui-50",
|
|
111
|
-
"core-ui-700",
|
|
112
|
-
"core-ui-800",
|
|
113
|
-
"core-ui-900",
|
|
114
61
|
"core-white",
|
|
115
62
|
"line-default",
|
|
116
|
-
"line-error",
|
|
117
|
-
"line-focus",
|
|
118
|
-
"line-highlight",
|
|
119
|
-
"line-info",
|
|
120
63
|
"line-strong",
|
|
121
|
-
"line-success",
|
|
122
|
-
"line-warning",
|
|
123
|
-
"text-attention",
|
|
124
|
-
"text-brand",
|
|
125
|
-
"text-brand-active",
|
|
126
|
-
"text-brand-hover",
|
|
127
64
|
"text-default",
|
|
128
|
-
"text-disabled",
|
|
129
|
-
"text-error",
|
|
130
|
-
"text-info",
|
|
131
|
-
"text-inverted",
|
|
132
65
|
"text-link",
|
|
133
66
|
"text-link-hover",
|
|
134
67
|
"text-secondary",
|
|
135
|
-
"text-
|
|
136
|
-
"text-tertiary",
|
|
137
|
-
"text-warning"
|
|
68
|
+
"text-tertiary"
|
|
138
69
|
],
|
|
139
70
|
"examples": [
|
|
140
71
|
{
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "demo",
|
|
3
|
+
"name": "Demo",
|
|
4
|
+
"status": "preview",
|
|
5
|
+
"summary": "Documentation and contract metadata for Demo in the twntyX design system.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"demo"
|
|
8
|
+
],
|
|
9
|
+
"sourcePaths": [
|
|
10
|
+
"app/design-system/demo/page.js",
|
|
11
|
+
"assets/styles/modal.css"
|
|
12
|
+
],
|
|
13
|
+
"apiModel": "html-class",
|
|
14
|
+
"baseClass": "demo",
|
|
15
|
+
"variants": [],
|
|
16
|
+
"sizes": [],
|
|
17
|
+
"states": [],
|
|
18
|
+
"structure": {
|
|
19
|
+
"rootElement": "div",
|
|
20
|
+
"requiredClasses": [
|
|
21
|
+
"demo"
|
|
22
|
+
],
|
|
23
|
+
"optionalClasses": [],
|
|
24
|
+
"requiredChildren": [],
|
|
25
|
+
"optionalChildren": []
|
|
26
|
+
},
|
|
27
|
+
"attributes": {
|
|
28
|
+
"allowed": [
|
|
29
|
+
"class"
|
|
30
|
+
],
|
|
31
|
+
"required": [],
|
|
32
|
+
"dataAttributes": [],
|
|
33
|
+
"roles": [
|
|
34
|
+
"status",
|
|
35
|
+
"tab",
|
|
36
|
+
"tablist"
|
|
37
|
+
],
|
|
38
|
+
"aria": [
|
|
39
|
+
"aria-label",
|
|
40
|
+
"aria-selected"
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
"a11y": {
|
|
44
|
+
"interactive": false,
|
|
45
|
+
"requiredRoles": [
|
|
46
|
+
"status",
|
|
47
|
+
"tab",
|
|
48
|
+
"tablist"
|
|
49
|
+
],
|
|
50
|
+
"requiredAria": [
|
|
51
|
+
"aria-label",
|
|
52
|
+
"aria-selected"
|
|
53
|
+
],
|
|
54
|
+
"keyboardSupport": [],
|
|
55
|
+
"focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
|
|
56
|
+
},
|
|
57
|
+
"dos": [
|
|
58
|
+
"Apply the base class 'demo' on the root element.",
|
|
59
|
+
"Use documented modifiers for visual variants instead of ad-hoc custom classes.",
|
|
60
|
+
"Keep semantic color usage aligned with token classes for light/dark support."
|
|
61
|
+
],
|
|
62
|
+
"donts": [
|
|
63
|
+
"Do not combine conflicting state classes on the same element.",
|
|
64
|
+
"Do not rely on undocumented internal classes in production templates.",
|
|
65
|
+
"Do not remove required accessibility attributes when component is interactive."
|
|
66
|
+
],
|
|
67
|
+
"tokenUsage": [
|
|
68
|
+
"background-overlay",
|
|
69
|
+
"background-surface",
|
|
70
|
+
"line-default"
|
|
71
|
+
],
|
|
72
|
+
"examples": [
|
|
73
|
+
{
|
|
74
|
+
"id": "canonical",
|
|
75
|
+
"file": "examples/demo.html",
|
|
76
|
+
"description": "Minimal canonical Demo usage."
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
"composition": {
|
|
80
|
+
"patterns": [],
|
|
81
|
+
"relatedComponents": [],
|
|
82
|
+
"notes": []
|
|
83
|
+
},
|
|
84
|
+
"breakingChangePolicy": {
|
|
85
|
+
"classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
|
|
86
|
+
"a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
|
|
87
|
+
}
|
|
88
|
+
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"id": "icons-reference",
|
|
3
3
|
"name": "Icons reference",
|
|
4
4
|
"status": "stable",
|
|
5
|
-
"summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
|
|
5
|
+
"summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons?icon.style=Rounded&icon.query=soun&icon.size=24) (weight 300, rounded), which provides us with an extensive icon library with over 2,500 glyphs",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"assets",
|
|
8
8
|
"collection",
|
|
@@ -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",
|
|
@@ -96,13 +98,14 @@
|
|
|
96
98
|
"core-ui-200",
|
|
97
99
|
"core-ui-700",
|
|
98
100
|
"core-white",
|
|
99
|
-
"line-strong"
|
|
101
|
+
"line-strong",
|
|
102
|
+
"text-default"
|
|
100
103
|
],
|
|
101
104
|
"examples": [
|
|
102
105
|
{
|
|
103
106
|
"id": "canonical",
|
|
104
|
-
"file": "examples/loader.html",
|
|
105
|
-
"description": "Minimal canonical
|
|
107
|
+
"file": "examples/loader-symbol.html",
|
|
108
|
+
"description": "Minimal canonical Symbol loader usage."
|
|
106
109
|
}
|
|
107
110
|
],
|
|
108
111
|
"composition": {
|