@utrecht/component-library-css 1.0.0-alpha.571 → 1.0.0-alpha.574

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 (3) hide show
  1. package/dist/html.css +9 -9
  2. package/dist/index.css +33 -31
  3. package/package.json +2 -2
package/dist/html.css CHANGED
@@ -685,7 +685,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
685
685
  border-width: var(--_utrecht-button-border-width);
686
686
  box-sizing: border-box;
687
687
  color: var(--_utrecht-button-color);
688
- cursor: var(--utrecht-action-activate-cursor);
688
+ cursor: var(--utrecht-action-activate-cursor, revert);
689
689
  display: inline-flex;
690
690
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
691
691
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
@@ -710,19 +710,19 @@ however browsers don't seem to have implemented great looking supixel tweening y
710
710
  }
711
711
  .utrecht-html button[type=submit i],
712
712
  .utrecht-html input[type=submit i] {
713
- cursor: var(--utrecht-action-submit-cursor);
713
+ cursor: var(--utrecht-action-submit-cursor, revert);
714
714
  }
715
715
  .utrecht-html button:disabled,
716
716
  .utrecht-html button[aria-disabled=true] {
717
717
  background-color: var(--_utrecht-button-disabled-background-color);
718
718
  border-color: var(--_utrecht-button-disabled-border-color);
719
719
  color: var(--_utrecht-button-disabled-color);
720
- cursor: var(--utrecht-action-disabled-cursor);
720
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
721
721
  }
722
722
  .utrecht-html button[aria-busy=true],
723
723
  .utrecht-html button[aria-disabled=true][aria-busy=true],
724
724
  .utrecht-html button:disabled[aria-busy=true] {
725
- cursor: var(--utrecht-action-busy-cursor);
725
+ cursor: var(--utrecht-action-busy-cursor, wait);
726
726
  }
727
727
  .utrecht-html button:active:not([aria-disabled=true], :disabled) {
728
728
  background-color: var(--_utrecht-button-active-background-color);
@@ -1154,7 +1154,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1154
1154
  border-radius: 50%;
1155
1155
  border-style: solid;
1156
1156
  border-width: var(--_utrecht-radio-button-border-width);
1157
- cursor: var(--utrecht-action-activate-cursor);
1157
+ cursor: var(--utrecht-action-activate-cursor, revert);
1158
1158
  inline-size: var(--utrecht-radio-button-size, 1em);
1159
1159
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
1160
1160
  min-block-size: 24px;
@@ -1213,7 +1213,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1213
1213
  --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
1214
1214
  --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
1215
1215
  --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
1216
- cursor: var(--utrecht-action-disabled-cursor);
1216
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1217
1217
  }
1218
1218
  .utrecht-html input[type=radio i]:invalid, .utrecht-html input[type=radio i][aria-invalid=true] {
1219
1219
  border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
@@ -1339,7 +1339,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1339
1339
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
1340
1340
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
1341
1341
  color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
1342
- cursor: var(--utrecht-action-disabled-cursor);
1342
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1343
1343
  }
1344
1344
  .utrecht-html select[aria-invalid=true] {
1345
1345
  --_utrecht-select-border-width: var(
@@ -1551,7 +1551,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1551
1551
  background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1552
1552
  border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1553
1553
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1554
- cursor: var(--utrecht-action-disabled-cursor);
1554
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1555
1555
  }
1556
1556
  .utrecht-html textarea::placeholder {
1557
1557
  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
@@ -1713,7 +1713,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
1713
1713
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
1714
1714
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
1715
1715
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
1716
- cursor: var(--utrecht-action-disabled-cursor);
1716
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1717
1717
  }
1718
1718
  .utrecht-html input:not([type])::placeholder,
1719
1719
  .utrecht-html input[type=date i]::placeholder,
package/dist/index.css CHANGED
@@ -756,10 +756,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
756
756
  */
757
757
  --_utrecht-breadcrumb-separator-display: inline-flex;
758
758
  --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
759
- --utrecht-icon-color: var(--utrecht-breadcrumb-separator-icon-color);
760
759
  align-items: center;
760
+ color: var(--utrecht-breadcrumb-separator-color);
761
+ cursor: var(--utrecht-action-inert-cursor, default);
761
762
  display: var(--_utrecht-breadcrumb-separator-display);
762
763
  inline-size: fit-content;
764
+ -webkit-user-select: none;
765
+ user-select: none;
763
766
  }
764
767
 
