@utrecht/component-library-css 9.0.0 → 9.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html.css +4 -1
  2. package/dist/index.css +25 -8
  3. package/dist/prince-xml.css +29 -9
  4. package/package.json +9 -9
package/dist/html.css CHANGED
@@ -255,7 +255,7 @@
255
255
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
256
256
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
257
257
  inline-size: var(--utrecht-button-inline-size, auto);
258
- justify-content: center;
258
+ justify-content: var(--utrecht-button-justify-content, center);
259
259
  line-height: var(--_utrecht-button-line-height);
260
260
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
261
261
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -1102,6 +1102,7 @@
1102
1102
  border-style: solid;
1103
1103
  box-sizing: border-box;
1104
1104
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
1105
+ display: block;
1105
1106
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
1106
1107
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
1107
1108
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
@@ -1110,10 +1111,12 @@
1110
1111
  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
1111
1112
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
1112
1113
  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
1114
+ overflow: hidden;
1113
1115
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
1114
1116
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
1115
1117
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
1116
1118
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
1119
+ white-space: nowrap;
1117
1120
  }
1118
1121
  .utrecht-html input:not([type]):focus,
1119
1122
  .utrecht-html input[type=date i]:focus,
package/dist/index.css CHANGED
@@ -975,7 +975,7 @@
975
975
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
976
976
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
977
977
  inline-size: var(--utrecht-button-inline-size, auto);
978
- justify-content: center;
978
+ justify-content: var(--utrecht-button-justify-content, center);
979
979
  line-height: var(--_utrecht-button-line-height);
980
980
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
981
981
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -1355,7 +1355,7 @@
1355
1355
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1356
1356
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1357
1357
  inline-size: var(--utrecht-button-inline-size, auto);
1358
- justify-content: center;
1358
+ justify-content: var(--utrecht-button-justify-content, center);
1359
1359
  line-height: var(--_utrecht-button-line-height);
1360
1360
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
1361
1361
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -4087,10 +4087,6 @@
4087
4087
  }
4088
4088
 
4089
4089
  .utrecht-listbox__option--selected {
4090
- --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
4091
- --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
4092
- --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
4093
- --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
4094
4090
  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
4095
4091
  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
4096
4092
  }
@@ -4113,6 +4109,10 @@
4113
4109
  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
4114
4110
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
4115
4111
  }
4112
+ .utrecht-listbox__option--disabled.utrecht-listbox__option--selected {
4113
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
4114
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
4115
+ }
4116
4116
 
4117
4117
  .utrecht-listbox--disabled {
4118
4118
  --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
@@ -4268,6 +4268,10 @@
4268
4268
  }
4269
4269
  }
4270
4270
 
4271
+ .utrecht-nav-bar__heading {
4272
+ display: none;
4273
+ }
4274
+
4271
4275
  .utrecht-nav-bar__content {
4272
4276
  align-items: stretch;
4273
4277
  background-color: var(--utrecht-nav-bar-content-background-color);
@@ -4286,7 +4290,7 @@
4286
4290
  margin-inline-end: 0;
4287
4291
  margin-inline-start: 0;
4288
4292
  padding-inline-start: 0;
4289
- align-items: stretch;
4293
+ align-items: baseline;
4290
4294
  display: flex;
4291
4295
  flex-direction: row;
4292
4296
  flex-wrap: wrap;
@@ -4294,6 +4298,16 @@
4294
4298
  justify-content: start;
4295
4299
  }
4296
4300
 
4301
+ .utrecht-nav-list--inline-size-auto {
4302
+ inline-size: auto;
4303
+ }
4304
+
4305
+ .utrecht-nav-list__link[aria-current=page],
4306
+ .utrecht-nav-list__link[aria-current=true] {
4307
+ background-color: var(--utrecht-navigation-link-current-background-color, transparent);
4308
+ font-weight: var(--utrecht-navigation-link-current-font-weight);
4309
+ }
4310
+
4297
4311
  .utrecht-nav-list--center > * {
4298
4312
  flex: 1 1 0;
4299
4313
  justify-content: center;
@@ -7877,7 +7891,7 @@
7877
7891
  }
7878
7892
 
7879
7893
  .utrecht-table__header-cell-button {
7880
- justify-content: var(--_utrecht-table-cell-text-align, start);
7894
+ --utrecht-button-justify-content: var(--_utrecht-table-cell-text-align, start);
7881
7895
  }
