@utrecht/component-library-css 1.0.0-alpha.468 → 1.0.0-alpha.469

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 (2) hide show
  1. package/dist/index.css +61 -61
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -2015,79 +2015,79 @@ ol.utrecht-breadcrumb__list {
2015
2015
  background-position: center;
2016
2016
  background-repeat: no-repeat;
2017
2017
  background-size: contain;
2018
- border-color: var(--utrecht-custom-checkbox-border-color);
2018
+ border-color: var(--utrecht-checkbox-border-color);
2019
2019
  border-style: solid;
2020
- border-width: var(--utrecht-custom-checkbox-border-width);
2020
+ border-width: var(--utrecht-checkbox-border-width);
2021
2021
  cursor: var(--utrecht-action-activate-cursor, revert);
2022
- height: var(--utrecht-custom-checkbox-size);
2023
- margin-block-start: var(--utrecht-custom-checkbox-margin-block-start);
2022
+ height: var(--utrecht-checkbox-size);
2023
+ margin-block-start: var(--utrecht-checkbox-margin-block-start);
2024
2024
  -webkit-print-color-adjust: exact;
2025
2025
  print-color-adjust: exact;
2026
2026
  vertical-align: top;
2027
- width: var(--utrecht-custom-checkbox-size);
2027
+ width: var(--utrecht-checkbox-size);
2028
2028
  }
2029
2029
 
2030
2030
  .utrecht-checkbox--custom.utrecht-checkbox--checked,
2031
2031
  .utrecht-custom-checkbox--checked {
2032
- background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
2032
+ background-color: var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));
2033
2033
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2034
- border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
2035
- border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
2034
+ border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
2035
+ border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
2036
2036
  }
2037
2037
 
2038
2038
  .utrecht-checkbox--custom.utrecht-checkbox--disabled,
2039
2039
  .utrecht-custom-checkbox--disabled {
2040
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
2041
- border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
2040
+ border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2041
+ border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
2042
2042
  cursor: var(--utrecht-action-disabled-cursor);
2043
2043
  }
2044
2044
  .utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,
2045
2045
  .utrecht-custom-checkbox--disabled:checked {
2046
- background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
2047
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
2046
+ background-color: var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));
2047
+ border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2048
2048
  }
2049
2049
  .utrecht-checkbox--custom.utrecht-checkbox--disabled:active,
2050
2050
  .utrecht-custom-checkbox--disabled:active {
2051
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
2051
+ border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2052
2052
  }
2053
2053
 
2054
2054
  .utrecht-checkbox--custom.utrecht-checkbox--indeterminate,
2055
2055
  .utrecht-custom-checkbox--indeterminate {
2056
- background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
2056
+ background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
2057
2057
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
2058
- border-color: var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));
2059
- border-width: var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));
2060
- color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
2058
+ border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
2059
+ border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2060
+ color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2061
2061
  }
2062
2062
 
2063
2063
  .utrecht-checkbox--custom.utrecht-checkbox--invalid,
2064
2064
  .utrecht-custom-checkbox--invalid {
2065
- border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
2066
- border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
2065
+ border-color: var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));
2066
+ border-width: var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width));
2067
2067
  }
2068
2068
 
2069
2069
  .utrecht-checkbox--custom.utrecht-checkbox--active,
2070
2070
  .utrecht-custom-checkbox--active {
2071
- background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
2071
+ background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2072
2072
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2073
- border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
2074
- border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
2075
- color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
2073
+ border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2074
+ border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2075
+ color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
2076
2076
  }
2077
2077
 
2078
2078
  .utrecht-checkbox--custom.utrecht-checkbox--hover,
2079
2079
  .utrecht-custom-checkbox--hover {
2080
- background-color: var(--utrecht-custom-checkbox-hover-background-color, var(--utrecht-custom-checkbox-background-color));
2081
- border-color: var(--utrecht-custom-checkbox-hover-border-color, var(--utrecht-custom-checkbox-border-color));
2082
- border-width: var(--utrecht-custom-checkbox-hover-border-width, var(--utrecht-custom-checkbox-border-width));
2080
+ background-color: var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));
2081
+ border-color: var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));
2082
+ border-width: var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width));
2083
2083
  }
