@navikt/ds-css 5.12.5 → 5.14.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 (54) hide show
  1. package/CHANGELOG.md +16 -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/date.min.css +1 -1
  11. package/dist/component/expansioncard.css +6 -2
  12. package/dist/component/form.css +101 -42
  13. package/dist/component/form.min.css +1 -1
  14. package/dist/component/grid.min.css +1 -1
  15. package/dist/component/helptext.css +6 -2
  16. package/dist/component/helptext.min.css +1 -1
  17. package/dist/component/index.css +293 -113
  18. package/dist/component/index.min.css +3 -3
  19. package/dist/component/internalheader.min.css +1 -1
  20. package/dist/component/loader.min.css +1 -1
  21. package/dist/component/pagination.css +6 -2
  22. package/dist/component/primitives.css +11 -2
  23. package/dist/component/primitives.min.css +1 -1
  24. package/dist/component/table.css +3 -3
  25. package/dist/component/table.min.css +1 -1
  26. package/dist/component/tabs.min.css +1 -1
  27. package/dist/component/tag.css +18 -0
  28. package/dist/component/tag.min.css +1 -1
  29. package/dist/component/timeline.css +34 -16
  30. package/dist/component/timeline.min.css +1 -1
  31. package/dist/component/togglegroup.css +16 -6
  32. package/dist/component/typography.min.css +1 -1
  33. package/dist/components.css +294 -112
  34. package/dist/components.min.css +2 -2
  35. package/dist/global/baseline.min.css +1 -1
  36. package/dist/global/reset.min.css +1 -1
  37. package/dist/global/tokens.css +2 -1
  38. package/dist/global/tokens.min.css +1 -1
  39. package/dist/index.css +293 -113
  40. package/dist/index.min.css +3 -3
  41. package/expansioncard.css +6 -2
  42. package/form/combobox.css +21 -7
  43. package/form/radio-checkbox.css +46 -19
  44. package/form/search.css +22 -12
  45. package/form/switch.css +6 -2
  46. package/form/text-field.css +6 -2
  47. package/help-text.css +6 -2
  48. package/package.json +2 -2
  49. package/pagination.css +6 -2
  50. package/primitives/page.css +11 -2
  51. package/table.css +3 -3
  52. package/tag.css +18 -0
  53. package/timeline.css +34 -16
  54. package/toggle-group.css +16 -6
@@ -610,16 +610,24 @@
610
610
  }
611
611
 
612
612
  .navds-accordion__item:last-child > :where(.navds-accordion__header) {
613
- box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
613
+ box-shadow:
614
+ var(--__ac-accordion-header-shadow),
615
+ inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
614
616
  }
615
617
 
616
618
  .navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
617
- box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
619
+ box-shadow:
620
+ inset 2px 0 0 0 var(--a-transparent),
621
+ inset -2px 0 0 0 var(--a-transparent),
622
+ inset 0 2px 0 0 var(--a-transparent),
618
623
  inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
619
624
  }
620
625
 
621
626
  .navds-accordion__item:last-child:where(.navds-accordion__item--open) {
622
- box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
627
+ box-shadow:
628
+ inset 2px 0 0 0 var(--a-transparent),
629
+ inset -2px 0 0 0 var(--a-transparent),
630
+ inset 0 2px 0 0 var(--a-transparent),
623
631
  inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
624
632
  }
625
633
 
@@ -952,15 +960,15 @@
952
960
  }
953
961
 
954
962
  .navds-button--primary:focus-visible {
955
- box-shadow: inset 0 0 0 1px
956
- var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
963
+ box-shadow:
964
+ inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
957
965
  var(--a-shadow-focus);
958
966
  }
959
967
 
960
968
  @supports not selector(:focus-visible) {
961
969
  .navds-button--primary:focus {
962
- box-shadow: inset 0 0 0 1px
963
- var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
970
+ box-shadow:
971
+ inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
964
972
  var(--a-shadow-focus);
965
973
  }
966
974
  }
@@ -988,12 +996,16 @@
988
996
  }
989
997
 
990
998
  .navds-button--primary-neutral:focus-visible {
991
- box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
999
+ box-shadow:
1000
+ inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
1001
+ var(--a-shadow-focus);
992
1002
  }
993
1003
 
994
1004
  @supports not selector(:focus-visible) {
995
1005
  .navds-button--primary-neutral:focus {
996
- box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
1006
+ box-shadow:
1007
+ inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)),
1008
+ var(--a-shadow-focus);
997
1009
  }
998
1010
  }
999
1011
 
@@ -1021,15 +1033,15 @@
1021
1033
  }
1022
1034
 
