@utrecht/component-library-css 9.0.7 → 9.0.9

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 (4) hide show
  1. package/dist/html.css +84 -2
  2. package/dist/index.css +178 -9
  3. package/dist/prince-xml.css +262 -11
  4. package/package.json +33 -14
package/dist/html.css CHANGED
@@ -1290,15 +1290,27 @@
1290
1290
  font-variant-ligatures: none;
1291
1291
  }
1292
1292
  .utrecht-html ul {
1293
+ --_utrecht-unordered-list-list-style-type: var(--utrecht-unordered-list-list-style-type, "●");
1294
+ --_utrecht-unordered-list-marker-font-size: var(--utrecht-unordered-list-marker-font-size, "1rem");
1293
1295
  box-sizing: border-box;
1294
1296
  font-family: var(--utrecht-document-font-family, inherit);
1295
1297
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
1296
1298
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
1299
+ list-style-type: var(--_utrecht-unordered-list-list-style-type, "●");
1297
1300
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
1298
1301
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
1299
- padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
1302
+ margin-inline-start: var(--utrecht-unordered-list-margin-inline-start, 1ch);
1303
+ padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 0);
1300
1304
  text-align: start;
1301
1305
  --utrecht-space-around: 1;
1306
+ --_utrecht-unordered-list-list-style-type: var(
1307
+ --utrecht-unordered-list-level-1-list-style-type,
1308
+ var(--utrecht-unordered-list-list-style-type, ●)
1309
+ );
1310
+ --_utrecht-unordered-list-marker-font-size: var(
1311
+ --utrecht-unordered-list-level-1-marker-font-size,
1312
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1313
+ );
1302
1314
  }
1303
1315
  .utrecht-html ul > li {
1304
1316
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
@@ -1307,7 +1319,77 @@
1307
1319
  }
1308
1320
  .utrecht-html ul > li::marker {
1309
1321
  color: var(--utrecht-unordered-list-marker-color);
1310
- content: "●";
1322
+ font-size: var(--_utrecht-unordered-list-marker-font-size, 1em);
1323
+ }
1324
+ .utrecht-html ul > li > ul {
1325
+ --_utrecht-unordered-list-list-style-type: var(
1326
+ --utrecht-unordered-list-level-2-list-style-type,
1327
+ var(--utrecht-unordered-list-list-style-type, ○)
1328
+ );
1329
+ --_utrecht-unordered-list-marker-font-size: var(
1330
+ --utrecht-unordered-list-level-2-marker-font-size,
1331
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1332
+ );
1333
+ }
1334
+ .utrecht-html ul > li > ul > li > ul {
1335
+ --_utrecht-unordered-list-list-style-type: var(
1336
+ --utrecht-unordered-list-level-3-list-style-type,
1337
+ var(--utrecht-unordered-list-list-style-type, ◆)
1338
+ );
1339
+ --_utrecht-unordered-list-marker-font-size: var(
1340
+ --utrecht-unordered-list-level-3-marker-font-size,
1341
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1342
+ );
1343
+ }
1344
+ .utrecht-html ul > li > ul > li > ul > li > ul {
1345
+ --_utrecht-unordered-list-list-style-type: var(
1346
+ --utrecht-unordered-list-level-4-list-style-type,
1347
+ var(--utrecht-unordered-list-list-style-type, ◇)
1348
+ );
1349
+ --_utrecht-unordered-list-marker-font-size: var(
1350
+ --utrecht-unordered-list-level-4-marker-font-size,
1351
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1352
+ );
1353
+ }
1354
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul {
1355
+ --_utrecht-unordered-list-list-style-type: var(
1356
+ --utrecht-unordered-list-level-5-list-style-type,
1357
+ var(--utrecht-unordered-list-list-style-type, ■)
1358
+ );
1359
+ --_utrecht-unordered-list-marker-font-size: var(
1360
+ --utrecht-unordered-list-level-5-marker-font-size,
1361
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1362
+ );
1363
+ }
1364
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul {
1365
+ --_utrecht-unordered-list-list-style-type: var(
1366
+ --utrecht-unordered-list-level-6-list-style-type,
1367
+ var(--utrecht-unordered-list-list-style-type, □)
1368
+ );
1369
+ --_utrecht-unordered-list-marker-font-size: var(
1370
+ --utrecht-unordered-list-level-6-marker-font-size,
1371
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1372
+ );
1373
+ }
1374
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
1375
+ --_utrecht-unordered-list-list-style-type: var(
1376
+ --utrecht-unordered-list-level-7-list-style-type,
1377
+ var(--utrecht-unordered-list-list-style-type, ▲)
1378
+ );
1379
+ --_utrecht-unordered-list-marker-font-size: var(
1380
+ --utrecht-unordered-list-level-7-marker-font-size,
1381
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1382
+ );
1383
+ }
1384
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
1385
+ --_utrecht-unordered-list-list-style-type: var(
1386
+ --utrecht-unordered-list-level-8-list-style-type,
1387
+ var(--utrecht-unordered-list-list-style-type, △)
1388
+ );
1389
+ --_utrecht-unordered-list-marker-font-size: var(
1390
+ --utrecht-unordered-list-level-8-marker-font-size,
1391
+ var(--utrecht-unordered-list-marker-font-size, 1em)
1392
+ );
1311
1393
  }
1312
1394
  :where(.utrecht-html) :where(:focus-visible) {
1313
1395
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
package/dist/index.css CHANGED
@@ -213,6 +213,8 @@
213
213
  .utrecht-alert-dialog__message {
214
214
  --utrecht-heading-color: var(--utrecht-alert-color);
215
215
  --utrecht-paragraph-color: var(--utrecht-alert-color);
216
+ display: flex;
217
+ flex-direction: column;
216
218
  row-gap: var(--utrecht-alert-message-row-gap);
217
219
  }
218
220
 
@@ -264,12 +266,16 @@
264
266
  }
