@public-ui/components 1.5.0-rc.11 → 1.5.0-rc.13

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 (559) hide show
  1. package/assets/codicons/LICENSE +395 -0
  2. package/assets/codicons/LICENSE-CODE +21 -0
  3. package/assets/codicons/codicon.css +571 -0
  4. package/assets/codicons/codicon.csv +421 -0
  5. package/assets/codicons/codicon.html +3871 -0
  6. package/assets/codicons/codicon.svg +1 -0
  7. package/assets/codicons/codicon.ttf +0 -0
  8. package/assets/kolibri.ico +0 -0
  9. package/cheat-sheet.html +84 -100
  10. package/custom-elements.json +176 -150
  11. package/dist/cjs/button-link-19d8a9a8.js.map +1 -1
  12. package/dist/cjs/color-40b15935.js +4 -0
  13. package/dist/cjs/color-40b15935.js.map +1 -0
  14. package/dist/cjs/{controller-ae0aa1fb.js → controller-073aa3b2.js} +1 -1
  15. package/dist/cjs/{controller-ae0aa1fb.js.map → controller-073aa3b2.js.map} +1 -1
  16. package/dist/cjs/{controller-34b64835.js → controller-272d14fd.js} +1 -1
  17. package/dist/cjs/{controller-34b64835.js.map → controller-272d14fd.js.map} +1 -1
  18. package/dist/cjs/{controller-6dbcc733.js → controller-46148a56.js} +1 -1
  19. package/dist/cjs/{controller-6dbcc733.js.map → controller-46148a56.js.map} +1 -1
  20. package/dist/cjs/{controller-a1c1ce64.js → controller-536f457e.js} +1 -1
  21. package/dist/cjs/controller-536f457e.js.map +1 -0
  22. package/dist/cjs/{controller-icon-295d3454.js → controller-icon-f01acf97.js} +1 -1
  23. package/dist/cjs/{controller-icon-295d3454.js.map → controller-icon-f01acf97.js.map} +1 -1
  24. package/dist/cjs/floating-ui.dom.esm-c29f07df.js +4 -0
  25. package/dist/cjs/floating-ui.dom.esm-c29f07df.js.map +1 -0
  26. package/dist/cjs/icon-71b1bd66.js.map +1 -1
  27. package/dist/cjs/kol-abbr.cjs.entry.js +1 -1
  28. package/dist/cjs/kol-abbr.cjs.entry.js.map +1 -1
  29. package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
  30. package/dist/cjs/kol-accordion.cjs.entry.js.map +1 -1
  31. package/dist/cjs/kol-alert.cjs.entry.js +1 -1
  32. package/dist/cjs/kol-alert.cjs.entry.js.map +1 -1
  33. package/dist/cjs/kol-badge.cjs.entry.js +1 -1
  34. package/dist/cjs/kol-badge.cjs.entry.js.map +1 -1
  35. package/dist/cjs/kol-breadcrumb.cjs.entry.js +1 -1
  36. package/dist/cjs/kol-breadcrumb.cjs.entry.js.map +1 -1
  37. package/dist/cjs/kol-button-group.cjs.entry.js +1 -1
  38. package/dist/cjs/kol-button-group.cjs.entry.js.map +1 -1
  39. package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
  40. package/dist/cjs/kol-button-link.cjs.entry.js.map +1 -1
  41. package/dist/cjs/kol-button-wc_3.cjs.entry.js +1 -1
  42. package/dist/cjs/kol-button-wc_3.cjs.entry.js.map +1 -1
  43. package/dist/cjs/kol-button.cjs.entry.js +1 -1
  44. package/dist/cjs/kol-button.cjs.entry.js.map +1 -1
  45. package/dist/cjs/kol-card.cjs.entry.js +1 -1
  46. package/dist/cjs/kol-card.cjs.entry.js.map +1 -1
  47. package/dist/cjs/kol-details.cjs.entry.js +1 -1
  48. package/dist/cjs/kol-details.cjs.entry.js.map +1 -1
  49. package/dist/cjs/kol-form.cjs.entry.js.map +1 -1
  50. package/dist/cjs/kol-heading.cjs.entry.js +1 -1
  51. package/dist/cjs/kol-heading.cjs.entry.js.map +1 -1
  52. package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
  53. package/dist/cjs/kol-image.cjs.entry.js.map +1 -1
  54. package/dist/cjs/kol-indented-text.cjs.entry.js +1 -1
  55. package/dist/cjs/kol-indented-text.cjs.entry.js.map +1 -1
  56. package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
  57. package/dist/cjs/kol-input-checkbox.cjs.entry.js.map +1 -1
  58. package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
  59. package/dist/cjs/kol-input-color.cjs.entry.js.map +1 -1
  60. package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
  61. package/dist/cjs/kol-input-date.cjs.entry.js.map +1 -1
  62. package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
  63. package/dist/cjs/kol-input-email.cjs.entry.js.map +1 -1
  64. package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
  65. package/dist/cjs/kol-input-file.cjs.entry.js.map +1 -1
  66. package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
  67. package/dist/cjs/kol-input-number.cjs.entry.js.map +1 -1
  68. package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
  69. package/dist/cjs/kol-input-password.cjs.entry.js.map +1 -1
  70. package/dist/cjs/kol-input-radio-group.cjs.entry.js.map +1 -1
  71. package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
  72. package/dist/cjs/kol-input-radio.cjs.entry.js.map +1 -1
  73. package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
  74. package/dist/cjs/kol-input-range.cjs.entry.js.map +1 -1
  75. package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
  76. package/dist/cjs/kol-input-text.cjs.entry.js.map +1 -1
  77. package/dist/cjs/kol-kolibri.cjs.entry.js +1 -1
  78. package/dist/cjs/kol-kolibri.cjs.entry.js.map +1 -1
  79. package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
  80. package/dist/cjs/kol-link-button.cjs.entry.js.map +1 -1
  81. package/dist/cjs/kol-link-group.cjs.entry.js +1 -1
  82. package/dist/cjs/kol-link-group.cjs.entry.js.map +1 -1
  83. package/dist/cjs/kol-link-wc.cjs.entry.js.map +1 -1
  84. package/dist/cjs/kol-link.cjs.entry.js +1 -1
  85. package/dist/cjs/kol-link.cjs.entry.js.map +1 -1
  86. package/dist/cjs/kol-logo.cjs.entry.js +1 -1
  87. package/dist/cjs/kol-logo.cjs.entry.js.map +1 -1
  88. package/dist/cjs/kol-modal.cjs.entry.js +1 -1
  89. package/dist/cjs/kol-modal.cjs.entry.js.map +1 -1
  90. package/dist/cjs/kol-nav.cjs.entry.js +1 -1
  91. package/dist/cjs/kol-nav.cjs.entry.js.map +1 -1
  92. package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
  93. package/dist/cjs/kol-pagination.cjs.entry.js.map +1 -1
  94. package/dist/cjs/kol-popover.cjs.entry.js +4 -0
  95. package/dist/cjs/kol-popover.cjs.entry.js.map +1 -0
  96. package/dist/cjs/kol-progress.cjs.entry.js +1 -1
  97. package/dist/cjs/kol-progress.cjs.entry.js.map +1 -1
  98. package/dist/cjs/kol-quote.cjs.entry.js +1 -1
  99. package/dist/cjs/kol-quote.cjs.entry.js.map +1 -1
  100. package/dist/cjs/kol-select.cjs.entry.js +1 -1
  101. package/dist/cjs/kol-select.cjs.entry.js.map +1 -1
  102. package/dist/cjs/kol-skip-nav.cjs.entry.js +1 -1
  103. package/dist/cjs/kol-skip-nav.cjs.entry.js.map +1 -1
  104. package/dist/cjs/kol-span-wc.cjs.entry.js.map +1 -1
  105. package/dist/cjs/kol-span.cjs.entry.js +1 -1
  106. package/dist/cjs/kol-span.cjs.entry.js.map +1 -1
  107. package/dist/cjs/kol-spin.cjs.entry.js +1 -1
  108. package/dist/cjs/kol-spin.cjs.entry.js.map +1 -1
  109. package/dist/cjs/kol-table.cjs.entry.js +1 -1
  110. package/dist/cjs/kol-table.cjs.entry.js.map +1 -1
  111. package/dist/cjs/kol-tabs.cjs.entry.js +1 -1
  112. package/dist/cjs/kol-tabs.cjs.entry.js.map +1 -1
  113. package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
  114. package/dist/cjs/kol-textarea.cjs.entry.js.map +1 -1
  115. package/dist/cjs/kol-toast.cjs.entry.js +1 -1
  116. package/dist/cjs/kol-toast.cjs.entry.js.map +1 -1
  117. package/dist/cjs/kol-tooltip.cjs.entry.js +1 -1
  118. package/dist/cjs/kol-tooltip.cjs.entry.js.map +1 -1
  119. package/dist/cjs/kol-version.cjs.entry.js +1 -1
  120. package/dist/cjs/kol-version.cjs.entry.js.map +1 -1
  121. package/dist/cjs/kolibri.cjs.js +1 -1
  122. package/dist/cjs/loader.cjs.js +1 -1
  123. package/dist/cjs/open-fd1ca478.js +4 -0
  124. package/dist/cjs/open-fd1ca478.js.map +1 -0
  125. package/dist/cjs/prop.validators-dd1f7878.js.map +1 -1
  126. package/dist/cjs/{validation-b38b683c.js → validation-55ae497d.js} +1 -1
  127. package/dist/cjs/{validation-b38b683c.js.map → validation-55ae497d.js.map} +1 -1
  128. package/dist/components/color.js +4 -0
  129. package/dist/components/color.js.map +1 -0
  130. package/dist/components/component.js +1 -1
  131. package/dist/components/component.js.map +1 -1
  132. package/dist/components/component10.js +1 -1
  133. package/dist/components/component10.js.map +1 -1
  134. package/dist/components/component11.js +1 -1
  135. package/dist/components/component11.js.map +1 -1
  136. package/dist/components/component12.js +1 -1
  137. package/dist/components/component12.js.map +1 -1
  138. package/dist/components/component13.js +1 -1
  139. package/dist/components/component13.js.map +1 -1
  140. package/dist/components/component14.js +1 -1
  141. package/dist/components/component14.js.map +1 -1
  142. package/dist/components/component15.js +1 -1
  143. package/dist/components/component15.js.map +1 -1
  144. package/dist/components/component2.js.map +1 -1
  145. package/dist/components/component3.js.map +1 -1
  146. package/dist/components/component4.js +1 -1
  147. package/dist/components/component4.js.map +1 -1
  148. package/dist/components/component5.js +1 -1
  149. package/dist/components/component5.js.map +1 -1
  150. package/dist/components/component6.js +1 -1
  151. package/dist/components/component6.js.map +1 -1
  152. package/dist/components/component7.js +1 -1
  153. package/dist/components/component7.js.map +1 -1
  154. package/dist/components/component8.js.map +1 -1
  155. package/dist/components/controller.js +1 -1
  156. package/dist/components/controller.js.map +1 -1
  157. package/dist/components/floating-ui.dom.esm.js +4 -0
  158. package/dist/components/floating-ui.dom.esm.js.map +1 -0
  159. package/dist/components/kol-abbr.js +1 -1
  160. package/dist/components/kol-abbr.js.map +1 -1
  161. package/dist/components/kol-accordion.js +1 -1
  162. package/dist/components/kol-accordion.js.map +1 -1
  163. package/dist/components/kol-breadcrumb.js +1 -1
  164. package/dist/components/kol-breadcrumb.js.map +1 -1
  165. package/dist/components/kol-button-group.js +1 -1
  166. package/dist/components/kol-button-group.js.map +1 -1
  167. package/dist/components/kol-button-link.js +1 -1
  168. package/dist/components/kol-button-link.js.map +1 -1
  169. package/dist/components/kol-card.js +1 -1
  170. package/dist/components/kol-card.js.map +1 -1
  171. package/dist/components/kol-details.js +1 -1
  172. package/dist/components/kol-details.js.map +1 -1
  173. package/dist/components/kol-form.js.map +1 -1
  174. package/dist/components/kol-heading.js +1 -1
  175. package/dist/components/kol-heading.js.map +1 -1
  176. package/dist/components/kol-image.js.map +1 -1
  177. package/dist/components/kol-input-checkbox.js +1 -1
  178. package/dist/components/kol-input-checkbox.js.map +1 -1
  179. package/dist/components/kol-input-color.js +1 -1
  180. package/dist/components/kol-input-color.js.map +1 -1
  181. package/dist/components/kol-input-date.js +1 -1
  182. package/dist/components/kol-input-date.js.map +1 -1
  183. package/dist/components/kol-input-email.js +1 -1
  184. package/dist/components/kol-input-email.js.map +1 -1
  185. package/dist/components/kol-input-file.js +1 -1
  186. package/dist/components/kol-input-file.js.map +1 -1
  187. package/dist/components/kol-input-password.js +1 -1
  188. package/dist/components/kol-input-password.js.map +1 -1
  189. package/dist/components/kol-input-radio-group.js.map +1 -1
  190. package/dist/components/kol-input-range.js +1 -1
  191. package/dist/components/kol-input-range.js.map +1 -1
  192. package/dist/components/kol-input-text.js +1 -1
  193. package/dist/components/kol-input-text.js.map +1 -1
  194. package/dist/components/kol-kolibri.js +1 -1
  195. package/dist/components/kol-kolibri.js.map +1 -1
  196. package/dist/components/kol-link-button.js +1 -1
  197. package/dist/components/kol-link-button.js.map +1 -1
  198. package/dist/components/kol-link-group.js +1 -1
  199. package/dist/components/kol-link-group.js.map +1 -1
  200. package/dist/components/kol-logo.js +1 -1
  201. package/dist/components/kol-logo.js.map +1 -1
  202. package/dist/components/kol-modal.js +1 -1
  203. package/dist/components/kol-modal.js.map +1 -1
  204. package/dist/components/kol-nav.js +1 -1
  205. package/dist/components/kol-nav.js.map +1 -1
  206. package/dist/components/kol-popover.d.ts +11 -0
  207. package/dist/components/kol-popover.js +4 -0
  208. package/dist/components/kol-popover.js.map +1 -0
  209. package/dist/components/kol-progress.js +1 -1
  210. package/dist/components/kol-progress.js.map +1 -1
  211. package/dist/components/kol-quote.js +1 -1
  212. package/dist/components/kol-quote.js.map +1 -1
  213. package/dist/components/kol-skip-nav.js +1 -1
  214. package/dist/components/kol-skip-nav.js.map +1 -1
  215. package/dist/components/kol-span.js +1 -1
  216. package/dist/components/kol-span.js.map +1 -1
  217. package/dist/components/kol-spin.js +1 -1
  218. package/dist/components/kol-spin.js.map +1 -1
  219. package/dist/components/kol-table.js +1 -1
  220. package/dist/components/kol-table.js.map +1 -1
  221. package/dist/components/kol-tabs.js +1 -1
  222. package/dist/components/kol-tabs.js.map +1 -1
  223. package/dist/components/kol-textarea.js +1 -1
  224. package/dist/components/kol-textarea.js.map +1 -1
  225. package/dist/components/kol-toast.js +1 -1
  226. package/dist/components/kol-toast.js.map +1 -1
  227. package/dist/components/kol-version.js +1 -1
  228. package/dist/components/kol-version.js.map +1 -1
  229. package/dist/components/open.js +4 -0
  230. package/dist/components/open.js.map +1 -0
  231. package/dist/components/prop.validators.js.map +1 -1
  232. package/dist/components/shadow.js +1 -1
  233. package/dist/components/shadow.js.map +1 -1
  234. package/dist/components/shadow2.js +1 -1
  235. package/dist/components/shadow2.js.map +1 -1
  236. package/dist/esm/button-link-0f3cba87.js.map +1 -1
  237. package/dist/esm/color-32939623.js +4 -0
  238. package/dist/esm/color-32939623.js.map +1 -0
  239. package/dist/esm/{controller-bc7e1fb9.js → controller-0f18a72b.js} +1 -1
  240. package/dist/esm/{controller-bc7e1fb9.js.map → controller-0f18a72b.js.map} +1 -1
  241. package/dist/esm/{controller-0bcb86ac.js → controller-22781e1d.js} +1 -1
  242. package/dist/esm/{controller-0bcb86ac.js.map → controller-22781e1d.js.map} +1 -1
  243. package/dist/esm/{controller-1827c5e4.js → controller-a9333e53.js} +1 -1
  244. package/dist/esm/{controller-1827c5e4.js.map → controller-a9333e53.js.map} +1 -1
  245. package/dist/esm/{controller-fd64aa81.js → controller-cbcb5b86.js} +1 -1
  246. package/dist/esm/controller-cbcb5b86.js.map +1 -0
  247. package/dist/esm/{controller-icon-b3feb2a8.js → controller-icon-8695323b.js} +1 -1
  248. package/dist/esm/{controller-icon-b3feb2a8.js.map → controller-icon-8695323b.js.map} +1 -1
  249. package/dist/esm/floating-ui.dom.esm-7168a219.js +4 -0
  250. package/dist/esm/floating-ui.dom.esm-7168a219.js.map +1 -0
  251. package/dist/esm/icon-00018c54.js.map +1 -1
  252. package/dist/esm/kol-abbr.entry.js +1 -1
  253. package/dist/esm/kol-abbr.entry.js.map +1 -1
  254. package/dist/esm/kol-accordion.entry.js +1 -1
  255. package/dist/esm/kol-accordion.entry.js.map +1 -1
  256. package/dist/esm/kol-alert.entry.js +1 -1
  257. package/dist/esm/kol-alert.entry.js.map +1 -1
  258. package/dist/esm/kol-badge.entry.js +1 -1
  259. package/dist/esm/kol-badge.entry.js.map +1 -1
  260. package/dist/esm/kol-breadcrumb.entry.js +1 -1
  261. package/dist/esm/kol-breadcrumb.entry.js.map +1 -1
  262. package/dist/esm/kol-button-group.entry.js +1 -1
  263. package/dist/esm/kol-button-group.entry.js.map +1 -1
  264. package/dist/esm/kol-button-link.entry.js +1 -1
  265. package/dist/esm/kol-button-link.entry.js.map +1 -1
  266. package/dist/esm/kol-button-wc_3.entry.js +1 -1
  267. package/dist/esm/kol-button-wc_3.entry.js.map +1 -1
  268. package/dist/esm/kol-button.entry.js +1 -1
  269. package/dist/esm/kol-button.entry.js.map +1 -1
  270. package/dist/esm/kol-card.entry.js +1 -1
  271. package/dist/esm/kol-card.entry.js.map +1 -1
  272. package/dist/esm/kol-details.entry.js +1 -1
  273. package/dist/esm/kol-details.entry.js.map +1 -1
  274. package/dist/esm/kol-form.entry.js.map +1 -1
  275. package/dist/esm/kol-heading.entry.js +1 -1
  276. package/dist/esm/kol-heading.entry.js.map +1 -1
  277. package/dist/esm/kol-icon.entry.js.map +1 -1
  278. package/dist/esm/kol-image.entry.js.map +1 -1
  279. package/dist/esm/kol-indented-text.entry.js +1 -1
  280. package/dist/esm/kol-indented-text.entry.js.map +1 -1
  281. package/dist/esm/kol-input-checkbox.entry.js +1 -1
  282. package/dist/esm/kol-input-checkbox.entry.js.map +1 -1
  283. package/dist/esm/kol-input-color.entry.js +1 -1
  284. package/dist/esm/kol-input-color.entry.js.map +1 -1
  285. package/dist/esm/kol-input-date.entry.js +1 -1
  286. package/dist/esm/kol-input-date.entry.js.map +1 -1
  287. package/dist/esm/kol-input-email.entry.js +1 -1
  288. package/dist/esm/kol-input-email.entry.js.map +1 -1
  289. package/dist/esm/kol-input-file.entry.js +1 -1
  290. package/dist/esm/kol-input-file.entry.js.map +1 -1
  291. package/dist/esm/kol-input-number.entry.js +1 -1
  292. package/dist/esm/kol-input-number.entry.js.map +1 -1
  293. package/dist/esm/kol-input-password.entry.js +1 -1
  294. package/dist/esm/kol-input-password.entry.js.map +1 -1
  295. package/dist/esm/kol-input-radio-group.entry.js.map +1 -1
  296. package/dist/esm/kol-input-radio.entry.js +1 -1
  297. package/dist/esm/kol-input-radio.entry.js.map +1 -1
  298. package/dist/esm/kol-input-range.entry.js +1 -1
  299. package/dist/esm/kol-input-range.entry.js.map +1 -1
  300. package/dist/esm/kol-input-text.entry.js +1 -1
  301. package/dist/esm/kol-input-text.entry.js.map +1 -1
  302. package/dist/esm/kol-kolibri.entry.js +1 -1
  303. package/dist/esm/kol-kolibri.entry.js.map +1 -1
  304. package/dist/esm/kol-link-button.entry.js +1 -1
  305. package/dist/esm/kol-link-button.entry.js.map +1 -1
  306. package/dist/esm/kol-link-group.entry.js +1 -1
  307. package/dist/esm/kol-link-group.entry.js.map +1 -1
  308. package/dist/esm/kol-link-wc.entry.js.map +1 -1
  309. package/dist/esm/kol-link.entry.js +1 -1
  310. package/dist/esm/kol-link.entry.js.map +1 -1
  311. package/dist/esm/kol-logo.entry.js +1 -1
  312. package/dist/esm/kol-logo.entry.js.map +1 -1
  313. package/dist/esm/kol-modal.entry.js +1 -1
  314. package/dist/esm/kol-modal.entry.js.map +1 -1
  315. package/dist/esm/kol-nav.entry.js +1 -1
  316. package/dist/esm/kol-nav.entry.js.map +1 -1
  317. package/dist/esm/kol-pagination.entry.js +1 -1
  318. package/dist/esm/kol-pagination.entry.js.map +1 -1
  319. package/dist/esm/kol-popover.entry.js +4 -0
  320. package/dist/esm/kol-popover.entry.js.map +1 -0
  321. package/dist/esm/kol-progress.entry.js +1 -1
  322. package/dist/esm/kol-progress.entry.js.map +1 -1
  323. package/dist/esm/kol-quote.entry.js +1 -1
  324. package/dist/esm/kol-quote.entry.js.map +1 -1
  325. package/dist/esm/kol-select.entry.js +1 -1
  326. package/dist/esm/kol-select.entry.js.map +1 -1
  327. package/dist/esm/kol-skip-nav.entry.js +1 -1
  328. package/dist/esm/kol-skip-nav.entry.js.map +1 -1
  329. package/dist/esm/kol-span-wc.entry.js.map +1 -1
  330. package/dist/esm/kol-span.entry.js +1 -1
  331. package/dist/esm/kol-span.entry.js.map +1 -1
  332. package/dist/esm/kol-spin.entry.js +1 -1
  333. package/dist/esm/kol-spin.entry.js.map +1 -1
  334. package/dist/esm/kol-table.entry.js +1 -1
  335. package/dist/esm/kol-table.entry.js.map +1 -1
  336. package/dist/esm/kol-tabs.entry.js +1 -1
  337. package/dist/esm/kol-tabs.entry.js.map +1 -1
  338. package/dist/esm/kol-textarea.entry.js +1 -1
  339. package/dist/esm/kol-textarea.entry.js.map +1 -1
  340. package/dist/esm/kol-toast.entry.js +1 -1
  341. package/dist/esm/kol-toast.entry.js.map +1 -1
  342. package/dist/esm/kol-tooltip.entry.js +1 -1
  343. package/dist/esm/kol-tooltip.entry.js.map +1 -1
  344. package/dist/esm/kol-version.entry.js +1 -1
  345. package/dist/esm/kol-version.entry.js.map +1 -1
  346. package/dist/esm/kolibri.js +1 -1
  347. package/dist/esm/loader.js +1 -1
  348. package/dist/esm/open-7d64cfaf.js +4 -0
  349. package/dist/esm/open-7d64cfaf.js.map +1 -0
  350. package/dist/esm/prop.validators-e402ad49.js.map +1 -1
  351. package/dist/esm/{validation-b331e3a7.js → validation-a42d9cc9.js} +1 -1
  352. package/dist/esm/{validation-b331e3a7.js.map → validation-a42d9cc9.js.map} +1 -1
  353. package/dist/kolibri/assets/popover-simulation.js +1 -0
  354. package/dist/kolibri/button-link-0f3cba87.js.map +1 -1
  355. package/dist/kolibri/color-32939623.js +4 -0
  356. package/dist/kolibri/color-32939623.js.map +1 -0
  357. package/dist/kolibri/{controller-bc7e1fb9.js → controller-0f18a72b.js} +1 -1
  358. package/dist/kolibri/controller-22781e1d.js +4 -0
  359. package/dist/kolibri/{controller-1827c5e4.js → controller-a9333e53.js} +1 -1
  360. package/dist/kolibri/controller-cbcb5b86.js +4 -0
  361. package/dist/kolibri/controller-cbcb5b86.js.map +1 -0
  362. package/dist/kolibri/{controller-icon-b3feb2a8.js → controller-icon-8695323b.js} +1 -1
  363. package/dist/kolibri/floating-ui.dom.esm-7168a219.js +4 -0
  364. package/dist/kolibri/floating-ui.dom.esm-7168a219.js.map +1 -0
  365. package/dist/kolibri/icon-00018c54.js.map +1 -1
  366. package/dist/kolibri/kol-abbr.entry.js +1 -1
  367. package/dist/kolibri/kol-abbr.entry.js.map +1 -1
  368. package/dist/kolibri/kol-accordion.entry.js +1 -1
  369. package/dist/kolibri/kol-accordion.entry.js.map +1 -1
  370. package/dist/kolibri/kol-alert.entry.js +1 -1
  371. package/dist/kolibri/kol-alert.entry.js.map +1 -1
  372. package/dist/kolibri/kol-badge.entry.js +1 -1
  373. package/dist/kolibri/kol-badge.entry.js.map +1 -1
  374. package/dist/kolibri/kol-breadcrumb.entry.js +1 -1
  375. package/dist/kolibri/kol-breadcrumb.entry.js.map +1 -1
  376. package/dist/kolibri/kol-button-group.entry.js +1 -1
  377. package/dist/kolibri/kol-button-group.entry.js.map +1 -1
  378. package/dist/kolibri/kol-button-link.entry.js +1 -1
  379. package/dist/kolibri/kol-button-link.entry.js.map +1 -1
  380. package/dist/kolibri/kol-button-wc_3.entry.js +1 -1
  381. package/dist/kolibri/kol-button-wc_3.entry.js.map +1 -1
  382. package/dist/kolibri/kol-button.entry.js +1 -1
  383. package/dist/kolibri/kol-button.entry.js.map +1 -1
  384. package/dist/kolibri/kol-card.entry.js +1 -1
  385. package/dist/kolibri/kol-card.entry.js.map +1 -1
  386. package/dist/kolibri/kol-details.entry.js +1 -1
  387. package/dist/kolibri/kol-details.entry.js.map +1 -1
  388. package/dist/kolibri/kol-form.entry.js.map +1 -1
  389. package/dist/kolibri/kol-heading.entry.js +1 -1
  390. package/dist/kolibri/kol-heading.entry.js.map +1 -1
  391. package/dist/kolibri/kol-icon.entry.js.map +1 -1
  392. package/dist/kolibri/kol-image.entry.js.map +1 -1
  393. package/dist/kolibri/kol-indented-text.entry.js +1 -1
  394. package/dist/kolibri/kol-indented-text.entry.js.map +1 -1
  395. package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
  396. package/dist/kolibri/kol-input-checkbox.entry.js.map +1 -1
  397. package/dist/kolibri/kol-input-color.entry.js +1 -1
  398. package/dist/kolibri/kol-input-color.entry.js.map +1 -1
  399. package/dist/kolibri/kol-input-date.entry.js +1 -1
  400. package/dist/kolibri/kol-input-date.entry.js.map +1 -1
  401. package/dist/kolibri/kol-input-email.entry.js +1 -1
  402. package/dist/kolibri/kol-input-email.entry.js.map +1 -1
  403. package/dist/kolibri/kol-input-file.entry.js +1 -1
  404. package/dist/kolibri/kol-input-file.entry.js.map +1 -1
  405. package/dist/kolibri/kol-input-number.entry.js +1 -1
  406. package/dist/kolibri/kol-input-number.entry.js.map +1 -1
  407. package/dist/kolibri/kol-input-password.entry.js +1 -1
  408. package/dist/kolibri/kol-input-password.entry.js.map +1 -1
  409. package/dist/kolibri/kol-input-radio-group.entry.js.map +1 -1
  410. package/dist/kolibri/kol-input-radio.entry.js +1 -1
  411. package/dist/kolibri/kol-input-radio.entry.js.map +1 -1
  412. package/dist/kolibri/kol-input-range.entry.js +1 -1
  413. package/dist/kolibri/kol-input-range.entry.js.map +1 -1
  414. package/dist/kolibri/kol-input-text.entry.js +1 -1
  415. package/dist/kolibri/kol-input-text.entry.js.map +1 -1
  416. package/dist/kolibri/kol-kolibri.entry.js +1 -1
  417. package/dist/kolibri/kol-kolibri.entry.js.map +1 -1
  418. package/dist/kolibri/kol-link-button.entry.js +1 -1
  419. package/dist/kolibri/kol-link-button.entry.js.map +1 -1
  420. package/dist/kolibri/kol-link-group.entry.js +1 -1
  421. package/dist/kolibri/kol-link-group.entry.js.map +1 -1
  422. package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
  423. package/dist/kolibri/kol-link.entry.js +1 -1
  424. package/dist/kolibri/kol-link.entry.js.map +1 -1
  425. package/dist/kolibri/kol-logo.entry.js +1 -1
  426. package/dist/kolibri/kol-logo.entry.js.map +1 -1
  427. package/dist/kolibri/kol-modal.entry.js +1 -1
  428. package/dist/kolibri/kol-modal.entry.js.map +1 -1
  429. package/dist/kolibri/kol-nav.entry.js +1 -1
  430. package/dist/kolibri/kol-nav.entry.js.map +1 -1
  431. package/dist/kolibri/kol-pagination.entry.js +1 -1
  432. package/dist/kolibri/kol-pagination.entry.js.map +1 -1
  433. package/dist/kolibri/kol-popover.entry.js +4 -0
  434. package/dist/kolibri/kol-popover.entry.js.map +1 -0
  435. package/dist/kolibri/kol-progress.entry.js +1 -1
  436. package/dist/kolibri/kol-progress.entry.js.map +1 -1
  437. package/dist/kolibri/kol-quote.entry.js +1 -1
  438. package/dist/kolibri/kol-quote.entry.js.map +1 -1
  439. package/dist/kolibri/kol-select.entry.js +1 -1
  440. package/dist/kolibri/kol-select.entry.js.map +1 -1
  441. package/dist/kolibri/kol-skip-nav.entry.js +1 -1
  442. package/dist/kolibri/kol-skip-nav.entry.js.map +1 -1
  443. package/dist/kolibri/kol-span-wc.entry.js.map +1 -1
  444. package/dist/kolibri/kol-span.entry.js +1 -1
  445. package/dist/kolibri/kol-span.entry.js.map +1 -1
  446. package/dist/kolibri/kol-spin.entry.js +1 -1
  447. package/dist/kolibri/kol-spin.entry.js.map +1 -1
  448. package/dist/kolibri/kol-table.entry.js +1 -1
  449. package/dist/kolibri/kol-table.entry.js.map +1 -1
  450. package/dist/kolibri/kol-tabs.entry.js +1 -1
  451. package/dist/kolibri/kol-tabs.entry.js.map +1 -1
  452. package/dist/kolibri/kol-textarea.entry.js +1 -1
  453. package/dist/kolibri/kol-textarea.entry.js.map +1 -1
  454. package/dist/kolibri/kol-toast.entry.js +1 -1
  455. package/dist/kolibri/kol-toast.entry.js.map +1 -1
  456. package/dist/kolibri/kol-tooltip.entry.js +1 -1
  457. package/dist/kolibri/kol-tooltip.entry.js.map +1 -1
  458. package/dist/kolibri/kol-version.entry.js +1 -1
  459. package/dist/kolibri/kol-version.entry.js.map +1 -1
  460. package/dist/kolibri/kolibri.esm.js +1 -1
  461. package/dist/kolibri/kolibri.esm.js.map +1 -1
  462. package/dist/kolibri/open-7d64cfaf.js +4 -0
  463. package/dist/kolibri/open-7d64cfaf.js.map +1 -0
  464. package/dist/kolibri/prop.validators-e402ad49.js.map +1 -1
  465. package/dist/kolibri/validation-a42d9cc9.js +4 -0
  466. package/dist/kolibri/{validation-b331e3a7.js.map → validation-a42d9cc9.js.map} +1 -1
  467. package/dist/types/components/abbr/component.d.ts +3 -3
  468. package/dist/types/components/abbr/types.d.ts +2 -2
  469. package/dist/types/components/badge/component.d.ts +5 -8
  470. package/dist/types/components/button/component.d.ts +5 -5
  471. package/dist/types/components/button/shadow.d.ts +3 -3
  472. package/dist/types/components/button-link/component.d.ts +2 -2
  473. package/dist/types/components/kolibri/component.d.ts +5 -3
  474. package/dist/types/components/link/component.d.ts +5 -5
  475. package/dist/types/components/link/shadow.d.ts +3 -3
  476. package/dist/types/components/link-button/component.d.ts +2 -2
  477. package/dist/types/components/pagination/component.d.ts +5 -5
  478. package/dist/types/components/popover/shadow.d.ts +35 -0
  479. package/dist/types/components/popover/test/html.mock.d.ts +4 -0
  480. package/dist/types/components/tabs/component.d.ts +6 -6
  481. package/dist/types/components/tooltip/component.d.ts +4 -4
  482. package/dist/types/components.d.ts +357 -324
  483. package/dist/types/types/button-link.d.ts +6 -6
  484. package/dist/types/types/props/alignment.d.ts +6 -1
  485. package/dist/types/types/props/color.d.ts +20 -0
  486. package/dist/types/types/props/icon.d.ts +3 -3
  487. package/dist/types/types/props/index.d.ts +1 -1
  488. package/dist/types/utils/prop.validators.d.ts +1 -1
  489. package/dist/types/utils/validators/alignment.d.ts +2 -2
  490. package/doc/abbr.md +7 -3
  491. package/doc/accordion.md +50 -24
  492. package/doc/alert.md +7 -5
  493. package/doc/badge.md +20 -28
  494. package/doc/breadcrumb.md +10 -8
  495. package/doc/button-link.md +2 -2
  496. package/doc/button.md +39 -68
  497. package/doc/card.md +17 -61
  498. package/doc/details.md +12 -9
  499. package/doc/form.md +4 -4
  500. package/doc/heading.md +18 -11
  501. package/doc/icon-font-awesome.md +1 -1
  502. package/doc/icon-icofont.md +1 -1
  503. package/doc/icon.md +10 -14
  504. package/doc/image.md +27 -20
  505. package/doc/indented-text.md +1 -7
  506. package/doc/input-checkbox.md +14 -10
  507. package/doc/input-color.md +23 -26
  508. package/doc/input-date.md +28 -31
  509. package/doc/input-email.md +29 -28
  510. package/doc/input-file.md +23 -21
  511. package/doc/input-number.md +29 -58
  512. package/doc/input-password.md +24 -24
  513. package/doc/input-radio-group.md +4 -4
  514. package/doc/input-radio.md +26 -8
  515. package/doc/input-range.md +6 -9
  516. package/doc/input-text.md +32 -34
  517. package/doc/kolibri.md +15 -10
  518. package/doc/link-button.md +6 -11
  519. package/doc/link-group.md +20 -18
  520. package/doc/link.md +18 -39
  521. package/doc/logo.md +4 -8
  522. package/doc/modal.md +36 -54
  523. package/doc/nav.md +49 -37
  524. package/doc/pagination.md +17 -22
  525. package/doc/popover.md +19 -0
  526. package/doc/progress.md +7 -7
  527. package/doc/quote.md +11 -8
  528. package/doc/select.md +27 -18
  529. package/doc/skip-nav.md +10 -5
  530. package/doc/span.md +5 -5
  531. package/doc/spin.md +4 -5
  532. package/doc/table.md +14 -66
  533. package/doc/tabs.md +27 -39
  534. package/doc/textarea.md +28 -29
  535. package/doc/toast.md +15 -8
  536. package/doc/tooltip.md +7 -7
  537. package/doc/version.md +5 -8
  538. package/jest-test-results.json +1 -1
  539. package/package.json +3 -2
  540. package/vscode-custom-data.json +184 -153
  541. package/dist/cjs/controller-a1c1ce64.js.map +0 -1
  542. package/dist/cjs/index-1266b30d.js +0 -4
  543. package/dist/cjs/index-1266b30d.js.map +0 -1
  544. package/dist/components/index2.js +0 -4
  545. package/dist/components/index2.js.map +0 -1
  546. package/dist/esm/controller-fd64aa81.js.map +0 -1
  547. package/dist/esm/index-d14da386.js +0 -4
  548. package/dist/esm/index-d14da386.js.map +0 -1
  549. package/dist/kolibri/controller-0bcb86ac.js +0 -4
  550. package/dist/kolibri/controller-fd64aa81.js +0 -4
  551. package/dist/kolibri/controller-fd64aa81.js.map +0 -1
  552. package/dist/kolibri/index-d14da386.js +0 -4
  553. package/dist/kolibri/index-d14da386.js.map +0 -1
  554. package/dist/kolibri/validation-b331e3a7.js +0 -4
  555. package/dist/types/core/declare.d.ts +0 -10
  556. /package/dist/kolibri/{controller-bc7e1fb9.js.map → controller-0f18a72b.js.map} +0 -0
  557. /package/dist/kolibri/{controller-0bcb86ac.js.map → controller-22781e1d.js.map} +0 -0
  558. /package/dist/kolibri/{controller-1827c5e4.js.map → controller-a9333e53.js.map} +0 -0
  559. /package/dist/kolibri/{controller-icon-b3feb2a8.js.map → controller-icon-8695323b.js.map} +0 -0