2084
2084
 
2085
2085
  .utrecht-checkbox--custom.utrecht-checkbox--focus,
2086
2086
  .utrecht-custom-checkbox--focus {
2087
- background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
2087
+ background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2088
2088
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2089
- border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
2090
- border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
2089
+ border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2090
+ border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2091
2091
  }
2092
2092
 
2093
2093
  .utrecht-checkbox--custom.utrecht-checkbox--focus-visible,
@@ -2107,31 +2107,31 @@ ol.utrecht-breadcrumb__list {
2107
2107
 
2108
2108
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
2109
2109
  .utrecht-custom-checkbox--html-input:disabled {
2110
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
2111
- border-width: var(--utrecht-custom-checkbox-disabled-border-width, var(--utrecht-custom-checkbox-border-width));
2110
+ border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2111
+ border-width: var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));
2112
2112
  cursor: var(--utrecht-action-disabled-cursor);
2113
2113
  }
2114
2114
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,
2115
2115
  .utrecht-custom-checkbox--html-input:disabled:checked {
2116
- background-color: var(--utrecht-custom-checkbox-disabled-background-color, var(--utrecht-custom-checkbox-background-color));
2117
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
2116
+ background-color: var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));
2117
+ border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2118
2118
  }
2119
2119
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,
2120
2120
  .utrecht-custom-checkbox--html-input:disabled:active {
2121
- border-color: var(--utrecht-custom-checkbox-disabled-border-color, var(--utrecht-custom-checkbox-border-color));
2121
+ border-color: var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));
2122
2122
  }
2123
2123
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,
2124
2124
  .utrecht-custom-checkbox--html-input:hover {
2125
- background-color: var(--utrecht-custom-checkbox-hover-background-color, var(--utrecht-custom-checkbox-background-color));
2126
- border-color: var(--utrecht-custom-checkbox-hover-border-color, var(--utrecht-custom-checkbox-border-color));
2127
- border-width: var(--utrecht-custom-checkbox-hover-border-width, var(--utrecht-custom-checkbox-border-width));
2125
+ background-color: var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));
2126
+ border-color: var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));
2127
+ border-width: var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width));
2128
2128
  }
2129
2129
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,
2130
2130
  .utrecht-custom-checkbox--html-input:focus {
2131
- background-color: var(--utrecht-custom-checkbox-focus-background-color, var(--utrecht-custom-checkbox-background-color));
2131
+ background-color: var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));
2132
2132
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2133
- border-color: var(--utrecht-custom-checkbox-focus-border-color, var(--utrecht-custom-checkbox-border-color));
2134
- border-width: var(--utrecht-custom-checkbox-focus-border-width, var(--utrecht-custom-checkbox-border-width));
2133
+ border-color: var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));
2134
+ border-width: var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width));
2135
2135
  }
2136
2136
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,
2137
2137
  .utrecht-custom-checkbox--html-input:focus-visible {
@@ -2150,31 +2150,31 @@ ol.utrecht-breadcrumb__list {
2150
2150
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
2151
2151
  .utrecht-custom-checkbox--html-input:invalid,
2152
2152
  .utrecht-custom-checkbox--html-input[aria-invalid=true] {
2153
- border-color: var(--utrecht-custom-checkbox-invalid-border-color, var(--utrecht-custom-checkbox-border-color));
2154
- border-width: var(--utrecht-custom-checkbox-invalid-border-width, var(--utrecht-custom-checkbox-border-width));
2153
+ border-color: var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));
2154
+ border-width: var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width));
2155
2155
  }