765
768
  .utrecht-breadcrumb__separator--html-li {
@@ -769,10 +772,13 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
769
772
  */
770
773
  --_utrecht-breadcrumb-separator-display: inline-flex;
771
774
  --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
772
- --utrecht-icon-color: var(--utrecht-breadcrumb-separator-icon-color);
773
775
  align-items: center;
776
+ color: var(--utrecht-breadcrumb-separator-color);
777
+ cursor: var(--utrecht-action-inert-cursor, default);
774
778
  display: var(--_utrecht-breadcrumb-separator-display);
775
779
  inline-size: fit-content;
780
+ -webkit-user-select: none;
781
+ user-select: none;
776
782
  }
777
783
 
778
784
  .utrecht-breadcrumb--arrows {
@@ -1064,7 +1070,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1064
1070
  border-width: var(--_utrecht-button-border-width);
1065
1071
  box-sizing: border-box;
1066
1072
  color: var(--_utrecht-button-color);
1067
- cursor: var(--utrecht-action-activate-cursor);
1073
+ cursor: var(--utrecht-action-activate-cursor, revert);
1068
1074
  display: inline-flex;
1069
1075
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
1070
1076
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
@@ -1109,11 +1115,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1109
1115
 
1110
1116
  .utrecht-button--submit {
1111
1117
  /* lower priority specificty than busy and disabled cursor */
1112
- cursor: var(--utrecht-action-submit-cursor);
1118
+ cursor: var(--utrecht-action-submit-cursor, revert);
1113
1119
  }
1114
1120
 
1115
1121
  .utrecht-button--busy {
1116
- cursor: var(--utrecht-action-busy-cursor);
1122
+ cursor: var(--utrecht-action-busy-cursor, wait);
1117
1123
  }
1118
1124
 
1119
1125
  .utrecht-button--pressed {
@@ -1127,7 +1133,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
1127
1133
  background-color: var(--_utrecht-button-disabled-background-color);
1128
1134
  border-color: var(--_utrecht-button-disabled-border-color);
1129
1135
  color: var(--_utrecht-button-disabled-color);
1130
- cursor: var(--utrecht-action-disabled-cursor);
1136
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
1131
1137
  }
1132
1138
 
1133
1139
  .utrecht-button--focus-visible {
@@ -2043,7 +2049,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2043
2049
  border-width: var(--_utrecht-button-border-width);
2044
2050
  box-sizing: border-box;
2045
2051
  color: var(--_utrecht-button-color);
2046
- cursor: var(--utrecht-action-activate-cursor);
2052
+ cursor: var(--utrecht-action-activate-cursor, revert);
2047
2053
  display: inline-flex;
2048
2054
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
2049
2055
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
@@ -2120,7 +2126,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2120
2126
  background-color: var(--_utrecht-button-disabled-background-color);
2121
2127
  border-color: var(--_utrecht-button-disabled-border-color);
2122
2128
  color: var(--_utrecht-button-disabled-color);
2123
- cursor: var(--utrecht-action-disabled-cursor);
2129
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2124
2130
  }
2125
2131
 
2126
2132
  .utrecht-button-link--html-a:focus {
@@ -2354,7 +2360,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2354
2360
  .utrecht-custom-checkbox--disabled {
2355
2361
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2356
2362
  border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
2357
- cursor: var(--utrecht-action-disabled-cursor);
2363
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2358
2364
  }
2359
2365
  .utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
2360
2366
  .utrecht-custom-checkbox--disabled:checked {
@@ -2424,7 +2430,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2424
2430
  .utrecht-custom-checkbox--html-input:disabled {
2425
2431
  border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2426
2432
  border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
2427
- cursor: var(--utrecht-action-disabled-cursor);
2433
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2428
2434
  }
2429
2435
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
2430
2436
  .utrecht-custom-checkbox--html-input:disabled:checked {
@@ -2930,7 +2936,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2930
2936
  border-style: var(--utrecht-form-toggle-border-style, solid);
2931
2937
  border-width: var(--utrecht-form-toggle-border-width, 1px);
2932
2938
  color: var(--utrecht-form-toggle-color);
2933
- cursor: var(--utrecht-action-activate-cursor);
2939
+ cursor: var(--utrecht-action-activate-cursor, revert);
2934
2940
  display: flex;
2935
2941
  inline-size: var(--utrecht-form-toggle-width, 6em);
2936
2942
  padding-block-end: var(--utrecht-form-toggle-padding-block-end);
@@ -2979,7 +2985,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
2979
2985
  border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
2980
2986
  border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
2981
2987
  border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
2982
- cursor: var(--utrecht-action-disabled-cursor);
2988
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2983
2989
  }
2984
2990
 
2985
2991
  .utrecht-form-toggle__thumb {
@@ -3980,22 +3986,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
3980
3986
  * Copyright (c) 2021 Robbert Broersma
3981
3987
  */
3982
3988
  .utrecht-logo {
3989
+ display: block;
3983
3990
  max-block-size: var(--utrecht-logo-max-block-size, 192px);
3984
3991
  max-inline-size: var(--utrecht-logo-max-inline-size, 96px);
3985
3992
  min-block-size: var(--utrecht-logo-min-block-size);
3986
3993
  min-inline-size: var(--utrecht-logo-min-inline-size);
3987
3994
  }
3988
3995
 
3989
- .utrecht-logo__decoration-1 {
3990
- fill: var(--utrecht-logo-decoration-1-color, #fff);
3991
- }
3992
-
3993
- .utrecht-logo__decoration-2 {
3994
- fill: var(--utrecht-logo-decoration-2-color, #c00);
3995
- }
3996
-
3997
- .utrecht-logo__decoration-3 {
3998
- fill: var(--utrecht-logo-decoration-3-color, #ffb70b);
3996
+ /* The element in side `<div class="utrecht-logo">` can be an `<img>`, `<svg>` or even a custom element. */
3997
+ .utrecht-logo > * {
3998
+ block-size: 100%;
3999
+ display: inline-block;
4000
+ inline-size: auto;
3999
4001
  }
4000
4002
 
4001
4003
  /**
@@ -4965,7 +4967,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
4965
4967
  border-radius: 50%;
4966
4968
  border-style: solid;
4967
4969
  border-width: var(--_utrecht-radio-button-border-width);
4968
- cursor: var(--utrecht-action-activate-cursor);
4970
+ cursor: var(--utrecht-action-activate-cursor, revert);
4969
4971
  inline-size: var(--utrecht-radio-button-size, 1em);
4970
4972
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
4971
4973
  min-block-size: 24px;
@@ -5095,7 +5097,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5095
5097
  --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
5096
5098
  --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
5097
5099
  --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
5098
- cursor: var(--utrecht-action-disabled-cursor);
5100
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
5099
5101
  }
5100
5102
 
5101
5103
  .utrecht-radio-button--invalid {
@@ -5154,7 +5156,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5154
5156
  --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
5155
5157
  --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
5156
5158
  --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
5157
- cursor: var(--utrecht-action-disabled-cursor);
5159
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
5158
5160
  }
5159
5161
  .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
5160
5162
  border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
@@ -5362,7 +5364,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5362
5364
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
5363
5365
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
5364
5366
  color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
5365
- cursor: var(--utrecht-action-disabled-cursor);
5367
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
5366
5368
  }
5367
5369
 
5368
5370
  .utrecht-select--focus {
@@ -5432,7 +5434,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5432
5434
  background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
5433
5435
  border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
5434
5436
  color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
5435
- cursor: var(--utrecht-action-disabled-cursor);
5437
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
5436
5438
  }
5437
5439
 
5438
5440
  /**
@@ -5980,7 +5982,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
5980
5982
  background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
5981
5983
  border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
5982
5984
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
5983
- cursor: var(--utrecht-action-disabled-cursor);
5985
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
5984
5986
  }
5985
5987
 
5986
5988
  .utrecht-textarea--focus {
@@ -6067,7 +6069,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
6067
6069
  background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6068
6070
  border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6069
6071
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6070
- cursor: var(--utrecht-action-disabled-cursor);
6072
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6071
6073
  }
6072
6074
  .utrecht-textarea--html-textarea::placeholder {
6073
6075
  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
@@ -6139,7 +6141,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
6139
6141
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6140
6142
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6141
6143
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6142
- cursor: var(--utrecht-action-disabled-cursor);
6144
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6143
6145
  }
6144
6146
 
6145
6147
  .utrecht-textbox--focus {
@@ -6258,7 +6260,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
6258
6260
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
6259
6261
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
6260
6262
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
6261
- cursor: var(--utrecht-action-disabled-cursor);
6263
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
6262
6264
  }
6263
6265
  .utrecht-textbox--html-input::placeholder {
6264
6266
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.571",
2
+ "version": "1.0.0-alpha.574",
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,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "61532825271b92f9a30182fc0a2c24d3147baaf5"
29
+ "gitHead": "8721384851ba6dc9d26d8be86675ec2ac9fc8f85"
30
30
  }