@teseor/css 1.11.0 → 1.12.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 (50) hide show
  1. package/dist/compiled.css +1 -1
  2. package/dist/index.css +6 -5
  3. package/package.json +1 -1
  4. package/src/components/content/scroll-area/index.scss +1 -1
  5. package/src/components/content/scroll-area/scroll-area.api.json +1 -1
  6. package/src/components/data-display/card/card-visual.png +0 -0
  7. package/src/components/data-display/card/card.api.json +7 -0
  8. package/src/components/data-display/card/card.docs.json +118 -16
  9. package/src/components/data-display/card/index.scss +27 -0
  10. package/src/components/feedback/skeleton/skeleton-visual.png +0 -0
  11. package/src/components/feedback/skeleton/skeleton.docs.json +16 -0
  12. package/src/components/feedback/toast/toast-visual.png +0 -0
  13. package/src/components/feedback/toast/toast.docs.json +137 -0
  14. package/src/components/forms/checkbox/checkbox.docs.json +1 -6
  15. package/src/components/forms/field/field-visual.png +0 -0
  16. package/src/components/forms/field/field.api.json +3 -0
  17. package/src/components/forms/field/field.docs.json +98 -12
  18. package/src/components/forms/field/index.scss +29 -0
  19. package/src/components/forms/input/input.api.json +21 -1
  20. package/src/components/forms/radio/radio.docs.json +3 -8
  21. package/src/components/forms/textarea/index.scss +8 -0
  22. package/src/components/forms/textarea/textarea-visual.png +0 -0
  23. package/src/components/forms/textarea/textarea.api.json +3 -0
  24. package/src/components/forms/textarea/textarea.docs.json +33 -1
  25. package/src/components/navigation/breadcrumb/breadcrumb-visual.png +0 -0
  26. package/src/components/navigation/breadcrumb/breadcrumb.docs.json +70 -0
  27. package/src/components/navigation/nav/nav.api.json +10 -1
  28. package/src/components/navigation/tabs/tabs.api.json +14 -2
  29. package/src/components/overlays/drawer/drawer-visual.png +0 -0
  30. package/src/components/overlays/drawer/drawer.docs.json +25 -0
  31. package/src/components/overlays/modal/modal-visual.png +0 -0
  32. package/src/components/overlays/modal/modal.docs.json +89 -0
  33. package/src/components/overlays/popover/popover-visual.png +0 -0
  34. package/src/components/overlays/popover/popover.docs.json +46 -3
  35. package/src/config/tokens/semantic/colors/index.scss +20 -44
  36. package/src/config/tokens/theming.docs.json +135 -26
  37. package/src/layout/center/center.api.json +5 -1
  38. package/src/layout/center/index.scss +1 -0
  39. package/src/layout/column/column-visual.png +0 -0
  40. package/src/layout/column/column.docs.json +26 -0
  41. package/src/layout/grid/grid-visual.png +0 -0
  42. package/src/layout/grid/grid.docs.json +34 -0
  43. package/src/layout/row/row-visual.png +0 -0
  44. package/src/layout/row/row.docs.json +108 -0
  45. package/src/layout/sidebar-nav/sidebar-nav.docs.json +9 -3
  46. package/src/utilities/container/container.api.json +6 -0
  47. package/src/utilities/container/container.docs.json +121 -0
  48. package/src/utilities/container/index.scss +18 -0
  49. package/src/utilities/index.scss +1 -0
  50. package/src/utilities/scroll-snap/scroll-snap.docs.json +193 -4
package/src/components/overlays/popover/popover.docs.json CHANGED
@@ -52,7 +52,7 @@
52
52
  ]
53
53
  },