265
267
 
266
268
  .utrecht-alert__content {
269
+ display: flex;
270
+ flex-direction: column;
267
271
  row-gap: var(--utrecht-alert-content-row-gap);
268
272
  }
269
273
 
270
274
  .utrecht-alert__message {
271
275
  --utrecht-heading-color: var(--utrecht-alert-color);
272
276
  --utrecht-paragraph-color: var(--utrecht-alert-color);
277
+ display: flex;
278
+ flex-direction: column;
273
279
  row-gap: var(--utrecht-alert-message-row-gap);
274
280
  }
275
281
 
@@ -4266,6 +4272,13 @@
4266
4272
  }
4267
4273
  }
4268
4274
 
4275
+ .utrecht-nav-bar--sticky {
4276
+ background-color: var(--utrecht-nav-bar-background-color, Canvas);
4277
+ color: var(--utrecht-nav-bar-color, CanvasText);
4278
+ inset-block-start: 0;
4279
+ position: sticky;
4280
+ }
4281
+
4269
4282
  .utrecht-nav-bar__heading {
4270
4283
  display: none;
4271
4284
  }
@@ -4791,12 +4804,19 @@
4791
4804
  }
4792
4805
  .utrecht-page-layout {
4793
4806
  align-items: flex-start;
4794
- block-size: 100%;
4807
+ box-sizing: border-box;
4795
4808
  display: flex;
4796
4809
  flex-direction: column;
4797
4810
  inline-size: 100%;
4798
4811
  justify-content: flex-start;
4799
4812
  }
4813
+
4814
+ .utrecht-page-layout--stretch {
4815
+ min-block-size: 100%;
4816
+ min-block-size: -moz-available;
4817
+ min-block-size: -webkit-fill-available;
4818
+ min-block-size: stretch;
4819
+ }
4800
4820
  .utrecht-page {
4801
4821
  margin-inline-end: auto;
4802
4822
  margin-inline-start: auto;
@@ -7313,7 +7333,8 @@
7313
7333
  -webkit-font-smoothing: auto !important;
7314
7334
  -moz-osx-font-smoothing: auto !important;
7315
7335
  background-color: var(--utrecht-root-background-color, Canvas);
7316
- block-size: 100%;
7336
+ border: 0;
7337
+ box-sizing: border-box;
7317
7338
  color: var(--utrecht-root-color, CanvasText);
7318
7339
  font-family: var(--utrecht-root-font-family);
7319
7340
  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
@@ -7323,14 +7344,16 @@
7323
7344
  -ms-hyphens: auto;
7324
7345
  hyphens: auto;
7325
7346
  inline-size: 100%;
7326
- overflow-block: auto;
7327
- overflow-inline: auto;
7347
+ margin: 0;
7348
+ min-block-size: 100%;
7328
7349
  overflow-wrap: break-word;
7350
+ padding: 0;
7329
7351
  position: relative;
7330
7352
  text-rendering: optimizeLegibility;
7331
7353
  -moz-text-size-adjust: none;
7332
7354
  -webkit-text-size-adjust: none;
7333
7355
  text-size-adjust: none;
7356
+ view-transition-name: root;
7334
7357
  }
7335
7358
  @media (prefers-reduced-motion: no-preference) {
7336
7359
  .utrecht-root {
@@ -7347,14 +7370,49 @@
7347
7370
  outline-width: var(--utrecht-focus-outline-width, revert);
7348
7371
  z-index: 1;
7349
7372
  }
7350
- :where(.utrecht-root) :where(:not(:root):fullscreen)::backdrop {
7373
+ :where(.utrecht-root) :where(:fullscreen)::backdrop {
7351
7374
  background-color: var(--utrecht-root-background-color, Canvas);
7352
7375
  }
7376
+ :where(.utrecht-root):lang(ar), :where(.utrecht-root) :lang(ar) {
7377
+ letter-spacing: 0;
7378
+ }
7379
+ :where(.utrecht-root):lang(nl), :where(.utrecht-root) :lang(nl) {
7380
+ hyphenate-limit-chars: 12 8 4;
7381
+ }
7382
+
7383
+ .utrecht-root:where(:root) {
7384
+ display: flex;
7385
+ flex-direction: column;
7386
+ container-name: root;
7387
+ container-type: size scroll-state;
7388
+ }
7389
+
7390
+ .utrecht-root:where(body) {
7391
+ margin: 0;
7392
+ }
7393
+ @media screen {
7394
+ .utrecht-root:where(body) {
7395
+ min-block-size: 100vh;
7396
+ min-block-size: 100vb;
7397
+ }
7398
+ }
7353
7399
  .utrecht-root:where(:root) > *,
7354
7400
  .utrecht-root:where(:not(:root)) {
7355
7401
  font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
7356
7402
  line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
7357
7403
  }
7404
+
7405
+ .utrecht-root:where(:root) > :where(body) {
7406
+ margin: 0;
7407
+ flex-grow: 1;
7408
+ }
7409
+
7410
+ .utrecht-root--scroll {
7411
+ container-name: root;
7412
+ container-type: size scroll-state;
7413
+ overflow-block: auto;
7414
+ overflow-inline: auto;
7415
+ }
7358
7416
  .utrecht-search-bar {
7359
7417
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
7360
7418
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -7610,12 +7668,15 @@
7610
7668
  border-style: solid;
7611
7669
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
7612
7670
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
7671
+ display: flex;
7672
+ flex-direction: column;
7613
7673
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-end, 0));
7614
7674
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-start, 0));
7615
7675
  padding-block-end: var(--utrecht-spotlight-section-padding-block-end);