1023
1035
  .navds-button--secondary:focus-visible {
1024
- box-shadow: inset 0 0 0 2px
1025
- var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
1036
+ box-shadow:
1037
+ inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
1026
1038
  var(--a-shadow-focus);
1027
1039
  }
1028
1040
 
1029
1041
  @supports not selector(:focus-visible) {
1030
1042
  .navds-button--secondary:focus {
1031
- box-shadow: inset 0 0 0 2px
1032
- var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
1043
+ box-shadow:
1044
+ inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--__ac-button-secondary-focus-border, var(--a-border-action))),
1033
1045
  var(--a-shadow-focus);
1034
1046
  }
1035
1047
  }
@@ -1041,14 +1053,16 @@
1041
1053
  }
1042
1054
 
1043
1055
  .navds-button--secondary:focus-visible:active {
1044
- box-shadow: inset 0 0 0 1px
1056
+ box-shadow:
1057
+ inset 0 0 0 1px
1045
1058
  var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
1046
1059
  var(--a-shadow-focus);
1047
1060
  }
1048
1061
 
1049
1062
  @supports not selector(:focus-visible) {
1050
1063
  .navds-button--secondary:focus:active {
1051
- box-shadow: inset 0 0 0 1px
1064
+ box-shadow:
1065
+ inset 0 0 0 1px
1052
1066
  var(--ac-button-secondary-active-focus-border, var(--__ac-button-secondary-active-focus-border, var(--a-surface-default))),
1053
1067
  var(--a-shadow-focus);
1054
1068
  }
@@ -1077,13 +1091,17 @@
1077
1091
 
1078
1092
  .navds-button--secondary-neutral:focus-visible {
1079
1093
  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
1080
- box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1094
+ box-shadow:
1095
+ inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
1096
+ var(--a-shadow-focus);
1081
1097
  }
1082
1098
 
1083
1099
  @supports not selector(:focus-visible) {
1084
1100
  .navds-button--secondary-neutral:focus {
1085
1101
  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
1086
- box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1102
+ box-shadow:
1103
+ inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)),
1104
+ var(--a-shadow-focus);
1087
1105
  }
1088
1106
  }
1089
1107
 
@@ -1094,13 +1112,15 @@
1094
1112
  }
1095
1113
 
1096
1114
  .navds-button--secondary-neutral:focus-visible:active {
1097
- box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
1115
+ box-shadow:
1116
+ inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
1098
1117
  var(--a-shadow-focus);
1099
1118
  }
1100
1119
 
1101
1120
  @supports not selector(:focus-visible) {
1102
1121
  .navds-button--secondary-neutral:focus:active {
1103
- box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
1122
+ box-shadow:
1123
+ inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
1104
1124
  var(--a-shadow-focus);
1105
1125
  }
1106
1126
  }
@@ -1127,12 +1147,16 @@
1127
1147
  }
1128
1148
 
1129
1149
  .navds-button--tertiary:focus-visible {
1130
- box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
1150
+ box-shadow:
1151
+ inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
1152
+ var(--a-shadow-focus);
1131
1153
  }
1132
1154
 
1133
1155
  @supports not selector(:focus-visible) {
1134
1156
  .navds-button--tertiary:focus {
1135
- box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
1157
+ box-shadow:
1158
+ inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)),
1159
+ var(--a-shadow-focus);
1136
1160
  }
1137
1161
  }
1138
1162
 
@@ -1146,12 +1170,16 @@
1146
1170
  }
1147
1171
 
1148
1172
  .navds-button--tertiary:focus-visible:active {
1149
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1173
+ box-shadow:
1174
+ inset 0 0 0 1px var(--a-surface-default),
1175
+ var(--a-shadow-focus);
1150
1176
  }
1151
1177
 
1152
1178
  @supports not selector(:focus-visible) {
1153
1179
  .navds-button--tertiary:focus:active {
1154
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1180
+ box-shadow:
1181
+ inset 0 0 0 1px var(--a-surface-default),
1182
+ var(--a-shadow-focus);
1155
1183
  }
1156
1184
  }
1157
1185
 
@@ -1178,12 +1206,16 @@
1178
1206
  }
1179
1207
 
1180
1208
  .navds-button--tertiary-neutral:focus-visible {
1181
- box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1209
+ box-shadow:
1210
+ inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
1211
+ var(--a-shadow-focus);
1182
1212
  }
1183
1213
 
1184
1214
  @supports not selector(:focus-visible) {
1185
1215
  .navds-button--tertiary-neutral:focus {
1186
- box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
1216
+ box-shadow:
1217
+ inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)),
1218
+ var(--a-shadow-focus);
1187
1219
  }
