@utrecht/web-component-library-stencil 1.0.0-alpha.9 → 1.0.0-alpha.93

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 (418) hide show
  1. package/README.md +28 -0
  2. package/dist/article/stencil.d.ts +3 -0
  3. package/dist/article/stencil.js +1 -1
  4. package/dist/badge-counter/stencil.d.ts +6 -0
  5. package/dist/badge-counter/stencil.js +1 -1
  6. package/dist/badge-data/stencil.d.ts +3 -0
  7. package/dist/badge-data/stencil.js +1 -1
  8. package/dist/badge-status/stencil.d.ts +4 -0
  9. package/dist/badge-status/stencil.js +1 -1
  10. package/dist/breadcrumb/stencil.d.ts +5 -0
  11. package/dist/breadcrumb/stencil.js +38 -0
  12. package/dist/button/stencil.d.ts +10 -0
  13. package/dist/button/stencil.js +40 -3
  14. package/dist/checkbox/stencil.d.ts +16 -0
  15. package/dist/checkbox/stencil.js +59 -0
  16. package/dist/cjs/{index-04d7da5a.js → index-b96d9af7.js} +213 -25
  17. package/dist/cjs/loader.cjs.js +3 -3
  18. package/dist/cjs/utrecht-article.cjs.entry.js +3 -3
  19. package/dist/cjs/utrecht-badge-counter.cjs.entry.js +3 -3
  20. package/dist/cjs/utrecht-badge-data.cjs.entry.js +3 -3
  21. package/dist/cjs/utrecht-badge-status.cjs.entry.js +3 -3
  22. package/dist/cjs/utrecht-breadcrumb.cjs.entry.js +23 -0
  23. package/dist/cjs/utrecht-button_2.cjs.entry.js +58 -0
  24. package/dist/cjs/utrecht-checkbox.cjs.entry.js +32 -0
  25. package/dist/cjs/utrecht-contact-card-template.cjs.entry.js +19 -0
  26. package/dist/cjs/utrecht-digid-button.cjs.entry.js +19 -0
  27. package/dist/cjs/utrecht-document.cjs.entry.js +3 -3
  28. package/dist/cjs/utrecht-eherkenning-logo.cjs.entry.js +19 -0
  29. package/dist/cjs/utrecht-eidas-logo.cjs.entry.js +19 -0
  30. package/dist/cjs/utrecht-form-field-checkbox.cjs.entry.js +34 -0
  31. package/dist/cjs/utrecht-form-field-description.cjs.entry.js +22 -0
  32. package/dist/cjs/utrecht-form-field-textarea.cjs.entry.js +34 -0
  33. package/dist/cjs/utrecht-form-field-textbox.cjs.entry.js +39 -0
  34. package/dist/cjs/utrecht-form-toggle.cjs.entry.js +49 -0
  35. package/dist/cjs/utrecht-heading-1.cjs.entry.js +19 -0
  36. package/dist/cjs/utrecht-heading-2_3.cjs.entry.js +46 -0
  37. package/dist/cjs/utrecht-heading-4.cjs.entry.js +19 -0
  38. package/dist/cjs/utrecht-heading-5.cjs.entry.js +19 -0
  39. package/dist/cjs/utrecht-heading-6.cjs.entry.js +19 -0
  40. package/dist/cjs/utrecht-heading.cjs.entry.js +3 -3
  41. package/dist/cjs/utrecht-html-content.cjs.entry.js +3 -3
  42. package/dist/cjs/utrecht-icon-arrow.cjs.entry.js +19 -0
  43. package/dist/cjs/utrecht-icon-cross.cjs.entry.js +19 -0
  44. package/dist/cjs/utrecht-icon-facebook.cjs.entry.js +19 -0
  45. package/dist/cjs/utrecht-icon-filter.cjs.entry.js +19 -0
  46. package/dist/cjs/utrecht-icon-instagram.cjs.entry.js +19 -0
  47. package/dist/cjs/utrecht-icon-linkedin.cjs.entry.js +19 -0
  48. package/dist/cjs/utrecht-icon-list.cjs.entry.js +19 -0
  49. package/dist/cjs/utrecht-icon-loupe.cjs.entry.js +19 -0
  50. package/dist/cjs/utrecht-icon-twitter.cjs.entry.js +19 -0
  51. package/dist/cjs/utrecht-icon-whatsapp.cjs.entry.js +19 -0
  52. package/dist/cjs/utrecht-icon-zoomin.cjs.entry.js +19 -0
  53. package/dist/cjs/utrecht-icon-zoomout.cjs.entry.js +19 -0
  54. package/dist/cjs/utrecht-logo-button.cjs.entry.js +19 -0
  55. package/dist/cjs/utrecht-logo.cjs.entry.js +19 -0
  56. package/dist/cjs/utrecht-page-footer.cjs.entry.js +3 -3
  57. package/dist/cjs/utrecht-pagination.cjs.entry.js +38 -0
  58. package/dist/cjs/utrecht-separator.cjs.entry.js +3 -3
  59. package/dist/cjs/utrecht-sidenav.cjs.entry.js +21 -0
  60. package/dist/cjs/utrecht-textbox.cjs.entry.js +39 -0
  61. package/dist/cjs/utrecht.cjs.js +3 -3
  62. package/dist/collection/alternate-lang-link/bem.js +21 -0
  63. package/dist/collection/alternate-lang-nav/bem.js +12 -0
  64. package/dist/collection/article/bem.js +6 -0
  65. package/dist/collection/article/{bem.css → stencil.css} +12 -1
  66. package/dist/collection/article/stencil.js +2 -2
  67. package/dist/collection/badge-counter/bem.js +7 -0
  68. package/dist/collection/badge-counter/{bem.css → stencil.css} +13 -0
  69. package/dist/collection/badge-counter/stencil.js +2 -2
  70. package/dist/collection/badge-data/bem.js +6 -0
  71. package/dist/collection/badge-data/{bem.css → stencil.css} +13 -0
  72. package/dist/collection/badge-data/stencil.js +2 -2
  73. package/dist/collection/badge-status/bem.js +7 -0
  74. package/dist/collection/badge-status/{bem.css → stencil.css} +18 -0
  75. package/dist/collection/badge-status/stencil.js +2 -2
  76. package/dist/collection/blockquote/bem.js +24 -0
  77. package/dist/collection/breadcrumb/bem.js +34 -0
  78. package/dist/collection/breadcrumb/stencil.css +148 -0
  79. package/dist/collection/breadcrumb/stencil.js +62 -0
  80. package/dist/collection/button/bem.js +34 -0
  81. package/dist/collection/button/html.js +16 -0
  82. package/dist/collection/button/{bem.css → stencil.css} +56 -19
  83. package/dist/collection/button/stencil.js +92 -4
  84. package/dist/collection/checkbox/bem.js +18 -0
  85. package/dist/collection/checkbox/stencil.css +27 -0
  86. package/dist/collection/checkbox/stencil.js +164 -0
  87. package/dist/collection/collection-manifest.json +37 -2
  88. package/dist/collection/digid-button/bem.js +16 -0
  89. package/dist/collection/digid-button/stencil.css +31 -0
  90. package/dist/collection/digid-button/stencil.js +41 -0
  91. package/dist/collection/digid-logo/stencil.css +18 -0
  92. package/dist/collection/digid-logo/stencil.js +23 -0
  93. package/dist/collection/document/{bem.css → stencil.css} +12 -1
  94. package/dist/collection/document/stencil.js +2 -2
  95. package/dist/collection/eherkenning-logo/stencil.css +18 -0
  96. package/dist/collection/eherkenning-logo/stencil.js +26 -0
  97. package/dist/collection/eidas-logo/stencil.css +18 -0
  98. package/dist/collection/eidas-logo/stencil.js +28 -0
  99. package/dist/collection/emphasis/bem.js +19 -0
  100. package/dist/collection/form-field-checkbox/bem.js +10 -0
  101. package/dist/collection/form-field-checkbox/stencil.css +76 -0
  102. package/dist/collection/form-field-checkbox/stencil.js +190 -0
  103. package/dist/collection/form-field-checkbox-group/bem.js +33 -0
  104. package/dist/collection/form-field-description/bem.js +14 -0
  105. package/dist/collection/form-field-description/stencil.css +33 -0
  106. package/dist/collection/form-field-description/stencil.js +44 -0
  107. package/dist/collection/form-field-radio/bem.js +10 -0
  108. package/dist/collection/form-field-radio-group/bem.js +20 -0
  109. package/dist/collection/form-field-textarea/stencil.css +112 -0
  110. package/dist/collection/form-field-textarea/stencil.js +205 -0
  111. package/dist/collection/form-field-textbox/stencil.css +106 -0
  112. package/dist/collection/form-field-textbox/stencil.js +300 -0
  113. package/dist/collection/form-fieldset/bem.js +10 -0
  114. package/dist/collection/form-label/bem.js +22 -0
  115. package/dist/collection/form-toggle/bem.js +47 -0
  116. package/dist/collection/form-toggle/stencil.css +115 -0
  117. package/dist/collection/form-toggle/stencil.js +149 -0
  118. package/dist/collection/heading/{bem.css → stencil.css} +72 -37
  119. package/dist/collection/heading/stencil.js +2 -2
  120. package/dist/collection/heading-1/bem.js +11 -0
  121. package/dist/collection/heading-1/stencil.css +34 -0
  122. package/dist/collection/heading-1/stencil.js +15 -0
  123. package/dist/collection/heading-2/bem.js +11 -0
  124. package/dist/collection/heading-2/stencil.css +34 -0
  125. package/dist/collection/heading-2/stencil.js +15 -0
  126. package/dist/collection/heading-3/bem.js +11 -0
  127. package/dist/collection/heading-3/stencil.css +34 -0
  128. package/dist/collection/heading-3/stencil.js +15 -0
  129. package/dist/collection/heading-4/bem.js +11 -0
  130. package/dist/collection/heading-4/stencil.css +34 -0
  131. package/dist/collection/heading-4/stencil.js +15 -0
  132. package/dist/collection/heading-5/bem.js +11 -0
  133. package/dist/collection/heading-5/stencil.css +34 -0
  134. package/dist/collection/heading-5/stencil.js +15 -0
  135. package/dist/collection/heading-6/bem.js +11 -0
  136. package/dist/collection/heading-6/stencil.css +34 -0
  137. package/dist/collection/heading-6/stencil.js +15 -0
  138. package/dist/collection/html-content/{html.css → stencil.css} +406 -140
  139. package/dist/collection/html-content/stencil.js +2 -2
  140. package/dist/collection/icon/arrow.stencil.js +17 -0
  141. package/dist/collection/icon/cross.stencil.js +17 -0
  142. package/dist/collection/icon/facebook.stencil.js +17 -0
  143. package/dist/collection/icon/filter.stencil.js +18 -0
  144. package/dist/collection/icon/instagram.stencil.js +19 -0
  145. package/dist/collection/icon/linkedin.stencil.js +18 -0
  146. package/dist/collection/icon/list.stencil.js +21 -0
  147. package/dist/collection/icon/loupe.stencil.js +17 -0
  148. package/dist/collection/icon/stencil.css +20 -0
  149. package/dist/collection/icon/twitter.stencil.js +17 -0
  150. package/dist/collection/icon/whatsapp.stencil.js +17 -0
  151. package/dist/collection/icon/zoomin.stencil.js +18 -0
  152. package/dist/collection/icon/zoomout.stencil.js +17 -0
  153. package/dist/collection/link/bem.js +38 -0
  154. package/dist/collection/link-list/bem.js +10 -0
  155. package/dist/collection/link-social/bem.js +20 -0
  156. package/dist/collection/logo/bem.js +33 -0
  157. package/dist/collection/logo/stencil.css +28 -0
  158. package/dist/collection/logo/stencil.js +26 -0
  159. package/dist/collection/logo-button/bem.js +17 -0
  160. package/dist/collection/logo-button/stencil.css +31 -0
  161. package/dist/collection/logo-button/stencil.js +41 -0
  162. package/dist/collection/mapcontrolbutton/bem.js +25 -0
  163. package/dist/collection/menulijst/bem.js +18 -0
  164. package/dist/collection/nav-top/bem.js +23 -0
  165. package/dist/collection/navigatie sidenav/bem.css +240 -0
  166. package/dist/collection/navigatie sidenav/bem.js +43 -0
  167. package/dist/collection/navigatie sidenav/stencil.js +40 -0
  168. package/dist/collection/navigatie topnav/bem.js +25 -0
  169. package/dist/collection/ordered-list/bem.js +11 -0
  170. package/dist/collection/page-footer/bem.js +7 -0
  171. package/dist/collection/page-footer/{bem.css → stencil.css} +22 -12
  172. package/dist/collection/page-footer/stencil.js +2 -2
  173. package/dist/collection/pagination/bem.js +54 -0
  174. package/dist/collection/pagination/stencil.css +118 -0
  175. package/dist/collection/pagination/stencil.js +110 -0
  176. package/dist/collection/paragraph/bem.js +17 -0
  177. package/dist/collection/paragraph/{bem.css → stencil.css} +17 -2
  178. package/dist/collection/paragraph/stencil.js +2 -2
  179. package/dist/collection/pre-heading/bem.js +15 -0
  180. package/dist/collection/radio-button/bem.js +18 -0
  181. package/dist/collection/search-bar/bem.js +15 -0
  182. package/dist/collection/select/bem.js +38 -0
  183. package/dist/collection/separator/bem.js +16 -0
  184. package/dist/collection/separator/{bem.css → stencil.css} +18 -4
  185. package/dist/collection/separator/stencil.js +2 -2
  186. package/dist/collection/templates/contact-card-template/stencil.css +88 -0
  187. package/dist/collection/templates/contact-card-template/stencil.js +25 -0
  188. package/dist/collection/textarea/bem.js +32 -0
  189. package/dist/collection/textarea/html.js +22 -0
  190. package/dist/collection/textbox/bem.js +34 -0
  191. package/dist/collection/textbox/stencil.css +70 -0
  192. package/dist/collection/textbox/stencil.js +297 -0
  193. package/dist/collection/unordered-list/bem.js +28 -0
  194. package/dist/custom-elements/index.d.ts +210 -0
  195. package/dist/custom-elements/index.js +742 -26
  196. package/dist/digid-button/stencil.d.ts +9 -0
  197. package/dist/digid-button/stencil.js +31 -0
  198. package/dist/digid-logo/stencil.d.ts +8 -0
  199. package/dist/digid-logo/stencil.js +29 -0
  200. package/dist/document/stencil.d.ts +3 -0
  201. package/dist/document/stencil.js +1 -1
  202. package/dist/eherkenning-logo/stencil.d.ts +8 -0
  203. package/dist/eherkenning-logo/stencil.js +32 -0
  204. package/dist/eidas-logo/stencil.d.ts +8 -0
  205. package/dist/eidas-logo/stencil.js +34 -0
  206. package/dist/esm/{index-7fbac151.js → index-26eb3bc0.js} +212 -26
  207. package/dist/esm/loader.js +3 -3
  208. package/dist/esm/utrecht-article.entry.js +3 -3
  209. package/dist/esm/utrecht-badge-counter.entry.js +3 -3
  210. package/dist/esm/utrecht-badge-data.entry.js +3 -3
  211. package/dist/esm/utrecht-badge-status.entry.js +3 -3
  212. package/dist/esm/utrecht-breadcrumb.entry.js +19 -0
  213. package/dist/esm/utrecht-button_2.entry.js +53 -0
  214. package/dist/esm/utrecht-checkbox.entry.js +28 -0
  215. package/dist/esm/utrecht-contact-card-template.entry.js +15 -0
  216. package/dist/esm/utrecht-digid-button.entry.js +15 -0
  217. package/dist/esm/utrecht-document.entry.js +3 -3
  218. package/dist/esm/utrecht-eherkenning-logo.entry.js +15 -0
  219. package/dist/esm/utrecht-eidas-logo.entry.js +15 -0
  220. package/dist/esm/utrecht-form-field-checkbox.entry.js +30 -0
  221. package/dist/esm/utrecht-form-field-description.entry.js +18 -0
  222. package/dist/esm/utrecht-form-field-textarea.entry.js +30 -0
  223. package/dist/esm/utrecht-form-field-textbox.entry.js +35 -0
  224. package/dist/esm/utrecht-form-toggle.entry.js +45 -0
  225. package/dist/esm/utrecht-heading-1.entry.js +15 -0
  226. package/dist/esm/utrecht-heading-2_3.entry.js +40 -0
  227. package/dist/esm/utrecht-heading-4.entry.js +15 -0
  228. package/dist/esm/utrecht-heading-5.entry.js +15 -0
  229. package/dist/esm/utrecht-heading-6.entry.js +15 -0
  230. package/dist/esm/utrecht-heading.entry.js +3 -3
  231. package/dist/esm/utrecht-html-content.entry.js +3 -3
  232. package/dist/esm/utrecht-icon-arrow.entry.js +15 -0
  233. package/dist/esm/utrecht-icon-cross.entry.js +15 -0
  234. package/dist/esm/utrecht-icon-facebook.entry.js +15 -0
  235. package/dist/esm/utrecht-icon-filter.entry.js +15 -0
  236. package/dist/esm/utrecht-icon-instagram.entry.js +15 -0
  237. package/dist/esm/utrecht-icon-linkedin.entry.js +15 -0
  238. package/dist/esm/utrecht-icon-list.entry.js +15 -0
  239. package/dist/esm/utrecht-icon-loupe.entry.js +15 -0
  240. package/dist/esm/utrecht-icon-twitter.entry.js +15 -0
  241. package/dist/esm/utrecht-icon-whatsapp.entry.js +15 -0
  242. package/dist/esm/utrecht-icon-zoomin.entry.js +15 -0
  243. package/dist/esm/utrecht-icon-zoomout.entry.js +15 -0
  244. package/dist/esm/utrecht-logo-button.entry.js +15 -0
  245. package/dist/esm/utrecht-logo.entry.js +15 -0
  246. package/dist/esm/utrecht-page-footer.entry.js +3 -3
  247. package/dist/esm/utrecht-pagination.entry.js +34 -0
  248. package/dist/esm/utrecht-separator.entry.js +3 -3
  249. package/dist/esm/utrecht-sidenav.entry.js +17 -0
  250. package/dist/esm/utrecht-textbox.entry.js +35 -0
  251. package/dist/esm/utrecht.js +3 -3
  252. package/dist/form-field-checkbox/stencil.d.ts +18 -0
  253. package/dist/form-field-checkbox/stencil.js +70 -0
  254. package/dist/form-field-description/stencil.d.ts +8 -0
  255. package/dist/form-field-description/stencil.js +33 -0
  256. package/dist/form-field-textarea/stencil.d.ts +18 -0
  257. package/dist/form-field-textarea/stencil.js +70 -0
  258. package/dist/form-field-textbox/stencil.d.ts +23 -0
  259. package/dist/form-field-textbox/stencil.js +90 -0
  260. package/dist/form-toggle/stencil.d.ts +14 -0
  261. package/dist/form-toggle/stencil.js +74 -0
  262. package/dist/heading/stencil.d.ts +7 -0
  263. package/dist/heading/stencil.js +1 -1
  264. package/dist/heading-1/stencil.d.ts +3 -0
  265. package/dist/heading-1/stencil.js +21 -0
  266. package/dist/heading-2/stencil.d.ts +3 -0
  267. package/dist/heading-2/stencil.js +21 -0
  268. package/dist/heading-3/stencil.d.ts +3 -0
  269. package/dist/heading-3/stencil.js +21 -0
  270. package/dist/heading-4/stencil.d.ts +3 -0
  271. package/dist/heading-4/stencil.js +21 -0
  272. package/dist/heading-5/stencil.d.ts +3 -0
  273. package/dist/heading-5/stencil.js +21 -0
  274. package/dist/heading-6/stencil.d.ts +3 -0
  275. package/dist/heading-6/stencil.js +21 -0
  276. package/dist/html-content/stencil.d.ts +3 -0
  277. package/dist/html-content/stencil.js +1 -1
  278. package/dist/icon/arrow.stencil.d.ts +3 -0
  279. package/dist/icon/arrow.stencil.js +23 -0
  280. package/dist/icon/cross.stencil.d.ts +3 -0
  281. package/dist/icon/cross.stencil.js +23 -0
  282. package/dist/icon/facebook.stencil.d.ts +3 -0
  283. package/dist/icon/facebook.stencil.js +23 -0
  284. package/dist/icon/filter.stencil.d.ts +3 -0
  285. package/dist/icon/filter.stencil.js +24 -0
  286. package/dist/icon/instagram.stencil.d.ts +3 -0
  287. package/dist/icon/instagram.stencil.js +25 -0
  288. package/dist/icon/linkedin.stencil.d.ts +3 -0
  289. package/dist/icon/linkedin.stencil.js +24 -0
  290. package/dist/icon/list.stencil.d.ts +3 -0
  291. package/dist/icon/list.stencil.js +27 -0
  292. package/dist/icon/loupe.stencil.d.ts +3 -0
  293. package/dist/icon/loupe.stencil.js +23 -0
  294. package/dist/icon/twitter.stencil.d.ts +3 -0
  295. package/dist/icon/twitter.stencil.js +23 -0
  296. package/dist/icon/whatsapp.stencil.d.ts +3 -0
  297. package/dist/icon/whatsapp.stencil.js +23 -0
  298. package/dist/icon/zoomin.stencil.d.ts +3 -0
  299. package/dist/icon/zoomin.stencil.js +24 -0
  300. package/dist/icon/zoomout.stencil.d.ts +3 -0
  301. package/dist/icon/zoomout.stencil.js +23 -0
  302. package/dist/logo/stencil.d.ts +7 -0
  303. package/dist/logo/stencil.js +32 -0
  304. package/dist/logo-button/stencil.d.ts +9 -0
  305. package/dist/logo-button/stencil.js +31 -0
  306. package/dist/navigatie sidenav/stencil.d.ts +4 -0
  307. package/dist/navigatie sidenav/stencil.js +30 -0
  308. package/dist/page-footer/stencil.d.ts +7 -0
  309. package/dist/page-footer/stencil.js +1 -1
  310. package/dist/pagination/stencil.d.ts +11 -0
  311. package/dist/pagination/stencil.js +58 -0
  312. package/dist/paragraph/stencil.d.ts +7 -0
  313. package/dist/paragraph/stencil.js +1 -1
  314. package/dist/separator/stencil.d.ts +3 -0
  315. package/dist/separator/stencil.js +1 -1
  316. package/dist/templates/contact-card-template/stencil.d.ts +3 -0
  317. package/dist/templates/contact-card-template/stencil.js +31 -0
  318. package/dist/textbox/stencil.d.ts +23 -0
  319. package/dist/textbox/stencil.js +87 -0
  320. package/dist/types/breadcrumb/stencil.d.ts +5 -0
  321. package/dist/types/button/stencil.d.ts +6 -0
  322. package/dist/types/checkbox/stencil.d.ts +16 -0
  323. package/dist/types/components.d.ts +583 -0
  324. package/dist/types/digid-button/stencil.d.ts +9 -0
  325. package/dist/types/digid-logo/stencil.d.ts +8 -0
  326. package/dist/types/eherkenning-logo/stencil.d.ts +8 -0
  327. package/dist/types/eidas-logo/stencil.d.ts +8 -0
  328. package/dist/types/form-field-checkbox/stencil.d.ts +18 -0
  329. package/dist/types/form-field-description/stencil.d.ts +8 -0
  330. package/dist/types/form-field-textarea/stencil.d.ts +18 -0
  331. package/dist/types/form-field-textbox/stencil.d.ts +23 -0
  332. package/dist/types/form-toggle/stencil.d.ts +14 -0
  333. package/dist/types/heading-1/stencil.d.ts +3 -0
  334. package/dist/types/heading-2/stencil.d.ts +3 -0
  335. package/dist/types/heading-3/stencil.d.ts +3 -0
  336. package/dist/types/heading-4/stencil.d.ts +3 -0
  337. package/dist/types/heading-5/stencil.d.ts +3 -0
  338. package/dist/types/heading-6/stencil.d.ts +3 -0
  339. package/dist/types/icon/arrow.stencil.d.ts +3 -0
  340. package/dist/types/icon/cross.stencil.d.ts +3 -0
  341. package/dist/types/icon/facebook.stencil.d.ts +3 -0
  342. package/dist/types/icon/filter.stencil.d.ts +3 -0
  343. package/dist/types/icon/instagram.stencil.d.ts +3 -0
  344. package/dist/types/icon/linkedin.stencil.d.ts +3 -0
  345. package/dist/types/icon/list.stencil.d.ts +3 -0
  346. package/dist/types/icon/loupe.stencil.d.ts +3 -0
  347. package/dist/types/icon/twitter.stencil.d.ts +3 -0
  348. package/dist/types/icon/whatsapp.stencil.d.ts +3 -0
  349. package/dist/types/icon/zoomin.stencil.d.ts +3 -0
  350. package/dist/types/icon/zoomout.stencil.d.ts +3 -0
  351. package/dist/types/logo/stencil.d.ts +7 -0
  352. package/dist/types/logo-button/stencil.d.ts +9 -0
  353. package/dist/types/navigatie sidenav/stencil.d.ts +4 -0
  354. package/dist/types/pagination/stencil.d.ts +11 -0
  355. package/dist/types/stencil-public-runtime.d.ts +183 -182
  356. package/dist/types/templates/contact-card-template/stencil.d.ts +3 -0
  357. package/dist/types/textbox/stencil.d.ts +23 -0
  358. package/dist/utrecht/p-023706f2.entry.js +1 -0
  359. package/dist/utrecht/p-03fb5385.entry.js +1 -0
  360. package/dist/utrecht/p-0b5df266.entry.js +1 -0
  361. package/dist/utrecht/p-13e4e5e9.entry.js +1 -0
  362. package/dist/utrecht/p-17bfa2b7.js +1 -0
  363. package/dist/utrecht/p-201a5ed5.entry.js +1 -0
  364. package/dist/utrecht/p-22ccf8ac.entry.js +1 -0
  365. package/dist/utrecht/p-307b38ed.entry.js +1 -0
  366. package/dist/utrecht/p-3ba93737.entry.js +1 -0
  367. package/dist/utrecht/p-3f4d1a2b.entry.js +1 -0
  368. package/dist/utrecht/p-48e2e522.entry.js +1 -0
  369. package/dist/utrecht/p-56879b89.entry.js +1 -0
  370. package/dist/utrecht/p-5a8cd573.entry.js +1 -0
  371. package/dist/utrecht/p-5b773973.entry.js +1 -0
  372. package/dist/utrecht/p-6a91f1ce.entry.js +1 -0
  373. package/dist/utrecht/p-7155ba3f.entry.js +1 -0
  374. package/dist/utrecht/p-75a89b75.entry.js +1 -0
  375. package/dist/utrecht/p-75f9997b.entry.js +1 -0
  376. package/dist/utrecht/p-7d114163.entry.js +1 -0
  377. package/dist/utrecht/p-837a6fdf.entry.js +1 -0
  378. package/dist/utrecht/p-8b7d7a03.entry.js +1 -0
  379. package/dist/utrecht/p-929780fe.entry.js +1 -0
  380. package/dist/utrecht/p-946a03ad.entry.js +1 -0
  381. package/dist/utrecht/p-979138fb.entry.js +1 -0
  382. package/dist/utrecht/p-a7272f16.entry.js +1 -0
  383. package/dist/utrecht/p-a8f492ae.entry.js +1 -0
  384. package/dist/utrecht/p-b1425686.entry.js +1 -0
  385. package/dist/utrecht/p-b4185f2c.entry.js +1 -0
  386. package/dist/utrecht/p-bb7ee7c6.entry.js +1 -0
  387. package/dist/utrecht/p-c2699171.entry.js +1 -0
  388. package/dist/utrecht/p-c3c6dd79.entry.js +1 -0
  389. package/dist/utrecht/p-c69cf3b0.entry.js +1 -0
  390. package/dist/utrecht/p-ca5a1b8b.entry.js +1 -0
  391. package/dist/utrecht/p-d0a14420.entry.js +1 -0
  392. package/dist/utrecht/p-d27583eb.entry.js +1 -0
  393. package/dist/utrecht/p-d2a8967c.entry.js +1 -0
  394. package/dist/utrecht/p-d8528c00.entry.js +1 -0
  395. package/dist/utrecht/p-d9794f59.entry.js +1 -0
  396. package/dist/utrecht/p-df90175a.entry.js +1 -0
  397. package/dist/utrecht/{p-059d8057.entry.js → p-e9ed28bc.entry.js} +1 -1
  398. package/dist/utrecht/p-ea287a6a.entry.js +1 -0
  399. package/dist/utrecht/p-eac56ee3.entry.js +1 -0
  400. package/dist/utrecht/p-f71978aa.entry.js +1 -0
  401. package/dist/utrecht/p-f8291871.entry.js +1 -0
  402. package/dist/utrecht/utrecht.esm.js +1 -1
  403. package/package.json +15 -7
  404. package/dist/cjs/utrecht-button.cjs.entry.js +0 -20
  405. package/dist/cjs/utrecht-paragraph.cjs.entry.js +0 -20
  406. package/dist/esm/utrecht-button.entry.js +0 -16
  407. package/dist/esm/utrecht-paragraph.entry.js +0 -16
  408. package/dist/utrecht/p-031700e7.entry.js +0 -1
  409. package/dist/utrecht/p-031d1e42.entry.js +0 -1
  410. package/dist/utrecht/p-26a456e1.entry.js +0 -1
  411. package/dist/utrecht/p-487bef55.entry.js +0 -1
  412. package/dist/utrecht/p-5eab253d.entry.js +0 -1
  413. package/dist/utrecht/p-6202d2cd.entry.js +0 -1
  414. package/dist/utrecht/p-634c1974.js +0 -1
  415. package/dist/utrecht/p-79c79abf.entry.js +0 -1
  416. package/dist/utrecht/p-d80edc6f.entry.js +0 -1
  417. package/dist/utrecht/p-dbb6d147.entry.js +0 -1
  418. package/dist/utrecht/p-dd661d2b.entry.js +0 -1