package/doc/icon.md CHANGED
@@ -1,14 +1,10 @@
1
1
  # Icon
2
2
 
3
- Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut `_icon` gesteuert werden und erfolgt durch das Attribut `_aria-label` barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
3
+ Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_aria-label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.
4
4
 
5
- Folgende Icon-Fonts werden _`out-of-the-box`_ unterstützt.
5
+ Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Codicons"></kol-lik> unterstützt.
6
6
 
7
- - [Codicons]
8
- - [Font-Awesome]
9
- - [Icofont]
10
-
11
- <kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateien der Icon-Fonts eingebunden sind.</kol-alert>
7
+ <kol-alert _heading="Hinweis" _type="info">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>
12
8
 
13
9
  ## Konstruktion
14
10
 
@@ -24,9 +20,13 @@ Die Komponente **Icon** wird über das HTML-Tag `kol-icon` erzeugt.
24
20
 
25
21
  <kol-icon _aria-label="Zu Hause" _icon="codicon codicon-home"></kol-icon>
26
22
 
27
- ## Verwendung
23
+ ### Icon
24
+
25
+ Das Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objekt.
26
+ Als String übergeben Sie die Iconklasse (z.B.: `_icon="codicon codicon-home`), das Icon wird links vom Text angezeigt.
27
+ Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
28
28
 