7616
7676
  padding-block-start: var(--utrecht-spotlight-section-padding-block-start);
7617
7677
  padding-inline-end: var(--utrecht-spotlight-section-padding-inline-end);
7618
7678
  padding-inline-start: var(--utrecht-spotlight-section-padding-inline-start);
7679
+ row-gap: var(--utrecht-spotlight-section-row-gap);
7619
7680
  }
7620
7681
 
7621
7682
  .utrecht-spotlight-section--info {
@@ -8566,13 +8627,17 @@
8566
8627
  }
8567
8628
  .utrecht-unordered-list,
8568
8629
  .utrecht-unordered-list--html-content ul {
8630
+ --_utrecht-unordered-list-list-style-type: var(--utrecht-unordered-list-list-style-type, "●");
8631
+ --_utrecht-unordered-list-marker-font-size: var(--utrecht-unordered-list-marker-font-size, "1rem");
8569
8632
  box-sizing: border-box;
8570
8633
  font-family: var(--utrecht-document-font-family, inherit);
8571
8634
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
8572
8635
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
8636
+ list-style-type: var(--_utrecht-unordered-list-list-style-type, "●");
8573
8637
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
8574
8638
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
8575
- padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
8639
+ margin-inline-start: var(--utrecht-unordered-list-margin-inline-start, 1ch);
8640
+ padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 0);
8576
8641
  text-align: start;
8577
8642
  }
8578
8643
 
@@ -8581,6 +8646,7 @@
8581
8646
  margin-inline-end: auto;
8582
8647
  margin-inline-start: auto;
8583
8648
  max-inline-size: 100%;
8649
+ padding-inline-start: var(--utrecht-unordered-list-center-padding-inline-start, 1ch);
8584
8650
  }
8585
8651
 
8586
8652
  .utrecht-unordered-list--distanced {
@@ -8589,8 +8655,7 @@
8589
8655
 
8590
8656
  .utrecht-unordered-list--nested,
8591
8657
  .utrecht-unordered-list--html-content ul {
8592
- margin-block-end: 0;
8593
- margin-inline-start: 2ch;
8658
+ padding-inline-start: var(--utrecht-unordered-list-nested-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 1ch));
8594
8659
  }
8595
8660
 
8596
8661
  .utrecht-unordered-list--html-content > li,
@@ -8606,7 +8671,111 @@
8606
8671
  .utrecht-unordered-list__item::marker,
8607
8672
  .utrecht-unordered-list__marker {
8608
8673
  color: var(--utrecht-unordered-list-marker-color);
8609
- content: "●";
8674
+ font-size: var(--_utrecht-unordered-list-marker-font-size, 1em);
8675
+ }
8676
+
8677
+ .utrecht-unordered-list--html-content,
8678
+ .utrecht-unordered-list--html-content ol ul,
8679
+ .utrecht-unordered-list--level-1 {
8680
+ --_utrecht-unordered-list-list-style-type: var(
8681
+ --utrecht-unordered-list-level-1-list-style-type,
8682
+ var(--utrecht-unordered-list-list-style-type, ●)
8683
+ );
8684
+ --_utrecht-unordered-list-marker-font-size: var(
8685
+ --utrecht-unordered-list-level-1-marker-font-size,
8686
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8687
+ );
8688
+ }
8689
+
8690
+ .utrecht-unordered-list--html-content > li > ul,
8691
+ .utrecht-unordered-list--html-content ol ul > li > ul,
8692
+ .utrecht-unordered-list--level-2 {
8693
+ --_utrecht-unordered-list-list-style-type: var(
8694
+ --utrecht-unordered-list-level-2-list-style-type,
8695
+ var(--utrecht-unordered-list-list-style-type, ○)
8696
+ );
8697
+ --_utrecht-unordered-list-marker-font-size: var(
8698
+ --utrecht-unordered-list-level-2-marker-font-size,
8699
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8700
+ );
8701
+ }
8702
+
8703
+ .utrecht-unordered-list--html-content > li > ul > li > ul,
8704
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul,
8705
+ .utrecht-unordered-list--level-3 {
8706
+ --_utrecht-unordered-list-list-style-type: var(
8707
+ --utrecht-unordered-list-level-3-list-style-type,
8708
+ var(--utrecht-unordered-list-list-style-type, ◆)
8709
+ );
8710
+ --_utrecht-unordered-list-marker-font-size: var(
8711
+ --utrecht-unordered-list-level-3-marker-font-size,
8712
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8713
+ );
8714
+ }
8715
+
8716
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul,
8717
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul,
8718
+ .utrecht-unordered-list--level-4 {
8719
+ --_utrecht-unordered-list-list-style-type: var(
8720
+ --utrecht-unordered-list-level-4-list-style-type,
8721
+ var(--utrecht-unordered-list-list-style-type, ◇)
8722
+ );
8723
+ --_utrecht-unordered-list-marker-font-size: var(
8724
+ --utrecht-unordered-list-level-4-marker-font-size,
8725
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8726
+ );
8727
+ }
8728
+
8729
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul,
8730
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul,
8731
+ .utrecht-unordered-list--level-5 {
8732
+ --_utrecht-unordered-list-list-style-type: var(
8733
+ --utrecht-unordered-list-level-5-list-style-type,
8734
+ var(--utrecht-unordered-list-list-style-type, ■)
8735
+ );
8736
+ --_utrecht-unordered-list-marker-font-size: var(
8737
+ --utrecht-unordered-list-level-5-marker-font-size,
8738
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8739
+ );
8740
+ }
8741
+
8742
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul > li > ul,
8743
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8744
+ .utrecht-unordered-list--level-6 {
8745
+ --_utrecht-unordered-list-list-style-type: var(
8746
+ --utrecht-unordered-list-level-6-list-style-type,
8747
+ var(--utrecht-unordered-list-list-style-type, □)
8748
+ );
8749
+ --_utrecht-unordered-list-marker-font-size: var(
8750
+ --utrecht-unordered-list-level-6-marker-font-size,
8751
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8752
+ );
8753
+ }
8754
+
8755
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8756
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8757
+ .utrecht-unordered-list--level-7 {
8758
+ --_utrecht-unordered-list-list-style-type: var(
8759
+ --utrecht-unordered-list-level-7-list-style-type,
8760
+ var(--utrecht-unordered-list-list-style-type, ▲)
8761
+ );
8762
+ --_utrecht-unordered-list-marker-font-size: var(
8763
+ --utrecht-unordered-list-level-7-marker-font-size,
8764
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8765
+ );
8766
+ }
8767
+
8768
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8769
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8770
+ .utrecht-unordered-list--level-8 {
8771
+ --_utrecht-unordered-list-list-style-type: var(
8772
+ --utrecht-unordered-list-level-8-list-style-type,
8773
+ var(--utrecht-unordered-list-list-style-type, △)
8774
+ );
8775
+ --_utrecht-unordered-list-marker-font-size: var(
8776
+ --utrecht-unordered-list-level-8-marker-font-size,
8777
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8778
+ );
8610
8779
  }
