@utrecht/component-library-css 6.0.0 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html.css +8 -0
  2. package/dist/index.css +51 -9
  3. package/dist/prince-xml.css +64 -9
  4. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -55,7 +55,14 @@
55
55
  }
56
56
  .utrecht-html blockquote {
57
57
  background-color: var(--utrecht-blockquote-background-color);
58
+ border-color: var(--utrecht-blockquote-border-color);
59
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
60
+ border-style: solid;
61
+ border-width: var(--utrecht-blockquote-border-width, 0);
62
+ border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
58
63
  color: var(--utrecht-blockquote-color);
64
+ display: flex;
65
+ flex-direction: column;
59
66
  font-family: var(--utrecht-document-font-family);
60
67
  font-size: var(--utrecht-blockquote-font-size);
61
68
  font-style: var(--utrecht-blockquote-font-style);
@@ -67,6 +74,7 @@
67
74
  padding-block-start: var(--utrecht-blockquote-padding-block-start);
68
75
  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
69
76
  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
77
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
70
78
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
71
79
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
72
80
  color: var(--utrecht-blockquote-content-color, inherit);
package/dist/index.css CHANGED
@@ -501,7 +501,14 @@
501
501
  }
502
502
  .utrecht-blockquote {
503
503
  background-color: var(--utrecht-blockquote-background-color);
504
+ border-color: var(--utrecht-blockquote-border-color);
505
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
506
+ border-style: solid;
507
+ border-width: var(--utrecht-blockquote-border-width, 0);
508
+ border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
504
509
  color: var(--utrecht-blockquote-color);
510
+ display: flex;
511
+ flex-direction: column;
505
512
  font-family: var(--utrecht-document-font-family);
506
513
  font-size: var(--utrecht-blockquote-font-size);
507
514
  font-style: var(--utrecht-blockquote-font-style);
@@ -513,14 +520,25 @@
513
520
  padding-block-start: var(--utrecht-blockquote-padding-block-start);
514
521
  padding-inline-end: var(--utrecht-blockquote-padding-inline-end);
515
522
  padding-inline-start: var(--utrecht-blockquote-padding-inline-start);
523
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
516
524
  }