1188
1220
  }
1189
1221
 
@@ -1197,12 +1229,16 @@
1197
1229
  }
1198
1230
 
1199
1231
  .navds-button--tertiary-neutral:focus-visible:active {
1200
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1232
+ box-shadow:
1233
+ inset 0 0 0 1px var(--a-surface-default),
1234
+ var(--a-shadow-focus);
1201
1235
  }
1202
1236
 
1203
1237
  @supports not selector(:focus-visible) {
1204
1238
  .navds-button--tertiary-neutral:focus:active {
1205
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1239
+ box-shadow:
1240
+ inset 0 0 0 1px var(--a-surface-default),
1241
+ var(--a-shadow-focus);
1206
1242
  }
1207
1243
  }
1208
1244
 
@@ -1233,12 +1269,16 @@
1233
1269
  }
1234
1270
 
1235
1271
  .navds-button--danger:focus-visible {
1236
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1272
+ box-shadow:
1273
+ inset 0 0 0 1px var(--a-surface-default),
1274
+ var(--a-shadow-focus);
1237
1275
  }
1238
1276
 
1239
1277
  @supports not selector(:focus-visible) {
1240
1278
  .navds-button--danger:focus {
1241
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
1279
+ box-shadow:
1280
+ inset 0 0 0 1px var(--a-surface-default),
1281
+ var(--a-shadow-focus);
1242
1282
  }
1243
1283
  }
1244
1284
 
@@ -1479,7 +1519,9 @@
1479
1519
 
1480
1520
  .navds-chips__toggle[aria-pressed="true"]:focus-visible,
1481
1521
  .navds-chips__toggle:active:focus-visible {
1482
- box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1522
+ box-shadow:
1523
+ inset 0 0 0 1px var(--a-surface-default),
1524
+ 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1483
1525
  }
1484
1526
 
1485
1527
  @supports not selector(:focus-visible) {
@@ -1490,7 +1532,9 @@
1490
1532
 
1491
1533
  .navds-chips__toggle[aria-pressed="true"]:focus,
1492
1534
  .navds-chips__toggle:active:focus {
1493
- box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1535
+ box-shadow:
1536
+ inset 0 0 0 1px var(--a-surface-default),
1537
+ 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
1494
1538
  }
1495
1539
  }
1496
1540
 
@@ -1541,7 +1585,9 @@
1541
1585
  }
1542
1586
 
1543
1587
  .navds-chips__removable--action:focus-visible {
1544
- box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
1588
+ box-shadow:
1589
+ inset 0 0 0 1px var(--a-surface-default),
1590
+ 0 0 0 2px var(--a-border-focus);
1545
1591
  }
1546
1592
 
1547
1593
  .navds-chips__removable--neutral:focus-visible {
@@ -1551,7 +1597,9 @@
1551
1597
  @supports not selector(:focus-visible) {
1552
1598
  .navds-chips__removable--action:focus {
1553
1599
  outline: none;
1554
- box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
1600
+ box-shadow:
1601
+ inset 0 0 0 1px var(--a-surface-default),
1602
+ 0 0 0 2px var(--a-border-focus);
1555
1603
  }
1556
1604
 
1557
1605
  .navds-chips__removable--neutral:focus {
@@ -1913,7 +1961,9 @@
1913
1961
 
1914
1962
  .navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
1915
1963
  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
1916
- box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
1964
+ box-shadow:
1965
+ 1px 0 0 0 var(--__ac-expansioncard-border-color),
1966
+ -1px 0 0 0 var(--__ac-expansioncard-border-color),
1917
1967
  0 -1px 0 0 var(--__ac-expansioncard-border-color);
1918
1968
  }
1919
1969
 
@@ -2045,7 +2095,9 @@
2045
2095
  }
2046
2096
 
2047
2097
  :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
2048
- box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
2098
+ box-shadow:
2099
+ 1px 0 0 0 var(--__ac-expansioncard-border-color),
2100
+ -1px 0 0 0 var(--__ac-expansioncard-border-color),
2049
2101
  0 1px 0 0 var(--__ac-expansioncard-border-color);
2050
2102
  }
2051
2103
 
@@ -2400,26 +2452,34 @@
2400
2452
 
2401
2453
  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
2402
2454
  .navds-radio__input:focus-visible + .navds-radio__label::before {
2403
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
2404
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2455
+ box-shadow:
2456
+ 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
2457
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2458
+ 0 0 0 4px var(--a-border-focus);
2405
2459
  }
2406
2460
 
