@navikt/ds-css 5.12.4 → 5.13.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.
- package/CHANGELOG.md +8 -0
- package/accordion.css +11 -3
- package/button.css +58 -26
- package/chips.css +12 -4
- package/date.css +12 -4
- package/dist/component/accordion.css +11 -3
- package/dist/component/button.css +58 -26
- package/dist/component/chips.css +12 -4
- package/dist/component/date.css +12 -4
- package/dist/component/expansioncard.css +6 -2
- package/dist/component/form.css +101 -42
- package/dist/component/helptext.css +6 -2
- package/dist/component/index.css +274 -110
- package/dist/component/index.min.css +2 -2
- package/dist/component/pagination.css +6 -2
- package/dist/component/primitives.css +11 -2
- package/dist/component/primitives.min.css +1 -1
- package/dist/component/timeline.css +34 -16
- package/dist/component/togglegroup.css +16 -6
- package/dist/components.css +273 -109
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +2 -1
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +274 -110
- package/dist/index.min.css +2 -2
- package/expansioncard.css +6 -2
- package/form/combobox.css +21 -7
- package/form/radio-checkbox.css +46 -19
- package/form/search.css +22 -12
- package/form/switch.css +6 -2
- package/form/text-field.css +6 -2
- package/help-text.css +6 -2
- package/package.json +2 -2
- package/pagination.css +6 -2
- package/primitives/page.css +11 -2
- package/timeline.css +34 -16
- package/toggle-group.css +16 -6
package/CHANGELOG.md
CHANGED
package/accordion.css
CHANGED
|
@@ -48,16 +48,24 @@
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
|
51
|
-
box-shadow:
|
|
51
|
+
box-shadow:
|
|
52
|
+
var(--__ac-accordion-header-shadow),
|
|
53
|
+
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
|
55
|
-
box-shadow:
|
|
57
|
+
box-shadow:
|
|
58
|
+
inset 2px 0 0 0 var(--a-transparent),
|
|
59
|
+
inset -2px 0 0 0 var(--a-transparent),
|
|
60
|
+
inset 0 2px 0 0 var(--a-transparent),
|
|
56
61
|
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
57
62
|
}
|
|
58
63
|
|
|
59
64
|
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
|
60
|
-
box-shadow:
|
|
65
|
+
box-shadow:
|
|
66
|
+
inset 2px 0 0 0 var(--a-transparent),
|
|
67
|
+
inset -2px 0 0 0 var(--a-transparent),
|
|
68
|
+
inset 0 2px 0 0 var(--a-transparent),
|
|
61
69
|
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
62
70
|
}
|
|
63
71
|
|
package/button.css
CHANGED
|
@@ -139,15 +139,15 @@
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.navds-button--primary:focus-visible {
|
|
142
|
-
box-shadow:
|
|
143
|
-
|
|
142
|
+
box-shadow:
|
|
143
|
+
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
144
144
|
var(--a-shadow-focus);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
@supports not selector(:focus-visible) {
|
|
148
148
|
.navds-button--primary:focus {
|
|
149
|
-
box-shadow:
|
|
150
|
-
|
|
149
|
+
box-shadow:
|
|
150
|
+
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
151
151
|
var(--a-shadow-focus);
|
|
152
152
|
}
|
|
153
153
|
}
|
|
@@ -175,12 +175,16 @@
|
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
.navds-button--primary-neutral:focus-visible {
|
|
178
|
-
box-shadow:
|
|
178
|
+
box-shadow:
|
|
179
|
+
inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
|
|
180
|
+
var(--a-shadow-focus);
|
|
179
181
|
}
|
|
180
182
|
|
|
181
183
|
@supports not selector(:focus-visible) {
|
|
182
184
|
.navds-button--primary-neutral:focus {
|
|
183
|
-
box-shadow:
|
|
185
|
+
box-shadow:
|
|
186
|
+
inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
|
|
187
|
+
var(--a-shadow-focus);
|
|
184
188
|
}
|
|
185
189
|
}
|
|
186
190
|
|
|
@@ -208,15 +212,15 @@
|
|
|
208
212
|
}
|
|
209
213
|
|
|
210
214
|
.navds-button--secondary:focus-visible {
|
|
211
|
-
box-shadow:
|
|
212
|
-
|
|
215
|
+
box-shadow:
|
|
216
|
+
inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
|
|
213
217
|
var(--a-shadow-focus);
|
|
214
218
|
}
|
|
215
219
|
|
|
216
220
|
@supports not selector(:focus-visible) {
|
|
217
221
|
.navds-button--secondary:focus {
|
|
218
|
-
box-shadow:
|
|
219
|
-
|
|
222
|
+
box-shadow:
|
|
223
|
+
inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
|
|
220
224
|
var(--a-shadow-focus);
|
|
221
225
|
}
|
|
222
226
|
}
|
|
@@ -228,14 +232,16 @@
|
|
|
228
232
|
}
|
|
229
233
|
|
|
230
234
|
.navds-button--secondary:focus-visible:active {
|
|
231
|
-
box-shadow:
|
|
235
|
+
box-shadow:
|
|
236
|
+
inset 0 0 0 1px
|
|
232
237
|
var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
|
|
233
238
|
var(--a-shadow-focus);
|
|
234
239
|
}
|
|
235
240
|
|
|
236
241
|
@supports not selector(:focus-visible) {
|
|
237
242
|
.navds-button--secondary:focus:active {
|
|
238
|
-
box-shadow:
|
|
243
|
+
box-shadow:
|
|
244
|
+
inset 0 0 0 1px
|
|
239
245
|
var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
|
|
240
246
|
var(--a-shadow-focus);
|
|
241
247
|
}
|
|
@@ -264,13 +270,17 @@
|
|
|
264
270
|
|
|
265
271
|
.navds-button--secondary-neutral:focus-visible {
|
|
266
272
|
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
|
267
|
-
box-shadow:
|
|
273
|
+
box-shadow:
|
|
274
|
+
inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
|
|
275
|
+
var(--a-shadow-focus);
|
|
268
276
|
}
|
|
269
277
|
|
|
270
278
|
@supports not selector(:focus-visible) {
|
|
271
279
|
.navds-button--secondary-neutral:focus {
|
|
272
280
|
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
|
273
|
-
box-shadow:
|
|
281
|
+
box-shadow:
|
|
282
|
+
inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
|
|
283
|
+
var(--a-shadow-focus);
|
|
274
284
|
}
|
|
275
285
|
}
|
|
276
286
|
|
|
@@ -281,13 +291,15 @@
|
|
|
281
291
|
}
|
|
282
292
|
|
|
283
293
|
.navds-button--secondary-neutral:focus-visible:active {
|
|
284
|
-
box-shadow:
|
|
294
|
+
box-shadow:
|
|
295
|
+
inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
|
285
296
|
var(--a-shadow-focus);
|
|
286
297
|
}
|
|
287
298
|
|
|
288
299
|
@supports not selector(:focus-visible) {
|
|
289
300
|
.navds-button--secondary-neutral:focus:active {
|
|
290
|
-
box-shadow:
|
|
301
|
+
box-shadow:
|
|
302
|
+
inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
|
291
303
|
var(--a-shadow-focus);
|
|
292
304
|
}
|
|
293
305
|
}
|
|
@@ -314,12 +326,16 @@
|
|
|
314
326
|
}
|
|
315
327
|
|
|
316
328
|
.navds-button--tertiary:focus-visible {
|
|
317
|
-
box-shadow:
|
|
329
|
+
box-shadow:
|
|
330
|
+
inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
|
|
331
|
+
var(--a-shadow-focus);
|
|
318
332
|
}
|
|
319
333
|
|
|
320
334
|
@supports not selector(:focus-visible) {
|
|
321
335
|
.navds-button--tertiary:focus {
|
|
322
|
-
box-shadow:
|
|
336
|
+
box-shadow:
|
|
337
|
+
inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
|
|
338
|
+
var(--a-shadow-focus);
|
|
323
339
|
}
|
|
324
340
|
}
|
|
325
341
|
|
|
@@ -333,12 +349,16 @@
|
|
|
333
349
|
}
|
|
334
350
|
|
|
335
351
|
.navds-button--tertiary:focus-visible:active {
|
|
336
|
-
box-shadow:
|
|
352
|
+
box-shadow:
|
|
353
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
354
|
+
var(--a-shadow-focus);
|
|
337
355
|
}
|
|
338
356
|
|
|
339
357
|
@supports not selector(:focus-visible) {
|
|
340
358
|
.navds-button--tertiary:focus:active {
|
|
341
|
-
box-shadow:
|
|
359
|
+
box-shadow:
|
|
360
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
361
|
+
var(--a-shadow-focus);
|
|
342
362
|
}
|
|
343
363
|
}
|
|
344
364
|
|
|
@@ -365,12 +385,16 @@
|
|
|
365
385
|
}
|
|
366
386
|
|
|
367
387
|
.navds-button--tertiary-neutral:focus-visible {
|
|
368
|
-
box-shadow:
|
|
388
|
+
box-shadow:
|
|
389
|
+
inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
|
|
390
|
+
var(--a-shadow-focus);
|
|
369
391
|
}
|
|
370
392
|
|
|
371
393
|
@supports not selector(:focus-visible) {
|
|
372
394
|
.navds-button--tertiary-neutral:focus {
|
|
373
|
-
box-shadow:
|
|
395
|
+
box-shadow:
|
|
396
|
+
inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
|
|
397
|
+
var(--a-shadow-focus);
|
|
374
398
|
}
|
|
375
399
|
}
|
|
376
400
|
|
|
@@ -384,12 +408,16 @@
|
|
|
384
408
|
}
|
|
385
409
|
|
|
386
410
|
.navds-button--tertiary-neutral:focus-visible:active {
|
|
387
|
-
box-shadow:
|
|
411
|
+
box-shadow:
|
|
412
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
413
|
+
var(--a-shadow-focus);
|
|
388
414
|
}
|
|
389
415
|
|
|
390
416
|
@supports not selector(:focus-visible) {
|
|
391
417
|
.navds-button--tertiary-neutral:focus:active {
|
|
392
|
-
box-shadow:
|
|
418
|
+
box-shadow:
|
|
419
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
420
|
+
var(--a-shadow-focus);
|
|
393
421
|
}
|
|
394
422
|
}
|
|
395
423
|
|
|
@@ -420,12 +448,16 @@
|
|
|
420
448
|
}
|
|
421
449
|
|
|
422
450
|
.navds-button--danger:focus-visible {
|
|
423
|
-
box-shadow:
|
|
451
|
+
box-shadow:
|
|
452
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
453
|
+
var(--a-shadow-focus);
|
|
424
454
|
}
|
|
425
455
|
|
|
426
456
|
@supports not selector(:focus-visible) {
|
|
427
457
|
.navds-button--danger:focus {
|
|
428
|
-
box-shadow:
|
|
458
|
+
box-shadow:
|
|
459
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
460
|
+
var(--a-shadow-focus);
|
|
429
461
|
}
|
|
430
462
|
}
|
|
431
463
|
|
package/chips.css
CHANGED
|
@@ -82,7 +82,9 @@
|
|
|
82
82
|
|
|
83
83
|
.navds-chips__toggle[aria-pressed="true"]:focus-visible,
|
|
84
84
|
.navds-chips__toggle:active:focus-visible {
|
|
85
|
-
box-shadow:
|
|
85
|
+
box-shadow:
|
|
86
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
87
|
+
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
86
88
|
}
|
|
87
89
|
|
|
88
90
|
@supports not selector(:focus-visible) {
|
|
@@ -93,7 +95,9 @@
|
|
|
93
95
|
|
|
94
96
|
.navds-chips__toggle[aria-pressed="true"]:focus,
|
|
95
97
|
.navds-chips__toggle:active:focus {
|
|
96
|
-
box-shadow:
|
|
98
|
+
box-shadow:
|
|
99
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
100
|
+
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
97
101
|
}
|
|
98
102
|
}
|
|
99
103
|
|
|
@@ -144,7 +148,9 @@
|
|
|
144
148
|
}
|
|
145
149
|
|
|
146
150
|
.navds-chips__removable--action:focus-visible {
|
|
147
|
-
box-shadow:
|
|
151
|
+
box-shadow:
|
|
152
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
153
|
+
0 0 0 2px var(--a-border-focus);
|
|
148
154
|
}
|
|
149
155
|
|
|
150
156
|
.navds-chips__removable--neutral:focus-visible {
|
|
@@ -154,7 +160,9 @@
|
|
|
154
160
|
@supports not selector(:focus-visible) {
|
|
155
161
|
.navds-chips__removable--action:focus {
|
|
156
162
|
outline: none;
|
|
157
|
-
box-shadow:
|
|
163
|
+
box-shadow:
|
|
164
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
165
|
+
0 0 0 2px var(--a-border-focus);
|
|
158
166
|
}
|
|
159
167
|
|
|
160
168
|
.navds-chips__removable--neutral:focus {
|
package/date.css
CHANGED
|
@@ -89,13 +89,17 @@
|
|
|
89
89
|
|
|
90
90
|
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
|
|
91
91
|
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
|
|
92
|
-
box-shadow:
|
|
92
|
+
box-shadow:
|
|
93
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
94
|
+
var(--a-shadow-focus);
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
@supports not selector(:focus-visible) {
|
|
96
98
|
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
|
97
99
|
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
|
98
|
-
box-shadow:
|
|
100
|
+
box-shadow:
|
|
101
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
102
|
+
var(--a-shadow-focus);
|
|
99
103
|
}
|
|
100
104
|
}
|
|
101
105
|
|
|
@@ -203,12 +207,16 @@
|
|
|
203
207
|
}
|
|
204
208
|
|
|
205
209
|
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
|
|
206
|
-
box-shadow:
|
|
210
|
+
box-shadow:
|
|
211
|
+
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
212
|
+
var(--a-shadow-focus);
|
|
207
213
|
}
|
|
208
214
|
|
|
209
215
|
@supports not selector(:focus-visible) {
|
|
210
216
|
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
|
211
|
-
box-shadow:
|
|
217
|
+
box-shadow:
|
|
218
|
+
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
219
|
+
var(--a-shadow-focus);
|
|
212
220
|
}
|
|
213
221
|
}
|
|
214
222
|
|
|
@@ -49,16 +49,24 @@
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.navds-accordion__item:last-child > :where(.navds-accordion__header) {
|
|
52
|
-
box-shadow:
|
|
52
|
+
box-shadow:
|
|
53
|
+
var(--__ac-accordion-header-shadow),
|
|
54
|
+
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
|
|
56
|
-
box-shadow:
|
|
58
|
+
box-shadow:
|
|
59
|
+
inset 2px 0 0 0 var(--a-transparent),
|
|
60
|
+
inset -2px 0 0 0 var(--a-transparent),
|
|
61
|
+
inset 0 2px 0 0 var(--a-transparent),
|
|
57
62
|
inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
58
63
|
}
|
|
59
64
|
|
|
60
65
|
.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
|
|
61
|
-
box-shadow:
|
|
66
|
+
box-shadow:
|
|
67
|
+
inset 2px 0 0 0 var(--a-transparent),
|
|
68
|
+
inset -2px 0 0 0 var(--a-transparent),
|
|
69
|
+
inset 0 2px 0 0 var(--a-transparent),
|
|
62
70
|
inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
|
|
63
71
|
}
|
|
64
72
|
|
|
@@ -139,15 +139,15 @@
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.navds-button--primary:focus-visible {
|
|
142
|
-
box-shadow:
|
|
143
|
-
|
|
142
|
+
box-shadow:
|
|
143
|
+
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
144
144
|
var(--a-shadow-focus);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
@supports not selector(:focus-visible) {
|
|
148
148
|
.navds-button--primary:focus {
|
|
149
|
-
box-shadow:
|
|
150
|
-
|
|
149
|
+
box-shadow:
|
|
150
|
+
inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
|
|
151
151
|
var(--a-shadow-focus);
|
|
152
152
|
}
|
|
153
153
|
}
|
|
@@ -175,12 +175,16 @@
|
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
.navds-button--primary-neutral:focus-visible {
|
|
178
|
-
box-shadow:
|
|
178
|
+
box-shadow:
|
|
179
|
+
inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
|
|
180
|
+
var(--a-shadow-focus);
|
|
179
181
|
}
|
|
180
182
|
|
|
181
183
|
@supports not selector(:focus-visible) {
|
|
182
184
|
.navds-button--primary-neutral:focus {
|
|
183
|
-
box-shadow:
|
|
185
|
+
box-shadow:
|
|
186
|
+
inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
|
|
187
|
+
var(--a-shadow-focus);
|
|
184
188
|
}
|
|
185
189
|
}
|
|
186
190
|
|
|
@@ -208,15 +212,15 @@
|
|
|
208
212
|
}
|
|
209
213
|
|
|
210
214
|
.navds-button--secondary:focus-visible {
|
|
211
|
-
box-shadow:
|
|
212
|
-
|
|
215
|
+
box-shadow:
|
|
216
|
+
inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
|
|
213
217
|
var(--a-shadow-focus);
|
|
214
218
|
}
|
|
215
219
|
|
|
216
220
|
@supports not selector(:focus-visible) {
|
|
217
221
|
.navds-button--secondary:focus {
|
|
218
|
-
box-shadow:
|
|
219
|
-
|
|
222
|
+
box-shadow:
|
|
223
|
+
inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
|
|
220
224
|
var(--a-shadow-focus);
|
|
221
225
|
}
|
|
222
226
|
}
|
|
@@ -228,14 +232,16 @@
|
|
|
228
232
|
}
|
|
229
233
|
|
|
230
234
|
.navds-button--secondary:focus-visible:active {
|
|
231
|
-
box-shadow:
|
|
235
|
+
box-shadow:
|
|
236
|
+
inset 0 0 0 1px
|
|
232
237
|
var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
|
|
233
238
|
var(--a-shadow-focus);
|
|
234
239
|
}
|
|
235
240
|
|
|
236
241
|
@supports not selector(:focus-visible) {
|
|
237
242
|
.navds-button--secondary:focus:active {
|
|
238
|
-
box-shadow:
|
|
243
|
+
box-shadow:
|
|
244
|
+
inset 0 0 0 1px
|
|
239
245
|
var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
|
|
240
246
|
var(--a-shadow-focus);
|
|
241
247
|
}
|
|
@@ -264,13 +270,17 @@
|
|
|
264
270
|
|
|
265
271
|
.navds-button--secondary-neutral:focus-visible {
|
|
266
272
|
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
|
267
|
-
box-shadow:
|
|
273
|
+
box-shadow:
|
|
274
|
+
inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
|
|
275
|
+
var(--a-shadow-focus);
|
|
268
276
|
}
|
|
269
277
|
|
|
270
278
|
@supports not selector(:focus-visible) {
|
|
271
279
|
.navds-button--secondary-neutral:focus {
|
|
272
280
|
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
|
273
|
-
box-shadow:
|
|
281
|
+
box-shadow:
|
|
282
|
+
inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
|
|
283
|
+
var(--a-shadow-focus);
|
|
274
284
|
}
|
|
275
285
|
}
|
|
276
286
|
|
|
@@ -281,13 +291,15 @@
|
|
|
281
291
|
}
|
|
282
292
|
|
|
283
293
|
.navds-button--secondary-neutral:focus-visible:active {
|
|
284
|
-
box-shadow:
|
|
294
|
+
box-shadow:
|
|
295
|
+
inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
|
285
296
|
var(--a-shadow-focus);
|
|
286
297
|
}
|
|
287
298
|
|
|
288
299
|
@supports not selector(:focus-visible) {
|
|
289
300
|
.navds-button--secondary-neutral:focus:active {
|
|
290
|
-
box-shadow:
|
|
301
|
+
box-shadow:
|
|
302
|
+
inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
|
291
303
|
var(--a-shadow-focus);
|
|
292
304
|
}
|
|
293
305
|
}
|
|
@@ -314,12 +326,16 @@
|
|
|
314
326
|
}
|
|
315
327
|
|
|
316
328
|
.navds-button--tertiary:focus-visible {
|
|
317
|
-
box-shadow:
|
|
329
|
+
box-shadow:
|
|
330
|
+
inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
|
|
331
|
+
var(--a-shadow-focus);
|
|
318
332
|
}
|
|
319
333
|
|
|
320
334
|
@supports not selector(:focus-visible) {
|
|
321
335
|
.navds-button--tertiary:focus {
|
|
322
|
-
box-shadow:
|
|
336
|
+
box-shadow:
|
|
337
|
+
inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
|
|
338
|
+
var(--a-shadow-focus);
|
|
323
339
|
}
|
|
324
340
|
}
|
|
325
341
|
|
|
@@ -333,12 +349,16 @@
|
|
|
333
349
|
}
|
|
334
350
|
|
|
335
351
|
.navds-button--tertiary:focus-visible:active {
|
|
336
|
-
box-shadow:
|
|
352
|
+
box-shadow:
|
|
353
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
354
|
+
var(--a-shadow-focus);
|
|
337
355
|
}
|
|
338
356
|
|
|
339
357
|
@supports not selector(:focus-visible) {
|
|
340
358
|
.navds-button--tertiary:focus:active {
|
|
341
|
-
box-shadow:
|
|
359
|
+
box-shadow:
|
|
360
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
361
|
+
var(--a-shadow-focus);
|
|
342
362
|
}
|
|
343
363
|
}
|
|
344
364
|
|
|
@@ -365,12 +385,16 @@
|
|
|
365
385
|
}
|
|
366
386
|
|
|
367
387
|
.navds-button--tertiary-neutral:focus-visible {
|
|
368
|
-
box-shadow:
|
|
388
|
+
box-shadow:
|
|
389
|
+
inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
|
|
390
|
+
var(--a-shadow-focus);
|
|
369
391
|
}
|
|
370
392
|
|
|
371
393
|
@supports not selector(:focus-visible) {
|
|
372
394
|
.navds-button--tertiary-neutral:focus {
|
|
373
|
-
box-shadow:
|
|
395
|
+
box-shadow:
|
|
396
|
+
inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
|
|
397
|
+
var(--a-shadow-focus);
|
|
374
398
|
}
|
|
375
399
|
}
|
|
376
400
|
|
|
@@ -384,12 +408,16 @@
|
|
|
384
408
|
}
|
|
385
409
|
|
|
386
410
|
.navds-button--tertiary-neutral:focus-visible:active {
|
|
387
|
-
box-shadow:
|
|
411
|
+
box-shadow:
|
|
412
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
413
|
+
var(--a-shadow-focus);
|
|
388
414
|
}
|
|
389
415
|
|
|
390
416
|
@supports not selector(:focus-visible) {
|
|
391
417
|
.navds-button--tertiary-neutral:focus:active {
|
|
392
|
-
box-shadow:
|
|
418
|
+
box-shadow:
|
|
419
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
420
|
+
var(--a-shadow-focus);
|
|
393
421
|
}
|
|
394
422
|
}
|
|
395
423
|
|
|
@@ -420,12 +448,16 @@
|
|
|
420
448
|
}
|
|
421
449
|
|
|
422
450
|
.navds-button--danger:focus-visible {
|
|
423
|
-
box-shadow:
|
|
451
|
+
box-shadow:
|
|
452
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
453
|
+
var(--a-shadow-focus);
|
|
424
454
|
}
|
|
425
455
|
|
|
426
456
|
@supports not selector(:focus-visible) {
|
|
427
457
|
.navds-button--danger:focus {
|
|
428
|
-
box-shadow:
|
|
458
|
+
box-shadow:
|
|
459
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
460
|
+
var(--a-shadow-focus);
|
|
429
461
|
}
|
|
430
462
|
}
|
|
431
463
|
|
package/dist/component/chips.css
CHANGED
|
@@ -83,7 +83,9 @@
|
|
|
83
83
|
|
|
84
84
|
.navds-chips__toggle[aria-pressed="true"]:focus-visible,
|
|
85
85
|
.navds-chips__toggle:active:focus-visible {
|
|
86
|
-
box-shadow:
|
|
86
|
+
box-shadow:
|
|
87
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
88
|
+
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
87
89
|
}
|
|
88
90
|
|
|
89
91
|
@supports not selector(:focus-visible) {
|
|
@@ -94,7 +96,9 @@
|
|
|
94
96
|
|
|
95
97
|
.navds-chips__toggle[aria-pressed="true"]:focus,
|
|
96
98
|
.navds-chips__toggle:active:focus {
|
|
97
|
-
box-shadow:
|
|
99
|
+
box-shadow:
|
|
100
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
101
|
+
0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
|
98
102
|
}
|
|
99
103
|
}
|
|
100
104
|
|
|
@@ -145,7 +149,9 @@
|
|
|
145
149
|
}
|
|
146
150
|
|
|
147
151
|
.navds-chips__removable--action:focus-visible {
|
|
148
|
-
box-shadow:
|
|
152
|
+
box-shadow:
|
|
153
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
154
|
+
0 0 0 2px var(--a-border-focus);
|
|
149
155
|
}
|
|
150
156
|
|
|
151
157
|
.navds-chips__removable--neutral:focus-visible {
|
|
@@ -155,7 +161,9 @@
|
|
|
155
161
|
@supports not selector(:focus-visible) {
|
|
156
162
|
.navds-chips__removable--action:focus {
|
|
157
163
|
outline: none;
|
|
158
|
-
box-shadow:
|
|
164
|
+
box-shadow:
|
|
165
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
166
|
+
0 0 0 2px var(--a-border-focus);
|
|
159
167
|
}
|
|
160
168
|
|
|
161
169
|
.navds-chips__removable--neutral:focus {
|
package/dist/component/date.css
CHANGED
|
@@ -89,13 +89,17 @@
|
|
|
89
89
|
|
|
90
90
|
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
|
|
91
91
|
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
|
|
92
|
-
box-shadow:
|
|
92
|
+
box-shadow:
|
|
93
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
94
|
+
var(--a-shadow-focus);
|
|
93
95
|
}
|
|
94
96
|
|
|
95
97
|
@supports not selector(:focus-visible) {
|
|
96
98
|
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
|
97
99
|
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
|
98
|
-
box-shadow:
|
|
100
|
+
box-shadow:
|
|
101
|
+
inset 0 0 0 1px var(--a-surface-default),
|
|
102
|
+
var(--a-shadow-focus);
|
|
99
103
|
}
|
|
100
104
|
}
|
|
101
105
|
|
|
@@ -205,12 +209,16 @@
|
|
|
205
209
|
}
|
|
206
210
|
|
|
207
211
|
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
|
|
208
|
-
box-shadow:
|
|
212
|
+
box-shadow:
|
|
213
|
+
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
214
|
+
var(--a-shadow-focus);
|
|
209
215
|
}
|
|
210
216
|
|
|
211
217
|
@supports not selector(:focus-visible) {
|
|
212
218
|
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
|
213
|
-
box-shadow:
|
|
219
|
+
box-shadow:
|
|
220
|
+
inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
|
|
221
|
+
var(--a-shadow-focus);
|
|
214
222
|
}
|
|
215
223
|
}
|
|
216
224
|
|
|
@@ -61,7 +61,9 @@
|
|
|
61
61
|
|
|
62
62
|
.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
|
|
63
63
|
background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
|
|
64
|
-
box-shadow:
|
|
64
|
+
box-shadow:
|
|
65
|
+
1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
66
|
+
-1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
65
67
|
0 -1px 0 0 var(--__ac-expansioncard-border-color);
|
|
66
68
|
}
|
|
67
69
|
|
|
@@ -193,7 +195,9 @@
|
|
|
193
195
|
}
|
|
194
196
|
|
|
195
197
|
:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
|
|
196
|
-
box-shadow:
|
|
198
|
+
box-shadow:
|
|
199
|
+
1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
200
|
+
-1px 0 0 0 var(--__ac-expansioncard-border-color),
|
|
197
201
|
0 1px 0 0 var(--__ac-expansioncard-border-color);
|
|
198
202
|
}
|
|
199
203
|
|