517
-
518
- .utrecht-blockquote__attribution {
519
- color: var(--utrecht-blockquote-attribution-color, inherit);
520
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
525
+ .utrecht-blockquote__attribution,
526
+ .utrecht-blockquote__caption {
527
+ color: var(--utrecht-blockquote-caption-color, inherit);
528
+ font-size: var(--utrecht-blockquote-caption-font-size, inherit);
521
529
  }
522
530
 
523
- .utrecht-blockquote__content {
531
+ .utrecht-blockquote__figure {
532
+ display: flex;
533
+ flex-direction: column;
534
+ margin-block-end: 0;
535
+ margin-block-start: 0;
536
+ margin-inline-end: 0;
537
+ margin-inline-start: 0;
538
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
539
+ }
540
+ .utrecht-blockquote__content,
541
+ .utrecht-blockquote__quote {
524
542
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
525
543
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
526
544
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -530,6 +548,13 @@
530
548
  .utrecht-blockquote--distanced {
531
549
  --utrecht-space-around: 1;
532
550
  }
551
+
552
+ .utrecht-blockquote--html-blockquote {
553
+ --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
554
+ --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
555
+ color: var(--utrecht-blockquote-content-color, inherit);
556
+ font-size: var(--utrecht-blockquote-content-font-size, inherit);
557
+ }
533
558
  .utrecht-breadcrumb-nav {
534
559
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
535
560
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -1952,6 +1977,12 @@
1952
1977
  column-width: var(--utrecht-column-layout-column-width, 40ch);
1953
1978
  display: block;
1954
1979
  }
1980
+ @media print {
1981
+ .utrecht-column-layout {
1982
+ column-count: var(--utrecht-column-layout-print-column-count, 2);
1983
+ column-width: var(--utrecht-column-layout-print-column-width, auto);
1984
+ }
1985
+ }
1955
1986
 
1956
1987
  .utrecht-column-layout--rule {
1957
1988
  column-rule-color: var(--utrecht-column-layout-column-rule-color);
@@ -2480,7 +2511,7 @@
2480
2511
  .utrecht-form-field--checkbox {
2481
2512
  display: grid;
2482
2513
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
2483
- grid-template-areas: "input label" "input description" "input description-invalid";
2514
+ grid-template-areas: "input label" "input description" "input error-message";
2484
2515
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
2485
2516
  }
2486
2517
  .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2493,7 +2524,7 @@
2493
2524
  .utrecht-form-field--radio {
2494
2525
  display: grid;
2495
2526
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
2496
- grid-template-areas: "input label" "input description" "input description-invalid";
2527
+ grid-template-areas: "input label" "input description" "input error-message";
2497
2528
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
2498
2529
  }
2499
2530
  .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2525,7 +2556,7 @@
2525
2556
  }
2526
2557
 
2527
2558
  .utrecht-form-field .utrecht-form-field-description--invalid {
2528
- grid-area: description-invalid;
2559
+ grid-area: error-message;
2529
2560
  order: 3;
2530
2561
  }
2531
2562
 
@@ -2540,6 +2571,11 @@
2540
2571
  grid-area: description-before;
2541
2572
  order: 4;
2542
2573
  }
2574
+
2575
+ .utrecht-form-field__error-message {
2576
+ grid-area: error-message;
2577
+ order: 3;
2578
+ }
2543
2579
  .utrecht-form-fieldset {
2544
2580
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
2545
2581
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -3424,13 +3460,19 @@
3424
3460
  fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
3425
3461
  }
3426
3462
  .utrecht-logo {
3463
+ margin-block-end: 0;
3464
+ margin-block-start: 0;
3465
+ margin-inline-end: 0;
3466
+ margin-inline-start: 0;
3427
3467
  display: block;
3428
3468
  max-block-size: var(--utrecht-logo-max-block-size, 192px);
3429
3469
  max-inline-size: var(--utrecht-logo-max-inline-size, 96px);
3430
3470
  min-block-size: var(--utrecht-logo-min-block-size);
3431
3471
  min-inline-size: var(--utrecht-logo-min-inline-size);
3432
3472
  }
3433
- .utrecht-logo > * {
3473
+ .utrecht-logo > img,
3474
+ .utrecht-logo > picture,
3475
+ .utrecht-logo > svg {
3434
3476
  block-size: 100%;
3435
3477
  display: inline-block;
3436
3478
  inline-size: auto;
package/dist/prince-xml.css CHANGED
@@ -459,7 +459,14 @@
459
459
  }
460
460
  .utrecht-blockquote {
461
461
  background-color: var(--utrecht-blockquote-background-color);
462
+ border-color: var(--utrecht-blockquote-border-color);
463
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
464
+ border-style: solid;
465
+ border-width: var(--utrecht-blockquote-border-width, 0);
466
+ border-left-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
462
467
  color: var(--utrecht-blockquote-color);
468
+ display: flex;
469
+ flex-direction: column;
463
470
  font-family: var(--utrecht-document-font-family);
464
471
  font-size: var(--utrecht-blockquote-font-size);
465
472
  font-style: var(--utrecht-blockquote-font-style);
@@ -471,14 +478,25 @@
471
478
  padding-top: var(--utrecht-blockquote-padding-block-start);
472
479
  padding-right: var(--utrecht-blockquote-padding-inline-end);
473
480
  padding-left: var(--utrecht-blockquote-padding-inline-start);
481
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
474
482
  }
475
-
476
- .utrecht-blockquote__attribution {
477
- color: var(--utrecht-blockquote-attribution-color, inherit);
478
- font-size: var(--utrecht-blockquote-attribution-font-size, inherit);
483
+ .utrecht-blockquote__attribution,
484
+ .utrecht-blockquote__caption {
485
+ color: var(--utrecht-blockquote-caption-color, inherit);
486
+ font-size: var(--utrecht-blockquote-caption-font-size, inherit);
479
487
  }
480
488
 
481
- .utrecht-blockquote__content {
489
+ .utrecht-blockquote__figure {
490
+ display: flex;
491
+ flex-direction: column;
492
+ margin-bottom: 0;
493
+ margin-top: 0;
494
+ margin-right: 0;
495
+ margin-left: 0;
496
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
497
+ }
498
+ .utrecht-blockquote__content,
499
+ .utrecht-blockquote__quote {
482
500
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
483
501
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
484
502
  color: var(--utrecht-blockquote-content-color, inherit);
@@ -488,6 +506,13 @@
488
506
  .utrecht-blockquote--distanced {
489
507
  --utrecht-space-around: 1;
490
508
  }
509
+
510
+ .utrecht-blockquote--html-blockquote {
511
+ --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
512
+ --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
513
+ color: var(--utrecht-blockquote-content-color, inherit);
514
+ font-size: var(--utrecht-blockquote-content-font-size, inherit);
515
+ }
491
516
  .utrecht-breadcrumb-nav {
492
517
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
493
518
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
@@ -1883,6 +1908,13 @@
1883
1908
  column-gap: var(--utrecht-column-layout-gap, 2em);
1884
1909
  column-width: var(--utrecht-column-layout-column-width, 40ch);
1885
1910
  display: block;
1911
+ column-width: var(--utrecht-column-layout-column-width, 25em);
1912
+ }
1913
+ @media print {
1914
+ .utrecht-column-layout {
1915
+ column-count: var(--utrecht-column-layout-print-column-count, 2);
1916
+ column-width: var(--utrecht-column-layout-print-column-width, auto);
1917
+ }
1886
1918
  }
1887
1919
 
1888
1920
  .utrecht-column-layout--rule {
@@ -2394,7 +2426,7 @@
2394
2426
  .utrecht-form-field--checkbox {
2395
2427
  display: grid;
2396
2428
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
2397
- grid-template-areas: "input label" "input description" "input description-invalid";
2429
+ grid-template-areas: "input label" "input description" "input error-message";
2398
2430
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
2399
2431
  }
2400
2432
  .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2407,7 +2439,7 @@
2407
2439
  .utrecht-form-field--radio {
2408
2440
  display: grid;
2409
2441
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
2410
- grid-template-areas: "input label" "input description" "input description-invalid";
2442
+ grid-template-areas: "input label" "input description" "input error-message";
2411
2443
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
2412
2444
  }
2413
2445
  .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
@@ -2439,7 +2471,7 @@
2439
2471
  }
2440
2472
 
2441
2473
  .utrecht-form-field .utrecht-form-field-description--invalid {
2442
- grid-area: description-invalid;
2474
+ grid-area: error-message;
2443
2475
  order: 3;
2444
2476
  }
2445
2477
 
@@ -2454,6 +2486,11 @@
2454
2486
  grid-area: description-before;
2455
2487
  order: 4;
2456
2488
  }
2489
+
2490
+ .utrecht-form-field__error-message {
2491
+ grid-area: error-message;
2492
+ order: 3;
2493
+ }
2457
2494
  .utrecht-form-fieldset {
2458
2495
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
2459
2496
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
@@ -3292,13 +3329,23 @@
3292
3329
  fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
3293
3330
  }
3294
3331
  .utrecht-logo {
3332
+ margin-bottom: 0;
3333
+ margin-top: 0;
3334
+ margin-right: 0;
3335
+ margin-left: 0;
3295
3336
  display: block;
3296
3337
  max-height: var(--utrecht-logo-max-block-size, 192px);
3297
3338
  max-width: var(--utrecht-logo-max-inline-size, 96px);
3298
3339
  min-height: var(--utrecht-logo-min-block-size);
3299
3340
  min-width: var(--utrecht-logo-min-inline-size);
3300
3341
  }
3301
- .utrecht-logo > * {
3342
+ .utrecht-logo svg[role=img][aria-label] {
3343
+ -prince-alt-text: attr(aria-label);
3344
+ -prince-pdf-tag-type: figure;
3345
+ }
3346
+ .utrecht-logo > img,
3347
+ .utrecht-logo > picture,
3348
+ .utrecht-logo > svg {
3302
3349
  height: 100%;
3303
3350
  display: inline-block;
3304
3351
  width: auto;
@@ -7128,7 +7175,14 @@
7128
7175
  }
7129
7176
  .utrecht-html blockquote {
7130
7177
  background-color: var(--utrecht-blockquote-background-color);
7178
+ border-color: var(--utrecht-blockquote-border-color);
7179
+ border-radius: var(--utrecht-blockquote-border-radius, 0);
7180
+ border-style: solid;
7181
+ border-width: var(--utrecht-blockquote-border-width, 0);
7182
+ border-left-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0));
7131
7183
  color: var(--utrecht-blockquote-color);
7184
+ display: flex;
7185
+ flex-direction: column;
7132
7186
  font-family: var(--utrecht-document-font-family);
7133
7187
  font-size: var(--utrecht-blockquote-font-size);
7134
7188
  font-style: var(--utrecht-blockquote-font-style);
@@ -7140,6 +7194,7 @@
7140
7194
  padding-top: var(--utrecht-blockquote-padding-block-start);
7141
7195
  padding-right: var(--utrecht-blockquote-padding-inline-end);
7142
7196
  padding-left: var(--utrecht-blockquote-padding-inline-start);
7197
+ row-gap: var(--utrecht-blockquote-row-gap, 0);
7143
7198
  --utrecht-document-color: var(--utrecht-blockquote-content-color, inherit);
7144
7199
  --utrecht-paragraph-font-size: var(--utrecht-blockquote-content-font-size, inherit);
7145
7200
  color: var(--utrecht-blockquote-content-color, inherit);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "6.0.0",
2
+ "version": "6.1.0",
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",
@@ -26,7 +26,7 @@
26
26
  "rimraf": "5.0.7",
27
27
  "rollup": "4.18.0",
28
28
  "rollup-plugin-postcss": "4.0.2",
29
- "@utrecht/components": "7.3.0",
29
+ "@utrecht/components": "7.4.0",
30
30
  "@utrecht/html-content-css": "1.1.0"
31
31
  },
32
32
  "main": "dist/index.css",