@@ -1,9 +1,23 @@
1
1
  @charset "UTF-8";
2
+ /**
3
+ * @license EUPL-1.2
4
+ * Copyright (c) 2021 Robbert Broersma
5
+ */
2
6
  /**
3
7
  * @license EUPL-1.2
4
8
  * Copyright (c) 2021 Robbert Broersma
5
9
  */
6
10
  /* Collection of all semantic HTML styles in the component library */
11
+ /**
12
+ * @license EUPL-1.2
13
+ * Copyright (c) 2021 Robbert Broersma
14
+ */
15
+ /**
16
+ * @license EUPL-1.2
17
+ * Copyright (c) 2021 Robbert Broersma
18
+ */
19
+ /* stylelint-disable-next-line block-no-empty */
20
+ /* stylelint-disable-next-line block-no-empty */
7
21
  /**
8
22
  * @license EUPL-1.2
9
23
  * Copyright (c) 2021 Robbert Broersma
@@ -27,6 +41,8 @@
27
41
  .utrecht-blockquote, .utrecht-html blockquote {
28
42
  font-family: var(--utrecht-document-font-family);
29
43
  font-size: var(--utrecht-blockquote-font-size);
44
+ margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
45
+ margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
30
46
  }
31
47
 
32
48
  .utrecht-blockquote__attribution {
@@ -42,10 +58,8 @@
42
58
  }
43
59
 
44
60
  .utrecht-blockquote--distanced, .utrecht-html blockquote {
45
- margin-inline-start: var(--utrecht-blockquote-margin-inline-start);
46
- margin-inline-end: var(--utrecht-blockquote-margin-inline-end);
47
- margin-block-start: var(--utrecht-blockquote-margin-block-start);
48
61
  margin-block-end: var(--utrecht-blockquote-margin-block-end);
62
+ margin-block-start: var(--utrecht-blockquote-margin-block-start);
49
63
  }
50
64
 
51
65
  /**
@@ -58,46 +72,71 @@
58
72
  * Copyright (c) 2021 Gemeente Utrecht
59
73
  */