8611
8780
  .utrecht-url-data {
8612
8781
  break-inside: avoid;
package/dist/prince-xml.css CHANGED
@@ -202,6 +202,8 @@
202
202
  .utrecht-alert-dialog__message {
203
203
  --utrecht-heading-color: var(--utrecht-alert-color);
204
204
  --utrecht-paragraph-color: var(--utrecht-alert-color);
205
+ display: flex;
206
+ flex-direction: column;
205
207
  row-gap: var(--utrecht-alert-message-row-gap);
206
208
  }
207
209
 
@@ -253,12 +255,16 @@
253
255
  }
254
256
 
255
257
  .utrecht-alert__content {
258
+ display: flex;
259
+ flex-direction: column;
256
260
  row-gap: var(--utrecht-alert-content-row-gap);
257
261
  }
258
262
 
259
263
  .utrecht-alert__message {
260
264
  --utrecht-heading-color: var(--utrecht-alert-color);
261
265
  --utrecht-paragraph-color: var(--utrecht-alert-color);
266
+ display: flex;
267
+ flex-direction: column;
262
268
  row-gap: var(--utrecht-alert-message-row-gap);
263
269
  }
264
270
 
@@ -4128,6 +4134,13 @@
4128
4134
  width: 100%;
4129
4135
  }
4130
4136
 
4137
+ .utrecht-nav-bar--sticky {
4138
+ background-color: var(--utrecht-nav-bar-background-color, Canvas);
4139
+ color: var(--utrecht-nav-bar-color, CanvasText);
4140
+ top: 0;
4141
+ position: sticky;
4142
+ }
4143
+
4131
4144
  .utrecht-nav-bar__heading {
4132
4145
  display: none;
4133
4146
  }
@@ -4649,12 +4662,19 @@
4649
4662
  }
4650
4663
  .utrecht-page-layout {
4651
4664
  align-items: flex-start;
4652
- height: 100%;
4665
+ box-sizing: border-box;
4653
4666
  display: flex;
4654
4667
  flex-direction: column;
4655
4668
  width: 100%;
4656
4669
  justify-content: flex-start;
4657
4670
  }
4671
+
4672
+ .utrecht-page-layout--stretch {
4673
+ min-height: 100%;
4674
+ min-height: -moz-available;
4675
+ min-height: -webkit-fill-available;
4676
+ min-height: stretch;
4677
+ }
4658
4678
  .utrecht-page {
4659
4679
  margin-right: auto;
4660
4680
  margin-left: auto;
@@ -7169,7 +7189,8 @@
7169
7189
  -webkit-font-smoothing: auto !important;
7170
7190
  -moz-osx-font-smoothing: auto !important;
7171
7191
  background-color: var(--utrecht-root-background-color, Canvas);
7172
- height: 100%;
7192
+ border: 0;
7193
+ box-sizing: border-box;
7173
7194
  color: var(--utrecht-root-color, CanvasText);
7174
7195
  font-family: var(--utrecht-root-font-family);
7175
7196
  font-size-adjust: var(--utrecht-root-font-size-adjust, 0.5);
@@ -7179,14 +7200,16 @@
7179
7200
  -ms-hyphens: auto;
7180
7201
  hyphens: auto;
7181
7202
  width: 100%;
7182
- overflow-block: auto;
7183
- overflow-inline: auto;
7203
+ margin: 0;
7204
+ min-height: 100%;
7184
7205
  overflow-wrap: break-word;
7206
+ padding: 0;
7185
7207
  position: relative;
7186
7208
  text-rendering: optimizeLegibility;
7187
7209
  -moz-text-size-adjust: none;
7188
7210
  -webkit-text-size-adjust: none;
7189
7211
  text-size-adjust: none;
7212
+ view-transition-name: root;
7190
7213
  }
7191
7214
  :where(.utrecht-root) :where([prince-xml-ignore-pseudo-class-focus-visible]) {
7192
7215
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
@@ -7198,14 +7221,49 @@
7198
7221
  outline-width: var(--utrecht-focus-outline-width, revert);
7199
7222
  z-index: 1;
7200
7223
  }