29
- ### Best practices
29
+ <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="Übersicht Codicons"></kol-link>
30
30
 
31
31
  ## Barrierefreiheit
32
32
 
@@ -34,10 +34,6 @@ Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.
34
34
 
35
35
  - https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/
36
36
 
37
- ### Aria-Hidden
38
-
39
- Die Auszeichnung `aria-hidden` ist eigentlich nicht erforderlich, da die aktuellen Screenreader, wie NVDA und JAWS, es auch ohne `aria-hidden` nicht vorlesen.
40
-
41
37
  ### Aria-Label
42
38
 
43
39
  Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschriftet werden.
@@ -56,7 +52,7 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
56
52
  | Property | Attribute | Description | Type | Default |
57
53
  | ------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
58
54
  | `_ariaLabel` _(required)_ | `_aria-label` | Gibt das Aria-Label am Icon an. | `string` | `undefined` |
59
- | `_icon` _(required)_ | `_icon` | Gibt einen Identifier eines Icons aus den Icon's an. | `string` | `undefined` |
55
+ | `_icon` _(required)_ | `_icon` | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`). | `string` | `undefined` |
60
56
  | `_part` | `_part` | <span class="text-red-500">**[DEPRECATED]**</span> Das Styling sollte stets über CSS erfolgen.<br/><br/>Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/) | `string \| undefined` | `undefined` |
61
57
 
62
58
 
package/doc/image.md CHANGED
@@ -4,9 +4,9 @@ Die **Image**-Komponente dient dazu, Bilder darzustellen.
4
4
 
5
5
  ## Konstruktion
6
6
 
7
- Die Komponente **Image** wird über das HTML-Tag `kol-image` erzeugt.
7
+ Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
8
8
 
9
- ### Code Beispiele
9
+ ### Code
10
10
 
11
11
  ```html