60
74
  .utrecht-button, .utrecht-html button {
61
- color: var(--utrecht-button-primary-action-color);
62
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
63
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
64
- background-color: var(--utrecht-button-primary-action-background-color);
75
+ background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
76
+ block-size: var(--utrecht-button-block-size, auto);
65
77
  border-radius: var(--utrecht-button-border-radius);
66
78
  border-width: var(--utrecht-button-border-width);
67
- padding-inline-start: var(--utrecht-button-padding-inline-start);
68
- padding-inline-end: var(--utrecht-button-padding-inline-end);
69
- padding-block-start: var(--utrecht-button-padding-block-start);
79
+ color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
80
+ font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
81
+ font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
82
+ font-weight: var(--utrecht-button-font-weight);
83
+ inline-size: var(--utrecht-button-inline-size, auto);
84
+ letter-spacing: var(--utrecht-button-letter-spacing);
85
+ min-inline-size: var(--utrecht-button-min-inline-size, 0);
70
86
  padding-block-end: var(--utrecht-button-padding-block-end);
87
+ padding-block-start: var(--utrecht-button-padding-block-start);
88
+ padding-inline-end: var(--utrecht-button-padding-inline-end);
89
+ padding-inline-start: var(--utrecht-button-padding-inline-start);
90
+ text-transform: var(--utrecht-button-text-transform);
91
+ user-select: none;
71
92
  }