7201
- :where(.utrecht-root) :where(:not(:root):fullscreen)[prince-xml-ignore-pseudo-element-backdrop] {
7224
+ :where(.utrecht-root) :where(:fullscreen)[prince-xml-ignore-pseudo-element-backdrop] {
7202
7225
  background-color: var(--utrecht-root-background-color, Canvas);
7203
7226
  }
7227
+ :where(.utrecht-root):lang(ar), :where(.utrecht-root) :lang(ar) {
7228
+ letter-spacing: 0;
7229
+ }
7230
+ :where(.utrecht-root):lang(nl), :where(.utrecht-root) :lang(nl) {
7231
+ hyphenate-limit-chars: 12 8 4;
7232
+ }
7233
+
7234
+ .utrecht-root:where(:root) {
7235
+ display: flex;
7236
+ flex-direction: column;
7237
+ container-name: root;
7238
+ container-type: size scroll-state;
7239
+ }
7240
+
7241
+ .utrecht-root:where(body) {
7242
+ margin: 0;
7243
+ }
7244
+ @media screen {
7245
+ .utrecht-root:where(body) {
7246
+ min-height: 100vh;
7247
+ min-height: 100vb;
7248
+ }
7249
+ }
7204
7250
  .utrecht-root:where(:root) > *,
7205
7251
  .utrecht-root:where(:not(:root)) {
7206
7252
  font-size: var(--utrecht-root-font-size, var(--utrecht-body-font-size));
7207
7253
  line-height: var(--utrecht-root-line-height, var(--utrecht-body-line-height));
7208
7254
  }
7255
+
7256
+ .utrecht-root:where(:root) > :where(body) {
7257
+ margin: 0;
7258
+ flex-grow: 1;
7259
+ }
7260
+
7261
+ .utrecht-root--scroll {
7262
+ container-name: root;
7263
+ container-type: size scroll-state;
7264
+ overflow-block: auto;
7265
+ overflow-inline: auto;
7266
+ }
7209
7267
  .utrecht-search-bar {
7210
7268
  --utrecht-button-border-color: var(--utrecht-search-bar-button-border-color);
7211
7269
  --utrecht-button-hover-scale: var(--utrecht-search-bar-hover-scale);
@@ -7461,12 +7519,15 @@
7461
7519
  border-style: solid;
7462
7520
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
7463
7521
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
7522
+ display: flex;
7523
+ flex-direction: column;
7464
7524
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-end, 0));
7465
7525
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-start, 0));
7466
7526
  padding-bottom: var(--utrecht-spotlight-section-padding-block-end);
7467
7527
  padding-top: var(--utrecht-spotlight-section-padding-block-start);
7468
7528
  padding-right: var(--utrecht-spotlight-section-padding-inline-end);
7469
7529
  padding-left: var(--utrecht-spotlight-section-padding-inline-start);
7530
+ row-gap: var(--utrecht-spotlight-section-row-gap);
7470
7531
  }
7471
7532
 
7472
7533
  .utrecht-spotlight-section--info {
@@ -8400,13 +8461,17 @@
8400
8461
  }
8401
8462
  .utrecht-unordered-list,
8402
8463
  .utrecht-unordered-list--html-content ul {
8464
+ --_utrecht-unordered-list-list-style-type: var(--utrecht-unordered-list-list-style-type, "●");
8465
+ --_utrecht-unordered-list-marker-font-size: var(--utrecht-unordered-list-marker-font-size, "1rem");
8403
8466
  box-sizing: border-box;
8404
8467
  font-family: var(--utrecht-document-font-family, inherit);
8405
8468
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
8406
8469
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
8470
+ list-style-type: var(--_utrecht-unordered-list-list-style-type, "●");
8407
8471
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
8408
8472
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
8409
- padding-left: var(--utrecht-unordered-list-padding-inline-start, 2ch);
8473
+ margin-left: var(--utrecht-unordered-list-margin-inline-start, 1ch);
8474
+ padding-left: var(--utrecht-unordered-list-padding-inline-start, 0);
8410
8475
  text-align: left;
8411
8476
  }
8412
8477
 
@@ -8415,6 +8480,7 @@
8415
8480
  margin-right: auto;
8416
8481
  margin-left: auto;
8417
8482
  max-width: 100%;
8483
+ padding-left: var(--utrecht-unordered-list-center-padding-inline-start, 1ch);
8418
8484
  }
8419
8485
 
8420
8486
  .utrecht-unordered-list--distanced {
@@ -8423,8 +8489,7 @@
8423
8489
 
8424
8490
  .utrecht-unordered-list--nested,
8425
8491
  .utrecht-unordered-list--html-content ul {
8426
- margin-bottom: 0;
8427
- margin-left: 2ch;
8492
+ padding-left: var(--utrecht-unordered-list-nested-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 1ch));
8428
8493
  }
8429
8494
 
8430
8495
  .utrecht-unordered-list--html-content > li,
@@ -8440,7 +8505,111 @@
8440
8505
  .utrecht-unordered-list__item::marker,
