@utrecht/component-library-css 7.1.5 → 7.2.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.
package/dist/index.css CHANGED
@@ -1,3 +1,8 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2020-2025 Frameless B.V.
4
+ * Copyright (c) 2021-2025 Gemeente Utrecht
5
+ */
1
6
  /**
2
7
  * @license EUPL-1.2
3
8
  * Copyright (c) 2024-2025 Gemeente Utrecht
@@ -30,8 +35,22 @@
30
35
  }
31
36
 
32
37
  .utrecht-accordion__section {
38
+ border-block-start-color: var(--utrecht-accordion-section-border-color, currentColor);
39
+ border-block-start-style: solid;
40
+ border-block-start-width: var(--utrecht-accordion-section-border-width, 0);
33
41
  break-inside: avoid;
34
42
  }
43
+ .utrecht-accordion__section:is(:last-child, :only-child) {
44
+ border-block-end-color: var(--utrecht-accordion-section-border-color, currentColor);
45
+ border-block-end-style: solid;
46
+ border-block-end-width: var(--utrecht-accordion-section-border-width, 0);
47
+ }
48
+ .utrecht-accordion__section:not(:last-child) {
49
+ border-block-end-color: transparent;
50
+ }
51
+ .utrecht-accordion__section:hover {
52
+ --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
53
+ }
35
54
 
36
55
  .utrecht-accordion__button {
37
56
  --utrecht-button-focus-scale: 1;
@@ -43,6 +62,8 @@
43
62
  --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
44
63
  --utrecht-button-subtle-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
45
64
  --utrecht-button-subtle-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
65
+ --utrecht-button-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
66
+ --utrecht-button-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
46
67
  --utrecht-button-subtle-color: var(--utrecht-accordion-button-color);
47
68
  --utrecht-button-subtle-hover-background-color: var(--utrecht-accordion-button-hover-background-color);
48
69
  --utrecht-button-subtle-hover-border-color: var(--utrecht-accordion-button-hover-border-color);
@@ -61,26 +82,11 @@
61
82
  position: relative;
62
83
  text-align: start;
63
84
  }
64
-
65
- .utrecht-accordion__button--utrecht[aria-expanded]::after {
66
- background-color: var(--utrecht-accordion-button-icon-utrecht-background-color);
67
- background-position: center;
68
- background-repeat: no-repeat;
69
- block-size: var(--utrecht-accordion-button-icon-size);
70
- content: "";
71
- inline-size: var(--utrecht-accordion-button-icon-size);
72
- inset-block-start: 0;
73
- inset-inline-end: 0;
74
- position: absolute;
75
- }
76
- .utrecht-accordion__button--utrecht[aria-expanded=false]::after {
77
- background-image: var(--utrecht-accordion-icon-utrecht-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
78
- }
79
- .utrecht-accordion__button--utrecht[aria-expanded=true]::after {
80
- background-image: var(--utrecht-accordion-icon-utrecht-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
81
- background-position: center;
82
- background-repeat: no-repeat;
83
- content: "";
85
+ .utrecht-accordion__button:focus-visible {
86
+ --utrecht-accordion-button-background-color: var(--utrecht-accordion-button-focus-visible-background-color);
87
+ --utrecht-accordion-button-color: var(--utrecht-accordion-button-focus-visible-color);
88
+ --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-focus-visible-border-color);
89
+ --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-focus-visible-border-width);
84
90
  }
85
91
 
86
92
  .utrecht-accordion__button-icon {
@@ -102,6 +108,8 @@
102
108
  }
103
109
 
104
110
  .utrecht-accordion__header {
111
+ align-items: center;
112
+ display: flex;
105
113
  margin-block-end: 0;
106
114
  margin-block-start: 0;
107
115
  }
@@ -7101,4 +7109,17 @@
7101
7109
  hyphens: none;
7102
7110
  overflow-wrap: anywhere;
7103
7111
  page-break-inside: avoid;
7112
+ }
7113
+ .utrecht-youtube-video {
7114
+ aspect-ratio: 16/9;
7115
+ }
7116
+
7117
+ .utrecht-youtube-video--html-iframe {
7118
+ border-width: 0;
7119
+ }
7120
+ .utrecht-youtube-video--html-iframe:not([width]) {
7121
+ width: 100%;
7122
+ }
7123
+ .utrecht-youtube-video--html-iframe:not([height]) {
7124
+ height: auto;
7104
7125
  }
@@ -1,3 +1,8 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2020-2025 Frameless B.V.
4
+ * Copyright (c) 2021-2025 Gemeente Utrecht
5
+ */
1
6
  /**
2
7
  * @license EUPL-1.2
3
8
  * Copyright (c) 2024-2025 Gemeente Utrecht
@@ -29,8 +34,22 @@
29
34
  }
30
35
 
31
36
  .utrecht-accordion__section {
37
+ border-top-color: var(--utrecht-accordion-section-border-color, currentColor);
38
+ border-top-style: solid;
39
+ border-top-width: var(--utrecht-accordion-section-border-width, 0);
32
40
  break-inside: avoid;
33
41
  }
42
+ .utrecht-accordion__section:is(:last-child, :only-child) {
43
+ border-bottom-color: var(--utrecht-accordion-section-border-color, currentColor);
44
+ border-bottom-style: solid;
45
+ border-bottom-width: var(--utrecht-accordion-section-border-width, 0);
46
+ }
47
+ .utrecht-accordion__section:not(:last-child) {
48
+ border-bottom-color: transparent;
49
+ }
50
+ .utrecht-accordion__section:hover {
51
+ --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
52
+ }
34
53
 
35
54
  .utrecht-accordion__button {
36
55
  --utrecht-button-focus-scale: 1;
@@ -42,6 +61,8 @@
42
61
  --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
43
62
  --utrecht-button-subtle-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
44
63
  --utrecht-button-subtle-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
64
+ --utrecht-button-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
65
+ --utrecht-button-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
45
66
  --utrecht-button-subtle-color: var(--utrecht-accordion-button-color);
46
67
  --utrecht-button-subtle-hover-background-color: var(--utrecht-accordion-button-hover-background-color);
47
68
  --utrecht-button-subtle-hover-border-color: var(--utrecht-accordion-button-hover-border-color);
@@ -60,26 +81,11 @@
60
81
  position: relative;
61
82
  text-align: left;
62
83
  }
63
-
64
- .utrecht-accordion__button--utrecht[aria-expanded]::after {
65
- background-color: var(--utrecht-accordion-button-icon-utrecht-background-color);
66
- background-position: center;
67
- background-repeat: no-repeat;
68
- height: var(--utrecht-accordion-button-icon-size);
69
- content: "";
70
- width: var(--utrecht-accordion-button-icon-size);
71
- top: 0;
72
- right: 0;
73
- position: absolute;
74
- }
75
- .utrecht-accordion__button--utrecht[aria-expanded=false]::after {
76
- background-image: var(--utrecht-accordion-icon-utrecht-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
77
- }
78
- .utrecht-accordion__button--utrecht[aria-expanded=true]::after {
79
- background-image: var(--utrecht-accordion-icon-utrecht-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
80
- background-position: center;
81
- background-repeat: no-repeat;
82
- content: "";
84
+ .utrecht-accordion__button[prince-xml-ignore-pseudo-class-focus-visible] {
85
+ --utrecht-accordion-button-background-color: var(--utrecht-accordion-button-focus-visible-background-color);
86
+ --utrecht-accordion-button-color: var(--utrecht-accordion-button-focus-visible-color);
87
+ --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-focus-visible-border-color);
88
+ --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-focus-visible-border-width);
83
89
  }
84
90
 
85
91
  .utrecht-accordion__button-icon {
@@ -101,6 +107,8 @@
101
107
  }
102
108
 
103
109
  .utrecht-accordion__header {
110
+ align-items: center;
111
+ display: flex;
104
112
  margin-bottom: 0;
105
113
  margin-top: 0;
106
114
  }
@@ -7002,6 +7010,19 @@
7002
7010
  overflow-wrap: anywhere;
7003
7011
  page-break-inside: avoid;
7004
7012
  }
7013
+ .utrecht-youtube-video {
7014
+ aspect-ratio: 16/9;
7015
+ }
7016
+
7017
+ .utrecht-youtube-video--html-iframe {
7018
+ border-width: 0;
7019
+ }
7020
+ .utrecht-youtube-video--html-iframe:not([width]) {
7021
+ width: 100%;
7022
+ }
7023
+ .utrecht-youtube-video--html-iframe:not([height]) {
7024
+ height: auto;
7025
+ }
7005
7026
  .utrecht-html {
7006
7027
  --utrecht-space-around: 1;
7007
7028
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "7.1.5",
2
+ "version": "7.2.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",
@@ -20,101 +20,102 @@
20
20
  "directory": "packages/component-library-css"
21
21
  },
22
22
  "dependencies": {
23
- "@utrecht/accordion-css": "1.6.0",
24
- "@utrecht/alert-css": "2.2.0",
25
- "@utrecht/alert-dialog-css": "1.4.1",
26
- "@utrecht/alternate-lang-nav-css": "1.3.0",
27
- "@utrecht/article-css": "1.5.0",
28
- "@utrecht/backdrop-css": "1.4.0",
29
- "@utrecht/badge-counter-css": "1.4.0",
30
- "@utrecht/badge-list-css": "2.2.0",
31
- "@utrecht/blockquote-css": "1.6.0",
32
- "@utrecht/badge-status-css": "1.4.0",
33
- "@utrecht/body-css": "1.2.0",
34
- "@utrecht/breadcrumb-nav-css": "1.4.0",
35
- "@utrecht/button-css": "2.3.0",
36
- "@utrecht/button-group-css": "1.4.0",
37
- "@utrecht/button-link-css": "1.3.0",
38
- "@utrecht/calendar-css": "1.4.0",
39
- "@utrecht/checkbox-css": "1.6.0",
40
- "@utrecht/code-block-css": "1.5.0",
41
- "@utrecht/code-css": "1.5.0",
42
- "@utrecht/color-sample-css": "1.4.0",
43
- "@utrecht/column-layout-css": "1.5.0",
44
- "@utrecht/combobox-css": "1.4.0",
45
- "@utrecht/currency-data-css": "1.3.0",
46
- "@utrecht/custom-checkbox-css": "1.3.1",
47
- "@utrecht/data-badge-css": "1.0.0",
48
- "@utrecht/data-list-css": "1.4.0",
49
- "@utrecht/digid-button-css": "1.4.0",
50
- "@utrecht/document-css": "1.5.0",
51
- "@utrecht/drawer-css": "1.4.0",
52
- "@utrecht/emphasis-css": "1.5.0",
53
- "@utrecht/figure-css": "1.5.0",
54
- "@utrecht/form-css": "1.5.0",
55
- "@utrecht/form-field-css": "1.5.0",
56
- "@utrecht/form-field-description-css": "1.5.0",
57
- "@utrecht/form-field-error-message-css": "1.5.0",
58
- "@utrecht/form-fieldset-css": "1.5.0",
59
- "@utrecht/form-label-css": "1.6.0",
60
- "@utrecht/form-toggle-css": "1.5.0",
61
- "@utrecht/heading-1-css": "1.5.0",
62
- "@utrecht/heading-2-css": "1.5.0",
63
- "@utrecht/heading-3-css": "1.5.0",
64
- "@utrecht/heading-4-css": "1.5.0",
65
- "@utrecht/heading-5-css": "1.5.0",
66
- "@utrecht/heading-6-css": "1.5.0",
67
- "@utrecht/heading-group-css": "1.5.0",
68
- "@utrecht/html-content-css": "1.4.0",
69
- "@utrecht/iban-data-css": "1.3.0",
70
- "@utrecht/icon-css": "2.0.0",
71
- "@utrecht/img-css": "1.3.0",
72
- "@utrecht/index-char-nav-css": "1.4.0",
73
- "@utrecht/link-button-css": "1.4.0",
74
- "@utrecht/link-css": "1.6.0",
75
- "@utrecht/link-list-css": "2.3.0",
76
- "@utrecht/link-social-css": "1.4.0",
77
- "@utrecht/list-social-css": "1.4.0",
78
- "@utrecht/listbox-css": "1.5.1",
79
- "@utrecht/logo-button-css": "1.4.0",
80
- "@utrecht/logo-css": "1.4.0",
81
- "@utrecht/logo-image-css": "1.4.0",
82
- "@utrecht/map-marker-css": "1.4.0",
83
- "@utrecht/mark-css": "1.5.0",
84
- "@utrecht/multiline-data-css": "1.3.0",
85
- "@utrecht/nav-bar-css": "1.4.0",
86
- "@utrecht/nav-list-css": "1.3.0",
87
- "@utrecht/number-badge-css": "2.3.0",
88
- "@utrecht/number-data-css": "1.4.0",
89
- "@utrecht/ordered-list-css": "1.5.1",
90
- "@utrecht/page-body-css": "0.1.0",
91
- "@utrecht/page-content-css": "1.4.0",
92
- "@utrecht/page-css": "1.4.0",
93
- "@utrecht/page-footer-css": "2.1.0",
94
- "@utrecht/page-header-css": "1.5.0",
95
- "@utrecht/page-layout-css": "1.1.0",
96
- "@utrecht/pagination-css": "1.4.0",
97
- "@utrecht/paragraph-css": "2.3.0",
98
- "@utrecht/pre-heading-css": "1.4.0",
99
- "@utrecht/preserve-data-css": "1.3.0",
100
- "@utrecht/radio-button-css": "1.6.0",
101
- "@utrecht/root-css": "1.2.0",
102
- "@utrecht/rich-text-css": "1.3.0",
103
- "@utrecht/search-bar-css": "2.2.0",
104
- "@utrecht/select-css": "1.8.0",
105
- "@utrecht/separator-css": "1.5.0",
106
- "@utrecht/skip-link-css": "1.5.0",
107
- "@utrecht/spotlight-section-css": "1.6.0",
108
- "@utrecht/surface-css": "1.4.0",
109
- "@utrecht/table-css": "1.6.0",
110
- "@utrecht/table-of-contents-css": "0.3.0",
111
- "@utrecht/textarea-css": "2.3.1",
112
- "@utrecht/textbox-css": "1.7.0",
113
- "@utrecht/top-task-link-css": "1.4.0",
114
- "@utrecht/top-task-nav-css": "1.3.0",
115
- "@utrecht/unordered-list-css": "1.5.0",
116
- "@utrecht/url-data-css": "1.3.0",
117
- "@utrecht/data-placeholder-css": "1.4.0"
23
+ "@utrecht/accordion-css": "2.0.0",
24
+ "@utrecht/alert-css": "2.2.1",
25
+ "@utrecht/alert-dialog-css": "1.4.2",
26
+ "@utrecht/alternate-lang-nav-css": "1.3.1",
27
+ "@utrecht/article-css": "1.5.1",
28
+ "@utrecht/backdrop-css": "1.4.1",
29
+ "@utrecht/badge-counter-css": "1.4.1",
30
+ "@utrecht/badge-list-css": "2.2.1",
31
+ "@utrecht/badge-status-css": "1.4.1",
32
+ "@utrecht/blockquote-css": "1.6.1",
33
+ "@utrecht/body-css": "1.2.1",
34
+ "@utrecht/breadcrumb-nav-css": "1.4.1",
35
+ "@utrecht/button-css": "2.3.1",
36
+ "@utrecht/button-group-css": "1.4.1",
37
+ "@utrecht/button-link-css": "1.3.1",
38
+ "@utrecht/calendar-css": "1.4.1",
39
+ "@utrecht/checkbox-css": "1.6.1",
40
+ "@utrecht/code-block-css": "1.5.1",
41
+ "@utrecht/code-css": "1.5.1",
42
+ "@utrecht/color-sample-css": "1.4.1",
43
+ "@utrecht/column-layout-css": "1.5.1",
44
+ "@utrecht/combobox-css": "1.4.1",
45
+ "@utrecht/custom-checkbox-css": "1.3.2",
46
+ "@utrecht/data-badge-css": "1.0.1",
47
+ "@utrecht/currency-data-css": "1.3.1",
48
+ "@utrecht/data-list-css": "1.4.1",
49
+ "@utrecht/data-placeholder-css": "1.4.1",
50
+ "@utrecht/digid-button-css": "1.4.1",
51
+ "@utrecht/document-css": "1.5.1",
52
+ "@utrecht/drawer-css": "1.4.1",
53
+ "@utrecht/emphasis-css": "1.5.1",
54
+ "@utrecht/figure-css": "1.5.1",
55
+ "@utrecht/form-css": "1.5.1",
56
+ "@utrecht/form-field-description-css": "1.5.1",
57
+ "@utrecht/form-field-error-message-css": "1.5.1",
58
+ "@utrecht/form-fieldset-css": "1.5.1",
59
+ "@utrecht/form-label-css": "1.6.1",
60
+ "@utrecht/form-toggle-css": "1.5.1",
61
+ "@utrecht/form-field-css": "1.5.1",
62
+ "@utrecht/heading-1-css": "1.5.1",
63
+ "@utrecht/heading-2-css": "1.5.1",
64
+ "@utrecht/heading-3-css": "1.5.1",
65
+ "@utrecht/heading-4-css": "1.5.1",
66
+ "@utrecht/heading-5-css": "1.5.1",
67
+ "@utrecht/heading-6-css": "1.5.1",
68
+ "@utrecht/heading-group-css": "1.5.1",
69
+ "@utrecht/html-content-css": "1.4.1",
70
+ "@utrecht/iban-data-css": "1.3.1",
71
+ "@utrecht/img-css": "1.3.1",
72
+ "@utrecht/index-char-nav-css": "1.4.1",
73
+ "@utrecht/link-button-css": "1.4.1",
74
+ "@utrecht/link-css": "1.6.1",
75
+ "@utrecht/icon-css": "2.0.1",
76
+ "@utrecht/link-social-css": "1.4.1",
77
+ "@utrecht/list-social-css": "1.4.1",
78
+ "@utrecht/link-list-css": "2.3.1",
79
+ "@utrecht/listbox-css": "1.5.2",
80
+ "@utrecht/logo-button-css": "1.4.1",
81
+ "@utrecht/logo-css": "1.4.1",
82
+ "@utrecht/logo-image-css": "1.4.1",
83
+ "@utrecht/map-marker-css": "1.4.1",
84
+ "@utrecht/nav-bar-css": "1.4.1",
85
+ "@utrecht/nav-list-css": "1.3.1",
86
+ "@utrecht/multiline-data-css": "1.3.1",
87
+ "@utrecht/number-badge-css": "2.3.1",
88
+ "@utrecht/mark-css": "1.5.1",
89
+ "@utrecht/number-data-css": "1.4.1",
90
+ "@utrecht/ordered-list-css": "1.5.2",
91
+ "@utrecht/page-body-css": "0.1.1",
92
+ "@utrecht/page-content-css": "1.4.1",
93
+ "@utrecht/page-css": "1.4.1",
94
+ "@utrecht/page-footer-css": "2.1.1",
95
+ "@utrecht/page-header-css": "1.5.1",
96
+ "@utrecht/page-layout-css": "1.1.1",
97
+ "@utrecht/pagination-css": "1.4.1",
98
+ "@utrecht/paragraph-css": "2.3.1",
99
+ "@utrecht/pre-heading-css": "1.4.1",
100
+ "@utrecht/radio-button-css": "1.6.1",
101
+ "@utrecht/rich-text-css": "1.3.1",
102
+ "@utrecht/preserve-data-css": "1.3.1",
103
+ "@utrecht/search-bar-css": "2.2.1",
104
+ "@utrecht/root-css": "1.2.1",
105
+ "@utrecht/select-css": "1.8.1",
106
+ "@utrecht/separator-css": "1.5.1",
107
+ "@utrecht/skip-link-css": "1.5.1",
108
+ "@utrecht/spotlight-section-css": "1.6.1",
109
+ "@utrecht/surface-css": "1.4.1",
110
+ "@utrecht/table-css": "1.6.1",
111
+ "@utrecht/table-of-contents-css": "0.3.1",
112
+ "@utrecht/textarea-css": "2.3.2",
113
+ "@utrecht/textbox-css": "1.7.1",
114
+ "@utrecht/top-task-link-css": "1.4.1",
115
+ "@utrecht/top-task-nav-css": "1.3.1",
116
+ "@utrecht/url-data-css": "1.3.1",
117
+ "@utrecht/unordered-list-css": "1.5.1",
118
+ "@utrecht/youtube-video-css": "1.0.0"
118
119
  },
119
120
  "devDependencies": {
120
121
  "postcss": "8.4.38",
@@ -123,7 +124,7 @@
123
124
  "rimraf": "5.0.7",
124
125
  "rollup": "4.18.0",
125
126
  "rollup-plugin-postcss": "4.0.2",
126
- "@utrecht/build-utils-css": "0.0.2"
127
+ "@utrecht/build-utils-css": "0.0.3"
127
128
  },
128
129
  "main": "dist/index.css",
129
130
  "scripts": {