72
93
 
73
94
  .utrecht-button--distanced, .utrecht-html button {
74
- margin-inline-start: var(--utrecht-button-margin-inline-start);
75
- margin-inline-end: var(--utrecht-button-margin-inline-end);
76
- margin-block-start: var(--utrecht-button-margin-block-start);
77
95
  margin-block-end: var(--utrecht-button-margin-block-end);
96
+ margin-block-start: var(--utrecht-button-margin-block-start);
97
+ margin-inline-end: var(--utrecht-button-margin-inline-end);
98
+ margin-inline-start: var(--utrecht-button-margin-inline-start);
99
+ }
100
+
101
+ .utrecht-button--submit, .utrecht-html button[type=submit] {
102
+ /* lower priority specificty than busy and disabled cursor */
103
+ cursor: var(--utrecht-action-submit-cursor);
104
+ }
105
+
106
+ .utrecht-button--busy, .utrecht-html button[aria-busy=true] {
107
+ cursor: var(--utrecht-action-busy-cursor);
78
108
  }
79
109
 
80
110
  .utrecht-button:disabled, .utrecht-html button:disabled,
81
111
  .utrecht-button--disabled {
82
- color: var(--utrecht-button-disabled-color);
83
- background-color: var(--utrecht-button-disabled-background-color);
112
+ background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
113
+ color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
114
+ cursor: var(--utrecht-action-disabled-cursor);
115
+ }
116
+
117
+ .utrecht-button:active, .utrecht-html button:active,
118
+ .utrecht-button--active {
119
+ background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
120
+ color: var(--utrecht-button-active-color, var(--utrecht-button-color));
84
121
  }