8441
8506
  .utrecht-unordered-list__marker {
8442
8507
  color: var(--utrecht-unordered-list-marker-color);
8443
- content: "●";
8508
+ font-size: var(--_utrecht-unordered-list-marker-font-size, 1em);
8509
+ }
8510
+
8511
+ .utrecht-unordered-list--html-content,
8512
+ .utrecht-unordered-list--html-content ol ul,
8513
+ .utrecht-unordered-list--level-1 {
8514
+ --_utrecht-unordered-list-list-style-type: var(
8515
+ --utrecht-unordered-list-level-1-list-style-type,
8516
+ var(--utrecht-unordered-list-list-style-type, ●)
8517
+ );
8518
+ --_utrecht-unordered-list-marker-font-size: var(
8519
+ --utrecht-unordered-list-level-1-marker-font-size,
8520
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8521
+ );
8522
+ }
8523
+
8524
+ .utrecht-unordered-list--html-content > li > ul,
8525
+ .utrecht-unordered-list--html-content ol ul > li > ul,
8526
+ .utrecht-unordered-list--level-2 {
8527
+ --_utrecht-unordered-list-list-style-type: var(
8528
+ --utrecht-unordered-list-level-2-list-style-type,
8529
+ var(--utrecht-unordered-list-list-style-type, ○)
8530
+ );
8531
+ --_utrecht-unordered-list-marker-font-size: var(
8532
+ --utrecht-unordered-list-level-2-marker-font-size,
8533
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8534
+ );
8535
+ }
8536
+
8537
+ .utrecht-unordered-list--html-content > li > ul > li > ul,
8538
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul,
8539
+ .utrecht-unordered-list--level-3 {
8540
+ --_utrecht-unordered-list-list-style-type: var(
8541
+ --utrecht-unordered-list-level-3-list-style-type,
8542
+ var(--utrecht-unordered-list-list-style-type, ◆)
8543
+ );
8544
+ --_utrecht-unordered-list-marker-font-size: var(
8545
+ --utrecht-unordered-list-level-3-marker-font-size,
8546
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8547
+ );
8548
+ }
8549
+
8550
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul,
8551
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul,
8552
+ .utrecht-unordered-list--level-4 {
8553
+ --_utrecht-unordered-list-list-style-type: var(
8554
+ --utrecht-unordered-list-level-4-list-style-type,
8555
+ var(--utrecht-unordered-list-list-style-type, ◇)
8556
+ );
8557
+ --_utrecht-unordered-list-marker-font-size: var(
8558
+ --utrecht-unordered-list-level-4-marker-font-size,
8559
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8560
+ );
8561
+ }
8562
+
8563
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul,
8564
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul,
8565
+ .utrecht-unordered-list--level-5 {
8566
+ --_utrecht-unordered-list-list-style-type: var(
8567
+ --utrecht-unordered-list-level-5-list-style-type,
8568
+ var(--utrecht-unordered-list-list-style-type, ■)
8569
+ );
8570
+ --_utrecht-unordered-list-marker-font-size: var(
8571
+ --utrecht-unordered-list-level-5-marker-font-size,
8572
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8573
+ );
8574
+ }
8575
+
8576
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul > li > ul,
8577
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8578
+ .utrecht-unordered-list--level-6 {
8579
+ --_utrecht-unordered-list-list-style-type: var(
8580
+ --utrecht-unordered-list-level-6-list-style-type,
8581
+ var(--utrecht-unordered-list-list-style-type, □)
8582
+ );
8583
+ --_utrecht-unordered-list-marker-font-size: var(
8584
+ --utrecht-unordered-list-level-6-marker-font-size,
8585
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8586
+ );
8587
+ }
8588
+
8589
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8590
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8591
+ .utrecht-unordered-list--level-7 {
8592
+ --_utrecht-unordered-list-list-style-type: var(
8593
+ --utrecht-unordered-list-level-7-list-style-type,
8594
+ var(--utrecht-unordered-list-list-style-type, ▲)
8595
+ );
8596
+ --_utrecht-unordered-list-marker-font-size: var(
8597
+ --utrecht-unordered-list-level-7-marker-font-size,
8598
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8599
+ );
8600
+ }
8601
+
8602
+ .utrecht-unordered-list--html-content > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8603
+ .utrecht-unordered-list--html-content ol ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul,
8604
+ .utrecht-unordered-list--level-8 {
8605
+ --_utrecht-unordered-list-list-style-type: var(
8606
+ --utrecht-unordered-list-level-8-list-style-type,
8607
+ var(--utrecht-unordered-list-list-style-type, △)
8608
+ );
8609
+ --_utrecht-unordered-list-marker-font-size: var(
8610
+ --utrecht-unordered-list-level-8-marker-font-size,
8611
+ var(--utrecht-unordered-list-marker-font-size, 1em)
8612
+ );
8444
8613
  }
8445
8614
  .utrecht-url-data {
8446
8615
  break-inside: avoid;
@@ -9746,15 +9915,27 @@
9746
9915
  font-variant-ligatures: none;
9747
9916
  }
9748
9917
  .utrecht-html ul {
9918
+ --_utrecht-unordered-list-list-style-type: var(--utrecht-unordered-list-list-style-type, "●");
9919
+ --_utrecht-unordered-list-marker-font-size: var(--utrecht-unordered-list-marker-font-size, "1rem");
9749
9920
  box-sizing: border-box;
9750
9921
  font-family: var(--utrecht-document-font-family, inherit);
9751
9922
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
9752
9923
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
9924
+ list-style-type: var(--_utrecht-unordered-list-list-style-type, "●");
9753
9925
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
9754
9926
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
9755
- padding-left: var(--utrecht-unordered-list-padding-inline-start, 2ch);
9927
+ margin-left: var(--utrecht-unordered-list-margin-inline-start, 1ch);
9928
+ padding-left: var(--utrecht-unordered-list-padding-inline-start, 0);
9756
9929
  text-align: left;
9757
9930
  --utrecht-space-around: 1;
9931
+ --_utrecht-unordered-list-list-style-type: var(
9932
+ --utrecht-unordered-list-level-1-list-style-type,
9933
+ var(--utrecht-unordered-list-list-style-type, ●)
9934
+ );
9935
+ --_utrecht-unordered-list-marker-font-size: var(
9936
+ --utrecht-unordered-list-level-1-marker-font-size,
9937
+ var(--utrecht-unordered-list-marker-font-size, 1em)
9938
+ );
9758
9939
  }