2407
2461
  @supports not selector(:focus-visible) {
2408
2462
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
2409
2463
  .navds-radio__input:focus + .navds-radio__label::before {
2410
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
2464
+ box-shadow:
2465
+ 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
2466
+ 0 0 0 4px var(--a-border-focus);
2411
2467
  }
2412
2468
  }
2413
2469
 
2414
2470
  .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
2415
2471
  .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
2416
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
2472
+ box-shadow:
2473
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2474
+ 0 0 0 4px var(--a-border-focus);
2417
2475
  }
2418
2476
 
2419
2477
  @supports not selector(:focus-visible) {
2420
2478
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
2421
2479
  .navds-radio__input:hover:focus + .navds-radio__label::before {
2422
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
2480
+ box-shadow:
2481
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2482
+ 0 0 0 4px var(--a-border-focus);
2423
2483
  }
2424
2484
  }
2425
2485
 
@@ -2478,33 +2538,42 @@
2478
2538
 
2479
2539
  .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
2480
2540
  .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
2481
- box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2482
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2541
+ box-shadow:
2542
+ 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2543
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2544
+ 0 0 0 4px var(--a-border-focus);
2483
2545
  }
2484
2546
 
2485
2547
  @supports not selector(:focus-visible) {
2486
2548
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
2487
2549
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
2488
- box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2489
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2550
+ box-shadow:
2551
+ 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2552
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2553
+ 0 0 0 4px var(--a-border-focus);
2490
2554
  }
2491
2555
  }
2492
2556
 
2493
2557
  .navds-radio__input:checked + .navds-radio__label::before {
2494
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2558
+ box-shadow:
2559
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2495
2560
  inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
2496
2561
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
2497
2562
  }
2498
2563
 
2499
2564
  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
2500
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2501
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2565
+ box-shadow:
2566
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2567
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2568
+ 0 0 0 4px var(--a-border-focus);
2502
2569
  }
2503
2570
 
2504
2571
  @supports not selector(:focus-visible) {
2505
2572
  .navds-radio__input:checked:focus + .navds-radio__label::before {
2506
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2507
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
2573
+ box-shadow:
2574
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2575
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2576
+ 0 0 0 4px var(--a-border-focus);
2508
2577
  }
2509
2578
  }
2510
2579
 
@@ -2542,7 +2611,9 @@
2542
2611
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2543
2612
  + .navds-checkbox__label::before,
2544
2613
  .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2545
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2614
+ box-shadow:
2615
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2616
+ 0 0 0 4px var(--a-border-focus);
2546
2617
  }
2547
2618
 
2548
2619
  @supports not selector(:focus-visible) {
@@ -2550,7 +2621,9 @@
2550
2621
  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2551
2622
  + .navds-checkbox__label::before,
2552
2623
  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2553
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2624
+ box-shadow:
2625
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2626
+ 0 0 0 4px var(--a-border-focus);
2554
2627
  }
2555
2628
  }
2556
2629
 
@@ -2567,7 +2640,9 @@
2567
2640
  + .navds-checkbox__label::before,
2568
2641
  .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2569
2642
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2570
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2643
+ box-shadow:
2644
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2645
+ 0 0 0 4px var(--a-border-focus);
2571
2646
  }
2572
2647
 
2573
2648
  @supports not selector(:focus-visible) {
@@ -2584,7 +2659,9 @@
2584
2659
  + .navds-checkbox__label::before,
2585
2660
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2586
2661
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2587
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
2662
+ box-shadow:
2663
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2664
+ 0 0 0 4px var(--a-border-focus);
2588
2665
  }
2589
2666
  }
2590
2667
 
@@ -2644,7 +2721,9 @@
2644
2721
 
2645
2722
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
2646
2723
  background-color: var(--a-icon-subtle);
2647
- box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
2724
+ box-shadow:
2725
+ 0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
2726
+ inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
2648
2727
  }
2649
2728
 
2650
2729
  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
@@ -2865,12 +2944,16 @@
2865
2944
  }
2866
2945
 
2867
2946
  .navds-switch__input:focus-visible ~ .navds-switch__track {
2868
- box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
2947
+ box-shadow:
2948
+ 0 0 0 1px var(--a-surface-default),
2949
+ var(--a-shadow-focus);
2869
2950
  }
2870
2951
 
2871
2952
  @supports not selector(:focus-visible) {
2872
2953
  .navds-switch__input:focus ~ .navds-switch__track {
2873
- box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
2954
+ box-shadow:
2955
+ 0 0 0 1px var(--a-surface-default),
2956
+ var(--a-shadow-focus);
2874
2957
  }
2875
2958
  }
2876
2959
 
@@ -3022,12 +3105,16 @@
3022
3105
  }
3023
3106
 
3024
3107
  .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