85
122
 
86
123
  .utrecht-button--focus, .utrecht-html button:focus,
87
124
  .utrecht-button:not(.utrecht-button--disabled):focus {
88
- outline-width: var(--utrecht-focus-outline-width, 0);
89
- outline-style: var(--utrecht-focus-outline-style, solid);
90
- outline-color: var(--utrecht-focus-outline-color, transparent);
91
- color: var(--utrecht-focus-color, inherit);
125
+ background-color: var(--utrecht-focus-background-color);
92
126
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
127
+ color: var(--utrecht-focus-color, inherit);
128
+ outline-color: var(--utrecht-focus-outline-color, transparent);
93
129
  outline-offset: 0;
94
- background-color: var(--utrecht-focus-background-color);
130
+ outline-style: var(--utrecht-focus-outline-style, solid);
131
+ outline-width: var(--utrecht-focus-outline-width, 0);
132
+ background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
133
+ color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
95
134
  }
96
135
 
97
136
  .utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover,
98
137
  .utrecht-button:hover:not(:disabled):not(.utrecht-button--disabled) {
99
- color: var(--utrecht-button-primary-action-color);
100
- background-color: var(--utrecht-button-primary-action-hover-background-color);
138
+ background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
139
+ color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
101
140
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
102
141
  }
103
142
 
@@ -110,11 +149,15 @@
110
149
  * Copyright (c) 2021 Robbert Broersma
111
150
  */
112
151
  .utrecht-checkbox, .utrecht-html input[type=checkbox] {
152
+ margin-block-end: 0;
113
153
  /* reset native margin for input[type="checkbox"] */
114
154
  margin-block-start: 0;
115
- margin-block-end: 0;
116
- margin-inline-start: 0;
117
155
  margin-inline-end: 0;
156
+ margin-inline-start: 0;
157
+ }
158
+
159
+ .utrecht-checkbox--disabled {
160
+ cursor: var(--utrecht-action-disabled-cursor);
118
161
  }
119
162
 
120
163
  /**
@@ -125,17 +168,12 @@
125
168
  * @license EUPL-1.2
126
169
  * Copyright (c) 2021 Robbert Broersma
127
170
  */
128
- .utrecht-form-label, .utrecht-html label {
129
- font-weight: var(--utrecht-form-label-font-weight);
130
- font-size: var(--utrecht-form-label-font-size);
131
- }
132
-
133
- .utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
134
- font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
171
+ .utrecht-emphasis--stressed, .utrecht-html em {
172
+ font-style: var(--utrecht-emphasis-stressed-font-style, italic);
135
173
  }
136
174
 
137
- .utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
138
- font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
175
+ .utrecht-emphasis--strong, .utrecht-html strong {
176
+ font-weight: var(--utrecht-emphasis-strong-font-weight, bold);
139
177
  }
140
178
 
141
179
  /**
@@ -146,37 +184,72 @@
146
184
  * @license EUPL-1.2
147
185
  * Copyright (c) 2021 Robbert Broersma
148
186
  */
187
+ /* stylelint-disable-next-line block-no-empty */
188
+ .utrecht-form-fieldset--reset-fieldset, .utrecht-html fieldset {
189
+ border: 0;
190
+ margin-inline-end: 0;
191
+ margin-inline-start: 0;
192
+ min-width: 0;
193
+ padding-block-end: 0;
194
+ padding-block-start: 0.01em;
195
+ padding-inline-end: 0;
196
+ padding-inline-start: 0;
197
+ }
198
+
199
+ .utrecht-form-fieldset__legend--reset-legend, .utrecht-html legend {
200
+ padding-inline-end: 0;
201
+ padding-inline-start: 0;
202
+ }
203
+
149
204
  .utrecht-form-fieldset--distanced, .utrecht-html fieldset {
150
- margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
151
205
  margin-block-end: var(--utrecht-form-fieldset-margin-block-end, 0);
206
+ margin-block-start: var(--utrecht-form-fieldset-margin-block-start, 0);
152
207
  }
153
208
 
154
209
  .utrecht-form-fieldset__legend, .utrecht-html legend {
210
+ color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
155
211
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
156
212
  font-size: var(--utrecht-form-fieldset-legend-font-size);
157
213
  font-weight: var(--utrecht-form-fieldset-legend-font-weight);
158
214
  line-height: var(--utrecht-form-fieldset-legend-line-height);
159
- color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
215
+ text-transform: var(--utrecht-form-fieldset-legend-text-transform);
160
216
  }
161
217
 
162
218
  .utrecht-form-fieldset__legend--distanced, .utrecht-html legend {
163
- margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
164
219
  margin-block-end: var(--utrecht-form-fieldset-legend-margin-block-end);
220
+ margin-block-start: var(--utrecht-form-fieldset-legend-margin-block-start);
165
221
  }
166
222
 