9759
9940
  .utrecht-html ul > li {
9760
9941
  margin-bottom: var(--utrecht-unordered-list-item-margin-block-end);
@@ -9763,7 +9944,77 @@
9763
9944
  }
9764
9945
  .utrecht-html ul > li::marker {
9765
9946
  color: var(--utrecht-unordered-list-marker-color);
9766
- content: "●";
9947
+ font-size: var(--_utrecht-unordered-list-marker-font-size, 1em);
9948
+ }
9949
+ .utrecht-html ul > li > ul {
9950
+ --_utrecht-unordered-list-list-style-type: var(
9951
+ --utrecht-unordered-list-level-2-list-style-type,
9952
+ var(--utrecht-unordered-list-list-style-type, ○)
9953
+ );
9954
+ --_utrecht-unordered-list-marker-font-size: var(
9955
+ --utrecht-unordered-list-level-2-marker-font-size,
9956
+ var(--utrecht-unordered-list-marker-font-size, 1em)
9957
+ );
9958
+ }
9959
+ .utrecht-html ul > li > ul > li > ul {
9960
+ --_utrecht-unordered-list-list-style-type: var(
9961
+ --utrecht-unordered-list-level-3-list-style-type,
9962
+ var(--utrecht-unordered-list-list-style-type, ◆)
9963
+ );
9964
+ --_utrecht-unordered-list-marker-font-size: var(
9965
+ --utrecht-unordered-list-level-3-marker-font-size,
9966
+ var(--utrecht-unordered-list-marker-font-size, 1em)
9967
+ );
9968
+ }
9969
+ .utrecht-html ul > li > ul > li > ul > li > ul {
9970
+ --_utrecht-unordered-list-list-style-type: var(
9971
+ --utrecht-unordered-list-level-4-list-style-type,
9972
+ var(--utrecht-unordered-list-list-style-type, ◇)
9973
+ );
9974
+ --_utrecht-unordered-list-marker-font-size: var(
9975
+ --utrecht-unordered-list-level-4-marker-font-size,
9976
+ var(--utrecht-unordered-list-marker-font-size, 1em)
9977
+ );
9978
+ }
9979
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul {
9980
+ --_utrecht-unordered-list-list-style-type: var(
9981
+ --utrecht-unordered-list-level-5-list-style-type,
9982
+ var(--utrecht-unordered-list-list-style-type, ■)
9983
+ );
9984
+ --_utrecht-unordered-list-marker-font-size: var(
9985
+ --utrecht-unordered-list-level-5-marker-font-size,
9986
+ var(--utrecht-unordered-list-marker-font-size, 1em)
9987
+ );
9988
+ }
9989
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul {
9990
+ --_utrecht-unordered-list-list-style-type: var(
9991
+ --utrecht-unordered-list-level-6-list-style-type,
9992
+ var(--utrecht-unordered-list-list-style-type, □)
9993
+ );
9994
+ --_utrecht-unordered-list-marker-font-size: var(
9995
+ --utrecht-unordered-list-level-6-marker-font-size,
9996
+ var(--utrecht-unordered-list-marker-font-size, 1em)
9997
+ );
9998
+ }
9999
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
10000
+ --_utrecht-unordered-list-list-style-type: var(
10001
+ --utrecht-unordered-list-level-7-list-style-type,
10002
+ var(--utrecht-unordered-list-list-style-type, ▲)
10003
+ );
10004
+ --_utrecht-unordered-list-marker-font-size: var(
10005
+ --utrecht-unordered-list-level-7-marker-font-size,
10006
+ var(--utrecht-unordered-list-marker-font-size, 1em)
10007
+ );
10008
+ }
10009
+ .utrecht-html ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul {
10010
+ --_utrecht-unordered-list-list-style-type: var(
10011
+ --utrecht-unordered-list-level-8-list-style-type,
10012
+ var(--utrecht-unordered-list-list-style-type, △)
10013
+ );
10014
+ --_utrecht-unordered-list-marker-font-size: var(
10015
+ --utrecht-unordered-list-level-8-marker-font-size,
10016
+ var(--utrecht-unordered-list-marker-font-size, 1em)
10017
+ );
9767
10018
  }