12
12
  <kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
@@ -14,27 +14,34 @@ Die Komponente **Image** wird über das HTML-Tag `kol-image` erzeugt.
14
14
  <kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
15
15
  ```
16
16
 
17
- ## Verwendung
17
+ ### Beispiele
18
+
19
+ <kol-image _src="url-zum-bild.jpg" _alt="Beschreibung des Bildes"></kol-image>
20
+ <kol-image _src="nur-dekoratives-bild.jpg" _alt=""></kol-image>
21
+ <kol-image _src="hintergrundbild-der-hero-sektion.jpg" _alt="" _loading="eager"></kol-image>
18
22
 
19
- ### Best practices
23
+ ## Verwendung
20
24
 
21
- #### \_srcset
25
+ ### Bilder in unterschiedlicher Auflösung und/oder Seitenverhältnis
22
26
 
23
- Mittels `_srcset` (und `_sizes`) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
24
- Desweiteren können mittels `_srcset` auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
25
- Auch bei Verwendung von `_srcset` sollte `_src` genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) `srcset` nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
26
- Für weitere Infos zu `_srcset` siehe [Links und Referenzen](#links-und-referenzen)
27
+ Mittels **`_srcset`** (und **`_sizes`**) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
28
+ Des Weiteren können mittels **`_srcset`** auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
29
+ Auch bei Verwendung von **`_srcset`** sollte **`_src`** genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) **`srcset`** nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
30
+ <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _label="MDN Artikel zu srcset"></kol-link>
31
+ <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _label="MDN Artikel zu sizes"></kol-link>
32
+ Für weitere Infos zu **`_srcset`** siehe [Links und Referenzen](#links-und-referenzen)
27
33
 
28
- #### \_loading
34
+ ### Ladeverhalten
29
35
 
30
- Dieses Attribut ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
36
+ Das Attribut **`_loading`** ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
31
37
  `eager` sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei `lazy` lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss `eager` nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)
38
+ <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _label="MDN Artikel zu loading"></kol-link>
32
39
 
33
40
  ## Barrierefreiheit
34
41
 
35
- ### \_alt
42
+ ### Alternativtext
36
43
 
37
- Dieses Attribut ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
44
+ Das Attribut **`_alt`** ist verpflichtend, kann jedoch bei rein dekorativen Bildern leer (`_alt=""`) gelassen werden.
38
45
  Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt, wenn das Bild nicht geladen werden kann/soll.
39
46
 
40
47
  ## Links und Referenzen
@@ -46,13 +53,13 @@ Ausführliche Erklärung zu `_srcset` und `_sizes`: https://www.mediaevent.de/ht
46
53
 
47
54
  ## Properties
48
55
 
49
- | Property | Attribute | Description | Type | Default |
50
- | ------------------- | ---------- | --------------------------------------------------------- | -------------------------------- | ----------- |
51
- | `_alt` _(required)_ | `_alt` | Gibt den alternativen Text an. | `string` | `undefined` |
52
- | `_loading` | `_loading` | Gibt den Lademodus an. | `"eager" \| "lazy" \| undefined` | `'lazy'` |
53
- | `_sizes` | `_sizes` | ... | `string \| undefined` | `undefined` |
54
- | `_src` _(required)_ | `_src` | Gibt die Quell-URL an. | `string` | `undefined` |
55
- | `_srcset` | `_srcset` | Gibt eine Liste von Quell-URLs mit Breiten der Bilder an. | `string \| undefined` | `undefined` |
56
+ | Property | Attribute | Description | Type | Default |
57
+ | ------------------- | ---------- | ------------------------------------------------------------------------- | -------------------------------- | ----------- |
58
+ | `_alt` _(required)_ | `_alt` | Setzt den alternativen Text. | `string` | `undefined` |
59
+ | `_loading` | `_loading` | Setzt den Lademodus. | `"eager" \| "lazy" \| undefined` | `'lazy'` |
60
+ | `_sizes` | `_sizes` | Setzt Größen für unterschiedliche Auflösungen, unterstützend für _srcset. | `string \| undefined` | `undefined` |
61
+ | `_src` _(required)_ | `_src` | Setzt die Quell-URL des Bildes. | `string` | `undefined` |
62
+ | `_srcset` | `_srcset` | Setzt eine Liste von Quell-URLs mit Breiten der Bilder. | `string \| undefined` | `undefined` |
56
63
 
57
64
 
58
65
  ----------------------------------------------
package/doc/indented-text.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # IndentedText
2
2
 
3
- Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate.
4
-
5
- In der Komponente kann beliebiger HTML-Code verwendet werden.
3
+ Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate (für verlinkte Zitate kann auch die <kol-link _href="/docs/components/quote/" _label="kol-quote-Komponente"></kol-link> verwendet werden.).
6
4
 
7
5
  ## Konstruktion
8
6
 
@@ -37,10 +35,6 @@ Die Komponente besitzt keine weiteren Attribute. Der hervorzuhebende Text wird z
37
35
 
38
36
  Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informationen optisch hervorzuheben.
39
37
 
40
- ## Barrierefreiheit
41
-
42
- <!--## Links und Referenzen
43
-
44
38
  <!-- Auto Generated Below -->
45
39
 
46
40
 
package/doc/input-checkbox.md CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box.
4
4
 
5
- Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch_** dar. Hierbei wird die Checkbox zu einem Schieberegler gewandelt, der bei Anklicken nach rechts (aktiv) bzw. nach links (inaktiv) verschoben wird.
6
-
7
5
  ## Konstruktion
8
6
 
9
7
  ### Code
@@ -26,15 +24,21 @@ Eine optische Alternative zur Standard-Checkbox stellt die Ausgabe als **_Switch
26
24
 
27
25
  Checkboxen werden als Einzelelement oder als Liste beliebig vieler Checkboxen verwendet. Sie ermöglichen den Nutzer:innen, aus einer vordefinierten Anzahl von Möglichkeiten eine oder mehrere auszuwählen.
28
26
 
27
+ ### Varianten
28
+
29
+ Mittels des Attributs **`_variant`** können folgende Varianten ausgewählt werden (Beispiele siehe oben):
30
+
31
+ - `button`: wechselt das Icon je nach Zustand (Beispiel 3+4)
32
+ - `switch`: verwandelt die Checkbox in einen horizontalen Schalter, hierbei gilt rechts als aktiv und links als inaktiv. (Beispiel 2)
33
+
29
34
  ### Best practices
30
35
 
31
36
  - Verwenden Sie eine einzelne Checkbox, wenn Sie von den Nutzer:innen eine einfach Bestätigung wünschen, z.B. Akzeptieren der Datenschutzerklärung.
32
37
  - Verwenden Sie eine Gruppe von Checkboxen, um den Nutzer:innen die Möglichkeit zu geben einen oder mehrere Werte auszuwählen.
33
- - Vermeiden Sie zu viele Checkboxen, da hierdurch die Übersichtlichkeit verloren geht. Verwenden Sie in diesem Fall eine Select-Box.
34
38
 
35
39
  ## Barrierefreiheit
36
40
 
37
- Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <a href="?path=/story/react-select-beschreibung--page">Select-Box</a>.
41
+ Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <kol-link _href="/docs/components/select">Select-Box mit **`_multiple`**</kol-link>.
38
42
 
39
43
  Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
40
44
 
@@ -59,21 +63,21 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
59
63
  | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
60
64
  | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
61
65
  | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
62
- | `_checked` | `_checked` | Gibt an, ob die Checkbox ausgewählt ist oder nicht. | `boolean \| undefined` | `false` |
63
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
66
+ | `_checked` | `_checked` | Gibt an, ob die Checkbox ausgewählt ist oder nicht. (kann gelesen und gesetzt werden) | `boolean \| undefined` | `false` |
67
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
64
68
  | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
65
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
66
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
69
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
70
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
67
71
  | `_icon` | `_icon` | Ermöglicht das Überschreiben der Icons für die Checkbox. | `string \| undefined \| { checked: string; indeterminate?: string \| undefined; unchecked?: string \| undefined; } & { checked?: string \| undefined; indeterminate: string; unchecked?: string \| undefined; } & { checked?: string \| undefined; indeterminate?: string \| undefined; unchecked: string; }` | `undefined` |
68
72
  | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
69
73
  | `_indeterminate` | `_indeterminate` | Gibt an, ob die Checkbox weder ausgewählt noch nicht ausgewählt ist. | `boolean \| undefined` | `undefined` |
70
74
  | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
71
75
  | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
72
- | `_required` | `_required` | Gibt an, ob die Checkbox ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
76
+ | `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
73
77
  | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