167
- .utrecht-html fieldset {
168
- border: 0;
169
- margin: 0;
170
- min-width: 0;
171
- padding-block-end: 0;
172
- padding-block-start: 0.01em;
173
- padding-inline-end: 0;
174
- padding-inline-start: 0;
223
+ /**
224
+ * @license EUPL-1.2
225
+ * Copyright (c) 2021 Robbert Broersma
226
+ */
227
+ /**
228
+ * @license EUPL-1.2
229
+ * Copyright (c) 2021 Robbert Broersma
230
+ */
231
+ .utrecht-form-label, .utrecht-html label {
232
+ color: var(--utrecht-form-label-color);
233
+ font-size: var(--utrecht-form-label-font-size);
234
+ font-weight: var(--utrecht-form-label-font-weight);
175
235
  }
176
236
 
177
- .utrecht-html legend {
178
- padding-inline-end: 0;
179
- padding-inline-start: 0;
237
+ .utrecht-form-label--checkbox, .utrecht-html input[type=checkbox] ~ label {
238
+ color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
239
+ font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
240
+ }
241
+
242
+ .utrecht-form-label--checked {
243
+ font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
244
+ }
245
+
246
+ .utrecht-form-label--disabled {
247
+ font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
248
+ }
249
+
250
+ .utrecht-form-label--radio, .utrecht-html input[type=radio] ~ label {
251
+ color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
252
+ font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
180
253
  }
181
254
 
182
255
  /**
@@ -190,93 +263,155 @@
190
263
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
191
264
  */
192
265
  .utrecht-heading-1, .utrecht-html h1 {
266
+ color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
193
267
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
194
268
  font-size: var(--utrecht-heading-1-font-size);
195
269
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
196
270
  letter-spacing: var(--utrecht-heading-1-letter-spacing);
197
271
  line-height: var(--utrecht-heading-1-line-height);
272
+ margin-block-end: 0;
273
+ margin-block-start: 0;
198
274
  text-transform: var(--utrecht-heading-1-text-transform, inherit);
199
- color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
200
275
  }
201
276
 
202
277
  .utrecht-heading-1--distanced, .utrecht-html h1 {
203
- margin-block-start: var(--utrecht-heading-1-margin-block-start);
204
278
  margin-block-end: var(--utrecht-heading-1-margin-block-end);
279
+ margin-block-start: var(--utrecht-heading-1-margin-block-start);
205
280
  }
206
281
 
282
+ /**
283
+ * @license EUPL-1.2
284
+ * Copyright (c) 2021 Robbert Broersma
285
+ */
286
+ /**
287
+ * @license EUPL-1.2
288
+ * Copyright (c) 2021 Gemeente Utrecht
289
+ * Copyright (c) 2021 Robbert Broersma
290
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
291
+ */
207
292
  .utrecht-heading-2, .utrecht-html h2 {
293
+ color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
208
294
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
209
295
  font-size: var(--utrecht-heading-2-font-size);
210
296
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
211
297
  letter-spacing: var(--utrecht-heading-2-letter-spacing);
212
298
  line-height: var(--utrecht-heading-2-line-height);
299
+ margin-block-end: 0;
300
+ margin-block-start: 0;
213
301
  text-transform: var(--utrecht-heading-2-text-transform, inherit);
214
- color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
215
302
  }
216
303
 
217
304
  .utrecht-heading-2--distanced, .utrecht-html h2 {
218
- margin-block-start: var(--utrecht-heading-2-margin-block-start);
219
305
  margin-block-end: var(--utrecht-heading-2-margin-block-end);
306
+ margin-block-start: var(--utrecht-heading-2-margin-block-start);
220
307
  }
221
308
 
309
+ /**
310
+ * @license EUPL-1.2
311
+ * Copyright (c) 2021 Robbert Broersma
312
+ */
313
+ /**
314
+ * @license EUPL-1.2
315
+ * Copyright (c) 2021 Gemeente Utrecht
316
+ * Copyright (c) 2021 Robbert Broersma
317
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
318
+ */
222
319
  .utrecht-heading-3, .utrecht-html h3 {
320
+ color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
223
321
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
224
322
  font-size: var(--utrecht-heading-3-font-size);
225
323
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
226
324
  letter-spacing: var(--utrecht-heading-3-letter-spacing);
227
325
  line-height: var(--utrecht-heading-3-line-height);
326
+ margin-block-end: 0;
327
+ margin-block-start: 0;
228
328
  text-transform: var(--utrecht-heading-3-text-transform, inherit);
229
- color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
230
329
  }
231
330
 
232
331
  .utrecht-heading-3--distanced, .utrecht-html h3 {
233
- margin-block-start: var(--utrecht-heading-3-margin-block-start);
234
332
  margin-block-end: var(--utrecht-heading-3-margin-block-end);
333
+ margin-block-start: var(--utrecht-heading-3-margin-block-start);
235
334
  }
236
335
 
336
+ /**
337
+ * @license EUPL-1.2
338
+ * Copyright (c) 2021 Robbert Broersma
339
+ */
340
+ /**
341
+ * @license EUPL-1.2
342
+ * Copyright (c) 2021 Gemeente Utrecht
343
+ * Copyright (c) 2021 Robbert Broersma
344
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
345
+ */
237
346
  .utrecht-heading-4, .utrecht-html h4 {
347
+ color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
238
348
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
239
349
  font-size: var(--utrecht-heading-4-font-size);
240
350
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
241
351
  letter-spacing: var(--utrecht-heading-4-letter-spacing);
242
352
  line-height: var(--utrecht-heading-4-line-height);
353
+ margin-block-end: 0;
354
+ margin-block-start: 0;
243
355
  text-transform: var(--utrecht-heading-4-text-transform, inherit);
244
- color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
245
356
  }
246
357
 
247
358
  .utrecht-heading-4--distanced, .utrecht-html h4 {
248
- margin-block-start: var(--utrecht-heading-4-margin-block-start);
249
359
  margin-block-end: var(--utrecht-heading-4-margin-block-end);
360
+ margin-block-start: var(--utrecht-heading-4-margin-block-start);
250
361
  }
251
362
 
363
+ /**
364
+ * @license EUPL-1.2
365
+ * Copyright (c) 2021 Robbert Broersma
366
+ */
367
+ /**
368
+ * @license EUPL-1.2
369
+ * Copyright (c) 2021 Gemeente Utrecht
370
+ * Copyright (c) 2021 Robbert Broersma
371
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
372
+ */
252
373
  .utrecht-heading-5, .utrecht-html h5 {
374
+ color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
253
375
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
254
376
  font-size: var(--utrecht-heading-5-font-size);
255
377
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
256
378
  letter-spacing: var(--utrecht-heading-5-letter-spacing);
257
379
  line-height: var(--utrecht-heading-5-line-height);
380
+ margin-block-end: 0;
381
+ margin-block-start: 0;
258
382
  text-transform: var(--utrecht-heading-5-text-transform, inherit);
259
- color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
260
383
  }
261
384
 
262
385
  .utrecht-heading-5--distanced, .utrecht-html h5 {
263
- margin-block-start: var(--utrecht-heading-5-margin-block-start);
264
386
  margin-block-end: var(--utrecht-heading-5-margin-block-end);
387
+ margin-block-start: var(--utrecht-heading-5-margin-block-start);
265
388
  }
266
389
 
390
+ /**
391
+ * @license EUPL-1.2
392
+ * Copyright (c) 2021 Robbert Broersma
393
+ */
394
+ /**
395
+ * @license EUPL-1.2
396
+ * Copyright (c) 2021 Gemeente Utrecht
397
+ * Copyright (c) 2021 Robbert Broersma
398
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
399
+ */
267
400
  .utrecht-heading-6, .utrecht-html h6 {
401
+ color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
268
402
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
269
403
  font-size: var(--utrecht-heading-6-font-size);
270
404
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
271
405
  letter-spacing: var(--utrecht-heading-6-letter-spacing);
272
406
  line-height: var(--utrecht-heading-6-line-height);
407
+ margin-block-end: 0;
408
+ margin-block-start: 0;
273
409
  text-transform: var(--utrecht-heading-6-text-transform, inherit);
274
- color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
275
410
  }
276
411
 
277
412
  .utrecht-heading-6--distanced, .utrecht-html h6 {
278
- margin-block-start: var(--utrecht-heading-6-margin-block-start);
279
413
  margin-block-end: var(--utrecht-heading-6-margin-block-end);
414
+ margin-block-start: var(--utrecht-heading-6-margin-block-start);
280
415
  }
281
416
 
282
417
  /**
@@ -289,8 +424,8 @@
289
424
  * Copyright (c) 2021 Gemeente Utrecht
290
425
  */
291
426
  .utrecht-link, .utrecht-html a:link {
292
- text-decoration: var(--utrecht-link-text-decoration, underline);
293
427
  color: var(--utrecht-link-color, blue);
428
+ text-decoration: var(--utrecht-link-text-decoration, underline);
294
429
  }
295
430
 
296
431
  .utrecht-link:visited,
@@ -315,21 +450,49 @@
315
450
  .utrecht-link:focus,
316
451
  .utrecht-link--focus,
317
452
  .utrecht-html a:focus {
318
- color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
319
- text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
320
- outline-width: var(--utrecht-focus-outline-width, 0);
321
- outline-style: var(--utrecht-focus-outline-style, solid);
322
- outline-color: var(--utrecht-focus-outline-color, transparent);
323
- color: var(--utrecht-focus-color, inherit);
453
+ background-color: var(--utrecht-focus-background-color);
324
454
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
455
+ color: var(--utrecht-focus-color, inherit);
456
+ outline-color: var(--utrecht-focus-outline-color, transparent);
325
457
  outline-offset: 0;
326
- background-color: var(--utrecht-focus-background-color);
458
+ outline-style: var(--utrecht-focus-outline-style, solid);
459
+ outline-width: var(--utrecht-focus-outline-width, 0);
460
+ color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
461
+ text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
327
462
  }
328
463
 
464
+ /* stylelint-disable-next-line block-no-empty */
329
465
  .utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
330
466
  white-space: nowrap;
331
467
  }
332
468
 
469
+ /**
470
+ * @license EUPL-1.2
471
+ * Copyright (c) 2021 Robbert Broersma
472
+ */
473
+ /**
474
+ * @license EUPL-1.2
475
+ * Copyright (c) 2021 Robbert Broersma
476
+ * Copyright (c) 2021 Gemeente Utrecht
477
+ */
478
+ .utrecht-ordered-list, .utrecht-html ol {
479
+ font-family: var(--utrecht-document-font-family, inherit);
480
+ margin-block-end: 0;
481
+ margin-block-start: 0;
482
+ padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
483
+ }
484
+
485
+ .utrecht-ordered-list--distanced, .utrecht-html ol {
486
+ margin-block-end: var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end));
487
+ margin-block-start: var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start));
488
+ }
489
+
490
+ .utrecht-ordered-list__item, .utrecht-html ol > li {
491
+ margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end));
492
+ margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start));
493
+ padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch));
494
+ }
495
+
333
496
  /**
334
497
  * @license EUPL-1.2
335
498
  * Copyright (c) 2021 Robbert Broersma
@@ -344,19 +507,23 @@
344
507
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
345
508
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
346
509
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
510
+ margin-block-end: 0;
511
+ margin-block-start: 0;
347
512
  }
348
513
 
349
514
  .utrecht-paragraph--lead, .utrecht-html p.lead {
515
+ color: var(--utrecht-paragraph-lead-color, var(--utrecht-document-color, inherit));
350
516
  font-size: var(--utrecht-paragraph-lead-font-size, inherit);
351
517
  font-weight: var(--utrecht-paragraph-lead-font-weight, inherit);
352
518
  line-height: var(--utrecht-paragraph-lead-line-height, inherit);
353
519
  }
354
520
 
355
521
  .utrecht-paragraph--distanced, .utrecht-html * ~ p {
356
- margin-block-start: var(--utrecht-paragraph-margin-block-start);
357
522
  margin-block-end: var(--utrecht-paragraph-margin-block-end);
523
+ margin-block-start: var(--utrecht-paragraph-margin-block-start);
358
524
  }
359
525
 
526
+ /* stylelint-disable selector-class-pattern */
360
527
  /**
361
528
  * @license EUPL-1.2
362
529
  * Copyright (c) 2021 Gemeente Utrecht
@@ -366,11 +533,16 @@
366
533
  * Copyright (c) 2021 Gemeente Utrecht
367
534
  */