3025
- box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
3108
+ box-shadow:
3109
+ 0 0 0 1px var(--a-border-danger),
3110
+ var(--a-shadow-focus);
3026
3111
  }
3027
3112
 
3028
3113
  @supports not selector(:focus-visible) {
3029
3114
  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
3030
- box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
3115
+ box-shadow:
3116
+ 0 0 0 1px var(--a-border-danger),
3117
+ var(--a-shadow-focus);
3031
3118
  }
3032
3119
  }
3033
3120
 
@@ -3294,14 +3381,15 @@
3294
3381
  }
3295
3382
 
3296
3383
  .navds-search__button-search.navds-button--secondary {
3297
- box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3384
+ box-shadow:
3385
+ -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3298
3386
  0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3299
3387
  0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
3300
3388
  }
3301
3389
 
3302
3390
  .navds-search__button-search.navds-button--secondary:hover {
3303
- box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
3304
- inset,
3391
+ box-shadow:
3392
+ -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
3305
3393
  0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
3306
3394
  0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
3307
3395
  -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
@@ -3313,33 +3401,40 @@
3313
3401
  }
3314
3402
 
3315
3403
  .navds-search__button-search.navds-button--secondary:focus-visible {
3316
- box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3404
+ box-shadow:
3405
+ 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3317
3406
  var(--a-shadow-focus);
3318
3407
  }
3319
3408
 
3320
3409
  .navds-search__button-search.navds-button--secondary:focus-visible:hover {
3321
- box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
3410
+ box-shadow:
3411
+ 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
3322
3412
  var(--a-shadow-focus);
3323
3413
  }
3324
3414
 
3325
3415
  .navds-search__button-search.navds-button--secondary:focus-visible:active {
3326
- box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
3416
+ box-shadow:
3417
+ 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
3418
+ var(--a-shadow-focus);
3327
3419
  }
3328
3420
 
3329
3421
  @supports not selector(:focus-visible) {
3330
3422
  .navds-search__button-search.navds-button--secondary:focus {
3331
- box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3423
+ box-shadow:
3424
+ 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
3332
3425
  var(--a-shadow-focus);
3333
3426
  }
3334
3427
 
3335
3428
  .navds-search__button-search.navds-button--secondary:focus:hover {
3336
- box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
3337
- inset,
3429
+ box-shadow:
3430
+ 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
3338
3431
  var(--a-shadow-focus);
3339
3432
  }
3340
3433
 
3341
3434
  .navds-search__button-search.navds-button--secondary:focus:active {
3342
- box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
3435
+ box-shadow:
3436
+ 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
3437
+ var(--a-shadow-focus);
3343
3438
  }
3344
3439
  }
3345
3440
 
@@ -3351,7 +3446,8 @@
3351
3446
  }
3352
3447
 
3353
3448
  .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
3354
- box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
3449
+ box-shadow:
3450
+ inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
3355
3451
  var(--a-shadow-focus);
3356
3452
  }
3357
3453
 
@@ -3365,7 +3461,8 @@
3365
3461
 
3366
3462
  @supports not selector(:focus-visible) {
3367
3463
  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
3368
- box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
3464
+ box-shadow:
3465
+ inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
3369
3466
  var(--a-shadow-focus);
3370
3467
  }
3371
3468
 
@@ -3416,7 +3513,9 @@
3416
3513
 
3417
3514
  .navds-combobox--error
3418
3515
  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
3419
- box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
3516
+ box-shadow:
3517
+ 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
3518
+ var(--a-shadow-focus);
3420
3519
  }
3421
3520
 
3422
3521
  .navds-combobox__selected-options {
@@ -3466,7 +3565,9 @@
3466
3565
  }
3467
3566
 
3468
3567
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
3469
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
3568
+ box-shadow:
3569
+ 0 0 0 1px var(--a-surface-default) inset,
3570
+ var(--a-shadow-focus);
3470
3571
  box-shadow: var(--a-shadow-focus);
3471
3572
  }
3472
3573
 
@@ -3482,7 +3583,9 @@
3482
3583
  }
3483
3584
 
3484
3585
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
3485
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
3586
+ box-shadow:
3587
+ 0 0 0 1px var(--a-surface-default) inset,
3588
+ var(--a-shadow-focus);
3486
3589
  box-shadow: var(--a-shadow-focus);
3487
3590
  }
3488
3591
 
@@ -3493,7 +3596,9 @@
3493
3596
 
3494
3597
  @supports not selector(:has) {
3495
3598
  .navds-combobox--focused .navds-combobox__wrapper-inner {
3496
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
3599
+ box-shadow:
3600
+ 0 0 0 1px var(--a-surface-default) inset,
3601
+ var(--a-shadow-focus);
3497
3602
  box-shadow: var(--a-shadow-focus);
3498
3603
  }
3499
3604
 
@@ -3548,14 +3653,18 @@
3548
3653
  }