74
78
  | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
75
79
  | `_type` | `_type` | <span class="text-red-500">**[DEPRECATED]**</span> Verwende stattdessen das Attribute _variant.<br/><br/>Gibt an, welchen Type das Input haben soll. | `"button" \| "checkbox" \| "switch" \| undefined` | `undefined` |
76
- | `_value` | `_value` | Gibt den Wert der Checkbox an. | `string \| undefined` | `undefined` |
80
+ | `_value` | `_value` | Gibt den Schlüssel/Namen der Checkbox an. ({ [value]: [checked] }) | `string \| undefined` | `undefined` |
77
81
  | `_variant` | `_variant` | Gibt an, welchen Type das Input haben soll. | `"button" \| "checkbox" \| "switch" \| undefined` | `undefined` |
78
82
 
79
83
 
package/doc/input-color.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # InputColor
2
2
 
3
- Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Angabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
3
+ Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten.
4
4
 
5
5
  ## Konstruktion
6
6
 
7
7
  ### Code
8
8
 
9
9
  ```html
10
- <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#ff0000"> Hintergrundfarbe </kol-input-color>
10
+ <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#d4fcf4"> Hintergrundfarbe </kol-input-color>
11
11
  ```
12
12
 
13
13
  ### Beispiel
14
14
 
15
- <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#ff0000">Hintergrundfarbe</kol-input-color>
15
+ <kol-input-color _id="meine_farbe" _name="meine_farbe" _value="#d4fcf4">Hintergrundfarbe</kol-input-color>
16
16
 