2156
2156
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:active,
2157
2157
  .utrecht-custom-checkbox--html-input:active {
2158
- background-color: var(--utrecht-custom-checkbox-active-background-color, var(--utrecht-custom-checkbox-background-color));
2158
+ background-color: var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));
2159
2159
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2160
- border-color: var(--utrecht-custom-checkbox-active-border-color, var(--utrecht-custom-checkbox-border-color));
2161
- border-width: var(--utrecht-custom-checkbox-active-border-width, var(--utrecht-custom-checkbox-border-width));
2162
- color: var(--utrecht-custom-checkbox-active-color, var(--utrecht-custom-checkbox-color));
2160
+ border-color: var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));
2161
+ border-width: var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));
2162
+ color: var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color));
2163
2163
  }
2164
2164
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,
2165
2165
  .utrecht-custom-checkbox--html-input:checked {
2166
- background-color: var(--utrecht-custom-checkbox-checked-background-color, var(--utrecht-custom-checkbox-background-color));
2166
+ background-color: var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));
2167
2167
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2168
- border-color: var(--utrecht-custom-checkbox-checked-border-color, var(--utrecht-custom-checkbox-border-color));
2169
- border-width: var(--utrecht-custom-checkbox-checked-border-width, var(--utrecht-custom-checkbox-border-width));
2168
+ border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));
2169
+ border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width));
2170
2170
  }
2171
2171
  .utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,
2172
2172
  .utrecht-custom-checkbox--html-input:indeterminate {
2173
- background-color: var(--utrecht-custom-checkbox-indeterminate-background-color, var(--utrecht-custom-checkbox-background-color));
2173
+ background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));
2174
2174
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
2175
- border-color: var(--utrecht-custom-checkbox-indeterminate-border-color, var(--utrecht-custom-checkbox-border-color));
2176
- border-width: var(--utrecht-custom-checkbox-indeterminate-border-width, var(--utrecht-custom-checkbox-border-width));
2177
- color: var(--utrecht-custom-checkbox-indeterminate-color, var(--utrecht-custom-checkbox-color));
2175
+ border-color: var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));
2176
+ border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2177
+ color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2178
2178
  }
2179
2179
 
2180
2180
  /**
@@ -2385,23 +2385,23 @@ ol.utrecht-breadcrumb__list {
2385
2385
 
2386
2386
  .utrecht-form-field--checkbox {
2387
2387
  display: grid;
2388
- gap: 0 var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2388
+ gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
2389
2389
  grid-template-areas: "input label" "input description" "input description-invalid";
2390
- grid-template-columns: var(--utrecht-custom-checkbox-size) 100fr;
2390
+ grid-template-columns: var(--utrecht-checkbox-size) 100fr;
2391
2391
  /*
2392
2392
  .utrecht-form-field__label .utrecht-form-field__input {
2393
2393
  margin-inline-start: calc(
2394
- -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
2394
+ -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
2395
2395
  );
2396
- margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2396
+ margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
2397
2397
  }
2398
2398
  */
2399
2399
  }
2400
2400
  .utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
2401
- margin-inline-start: calc(-1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px)));
2401
+ margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
2402
2402
  }
2403
2403
  .utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
2404
- margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2404
+ margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
2405
2405
  }
2406
2406
 
2407
2407
  .utrecht-form-field--radio {
@@ -2412,9 +2412,9 @@ ol.utrecht-breadcrumb__list {
2412
2412
  /*
2413
2413
  .utrecht-form-field__label .utrecht-form-field__input {
2414
2414
  margin-inline-start: calc(
2415
- -1 * (var(--utrecht-custom-checkbox-size) + var(--utrecht-custom-checkbox-margin-inline-end, 12px))
2415
+ -1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))
2416
2416
  );
2417
- margin-inline-end: var(--utrecht-custom-checkbox-margin-inline-end, 12px);
2417
+ margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
2418
2418
  }
2419
2419
  */
2420
2420
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.468",
2
+ "version": "1.0.0-alpha.469",
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": "ab1198e77704372e93f7caaba6a675aefc3327a8"
29
+ "gitHead": "000092dda0cf2bdcad3367a3ac014f118ddf62f1"
30
30
  }