@navikt/ds-css 5.12.5 → 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.
Files changed (37) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/accordion.css +11 -3
  3. package/button.css +58 -26
  4. package/chips.css +12 -4
  5. package/date.css +12 -4
  6. package/dist/component/accordion.css +11 -3
  7. package/dist/component/button.css +58 -26
  8. package/dist/component/chips.css +12 -4
  9. package/dist/component/date.css +12 -4
  10. package/dist/component/expansioncard.css +6 -2
  11. package/dist/component/form.css +101 -42
  12. package/dist/component/helptext.css +6 -2
  13. package/dist/component/index.css +274 -110
  14. package/dist/component/index.min.css +2 -2
  15. package/dist/component/pagination.css +6 -2
  16. package/dist/component/primitives.css +11 -2
  17. package/dist/component/primitives.min.css +1 -1
  18. package/dist/component/timeline.css +34 -16
  19. package/dist/component/togglegroup.css +16 -6
  20. package/dist/components.css +273 -109
  21. package/dist/components.min.css +1 -1
  22. package/dist/global/tokens.css +2 -1
  23. package/dist/global/tokens.min.css +1 -1
  24. package/dist/index.css +274 -110
  25. package/dist/index.min.css +2 -2
  26. package/expansioncard.css +6 -2
  27. package/form/combobox.css +21 -7
  28. package/form/radio-checkbox.css +46 -19
  29. package/form/search.css +22 -12
  30. package/form/switch.css +6 -2
  31. package/form/text-field.css +6 -2
  32. package/help-text.css +6 -2
  33. package/package.json +2 -2
  34. package/pagination.css +6 -2
  35. package/primitives/page.css +11 -2
  36. package/timeline.css +34 -16
  37. package/toggle-group.css +16 -6
package/dist/component/form.css CHANGED
@@ -235,23 +235,31 @@
235
235
  }
236
236
  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
237
237
  .navds-radio__input:focus-visible + .navds-radio__label::before {
238
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
239
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
238
+ box-shadow:
239
+ 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
240
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
241
+ 0 0 0 4px var(--a-border-focus);
240
242
  }
241
243
  @supports not selector(:focus-visible) {
242
244
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
243
245
  .navds-radio__input:focus + .navds-radio__label::before {
244
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
246
+ box-shadow:
247
+ 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
248
+ 0 0 0 4px var(--a-border-focus);
245
249
  }
246
250
  }
247
251
  .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
248
252
  .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
249
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
253
+ box-shadow:
254
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
255
+ 0 0 0 4px var(--a-border-focus);
250
256
  }
251
257
  @supports not selector(:focus-visible) {
252
258
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
253
259
  .navds-radio__input:hover:focus + .navds-radio__label::before {
254
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
260
+ box-shadow:
261
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
262
+ 0 0 0 4px var(--a-border-focus);
255
263
  }
256
264
  }
257
265
  .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
@@ -299,29 +307,38 @@
299
307
  }
300
308
  .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
301
309
  .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
302
- box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
303
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
310
+ box-shadow:
311
+ 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
312
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
313
+ 0 0 0 4px var(--a-border-focus);
304
314
  }
305
315
  @supports not selector(:focus-visible) {
306
316
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
307
317
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
308
- box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
309
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
318
+ box-shadow:
319
+ 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
320
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
321
+ 0 0 0 4px var(--a-border-focus);
310
322
  }
311
323
  }
312
324
  .navds-radio__input:checked + .navds-radio__label::before {
313
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
325
+ box-shadow:
326
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
314
327
  inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
315
328
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
316
329
  }
317
330
  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
318
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
319
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
331
+ box-shadow:
332
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
333
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
334
+ 0 0 0 4px var(--a-border-focus);
320
335
  }
321
336
  @supports not selector(:focus-visible) {
322
337
  .navds-radio__input:checked:focus + .navds-radio__label::before {
323
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
324
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
338
+ box-shadow:
339
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
340
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
341
+ 0 0 0 4px var(--a-border-focus);
325
342
  }
326
343
  }
327
344
  .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
@@ -353,14 +370,18 @@
353
370
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
354
371
  + .navds-checkbox__label::before,
355
372
  .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
356
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
373
+ box-shadow:
374
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
375
+ 0 0 0 4px var(--a-border-focus);
357
376
  }