54
54
  {
55
- "title": "With Arrow",
55
+ "title": "Positions",
56
56
  "examples": [
57
57
  {
58
58
  "items": [
@@ -64,12 +64,55 @@
64
64
  "tag": "div",
65
65
  "class": "ui-popover ui-popover--top",
66
66
  "attrs": { "style": "position: relative;" },
67
- "children": [{ "tag": "p", "text": "Popover with arrow pointing down" }]
67
+ "children": [{ "tag": "p", "text": "Top (arrow down)" }]
68
68
  }
69
69
  ]
70
70
  }
71
+ ]
72
+ },
73
+ {
74
+ "items": [
75
+ {
76
+ "tag": "div",
77
+ "attrs": { "style": "padding: var(--ui-space-4);" },
78
+ "children": [
79
+ {
80
+ "tag": "div",
81
+ "class": "ui-popover ui-popover--bottom",
82
+ "attrs": { "style": "position: relative;" },
83
+ "children": [{ "tag": "p", "text": "Bottom (arrow up)" }]
84
+ }
85
+ ]
86
+ }
87
+ ],
88
+ "code": "<div class=\"ui-popover ui-popover--top\">...</div>\n<div class=\"ui-popover ui-popover--bottom\">...</div>"
89
+ }
90
+ ]
91
+ },
92
+ {
93
+ "title": "Visibility",
94
+ "description": "Control popover visibility and animation.",
95
+ "examples": [
96
+ {
97
+ "items": [
98
+ {
99
+ "tag": "div",
100
+ "class": "ui-popover ui-popover--visible ui-popover--animate",
101
+ "attrs": { "style": "position: relative;" },
102
+ "children": [{ "tag": "p", "text": "Visible and animated" }]
103
+ }
104
+ ]
105
+ },
106
+ {
107
+ "items": [
108
+ {
109
+ "tag": "div",
110
+ "class": "ui-popover ui-popover--hidden",
111
+ "attrs": { "style": "position: relative;" },
112
+ "children": [{ "tag": "p", "text": "Hidden popover" }]
113
+ }
71
114
  ],
72
- "code": "<div class=\"ui-popover ui-popover--top\">\n <p>Popover with arrow pointing down</p>\n</div>"
115
+ "code": "<div class=\"ui-popover ui-popover--visible ui-popover--animate\">...</div>\n<div class=\"ui-popover ui-popover--hidden\">...</div>"
73
116
  }
74
117
  ]
75
118
  }
package/src/config/tokens/semantic/colors/index.scss CHANGED
@@ -1,15 +1,17 @@
1
1
  @layer tokens {
2
2
  :root {
3
- --ui-color-text: var(--ui-color-neutral-900);
4
- --ui-color-text-muted: var(--ui-color-neutral-500);
5
- --ui-color-text-inverse: var(--ui-color-neutral-50);
3
+ color-scheme: light dark;
6
4
 
7
- --ui-color-bg: var(--ui-color-neutral-50);
8
- --ui-color-bg-subtle: var(--ui-color-neutral-100);
9
- --ui-color-bg-muted: var(--ui-color-neutral-200);
5
+ --ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));
6
+ --ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));
7
+ --ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));
10
8
 
11
- --ui-color-border: var(--ui-color-neutral-200);
12
- --ui-color-border-strong: var(--ui-color-neutral-300);
9
+ --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));
10
+ --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));
11
+ --ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
12
+
13
+ --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
14
+ --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));
13
15
 
14
16
  --ui-color-interactive: var(--ui-color-primary);
15
17
  --ui-color-interactive-hover: var(--ui-color-primary-dark);
@@ -29,33 +31,14 @@
29
31
  }
30
32
 