368
535
  .utrecht-radio-button, .utrecht-html input[type=radio] {
536
+ margin-block-end: 0;
369
537
  /* reset native margin for input[type="radio"] */
370
538
  margin-block-start: 0;
371
- margin-block-end: 0;
372
- margin-inline-start: 0;
373
539
  margin-inline-end: 0;
540
+ margin-inline-start: 0;
541
+ }
542
+
543
+ /* stylelint-disable-next-line block-no-empty */
544
+ .utrecht-radio-button--disabled {
545
+ cursor: var(--utrecht-action-disabled-cursor);
374
546
  }
375
547
 
376
548
  /**
@@ -384,11 +556,14 @@
384
556
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
385
557
  */
386
558
  .utrecht-separator, .utrecht-html hr {
387
- border-style: solid;
388
559
  border-color: var(--utrecht-separator-color);
389
- border-width: 0 0 var(--utrecht-separator-width) 0;
390
- margin-block-start: var(--utrecht-separator-margin-block-start);
560
+ border-style: solid;
561
+ border-width: 0 0 var(--utrecht-separator-block-size) 0;
562
+ }
563
+
564
+ .utrecht-separator--distanced, .utrecht-html hr {
391
565
  margin-block-end: var(--utrecht-separator-margin-block-end);
566
+ margin-block-start: var(--utrecht-separator-margin-block-start);
392
567
  }
393
568
 
394
569
  /**
@@ -401,6 +576,11 @@
401
576
  */
402
577
  .utrecht-table, .utrecht-html table {
403
578
  border-collapse: collapse;
579
+ border-color: var(--utrecht-table-border-color, 0);
580
+ border-style: solid;
581
+ border-width: var(--utrecht-table-border-width, 0);
582
+ font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
583
+ font-size: var(--utrecht-table-font-size, inherit);
404
584
  width: 100%;
405
585
  }
406
586
 
@@ -410,25 +590,25 @@
410
590
  }
411
591
 
412
592
  .utrecht-table__caption, .utrecht-html caption {
413
- font-weight: var(--utrecht-table-caption-font-weight);
593
+ color: var(--utrecht-table-caption-color);
414
594
  font-family: var(--utrecht-table-caption-font-family);
415
595
  font-size: var(--utrecht-table-caption-font-size);
416
- color: var(--utrecht-table-caption-color);
596
+ font-weight: var(--utrecht-table-caption-font-weight);
417
597
  line-height: var(--utrecht-table-caption-line-height);
418
598
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
419
599
  text-align: var(--utrecht-table-caption-text-align, center);
420
600
  }
421
601
 
422
602
  .utrecht-table__header, .utrecht-html thead {
423
- font-weight: var(--utrecht-table-header-font-weight);
424
603
  color: var(--utrecht-table-header-color);
604
+ font-weight: var(--utrecht-table-header-font-weight);
425
605
  text-transform: var(--utrecht-table-header-text-transform);
426
606
  vertical-align: bottom;
427
607
  }
428
608
 
429
609
  .utrecht-table__cell--last-header-row, .utrecht-html thead tr:last-child th {
430
- border-block-end-style: solid;
431
610
  border-block-end-color: var(--utrecht-table-header-border-block-end-color, transparent);
611
+ border-block-end-style: solid;
432
612
  border-block-end-width: var(--utrecht-table-header-border-block-end-width, 0);
433
613
  }
434
614
 
@@ -437,21 +617,22 @@
437
617
  }
438
618
 
439
619
  .utrecht-table__heading, .utrecht-html th {
440
- font-weight: var(--utrecht-table-heading-font-weight);
441
620
  color: var(--utrecht-table-heading-color);
621
+ font-size: var(--utrecht-table-heading-font-size);
622
+ font-weight: var(--utrecht-table-heading-font-weight);
442
623
  text-transform: var(--utrecht-table-heading-text-transform);
443
624
  }
444
625
 
445
626
  .utrecht-table__cell, .utrecht-html th,
446
627
  .utrecht-html td {
447
- border-block-end-style: solid;
448
628
  border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
629
+ border-block-end-style: solid;
449
630
  border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
450
631
  line-height: var(--utrecht-table-cell-line-height, inherit);
451
- padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
452
- padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
453
- padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
454
632
  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
633
+ padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
634
+ padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
635
+ padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
455
636
  text-align: start;
456
637
  }
457
638
 
@@ -471,16 +652,17 @@
471
652
  text-align: right;
472
653
  }
473
654
 
474
- .utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th {
655
+ .utrecht-table__row--alternate-odd, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(odd) > th, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > td, .utrecht-html table.alternate-row-color > tr:nth-child(odd) > th {
475
656
  background-color: var(--utrecht-table-row-alternate-odd-background-color);
476
657
  color: var(--utrecht-table-row-alternate-odd-color);
477
658
  }
478
659
 
479
- .utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th {
660
+ .utrecht-table__row--alternate-even, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tbody > tr:nth-child(even) > th, .utrecht-html table.alternate-row-color > tr:nth-child(even) > td, .utrecht-html table.alternate-row-color > tr:nth-child(even) > th {
480
661
  background-color: var(--utrecht-table-row-alternate-even-background-color);
481
662
  color: var(--utrecht-table-row-alternate-even-color);
482
663
  }
483
664
 
665
+ /* stylelint-disable selector-class-pattern */
484
666
  /**
485
667
  * @license EUPL-1.2
486
668
  * Copyright (c) 2021 Robbert Broersma
@@ -490,36 +672,59 @@
490
672
  * Copyright (c) 2021 Robbert Broersma
491
673
  */
492
674
  .utrecht-textarea, .utrecht-html textarea {
493
- border-width: var(--utrecht-textarea-border-width);
494
- border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width));
495
- border-color: var(--utrecht-textarea-border-color);
496
- border-radius: var(--utrecht-textarea-border-radius, 0);
675
+ background-color: var(--utrecht-textarea-background-color, var(--form-input-textarea-background-color));
676
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width));
677
+ border-bottom-width: var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width)));
678
+ border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color));
679
+ border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-input-border-radius, 0));
497
680
  border-style: solid;
498
- color: var(--utrecht-textarea-color);
499
- font-family: var(--utrecht-textarea-font-family);
500
- font-size: var(--utrecht-textarea-font-size, 1em);
501
- max-width: var(--utrecht-textarea-max-width);
502
- padding-block-end: var(--utrecht-textarea-padding-block-end);
503
- padding-block-start: var(--utrecht-textarea-padding-block-start);
504
- padding-inline-end: var(--utrecht-textarea-padding-inline-end);
505
- padding-inline-start: var(--utrecht-textarea-padding-inline-start);
681
+ color: var(--utrecht-textarea-color, var(--form-input-textarea-color));
682
+ font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-input-font-family));
683
+ font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-input-font-size, 1em));
684
+ max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-input-max-inline-size));
685
+ min-block-size: var(--utrecht-textarea-min-block-size);
686
+ padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-input-padding-block-end));
687
+ padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-input-padding-block-start));
688
+ padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
689
+ padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
690
+ resize: vertical;
506
691
  width: 100%;
507
692
  }
508
693
 
509
- .utrecht-textarea--invalid, .utrecht-html textarea:invalid,
510
- .utrecht-html textarea[aria-invalid=true] {
511
- border-color: var(--utrecht-textarea-invalid-border-color);
512
- border-width: var(--utrecht-textarea-invalid-border-width);
694
+ .utrecht-textarea--invalid, .utrecht-textarea--html-textarea:invalid, .utrecht-html textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true], .utrecht-html textarea[aria-invalid=true] {
695
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
696
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
697
+ border-width: var(--utrecht-textarea-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textarea-border-width, var(--utrecht-form-input-border-width))));
513
698
  }
514
699
 
515
- .utrecht-textarea--disabled, .utrecht-html textarea:disabled {
516
- border-color: var(--utrecht-textarea-disabled-border-color);
517
- color: var(--utrecht-textarea-disabled-color);
700
+ .utrecht-textarea--disabled, .utrecht-textarea--html-textarea:disabled, .utrecht-html textarea:disabled {
701
+ background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
702
+ border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
703
+ color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
704
+ cursor: var(--utrecht-action-disabled-cursor);
518
705
  }
519
706
 
520
- .utrecht-textarea--read-only, .utrecht-html textarea:read-only {
521
- border-color: var(--utrecht-textarea-read-only-border-color);
522
- color: var(--utrecht-textarea-read-only-color);
707
+ .utrecht-textarea--focus, .utrecht-textarea--html-textarea:focus, .utrecht-html textarea:focus {
708
+ background-color: var(--utrecht-focus-background-color);
709
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
710
+ color: var(--utrecht-focus-color, inherit);
711
+ outline-color: var(--utrecht-focus-outline-color, transparent);
712
+ outline-offset: 0;
713
+ outline-style: var(--utrecht-focus-outline-style, solid);
714
+ outline-width: var(--utrecht-focus-outline-width, 0);
715
+ background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
716
+ border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
717
+ color: var(--utrecht-textarea-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
718
+ }
719
+
720
+ .utrecht-textarea--read-only, .utrecht-textarea--html-textarea:read-only, .utrecht-html textarea:read-only {
721
+ border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-input-border-color))));
722
+ color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
723
+ }
724
+
725
+ .utrecht-textarea__placeholder, .utrecht-textarea--html-textarea::placeholder, .utrecht-html textarea::placeholder {
726
+ color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
727
+ opacity: 100%;
523
728
  }