17
17
  ## Verwendung
18
18
 
@@ -20,7 +20,7 @@ Stellen Sie die Default-Farbe über das Attribut `_value` ein. Verwenden Sie hie
20
20
 
21
21
  ### Best practices
22
22
 
23
- - Achten Sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
23
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
24
24
 
25
25
  ## Barrierefreiheit
26
26
 
@@ -28,46 +28,43 @@ Beachten Sie, dass die **InputColor**-Komponente nicht vollständig barrierefrei
28
28
 
29
29
  Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgefertigten Farbauswahlliste, z.B. über Checkboxen oder Select-Felder.
30
30
 
31
- Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
32
-
33
31
  ### Tastatursteuerung
34
32
 
35
33
  | Taste | Funktion |
36
34
  | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
37
35
  | `Tab` | Fokussiert das Eingabefeld. Bei geöffnetem Dialogfeld kann mit der Tab-Taste zwischen den Steuerfeldern gewechselt werden. |
38
36
  | `Enter` | Öffnet bzw. schließt das Dialogfeld der Komponente. Bei fokussierter Pipette wird mit der Enter-Taste die Funktion **_Pipette_** gestartet. |
39
- | `ESC` | Beendet die Pipetten-Funktion. . |
37
+ | `ESC` | Beendet die Pipettenfunktion. Schließt das Dialogfeld, wenn die Pipettenfunktion nicht aktiv ist. |
40
38
  | `Pfeil-Tasten (rechts / links)` | Verschieben bei fokussiertem Feld **_Farbspektrum_** den Auswahlpunkt. |