31
33
  @layer themes {
32
- [data-theme="dark"] {
33
- --ui-color-text: var(--ui-color-neutral-100);
34
- --ui-color-text-muted: var(--ui-color-neutral-400);
35
- --ui-color-text-inverse: var(--ui-color-neutral-900);
36
-
37
- --ui-color-bg: var(--ui-color-neutral-900);
38
- --ui-color-bg-subtle: var(--ui-color-neutral-800);
39
- --ui-color-bg-muted: var(--ui-color-neutral-700);
40
-
41
- --ui-color-border: var(--ui-color-neutral-700);
42
- --ui-color-border-strong: var(--ui-color-neutral-600);
34
+ // Explicit light mode override
35
+ [data-theme="light"] {
36
+ color-scheme: light;
43
37
  }
44
38
 
45
- // Auto-detect system dark mode when no explicit data-theme is set
46
- @media (prefers-color-scheme: dark) {
47
- :root:not([data-theme]) {
48
- --ui-color-text: var(--ui-color-neutral-100);
49
- --ui-color-text-muted: var(--ui-color-neutral-400);
50
- --ui-color-text-inverse: var(--ui-color-neutral-900);
51
-
52
- --ui-color-bg: var(--ui-color-neutral-900);
53
- --ui-color-bg-subtle: var(--ui-color-neutral-800);
54
- --ui-color-bg-muted: var(--ui-color-neutral-700);
55
-
56
- --ui-color-border: var(--ui-color-neutral-700);
57
- --ui-color-border-strong: var(--ui-color-neutral-600);
58
- }
39
+ // Explicit dark mode override
40
+ [data-theme="dark"] {
41
+ color-scheme: dark;
59
42
  }
60
43
 
61
44
  // Windows high contrast mode
@@ -68,17 +51,10 @@
68
51
  // Increased contrast preference
69
52
  @media (prefers-contrast: more) {
70
53
  :root {
71
- --ui-color-border: var(--ui-color-neutral-400);
72
- --ui-color-border-strong: var(--ui-color-neutral-600);
73
- --ui-color-text-muted: var(--ui-color-neutral-600);
74
- --ui-color-bg-subtle: var(--ui-color-neutral-200);
75
- }
76
-
77
- [data-theme="dark"] {
78
- --ui-color-border: var(--ui-color-neutral-400);
79
- --ui-color-border-strong: var(--ui-color-neutral-300);
80
- --ui-color-text-muted: var(--ui-color-neutral-300);
81
- --ui-color-bg-subtle: var(--ui-color-neutral-700);
54
+ --ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));
55
+ --ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));
56
+ --ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));
57
+ --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
82
58
  }
83
59
  }
84
60
 
package/src/config/tokens/theming.docs.json CHANGED
@@ -16,9 +16,21 @@
16
16
  "tag": "div",
17
17
  "class": "theme-demo",
18
18
  "children": [
19
- { "tag": "button", "class": "ui-button", "text": "Primary" },
20
- { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
21
- { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
19
+ {
20
+ "tag": "button",
21
+ "class": "ui-button",
22
+ "text": "Primary"
23
+ },
24
+ {
25
+ "tag": "button",
26
+ "class": "ui-button ui-button--secondary",
27
+ "text": "Secondary"
28
+ },
29
+ {
30
+ "tag": "button",
31
+ "class": "ui-button ui-button--danger",
32
+ "text": "Danger"
33
+ }
22
34
  ]
23
35
  }
24
36
  ],
@@ -31,9 +43,21 @@
31
43
  "tag": "div",
32
44
  "class": "theme-demo theme-purple",
33
45
  "children": [
34
- { "tag": "button", "class": "ui-button", "text": "Primary" },
35
- { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
36
- { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
46
+ {
47
+ "tag": "button",
48
+ "class": "ui-button",
49
+ "text": "Primary"
50
+ },
51
+ {
52
+ "tag": "button",
53
+ "class": "ui-button ui-button--secondary",
54
+ "text": "Secondary"
55
+ },
56
+ {
57
+ "tag": "button",
58
+ "class": "ui-button ui-button--danger",
59
+ "text": "Danger"
60
+ }
37
61
  ]
38
62
  }
39
63
  ],
@@ -46,9 +70,21 @@
46
70
  "tag": "div",
47
71
  "class": "theme-demo theme-teal",
48
72
  "children": [
49
- { "tag": "button", "class": "ui-button", "text": "Primary" },
50
- { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
51
- { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
73
+ {
74
+ "tag": "button",
75
+ "class": "ui-button",
76
+ "text": "Primary"
77
+ },
78
+ {
79
+ "tag": "button",
80
+ "class": "ui-button ui-button--secondary",
81
+ "text": "Secondary"
82
+ },
83
+ {
84
+ "tag": "button",
85
+ "class": "ui-button ui-button--danger",
86
+ "text": "Danger"
87
+ }
52
88
  ]
53
89
  }
54
90
  ],
@@ -61,9 +97,21 @@
61
97
  "tag": "div",
62
98
  "class": "theme-demo theme-orange",