3549
3654
 
3550
3655
  .navds-combobox__button-toggle-list:focus-visible {
3551
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
3656
+ box-shadow:
3657
+ 0 0 0 1px var(--a-surface-default) inset,
3658
+ var(--a-shadow-focus);
3552
3659
  box-shadow: var(--a-shadow-focus);
3553
3660
  outline: none;
3554
3661
  }
3555
3662
 
3556
3663
  @supports not selector(:focus-visible) {
3557
3664
  .navds-combobox__button-toggle-list:focus {
3558
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
3665
+ box-shadow:
3666
+ 0 0 0 1px var(--a-surface-default) inset,
3667
+ var(--a-shadow-focus);
3559
3668
  box-shadow: var(--a-shadow-focus);
3560
3669
  outline: none;
3561
3670
  }
@@ -3674,7 +3783,9 @@
3674
3783
  }
3675
3784
 
3676
3785
  .navds-combobox__list-item__new-option--focus {
3677
- box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
3786
+ box-shadow:
3787
+ var(--a-shadow-focus) inset,
3788
+ var(--a-border-action) 0 0 0 5px inset;
3678
3789
  border-radius: calc(var(--a-border-radius-medium) - 1px);
3679
3790
  }
3680
3791
 
@@ -3712,13 +3823,17 @@
3712
3823
 
3713
3824
  .navds-help-text__button:focus-visible {
3714
3825
  outline: none;
3715
- box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
3826
+ box-shadow:
3827
+ 0 0 0 1px var(--a-border-focus),
3828
+ inset 0 0 0 1px var(--a-border-focus);
3716
3829
  }
3717
3830
 
3718
3831
  @supports not selector(:focus-visible) {
3719
3832
  .navds-help-text__button:focus {
3720
3833
  outline: none;
3721
- box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
3834
+ box-shadow:
3835
+ 0 0 0 1px var(--a-border-focus),
3836
+ inset 0 0 0 1px var(--a-border-focus);
3722
3837
  }
3723
3838
  }
3724
3839
 
@@ -4249,12 +4364,16 @@ button.navds-internalheader__title:active,
4249
4364
  }
4250
4365
 
4251
4366
  .navds-pagination__item[aria-current="true"]:focus-visible {
4252
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
4367
+ box-shadow:
4368
+ inset 0 0 0 1px var(--a-surface-default),
4369
+ var(--a-shadow-focus);
4253
4370
  }
4254
4371
 
4255
4372
  @supports not selector(:focus-visible) {
4256
4373
  .navds-pagination__item[aria-current="true"]:focus {
4257
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
4374
+ box-shadow:
4375
+ inset 0 0 0 1px var(--a-surface-default),
4376
+ var(--a-shadow-focus);
4258
4377
  }
4259
4378
  }
4260
4379
 
@@ -4431,13 +4550,17 @@ button.navds-internalheader__title:active,
4431
4550
 
4432
4551
  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
4433
4552
  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
4434
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
4553
+ box-shadow:
4554
+ inset 0 0 0 1px var(--a-surface-default),
4555
+ var(--a-shadow-focus);
4435
4556
  }
4436
4557
 
4437
4558
  @supports not selector(:focus-visible) {
4438
4559
  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
4439
4560
  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
4440
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
4561
+ box-shadow:
4562
+ inset 0 0 0 1px var(--a-surface-default),
4563
+ var(--a-shadow-focus);
4441
4564
  }
4442
4565
  }
4443
4566
 
@@ -4547,12 +4670,16 @@ button.navds-internalheader__title:active,
4547
4670
  }
4548
4671
 
4549
4672
  .navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
4550
- box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
4673
+ box-shadow:
4674
+ inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
4675
+ var(--a-shadow-focus);
4551
4676
  }
4552
4677
 
4553
4678
  @supports not selector(:focus-visible) {
4554
4679
  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
4555
- box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
4680
+ box-shadow:
4681
+ inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
4682
+ var(--a-shadow-focus);
4556
4683
  }
4557
4684
  }
4558
4685
 
@@ -4680,6 +4807,9 @@ button.navds-internalheader__title:active,
4680
4807
  }
4681
4808
 