9768
10019
  :where(.utrecht-html) :where([prince-xml-ignore-pseudo-class-focus-visible]) {
9769
10020
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "9.0.7",
2
+ "version": "9.0.9",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -22,7 +22,7 @@
22
22
  "dependencies": {
23
23
  "@utrecht/accordion-css": "4.0.0",
24
24
  "@utrecht/action-group-css": "4.0.0",
25
- "@utrecht/alert-css": "4.0.0",
25
+ "@utrecht/alert-css": "4.0.1",
26
26
  "@utrecht/alert-dialog-css": "3.0.0",
27
27
  "@utrecht/alternate-lang-nav-css": "3.0.0",
28
28
  "@utrecht/article-css": "3.0.0",
@@ -49,8 +49,8 @@
49
49
  "@utrecht/data-placeholder-css": "3.0.0",
50
50
  "@utrecht/digid-button-css": "2.0.0",
51
51
  "@utrecht/document-css": "3.0.0",
52
- "@utrecht/emphasis-css": "3.0.0",
53
52
  "@utrecht/drawer-css": "3.0.0",
53
+ "@utrecht/emphasis-css": "3.0.0",
54
54
  "@utrecht/figure-css": "3.0.0",
55
55
  "@utrecht/form-css": "3.0.0",
56
56
  "@utrecht/form-field-css": "3.0.0",
@@ -65,8 +65,8 @@
65
65
  "@utrecht/heading-3-css": "3.0.0",
66
66
  "@utrecht/heading-4-css": "3.0.0",
67
67
  "@utrecht/heading-5-css": "3.0.0",
68
- "@utrecht/heading-group-css": "3.0.0",
69
68
  "@utrecht/heading-6-css": "3.0.0",
69
+ "@utrecht/heading-group-css": "3.0.0",
70
70
  "@utrecht/html-content-css": "3.0.0",
71
71
  "@utrecht/iban-data-css": "3.0.0",
72
72
  "@utrecht/icon-css": "4.0.0",
@@ -84,7 +84,7 @@
84
84
  "@utrecht/map-marker-css": "3.0.0",
85
85
  "@utrecht/mark-css": "3.0.0",
86
86
  "@utrecht/multiline-data-css": "3.0.0",
87
- "@utrecht/nav-bar-css": "3.0.0",
87
+ "@utrecht/nav-bar-css": "3.1.0",
88
88
  "@utrecht/nav-list-css": "2.0.0",
89
89
  "@utrecht/navigation-css": "2.0.0",
90
90
  "@utrecht/number-badge-css": "4.0.0",
@@ -95,44 +95,63 @@
95
95
  "@utrecht/page-css": "3.0.0",
96
96
  "@utrecht/page-footer-css": "4.0.0",
97
97
  "@utrecht/page-header-css": "3.0.0",
98
- "@utrecht/page-layout-css": "3.0.0",
98
+ "@utrecht/page-layout-css": "4.0.0",
99
99
  "@utrecht/pagination-css": "3.0.0",
100
100
  "@utrecht/paragraph-css": "4.0.0",
101
101
  "@utrecht/pre-heading-css": "3.0.0",
102
102
  "@utrecht/preserve-data-css": "3.0.0",
103
103
  "@utrecht/radio-button-css": "3.0.0",
104
- "@utrecht/root-css": "4.0.0",
105
- "@utrecht/search-bar-css": "4.0.0",
106
104
  "@utrecht/rich-text-css": "3.0.0",
105
+ "@utrecht/root-css": "4.1.0",
106
+ "@utrecht/search-bar-css": "4.0.0",
107
107
  "@utrecht/select-css": "3.0.0",
108
108
  "@utrecht/separator-css": "3.0.0",
109
109
  "@utrecht/skip-link-css": "3.0.0",
110
- "@utrecht/spotlight-section-css": "3.0.0",
110
+ "@utrecht/spotlight-section-css": "3.0.1",
111
111
  "@utrecht/status-badge-css": "2.0.0",
112
112
  "@utrecht/surface-css": "3.0.0",
113
113
  "@utrecht/table-css": "3.0.0",
114
+ "@utrecht/table-of-contents-css": "2.0.0",
114
115
  "@utrecht/textarea-css": "4.0.0",
115
116
  "@utrecht/textbox-css": "4.0.0",
116
117
  "@utrecht/tooltip-css": "3.0.0",
117
118
  "@utrecht/top-task-link-css": "3.0.0",
118
- "@utrecht/table-of-contents-css": "2.0.0",
119
119
  "@utrecht/top-task-nav-css": "2.0.0",
120
+ "@utrecht/unordered-list-css": "3.1.0",
120
121
  "@utrecht/url-data-css": "3.0.0",
121
- "@utrecht/unordered-list-css": "3.0.0",
122
122
  "@utrecht/youtube-video-css": "3.0.0"
123
123
  },
124
124
  "devDependencies": {
125
+ "@nl-design-system/tsconfig": "1.0.5",
126
+ "@vitest/browser-playwright": "4.0.12",
127
+ "@vitest/coverage-v8": "4.0.12",
128
+ "@vitest/ui": "4.0.12",
129
+ "colorjs.io": "0.6.1",
130
+ "http-server": "14.1.1",
131
+ "playwright": "1.56.1",
125
132
  "postcss": "8.4.49",
126
133
  "postcss-discard-duplicates": "7.0.2",
127
134
  "postcss-logical": "7.0.1",
128
- "rimraf": "5.0.10",
135
+ "rimraf": "6.0.1",
129
136
  "rollup": "4.18.1",
130
137
  "rollup-plugin-postcss": "4.0.2",
131
- "@utrecht/build-utils-css": "0.0.4"
138
+ "sass-embedded": "1.99.0",
139
+ "tslib": "2.8.1",
140
+ "typescript": "5.9.3",
141
+ "vite": "7.1.12",
142
+ "vitest": "4.0.12",
143
+ "@utrecht/build-utils-css": "0.0.4",
144
+ "@utrecht/design-tokens": "6.1.1",
145
+ "@utrecht/focus-ring-css": "4.0.0"
132
146
  },
133
147
  "main": "dist/index.css",
134
148
  "scripts": {
135
149
  "build": "rollup --config ./rollup.config.mjs",
136
- "clean": "rimraf dist"
150
+ "clean": "rimraf dist",
151
+ "dev": "vite",
152
+ "lint": "tsc --noEmit",
153
+ "start": "cp test-dist.html dist/index.html && http-server dist/",
154
+ "test-e2e": "vitest --coverage --config vitest.e2e.config.ts",
155
+ "ui": "vitest --coverage --config vitest.e2e.config.ts --ui"
137
156
  }
138
157
  }