7882
7896
  .utrecht-table__data--truncate {
7883
7897
  display: block;
@@ -8093,6 +8107,7 @@
8093
8107
  border-style: solid;
8094
8108
  box-sizing: border-box;
8095
8109
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8110
+ display: block;
8096
8111
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8097
8112
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8098
8113
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
@@ -8101,10 +8116,12 @@
8101
8116
  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
8102
8117
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
8103
8118
  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
8119
+ overflow: hidden;
8104
8120
  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
8105
8121
  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
8106
8122
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
8107
8123
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
8124
+ white-space: nowrap;
8108
8125
  }
8109
8126
 
8110
8127
  .utrecht-textbox--invalid {
package/dist/prince-xml.css CHANGED
@@ -940,7 +940,7 @@
940
940
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
941
941
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
942
942
  width: var(--utrecht-button-inline-size, auto);
943
- justify-content: center;
943
+ justify-content: var(--utrecht-button-justify-content, center);
944
944
  line-height: var(--_utrecht-button-line-height);
945
945
  max-width: var(--utrecht-button-max-inline-size, fit-content);
946
946
  min-height: var(--utrecht-button-min-block-size, 44px);
@@ -1311,7 +1311,7 @@
1311
1311
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
1312
1312
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
1313
1313
  width: var(--utrecht-button-inline-size, auto);
1314
- justify-content: center;
1314
+ justify-content: var(--utrecht-button-justify-content, center);
1315
1315
  line-height: var(--_utrecht-button-line-height);
1316
1316
  max-width: var(--utrecht-button-max-inline-size, fit-content);
1317
1317
  min-height: var(--utrecht-button-min-block-size, 44px);
@@ -3962,10 +3962,6 @@
3962
3962
  }
3963
3963
 
3964
3964
  .utrecht-listbox__option--selected {
3965
- --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
3966
- --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
3967
- --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);
3968
- --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);
3969
3965
  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
3970
3966
  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
3971
3967
  }
@@ -3988,6 +3984,10 @@
3988
3984
  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
3989
3985
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
3990
3986
  }
3987
+ .utrecht-listbox__option--disabled.utrecht-listbox__option--selected {
3988
+ --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
3989
+ --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
3990
+ }
3991
3991
 
3992
3992
  .utrecht-listbox--disabled {
3993
3993
  --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
@@ -4130,6 +4130,10 @@
4130
4130
  width: 100%;
4131
4131
  }
4132
4132
 
4133
+ .utrecht-nav-bar__heading {
4134
+ display: none;
4135
+ }
4136
+
4133
4137
  .utrecht-nav-bar__content {
4134
4138
  align-items: stretch;
4135
4139
  background-color: var(--utrecht-nav-bar-content-background-color);
@@ -4148,7 +4152,7 @@
4148
4152
  margin-right: 0;
4149
4153
  margin-left: 0;
4150
4154
  padding-left: 0;
4151
- align-items: stretch;
4155
+ align-items: baseline;
4152
4156
  display: flex;
4153
4157
  flex-direction: row;
4154
4158
  flex-wrap: wrap;
@@ -4156,6 +4160,16 @@
4156
4160
  justify-content: start;
4157
4161
  }
4158
4162
 
4163
+ .utrecht-nav-list--inline-size-auto {
4164
+ width: auto;
4165
+ }
4166
+
4167
+ .utrecht-nav-list__link[aria-current=page],
4168
+ .utrecht-nav-list__link[aria-current=true] {
4169
+ background-color: var(--utrecht-navigation-link-current-background-color, transparent);
4170
+ font-weight: var(--utrecht-navigation-link-current-font-weight);
4171
+ }
4172
+
4159
4173
  .utrecht-nav-list--center > * {
4160
4174
  flex: 1 1 0;
4161
4175
  justify-content: center;
@@ -7733,7 +7747,7 @@
7733
7747
  }
7734
7748
 
7735
7749
  .utrecht-table__header-cell-button {
7736
- justify-content: var(--_utrecht-table-cell-text-align, start);
7750
+ --utrecht-button-justify-content: var(--_utrecht-table-cell-text-align, start);
7737
7751
  }
7738
7752
  .utrecht-table__data--truncate {
7739
7753
  display: block;
@@ -7949,6 +7963,7 @@
7949
7963
  border-style: solid;
7950
7964
  box-sizing: border-box;
7951
7965
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
7966
+ display: block;
7952
7967
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
7953
7968
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
7954
7969
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
@@ -7957,10 +7972,12 @@
7957
7972
  min-height: var(--utrecht-pointer-target-min-size, 44px);
7958
7973
  min-width: var(--utrecht-pointer-target-min-size, 44px);
7959
7974
  max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
7975
+ overflow: hidden;
7960
7976
  padding-bottom: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
7961
7977
  padding-top: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
7962
7978
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
7963
7979
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
7980
+ white-space: nowrap;
7964
7981
  }