63
99
  "children": [
64
- { "tag": "button", "class": "ui-button", "text": "Primary" },
65
- { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
66
- { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
100
+ {
101
+ "tag": "button",
102
+ "class": "ui-button",
103
+ "text": "Primary"
104
+ },
105
+ {
106
+ "tag": "button",
107
+ "class": "ui-button ui-button--secondary",
108
+ "text": "Secondary"
109
+ },
110
+ {
111
+ "tag": "button",
112
+ "class": "ui-button ui-button--danger",
113
+ "text": "Danger"
114
+ }
67
115
  ]
68
116
  }
69
117
  ],
@@ -73,10 +121,10 @@
73
121
  },
74
122
  {
75
123
  "title": "Dark Mode",
76
- "description": "Toggle dark mode with data-theme attribute",
124
+ "description": "Dark mode uses the CSS light-dark() function. Tokens resolve automatically based on color-scheme. Override with data-theme attribute.",
77
125
  "examples": [
78
126
  {
79
- "title": "Light Mode",
127
+ "title": "Automatic (system preference)",
80
128
  "items": [
81
129
  {
82
130
  "tag": "div",
@@ -85,30 +133,67 @@
85
133
  {
86
134
  "tag": "div",
87
135
  "class": "ui-card",
88
- "children": [{ "tag": "p", "text": "Light mode card" }]
136
+ "children": [
137
+ {
138
+ "tag": "p",
139
+ "text": "Follows OS color scheme"
140
+ }
141
+ ]
89
142
  }
90
143
  ]
91
144
  }
92
145
  ],
93
- "code": "<html>\n <!-- Light mode (default) -->\n</html>"
146
+ "code": ":root {\n color-scheme: light dark;\n --ui-color-bg: light-dark(\n var(--ui-color-neutral-50),\n var(--ui-color-neutral-900)\n );\n}"
94
147
  },
95
148
  {
96
- "title": "Dark Mode",
149
+ "title": "Force Light Mode",
97
150
  "items": [
98
151
  {
99
152
  "tag": "div",
100
153
  "class": "theme-demo",
101
- "attrs": { "data-theme": "dark" },
154
+ "attrs": {
155
+ "data-theme": "light"
156
+ },
102
157
  "children": [
103
158
  {
104
159
  "tag": "div",
105
160
  "class": "ui-card",
106
- "children": [{ "tag": "p", "text": "Dark mode card" }]
161
+ "children": [
162
+ {
163
+ "tag": "p",
164
+ "text": "Always light"
165
+ }
166
+ ]
107
167
  }
108
168
  ]
109
169
  }
110
170
  ],
111
- "code": "<html data-theme=\"dark\">\n <!-- Dark mode enabled -->\n</html>"
171
+ "code": "<html data-theme=\"light\">\n <!-- Forces light mode regardless of OS setting -->\n</html>"
172
+ },
173
+ {
174
+ "title": "Force Dark Mode",
175
+ "items": [
176
+ {
177
+ "tag": "div",
178
+ "class": "theme-demo",
179
+ "attrs": {
180
+ "data-theme": "dark"
181
+ },
182
+ "children": [
183
+ {
184
+ "tag": "div",
185
+ "class": "ui-card",
186
+ "children": [
187
+ {
188
+ "tag": "p",
189
+ "text": "Always dark"
190
+ }
191
+ ]
192
+ }
193
+ ]
194
+ }
195
+ ],
196
+ "code": "<html data-theme=\"dark\">\n <!-- Forces dark mode regardless of OS setting -->\n</html>"
112
197
  }
113
198
  ]
114
199
  },
@@ -123,9 +208,21 @@
123
208
  "tag": "div",
124
209
  "class": "theme-demo custom-buttons",
125
210
  "children": [
126
- { "tag": "button", "class": "ui-button ui-button--sm", "text": "Small" },
127
- { "tag": "button", "class": "ui-button", "text": "Default" },
128
- { "tag": "button", "class": "ui-button ui-button--lg", "text": "Large" }
211
+ {
212
+ "tag": "button",
213
+ "class": "ui-button ui-button--sm",
214
+ "text": "Small"
215
+ },
216
+ {
217
+ "tag": "button",
218
+ "class": "ui-button",
219
+ "text": "Default"
220
+ },
221
+ {
222
+ "tag": "button",
223
+ "class": "ui-button ui-button--lg",
224
+ "text": "Large"
225
+ }
129
226
  ]