524
729
 
525
730
  /**
@@ -530,57 +735,108 @@
530
735
  * @license EUPL-1.2
531
736
  * Copyright (c) 2021 Robbert Broersma
532
737
  */
533
- .utrecht-textbox, .utrecht-html input[type=text],
738
+ .utrecht-textbox, .utrecht-html input:not([type]),
534
739
  .utrecht-html input[type=email],
740
+ .utrecht-html input[type=number],
741
+ .utrecht-html input[type=password],
535
742
  .utrecht-html input[type=search],
536
743
  .utrecht-html input[type=tel],
744
+ .utrecht-html input[type=text],
537
745
  .utrecht-html input[type=url] {
538
- border-width: var(--utrecht-textbox-border-width);
539
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width));
540
- border-color: var(--utrecht-textbox-border-color);
541
- border-radius: var(--utrecht-textbox-border-radius, 0);
746
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));
747
+ border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));
748
+ border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));
749
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));
750
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));
542
751
  border-style: solid;
543
- color: var(--utrecht-textbox-color);
544
- font-family: var(--utrecht-textbox-font-family);
545
- font-size: var(--utrecht-textbox-font-size, 1em);
546
- max-width: var(--utrecht-textbox-max-width);
547
- padding-block-end: var(--utrecht-textbox-padding-block-end);
548
- padding-block-start: var(--utrecht-textbox-padding-block-start);
549
- padding-inline-end: var(--utrecht-textbox-padding-inline-end);
550
- padding-inline-start: var(--utrecht-textbox-padding-inline-start);
551
752
  box-sizing: border-box;
753
+ color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
754
+ font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));
755
+ font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));
756
+ max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));
757
+ padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));
758
+ padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));
759
+ padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));
760
+ padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));
552
761
  width: 100%;
553
762
  }
554
763
 
555
- .utrecht-textbox--invalid, .utrecht-html input[type=text]:invalid, .utrecht-html input[type=text][aria-invalid=true],
764
+ .utrecht-textbox--invalid, .utrecht-textbox--html-input:invalid, .utrecht-html input:invalid:not([type]),
556
765
  .utrecht-html input[type=email]:invalid,
557
- .utrecht-html input[type=email][aria-invalid=true],
766
+ .utrecht-html input[type=number]:invalid,
767
+ .utrecht-html input[type=password]:invalid,
558
768
  .utrecht-html input[type=search]:invalid,
559
- .utrecht-html input[type=search][aria-invalid=true],
560
769
  .utrecht-html input[type=tel]:invalid,
561
- .utrecht-html input[type=tel][aria-invalid=true],
562
- .utrecht-html input[type=url]:invalid,
563
- .utrecht-html input[type=url][aria-invalid=true] {
564
- border-color: var(--utrecht-textbox-invalid-border-color);
565
- border-width: var(--utrecht-textbox-invalid-border-width);
566
- }
567
-
568
- .utrecht-textbox--disabled, .utrecht-html input[type=text]:disabled,
770
+ .utrecht-html input[type=text]:invalid,
771
+ .utrecht-html input[type=url]:invalid, .utrecht-textbox--html-input[aria-invalid=true], .utrecht-html input[aria-invalid=true]:not([type]),
772
+ .utrecht-html input[aria-invalid=true][type=email],
773
+ .utrecht-html input[aria-invalid=true][type=number],
774
+ .utrecht-html input[aria-invalid=true][type=password],
775
+ .utrecht-html input[aria-invalid=true][type=search],
776
+ .utrecht-html input[aria-invalid=true][type=tel],
777
+ .utrecht-html input[aria-invalid=true][type=text],
778
+ .utrecht-html input[aria-invalid=true][type=url] {
779
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));
780
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
781
+ border-width: var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))));
782
+ }
783
+
784
+ .utrecht-textbox--disabled, .utrecht-textbox--html-input:disabled, .utrecht-html input:disabled:not([type]),
569
785
  .utrecht-html input[type=email]:disabled,
786
+ .utrecht-html input[type=number]:disabled,
787
+ .utrecht-html input[type=password]:disabled,
570
788
  .utrecht-html input[type=search]:disabled,
571
789
  .utrecht-html input[type=tel]:disabled,
790
+ .utrecht-html input[type=text]:disabled,
572
791
  .utrecht-html input[type=url]:disabled {
573
- border-color: var(--utrecht-textbox-disabled-border-color);
574
- color: var(--utrecht-textbox-disabled-color);
792
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
793
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
794
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
795
+ cursor: var(--utrecht-action-disabled-cursor);
796
+ }
797
+
798
+ .utrecht-textbox--focus, .utrecht-textbox--html-input:focus, .utrecht-html input:focus:not([type]),
799
+ .utrecht-html input[type=email]:focus,
800
+ .utrecht-html input[type=number]:focus,
801
+ .utrecht-html input[type=password]:focus,
802
+ .utrecht-html input[type=search]:focus,
803
+ .utrecht-html input[type=tel]:focus,
804
+ .utrecht-html input[type=text]:focus,
805
+ .utrecht-html input[type=url]:focus {
806
+ background-color: var(--utrecht-focus-background-color);
807
+ box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
808
+ color: var(--utrecht-focus-color, inherit);
809
+ outline-color: var(--utrecht-focus-outline-color, transparent);
810
+ outline-offset: 0;
811
+ outline-style: var(--utrecht-focus-outline-style, solid);
812
+ outline-width: var(--utrecht-focus-outline-width, 0);
813
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));
814
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));
815
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));
575
816
  }
576
817
 
577
- .utrecht-textbox--read-only, .utrecht-html input[type=text]:read-only,
818
+ .utrecht-textbox--read-only, .utrecht-textbox--html-input:read-only, .utrecht-html input:read-only:not([type]),
578
819
  .utrecht-html input[type=email]:read-only,
820
+ .utrecht-html input[type=number]:read-only,
821
+ .utrecht-html input[type=password]:read-only,
579
822
  .utrecht-html input[type=search]:read-only,
580
823
  .utrecht-html input[type=tel]:read-only,
824
+ .utrecht-html input[type=text]:read-only,
581
825
  .utrecht-html input[type=url]:read-only {
582
- border-color: var(--utrecht-textbox-read-only-border-color);
583
- color: var(--utrecht-textbox-read-only-color);
826
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));
827
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
828
+ }
829
+
830
+ .utrecht-textbox__placeholder, .utrecht-textbox--html-input::placeholder, .utrecht-html input:not([type])::placeholder,
831
+ .utrecht-html input[type=email]::placeholder,
832
+ .utrecht-html input[type=number]::placeholder,
833
+ .utrecht-html input[type=password]::placeholder,
834
+ .utrecht-html input[type=search]::placeholder,
835
+ .utrecht-html input[type=tel]::placeholder,
836
+ .utrecht-html input[type=text]::placeholder,
837
+ .utrecht-html input[type=url]::placeholder {
838
+ color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));
839
+ opacity: 100%;
584
840
  }
585
841
 
586
842
  /**
@@ -596,27 +852,37 @@
596
852
  font-family: var(--utrecht-document-font-family, inherit);
597
853
  font-size: var(--utrecht-document-font-size, inherit);
598
854
  line-height: var(--utrecht-document-line-height, inherit);
599
- padding-inline-start: 2ch;
855
+ margin-block-end: 0;
856
+ margin-block-start: 0;
857
+ padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
600
858
  }
601
859
 
602
860
  .utrecht-unordered-list--distanced, .utrecht-html ul {
603
- margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
604
861
  margin-block-end: var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end));
862
+ margin-block-start: var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start));
605
863
  }
606
864
 
607
865
  .utrecht-unordered-list--nested {
608
- margin-inline-start: 2ch;
609
866
  margin-block-end: 0;
867
+ margin-inline-start: 2ch;
610
868
  }
611
869
 
612
870
  .utrecht-unordered-list__item, .utrecht-html ul > li {
613
- padding-inline-start: 1ch;
614
- margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
615
871
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
872
+ margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
873
+ padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
616
874
  }
617
875
 
618
876
  .utrecht-unordered-list__item::marker, .utrecht-html ul > li::marker,
619
877
  .utrecht-unordered-list__marker {
620
878
  color: var(--utrecht-unordered-list-marker-color);
621
879
  content: "●";
880
+ }
881
+
882
+ :host {
883
+ display: block;
884
+ }
885
+
886
+ :host([hidden]) {
887
+ display: none !important;
622
888
  }