4682
4809
  .navds-tag {
4810
+ --__ac-tag-icon-size: 1.5rem;
4811
+ --__ac-tag-icon-margin: -2px;
4812
+
4683
4813
  border: 1px solid;
4684
4814
  border-radius: var(--a-border-radius-small);
4685
4815
  display: inline-flex;
@@ -4693,11 +4823,26 @@ button.navds-internalheader__title:active,
4693
4823
  .navds-tag--small {
4694
4824
  min-height: 1.5rem;
4695
4825
  padding: 0 var(--a-spacing-1-alt);
4826
+
4827
+ --__ac-tag-icon-size: 1.25rem;
4696
4828
  }
4697
4829
 
4698
4830
  .navds-tag--xsmall {
4699
4831
  min-height: 1.25rem;
4700
4832
  padding: 0 var(--a-spacing-1);
4833
+
4834
+ --__ac-tag-icon-size: 1rem;
4835
+ --__ac-tag-icon-margin: -1px;
4836
+ }
4837
+
4838
+ .navds-tag:has(.navds-tag__icon--left) {
4839
+ gap: var(--a-spacing-05);
4840
+ }
4841
+
4842
+ .navds-tag__icon--left {
4843
+ font-size: var(--__ac-tag-icon-size);
4844
+ margin-inline-start: var(--__ac-tag-icon-margin);
4845
+ display: flex;
4701
4846
  }
4702
4847
 
4703
4848
  .navds-tag--error {
@@ -5024,8 +5169,10 @@ button.navds-internalheader__title:active,
5024
5169
  border: none;
5025
5170
  cursor: pointer;
5026
5171
  background: var(--a-surface-default);
5027
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5028
- 0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
5172
+ box-shadow:
5173
+ inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5174
+ 0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5175
+ 0 0 0 5px var(--a-surface-default);
5029
5176
  z-index: 2;
5030
5177
  border-radius: var(--a-border-radius-full);
5031
5178
  padding: var(--a-spacing-1);
@@ -5044,34 +5191,44 @@ button.navds-internalheader__title:active,
5044
5191
  }
5045
5192
 
5046
5193
  .navds-timeline__pin-button:focus-visible {
5047
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5048
- 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
5194
+ box-shadow:
5195
+ inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5196
+ 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5197
+ 0 0 0 4px var(--a-surface-default),
5049
5198
  0 0 0 6px var(--a-border-focus);
5050
5199
  outline: none;
5051
5200
  }
5052
5201
 
5053
5202
  .navds-timeline__pin-button:hover {
5054
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5055
- 0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
5203
+ box-shadow:
5204
+ inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5205
+ 0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5206
+ 0 0 0 5px var(--a-surface-default);
5056
5207
  }
5057
5208
 
5058
5209
  .navds-timeline__pin-button:hover:focus-visible {
5059
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5060
- 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
5210
+ box-shadow:
5211
+ inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5212
+ 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5213
+ 0 0 0 4px var(--a-surface-default),
5061
5214
  0 0 0 6px var(--a-border-focus);
5062
5215
  }
5063
5216
 
5064
5217
  @supports not selector(:focus-visible) {
5065
5218
  .navds-timeline__pin-button:focus {
5066
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5067
- 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
5219
+ box-shadow:
5220
+ inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5221
+ 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
5222
+ 0 0 0 4px var(--a-surface-default),
5068
5223
  0 0 0 6px var(--a-border-focus);
5069
5224
  outline: none;
5070
5225
  }
5071
5226
 
5072
5227
  .navds-timeline__pin-button:hover:focus {
5073
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5074
- 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
5228
+ box-shadow:
5229
+ inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5230
+ 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
5231
+ 0 0 0 4px var(--a-surface-default),
5075
5232
  0 0 0 6px var(--a-border-focus);
5076
5233
  }
5077
5234
  }
@@ -5130,7 +5287,8 @@ button.navds-internalheader__title:active,
5130
5287
  }
5131
5288
 
5132
5289
  .navds-timeline__period--selected:focus-visible {
5133
- box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
5290
+ box-shadow:
5291
+ inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
5134
5292
  0 0 0 2px var(--a-border-focus);
5135
5293
  z-index: 3;
5136
5294
  }
@@ -5140,7 +5298,9 @@ button.navds-internalheader__title:active,
5140
5298
  }
5141
5299
 
5142
5300
  .navds-timeline__zoom-button:focus-visible {
5143
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
5301
+ box-shadow:
5302
+ 0 0 0 1px var(--a-surface-default),
5303
+ 0 0 0 3px var(--a-border-focus);
5144
5304
  border-width: 1px;
5145
5305
  }
5146
5306
 
@@ -5157,13 +5317,16 @@ button.navds-internalheader__title:active,
5157
5317
  }
5158
5318
 