358
377
  @supports not selector(:focus-visible) {
359
378
  .navds-checkbox--error
360
379
  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
361
380
  + .navds-checkbox__label::before,
362
381
  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
363
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
382
+ box-shadow:
383
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
384
+ 0 0 0 4px var(--a-border-focus);
364
385
  }
365
386
  }
366
387
  .navds-checkbox--error
@@ -375,7 +396,9 @@
375
396
  + .navds-checkbox__label::before,
376
397
  .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
377
398
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
378
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
399
+ box-shadow:
400
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
401
+ 0 0 0 4px var(--a-border-focus);
379
402
  }
380
403
  @supports not selector(:focus-visible) {
381
404
  .navds-checkbox--error
@@ -391,7 +414,9 @@
391
414
  + .navds-checkbox__label::before,
392
415
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
393
416
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
394
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
417
+ box-shadow:
418
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
419
+ 0 0 0 4px var(--a-border-focus);
395
420
  }
396
421
  }
397
422
  .navds-checkbox--disabled,
@@ -440,7 +465,9 @@
440
465
  }
441
466
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
442
467
  background-color: var(--a-icon-subtle);
443
- box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
468
+ box-shadow:
469
+ 0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
470
+ inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
444
471
  }
445
472
  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
446
473
  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
@@ -619,11 +646,15 @@
619
646
  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
620
647
  }
621
648
  .navds-switch__input:focus-visible ~ .navds-switch__track {
622
- box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
649
+ box-shadow:
650
+ 0 0 0 1px var(--a-surface-default),
651
+ var(--a-shadow-focus);
623
652
  }
624
653
  @supports not selector(:focus-visible) {
625
654
  .navds-switch__input:focus ~ .navds-switch__track {
626
- box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
655
+ box-shadow:
656
+ 0 0 0 1px var(--a-surface-default),
657
+ var(--a-shadow-focus);
627
658
  }
628
659
  }
629
660
  /* Thumb */
@@ -747,11 +778,15 @@
747
778
  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
748
779
  }
749
780
  .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
750
- box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
781
+ box-shadow:
782
+ 0 0 0 1px var(--a-border-danger),
783
+ var(--a-shadow-focus);
751
784
  }
752
785
  @supports not selector(:focus-visible) {
753
786
  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
754
- box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
787
+ box-shadow:
788
+ 0 0 0 1px var(--a-border-danger),
789
+ var(--a-shadow-focus);
755
790
  }
756
791
  }
757
792
  /* Disabled handling */
@@ -971,13 +1006,14 @@
971
1006
  min-width: 2.5rem;
972
1007
  }
973
1008
  .navds-search__button-search.navds-button--secondary {
974
- box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
1009
+ box-shadow:
1010
+ -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
975
1011
  0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
976
1012
  0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
977
1013
  }
978
1014
  .navds-search__button-search.navds-button--secondary:hover {
979
- box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
980
- inset,
1015
+ box-shadow:
1016
+ -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
981
1017
  0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
982
1018
  0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
983
1019
  -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
@@ -987,30 +1023,37 @@
987
1023
  z-index: auto;
988
1024
  }
989
1025
  .navds-search__button-search.navds-button--secondary:focus-visible {
990
- box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
1026
+ box-shadow:
1027
+ 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
991
1028
  var(--a-shadow-focus);
992
1029
  }
993
1030
  .navds-search__button-search.navds-button--secondary:focus-visible:hover {
994
- box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
1031
+ box-shadow:
1032
+ 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
995
1033
  var(--a-shadow-focus);
996
1034
  }
997
1035
  .navds-search__button-search.navds-button--secondary:focus-visible:active {
998
- box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
1036
+ box-shadow:
1037
+ 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
1038
+ var(--a-shadow-focus);
999
1039
  }
1000
1040
  @supports not selector(:focus-visible) {
1001
1041
  .navds-search__button-search.navds-button--secondary:focus {
1002
- box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
1042
+ box-shadow:
1043
+ 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
1003
1044
  var(--a-shadow-focus);
1004
1045
  }
1005
1046
 
1006
1047
  .navds-search__button-search.navds-button--secondary:focus:hover {
1007
- box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
1008
- inset,
1048
+ box-shadow:
1049
+ 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
1009
1050
  var(--a-shadow-focus);
1010
1051
  }
1011
1052
 
1012
1053
  .navds-search__button-search.navds-button--secondary:focus:active {
1013
- box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
1054
+ box-shadow:
1055
+ 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
1056
+ var(--a-shadow-focus);
1014
1057
  }
1015
1058
  }