130
227
  }
131
228
  ],
@@ -141,7 +238,12 @@
141
238
  {
142
239
  "tag": "div",
143
240
  "class": "ui-card",
144
- "children": [{ "tag": "p", "text": "Card with custom padding" }]
241
+ "children": [
242
+ {
243
+ "tag": "p",
244
+ "text": "Card with custom padding"
245
+ }
246
+ ]
145
247
  }
146
248
  ]
147
249
  }
@@ -160,12 +262,19 @@
160
262
  "tag": "div",
161
263
  "class": "theme-demo theme-corporate",
162
264
  "children": [
163
- { "tag": "button", "class": "ui-button", "text": "Action" },
265
+ {
266
+ "tag": "button",
267
+ "class": "ui-button",
268
+ "text": "Action"
269
+ },
164
270
  {
165
271
  "tag": "div",
166
272
  "class": "ui-card",
167
273
  "children": [
168
- { "tag": "p", "text": "Corporate theme with teal accent and sharp corners" }
274
+ {
275
+ "tag": "p",
276
+ "text": "Corporate theme with teal accent and sharp corners"
277
+ }
169
278
  ]
170
279
  }
171
280
  ]
package/src/layout/center/center.api.json CHANGED
@@ -2,6 +2,10 @@
2
2
  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
3
3
  "name": "center",
4
4
  "element": "div",
5
- "modifiers": {},
5
+ "modifiers": {
6
+ "column": {
7
+ "type": "boolean"
8
+ }
9
+ },
6
10
  "cssVars": []
7
11
  }
package/src/layout/center/index.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  justify-content: center;
9
9
  }
10
10
 
11
+ // @modifier boolean column
11
12
  .center--column {
12
13
  flex-direction: column;
13
14
  }
package/src/layout/column/column-visual.png CHANGED
Binary file
package/src/layout/column/column.docs.json CHANGED
@@ -124,6 +124,32 @@
124
124
  ]
125
125
  }
126
126
  ]
127
+ },
128
+ {
129
+ "items": [
130
+ {
131
+ "tag": "div",
132
+ "class": "ui-column ui-column--xl",
133
+ "children": [
134
+ {
135
+ "tag": "div",
136
+ "text": "xl gap",
137
+ "style": {
138
+ "background": "var(--ui-color-bg-muted)",
139
+ "padding": "var(--ui-space-1)"
140
+ }
141
+ },
142
+ {
143
+ "tag": "div",
144
+ "text": "xl gap",
145
+ "style": {
146
+ "background": "var(--ui-color-bg-muted)",
147
+ "padding": "var(--ui-space-1)"
148
+ }
149
+ }
150
+ ]
151
+ }
152
+ ]
127
153
  }
128
154
  ]
129
155
  }
package/src/layout/grid/grid-visual.png CHANGED
Binary file
package/src/layout/grid/grid.docs.json CHANGED
@@ -109,6 +109,40 @@
109
109
  ]
110
110
  }
111
111
  ]
112
+ },
113
+ {
114
+ "items": [
115
+ {
116
+ "tag": "div",
117
+ "class": "ui-grid ui-grid--auto",
118
+ "children": [
119
+ {
120
+ "tag": "div",
121
+ "text": "Auto",
122
+ "style": {
123
+ "background": "var(--ui-color-bg-muted)",
124
+ "padding": "var(--ui-space-2)"
125
+ }
126
+ },
127
+ {
128
+ "tag": "div",
129
+ "text": "Auto",
130
+ "style": {
131
+ "background": "var(--ui-color-bg-muted)",
132
+ "padding": "var(--ui-space-2)"
133
+ }
134
+ },
135
+ {
136
+ "tag": "div",
137
+ "text": "Auto",
138
+ "style": {
139
+ "background": "var(--ui-color-bg-muted)",
140
+ "padding": "var(--ui-space-2)"
141
+ }
142
+ }
143
+ ]
144
+ }
145
+ ]
112
146
  }