5159
5319
  .navds-timeline__period--selected:focus {
5160
- box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
5320
+ box-shadow:
5321
+ inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
5161
5322
  0 0 0 2px var(--a-border-focus);
5162
5323
  z-index: 3;
5163
5324
  }
5164
5325
 
5165
5326
  .navds-timeline__zoom-button:focus {
5166
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
5327
+ box-shadow:
5328
+ 0 0 0 1px var(--a-surface-default),
5329
+ 0 0 0 3px var(--a-border-focus);
5167
5330
  border-width: 1px;
5168
5331
  }
5169
5332
 
@@ -5344,34 +5507,44 @@ button.navds-internalheader__title:active,
5344
5507
 
5345
5508
  .navds-toggle-group__button:focus-visible {
5346
5509
  outline: none;
5347
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
5510
+ box-shadow:
5511
+ 0 0 0 1px var(--a-surface-default),
5512
+ 0 0 0 4px var(--a-border-focus);
5348
5513
  }
5349
5514
 
5350
5515
  @supports not selector(:focus-visible) {
5351
5516
  .navds-toggle-group__button:focus {
5352
5517
  outline: none;
5353
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
5518
+ box-shadow:
5519
+ 0 0 0 1px var(--a-surface-default),
5520
+ 0 0 0 4px var(--a-border-focus);
5354
5521
  }
5355
5522
  }
5356
5523
 
5357
5524
  .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
5358
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
5525
+ box-shadow:
5526
+ 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
5527
+ 0 0 0 4px var(--a-border-focus);
5359
5528
  }
5360
5529
 
5361
5530
  @supports not selector(:focus-visible) {
5362
5531
  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
5363
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
5532
+ box-shadow:
5533
+ 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
5534
+ 0 0 0 4px var(--a-border-focus);
5364
5535
  }
5365
5536
  }
5366
5537
 
5367
5538
  .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
5368
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
5539
+ box-shadow:
5540
+ 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
5369
5541
  0 0 0 4px var(--a-border-focus);
5370
5542
  }
5371
5543
 
5372
5544
  @supports not selector(:focus-visible) {
5373
5545
  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
5374
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
5546
+ box-shadow:
5547
+ 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
5375
5548
  0 0 0 4px var(--a-border-focus);
5376
5549
  }
5377
5550
  }
@@ -5963,15 +6136,15 @@ button.navds-stepper__step {
5963
6136
  padding: var(--a-spacing-1) var(--a-spacing-2);
5964
6137
  }
5965
6138
 
5966
- .navds-table .navds-checkbox .navds-checkbox__input {
6139
+ .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__input {
5967
6140
  top: -0.75rem;
5968
6141
  }
5969
6142
 
5970
- .navds-table .navds-checkbox--small .navds-checkbox__input {
6143
+ .navds-table :not(.navds-checkboxes) > .navds-checkbox--small .navds-checkbox__input {
5971
6144
  top: -0.375rem;
5972
6145
  }
5973
6146
 
5974
- .navds-table .navds-checkbox .navds-checkbox__label {
6147
+ .navds-table :not(.navds-checkboxes) > .navds-checkbox .navds-checkbox__label {
5975
6148
  padding: 0;
5976
6149
  }
5977
6150
 
@@ -6554,6 +6727,9 @@ button.navds-stepper__step {
6554
6727
  /* Page.Block */
6555
6728
 
6556
6729
  .navds-pageblock {
6730
+ /* stylelint-disable-next-line length-zero-no-unit */
6731
+ --__ac-page-padding-inline: 0px;
6732
+
6557
6733
  margin-inline: auto;
6558
6734
  width: 100%;
6559
6735
  }
@@ -6571,6 +6747,10 @@ button.navds-stepper__step {
6571
6747
  padding-block-end: var(--a-spacing-8);
6572
6748
  }
6573
6749
 
6750
+ .navds-pageblock--text {
6751
+ max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
6752
+ }
6753
+
6574
6754
  .navds-pageblock--md {
6575
6755
  max-width: 768px;
6576
6756
  }
@@ -6588,12 +6768,14 @@ button.navds-stepper__step {
6588
6768
  }
6589
6769
 
6590
6770
  .navds-pageblock--gutters {
6591
- padding-inline: var(--a-spacing-4);
6771
+ --__ac-page-padding-inline: var(--a-spacing-4);
6772
+
6773
+ padding-inline: var(--__ac-page-padding-inline);
6592
6774
  }
6593
6775
 
6594
6776
  @media (min-width: 1024px) {
6595
6777
  .navds-pageblock--gutters {
6596
- padding-inline: var(--a-spacing-12);
6778
+ --__ac-page-padding-inline: var(--a-spacing-12);
6597
6779
  }
6598
6780
  }
6599
6781