1016
1059
  /* Error-handling */
@@ -1019,7 +1062,8 @@
1019
1062
  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
1020
1063
  }
1021
1064
  .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
1022
- box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
1065
+ box-shadow:
1066
+ inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
1023
1067
  var(--a-shadow-focus);
1024
1068
  }
1025
1069
  /* Focus layering */
@@ -1030,7 +1074,8 @@
1030
1074
  }
1031
1075
  @supports not selector(:focus-visible) {
1032
1076
  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
1033
- box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
1077
+ box-shadow:
1078
+ inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
1034
1079
  var(--a-shadow-focus);
1035
1080
  }
1036
1081
 
@@ -1073,7 +1118,9 @@
1073
1118
  }
1074
1119
  .navds-combobox--error
1075
1120
  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
1076
- box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
1121
+ box-shadow:
1122
+ 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
1123
+ var(--a-shadow-focus);
1077
1124
  }
1078
1125
  .navds-combobox__selected-options {
1079
1126
  gap: var(--a-spacing-2);
@@ -1115,7 +1162,9 @@
1115
1162
  box-shadow: none;
1116
1163
  }
1117
1164
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
1118
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
1165
+ box-shadow:
1166
+ 0 0 0 1px var(--a-surface-default) inset,
1167
+ var(--a-shadow-focus);
1119
1168
  box-shadow: var(--a-shadow-focus);
1120
1169
  }
1121
1170
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
@@ -1129,7 +1178,9 @@
1129
1178
  }
1130
1179
 
1131
1180
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
1132
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
1181
+ box-shadow:
1182
+ 0 0 0 1px var(--a-surface-default) inset,
1183
+ var(--a-shadow-focus);
1133
1184
  box-shadow: var(--a-shadow-focus);
1134
1185
  }
1135
1186
 
@@ -1139,7 +1190,9 @@
1139
1190
  }
1140
1191
  @supports not selector(:has) {
1141
1192
  .navds-combobox--focused .navds-combobox__wrapper-inner {
1142
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
1193
+ box-shadow:
1194
+ 0 0 0 1px var(--a-surface-default) inset,
1195
+ var(--a-shadow-focus);
1143
1196
  box-shadow: var(--a-shadow-focus);
1144
1197
  }
1145
1198
 
@@ -1187,13 +1240,17 @@
1187
1240
  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
1188
1241
  }
1189
1242
  .navds-combobox__button-toggle-list:focus-visible {
1190
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
1243
+ box-shadow:
1244
+ 0 0 0 1px var(--a-surface-default) inset,
1245
+ var(--a-shadow-focus);
1191
1246
  box-shadow: var(--a-shadow-focus);
1192
1247
  outline: none;
1193
1248
  }
1194
1249
  @supports not selector(:focus-visible) {
1195
1250
  .navds-combobox__button-toggle-list:focus {
1196
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
1251
+ box-shadow:
1252
+ 0 0 0 1px var(--a-surface-default) inset,
1253
+ var(--a-shadow-focus);
1197
1254
  box-shadow: var(--a-shadow-focus);
1198
1255
  outline: none;
1199
1256
  }
@@ -1295,7 +1352,9 @@
1295
1352
  background: var(--a-surface-neutral-subtle-hover);
1296
1353
  }
1297
1354
  .navds-combobox__list-item__new-option--focus {
1298
- box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
1355
+ box-shadow:
1356
+ var(--a-shadow-focus) inset,
1357
+ var(--a-border-action) 0 0 0 5px inset;
1299
1358
  border-radius: calc(var(--a-border-radius-medium) - 1px);
1300
1359
  }
1301
1360
  /* Mobile */
package/dist/component/helptext.css CHANGED
@@ -14,13 +14,17 @@
14
14
 
15
15
  .navds-help-text__button:focus-visible {
16
16
  outline: none;
17
- box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
17
+ box-shadow:
18
+ 0 0 0 1px var(--a-border-focus),
19
+ inset 0 0 0 1px var(--a-border-focus);
18
20
  }
19
21
 
20
22
  @supports not selector(:focus-visible) {
21
23
  .navds-help-text__button:focus {
22
24
  outline: none;
23
- box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
25
+ box-shadow:
26
+ 0 0 0 1px var(--a-border-focus),
27
+ inset 0 0 0 1px var(--a-border-focus);
24
28
  }
25
29
  }
26
30