113
147
  ]
114
148
  }
package/src/layout/row/row-visual.png CHANGED
Binary file
package/src/layout/row/row.docs.json CHANGED
@@ -122,6 +122,114 @@
122
122
  ]
123
123
  }
124
124
  ]
125
+ },
126
+ {
127
+ "items": [
128
+ {
129
+ "tag": "div",
130
+ "class": "ui-row ui-row--sm",
131
+ "children": [
132
+ {
133
+ "tag": "div",
134
+ "text": "sm",
135
+ "style": {
136
+ "background": "var(--ui-color-bg-muted)",
137
+ "padding": "var(--ui-space-1)"
138
+ }
139
+ },
140
+ {
141
+ "tag": "div",
142
+ "text": "sm",
143
+ "style": {
144
+ "background": "var(--ui-color-bg-muted)",
145
+ "padding": "var(--ui-space-1)"
146
+ }
147
+ },
148
+ {
149
+ "tag": "div",
150
+ "text": "sm",
151
+ "style": {
152
+ "background": "var(--ui-color-bg-muted)",
153
+ "padding": "var(--ui-space-1)"
154
+ }
155
+ }
156
+ ]
157
+ }
158
+ ]
159
+ }
160
+ ]
161
+ },
162
+ {
163
+ "title": "Alignment",
164
+ "examples": [
165
+ {
166
+ "items": [
167
+ {
168
+ "tag": "div",
169
+ "class": "ui-row ui-row--start",
170
+ "style": { "background": "var(--ui-color-bg-muted)" },
171
+ "children": [
172
+ {
173
+ "tag": "div",
174
+ "text": "Start",
175
+ "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
176
+ }
177
+ ]
178
+ }
179
+ ]
180
+ },
181
+ {
182
+ "items": [
183
+ {
184
+ "tag": "div",
185
+ "class": "ui-row ui-row--center",
186
+ "style": { "background": "var(--ui-color-bg-muted)" },
187
+ "children": [
188
+ {
189
+ "tag": "div",
190
+ "text": "Center",
191
+ "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
192
+ }
193
+ ]
194
+ }
195
+ ]
196
+ },
197
+ {
198
+ "items": [
199
+ {
200
+ "tag": "div",
201
+ "class": "ui-row ui-row--end",
202
+ "style": { "background": "var(--ui-color-bg-muted)" },
203
+ "children": [
204
+ {
205
+ "tag": "div",
206
+ "text": "End",
207
+ "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
208
+ }
209
+ ]
210
+ }
211
+ ]
212
+ },
213
+ {
214
+ "items": [
215
+ {
216
+ "tag": "div",
217
+ "class": "ui-row ui-row--between",
218
+ "style": { "background": "var(--ui-color-bg-muted)" },
219
+ "children": [
220
+ {
221
+ "tag": "div",
222
+ "text": "Between A",
223
+ "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
224
+ },
225
+ {
226
+ "tag": "div",
227
+ "text": "Between B",
228
+ "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
229
+ }
230
+ ]
231
+ }
232
+ ]
125
233
  }
126
234
  ]
127
235
  }
package/src/layout/sidebar-nav/sidebar-nav.docs.json CHANGED
@@ -495,9 +495,15 @@
495
495
  "tag": "li",
496
496
  "children": [
497
497
  {
498
- "tag": "span",
499
- "class": "ui-sidebar-nav__subgroup-label",
500
- "text": "Actions"
498
+ "tag": "div",
499
+ "class": "ui-sidebar-nav__subgroup",
500
+ "children": [
501
+ {
502
+ "tag": "span",
503
+ "class": "ui-sidebar-nav__subgroup-label",
504
+ "text": "Actions"
505
+ }
506
+ ]
501
507
  }
502
508
  ]
503
509
  },
package/src/utilities/container/container.api.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "name": "container",
3
+ "type": "utility",
4
+ "utilities": ["container-inline", "container-size", "container-normal"],
5
+ "cssVars": []
6
+ }