41
39
  | `Pfeil-Tasten (oben / unten)` | Ändert bei fokussiertem Feld **_Farbsystem_** die Auswahl. |
42
40
 
43
41
  ## Links und Referenzen
44
42
 
45
43
  - https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
46
- - https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
47
44
 
48
45
  <!-- Auto Generated Below -->
49
46
 
50
47
 
51
48
  ## Properties
52
49
 
53
- | Property | Attribute | Description | Type | Default |
54
- | --------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
55
- | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
56
- | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
57
- | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
58
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
59
- | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
60
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
61
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
62
- | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
63
- | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
64
- | `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` |
65
- | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
66
- | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
67
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
68
- | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
69
- | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
70
- | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
50
+ | Property | Attribute | Description | Type | Default |
51
+ | --------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
52
+ | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
53
+ | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
54
+ | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
55
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
56
+ | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
57
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
58
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
59
+ | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
60
+ | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
61
+ | `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` |
62
+ | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
63
+ | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
64
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
65
+ | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
66
+ | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
67
+ | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
71
68
 
72
69
 
73
70
  ## Dependencies
package/doc/input-date.md CHANGED
@@ -7,26 +7,24 @@ Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können k
7
7
  ### Code
8
8
 
9
9
  ```html
10
- <kol-input-date _id="mein_datum" _name="mein_datum" _type="date"> Erstellungsdatum </kol-input-date>
10
+ <kol-input-date _id="mein_datum" _name="mein_datum" _type="date">Erstellungsdatum</kol-input-date>
11
11
  ```
