@navikt/aksel-stylelint 5.10.1 → 5.10.3

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 +551 -563
  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 Fri, 17 Nov 2023 11:54:18 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
 
@@ -3667,9 +3306,6 @@ body,
3667
3306
  display: block;
3668
3307
  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
3669
3308
  }
3670
- .navds-textarea--counter {
3671
- padding-bottom: var(--a-spacing-8);
3672
- }
3673
3309
  .navds-textarea__input::placeholder {
3674
3310
  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
3675
3311
  }
@@ -3689,18 +3325,9 @@ body,
3689
3325
  .navds-form-field--small .navds-textarea__input {
3690
3326
  padding: var(--a-spacing-1-alt);
3691
3327
  }
3692
- .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
3693
- padding-bottom: var(--a-spacing-7);
3694
- }
3695
3328
  .navds-textarea__counter {
3696
- pointer-events: none;
3329
+ margin-top: var(--a-spacing-05);
3697
3330
  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
3698
- font-style: italic;
3699
- position: absolute;
3700
- text-align: left;
3701
- left: 0.0625rem;
3702
- bottom: 0.0625rem;
3703
- padding: var(--a-spacing-1) var(--a-spacing-2);
3704
3331
  }
3705
3332
  .navds-textarea__counter--error {
3706
3333
  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
@@ -6288,120 +5915,481 @@ button.navds-stepper__step {
6288
5915
  .navds-tabs__tab-inner svg {
6289
5916
  flex-shrink: 0;
6290
5917
  }
6291
- .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
6292
- flex-direction: column;
6293
- gap: 0;
5918
+ .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
5919
+ flex-direction: column;
5920
+ gap: 0;
5921
+ }
5922
+ .navds-tabs__tab--small {
5923
+ min-height: 2rem;
5924
+ padding: var(--a-spacing-1-alt) var(--a-spacing-4);
5925
+ }
5926
+ .navds-tabs__tab-icon--top,
5927
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top {
5928
+ padding: var(--a-spacing-1) var(--a-spacing-4);
5929
+ }
5930
+ .navds-tabs__tab svg,
5931
+ .navds-tabs__tab--small.navds-tabs__tab--icon-only svg,
5932
+ .navds-tabs__tab--small.navds-tabs__tab-icon--top svg {
5933
+ font-size: 1.25rem;
5934
+ }
5935
+ .navds-tabs__tab--small svg {
5936
+ font-size: 1rem;
5937
+ }
5938
+ .navds-tabs__tab--icon-only svg,
5939
+ .navds-tabs__tab-icon--top svg {
5940
+ font-size: 1.5rem;
5941
+ }
5942
+ .navds-tabs__tabpanel:focus-visible {
5943
+ outline: none;
5944
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
5945
+ }
5946
+ @supports not selector(:focus-visible) {
5947
+ .navds-tabs__tabpanel:focus {
5948
+ outline: none;
5949
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
5950
+ }
5951
+ }
5952
+ .navds-list ul,
5953
+ .navds-list ol {
5954
+ padding: 0;
5955
+ margin-block: var(--a-spacing-4);
5956
+ }
5957
+ .navds-list--nested ul,
5958
+ .navds-list--nested ol {
5959
+ margin-block: var(--a-spacing-2);
5960
+ }
5961
+ .navds-list--small ul,
5962
+ .navds-list--small ol {
5963
+ margin-block: var(--a-spacing-3);
5964
+ }
5965
+ .navds-list li {
5966
+ margin-block-end: var(--a-spacing-4);
5967
+ }
5968
+ .navds-list--small li {
5969
+ margin-block-end: var(--a-spacing-3);
5970
+ }
5971
+ .navds-list--nested li {
5972
+ margin-block-end: var(--a-spacing-3);
5973
+ }
5974
+ .navds-list:last-child > ul > li:last-child,
5975
+ .navds-list:last-child > ol > li:last-child {
5976
+ margin-bottom: 0;
5977
+ }
5978
+ .navds-list ul .navds-list__item {
5979
+ display: grid;
5980
+ grid-template-columns: auto 1fr;
5981
+ gap: var(--a-spacing-3);
5982
+ padding-left: 0;
5983
+ }
5984
+ .navds-list ul .navds-list__item::marker {
5985
+ content: none;
5986
+ }
5987
+ .navds-list ol .navds-list__item-marker--icon {
5988
+ grid-column: 1 / 2;
5989
+ display: flex;
5990
+ }
5991
+ .navds-list .navds-list__item-marker--bullet {
5992
+ display: flex;
5993
+ align-items: center;
5994
+ height: var(--a-font-line-height-large);
5995
+ grid-column: 1 / 2;
5996
+ color: var(--ac-list-marker-ul-color, var(--ac-list-marker-color, var(--a-icon-default)));
5997
+ }
5998
+ .navds-list--small .navds-list__item-marker--bullet {
5999
+ height: var(--a-font-line-height-medium);
6000
+ }
6001
+ .navds-list__item-marker--icon {
6002
+ color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
6003
+ display: flex;
6004
+ align-items: center;
6005
+ height: var(--a-font-line-height-large);
6006
+ padding-block-end: 1px;
6007
+ }
6008
+ .navds-list--small .navds-list__item-marker--icon {
6009
+ height: var(--a-font-line-height-medium);
6010
+ }
6011
+ .navds-list__item-marker--icon svg {
6012
+ flex-shrink: 0;
6013
+ }
6014
+ .navds-list ul .navds-list__item-content {
6015
+ grid-column: 2 / 3;
6016
+ }
6017
+ .navds-list ol {
6018
+ padding-left: var(--a-spacing-2);
6019
+ list-style: decimal;
6020
+ }
6021
+ .navds-list ol li {
6022
+ padding-left: var(--a-spacing-1);
6023
+ margin-left: var(--a-spacing-2);
6024
+ }
6025
+ .navds-list ol li::marker {
6026
+ font-weight: var(--a-font-weight-bold);
6027
+ font-size: var(--a-font-size-large);
6028
+ color: var(--ac-list-marker-ol-color, var(--ac-list-marker-color, var(--a-icon-default)));
6029
+ line-height: var(--a-font-line-height-large);
6030
+ }
6031
+ .navds-list--small ol li::marker {
6032
+ font-size: var(--a-font-size-small);
6033
+ line-height: var(--a-font-line-height-medium);
6034
+ }
6035
+ .navds-box {
6036
+ --__ac-box-padding-xs: initial;
6037
+ --__ac-box-padding-sm: var(--__ac-box-padding-xs);
6038
+ --__ac-box-padding-md: var(--__ac-box-padding-sm);
6039
+ --__ac-box-padding-lg: var(--__ac-box-padding-md);
6040
+ --__ac-box-padding-xl: var(--__ac-box-padding-lg);
6041
+ --__ac-box-padding-inline-xs: initial;
6042
+ --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
6043
+ --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
6044
+ --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
6045
+ --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
6046
+ --__ac-box-padding-block-xs: initial;
6047
+ --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
6048
+ --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
6049
+ --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
6050
+ --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
6051
+ --__ac-box-padding: var(--__ac-box-padding-xs);
6052
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
6053
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
6054
+ --__ac-box-background: initial;
6055
+ --__ac-box-border-color: initial;
6056
+ --__ac-box-shadow: initial;
6057
+ --__ac-box-border-width: initial;
6058
+ --__ac-box-border-radius-xs: initial;
6059
+ --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
6060
+ --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
6061
+ --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
6062
+ --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
6063
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
6064
+
6065
+ padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
6066
+ padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
6067
+ background-color: var(--__ac-box-background);
6068
+ border-style: solid;
6069
+ border-color: var(--__ac-box-border-color);
6070
+ border-radius: var(--__ac-box-border-radius);
6071
+ box-shadow: var(--__ac-box-shadow);
6072
+ border-width: var(--__ac-box-border-width, 0);
6073
+ }
6074
+ @media (min-width: 480px) {
6075
+ .navds-box {
6076
+ --__ac-box-padding: var(--__ac-box-padding-sm);
6077
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
6078
+ --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
6079
+ --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
6080
+ }
6081
+ }
6082
+ @media (min-width: 768px) {
6083
+ .navds-box {
6084
+ --__ac-box-padding: var(--__ac-box-padding-md);
6085
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
6086
+ --__ac-box-padding-block: var(--__ac-box-padding-block-md);
6087
+ --__ac-box-border-radius: var(--__ac-box-border-radius-md);
6088
+ }
6089
+ }
6090
+ @media (min-width: 1024px) {
6091
+ .navds-box {
6092
+ --__ac-box-padding: var(--__ac-box-padding-lg);
6093
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
6094
+ --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
6095
+ --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
6096
+ }
6097
+ }
6098
+ @media (min-width: 1280px) {
6099
+ .navds-box {
6100
+ --__ac-box-padding: var(--__ac-box-padding-xl);
6101
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
6102
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
6103
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
6104
+ }
6105
+ }
6106
+ .navds-bleed {
6107
+ --__ac-bleed-margin-inline-xs: initial;
6108
+ --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
6109
+ --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
6110
+ --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
6111
+ --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
6112
+ --__ac-bleed-margin-block-xs: initial;
6113
+ --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
6114
+ --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
6115
+ --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
6116
+ --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
6117
+
6118
+ /** defaults */
6119
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
6120
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
6121
+
6122
+ margin-inline: var(--__ac-bleed-margin-inline);
6123
+ margin-block: var(--__ac-bleed-margin-block);
6124
+ }
6125
+ .navds-bleed--padding {
6126
+ --__ac-bleed-padding-inline-xs: initial;
6127
+ --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
6128
+ --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
6129
+ --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
6130
+ --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
6131
+ --__ac-bleed-padding-block-xs: initial;
6132
+ --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
6133
+ --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
6134
+ --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
6135
+ --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
6136
+
6137
+ /** defaults */
6138
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
6139
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
6140
+
6141
+ padding-inline: var(--__ac-bleed-padding-inline);
6142
+ padding-block: var(--__ac-bleed-padding-block);
6143
+ }
6144
+ @media (min-width: 480px) {
6145
+ .navds-bleed {
6146
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
6147
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
6148
+ }
6149
+
6150
+ .navds-bleed--padding {
6151
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
6152
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
6153
+ }
6154
+ }
6155
+ @media (min-width: 768px) {
6156
+ .navds-bleed {
6157
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
6158
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
6159
+ }
6160
+
6161
+ .navds-bleed--padding {
6162
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
6163
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
6164
+ }
6165
+ }
6166
+ @media (min-width: 1024px) {
6167
+ .navds-bleed {
6168
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
6169
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
6170
+ }
6171
+
6172
+ .navds-bleed--padding {
6173
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
6174
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
6175
+ }
6176
+ }
6177
+ @media (min-width: 1280px) {
6178
+ .navds-bleed {
6179
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
6180
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
6181
+ }
6182
+
6183
+ .navds-bleed--padding {
6184
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
6185
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
6186
+ }
6187
+ }
6188
+ .navds-page {
6189
+ display: flex;
6190
+ flex-direction: column;
6191
+ min-height: 100vh;
6192
+ min-height: 100lvh;
6193
+
6194
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
6195
+ background-color: var(--__ac-page-background);
6196
+ }
6197
+ /* Page.Block */
6198
+ .navds-pageblock {
6199
+ margin-inline: auto;
6200
+ width: 100%;
6201
+ }
6202
+ .navds-page__content--grow {
6203
+ flex-grow: 1;
6294
6204
  }
6295
- .navds-tabs__tab--small {
6296
- min-height: 2rem;
6297
- padding: var(--a-spacing-1-alt) var(--a-spacing-4);
6205
+ .navds-page__content--fullheight {
6206
+ min-height: 100vh;
6207
+ min-height: 100lvh;
6298
6208
  }
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);
6209
+ .navds-page__content--padding {
6210
+ padding-block-end: var(--a-spacing-8);
6302
6211
  }
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;
6212
+ .navds-pageblock--lg {
6213
+ max-width: 1024px;
6307
6214
  }
6308
- .navds-tabs__tab--small svg {
6309
- font-size: 1rem;
6215
+ .navds-pageblock--xl {
6216
+ max-width: 1280px;
6310
6217
  }
6311
- .navds-tabs__tab--icon-only svg,
6312
- .navds-tabs__tab-icon--top svg {
6313
- font-size: 1.5rem;
6218
+ .navds-pageblock--2xl {
6219
+ max-width: 1440px;
6314
6220
  }
6315
- .navds-tabs__tabpanel:focus-visible {
6316
- outline: none;
6317
- box-shadow: inset 0 0 0 2px var(--a-border-focus);
6221
+ .navds-pageblock--gutters {
6222
+ padding-inline: var(--a-spacing-4);
6318
6223
  }
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);
6224
+ @media (min-width: 1024px) {
6225
+ .navds-pageblock--gutters {
6226
+ padding-inline: var(--a-spacing-12);
6323
6227
  }
6324
6228
  }
6325
- .navds-list ul,
6326
- .navds-list ol {
6327
- padding: 0;
6328
- margin-block: var(--a-spacing-4);
6229
+ .navds-hgrid {
6230
+ --__ac-hgrid-columns-xs: initial;
6231
+ --__ac-hgrid-columns-sm: initial;
6232
+ --__ac-hgrid-columns-md: initial;
6233
+ --__ac-hgrid-columns-lg: initial;
6234
+ --__ac-hgrid-columns-xl: initial;
6235
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
6236
+ --__ac-hgrid-gap-xs: initial;
6237
+ --__ac-hgrid-gap-sm: initial;
6238
+ --__ac-hgrid-gap-md: initial;
6239
+ --__ac-hgrid-gap-lg: initial;
6240
+ --__ac-hgrid-gap-xl: initial;
6241
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
6242
+ --__ac-hgrid-align: initial;
6243
+
6244
+ display: grid;
6245
+ grid-template-columns: var(--__ac-hgrid-columns);
6246
+ gap: var(--__ac-hgrid-gap);
6247
+ align-items: var(--__ac-hgrid-align);
6329
6248
  }
6330
- .navds-list--nested ul,
6331
- .navds-list--nested ol {
6332
- margin-block: var(--a-spacing-2);
6249
+ @media (min-width: 480px) {
6250
+ .navds-hgrid {
6251
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
6252
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
6253
+ }
6333
6254
  }
6334
- .navds-list--small ul,
6335
- .navds-list--small ol {
6336
- margin-block: var(--a-spacing-3);
6255
+ @media (min-width: 768px) {
6256
+ .navds-hgrid {
6257
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
6258
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
6259
+ }
6337
6260
  }
6338
- .navds-list li {
6339
- margin-block-end: var(--a-spacing-4);
6261
+ @media (min-width: 1024px) {
6262
+ .navds-hgrid {
6263
+ --__ac-hgrid-columns: var(
6264
+ --__ac-hgrid-columns-lg,
6265
+ var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
6266
+ );
6267
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
6268
+ }
6340
6269
  }
6341
- .navds-list--small li {
6342
- margin-block-end: var(--a-spacing-3);
6270
+ @media (min-width: 1280px) {
6271
+ .navds-hgrid {
6272
+ --__ac-hgrid-columns: var(
6273
+ --__ac-hgrid-columns-xl,
6274
+ var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
6275
+ );
6276
+ --__ac-hgrid-gap: var(
6277
+ --__ac-hgrid-gap-xl,
6278
+ var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
6279
+ );
6280
+ }
6343
6281
  }
6344
- .navds-list--nested li {
6345
- margin-block-end: var(--a-spacing-3);
6282
+ .navds-stack {
6283
+ --__ac-stack-wrap: initial;
6284
+ --__ac-stack-gap-xs: initial;
6285
+ --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
6286
+ --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
6287
+ --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
6288
+ --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
6289
+ --__ac-stack-gap: var(--__ac-stack-gap-xs);
6290
+ --__ac-stack-justify-xs: initial;
6291
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
6292
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
6293
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
6294
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
6295
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
6296
+ --__ac-stack-align-xs: initial;
6297
+ --__ac-stack-align-sm: var(--__ac-stack-align-xs);
6298
+ --__ac-stack-align-md: var(--__ac-stack-align-sm);
6299
+ --__ac-stack-align-lg: var(--__ac-stack-align-md);
6300
+ --__ac-stack-align-xl: var(--__ac-stack-align-lg);
6301
+ --__ac-stack-align: var(--__ac-stack-align-xs);
6302
+ --__ac-stack-direction-xs: initial;
6303
+ --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
6304
+ --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
6305
+ --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
6306
+ --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
6307
+ --__ac-stack-direction: var(--__ac-stack-direction-xs);
6308
+
6309
+ gap: var(--__ac-stack-gap);
6310
+ display: flex;
6311
+ align-items: var(--__ac-stack-align);
6312
+ justify-content: var(--__ac-stack-justify);
6313
+ flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
6346
6314
  }
6347
- .navds-list:last-child > ul > li:last-child,
6348
- .navds-list:last-child > ol > li:last-child {
6349
- margin-bottom: 0;
6315
+ .navds-stack__spacer {
6316
+ flex: 1;
6317
+ justify-self: stretch;
6318
+ align-self: stretch;
6350
6319
  }
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;
6320
+ .navds-stack > .navds-stack__spacer {
6321
+ margin-block-start: calc(var(--__ac-stack-gap) * -1);
6322
+ margin-inline-start: calc(var(--__ac-stack-gap) * -1);
6356
6323
  }
6357
- .navds-list ul .navds-list__item::marker {
6358
- content: none;
6324
+ @media (min-width: 480px) {
6325
+ .navds-stack {
6326
+ --__ac-stack-gap: var(--__ac-stack-gap-sm);
6327
+ --__ac-stack-align: var(--__ac-stack-align-sm);
6328
+ --__ac-stack-justify: var(--__ac-stack-justify-sm);
6329
+ --__ac-stack-direction: var(--__ac-stack-direction-sm);
6330
+ }
6359
6331
  }
6360
- .navds-list ol .navds-list__item-marker--icon {
6361
- grid-column: 1 / 2;
6362
- display: flex;
6332
+ @media (min-width: 768px) {
6333
+ .navds-stack {
6334
+ --__ac-stack-gap: var(--__ac-stack-gap-md);
6335
+ --__ac-stack-align: var(--__ac-stack-align-md);
6336
+ --__ac-stack-justify: var(--__ac-stack-justify-md);
6337
+ --__ac-stack-direction: var(--__ac-stack-direction-md);
6338
+ }
6363
6339
  }
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)));
6340
+ @media (min-width: 1024px) {
6341
+ .navds-stack {
6342
+ --__ac-stack-gap: var(--__ac-stack-gap-lg);
6343
+ --__ac-stack-align: var(--__ac-stack-align-lg);
6344
+ --__ac-stack-justify: var(--__ac-stack-justify-lg);
6345
+ --__ac-stack-direction: var(--__ac-stack-direction-lg);
6346
+ }
6370
6347
  }
6371
- .navds-list--small .navds-list__item-marker--bullet {
6372
- height: var(--a-font-line-height-medium);
6348
+ @media (min-width: 1280px) {
6349
+ .navds-stack {
6350
+ --__ac-stack-gap: var(--__ac-stack-gap-xl);
6351
+ --__ac-stack-align: var(--__ac-stack-align-xl);
6352
+ --__ac-stack-justify: var(--__ac-stack-justify-xl);
6353
+ --__ac-stack-direction: var(--__ac-stack-direction-xl);
6354
+ }
6373
6355
  }
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;
6356
+ @media (min-width: 480px) {
6357
+ .navds-responsive__below--sm {
6358
+ display: none !important;
6359
+ }
6380
6360
  }
6381
- .navds-list--small .navds-list__item-marker--icon {
6382
- height: var(--a-font-line-height-medium);
6361
+ @media (max-width: 479px) {
6362
+ .navds-responsive__above--sm {
6363
+ display: none !important;
6364
+ }
6383
6365
  }
6384
- .navds-list__item-marker--icon svg {
6385
- flex-shrink: 0;
6366
+ @media (min-width: 768px) {
6367
+ .navds-responsive__below--md {
6368
+ display: none !important;
6369
+ }
6386
6370
  }
6387
- .navds-list ul .navds-list__item-content {
6388
- grid-column: 2 / 3;
6371
+ @media (max-width: 767px) {
6372
+ .navds-responsive__above--md {
6373
+ display: none !important;
6374
+ }
6389
6375
  }
6390
- .navds-list ol {
6391
- padding-left: var(--a-spacing-2);
6392
- list-style: decimal;
6376
+ @media (min-width: 1024px) {
6377
+ .navds-responsive__below--lg {
6378
+ display: none !important;
6379
+ }
6393
6380
  }
6394
- .navds-list ol li {
6395
- padding-left: var(--a-spacing-1);
6396
- margin-left: var(--a-spacing-2);
6381
+ @media (max-width: 1023px) {
6382
+ .navds-responsive__above--lg {
6383
+ display: none !important;
6384
+ }
6397
6385
  }
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);
6386
+ @media (min-width: 1280px) {
6387
+ .navds-responsive__below--xl {
6388
+ display: none !important;
6389
+ }
6403
6390
  }
6404
- .navds-list--small ol li::marker {
6405
- font-size: var(--a-font-size-small);
6406
- line-height: var(--a-font-line-height-medium);
6391
+ @media (max-width: 1279px) {
6392
+ .navds-responsive__above--xl {
6393
+ display: none !important;
6394
+ }
6407
6395
  }
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.3",
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.3",
39
+ "@navikt/ds-tokens": "^5.10.3",
40
40
  "@types/jest": "^29.0.0",
41
41
  "concurrently": "7.2.1",
42
42
  "copyfiles": "2.4.1",