@navikt/aksel-stylelint 5.10.1 → 5.10.2

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 (2) hide show
  1. package/dist/index.css +550 -550
  2. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Fri, 10 Nov 2023 09:42:30 GMT
4
+ * Generated on Thu, 16 Nov 2023 13:02:32 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-1-alt: 0.375rem;
@@ -1046,535 +1046,174 @@ body,
1046
1046
  .navds-typo--color-subtle {
1047
1047
  color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
1048
1048
  }
1049
- .navds-box {
1050
- --__ac-box-padding-xs: initial;
1051
- --__ac-box-padding-sm: var(--__ac-box-padding-xs);
1052
- --__ac-box-padding-md: var(--__ac-box-padding-sm);
1053
- --__ac-box-padding-lg: var(--__ac-box-padding-md);
1054
- --__ac-box-padding-xl: var(--__ac-box-padding-lg);
1055
- --__ac-box-padding-inline-xs: initial;
1056
- --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
1057
- --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
1058
- --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
1059
- --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
1060
- --__ac-box-padding-block-xs: initial;
1061
- --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
1062
- --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
1063
- --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
1064
- --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
1065
- --__ac-box-padding: var(--__ac-box-padding-xs);
1066
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
1067
- --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
1068
- --__ac-box-background: initial;
1069
- --__ac-box-border-color: initial;
1070
- --__ac-box-shadow: initial;
1071
- --__ac-box-border-width: initial;
1072
- --__ac-box-border-radius-xs: initial;
1073
- --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
1074
- --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
1075
- --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
1076
- --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
1077
- --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
1078
-
1079
- padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
1080
- padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
1081
- background-color: var(--__ac-box-background);
1082
- border-style: solid;
1083
- border-color: var(--__ac-box-border-color);
1084
- border-radius: var(--__ac-box-border-radius);
1085
- box-shadow: var(--__ac-box-shadow);
1086
- border-width: var(--__ac-box-border-width, 0);
1049
+ /**************************
1050
+ * .navds-grid *
1051
+ **************************/
1052
+ .navds-grid {
1053
+ display: grid;
1054
+ grid-template-columns: repeat(12, minmax(0, 1fr));
1055
+ grid-gap: var(--a-spacing-4);
1087
1056
  }
1088
- @media (min-width: 480px) {
1089
- .navds-box {
1090
- --__ac-box-padding: var(--__ac-box-padding-sm);
1091
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
1092
- --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
1093
- --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
1057
+ @media (min-width: 448px) {
1058
+ .navds-grid {
1059
+ grid-gap: var(--a-spacing-6);
1094
1060
  }
1095
1061
  }
1096
- @media (min-width: 768px) {
1097
- .navds-box {
1098
- --__ac-box-padding: var(--__ac-box-padding-md);
1099
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
1100
- --__ac-box-padding-block: var(--__ac-box-padding-block-md);
1101
- --__ac-box-border-radius: var(--__ac-box-border-radius-md);
1102
- }
1062
+ /**************************
1063
+ * .navds-grid__cell *
1064
+ **************************/
1065
+ .navds-grid__cell--xs-1 {
1066
+ grid-column: span 1;
1103
1067
  }
1104
- @media (min-width: 1024px) {
1105
- .navds-box {
1106
- --__ac-box-padding: var(--__ac-box-padding-lg);
1107
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
1108
- --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
1109
- --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
1110
- }
1068
+ .navds-grid__cell--xs-2 {
1069
+ grid-column: span 2;
1111
1070
  }
1112
- @media (min-width: 1280px) {
1113
- .navds-box {
1114
- --__ac-box-padding: var(--__ac-box-padding-xl);
1115
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
1116
- --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
1117
- --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
1118
- }
1071
+ .navds-grid__cell--xs-3 {
1072
+ grid-column: span 3;
1119
1073
  }
1120
- .navds-bleed {
1121
- --__ac-bleed-margin-inline-xs: initial;
1122
- --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
1123
- --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
1124
- --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
1125
- --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
1126
- --__ac-bleed-margin-block-xs: initial;
1127
- --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
1128
- --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
1129
- --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
1130
- --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
1074
+ .navds-grid__cell--xs-4 {
1075
+ grid-column: span 4;
1076
+ }
1077
+ .navds-grid__cell--xs-5 {
1078
+ grid-column: span 5;
1079
+ }
1080
+ .navds-grid__cell--xs-6 {
1081
+ grid-column: span 6;
1082
+ }
1083
+ .navds-grid__cell--xs-7 {
1084
+ grid-column: span 7;
1085
+ }
1086
+ .navds-grid__cell--xs-8 {
1087
+ grid-column: span 8;
1088
+ }
1089
+ .navds-grid__cell--xs-9 {
1090
+ grid-column: span 9;
1091
+ }
1092
+ .navds-grid__cell--xs-10 {
1093
+ grid-column: span 10;
1094
+ }
1095
+ .navds-grid__cell--xs-11 {
1096
+ grid-column: span 11;
1097
+ }
1098
+ .navds-grid__cell--xs-12 {
1099
+ grid-column: span 12;
1100
+ }
1101
+ @media (min-width: 448px) {
1102
+ .navds-grid__cell--sm-1 {
1103
+ grid-column: span 1;
1104
+ }
1131
1105
 
1132
- /** defaults */
1133
- --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
1134
- --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
1106
+ .navds-grid__cell--sm-2 {
1107
+ grid-column: span 2;
1108
+ }
1135
1109
 
1136
- margin-inline: var(--__ac-bleed-margin-inline);
1137
- margin-block: var(--__ac-bleed-margin-block);
1138
- }
1139
- .navds-bleed--padding {
1140
- --__ac-bleed-padding-inline-xs: initial;
1141
- --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
1142
- --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
1143
- --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
1144
- --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
1145
- --__ac-bleed-padding-block-xs: initial;
1146
- --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
1147
- --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
1148
- --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
1149
- --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
1110
+ .navds-grid__cell--sm-3 {
1111
+ grid-column: span 3;
1112
+ }
1150
1113
 
1151
- /** defaults */
1152
- --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
1153
- --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
1114
+ .navds-grid__cell--sm-4 {
1115
+ grid-column: span 4;
1116
+ }
1154
1117
 
1155
- padding-inline: var(--__ac-bleed-padding-inline);
1156
- padding-block: var(--__ac-bleed-padding-block);
1157
- }
1158
- @media (min-width: 480px) {
1159
- .navds-bleed {
1160
- --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
1161
- --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
1118
+ .navds-grid__cell--sm-5 {
1119
+ grid-column: span 5;
1162
1120
  }
1163
1121
 
1164
- .navds-bleed--padding {
1165
- --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
1166
- --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
1122
+ .navds-grid__cell--sm-6 {
1123
+ grid-column: span 6;
1167
1124
  }
1168
- }
1169
- @media (min-width: 768px) {
1170
- .navds-bleed {
1171
- --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
1172
- --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
1125
+
1126
+ .navds-grid__cell--sm-7 {
1127
+ grid-column: span 7;
1173
1128
  }
1174
1129
 
1175
- .navds-bleed--padding {
1176
- --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
1177
- --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
1130
+ .navds-grid__cell--sm-8 {
1131
+ grid-column: span 8;
1178
1132
  }
1179
- }
1180
- @media (min-width: 1024px) {
1181
- .navds-bleed {
1182
- --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
1183
- --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
1133
+
1134
+ .navds-grid__cell--sm-9 {
1135
+ grid-column: span 9;
1184
1136
  }
1185
1137
 
1186
- .navds-bleed--padding {
1187
- --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
1188
- --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
1138
+ .navds-grid__cell--sm-10 {
1139
+ grid-column: span 10;
1189
1140
  }
1190
- }
1191
- @media (min-width: 1280px) {
1192
- .navds-bleed {
1193
- --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
1194
- --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
1141
+
1142
+ .navds-grid__cell--sm-11 {
1143
+ grid-column: span 11;
1195
1144
  }
1196
1145
 
1197
- .navds-bleed--padding {
1198
- --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
1199
- --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
1146
+ .navds-grid__cell--sm-12 {
1147
+ grid-column: span 12;
1200
1148
  }
1201
1149
  }
1202
- .navds-page {
1203
- display: flex;
1204
- flex-direction: column;
1205
- min-height: 100vh;
1206
- min-height: 100lvh;
1150
+ @media (min-width: 648px) {
1151
+ .navds-grid__cell--md-1 {
1152
+ grid-column: span 1;
1153
+ }
1207
1154
 
1208
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
1209
- background-color: var(--__ac-page-background);
1210
- }
1211
- /* Page.Block */
1212
- .navds-pageblock {
1213
- margin-inline: auto;
1214
- width: 100%;
1215
- }
1216
- .navds-page__content--grow {
1217
- flex-grow: 1;
1218
- }
1219
- .navds-page__content--fullheight {
1220
- min-height: 100vh;
1221
- min-height: 100lvh;
1222
- }
1223
- .navds-page__content--padding {
1224
- padding-block-end: var(--a-spacing-8);
1225
- }
1226
- .navds-pageblock--lg {
1227
- max-width: 1024px;
1228
- }
1229
- .navds-pageblock--xl {
1230
- max-width: 1280px;
1231
- }
1232
- .navds-pageblock--2xl {
1233
- max-width: 1440px;
1234
- }
1235
- .navds-pageblock--gutters {
1236
- padding-inline: var(--a-spacing-4);
1237
- }
1238
- @media (min-width: 1024px) {
1239
- .navds-pageblock--gutters {
1240
- padding-inline: var(--a-spacing-12);
1241
- }
1242
- }
1243
- .navds-hgrid {
1244
- --__ac-hgrid-columns-xs: initial;
1245
- --__ac-hgrid-columns-sm: initial;
1246
- --__ac-hgrid-columns-md: initial;
1247
- --__ac-hgrid-columns-lg: initial;
1248
- --__ac-hgrid-columns-xl: initial;
1249
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
1250
- --__ac-hgrid-gap-xs: initial;
1251
- --__ac-hgrid-gap-sm: initial;
1252
- --__ac-hgrid-gap-md: initial;
1253
- --__ac-hgrid-gap-lg: initial;
1254
- --__ac-hgrid-gap-xl: initial;
1255
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
1256
- --__ac-hgrid-align: initial;
1257
-
1258
- display: grid;
1259
- grid-template-columns: var(--__ac-hgrid-columns);
1260
- gap: var(--__ac-hgrid-gap);
1261
- align-items: var(--__ac-hgrid-align);
1262
- }
1263
- @media (min-width: 480px) {
1264
- .navds-hgrid {
1265
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
1266
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
1267
- }
1268
- }
1269
- @media (min-width: 768px) {
1270
- .navds-hgrid {
1271
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
1272
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
1273
- }
1274
- }
1275
- @media (min-width: 1024px) {
1276
- .navds-hgrid {
1277
- --__ac-hgrid-columns: var(
1278
- --__ac-hgrid-columns-lg,
1279
- var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
1280
- );
1281
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
1282
- }
1283
- }
1284
- @media (min-width: 1280px) {
1285
- .navds-hgrid {
1286
- --__ac-hgrid-columns: var(
1287
- --__ac-hgrid-columns-xl,
1288
- var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
1289
- );
1290
- --__ac-hgrid-gap: var(
1291
- --__ac-hgrid-gap-xl,
1292
- var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
1293
- );
1294
- }
1295
- }
1296
- .navds-stack {
1297
- --__ac-stack-wrap: initial;
1298
- --__ac-stack-gap-xs: initial;
1299
- --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
1300
- --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
1301
- --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
1302
- --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
1303
- --__ac-stack-gap: var(--__ac-stack-gap-xs);
1304
- --__ac-stack-justify-xs: initial;
1305
- --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
1306
- --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
1307
- --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
1308
- --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
1309
- --__ac-stack-justify: var(--__ac-stack-justify-xs);
1310
- --__ac-stack-align-xs: initial;
1311
- --__ac-stack-align-sm: var(--__ac-stack-align-xs);
1312
- --__ac-stack-align-md: var(--__ac-stack-align-sm);
1313
- --__ac-stack-align-lg: var(--__ac-stack-align-md);
1314
- --__ac-stack-align-xl: var(--__ac-stack-align-lg);
1315
- --__ac-stack-align: var(--__ac-stack-align-xs);
1316
- --__ac-stack-direction-xs: initial;
1317
- --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
1318
- --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
1319
- --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
1320
- --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
1321
- --__ac-stack-direction: var(--__ac-stack-direction-xs);
1322
-
1323
- gap: var(--__ac-stack-gap);
1324
- display: flex;
1325
- align-items: var(--__ac-stack-align);
1326
- justify-content: var(--__ac-stack-justify);
1327
- flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
1328
- }
1329
- .navds-stack__spacer {
1330
- flex: 1;
1331
- justify-self: stretch;
1332
- align-self: stretch;
1333
- }
1334
- .navds-stack > .navds-stack__spacer {
1335
- margin-block-start: calc(var(--__ac-stack-gap) * -1);
1336
- margin-inline-start: calc(var(--__ac-stack-gap) * -1);
1337
- }
1338
- @media (min-width: 480px) {
1339
- .navds-stack {
1340
- --__ac-stack-gap: var(--__ac-stack-gap-sm);
1341
- --__ac-stack-align: var(--__ac-stack-align-sm);
1342
- --__ac-stack-justify: var(--__ac-stack-justify-sm);
1343
- --__ac-stack-direction: var(--__ac-stack-direction-sm);
1344
- }
1345
- }
1346
- @media (min-width: 768px) {
1347
- .navds-stack {
1348
- --__ac-stack-gap: var(--__ac-stack-gap-md);
1349
- --__ac-stack-align: var(--__ac-stack-align-md);
1350
- --__ac-stack-justify: var(--__ac-stack-justify-md);
1351
- --__ac-stack-direction: var(--__ac-stack-direction-md);
1352
- }
1353
- }
1354
- @media (min-width: 1024px) {
1355
- .navds-stack {
1356
- --__ac-stack-gap: var(--__ac-stack-gap-lg);
1357
- --__ac-stack-align: var(--__ac-stack-align-lg);
1358
- --__ac-stack-justify: var(--__ac-stack-justify-lg);
1359
- --__ac-stack-direction: var(--__ac-stack-direction-lg);
1360
- }
1361
- }
1362
- @media (min-width: 1280px) {
1363
- .navds-stack {
1364
- --__ac-stack-gap: var(--__ac-stack-gap-xl);
1365
- --__ac-stack-align: var(--__ac-stack-align-xl);
1366
- --__ac-stack-justify: var(--__ac-stack-justify-xl);
1367
- --__ac-stack-direction: var(--__ac-stack-direction-xl);
1368
- }
1369
- }
1370
- @media (min-width: 480px) {
1371
- .navds-responsive__below--sm {
1372
- display: none !important;
1373
- }
1374
- }
1375
- @media (max-width: 479px) {
1376
- .navds-responsive__above--sm {
1377
- display: none !important;
1378
- }
1379
- }
1380
- @media (min-width: 768px) {
1381
- .navds-responsive__below--md {
1382
- display: none !important;
1383
- }
1384
- }
1385
- @media (max-width: 767px) {
1386
- .navds-responsive__above--md {
1387
- display: none !important;
1388
- }
1389
- }
1390
- @media (min-width: 1024px) {
1391
- .navds-responsive__below--lg {
1392
- display: none !important;
1393
- }
1394
- }
1395
- @media (max-width: 1023px) {
1396
- .navds-responsive__above--lg {
1397
- display: none !important;
1398
- }
1399
- }
1400
- @media (min-width: 1280px) {
1401
- .navds-responsive__below--xl {
1402
- display: none !important;
1403
- }
1404
- }
1405
- @media (max-width: 1279px) {
1406
- .navds-responsive__above--xl {
1407
- display: none !important;
1408
- }
1409
- }
1410
- /**************************
1411
- * .navds-grid *
1412
- **************************/
1413
- .navds-grid {
1414
- display: grid;
1415
- grid-template-columns: repeat(12, minmax(0, 1fr));
1416
- grid-gap: var(--a-spacing-4);
1417
- }
1418
- @media (min-width: 448px) {
1419
- .navds-grid {
1420
- grid-gap: var(--a-spacing-6);
1421
- }
1422
- }
1423
- /**************************
1424
- * .navds-grid__cell *
1425
- **************************/
1426
- .navds-grid__cell--xs-1 {
1427
- grid-column: span 1;
1428
- }
1429
- .navds-grid__cell--xs-2 {
1430
- grid-column: span 2;
1431
- }
1432
- .navds-grid__cell--xs-3 {
1433
- grid-column: span 3;
1434
- }
1435
- .navds-grid__cell--xs-4 {
1436
- grid-column: span 4;
1437
- }
1438
- .navds-grid__cell--xs-5 {
1439
- grid-column: span 5;
1440
- }
1441
- .navds-grid__cell--xs-6 {
1442
- grid-column: span 6;
1443
- }
1444
- .navds-grid__cell--xs-7 {
1445
- grid-column: span 7;
1446
- }
1447
- .navds-grid__cell--xs-8 {
1448
- grid-column: span 8;
1449
- }
1450
- .navds-grid__cell--xs-9 {
1451
- grid-column: span 9;
1452
- }
1453
- .navds-grid__cell--xs-10 {
1454
- grid-column: span 10;
1455
- }
1456
- .navds-grid__cell--xs-11 {
1457
- grid-column: span 11;
1458
- }
1459
- .navds-grid__cell--xs-12 {
1460
- grid-column: span 12;
1461
- }
1462
- @media (min-width: 448px) {
1463
- .navds-grid__cell--sm-1 {
1464
- grid-column: span 1;
1465
- }
1466
-
1467
- .navds-grid__cell--sm-2 {
1468
- grid-column: span 2;
1155
+ .navds-grid__cell--md-2 {
1156
+ grid-column: span 2;
1469
1157
  }
1470
1158
 
1471
- .navds-grid__cell--sm-3 {
1159
+ .navds-grid__cell--md-3 {
1472
1160
  grid-column: span 3;
1473
1161
  }
1474
1162
 
1475
- .navds-grid__cell--sm-4 {
1163
+ .navds-grid__cell--md-4 {
1476
1164
  grid-column: span 4;
1477
1165
  }
1478
1166
 
1479
- .navds-grid__cell--sm-5 {
1167
+ .navds-grid__cell--md-5 {
1480
1168
  grid-column: span 5;
1481
1169
  }
1482
1170
 
1483
- .navds-grid__cell--sm-6 {
1171
+ .navds-grid__cell--md-6 {
1484
1172
  grid-column: span 6;
1485
1173
  }
1486
1174
 
1487
- .navds-grid__cell--sm-7 {
1175
+ .navds-grid__cell--md-7 {
1488
1176
  grid-column: span 7;
1489
1177
  }
1490
1178
 
1491
- .navds-grid__cell--sm-8 {
1179
+ .navds-grid__cell--md-8 {
1492
1180
  grid-column: span 8;
1493
1181
  }
1494
1182
 
1495
- .navds-grid__cell--sm-9 {
1183
+ .navds-grid__cell--md-9 {
1496
1184
  grid-column: span 9;
1497
1185
  }
1498
1186
 
1499
- .navds-grid__cell--sm-10 {
1187
+ .navds-grid__cell--md-10 {
1500
1188
  grid-column: span 10;
1501
1189
  }
1502
1190
 
1503
- .navds-grid__cell--sm-11 {
1191
+ .navds-grid__cell--md-11 {
1504
1192
  grid-column: span 11;
1505
1193
  }
1506
1194
 
1507
- .navds-grid__cell--sm-12 {
1195
+ .navds-grid__cell--md-12 {
1508
1196
  grid-column: span 12;
1509
1197
  }
1510
1198
  }
1511
- @media (min-width: 648px) {
1512
- .navds-grid__cell--md-1 {
1199
+ @media (min-width: 960px) {
1200
+ .navds-grid__cell--lg-1 {
1513
1201
  grid-column: span 1;
1514
1202
  }
1515
1203
 
1516
- .navds-grid__cell--md-2 {
1204
+ .navds-grid__cell--lg-2 {
1517
1205
  grid-column: span 2;
1518
1206
  }
1519
1207
 
1520
- .navds-grid__cell--md-3 {
1208
+ .navds-grid__cell--lg-3 {
1521
1209
  grid-column: span 3;
1522
1210
  }
1523
1211
 
1524
- .navds-grid__cell--md-4 {
1212
+ .navds-grid__cell--lg-4 {
1525
1213
  grid-column: span 4;
1526
1214
  }
1527
1215
 
1528
- .navds-grid__cell--md-5 {
1529
- grid-column: span 5;
1530
- }
1531
-
1532
- .navds-grid__cell--md-6 {
1533
- grid-column: span 6;
1534
- }
1535
-
1536
- .navds-grid__cell--md-7 {
1537
- grid-column: span 7;
1538
- }
1539
-
1540
- .navds-grid__cell--md-8 {
1541
- grid-column: span 8;
1542
- }
1543
-
1544
- .navds-grid__cell--md-9 {
1545
- grid-column: span 9;
1546
- }
1547
-
1548
- .navds-grid__cell--md-10 {
1549
- grid-column: span 10;
1550
- }
1551
-
1552
- .navds-grid__cell--md-11 {
1553
- grid-column: span 11;
1554
- }
1555
-
1556
- .navds-grid__cell--md-12 {
1557
- grid-column: span 12;
1558
- }
1559
- }
1560
- @media (min-width: 960px) {
1561
- .navds-grid__cell--lg-1 {
1562
- grid-column: span 1;
1563
- }
1564
-
1565
- .navds-grid__cell--lg-2 {
1566
- grid-column: span 2;
1567
- }
1568
-
1569
- .navds-grid__cell--lg-3 {
1570
- grid-column: span 3;
1571
- }
1572
-
1573
- .navds-grid__cell--lg-4 {
1574
- grid-column: span 4;
1575
- }
1576
-
1577
- .navds-grid__cell--lg-5 {
1216
+ .navds-grid__cell--lg-5 {
1578
1217
  grid-column: span 5;
1579
1218
  }
1580
1219
 
@@ -6288,120 +5927,481 @@ button.navds-stepper__step {
6288
5927
  .navds-tabs__tab-inner svg {
6289
5928
  flex-shrink: 0;
6290
5929
  }
6291
- .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
6292
- flex-direction: column;
6293
- gap: 0;
5930
+ .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
5931
+ flex-direction: column;
5932
+ gap: 0;
5933
+ }
5934
+ .navds-tabs__tab--small {
5935
+ min-height: 2rem;
5936
+ padding: var(--a-spacing-1-alt) var(--a-spacing-4);
5937
+ }
5938
+ .navds-tabs__tab-icon--top,
5939
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top {
5940
+ padding: var(--a-spacing-1) var(--a-spacing-4);
5941
+ }
5942
+ .navds-tabs__tab svg,
5943
+ .navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
5944
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
5945
+ font-size: 1.25rem;
5946
+ }
5947
+ .navds-tabs__tab--small svg {
5948
+ font-size: 1rem;
5949
+ }
5950
+ .navds-tabs__tab--icon-only svg,
5951
+ .navds-tabs__tab-icon--top svg {
5952
+ font-size: 1.5rem;
5953
+ }
5954
+ .navds-tabs__tabpanel:focus-visible {
5955
+ outline: none;
5956
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
5957
+ }
5958
+ @supports not selector(:focus-visible) {
5959
+ .navds-tabs__tabpanel:focus {
5960
+ outline: none;
5961
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
5962
+ }
5963
+ }
5964
+ .navds-list ul,
5965
+ .navds-list ol {
5966
+ padding: 0;
5967
+ margin-block: var(--a-spacing-4);
5968
+ }
5969
+ .navds-list--nested ul,
5970
+ .navds-list--nested ol {
5971
+ margin-block: var(--a-spacing-2);
5972
+ }
5973
+ .navds-list--small ul,
5974
+ .navds-list--small ol {
5975
+ margin-block: var(--a-spacing-3);
5976
+ }
5977
+ .navds-list li {
5978
+ margin-block-end: var(--a-spacing-4);
5979
+ }
5980
+ .navds-list--small li {
5981
+ margin-block-end: var(--a-spacing-3);
5982
+ }
5983
+ .navds-list--nested li {
5984
+ margin-block-end: var(--a-spacing-3);
5985
+ }
5986
+ .navds-list:last-child > ul > li:last-child,
5987
+ .navds-list:last-child > ol > li:last-child {
5988
+ margin-bottom: 0;
5989
+ }
5990
+ .navds-list ul .navds-list__item {
5991
+ display: grid;
5992
+ grid-template-columns: auto 1fr;
5993
+ gap: var(--a-spacing-3);
5994
+ padding-left: 0;
5995
+ }
5996
+ .navds-list ul .navds-list__item::marker {
5997
+ content: none;
5998
+ }
5999
+ .navds-list ol .navds-list__item-marker--icon {
6000
+ grid-column: 1 / 2;
6001
+ display: flex;
6002
+ }
6003
+ .navds-list .navds-list__item-marker--bullet {
6004
+ display: flex;
6005
+ align-items: center;
6006
+ height: var(--a-font-line-height-large);
6007
+ grid-column: 1 / 2;
6008
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
6009
+ }
6010
+ .navds-list--small .navds-list__item-marker--bullet {
6011
+ height: var(--a-font-line-height-medium);
6012
+ }
6013
+ .navds-list__item-marker--icon {
6014
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
6015
+ display: flex;
6016
+ align-items: center;
6017
+ height: var(--a-font-line-height-large);
6018
+ padding-block-end: 1px;
6019
+ }
6020
+ .navds-list--small .navds-list__item-marker--icon {
6021
+ height: var(--a-font-line-height-medium);
6022
+ }
6023
+ .navds-list__item-marker--icon svg {
6024
+ flex-shrink: 0;
6025
+ }
6026
+ .navds-list ul .navds-list__item-content {
6027
+ grid-column: 2 / 3;
6028
+ }
6029
+ .navds-list ol {
6030
+ padding-left: var(--a-spacing-2);
6031
+ list-style: decimal;
6032
+ }
6033
+ .navds-list ol li {
6034
+ padding-left: var(--a-spacing-1);
6035
+ margin-left: var(--a-spacing-2);
6036
+ }
6037
+ .navds-list ol li::marker {
6038
+ font-weight: var(--a-font-weight-bold);
6039
+ font-size: var(--a-font-size-large);
6040
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
6041
+ line-height: var(--a-font-line-height-large);
6042
+ }
6043
+ .navds-list--small ol li::marker {
6044
+ font-size: var(--a-font-size-small);
6045
+ line-height: var(--a-font-line-height-medium);
6046
+ }
6047
+ .navds-box {
6048
+ --__ac-box-padding-xs: initial;
6049
+ --__ac-box-padding-sm: var(--__ac-box-padding-xs);
6050
+ --__ac-box-padding-md: var(--__ac-box-padding-sm);
6051
+ --__ac-box-padding-lg: var(--__ac-box-padding-md);
6052
+ --__ac-box-padding-xl: var(--__ac-box-padding-lg);
6053
+ --__ac-box-padding-inline-xs: initial;
6054
+ --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
6055
+ --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
6056
+ --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
6057
+ --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
6058
+ --__ac-box-padding-block-xs: initial;
6059
+ --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
6060
+ --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
6061
+ --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
6062
+ --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
6063
+ --__ac-box-padding: var(--__ac-box-padding-xs);
6064
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
6065
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
6066
+ --__ac-box-background: initial;
6067
+ --__ac-box-border-color: initial;
6068
+ --__ac-box-shadow: initial;
6069
+ --__ac-box-border-width: initial;
6070
+ --__ac-box-border-radius-xs: initial;
6071
+ --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
6072
+ --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
6073
+ --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
6074
+ --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
6075
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
6076
+
6077
+ padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
6078
+ padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
6079
+ background-color: var(--__ac-box-background);
6080
+ border-style: solid;
6081
+ border-color: var(--__ac-box-border-color);
6082
+ border-radius: var(--__ac-box-border-radius);
6083
+ box-shadow: var(--__ac-box-shadow);
6084
+ border-width: var(--__ac-box-border-width, 0);
6085
+ }
6086
+ @media (min-width: 480px) {
6087
+ .navds-box {
6088
+ --__ac-box-padding: var(--__ac-box-padding-sm);
6089
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
6090
+ --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
6091
+ --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
6092
+ }
6093
+ }
6094
+ @media (min-width: 768px) {
6095
+ .navds-box {
6096
+ --__ac-box-padding: var(--__ac-box-padding-md);
6097
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
6098
+ --__ac-box-padding-block: var(--__ac-box-padding-block-md);
6099
+ --__ac-box-border-radius: var(--__ac-box-border-radius-md);
6100
+ }
6101
+ }
6102
+ @media (min-width: 1024px) {
6103
+ .navds-box {
6104
+ --__ac-box-padding: var(--__ac-box-padding-lg);
6105
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
6106
+ --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
6107
+ --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
6108
+ }
6109
+ }
6110
+ @media (min-width: 1280px) {
6111
+ .navds-box {
6112
+ --__ac-box-padding: var(--__ac-box-padding-xl);
6113
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
6114
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
6115
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
6116
+ }
6117
+ }
6118
+ .navds-bleed {
6119
+ --__ac-bleed-margin-inline-xs: initial;
6120
+ --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
6121
+ --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
6122
+ --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
6123
+ --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
6124
+ --__ac-bleed-margin-block-xs: initial;
6125
+ --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
6126
+ --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
6127
+ --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
6128
+ --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
6129
+
6130
+ /** defaults */
6131
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
6132
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
6133
+
6134
+ margin-inline: var(--__ac-bleed-margin-inline);
6135
+ margin-block: var(--__ac-bleed-margin-block);
6136
+ }
6137
+ .navds-bleed--padding {
6138
+ --__ac-bleed-padding-inline-xs: initial;
6139
+ --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
6140
+ --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
6141
+ --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
6142
+ --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
6143
+ --__ac-bleed-padding-block-xs: initial;
6144
+ --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
6145
+ --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
6146
+ --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
6147
+ --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
6148
+
6149
+ /** defaults */
6150
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
6151
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
6152
+
6153
+ padding-inline: var(--__ac-bleed-padding-inline);
6154
+ padding-block: var(--__ac-bleed-padding-block);
6155
+ }
6156
+ @media (min-width: 480px) {
6157
+ .navds-bleed {
6158
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
6159
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
6160
+ }
6161
+
6162
+ .navds-bleed--padding {
6163
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
6164
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
6165
+ }
6166
+ }
6167
+ @media (min-width: 768px) {
6168
+ .navds-bleed {
6169
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
6170
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
6171
+ }
6172
+
6173
+ .navds-bleed--padding {
6174
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
6175
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
6176
+ }
6177
+ }
6178
+ @media (min-width: 1024px) {
6179
+ .navds-bleed {
6180
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
6181
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
6182
+ }
6183
+
6184
+ .navds-bleed--padding {
6185
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
6186
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
6187
+ }
6188
+ }
6189
+ @media (min-width: 1280px) {
6190
+ .navds-bleed {
6191
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
6192
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
6193
+ }
6194
+
6195
+ .navds-bleed--padding {
6196
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
6197
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
6198
+ }
6199
+ }
6200
+ .navds-page {
6201
+ display: flex;
6202
+ flex-direction: column;
6203
+ min-height: 100vh;
6204
+ min-height: 100lvh;
6205
+
6206
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
6207
+ background-color: var(--__ac-page-background);
6208
+ }
6209
+ /* Page.Block */
6210
+ .navds-pageblock {
6211
+ margin-inline: auto;
6212
+ width: 100%;
6213
+ }
6214
+ .navds-page__content--grow {
6215
+ flex-grow: 1;
6294
6216
  }
6295
- .navds-tabs__tab--small {
6296
- min-height: 2rem;
6297
- padding: var(--a-spacing-1-alt) var(--a-spacing-4);
6217
+ .navds-page__content--fullheight {
6218
+ min-height: 100vh;
6219
+ min-height: 100lvh;
6298
6220
  }
6299
- .navds-tabs__tab-icon--top,
6300
- .navds-tabs__tab--small.navds-tabs__tab-icon--top {
6301
- padding: var(--a-spacing-1) var(--a-spacing-4);
6221
+ .navds-page__content--padding {
6222
+ padding-block-end: var(--a-spacing-8);
6302
6223
  }
6303
- .navds-tabs__tab svg,
6304
- .navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
6305
- .navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
6306
- font-size: 1.25rem;
6224
+ .navds-pageblock--lg {
6225
+ max-width: 1024px;
6307
6226
  }
6308
- .navds-tabs__tab--small svg {
6309
- font-size: 1rem;
6227
+ .navds-pageblock--xl {
6228
+ max-width: 1280px;
6310
6229
  }
6311
- .navds-tabs__tab--icon-only svg,
6312
- .navds-tabs__tab-icon--top svg {
6313
- font-size: 1.5rem;
6230
+ .navds-pageblock--2xl {
6231
+ max-width: 1440px;
6314
6232
  }
6315
- .navds-tabs__tabpanel:focus-visible {
6316
- outline: none;
6317
- box-shadow: inset 0 0 0 2px var(--a-border-focus);
6233
+ .navds-pageblock--gutters {
6234
+ padding-inline: var(--a-spacing-4);
6318
6235
  }
6319
- @supports not selector(:focus-visible) {
6320
- .navds-tabs__tabpanel:focus {
6321
- outline: none;
6322
- box-shadow: inset 0 0 0 2px var(--a-border-focus);
6236
+ @media (min-width: 1024px) {
6237
+ .navds-pageblock--gutters {
6238
+ padding-inline: var(--a-spacing-12);
6323
6239
  }
6324
6240
  }
6325
- .navds-list ul,
6326
- .navds-list ol {
6327
- padding: 0;
6328
- margin-block: var(--a-spacing-4);
6241
+ .navds-hgrid {
6242
+ --__ac-hgrid-columns-xs: initial;
6243
+ --__ac-hgrid-columns-sm: initial;
6244
+ --__ac-hgrid-columns-md: initial;
6245
+ --__ac-hgrid-columns-lg: initial;
6246
+ --__ac-hgrid-columns-xl: initial;
6247
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
6248
+ --__ac-hgrid-gap-xs: initial;
6249
+ --__ac-hgrid-gap-sm: initial;
6250
+ --__ac-hgrid-gap-md: initial;
6251
+ --__ac-hgrid-gap-lg: initial;
6252
+ --__ac-hgrid-gap-xl: initial;
6253
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
6254
+ --__ac-hgrid-align: initial;
6255
+
6256
+ display: grid;
6257
+ grid-template-columns: var(--__ac-hgrid-columns);
6258
+ gap: var(--__ac-hgrid-gap);
6259
+ align-items: var(--__ac-hgrid-align);
6329
6260
  }
6330
- .navds-list--nested ul,
6331
- .navds-list--nested ol {
6332
- margin-block: var(--a-spacing-2);
6261
+ @media (min-width: 480px) {
6262
+ .navds-hgrid {
6263
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
6264
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
6265
+ }
6333
6266
  }
6334
- .navds-list--small ul,
6335
- .navds-list--small ol {
6336
- margin-block: var(--a-spacing-3);
6267
+ @media (min-width: 768px) {
6268
+ .navds-hgrid {
6269
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
6270
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
6271
+ }
6337
6272
  }
6338
- .navds-list li {
6339
- margin-block-end: var(--a-spacing-4);
6273
+ @media (min-width: 1024px) {
6274
+ .navds-hgrid {
6275
+ --__ac-hgrid-columns: var(
6276
+ --__ac-hgrid-columns-lg,
6277
+ var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
6278
+ );
6279
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
6280
+ }
6340
6281
  }
6341
- .navds-list--small li {
6342
- margin-block-end: var(--a-spacing-3);
6282
+ @media (min-width: 1280px) {
6283
+ .navds-hgrid {
6284
+ --__ac-hgrid-columns: var(
6285
+ --__ac-hgrid-columns-xl,
6286
+ var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
6287
+ );
6288
+ --__ac-hgrid-gap: var(
6289
+ --__ac-hgrid-gap-xl,
6290
+ var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
6291
+ );
6292
+ }
6343
6293
  }
6344
- .navds-list--nested li {
6345
- margin-block-end: var(--a-spacing-3);
6294
+ .navds-stack {
6295
+ --__ac-stack-wrap: initial;
6296
+ --__ac-stack-gap-xs: initial;
6297
+ --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
6298
+ --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
6299
+ --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
6300
+ --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
6301
+ --__ac-stack-gap: var(--__ac-stack-gap-xs);
6302
+ --__ac-stack-justify-xs: initial;
6303
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
6304
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
6305
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
6306
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
6307
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
6308
+ --__ac-stack-align-xs: initial;
6309
+ --__ac-stack-align-sm: var(--__ac-stack-align-xs);
6310
+ --__ac-stack-align-md: var(--__ac-stack-align-sm);
6311
+ --__ac-stack-align-lg: var(--__ac-stack-align-md);
6312
+ --__ac-stack-align-xl: var(--__ac-stack-align-lg);
6313
+ --__ac-stack-align: var(--__ac-stack-align-xs);
6314
+ --__ac-stack-direction-xs: initial;
6315
+ --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
6316
+ --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
6317
+ --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
6318
+ --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
6319
+ --__ac-stack-direction: var(--__ac-stack-direction-xs);
6320
+
6321
+ gap: var(--__ac-stack-gap);
6322
+ display: flex;
6323
+ align-items: var(--__ac-stack-align);
6324
+ justify-content: var(--__ac-stack-justify);
6325
+ flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
6346
6326
  }
6347
- .navds-list:last-child > ul > li:last-child,
6348
- .navds-list:last-child > ol > li:last-child {
6349
- margin-bottom: 0;
6327
+ .navds-stack__spacer {
6328
+ flex: 1;
6329
+ justify-self: stretch;
6330
+ align-self: stretch;
6350
6331
  }
6351
- .navds-list ul .navds-list__item {
6352
- display: grid;
6353
- grid-template-columns: auto 1fr;
6354
- gap: var(--a-spacing-3);
6355
- padding-left: 0;
6332
+ .navds-stack > .navds-stack__spacer {
6333
+ margin-block-start: calc(var(--__ac-stack-gap) * -1);
6334
+ margin-inline-start: calc(var(--__ac-stack-gap) * -1);
6356
6335
  }
6357
- .navds-list ul .navds-list__item::marker {
6358
- content: none;
6336
+ @media (min-width: 480px) {
6337
+ .navds-stack {
6338
+ --__ac-stack-gap: var(--__ac-stack-gap-sm);
6339
+ --__ac-stack-align: var(--__ac-stack-align-sm);
6340
+ --__ac-stack-justify: var(--__ac-stack-justify-sm);
6341
+ --__ac-stack-direction: var(--__ac-stack-direction-sm);
6342
+ }
6359
6343
  }
6360
- .navds-list ol .navds-list__item-marker--icon {
6361
- grid-column: 1 / 2;
6362
- display: flex;
6344
+ @media (min-width: 768px) {
6345
+ .navds-stack {
6346
+ --__ac-stack-gap: var(--__ac-stack-gap-md);
6347
+ --__ac-stack-align: var(--__ac-stack-align-md);
6348
+ --__ac-stack-justify: var(--__ac-stack-justify-md);
6349
+ --__ac-stack-direction: var(--__ac-stack-direction-md);
6350
+ }
6363
6351
  }
6364
- .navds-list .navds-list__item-marker--bullet {
6365
- display: flex;
6366
- align-items: center;
6367
- height: var(--a-font-line-height-large);
6368
- grid-column: 1 / 2;
6369
- color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
6352
+ @media (min-width: 1024px) {
6353
+ .navds-stack {
6354
+ --__ac-stack-gap: var(--__ac-stack-gap-lg);
6355
+ --__ac-stack-align: var(--__ac-stack-align-lg);
6356
+ --__ac-stack-justify: var(--__ac-stack-justify-lg);
6357
+ --__ac-stack-direction: var(--__ac-stack-direction-lg);
6358
+ }
6370
6359
  }
6371
- .navds-list--small .navds-list__item-marker--bullet {
6372
- height: var(--a-font-line-height-medium);
6360
+ @media (min-width: 1280px) {
6361
+ .navds-stack {
6362
+ --__ac-stack-gap: var(--__ac-stack-gap-xl);
6363
+ --__ac-stack-align: var(--__ac-stack-align-xl);
6364
+ --__ac-stack-justify: var(--__ac-stack-justify-xl);
6365
+ --__ac-stack-direction: var(--__ac-stack-direction-xl);
6366
+ }
6373
6367
  }
6374
- .navds-list__item-marker--icon {
6375
- color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
6376
- display: flex;
6377
- align-items: center;
6378
- height: var(--a-font-line-height-large);
6379
- padding-block-end: 1px;
6368
+ @media (min-width: 480px) {
6369
+ .navds-responsive__below--sm {
6370
+ display: none !important;
6371
+ }
6380
6372
  }
6381
- .navds-list--small .navds-list__item-marker--icon {
6382
- height: var(--a-font-line-height-medium);
6373
+ @media (max-width: 479px) {
6374
+ .navds-responsive__above--sm {
6375
+ display: none !important;
6376
+ }
6383
6377
  }
6384
- .navds-list__item-marker--icon svg {
6385
- flex-shrink: 0;
6378
+ @media (min-width: 768px) {
6379
+ .navds-responsive__below--md {
6380
+ display: none !important;
6381
+ }
6386
6382
  }
6387
- .navds-list ul .navds-list__item-content {
6388
- grid-column: 2 / 3;
6383
+ @media (max-width: 767px) {
6384
+ .navds-responsive__above--md {
6385
+ display: none !important;
6386
+ }
6389
6387
  }
6390
- .navds-list ol {
6391
- padding-left: var(--a-spacing-2);
6392
- list-style: decimal;
6388
+ @media (min-width: 1024px) {
6389
+ .navds-responsive__below--lg {
6390
+ display: none !important;
6391
+ }
6393
6392
  }
6394
- .navds-list ol li {
6395
- padding-left: var(--a-spacing-1);
6396
- margin-left: var(--a-spacing-2);
6393
+ @media (max-width: 1023px) {
6394
+ .navds-responsive__above--lg {
6395
+ display: none !important;
6396
+ }
6397
6397
  }
6398
- .navds-list ol li::marker {
6399
- font-weight: var(--a-font-weight-bold);
6400
- font-size: var(--a-font-size-large);
6401
- color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
6402
- line-height: var(--a-font-line-height-large);
6398
+ @media (min-width: 1280px) {
6399
+ .navds-responsive__below--xl {
6400
+ display: none !important;
6401
+ }
6403
6402
  }
6404
- .navds-list--small ol li::marker {
6405
- font-size: var(--a-font-size-small);
6406
- line-height: var(--a-font-line-height-medium);
6403
+ @media (max-width: 1279px) {
6404
+ .navds-responsive__above--xl {
6405
+ display: none !important;
6406
+ }
6407
6407
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/aksel-stylelint",
3
- "version": "5.10.1",
3
+ "version": "5.10.2",
4
4
  "author": "Aksel | NAV",
5
5
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
6
6
  "repository": {
@@ -35,8 +35,8 @@
35
35
  "dev": "yarn watch:lint"
36
36
  },
37
37
  "devDependencies": {
38
- "@navikt/ds-css": "^5.10.1",
39
- "@navikt/ds-tokens": "^5.10.1",
38
+ "@navikt/ds-css": "^5.10.2",
39
+ "@navikt/ds-tokens": "^5.10.2",
40
40
  "@types/jest": "^29.0.0",
41
41
  "concurrently": "7.2.1",
42
42
  "copyfiles": "2.4.1",