12
12
 
13
13
  ### Beispiel
14
14
 
15
- <kol-input-date _id="mein_datum" _name="mein_datum" _type="date">
16
- Erstellungsdatum
17
- </kol-input-date>
15
+ <kol-input-date _id="mein_datum" _name="mein_datum" _type="date">Erstellungsdatum</kol-input-date>
18
16
 
19
17
  ## Verwendung
20
18
 
21
19
  Die **InputDate**-Komponente kann für die Erfassung von Daten verwendet werden. Es verwendet intern die InputNumber-Komponente.
22
20
 
23
- <kol-alert _type="info">Beachten Sie, dass im <b>Firefox</b> nicht alle <b>Typen</b> der **InputDate**-Komponente funktional sind. Es werden bei den Typen <b>Month</b>, <b>Week</b> und <b>Datum & Zeit</b> keine Auswahldialoge angezeigt.</kol-alert>
21
+ <kol-alert _type="info">Beachten Sie, dass im **Firefox** nicht alle **`_types`** der **InputDate**-Komponente funktional sind. Es werden bei den Typen `month`, `time` und `week` keine Auswahldialoge angezeigt.</kol-alert>
24
22
 
25
23
  Die Komponente zeichnet sich dadurch aus, dass sie zahlreiche Ziffern-basierte Eingabemuster unterstützt. Hierbei ist es wichtig zu beachten, dass sich das Verhalten bei der Eingabe von Browser zu Browser und Geräte zu Gerät unterscheiden kann. Beispielsweise ist es möglich beim Datum, 01.01.999999 einzugeben, auch wenn max=2022-02-02 ist. Der Feldwert ist aber trotzdem 2022-02-02.
26
24
 
27
25
  ### Best practices
28
26
 
29
- - Achten sie darauf, die Pflichtfelder `id` und `name` korrekt zu setzen.
27
+ - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
30
28
 
31
29
  ## Barrierefreiheit
32
30
 
@@ -52,37 +50,36 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
52
50
  - https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/
53
51
  - https://a11ysupport.io/tech/html/input(type-date)_element
54
52
  - https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
55
- - https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
56
53
 
57
54
  <!-- Auto Generated Below -->
58
55
 
59
56
 
60
57
  ## Properties
61
58
 
62
- | Property | Attribute | Description | Type | Default |
63
- | --------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
64
- | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
65
- | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
66
- | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
67
- | `_disabled` | `_disabled` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
68
- | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
69
- | `_hideLabel` | `_hide-label` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
70
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
71
- | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
72
- | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
73
- | `_list` | `_list` | Gibt die Liste der Vorschlagszahlen an. | `string \| string[] \| undefined` | `undefined` |
74
- | `_max` | `_max` | Gibt den größtmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
75
- | `_min` | `_min` | Gibt den kleinstmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
76
- | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
77
- | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
78
- | `_readOnly` | `_read-only` | Gibt an, ob das Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
79
- | `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
80
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
81
- | `_step` | `_step` | Gibt die Schrittweite der Wertveränderung an | `number \| undefined` | `undefined` |
82
- | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
83
- | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
84
- | `_type` | `_type` | Gibt den Typ des Eingabefeldes an. | `"date" \| "datetime-local" \| "month" \| "time" \| "week"` | `'date'` |
85
- | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined` | `undefined` |
59
+ | Property | Attribute | Description | Type | Default |
60
+ | --------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
61
+ | `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
62
+ | `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
63
+ | `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
64
+ | `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
65
+ | `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
66
+ | `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
67
+ | `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
68
+ | `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
69
+ | `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
70
+ | `_list` | `_list` | Gibt die Liste der Vorschlagszahlen an. | `string \| string[] \| undefined` | `undefined` |
71
+ | `_max` | `_max` | Gibt den größtmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
72
+ | `_min` | `_min` | Gibt den kleinstmöglichen Datumswert an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| undefined` | `undefined` |
73
+ | `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
74
+ | `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
75
+ | `_readOnly` | `_read-only` | Setzt das Eingabefeld in den schreibgeschützten Modus. | `boolean \| undefined` | `undefined` |
76
+ | `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
77
+ | `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: Alignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: Alignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
78
+ | `_step` | `_step` | Gibt die Schrittweite der Wertveränderung an | `number \| undefined` | `undefined` |
79
+ | `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
80
+ | `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
81
+ | `_type` | `_type` | Gibt den Typ des Eingabefeldes an. | `"date" \| "datetime-local" \| "month" \| "time" \| "week"` | `'date'` |
82
+ | `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `Date \| `${number}-${number}-${number}T${number}:${number}:${number}` \| `${number}-${number}-${number}T${number}:${number}` \| `${number}-${number}-${number}` \| `${number}-${number}` \| `${number}-W${number}` \| `${number}:${number}:${number}` \| `${number}:${number}` \| null \| undefined` | `undefined` |
86
83
 
87
84
 
88
85
  ## Dependencies