@ndla/primitives 0.0.2 → 0.0.4
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/dist/panda.buildinfo.json +95 -25
- package/dist/styles.css +340 -50
- package/es/ArticleLists.js +4 -32
- package/es/Badge.js +4 -16
- package/es/BlockQuote.js +5 -17
- package/es/Button.js +40 -33
- package/es/Checkbox.js +160 -51
- package/es/Dialog.js +6 -7
- package/es/ExpandableBox.js +4 -17
- package/es/Field.js +17 -0
- package/es/FieldErrorMessage.js +12 -16
- package/es/FieldHelper.js +9 -12
- package/es/FramedContent.js +3 -15
- package/es/Icon.js +9 -6
- package/es/Input.js +25 -23
- package/es/Label.js +15 -39
- package/es/Menu.js +32 -6
- package/es/MessageBox.js +3 -15
- package/es/NdlaLogo.js +6 -5
- package/es/RadioGroup.js +7 -11
- package/es/Skeleton.js +2 -8
- package/es/Spinner.js +3 -15
- package/es/Switch.js +8 -15
- package/es/Table.js +2 -5
- package/es/Tabs.js +231 -0
- package/es/Text.js +33 -32
- package/es/Toast.js +14 -6
- package/es/createStyleContext.js +15 -7
- package/lib/Accordion.d.ts +14 -7
- package/lib/ArticleLists.d.ts +9 -11
- package/lib/ArticleLists.js +5 -36
- package/lib/Badge.d.ts +9 -4
- package/lib/Badge.js +4 -17
- package/lib/BlockQuote.d.ts +9 -3
- package/lib/BlockQuote.js +5 -18
- package/lib/Button.d.ts +24 -11
- package/lib/Button.js +39 -32
- package/lib/Checkbox.d.ts +172 -5
- package/lib/Checkbox.js +165 -56
- package/lib/Dialog.d.ts +18 -10
- package/lib/Dialog.js +6 -7
- package/lib/ExpandableBox.d.ts +8 -5
- package/lib/ExpandableBox.js +5 -20
- package/lib/Field.d.ts +9 -0
- package/lib/Field.js +23 -0
- package/lib/FieldErrorMessage.d.ts +3 -3
- package/lib/FieldErrorMessage.js +11 -15
- package/lib/FieldHelper.d.ts +3 -3
- package/lib/FieldHelper.js +8 -11
- package/lib/FramedContent.d.ts +8 -4
- package/lib/FramedContent.js +3 -16
- package/lib/Icon.d.ts +3 -2
- package/lib/Icon.js +8 -5
- package/lib/Input.d.ts +12 -11
- package/lib/Input.js +25 -23
- package/lib/Label.d.ts +13 -7
- package/lib/Label.js +15 -39
- package/lib/Menu.d.ts +66 -13
- package/lib/Menu.js +41 -15
- package/lib/MessageBox.d.ts +8 -4
- package/lib/MessageBox.js +3 -16
- package/lib/NdlaLogo.d.ts +5 -4
- package/lib/NdlaLogo.js +5 -4
- package/lib/Pagination.d.ts +17 -6
- package/lib/Popover.d.ts +34 -13
- package/lib/RadioGroup.d.ts +18 -7
- package/lib/RadioGroup.js +7 -11
- package/lib/Skeleton.d.ts +5 -2
- package/lib/Skeleton.js +3 -10
- package/lib/Slider.d.ts +18 -7
- package/lib/Spinner.d.ts +8 -3
- package/lib/Spinner.js +3 -16
- package/lib/Switch.d.ts +12 -7
- package/lib/Switch.js +13 -20
- package/lib/Table.d.ts +6 -3
- package/lib/Table.js +4 -8
- package/lib/Tabs.d.ts +145 -0
- package/lib/Tabs.js +239 -0
- package/lib/Text.d.ts +6 -9
- package/lib/Text.js +32 -33
- package/lib/Toast.d.ts +10 -7
- package/lib/Toast.js +15 -7
- package/lib/Tooltip.d.ts +19 -7
- package/lib/createStyleContext.d.ts +5 -3
- package/lib/createStyleContext.js +14 -6
- package/package.json +5 -5
- package/es/FormControl.js +0 -163
- package/lib/FormControl.d.ts +0 -65
- package/lib/FormControl.js +0 -173
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"width]___[value:fit-content",
|
|
67
67
|
"backgroundColor]___[value:surface.brand.1.subtle",
|
|
68
68
|
"borderColor]___[value:surface.brand.1.strong",
|
|
69
|
-
"backgroundColor]___[value:surface.brand.2.
|
|
69
|
+
"backgroundColor]___[value:surface.brand.2.moderate",
|
|
70
70
|
"borderColor]___[value:surface.brand.2.strong",
|
|
71
71
|
"backgroundColor]___[value:surface.brand.3.subtle",
|
|
72
72
|
"borderColor]___[value:surface.brand.3.strong",
|
|
@@ -136,34 +136,76 @@
|
|
|
136
136
|
"outlineOffset]___[value:4xsmall]___[cond:_focus",
|
|
137
137
|
"outlineColor]___[value:stroke.default]___[cond:_focus",
|
|
138
138
|
"borderRadius]___[value:xsmall]___[cond:_focus",
|
|
139
|
+
"color]___[value:text.default",
|
|
140
|
+
"gap]___[value:4xsmall",
|
|
141
|
+
"background]___[value:surface.actionSubtle",
|
|
142
|
+
"outlineColor]___[value:stroke.subtle",
|
|
143
|
+
"paddingBlock]___[value:4xsmall",
|
|
144
|
+
"borderRadius]___[value:large",
|
|
145
|
+
"minHeight]___[value:large",
|
|
146
|
+
"transitionProperty]___[value:border-color, background, box-shadow, color",
|
|
147
|
+
"borderColor]___[value:stroke.disabled]___[cond:_disabled",
|
|
148
|
+
"borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
|
|
149
|
+
"color]___[value:text.disabled]___[cond:_disabled<___>_checked",
|
|
150
|
+
"borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_checked",
|
|
151
|
+
"background]___[value:surface.disabled]___[cond:_disabled<___>_checked",
|
|
152
|
+
"color]___[value:text.disabled]___[cond:_disabled<___>_checked<___>_hover",
|
|
153
|
+
"borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_checked<___>_hover",
|
|
154
|
+
"background]___[value:surface.disabled]___[cond:_disabled<___>_checked<___>_hover",
|
|
155
|
+
"borderColor]___[value:stroke.hover]___[cond:_hover",
|
|
156
|
+
"outlineColor]___[value:stroke.hover]___[cond:_hover",
|
|
157
|
+
"backgroundColor]___[value:surface.dangerSubtle]___[cond:_hover<___>_invalid",
|
|
158
|
+
"color]___[value:text.onAction]___[cond:_checked",
|
|
159
|
+
"background]___[value:surface.actionSubtle.selected]___[cond:_checked",
|
|
160
|
+
"borderColor]___[value:surface.actionSubtle.selected]___[cond:_checked",
|
|
161
|
+
"outlineColor]___[value:icon.onAction]___[cond:_checked",
|
|
162
|
+
"outlineOffset]___[value:-4px]___[cond:_checked<___>_focus",
|
|
163
|
+
"outlineOffset]___[value:-2px]___[cond:_checked<___>_hover",
|
|
164
|
+
"background]___[value:surface.actionSubtle.hover]___[cond:_checked<___>_hover",
|
|
165
|
+
"color]___[value:text.default]___[cond:_checked<___>_hover",
|
|
166
|
+
"borderColor]___[value:stroke.hover]___[cond:_checked<___>_hover",
|
|
167
|
+
"outlineColor]___[value:stroke.hover]___[cond:_checked<___>_hover",
|
|
168
|
+
"borderColor]___[value:stroke.error]___[cond:_invalid",
|
|
169
|
+
"outlineColor]___[value:stroke.error]___[cond:_invalid",
|
|
170
|
+
"background]___[value:surface.dangerSubtle]___[cond:_invalid",
|
|
171
|
+
"outlineOffset]___[value:-2px]___[cond:_invalid",
|
|
172
|
+
"color]___[value:text.default]___[cond:_invalid<___>_checked",
|
|
173
|
+
"borderColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
|
|
174
|
+
"outlineColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
|
|
175
|
+
"background]___[value:surface.dangerSubtle]___[cond:_invalid<___>_checked",
|
|
176
|
+
"outlineOffset]___[value:-2px]___[cond:_invalid<___>_checked",
|
|
177
|
+
"borderColor]___[value:stroke.hover]___[cond:_invalid<___>_checked<___>_hover",
|
|
178
|
+
"outlineColor]___[value:stroke.hover]___[cond:_invalid<___>_checked<___>_hover",
|
|
179
|
+
"outlineStyle]___[value:solid]___[cond:_focus",
|
|
180
|
+
"outlineWidth]___[value:2px]___[cond:_focus",
|
|
181
|
+
"outlineOffset]___[value:-2px]___[cond:_focus",
|
|
139
182
|
"width]___[value:medium",
|
|
140
183
|
"height]___[value:medium",
|
|
141
184
|
"border]___[value:2px solid",
|
|
142
|
-
"transitionProperty]___[value:border-color, background, box-shadow, color",
|
|
143
185
|
"boxShadow]___[value:0 0 0 4px var(--shadow-color)]___[cond:_hover",
|
|
144
186
|
"boxShadowColor]___[value:surface.actionSubtle.hover.strong]___[cond:_hover",
|
|
145
|
-
"color]___[value:icon.onAction]___[cond:_checked",
|
|
146
187
|
"backgroundColor]___[value:surface.action]___[cond:_checked",
|
|
147
188
|
"borderColor]___[value:surface.action]___[cond:_checked",
|
|
148
|
-
"
|
|
149
|
-
"borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
|
|
189
|
+
"color]___[value:icon.onAction]___[cond:_checked",
|
|
150
190
|
"boxShadow]___[value:none]___[cond:_disabled<___>_hover",
|
|
151
|
-
"background]___[value:surface.disabled]___[cond:_disabled<___>_checked",
|
|
152
|
-
"borderColor]___[value:stroke.error]___[cond:_invalid",
|
|
153
191
|
"color]___[value:stroke.error]___[cond:_invalid<___>_checked",
|
|
154
|
-
"borderColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
|
|
155
192
|
"backgroundColor]___[value:surface.default]___[cond:_invalid<___>_checked",
|
|
193
|
+
"display]___[value:none",
|
|
194
|
+
"display]___[value:flex]___[cond:_checked",
|
|
195
|
+
"color]___[value:stroke.hover]___[cond:_checked<___>_hover",
|
|
196
|
+
"color]___[value:stroke.disabled]___[cond:_disabled",
|
|
197
|
+
"color]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
|
|
156
198
|
"position]___[value:fixed",
|
|
157
|
-
"left]___[value:0",
|
|
158
|
-
"top]___[value:0",
|
|
159
|
-
"width]___[value:100vw",
|
|
160
|
-
"height]___[value:100dvh",
|
|
161
|
-
"zIndex]___[value:modal",
|
|
162
199
|
"height]___[value:100vh",
|
|
200
|
+
"width]___[value:100vw",
|
|
163
201
|
"zIndex]___[value:overlay",
|
|
202
|
+
"left]___[value:0",
|
|
203
|
+
"top]___[value:0",
|
|
164
204
|
"background]___[value:rgba(1, 1, 1, 0.3)",
|
|
165
205
|
"animation]___[value:backdrop-in]___[cond:_open",
|
|
166
206
|
"animation]___[value:backdrop-out]___[cond:_closed",
|
|
207
|
+
"height]___[value:100dvh",
|
|
208
|
+
"zIndex]___[value:modal",
|
|
167
209
|
"--margin]___[value:token(sizes.medium)",
|
|
168
210
|
"position]___[value:relative",
|
|
169
211
|
"boxShadow]___[value:xlarge",
|
|
@@ -224,6 +266,7 @@
|
|
|
224
266
|
"boxShadow]___[value:4px 4px 0px 0px var(--shadow-color)",
|
|
225
267
|
"backgroundColor]___[value:surface.default",
|
|
226
268
|
"boxShadowColor]___[value:surface.brand.1.strong",
|
|
269
|
+
"backgroundColor]___[value:surface.brand.2.subtle",
|
|
227
270
|
"boxShadowColor]___[value:surface.brand.2.strong",
|
|
228
271
|
"display]___[value:inline-block",
|
|
229
272
|
"fill]___[value:currentcolor",
|
|
@@ -237,7 +280,6 @@
|
|
|
237
280
|
"width]___[value:large",
|
|
238
281
|
"height]___[value:large",
|
|
239
282
|
"outline]___[value:1px solid",
|
|
240
|
-
"outlineColor]___[value:stroke.subtle",
|
|
241
283
|
"background]___[value:background.default",
|
|
242
284
|
"minHeight]___[value:xxlarge",
|
|
243
285
|
"paddingBlock]___[value:0",
|
|
@@ -245,14 +287,12 @@
|
|
|
245
287
|
"outlineColor]___[value:stroke.error]___[cond:_ariaInvalid<___>_hover",
|
|
246
288
|
"outlineColor]___[value:stroke.error]___[cond:_ariaInvalid<___>_focusWithin",
|
|
247
289
|
"outlineColor]___[value:stroke.error]___[cond:_ariaInvalid<___>_focusWithin<___>_hover",
|
|
248
|
-
"outlineColor]___[value:stroke.hover]___[cond:_hover",
|
|
249
290
|
"outlineWidth]___[value:2px]___[cond:_focusWithin",
|
|
250
291
|
"outlineOffset]___[value:-1px]___[cond:_focusWithin",
|
|
251
292
|
"outlineColor]___[value:stroke.default]___[cond:_focusWithin",
|
|
252
293
|
"outlineColor]___[value:stroke.default]___[cond:_focusWithin<___>_hover",
|
|
253
294
|
"outlineColor]___[value:stroke.subtle]___[cond:&:disabled, &:has(:disabled)",
|
|
254
295
|
"outlineColor]___[value:stroke.subtle]___[cond:&:disabled, &:has(:disabled)<___>_hover",
|
|
255
|
-
"color]___[value:text.default",
|
|
256
296
|
"background]___[value:none",
|
|
257
297
|
"border]___[value:0",
|
|
258
298
|
"padding]___[value:xxsmall",
|
|
@@ -266,6 +306,13 @@
|
|
|
266
306
|
"border]___[value:none",
|
|
267
307
|
"padding]___[value:0",
|
|
268
308
|
"margin]___[value:0",
|
|
309
|
+
"transitionProperty]___[value:background, color",
|
|
310
|
+
"textDecoration]___[value:underline]___[cond:_hover",
|
|
311
|
+
"textDecoration]___[value:underline]___[cond:_highlighted",
|
|
312
|
+
"color]___[value:stroke.disabled]___[cond:_disabled<___>& svg",
|
|
313
|
+
"textDecoration]___[value:none]___[cond:_disabled<___>_hover",
|
|
314
|
+
"background]___[value:surface.default]___[cond:_disabled<___>_hover",
|
|
315
|
+
"color]___[value:stroke.disabled]___[cond:_disabled<___>_hover<___>& svg",
|
|
269
316
|
"background]___[value:surface.hover]___[cond:_hover",
|
|
270
317
|
"background]___[value:surface.hover]___[cond:_highlighted",
|
|
271
318
|
"background]___[value:surface.active]___[cond:_active",
|
|
@@ -277,14 +324,6 @@
|
|
|
277
324
|
"color]___[value:icon.default]___[cond:_highlighted<___>& svg",
|
|
278
325
|
"background]___[value:surface.errorSubtle.hover]___[cond:_highlighted",
|
|
279
326
|
"background]___[value:surface.errorSubtle.active]___[cond:_active",
|
|
280
|
-
"paddingBlock]___[value:4xsmall",
|
|
281
|
-
"transitionProperty]___[value:background, color",
|
|
282
|
-
"textDecoration]___[value:underline]___[cond:_hover",
|
|
283
|
-
"textDecoration]___[value:underline]___[cond:_highlighted",
|
|
284
|
-
"color]___[value:stroke.disabled]___[cond:_disabled<___>& svg",
|
|
285
|
-
"textDecoration]___[value:none]___[cond:_disabled<___>_hover",
|
|
286
|
-
"background]___[value:surface.default]___[cond:_disabled<___>_hover",
|
|
287
|
-
"color]___[value:stroke.disabled]___[cond:_disabled<___>_hover<___>& svg",
|
|
288
327
|
"minWidth]___[value:surface.xxsmall",
|
|
289
328
|
"padding]___[value:3xsmall",
|
|
290
329
|
"boxShadow]___[value:xsmall",
|
|
@@ -331,7 +370,6 @@
|
|
|
331
370
|
"cursor]___[value:default",
|
|
332
371
|
"pointerEvents]___[value:none",
|
|
333
372
|
"visibility]___[value:hidden]___[cond:&::before, &::after, *",
|
|
334
|
-
"gap]___[value:4xsmall",
|
|
335
373
|
"background]___[value:surface.disabled",
|
|
336
374
|
"flex]___[value:1",
|
|
337
375
|
"width]___[value:4xsmall]___[cond:_vertical",
|
|
@@ -402,7 +440,39 @@
|
|
|
402
440
|
"textAlign]___[value:center]___[cond:& td, & th<___>&[data-align='center']",
|
|
403
441
|
"textAlign]___[value:left]___[cond:& td, & th<___>&[data-align='left']",
|
|
404
442
|
"textAlign]___[value:right]___[cond:& td, & th<___>&[data-align='right']",
|
|
443
|
+
"flexDirection]___[value:column]___[cond:_horizontal",
|
|
444
|
+
"flexDirection]___[value:row]___[cond:_vertical",
|
|
445
|
+
"overflow]___[value:auto",
|
|
446
|
+
"marginBlockEnd]___[value:-1px]___[cond:_horizontal",
|
|
447
|
+
"marginInlineEnd]___[value:-1px]___[cond:_vertical",
|
|
448
|
+
"transitionProperty]___[value:color, background, border-color",
|
|
449
|
+
"whiteSpace]___[value:nowrap",
|
|
450
|
+
"color]___[value:text.strong]___[cond:_selected",
|
|
451
|
+
"color]___[value:text.subtle]___[cond:_disabled<___>_hover",
|
|
452
|
+
"borderColor]___[value:stroke.default]___[cond:_hover<___>_focusVisible",
|
|
453
|
+
"borderBottom]___[value:1px solid]___[cond:_horizontal",
|
|
454
|
+
"borderColor]___[value:stroke.default]___[cond:_disabled",
|
|
455
|
+
"borderColor]___[value:stroke.default]___[cond:_disabled<___>_hover",
|
|
456
|
+
"borderLeft]___[value:1px solid]___[cond:_vertical",
|
|
457
|
+
"justifyContent]___[value:flex-start]___[cond:_vertical",
|
|
458
|
+
"borderRadius]___[value:unset]___[cond:_focusVisible",
|
|
459
|
+
"borderColor]___[value:transparent",
|
|
460
|
+
"borderWidth]___[value:1px",
|
|
461
|
+
"borderTopRadius]___[value:xsmall]___[cond:_horizontal",
|
|
462
|
+
"borderTopLeftRadius]___[value:xsmall]___[cond:_vertical",
|
|
463
|
+
"borderBottomLeftRadius]___[value:xsmall]___[cond:_vertical",
|
|
464
|
+
"background]___[value:surface.default]___[cond:_selected",
|
|
465
|
+
"borderColor]___[value:stroke.subtle]___[cond:_selected",
|
|
466
|
+
"borderBottomColor]___[value:transparent]___[cond:_selected<___>_horizontal",
|
|
467
|
+
"borderRightColor]___[value:transparent]___[cond:_selected<___>_vertical",
|
|
468
|
+
"outlineOffset]___[value:-3px]___[cond:_focusVisible",
|
|
469
|
+
"outlineColor]___[value:stroke.default]___[cond:_focusVisible",
|
|
470
|
+
"paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
|
|
471
|
+
"paddingInlineStart]___[value:xsmall]___[cond:_vertical",
|
|
472
|
+
"boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
|
|
473
|
+
"padding]___[value:xsmall",
|
|
405
474
|
"textStyle]___[value:body.medium",
|
|
475
|
+
"textStyle]___[value:heading.medium",
|
|
406
476
|
"boxShadow]___[value:medium",
|
|
407
477
|
"minWidth]___[value:20rem",
|
|
408
478
|
"height]___[value:var(--height)",
|