7965
7982
 
7966
7983
  .utrecht-textbox--invalid {
@@ -8681,7 +8698,7 @@
8681
8698
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
8682
8699
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
8683
8700
  width: var(--utrecht-button-inline-size, auto);
8684
- justify-content: center;
8701
+ justify-content: var(--utrecht-button-justify-content, center);
8685
8702
  line-height: var(--_utrecht-button-line-height);
8686
8703
  max-width: var(--utrecht-button-max-inline-size, fit-content);
8687
8704
  min-height: var(--utrecht-button-min-block-size, 44px);
@@ -9527,6 +9544,7 @@
9527
9544
  border-style: solid;
9528
9545
  box-sizing: border-box;
9529
9546
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
9547
+ display: block;
9530
9548
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
9531
9549
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
9532
9550
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
@@ -9535,10 +9553,12 @@
9535
9553
  min-height: var(--utrecht-pointer-target-min-size, 44px);
9536
9554
  min-width: var(--utrecht-pointer-target-min-size, 44px);
9537
9555
  max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
9556
+ overflow: hidden;
9538
9557
  padding-bottom: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
9539
9558
  padding-top: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
9540
9559
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
9541
9560
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
9561
+ white-space: nowrap;
9542
9562
  }
9543
9563
  .utrecht-html input:not([type]):focus,
9544
9564
  .utrecht-html input[type=date i]:focus,
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "9.0.0",
2
+ "version": "9.0.2",
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",
@@ -32,7 +32,7 @@
32
32
  "@utrecht/blockquote-css": "2.0.1",
33
33
  "@utrecht/body-css": "2.0.1",
34
34
  "@utrecht/breadcrumb-nav-css": "2.1.0",
35
- "@utrecht/button-css": "3.0.1",
35
+ "@utrecht/button-css": "3.1.0",
36
36
  "@utrecht/button-group-css": "2.0.1",
37
37
  "@utrecht/button-link-css": "2.0.1",
38
38
  "@utrecht/calendar-css": "2.0.1",
@@ -77,7 +77,7 @@
77
77
  "@utrecht/link-list-css": "3.0.1",
78
78
  "@utrecht/link-social-css": "2.0.1",
79
79
  "@utrecht/list-social-css": "2.0.1",
80
- "@utrecht/listbox-css": "2.0.1",
80
+ "@utrecht/listbox-css": "2.1.0",
81
81
  "@utrecht/logo-button-css": "1.4.2",
82
82
  "@utrecht/logo-css": "2.0.1",
83
83
  "@utrecht/logo-image-css": "1.4.2",
@@ -110,10 +110,10 @@
110
110
  "@utrecht/spotlight-section-css": "2.0.1",
111
111
  "@utrecht/status-badge-css": "1.0.0",
112
112
  "@utrecht/surface-css": "2.0.1",
113
- "@utrecht/table-css": "2.0.1",
113
+ "@utrecht/table-css": "2.0.2",
114
114
  "@utrecht/table-of-contents-css": "1.0.1",
115
115
  "@utrecht/textarea-css": "3.0.1",
116
- "@utrecht/textbox-css": "3.0.1",
116
+ "@utrecht/textbox-css": "3.1.0",
117
117
  "@utrecht/tooltip-css": "2.0.1",
118
118
  "@utrecht/top-task-link-css": "2.0.1",
119
119
  "@utrecht/top-task-nav-css": "1.3.2",
@@ -122,11 +122,11 @@
122
122
  "@utrecht/youtube-video-css": "2.0.1"
123
123
  },
124
124
  "devDependencies": {
125
- "postcss": "8.4.38",
126
- "postcss-discard-duplicates": "7.0.0",
125
+ "postcss": "8.4.49",
126
+ "postcss-discard-duplicates": "7.0.2",
127
127
  "postcss-logical": "7.0.1",
128
- "rimraf": "5.0.7",
129
- "rollup": "4.18.0",
128
+ "rimraf": "5.0.10",
129
+ "rollup": "4.18.1",
130
130
  "rollup-plugin-postcss": "4.0.2",
131
131
  "@utrecht/build-utils-css": "0.0.4"
132
132
  },