@public-ui/components 1.1.10-rc.15 → 1.1.10-rc.17

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 (523) hide show
  1. package/custom-elements.json +1 -1
  2. package/dist/cjs/{app-globals-9091d361.js → app-globals-6e05ba86.js} +1 -1
  3. package/dist/cjs/{button-link-71b934a3.js → button-link-a7bfc254.js} +1 -1
  4. package/dist/cjs/{controller-d21c1490.js → controller-3b68cee3.js} +1 -1
  5. package/dist/cjs/{controller-2e8bd56c.js → controller-530e7698.js} +1 -1
  6. package/dist/cjs/{controller-4b40db50.js → controller-58df7e65.js} +1 -1
  7. package/dist/cjs/{controller-5c8efeab.js → controller-59bb5443.js} +1 -1
  8. package/dist/cjs/{controller-dad77940.js → controller-73726e4f.js} +1 -1
  9. package/dist/cjs/{controller-306ae734.js → controller-8416b39d.js} +1 -1
  10. package/dist/cjs/{devtools-b909359b.js → devtools-63761608.js} +1 -1
  11. package/dist/cjs/{icon-ff2a9d06.js → icon-158213cb.js} +1 -1
  12. package/dist/cjs/index.cjs.js +1 -1
  13. package/dist/cjs/kol-abbr.cjs.entry.js +1 -1
  14. package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
  15. package/dist/cjs/kol-alert.cjs.entry.js +1 -1
  16. package/dist/cjs/kol-badge.cjs.entry.js +1 -1
  17. package/dist/cjs/kol-breadcrumb.cjs.entry.js +1 -1
  18. package/dist/cjs/kol-button-group.cjs.entry.js +1 -1
  19. package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
  20. package/dist/cjs/kol-button-wc_3.cjs.entry.js +1 -1
  21. package/dist/cjs/kol-button.cjs.entry.js +1 -1
  22. package/dist/cjs/kol-card.cjs.entry.js +1 -1
  23. package/dist/cjs/kol-color.cjs.entry.js +1 -1
  24. package/dist/cjs/kol-details.cjs.entry.js +1 -1
  25. package/dist/cjs/kol-form.cjs.entry.js +1 -1
  26. package/dist/cjs/kol-heading.cjs.entry.js +1 -1
  27. package/dist/cjs/kol-icon.cjs.entry.js +1 -1
  28. package/dist/cjs/kol-indented-text.cjs.entry.js +1 -1
  29. package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
  30. package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
  31. package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
  32. package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
  33. package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
  34. package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
  35. package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
  36. package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
  37. package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
  38. package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
  39. package/dist/cjs/kol-kolibri.cjs.entry.js +1 -1
  40. package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
  41. package/dist/cjs/kol-link-group.cjs.entry.js +1 -1
  42. package/dist/cjs/kol-link-wc.cjs.entry.js +1 -1
  43. package/dist/cjs/kol-link.cjs.entry.js +1 -1
  44. package/dist/cjs/kol-logo.cjs.entry.js +1 -1
  45. package/dist/cjs/kol-modal.cjs.entry.js +1 -1
  46. package/dist/cjs/kol-nav.cjs.entry.js +1 -1
  47. package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
  48. package/dist/cjs/kol-progress.cjs.entry.js +1 -1
  49. package/dist/cjs/kol-select.cjs.entry.js +1 -1
  50. package/dist/cjs/kol-skip-nav.cjs.entry.js +1 -1
  51. package/dist/cjs/kol-span-wc.cjs.entry.js +1 -1
  52. package/dist/cjs/kol-span.cjs.entry.js +1 -1
  53. package/dist/cjs/kol-spin.cjs.entry.js +1 -1
  54. package/dist/cjs/kol-symbol.cjs.entry.js +1 -1
  55. package/dist/cjs/kol-table.cjs.entry.js +1 -1
  56. package/dist/cjs/kol-tabs.cjs.entry.js +1 -1
  57. package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
  58. package/dist/cjs/kol-toast.cjs.entry.js +1 -1
  59. package/dist/cjs/kol-tooltip.cjs.entry.js +1 -1
  60. package/dist/cjs/kol-version.cjs.entry.js +1 -1
  61. package/dist/cjs/kolibri.cjs.js +1 -1
  62. package/dist/cjs/{label-d607638f.js → label-5a6c471b.js} +1 -1
  63. package/dist/cjs/loader.cjs.js +1 -1
  64. package/dist/cjs/prop.validators-e6996125.js +4 -0
  65. package/dist/cjs/{tab-index-054a7680.js → tab-index-66b118c0.js} +1 -1
  66. package/dist/cjs/{validation-2c303be1.js → validation-641f4c30.js} +1 -1
  67. package/dist/cjs/{validation-e130b233.js → validation-6d7b9aa0.js} +1 -1
  68. package/dist/components/component.js +1 -1
  69. package/dist/components/component10.js +1 -1
  70. package/dist/components/component11.js +1 -1
  71. package/dist/components/component13.js +1 -1
  72. package/dist/components/component14.js +1 -1
  73. package/dist/components/component2.js +1 -1
  74. package/dist/components/component3.js +1 -1
  75. package/dist/components/component8.js +1 -1
  76. package/dist/components/controller2.js +1 -1
  77. package/dist/components/kol-abbr.js +1 -1
  78. package/dist/components/kol-accordion.js +1 -1
  79. package/dist/components/kol-breadcrumb.js +1 -1
  80. package/dist/components/kol-button-link.js +1 -1
  81. package/dist/components/kol-card.js +1 -1
  82. package/dist/components/kol-color.js +1 -1
  83. package/dist/components/kol-details.js +1 -1
  84. package/dist/components/kol-heading.js +1 -1
  85. package/dist/components/kol-input-checkbox.js +1 -1
  86. package/dist/components/kol-input-color.js +1 -1
  87. package/dist/components/kol-input-date.js +1 -1
  88. package/dist/components/kol-input-email.js +1 -1
  89. package/dist/components/kol-input-file.js +1 -1
  90. package/dist/components/kol-input-password.js +1 -1
  91. package/dist/components/kol-input-range.js +1 -1
  92. package/dist/components/kol-input-text.js +1 -1
  93. package/dist/components/kol-kolibri.js +1 -1
  94. package/dist/components/kol-link-button.js +1 -1
  95. package/dist/components/kol-link-group.js +1 -1
  96. package/dist/components/kol-logo.js +1 -1
  97. package/dist/components/kol-modal.js +1 -1
  98. package/dist/components/kol-nav.js +1 -1
  99. package/dist/components/kol-skip-nav.js +1 -1
  100. package/dist/components/kol-span.js +1 -1
  101. package/dist/components/kol-spin.js +1 -1
  102. package/dist/components/kol-table.js +1 -1
  103. package/dist/components/kol-tabs.js +1 -1
  104. package/dist/components/kol-textarea.js +1 -1
  105. package/dist/components/kol-toast.js +1 -1
  106. package/dist/components/kol-version.js +1 -1
  107. package/dist/components/prop.validators.js +1 -1
  108. package/dist/components/shadow.js +1 -1
  109. package/dist/components/shadow2.js +1 -1
  110. package/dist/custom-elements/index.js +1 -1
  111. package/dist/esm/{app-globals-60a9735a.js → app-globals-daf921ad.js} +1 -1
  112. package/dist/esm/{button-link-850c8878.js → button-link-ef5135dc.js} +1 -1
  113. package/dist/esm/{controller-e506a1bb.js → controller-2c05cdae.js} +1 -1
  114. package/dist/esm/{controller-11e15255.js → controller-2d55595b.js} +1 -1
  115. package/dist/esm/{controller-3574fbd1.js → controller-62976bd8.js} +1 -1
  116. package/dist/esm/{controller-c792706a.js → controller-9cbb0153.js} +1 -1
  117. package/dist/esm/{controller-d1c76ddd.js → controller-a7535a35.js} +1 -1
  118. package/dist/esm/{controller-e0e7932c.js → controller-e0c08aa1.js} +1 -1
  119. package/dist/esm/{devtools-fd5af773.js → devtools-d3feb71e.js} +1 -1
  120. package/dist/esm/{icon-cce91c6b.js → icon-0bfea48a.js} +1 -1
  121. package/dist/esm/index.js +1 -1
  122. package/dist/esm/kol-abbr.entry.js +1 -1
  123. package/dist/esm/kol-accordion.entry.js +1 -1
  124. package/dist/esm/kol-alert.entry.js +1 -1
  125. package/dist/esm/kol-badge.entry.js +1 -1
  126. package/dist/esm/kol-breadcrumb.entry.js +1 -1
  127. package/dist/esm/kol-button-group.entry.js +1 -1
  128. package/dist/esm/kol-button-link.entry.js +1 -1
  129. package/dist/esm/kol-button-wc_3.entry.js +1 -1
  130. package/dist/esm/kol-button.entry.js +1 -1
  131. package/dist/esm/kol-card.entry.js +1 -1
  132. package/dist/esm/kol-color.entry.js +1 -1
  133. package/dist/esm/kol-details.entry.js +1 -1
  134. package/dist/esm/kol-form.entry.js +1 -1
  135. package/dist/esm/kol-heading.entry.js +1 -1
  136. package/dist/esm/kol-icon.entry.js +1 -1
  137. package/dist/esm/kol-indented-text.entry.js +1 -1
  138. package/dist/esm/kol-input-checkbox.entry.js +1 -1
  139. package/dist/esm/kol-input-color.entry.js +1 -1
  140. package/dist/esm/kol-input-date.entry.js +1 -1
  141. package/dist/esm/kol-input-email.entry.js +1 -1
  142. package/dist/esm/kol-input-file.entry.js +1 -1
  143. package/dist/esm/kol-input-number.entry.js +1 -1
  144. package/dist/esm/kol-input-password.entry.js +1 -1
  145. package/dist/esm/kol-input-radio.entry.js +1 -1
  146. package/dist/esm/kol-input-range.entry.js +1 -1
  147. package/dist/esm/kol-input-text.entry.js +1 -1
  148. package/dist/esm/kol-kolibri.entry.js +1 -1
  149. package/dist/esm/kol-link-button.entry.js +1 -1
  150. package/dist/esm/kol-link-group.entry.js +1 -1
  151. package/dist/esm/kol-link-wc.entry.js +1 -1
  152. package/dist/esm/kol-link.entry.js +1 -1
  153. package/dist/esm/kol-logo.entry.js +1 -1
  154. package/dist/esm/kol-modal.entry.js +1 -1
  155. package/dist/esm/kol-nav.entry.js +1 -1
  156. package/dist/esm/kol-pagination.entry.js +1 -1
  157. package/dist/esm/kol-progress.entry.js +1 -1
  158. package/dist/esm/kol-select.entry.js +1 -1
  159. package/dist/esm/kol-skip-nav.entry.js +1 -1
  160. package/dist/esm/kol-span-wc.entry.js +1 -1
  161. package/dist/esm/kol-span.entry.js +1 -1
  162. package/dist/esm/kol-spin.entry.js +1 -1
  163. package/dist/esm/kol-symbol.entry.js +1 -1
  164. package/dist/esm/kol-table.entry.js +1 -1
  165. package/dist/esm/kol-tabs.entry.js +1 -1
  166. package/dist/esm/kol-textarea.entry.js +1 -1
  167. package/dist/esm/kol-toast.entry.js +1 -1
  168. package/dist/esm/kol-tooltip.entry.js +1 -1
  169. package/dist/esm/kol-version.entry.js +1 -1
  170. package/dist/esm/kolibri.js +1 -1
  171. package/dist/esm/{label-250da1a6.js → label-919a73c8.js} +1 -1
  172. package/dist/esm/loader.js +1 -1
  173. package/dist/esm/prop.validators-0a1ccf64.js +4 -0
  174. package/dist/esm/{tab-index-1b7a8bc1.js → tab-index-c61711b2.js} +1 -1
  175. package/dist/esm/{validation-ca76c4b9.js → validation-4664ad06.js} +1 -1
  176. package/dist/esm/validation-6e5422b5.js +4 -0
  177. package/dist/kolibri/app-globals-daf921ad.js +4 -0
  178. package/dist/kolibri/assets/codicons/codicon.css +553 -0
  179. package/dist/kolibri/assets/codicons/codicon.csv +408 -0
  180. package/dist/kolibri/assets/codicons/codicon.html +3767 -0
  181. package/dist/kolibri/assets/codicons/codicon.svg +1 -0
  182. package/dist/kolibri/assets/codicons/codicon.ttf +0 -0
  183. package/dist/kolibri/assets/form-simulation.test-submit.js +1 -0
  184. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Black.ttf +0 -0
  185. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-BlackItalic.ttf +0 -0
  186. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Bold.ttf +0 -0
  187. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-BoldItalic.ttf +0 -0
  188. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-ExtraBold.ttf +0 -0
  189. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-ExtraBoldItalic.ttf +0 -0
  190. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-ExtraLight.ttf +0 -0
  191. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-ExtraLightItalic.ttf +0 -0
  192. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Italic.ttf +0 -0
  193. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Light.ttf +0 -0
  194. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-LightItalic.ttf +0 -0
  195. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Medium.ttf +0 -0
  196. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-MediumItalic.ttf +0 -0
  197. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Regular.ttf +0 -0
  198. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-SemiBold.ttf +0 -0
  199. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-SemiBoldItalic.ttf +0 -0
  200. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-Thin.ttf +0 -0
  201. package/dist/kolibri/assets/noto-sans/fonts/NotoSans-ThinItalic.ttf +0 -0
  202. package/{www/assets/fontawesome-free/v6/LICENSE.txt → dist/kolibri/assets/noto-sans/fonts/OFL.txt} +93 -165
  203. package/dist/kolibri/assets/noto-sans/noto-sans.css +11 -0
  204. package/dist/kolibri/button-link-ef5135dc.js +4 -0
  205. package/dist/kolibri/controller-2c05cdae.js +4 -0
  206. package/dist/kolibri/{controller-11e15255.js → controller-2d55595b.js} +1 -1
  207. package/dist/kolibri/{controller-3574fbd1.js → controller-62976bd8.js} +1 -1
  208. package/dist/kolibri/{controller-c792706a.js → controller-9cbb0153.js} +1 -1
  209. package/dist/kolibri/controller-a7535a35.js +4 -0
  210. package/dist/kolibri/{controller-e0e7932c.js → controller-e0c08aa1.js} +1 -1
  211. package/dist/kolibri/{devtools-fd5af773.js → devtools-d3feb71e.js} +1 -1
  212. package/dist/kolibri/{icon-cce91c6b.js → icon-0bfea48a.js} +1 -1
  213. package/dist/kolibri/index.esm.js +1 -1
  214. package/dist/kolibri/kol-abbr.entry.js +1 -1
  215. package/dist/kolibri/kol-accordion.entry.js +1 -1
  216. package/dist/kolibri/kol-alert.entry.js +1 -1
  217. package/dist/kolibri/kol-badge.entry.js +1 -1
  218. package/dist/kolibri/kol-breadcrumb.entry.js +1 -1
  219. package/dist/kolibri/kol-button-group.entry.js +1 -1
  220. package/dist/kolibri/kol-button-link.entry.js +1 -1
  221. package/dist/kolibri/kol-button-wc_3.entry.js +1 -1
  222. package/dist/kolibri/kol-button.entry.js +1 -1
  223. package/dist/kolibri/kol-card.entry.js +1 -1
  224. package/dist/kolibri/kol-color.entry.js +1 -1
  225. package/dist/kolibri/kol-details.entry.js +1 -1
  226. package/dist/kolibri/kol-form.entry.js +1 -1
  227. package/dist/kolibri/kol-heading.entry.js +1 -1
  228. package/dist/kolibri/kol-icon.entry.js +1 -1
  229. package/dist/kolibri/kol-indented-text.entry.js +1 -1
  230. package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
  231. package/dist/kolibri/kol-input-color.entry.js +1 -1
  232. package/dist/kolibri/kol-input-date.entry.js +1 -1
  233. package/dist/kolibri/kol-input-email.entry.js +1 -1
  234. package/dist/kolibri/kol-input-file.entry.js +1 -1
  235. package/dist/kolibri/kol-input-number.entry.js +1 -1
  236. package/dist/kolibri/kol-input-password.entry.js +1 -1
  237. package/dist/kolibri/kol-input-radio.entry.js +1 -1
  238. package/dist/kolibri/kol-input-range.entry.js +1 -1
  239. package/dist/kolibri/kol-input-text.entry.js +1 -1
  240. package/dist/kolibri/kol-kolibri.entry.js +1 -1
  241. package/dist/kolibri/kol-link-button.entry.js +1 -1
  242. package/dist/kolibri/kol-link-group.entry.js +1 -1
  243. package/dist/kolibri/kol-link-wc.entry.js +1 -1
  244. package/dist/kolibri/kol-link.entry.js +1 -1
  245. package/dist/kolibri/kol-logo.entry.js +1 -1
  246. package/dist/kolibri/kol-modal.entry.js +1 -1
  247. package/dist/kolibri/kol-nav.entry.js +1 -1
  248. package/dist/kolibri/kol-pagination.entry.js +1 -1
  249. package/dist/kolibri/kol-progress.entry.js +1 -1
  250. package/dist/kolibri/kol-select.entry.js +1 -1
  251. package/dist/kolibri/kol-skip-nav.entry.js +1 -1
  252. package/dist/kolibri/kol-span-wc.entry.js +1 -1
  253. package/dist/kolibri/kol-span.entry.js +1 -1
  254. package/dist/kolibri/kol-spin.entry.js +1 -1
  255. package/dist/kolibri/kol-symbol.entry.js +1 -1
  256. package/dist/kolibri/kol-table.entry.js +1 -1
  257. package/dist/kolibri/kol-tabs.entry.js +1 -1
  258. package/dist/kolibri/kol-textarea.entry.js +1 -1
  259. package/dist/kolibri/kol-toast.entry.js +1 -1
  260. package/dist/kolibri/kol-tooltip.entry.js +1 -1
  261. package/dist/kolibri/kol-version.entry.js +1 -1
  262. package/dist/kolibri/kolibri.esm.js +1 -1
  263. package/dist/kolibri/label-919a73c8.js +4 -0
  264. package/dist/kolibri/prop.validators-0a1ccf64.js +4 -0
  265. package/dist/kolibri/tab-index-c61711b2.js +4 -0
  266. package/dist/kolibri/{validation-ca76c4b9.js → validation-4664ad06.js} +1 -1
  267. package/{www/build/validation-2d8116e3.js → dist/kolibri/validation-6e5422b5.js} +1 -1
  268. package/dist/types/components/form/component.d.ts +1 -1
  269. package/dist/types/utils/testing.d.ts +0 -1
  270. package/jest-test-results.json +1 -1
  271. package/package.json +2 -2
  272. package/dist/cjs/prop.validators-561175f3.js +0 -4
  273. package/dist/esm/prop.validators-66d85f38.js +0 -4
  274. package/dist/esm/validation-2d8116e3.js +0 -4
  275. package/dist/kolibri/app-globals-60a9735a.js +0 -4
  276. package/dist/kolibri/assets/themes/bamf.css +0 -39
  277. package/dist/kolibri/assets/themes/bmf.bak.css +0 -283
  278. package/dist/kolibri/assets/themes/bmf.css +0 -39
  279. package/dist/kolibri/assets/themes/bzst.css +0 -245
  280. package/dist/kolibri/assets/themes/itzbund.css +0 -259
  281. package/dist/kolibri/assets/themes/mapz.bak.css +0 -219
  282. package/dist/kolibri/assets/themes/mapz.css +0 -39
  283. package/dist/kolibri/button-link-850c8878.js +0 -4
  284. package/dist/kolibri/controller-d1c76ddd.js +0 -4
  285. package/dist/kolibri/controller-e506a1bb.js +0 -4
  286. package/dist/kolibri/label-250da1a6.js +0 -4
  287. package/dist/kolibri/prop.validators-66d85f38.js +0 -4
  288. package/dist/kolibri/tab-index-1b7a8bc1.js +0 -4
  289. package/dist/kolibri/validation-2d8116e3.js +0 -4
  290. package/dist/types/components/icon-icofont/validation.d.ts +0 -3
  291. package/www/assets/@leanup/forms/bundle.js +0 -1
  292. package/www/assets/@leanup/forms/bundle.js.map +0 -1
  293. package/www/assets/@leanup/forms/index.js +0 -1
  294. package/www/assets/@leanup/forms/index.js.map +0 -1
  295. package/www/assets/@leanup/lib/bundle.js +0 -1
  296. package/www/assets/@leanup/lib/bundle.js.map +0 -1
  297. package/www/assets/@leanup/lib/index.js +0 -1
  298. package/www/assets/@leanup/lib/index.js.map +0 -1
  299. package/www/assets/accordion-simulation.js +0 -1
  300. package/www/assets/bund/bund.css +0 -41
  301. package/www/assets/bund/font/BundesSans-Web-Black.ttf +0 -0
  302. package/www/assets/bund/font/BundesSans-Web-Black.woff +0 -0
  303. package/www/assets/bund/font/BundesSans-Web-Black.woff2 +0 -0
  304. package/www/assets/bund/font/BundesSans-Web-BlackItalic.ttf +0 -0
  305. package/www/assets/bund/font/BundesSans-Web-BlackItalic.woff +0 -0
  306. package/www/assets/bund/font/BundesSans-Web-BlackItalic.woff2 +0 -0
  307. package/www/assets/bund/font/BundesSans-Web-Bold.ttf +0 -0
  308. package/www/assets/bund/font/BundesSans-Web-Bold.woff +0 -0
  309. package/www/assets/bund/font/BundesSans-Web-Bold.woff2 +0 -0
  310. package/www/assets/bund/font/BundesSans-Web-BoldItalic.ttf +0 -0
  311. package/www/assets/bund/font/BundesSans-Web-BoldItalic.woff +0 -0
  312. package/www/assets/bund/font/BundesSans-Web-BoldItalic.woff2 +0 -0
  313. package/www/assets/bund/font/BundesSans-Web-Light.ttf +0 -0
  314. package/www/assets/bund/font/BundesSans-Web-Light.woff +0 -0
  315. package/www/assets/bund/font/BundesSans-Web-Light.woff2 +0 -0
  316. package/www/assets/bund/font/BundesSans-Web-LightItalic.ttf +0 -0
  317. package/www/assets/bund/font/BundesSans-Web-LightItalic.woff +0 -0
  318. package/www/assets/bund/font/BundesSans-Web-LightItalic.woff2 +0 -0
  319. package/www/assets/bund/font/BundesSans-Web-Medium.ttf +0 -0
  320. package/www/assets/bund/font/BundesSans-Web-Medium.woff +0 -0
  321. package/www/assets/bund/font/BundesSans-Web-Medium.woff2 +0 -0
  322. package/www/assets/bund/font/BundesSans-Web-MediumItalic.ttf +0 -0
  323. package/www/assets/bund/font/BundesSans-Web-MediumItalic.woff +0 -0
  324. package/www/assets/bund/font/BundesSans-Web-MediumItalic.woff2 +0 -0
  325. package/www/assets/bund/font/BundesSans-Web-Regular.ttf +0 -0
  326. package/www/assets/bund/font/BundesSans-Web-Regular.woff +0 -0
  327. package/www/assets/bund/font/BundesSans-Web-Regular.woff2 +0 -0
  328. package/www/assets/bund/font/BundesSans-Web-RegularItalic.ttf +0 -0
  329. package/www/assets/bund/font/BundesSans-Web-RegularItalic.woff +0 -0
  330. package/www/assets/bund/font/BundesSans-Web-RegularItalic.woff2 +0 -0
  331. package/www/assets/bund/font/bundessansweb-bold-woff-data.woff +0 -0
  332. package/www/assets/bund/font/bundessansweb-regular-woff-data.woff +0 -0
  333. package/www/assets/bund/font/bundesserifweb-regular-woff-data.woff +0 -0
  334. package/www/assets/bund/forms.js +0 -1
  335. package/www/assets/bund/svg/itzbund.svg +0 -13
  336. package/www/assets/button-simulation.js +0 -1
  337. package/www/assets/favicon.ico +0 -0
  338. package/www/assets/fontawesome-free/v5/LICENSE.txt +0 -34
  339. package/www/assets/fontawesome-free/v5/css/all.css +0 -4616
  340. package/www/assets/fontawesome-free/v5/css/all.min.css +0 -5
  341. package/www/assets/fontawesome-free/v5/css/brands.css +0 -15
  342. package/www/assets/fontawesome-free/v5/css/brands.min.css +0 -5
  343. package/www/assets/fontawesome-free/v5/css/fontawesome.css +0 -4582
  344. package/www/assets/fontawesome-free/v5/css/fontawesome.min.css +0 -5
  345. package/www/assets/fontawesome-free/v5/css/regular.css +0 -15
  346. package/www/assets/fontawesome-free/v5/css/regular.min.css +0 -5
  347. package/www/assets/fontawesome-free/v5/css/solid.css +0 -16
  348. package/www/assets/fontawesome-free/v5/css/solid.min.css +0 -5
  349. package/www/assets/fontawesome-free/v5/css/svg-with-js.css +0 -371
  350. package/www/assets/fontawesome-free/v5/css/svg-with-js.min.css +0 -5
  351. package/www/assets/fontawesome-free/v5/css/v4-shims.css +0 -2172
  352. package/www/assets/fontawesome-free/v5/css/v4-shims.min.css +0 -5
  353. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.eot +0 -0
  354. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.svg +0 -3717
  355. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.ttf +0 -0
  356. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff +0 -0
  357. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff2 +0 -0
  358. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.eot +0 -0
  359. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.svg +0 -801
  360. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.ttf +0 -0
  361. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff +0 -0
  362. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff2 +0 -0
  363. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.eot +0 -0
  364. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.svg +0 -5034
  365. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.ttf +0 -0
  366. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff +0 -0
  367. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff2 +0 -0
  368. package/www/assets/fontawesome-free/v6/css/all.css +0 -10408
  369. package/www/assets/fontawesome-free/v6/css/all.min.css +0 -6
  370. package/www/assets/fontawesome-free/v6/css/brands.css +0 -1432
  371. package/www/assets/fontawesome-free/v6/css/brands.min.css +0 -6
  372. package/www/assets/fontawesome-free/v6/css/fontawesome.css +0 -6338
  373. package/www/assets/fontawesome-free/v6/css/fontawesome.min.css +0 -6
  374. package/www/assets/fontawesome-free/v6/css/regular.css +0 -19
  375. package/www/assets/fontawesome-free/v6/css/regular.min.css +0 -6
  376. package/www/assets/fontawesome-free/v6/css/solid.css +0 -19
  377. package/www/assets/fontawesome-free/v6/css/solid.min.css +0 -6
  378. package/www/assets/fontawesome-free/v6/css/svg-with-js.css +0 -634
  379. package/www/assets/fontawesome-free/v6/css/svg-with-js.min.css +0 -6
  380. package/www/assets/fontawesome-free/v6/css/v4-font-face.css +0 -26
  381. package/www/assets/fontawesome-free/v6/css/v4-font-face.min.css +0 -6
  382. package/www/assets/fontawesome-free/v6/css/v4-shims.css +0 -2146
  383. package/www/assets/fontawesome-free/v6/css/v4-shims.min.css +0 -6
  384. package/www/assets/fontawesome-free/v6/css/v5-font-face.css +0 -22
  385. package/www/assets/fontawesome-free/v6/css/v5-font-face.min.css +0 -6
  386. package/www/assets/fontawesome-free/v6/webfonts/fa-brands-400.ttf +0 -0
  387. package/www/assets/fontawesome-free/v6/webfonts/fa-brands-400.woff2 +0 -0
  388. package/www/assets/fontawesome-free/v6/webfonts/fa-regular-400.ttf +0 -0
  389. package/www/assets/fontawesome-free/v6/webfonts/fa-regular-400.woff2 +0 -0
  390. package/www/assets/fontawesome-free/v6/webfonts/fa-solid-900.ttf +0 -0
  391. package/www/assets/fontawesome-free/v6/webfonts/fa-solid-900.woff2 +0 -0
  392. package/www/assets/fontawesome-free/v6/webfonts/fa-v4compatibility.ttf +0 -0
  393. package/www/assets/fontawesome-free/v6/webfonts/fa-v4compatibility.woff2 +0 -0
  394. package/www/assets/form-simulation.js +0 -1
  395. package/www/assets/form-simulation.textarea.js +0 -1
  396. package/www/assets/form-simulation.weitere-cases.js +0 -1
  397. package/www/assets/icofont/demo.html +0 -18942
  398. package/www/assets/icofont/fonts/icofont.eot +0 -0
  399. package/www/assets/icofont/fonts/icofont.svg +0 -2105
  400. package/www/assets/icofont/fonts/icofont.ttf +0 -0
  401. package/www/assets/icofont/fonts/icofont.woff +0 -0
  402. package/www/assets/icofont/fonts/icofont.woff2 +0 -0
  403. package/www/assets/icofont/icofont.css +0 -10757
  404. package/www/assets/icofont/icofont.min.css +0 -7
  405. package/www/assets/itzbund.logo.svg +0 -6
  406. package/www/assets/kolibri.logo.svg +0 -31
  407. package/www/assets/logo.kolibri.invert.svg +0 -9
  408. package/www/assets/logo.kolibri.svg +0 -9
  409. package/www/assets/logo.kolibri.text.invert.svg +0 -9
  410. package/www/assets/logo.kolibri.text.svg +0 -10
  411. package/www/assets/modal-simulation.js +0 -1
  412. package/www/assets/nav-simulation.js +0 -1
  413. package/www/assets/pagination-simulation.js +0 -1
  414. package/www/assets/progress-simulation.js +0 -1
  415. package/www/assets/roboto/LICENSE.txt +0 -202
  416. package/www/assets/roboto/Roboto-Black.ttf +0 -0
  417. package/www/assets/roboto/Roboto-BlackItalic.ttf +0 -0
  418. package/www/assets/roboto/Roboto-Bold.ttf +0 -0
  419. package/www/assets/roboto/Roboto-BoldItalic.ttf +0 -0
  420. package/www/assets/roboto/Roboto-Italic.ttf +0 -0
  421. package/www/assets/roboto/Roboto-Light.ttf +0 -0
  422. package/www/assets/roboto/Roboto-LightItalic.ttf +0 -0
  423. package/www/assets/roboto/Roboto-Medium.ttf +0 -0
  424. package/www/assets/roboto/Roboto-MediumItalic.ttf +0 -0
  425. package/www/assets/roboto/Roboto-Regular.ttf +0 -0
  426. package/www/assets/roboto/Roboto-Thin.ttf +0 -0
  427. package/www/assets/roboto/Roboto-ThinItalic.ttf +0 -0
  428. package/www/assets/roboto/roboto.css +0 -27
  429. package/www/assets/smart-button-simulation.js +0 -1
  430. package/www/assets/spin-simulation.js +0 -1
  431. package/www/assets/style.css +0 -144
  432. package/www/assets/table-simulation.js +0 -1
  433. package/www/assets/tabs-simulation.js +0 -1
  434. package/www/assets/themes/bamf.css +0 -39
  435. package/www/assets/themes/bmf.bak.css +0 -283
  436. package/www/assets/themes/bmf.css +0 -39
  437. package/www/assets/themes/bzst.css +0 -245
  438. package/www/assets/themes/itzbund.css +0 -259
  439. package/www/assets/themes/mapz.bak.css +0 -219
  440. package/www/assets/themes/mapz.css +0 -39
  441. package/www/assets/toast-simulation.js +0 -1
  442. package/www/build/a11y.tipps-bb9add07.js +0 -4
  443. package/www/build/app-globals-60a9735a.js +0 -4
  444. package/www/build/bund-91b5001a.js +0 -4
  445. package/www/build/button-link-850c8878.js +0 -4
  446. package/www/build/color-20533e03.js +0 -4
  447. package/www/build/controller-11e15255.js +0 -4
  448. package/www/build/controller-3574fbd1.js +0 -4
  449. package/www/build/controller-c792706a.js +0 -4
  450. package/www/build/controller-d1c76ddd.js +0 -4
  451. package/www/build/controller-e0e7932c.js +0 -4
  452. package/www/build/controller-e506a1bb.js +0 -4
  453. package/www/build/dev.utils-bbaf8793.js +0 -4
  454. package/www/build/devtools-fd5af773.js +0 -4
  455. package/www/build/icon-cce91c6b.js +0 -4
  456. package/www/build/index-315c6aa5.js +0 -4
  457. package/www/build/index-a604e45a.js +0 -4
  458. package/www/build/index-c4d8198b.js +0 -4
  459. package/www/build/index-d338436e.js +0 -5
  460. package/www/build/index.esm.js +0 -4
  461. package/www/build/index.m-df5ce03f.js +0 -4
  462. package/www/build/kol-abbr.entry.js +0 -4
  463. package/www/build/kol-accordion.entry.js +0 -4
  464. package/www/build/kol-alert.entry.js +0 -4
  465. package/www/build/kol-badge.entry.js +0 -4
  466. package/www/build/kol-breadcrumb.entry.js +0 -4
  467. package/www/build/kol-button-group.entry.js +0 -4
  468. package/www/build/kol-button-link.entry.js +0 -4
  469. package/www/build/kol-button-wc_3.entry.js +0 -4
  470. package/www/build/kol-button.entry.js +0 -4
  471. package/www/build/kol-card.entry.js +0 -4
  472. package/www/build/kol-color.entry.js +0 -4
  473. package/www/build/kol-counter.entry.js +0 -4
  474. package/www/build/kol-details.entry.js +0 -4
  475. package/www/build/kol-form.entry.js +0 -4
  476. package/www/build/kol-heading.entry.js +0 -4
  477. package/www/build/kol-icon-font-awesome.entry.js +0 -4
  478. package/www/build/kol-icon-icofont.entry.js +0 -4
  479. package/www/build/kol-icon.entry.js +0 -4
  480. package/www/build/kol-indented-text.entry.js +0 -4
  481. package/www/build/kol-input-adapter-leanup.entry.js +0 -4
  482. package/www/build/kol-input-checkbox.entry.js +0 -4
  483. package/www/build/kol-input-color.entry.js +0 -4
  484. package/www/build/kol-input-date.entry.js +0 -4
  485. package/www/build/kol-input-email.entry.js +0 -4
  486. package/www/build/kol-input-file.entry.js +0 -4
  487. package/www/build/kol-input-number.entry.js +0 -4
  488. package/www/build/kol-input-password.entry.js +0 -4
  489. package/www/build/kol-input-radio-group.entry.js +0 -4
  490. package/www/build/kol-input-radio.entry.js +0 -4
  491. package/www/build/kol-input-range.entry.js +0 -4
  492. package/www/build/kol-input-text.entry.js +0 -4
  493. package/www/build/kol-kolibri.entry.js +0 -4
  494. package/www/build/kol-link-button.entry.js +0 -4
  495. package/www/build/kol-link-group.entry.js +0 -4
  496. package/www/build/kol-link-wc.entry.js +0 -4
  497. package/www/build/kol-link.entry.js +0 -4
  498. package/www/build/kol-logo.entry.js +0 -4
  499. package/www/build/kol-modal.entry.js +0 -4
  500. package/www/build/kol-nav.entry.js +0 -4
  501. package/www/build/kol-pagination.entry.js +0 -4
  502. package/www/build/kol-progress.entry.js +0 -4
  503. package/www/build/kol-select.entry.js +0 -4
  504. package/www/build/kol-skip-nav.entry.js +0 -4
  505. package/www/build/kol-span-wc.entry.js +0 -4
  506. package/www/build/kol-span.entry.js +0 -4
  507. package/www/build/kol-spin.entry.js +0 -4
  508. package/www/build/kol-symbol.entry.js +0 -4
  509. package/www/build/kol-table.entry.js +0 -4
  510. package/www/build/kol-tabs.entry.js +0 -4
  511. package/www/build/kol-textarea.entry.js +0 -4
  512. package/www/build/kol-toast.entry.js +0 -4
  513. package/www/build/kol-tooltip.entry.js +0 -4
  514. package/www/build/kol-version.entry.js +0 -4
  515. package/www/build/kolibri.esm.js +0 -4
  516. package/www/build/kolibri.js +0 -4
  517. package/www/build/label-250da1a6.js +0 -4
  518. package/www/build/prop.validators-66d85f38.js +0 -4
  519. package/www/build/tab-index-1b7a8bc1.js +0 -4
  520. package/www/build/validation-ca76c4b9.js +0 -4
  521. package/www/build/validator-05e130c7.js +0 -4
  522. package/www/host.config.json +0 -15
  523. package/www/index.html +0 -224
package/www/index.html DELETED
@@ -1,224 +0,0 @@
1
- <!doctype html><html dir="ltr" lang="de"><head> <script type="module">
2
- import { register } from 'https://esm.sh/@public-ui/core@1.1.10-rc.15';
3
- import { BMF } from 'https://esm.sh/@public-ui/themes@1.1.10-rc.15';
4
- import { KoliBriDevHelper } from 'https://esm.sh/@public-ui/components@1.1.10-rc.15';
5
- register([BMF], [])
6
- .then(() => {
7
- KoliBriDevHelper.patchTheme('bmf', {
8
- 'KOL-LINK-BUTTON':
9
- ':host {display: inline-block;}/*-----------*/a {min-width: 44px;min-height: 44px;display: grid;gap: 0.25em;line-height: 1.5rem;font-family: var(--font-family);font-weight: 700;cursor: pointer;border-radius: 1.5em;border-style: solid;border-width: 2px;font-size: 1rem;align-items: center;padding: 8px 14px;justify-content: center;text-decoration: none !important;font-style: normal;text-align: center;text-transform: uppercase;width: inherit;transition-duration: 0.5s;transition-property: background-color, color, border-color;}a > kol-span > span > span {display: flex;gap: 0.25em;align-items: center;justify-content: center;}a:disabled {cursor: not-allowed;opacity: 0.5;}a.primary,a.primary:disabled:hover {background-color: var(--color-midnight);border-color: var(--color-midnight);color: var(--color-white);}a.secondary,a.secondary:disabled:hover,a.normal,a.normal:disabled:hover {background-color: var(--color-white);border-color: var(--color-midnight);color: var(--color-midnight);}a.danger,a.danger:disabled:hover {background-color: var(--color-red);border-color: var(--color-red);color: var(--color-white);}a.ghost,a.ghost:disabled:hover {border-color: var(--color-white);background-color: var(--color-white);box-shadow: none;color: var(--color-midnight);}/*-----------*/a.primary:active,a.primary:hover,a.secondary:active,a.secondary:hover,a.normal:active,a.normal:hover,a.danger:active,a.danger:hover,a.ghost:active,a.ghost:hover {background-color: var(--color-ocean);border-color: var(--color-ocean);box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);color: var(--color-white);}a.danger:active,a.danger:hover {background-color: var(--color-crimson);border-color: var(--color-crimson);}a:disabled:hover,a:focus:hover {box-shadow: none;}a.primary:active,a.secondary:active,a.normal:active,a.danger:active,a.ghost:active {border-color: var(--color-white);box-shadow: none;outline: none;}a > span {display: flex;gap: 0.5em;margin: auto;align-items: center;justify-content: center;letter-spacing: 0.75px;}a.icon-only {padding: 8px;}a.icon-only kol-icon {display: inline-block;width: 1.5em;height: 1.5em;}a.loading kol-icon {animation: spin 5s infinite linear;}',
10
- });
11
- })
12
- .catch(console.warn);
13
- </script> <meta charset="utf-8"> <title>BIK BITV-Test | KoliBri</title> <meta name="description" content="Auf der Seite werden alle KoliBri-Komponenten für den BIK BITV-Test dargestellt."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' *.jsdelivr.net " /> --> <script type="module" src="build/kolibri.esm.js"></script> <script nomodule="" src="build/kolibri.js"></script> <link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="stylesheet" href="assets/fontawesome-free/v5/css/all.css"> <link rel="stylesheet" href="assets/fontawesome-free/v6/css/all.css"> <link rel="stylesheet" href="assets/icofont/icofont.css"> <link rel="stylesheet" href="assets/bund/bund.css"> <link rel="stylesheet" href="assets/roboto/roboto.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="assets/themes/bamf.css"> <link rel="stylesheet" href="assets/themes/bmf.css"> <link rel="stylesheet" href="assets/themes/bzst.css"> <link rel="stylesheet" href="assets/themes/itzbund.css"> <link rel="stylesheet" href="assets/themes/mapz.css"> <link rel="stylesheet" href="assets/style.css"> <meta name="robots" content="noindex"> <meta name="kolibri" content="dev-mode=true,color-contrast-analysis=false"> </head> <body data-theme="mapz" data-theme-cache="true" data-theme-reset="true"> <header class="container"> <!-- <kol-all></kol-all> --> <div class="row"> <div class="col-12"> <kol-kolibri style="display: block; width: 150px;"></kol-kolibri> </div> <div class="col-12"> <kol-heading>BIK BITV-Test</kol-heading> </div> <div class="gap-2 col-12 d-flex"> <kol-version _version="1.1.10-rc.15"></kol-version> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test"></kol-badge> <kol-badge _color="#f0f" _label="Test"></kol-badge> <kol-badge _color="#0bf" _label="Test"></kol-badge> <kol-badge _label="Content-Security-Policy" _icon="check" _color="#300"></kol-badge> </div> <div class="col-12"> <kol-details _summary="Sternchenhinweise" _open=""> <p>* Gibt an, dass der BIK BITV-Test noch Verbesserungsvorschläge beinhaltet.</p> </kol-details> </div> <p> Bookmarklet: <a href="javascript:(function(){var d=document,id='phltsbkmklt',el=d.getElementById(id),f=d.querySelectorAll('iframe'),i=0,l=f.length;if(el){function removeFromShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.getElementById(id).remove();removeFromShadows(el.shadowRoot);}}}el.remove();if(l){for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementById(id).remove();removeFromShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}}removeFromShadows(d);}else{s=d.createElement('style');s.id=id;s.appendChild(d.createTextNode('*{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important;}p{margin-bottom:2em !important;}'));function applyToShadows(root){for(var el of root.querySelectorAll('*')){if(el.shadowRoot){el.shadowRoot.appendChild(s.cloneNode(true));applyToShadows(el.shadowRoot);}}}d.getElementsByTagName('head')[0].appendChild(s);for(i=0;i<l;i++){try{f[i].contentWindow.document.getElementsByTagName('head')[0].appendChild(s.cloneNode(true));applyToShadows(f[i].contentWindow.document);}catch(e){console.log(e)}}applyToShadows(d);}})();"> Text Spacing </a> </p> <div class="py-2 col-12"> <kol-alert _type="info" _level="2" _heading="Hinweise an das A11y-Test-Team" class="pb-2"> <p>Liebe Tester:innen bitte lest vor dem 9. BIK BITV-Test folgende Hinweise.</p> <kol-heading _level="3">Refactoring Eingabefelder</kol-heading> <p> <kol-details _summary="Beschreibung"> Wir haben ein umfangreiches Refactoring an den Eingabefeldern vorgenommen, um die Developer Experience deutlich zu verbessern. Hierzu wurde alle
14
- Eingabefeldtypen gemäß der <kol-link _href="https://www.w3.org/TR/2010/WD-html5-20101019/the-input-element.html" _target="w3c"> W3C-Klassifizierung</kol-link> separiert.<br> Durch die Überarbeitung der Eingabefelder wurden jetzt auch noch mehr Eingabefeldtypen umgesetzt: <code>checkbox</code>, <code>color</code>, <code>date</code>, <code>datetime-local</code>, <code>email</code>, <code>file</code>, <code>month</code>, <code>number</code>, <code>radio, password</code>, <code>range</code>, <code>search</code>, <code>text</code>, <code>tel</code>, <code>time</code>, <code>url</code> und <code>week</code> <br> Darüber hinaus wurde das Label eines Eingabefeldes flexibler gemacht. Es kann jetzt im Label individuelles <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr> verwendet werden. Wodurch auch Links oder andere Anforderungen am Label umgesetzt
15
- werden können. </kol-details> </p> <kol-heading _level="3">Refactoring Icon</kol-heading> <p> <kol-details _summary="Beschreibung"> Wir haben festgestellt, dass wir mit einer einzigen Icon-Font nicht flexibel genug aufgestellt sind. Daher haben wir eine noch generischere
16
- Icon-Komponente umgesetzt, der nun egal ist, welche Icon-Font es verwendet. Es stellt, aber unabhängig davon weiterhin sicher, dass Icons für
17
- die Barrierefreiheit korrekt ausgezeichnet werden. <kol-alert _type="warning" style="display: inline-block; margin-top: 1em; margin-bottom: 0.5em;">Die Icofont-Komponent wird dadurch überflüssig und wird in der RC-Phase entfernt. </kol-alert> </kol-details> </p> <kol-heading _level="3">Extrem lange Texte und Wörter</kol-heading> <p> <kol-details _summary="Problem"> Grundsätzlich können extrem lange Texte und Wörter zum Bruch des Layouts führen und somit die Lesbarkeit der Inhalte verschlechtern. Bei den
18
- Navigationsstrukturen haben wir jeweils einen extrem langen Text und ein extrem langes Wort verwendet, um eine potenzielle Falschverwendung
19
- sichtbar zu machen und die Robustheit KoliBri's zu verbessern. </kol-details> <kol-details _summary="Lösung"> Um extrem lange Texte und Wörter in allen Struktur im Griff zu behalten, haben wir folgende CSS-Definitionen standardmäßig bei allen Komponenten
20
- gesetzt: <code>hyphens: auto;</code> </kol-details> </p> <kol-heading _level="3">Text-Entscheidung zum Fokus-Rahmen</kol-heading> <p> <kol-details _summary="Problem"> Wir haben darüber debattiert, wie die Darstellung des Fokus-Rahmens aus Sicht der Barrierefreiheit am besten ist. Einerseits wird der
21
- außenstehende Fokus-Rahmen abgeschnitten, weil die KoliBri-Komponenten stets 0 Außenabstand haben. Andererseits ist ein nach innen verschobener
22
- Fokusrahmen zwar nicht mehr abgeschnitten, aber dann wieder teilweise schlechter erkennbar. </kol-details> <kol-details _summary="Lösung"> Wir haben in der Debatte gemeinsam entschieden, dass der Fokus-Rahmen immer bestmöglich erkennbar sein muss. Auch wenn er außerhalb des
23
- fokussierten Elements ist. Was ja eben zum besseren Fokus führt. Die Tatsache, dass der Fokus-Rahmen aufgrund fehlenden Außenabstand
24
- abgeschnitten wird, wird nicht mehr als Mangel des <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test"></kol-badge> gewertet. </kol-details> </p> <kol-heading _level="3">Tastaturfokus von Standard-Eingabefeld-Aktionen</kol-heading> <p> <kol-details _summary="Problem"> Die Standard-Eingabefelder des <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr> gibt es in verschiedenen Ausprägungen, die mittels
25
- des <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr>-Attributes <code>type</code> bestimmt werden. Das Problem ist, dass bei manchen
26
- Browsern die Schaltflächen-Icons innerhalb der Standard-Eingabefelder nicht fokussierbar und/oder die Eingabesteuerungen nicht barrierefrei
27
- sind. Es ist beispielsweise nicht möglich über die Tastatur den Datepicker eines Datum-Eingabefeldes zu öffnen. </kol-details> <kol-details _summary="Lösung"> KoliBri verwendet stets semantisch korrektes Standard-<kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr>. Der Vorteil hierbei ist,
28
- dass bei allen Eingabefeldern mit zusätzlichen Aktionen, stets die Geräte- und Browser-spezifischen Steuerelemente dem/der Nutzer:in angezeigt
29
- werden. Dem iPhone nutzer wird genau die Datumsauswahl angezeigt, die er in allen anderen iPhone-Apps auch gewohnt ist. Und genauso gilt das für
30
- Nutzer:innen andere Geräte, Betriebssysteme und Browser. <kol-alert _type="warning" style="display: inline-block; margin-top: 1em; margin-bottom: 0.5em;"> Das die Geräte-, Betriebssystem- oder Browser-spezifischen Steuerelemente nun jeweils unterschiedlich barrierefrei sind, darauf hat KoliBri
31
- keinen Einfluss. Wir sehen davon ab aus Gründen der Interoperabilität und Standardisierung, derartige Steuerelement durch eine proprietäre
32
- Implementierung zu ersetzen und dabei in Kauf zu nehmen, nicht mehr semantisches <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr> einsetzen zu können. </kol-alert> </kol-details> </p> </kol-alert> </div> </div> <kol-link-group _aria-label="Inhaltsverzeichnis" _heading="Inhaltsverzeichnis" _level="2" _ordered="" id="table-of-content"></kol-link-group> </header> <main class="container"> <ol> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Abbr</kol-heading> </div> <div class="gap-2 col-12"> <p> <b>Native HTML</b> You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>. </p> </div> <div class="gap-2 col-12"> <b>KoliBri</b> <p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p> <p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p> <p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p> <p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9*"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Accordion</kol-heading> </div> <kol-heading _level="3">Accordion</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-accordion class="bordered" _open="true" _heading="Accordion #1 Header"> <p slot="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, odit, accusamus id a officia neque omnis facere, corporis amet alias
33
- maiores! Laboriosam placeat omnis illo maxime laborum fugiat deserunt mollitia! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos
34
- aperiam rem, doloremque cum, explicabo qui reiciendis minima sequi quidem et harum dolorum consequatur tempore id tempora provident quae
35
- consequuntur ab! <kol-input-text>Eingabefeld</kol-input-text> </p> </kol-accordion> <kol-accordion class="bordered" _heading="Accordion #2 Header" _level="2"> <p slot="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dicta eveniet totam maxime animi placeat possimus mollitia iusto minus
36
- pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing
37
- elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet
38
- sint modi possimus. </p> </kol-accordion> <kol-accordion class="bordered" _heading="Accordion #2 Header" _level="2"> <p slot="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dicta eveniet totam maxime animi placeat possimus mollitia iusto minus
39
- pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing
40
- elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet
41
- sint modi possimus. </p> </kol-accordion> <kol-accordion class="bordered" _heading="Accordion #2 Header" _level="2"> <p slot="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dicta eveniet totam maxime animi placeat possimus mollitia iusto minus
42
- pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing
43
- elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet
44
- sint modi possimus. </p> </kol-accordion> <kol-accordion class="bordered" _heading="Accordion #3 Header" _level="3"> <p slot="header"> In den Accordion-Header kann auch noch was komplexeres eingefügt werden. <kol-button class="not-used" _icon="ui-add" _label="Hinzufügen" _variant="secondary"></kol-button> </p> <p slot="content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum
45
- earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing
46
- elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi
47
- molestias voluptas reiciendis. </p> </kol-accordion> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Alert</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-alert _heading="Nachricht" _level="2">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _heading="Fehler" _level="3">Hier wird der Fehler näher beschrieben.</kol-alert> <kol-alert _type="info" _heading="Hinweis" _level="4">Hier wird der Hinweis näher beschrieben.</kol-alert> <kol-alert _type="success" _heading="Erfolg" _level="5"> Hier wird der Erfolg näher beschrieben.</kol-alert> <kol-alert _type="warning" _heading="Warnung" _level="6"> Hier wird die Warnung näher beschrieben.</kol-alert> <kol-alert>Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error">Hier wird der Fehler kurz beschrieben.</kol-alert> <kol-alert _type="info">Hier wird der Hinweis kurz beschrieben.</kol-alert> <kol-alert _type="success">Hier wird der Erfolg kurz beschrieben.</kol-alert> <kol-alert _type="warning">Hier wird die Warnung kurz beschrieben.</kol-alert> <kol-alert _heading="Nachricht" _level="2" _variant="card">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _heading="Fehler" _level="3" _variant="card">Hier wird der Fehler näher beschrieben.</kol-alert> <kol-alert _type="info" _heading="Hinweis" _level="4" _variant="card">Hier wird der Hinweis näher beschrieben.</kol-alert> <kol-alert _type="success" _heading="Erfolg" _level="5" _variant="card"> Hier wird der Erfolg näher beschrieben.</kol-alert> <kol-alert _type="warning" _heading="Warnung" _level="6" _variant="card"> Hier wird die Warnung näher beschrieben.</kol-alert> <kol-alert _heading="Nachricht" _variant="card">Hier wird Nachricht näher beschrieben.</kol-alert> <kol-alert _type="error" _variant="card">Hier wird der Fehler kurz beschrieben.</kol-alert> <kol-alert _type="info" _variant="card">Hier wird der Hinweis kurz beschrieben.</kol-alert> <kol-alert _type="success" _variant="card">Hier wird der Erfolg kurz beschrieben.</kol-alert> <kol-alert _type="warning" _variant="card">Hier wird die Warnung kurz beschrieben.</kol-alert> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Badge</kol-heading> <kol-details _summary="Erklärung zum Color-Contrast-Feature">Die folgende Komponente managed die Schriftfarbe in Abhängigkeit zur Hintergrundfarbe automatisch.</kol-details> </div> <div class="gap-2 col-12 d-grid"> <kol-heading _level="3">Heller Hintergrund</kol-heading> <div> <kol-badge _label="Ich bin ein Tag!" _icon="ui-love" _color="#c1ca31"></kol-badge> <kol-badge _label="Ich auch!" _icon="ui-rating" _icon-align="right" _color="#f7bb3d"></kol-badge> <kol-badge _label="Und ich!" _color="#80cdec"></kol-badge> <kol-badge _icon="ui-rate-blank" _label="Ich bin ein Icon!" _icon-only="" _color="#f9e03a"></kol-badge> </div> <kol-heading _level="3">Dunkler Hintergrund</kol-heading> <div> <kol-badge _label="Ich bin ein Tag!" _icon="ui-love" _color="#000"></kol-badge> <kol-badge _label="Ich auch!" _icon="ui-rating" _icon-align="right" _color="#94083c"></kol-badge> <kol-badge _label="Und ich!" _color="#0c247d"></kol-badge> <kol-badge _icon="ui-rate-blank" _label="Ich bin ein Icon!" _icon-only="" _color="#030"></kol-badge> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Breadcrumb</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-breadcrumb _aria-label="Breadcrumb aus Text-Links" _links="[{'_label':'Startseite','_href':'#/'},{'_label':'Unterseite der Startseite','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- oder Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_iconOnly': true,'_href':'#/'},{'_label':'Unterseite der Startseite mit sehr langem Link-Test','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- und Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_href':'#/'},{'_label':'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#/unterseite'},{'_label':'Unterseite der Unterseite','_href':'#/unterseite/unterseite'}]"></kol-breadcrumb> <kol-breadcrumb _aria-label="Breadcrumb aus Icons- und Text-Links" _links="[{'_label':'Startseite', '_icon': 'home', '_iconOnly': true, '_href':'#/'}]"></kol-breadcrumb> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Button</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-indented-text>Der folgende Schalter hat ein abweichendes Aria-Label:</kol-indented-text> <kol-button class="not-used" _aria-label="Ich bin ein abweichendes Label" _variant="primary" _label="Primary-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'icofont-arrow-up'},'right': {'icon': 'icofont-arrow-right'},'bottom': {'icon': 'icofont-arrow-down'},'left': {'icon': 'icofont-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-button> <kol-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-button> <kol-button class="not-used" _icon="ui-play" _label="Martin"></kol-button> <kol-button class="not-used" _icon="home" _variant="primary" _label="Primary-Schaltfläche"></kol-button> <kol-button class="not-used" _icon="home" _icon-only="" _variant="primary" _label="Primary-Schaltfläche"></kol-button> <kol-button class="not-used" _variant="secondary" _label="Secondary-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="normal" _label="Normal-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="danger" _label="Danger-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _variant="ghost" _label="Ghost-Schaltfläche" style="width: 15em;"></kol-button> <kol-button class="not-used" _disabled="true" _label="Disabled-Schaltfläche"></kol-button> <kol-button class="not-used" _label="Hinzufügen"></kol-button> <kol-button class="not-used font-80" _icon="ui-add" _label="Hinzufügen"></kol-button> <kol-button class="not-used font-60" _icon="ui-add" _icon-align="right" _label="Hinzufügen"></kol-button> <kol-button class="not-used" _icon="ui-add" _icon-align="right" _icon-only="true" _label="Hinzufügen (nur Icon)"></kol-button> <kol-button class="not-used" _label="ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen"></kol-button> </div> <div class="gap-2 py-2 col-12 d-grid"> <div> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> <div class="font-80"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </div> <div class="font-60"> <kol-button class="not-used" _label="" _variant="primary"><span slot="expert">Speichern</span></kol-button> <kol-button class="not-used" _label="" _disabled=""><span slot="expert">Bearbeiten</span></kol-button> <kol-button class="not-used" _label=""><span slot="expert">Abbrechen</span></kol-button> <kol-button class="not-used" _label=""><span slot="expert">Löschen</span></kol-button> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <!-- <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> --> <!-- <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> --> </div> <kol-heading _level="2">Link-Button</kol-heading> </div> <div class="gap-2 py-2 col-12 d-grid"> <kol-indented-text>Der folgende Schalter hat ein abweichendes Aria-Label:</kol-indented-text> <kol-link-button class="not-used" _aria-label="Ich bin ein abweichendes Label" _variant="primary" _label="Primary-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'icofont-arrow-up'},'right': {'icon': 'icofont-arrow-right'},'bottom': {'icon': 'icofont-arrow-down'},'left': {'icon': 'icofont-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _icon="{'top': {'style': {'font-size': '200%', 'transform': 'rotate(45deg)'}, 'icon': 'fa-solid fa-arrow-up'},'right': {'icon': 'fa-solid fa-arrow-right'},'bottom': {'icon': 'fa-solid fa-arrow-down'},'left': {'icon': 'fa-solid fa-arrow-left'}}" _label="Icon's in alle Richtungen" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _icon="ui-play" _label="Martin"></kol-link-button> <kol-link-button class="not-used" _icon="home" _variant="primary" _label="Primary-Schaltfläche"></kol-link-button> <kol-link-button class="not-used" _icon="home" _icon-only="" _variant="primary" _label="Primary-Schaltfläche"></kol-link-button> <kol-link-button class="not-used" _variant="secondary" _label="Secondary-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _variant="normal" _label="Normal-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _variant="danger" _label="Danger-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _variant="ghost" _label="Ghost-Schaltfläche" style="width: 15em;"></kol-link-button> <kol-link-button class="not-used" _disabled="true" _label="Disabled-Schaltfläche"></kol-link-button> <kol-link-button class="not-used" _label="Hinzufügen"></kol-link-button> <kol-link-button class="not-used font-80" _icon="ui-add" _label="Hinzufügen"></kol-link-button> <kol-link-button class="not-used font-60" _icon="ui-add" _icon-align="right" _label="Hinzufügen"></kol-link-button> <kol-link-button class="not-used" _icon="ui-add" _icon-align="right" _icon-only="true" _label="Hinzufügen (nur Icon)"></kol-link-button> <kol-link-button class="not-used" _label="ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen"></kol-link-button> </div> <div class="gap-2 py-2 col-12 d-grid"> <div> <kol-link-button class="not-used" _label="Speichern" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _label="Bearbeiten" _disabled=""></kol-link-button> <kol-link-button class="not-used" _label="Abbrechen"></kol-link-button> <kol-link-button class="not-used" _label="Löschen"></kol-link-button> </div> <div class="font-80"> <kol-link-button class="not-used" _label="Speichern" _variant="primary"></kol-link-button> <kol-link-button class="not-used" _label="Bearbeiten" _disabled=""></kol-link-button> <kol-link-button class="not-used" _label="Abbrechen"></kol-link-button> <kol-link-button class="not-used" _label="Löschen"></kol-link-button> </div> <div class="font-60"> <kol-link-button class="not-used" _label="" _variant="primary"><span slot="expert">Speichern</span></kol-link-button> <kol-link-button class="not-used" _label=""><span slot="expert">Bearbeiten</span></kol-link-button> <kol-link-button class="not-used" _label=""><span slot="expert">Abbrechen</span></kol-link-button> <kol-link-button class="not-used" _label=""><span slot="expert">Löschen</span></kol-link-button> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9*"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">ButtonGroup</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-button-group> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> <kol-button-group class="font-80"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> <kol-button-group class="font-60"> <kol-button class="not-used" _label="Speichern" _variant="primary"></kol-button> <kol-button class="not-used" _label="Bearbeiten" _disabled=""></kol-button> <kol-button class="not-used" _label="Abbrechen"></kol-button> <kol-button class="not-used" _label="Löschen"></kol-button> </kol-button-group> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Card</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-card _headline="Mit h1-Überschrift und Footer" _has-footer=""> <p slot="header">Test</p> <p slot="content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum
48
- earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing
49
- elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi
50
- molestias voluptas reiciendis. </p> <div slot="footer"> <kol-button class="not-used min-width" _label="Ok"></kol-button> <kol-button class="not-used min-width" _label="Abbrechen"></kol-button> </div> </kol-card> <kol-card _headline="Mit h2-Überschrift" _level="2" class="bordered"> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
51
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </kol-card> <kol-card _headline="Mit h3-Überschrift" _level="3"> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
52
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </kol-card> <kol-card _headline="Mit h4-Überschrift" _level="4"> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
53
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </kol-card> </div> <div class="gap-2 mt-4 col-12 d-md-flex"> <kol-card _headline="Mit h5-Überschrift" _level="5" class="bordered"> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
54
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </kol-card> <kol-card _headline="Mit h6-Überschrift" _level="6" class="bordered"> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
55
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </kol-card> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Details</kol-heading> </div> <div class="col-12"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
56
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> <p> <kol-details _open="" _summary="I'll be placed as summary header"> I'll be placed as detailed summary. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, vel? Saepe, pariatur. Aspernatur
57
- voluptatibus reiciendis officia soluta? Tempore odio est voluptatum iste dolorum, dolorem, rem fuga, veritatis consequuntur quod quaerat! </kol-details> </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
58
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
59
- sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
60
- erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
61
- ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
62
- aliquyam erat, sed diam voluptua. </p> <p> <kol-details _summary="I'll be placed as summary header"> I'll be placed as detailed summary. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, vel? Saepe, pariatur. Aspernatur
63
- voluptatibus reiciendis officia soluta? Tempore odio est voluptatum iste dolorum, dolorem, rem fuga, veritatis consequuntur quod quaerat! </kol-details> </p> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
64
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
65
- sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
66
- erat. </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v9*"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Form</kol-heading> </div> <div class="col-12"> <kol-heading _level="3">Leeres Formular ohne Hinweis zu Pflichtangaben</kol-heading> <kol-details _summary="Technical: BIK BITV-Test weglassen" _open="false"> <div class="p-2"> <kol-form _required-text=""> <form> <label for="submit-test">Test</label> <input id="submit-test" type="text"> <label for="submit-select">Test</label> <select id="submit-select" type="text"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> </select> </form> </kol-form> <kol-form _required-text=""> <label for="submit-test">Test</label> <input id="submit-test" type="text"> </kol-form> <kol-form> <label for="submit2-test">Test</label> <input id="submit2-test" type="text"> <button type="submit">Absenden</button> </kol-form> <kol-form> <label for="submit3-est">Test</label> <input id="submit3-test" type="text"> <kol-button _type="submit" _label="Absenden"></kol-button> </kol-form> <kol-form> <kol-input-text>Test</kol-input-text> <kol-button _type="submit" _label="Absenden"></kol-button> </kol-form> </div> </kol-details> <kol-heading _level="3">Leeres Formular mit individuellem Hinweis zu Pflichtangaben</kol-heading> <kol-form _required-text="Mein individueller Hinweis zu den Pflichtangaben.">[Eingabefelder…]</kol-form> <kol-heading _level="3">Formular mit Standard-Hinweis zu Pflichtangaben</kol-heading> <kol-form>[Eingabefelder…]</kol-form> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Heading</kol-heading> <p> Die Heading-Komponente ist eine elementare Komponente die sehr oft wiederverwendet werden muss, um die verschiedenen Bereiche für die
67
- Barrierefreiheit zu beschriften. </p> <kol-details _summary="Hinweise zur Barrierefreiheit"> <p> Die Heading-Komponente stellt sicher, dass wir innerhalb KoliBri's die Heading's <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code> und <code>h6</code> dynamisch über alle Komponenten verwenden können. </p> </kol-details> </div> <div class="gap-2 col-12 d-grid"> <kol-heading _level="1">Ich bin eine h1-Überschrift</kol-heading> <kol-heading _level="2">Ich bin eine h2-Überschrift</kol-heading> <kol-heading _level="3">Ich bin eine h3-Überschrift</kol-heading> <kol-heading _level="4">Ich bin eine h4-Überschrift</kol-heading> <kol-heading _level="5">Ich bin eine h5-Überschrift</kol-heading> <kol-heading _level="6">Ich bin eine h6-Überschrift</kol-heading> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Icon, IconFontAwesome und IconIcofont</kol-heading> <p> Die generische Icon-Komponente implementiert die Untersützung einer Icon-Font. Hierbei ist die <code>kol-icon</code>-Komponente eine generische Komponente <u>ohne</u> <code>Shadow-Dom</code>. Die Barrierefreiheit wird durch diese
68
- Komponente sichergestellt. </p> <p> Zusätzlich zu der generischen Icon-Komponente gibt es die konkreten Icon-Komponenten <code>kol-icon-font-awesome</code> und <code>kol-icon-icofont</code>. Diese Komponenten beinhalten keine Logik, sondern verwenden die der
69
- generischen Icon-Komponente wieder. Sie kapseln lediglich die jeweilige Icon-Font. </p> <p>Hinweis: Die <code>kol-icofont</code>-Komponente ist <kol-badge _label="deprecated"></kol-badge>.</p> <kol-details _summary="Hinweise zur Barrierefreiheit"> <p> Die Icon-Komponente stellt sicher, dass die Grafik (Icon) immer mit einem Beschriftung (<code>aria-label</code>) beschrieben werden muss.
70
- Dabei wird automatisch die Rolle (<code>img</code>) gesetzt. </p> <p> Sollte eine Beschriftung nicht erforlderlich sein, weil beispielsweise eine Beschriftung schon durch ein übergeordnetes Element erfolgt, dann
71
- kann das explizit durch die Angabe einer leeren Beschriftung gemacht werden. Wobei hier die Rolle in diesem Fall nicht gesetzt wird. </p> Links: <ul> <li> <kol-link _href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html" _target="w3c"> https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24.html</kol-link> </li> </ul> </kol-details> </div> <div class="gap-2 col-12 d-grid"> <kol-heading _level="3">FontAwesome</kol-heading> <kol-icon-font-awesome _prefix="fas" _icon="home" _aria-label="Haus"></kol-icon-font-awesome> <kol-indented-text>Mit Aria-Label</kol-indented-text> <kol-icon _icon="fas fa-home" _aria-label=""></kol-icon> <kol-indented-text>Ohne Aria-Label</kol-indented-text> <kol-heading _level="3">Icofont</kol-heading> <kol-icon-icofont _icon="home" _aria-label="Haus"></kol-icon-icofont> <kol-indented-text>Mit Aria-Label</kol-indented-text> <kol-icon _icon="icofont-home"></kol-icon> <kol-indented-text>Ohne Aria-Label</kol-indented-text> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v#"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Indented-Text</kol-heading> </div> <div class="col-12"> <p> Indented-Text ist ein eingerückter Text, der z.B. zu einer Erläuterung verwendet werden kann: <kol-indented-text> I'll be placed as detailed summary. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fuga quidem, molestias consequuntur saepe
72
- rerum natus sequi unde modi magni laudantium deleniti aliquid quae maiores voluptate iusto earum cum cumque! Lorem ipsum dolor sit amet
73
- consectetur adipisicing elit. Itaque reprehenderit similique, at atque facere velit labore. </kol-indented-text> </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> <kol-heading _level="2">Input's</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <div class="d-grid gap-2"> <kol-heading _level="3">InputCheckbox</kol-heading> <kol-controlled-input-next class="d-grid gap-2" id="new-input-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> <kol-input-checkbox _type="switch">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </kol-controlled-input-next> <lean-input-adapter class="d-grid gap-2" id="new-input-checkbox-leanup"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> <kol-input-checkbox _type="switch">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </lean-input-adapter> <lean-input-adapter class="d-grid gap-2" id="change-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputColor</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-color"> <kol-input-color></kol-input-color> <kol-input-color _list="['#000000','#ff0000','#0000ff','#00ff00']"></kol-input-color> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputEmail</kol-heading> <kol-input-email _error="Test einer Fehlermeldung">E-Mail-Adresse</kol-input-email> <lean-input-adapter class="d-grid gap-2" id="new-input-email"> <kol-input-email></kol-input-email> <kol-input-email _list="['test1@test.de','test2@test.de','test3@test.de']">E-Mail-Adresse (Auto-Vervollständigung)</kol-input-email> <kol-input-email _list="['test1@test.de','test2@test.de','test3@test.de']" _multiple="">E-Mail-Adresse(n) (Auto-Vervollständigung, Mehrfachauswahl)</kol-input-email> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputFile</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-file"> <kol-input-file>Datei hochladen</kol-input-file> <kol-input-file _multiple="">Datei(en) hochladen (Mehrfachauswahl)</kol-input-file> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputNumber</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-number"> <kol-input-number _type="number">Zahleneingabe</kol-input-number> <kol-input-number _max="10" _min="-10" _step="2" _type="number">Zahleneingabe (-10 bis 10 in 2er Schritten)</kol-input-number> </lean-input-adapter> <kol-heading _level="3">InputDate</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-date"> <kol-input-date _type="date">Datum</kol-input-date> </lean-input-adapter> <kol-input-date _type="date" _min="2022-10-28">Datum (min)</kol-input-date> <kol-input-date _type="date" _max="2022-10-28">Datum (max)</kol-input-date> <kol-input-date _type="datetime-local">Local-Datetime (Standard)</kol-input-date> <kol-input-date _type="datetime-local" _step="1">Local-Datetime (mit Sekunden)</kol-input-date> <kol-input-date _type="month">Monat</kol-input-date> <kol-input-date _type="week">Woche</kol-input-date> <kol-input-date _type="time">Zeit (Standard)</kol-input-date> <kol-input-date _type="time" _step="1">Zeit (mit Sekunden)</kol-input-date> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputPassword</kol-heading> <kol-input-password _id="password">Passwort</kol-input-password> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputRadioGroup</kol-heading> <div slot="content"> <lean-input-adapter class="d-grid gap-2" id="anrede-adapter"> <kol-input-radio>Anrede</kol-input-radio> </lean-input-adapter> <kol-input-radio id="anrede-input">Anrede es wird automatisch die 1. Option ausgewählt</kol-input-radio> </div> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputRange</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-input-range"> <kol-input-range _min="0" _max="50">Schieberegler</kol-input-range> <kol-input-range _min="0" _max="50" _step="10">Schieberegler (mit Raster)</kol-input-range> <kol-input-range _list="[{'value':0,'label':'sehr schlecht'},{'value':10,'label':'schlecht'},{'value':20,'label':'mangelhaft'},{'value':30,'label':'gut'},{'value':40,'label':'naja'},{'value':50,'label':'sehr gut'}]" _min="0" _max="50" _step="10">Schieberegler (mit Rasterlinien)</kol-input-range> </lean-input-adapter> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputText</kol-heading> <kol-input-text class="vorname" _hint="Ich bin ein Hinweis." _id="input-text-vorname" _type="text">Vorname (Auto-Vervollständigung) </kol-input-text> <lean-input-adapter class="d-grid gap-2" id="kol-input-text"> <kol-input-text class="vorname" _id="input-text-vorname" _type="text"></kol-input-text> </lean-input-adapter> <kol-input-text _type="search">Suchbegriff</kol-input-text> <br> <kol-indented-text>Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Icon und Placeholder.</kol-indented-text> <kol-input-text _hide-label="" _icon="{'left': 'fa-solid fa-magnifying-glass'}" _placeholder="Suche" _type="search"> Suche</kol-input-text> <kol-input-text _hide-label="" _required="" _icon="{'left': 'fa-solid fa-magnifying-glass'}" _placeholder="Suche" _type="search">Suche</kol-input-text> <kol-input-text _type="url">Url</kol-input-text> <kol-input-text _type="tel">Telefonnummer</kol-input-text> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Select</kol-heading> <kol-select class="list4value">Stimmung (nicht vorbelegt)</kol-select> <lean-input-adapter class="d-grid gap-2"> <kol-select class="list4value">Stimmung (vorbelegt)</kol-select> <kol-select class="list4value" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </lean-input-adapter> <kol-select class="value4list">Stimmung (nicht vorbelegt)</kol-select> <lean-input-adapter class="d-grid gap-2"> <kol-select class="value4list">Stimmung (vorbelegt)</kol-select> <kol-select class="value4list" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </lean-input-adapter> <kol-select id="fix-select-multi" _multiple="">Mehrfachauswahl</kol-select> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Textarea</kol-heading> <lean-input-adapter class="d-grid gap-2" id="new-textarea"> <kol-textarea>Label</kol-textarea> </lean-input-adapter> <kol-indented-text>Hier ein Suchfeld ohne sichtbares Label, aber dafür mit Placeholder.</kol-indented-text> <kol-textarea _has-counter="" _hide-label="" _placeholder="Ausgeblendetes Label">Ausgeblendetes Label</kol-textarea> <kol-textarea _has-counter="" _max-length="50" _value="Textfeld mit Zähler und maximaler Länge"> Textfeld mit Zähler und maximaler Länge. </kol-textarea> <kol-textarea _adjust-height="" _has-counter="" _value="Textfeld das seine Höhe automatisch anpasst">Textfeld das seine Höhe automatisch anpasst.</kol-textarea> </div> <div class="d-grid gap-2"> <kol-input-password class="smart-button">Passwort</kol-input-password> <kol-input-text class="smart-button">Text</kol-input-text> </div> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Link</kol-heading> </div> <div class="gap-2 col-12"> <kol-link _href="https://de.wikipedia.org" _target="wikipedia">Wikipedia</kol-link> <kol-link _href="https://wikipedia.de" _icon="paper-plane">Wikipedia</kol-link> <p> E-Mail: <kol-link _href="mailto:info@wikipedia.org" _target="mail-client" _target-description="Link wird im E-Mail-Programm geöffnet.">info@wikipedia.org </kol-link> </p> <kol-link _aria-label="Icon als Link" _href="https://de.wikipedia.org" _icon="paper-plane" _icon-only="" _target="wikipedia"></kol-link> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <!-- <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> --> </div> <kol-heading _level="2">Button-Link</kol-heading> </div> <div class="gap-2 col-12"> <kol-button-link _label="Wikipedia"></kol-button-link> <kol-button-link _icon="paper-plane" _label="Wikipedia"></kol-button-link> <p> E-Mail: <kol-button-link _label="info@wikipedia.org"></kol-button-link> </p> <kol-button-link _aria-label="Icon als Link" _icon="paper-plane" _icon-only=""></kol-button-link> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">LinkGroup</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-link-group _aria-label="Fehlerliste" _links="[{'_label':'Fehler 1 (#input-text-vorname)','_selector':'#input-text-vorname'},{'_label':'Fehler 2 (#password) und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'#password'},{'_label':'Fehler 3 - Sprungmarke (#gibt-es-nicht) und ich_bin_ein_echt_langes_Wort','_selector':'#gibt-es-nicht'}]"></kol-link-group> <kol-link-group class="bordered" _aria-label="Fehlerliste mit Rahmen" _heading="Liste der Formularfehler (nummeriert)" _level="3" _ordered="" _links="[{'_label':'Fehler 1 (#input-text-vorname)','_selector':'#input-text-vorname'},{'_label':'Fehler 2 (#password) und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'#password'},{'_label':'Fehler 3 - Sprungmarke (#gibt-es-nicht) und ich_bin_ein_echt_langes_Wort','_selector':'#gibt-es-nicht'}]" style="padding: 0.25rem 0.5rem;"></kol-link-group> <kol-link-group _aria-label="Fehlerliste" _heading="Liste der Formularfehler (horizontal)" _links="[{'_label':'Fehler 1 ','_selector':'#input-text-vorname'},{'_label':'Fehler 2','_selector':'#password'},{'_label':'Fehler 3','_selector':'#gibt-es-nicht'}]" _list-style-type="square" _orientation="horizontal"></kol-link-group> <kol-link-group _aria-label="Fehlerliste" _heading="Liste der Formularfehler (vertical)" _orientation="vertical" _links="[{'_label':'Fehler 1 ','_selector':'#input-text-vorname'},{'_label':'Fehler 2','_selector':'#password'},{'_label':'Fehler 3','_selector':'#gibt-es-nicht'}]"></kol-link-group> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Logo</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-logo _abbr="BReg"></kol-logo> <kol-logo _abbr="BMF"></kol-logo> <kol-logo _abbr="BMG"></kol-logo> <p> <kol-indented-text>Im Folgenden wird ein "Zurück zur Startseite"-Link dargestellt:</kol-indented-text> <kol-link _href="https://itzbund.de" _use-case="image" _aria-label="Zurück zur Startseite des ITZBund"> <kol-logo _abbr="ITZBund"></kol-logo> </kol-link> </p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> </div> <kol-heading _level="2">Modal</kol-heading> <p> Die Modal-Komponete implementiert die Überlagerungsfunktion (Overlay's). Sie ist so realisiert, dass das Modal unabhängig von dem
74
- Überlagerungsinhalt ist. Es kann also nicht nur ein Dialog sondern auch jedes beliebige andere <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr> als Überlagerungsinhalt verwendet werden. </p> <p> Da das Modal vom eigentlichen Modal entkoppelt ist, aber für eine teilweisen Sperrung der Inhalte sorgt. Muss es auch eine Möglichkeit bieten,
75
- das Schließen (Sperrung aufheben) aus dem Modal-Kontext zu ermöglichen. Das wird durch einen optionalen Schließen-Button rechts oben in der Ecke
76
- sichergestellt. </p> <kol-details _summary="Hinweise zur Barrierefreiheit"> <p> Beim Öffnen eines Modals, muss der Entwickler:in das aktive Element übergeben, zu dem nach dem Schließen des Modals automatisch der Fokus
77
- gesetzt werden soll. </p> <p> Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektierbaren Elemente deaktiviert außer die innerhalb des eigenen
78
- Modals. Hierbei ist zu beachten, dass KoliBri nur Elemente deaktiviert die sich im Browser-Seitenbereich befinden. Das Fokusieren den
79
- Browser-Menü's ist weiterhin möglich. </p> <p> Zusätzlich stellt die Komponente sicher, dass die Darstellung beliebiger Inhalte bei beliebiger Zoomstufe barrierefrei bleibt. Hierzu wird ein
80
- vertikaler Scoll-Balken bei bedarf verwendet. </p> </kol-details> </div> <div class="col-12"> <kol-modal id="modal-1" _aria-label="Willkommen bei KoliBri" _has-footer=""> <kol-card _headline="Willkommen bei KoliBri" _has-footer=""> <p slot="content"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
81
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
82
- dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
83
- aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
84
- sanctus est Lorem ipsum dolor sit amet. et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
85
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
86
- diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
87
- dolor sit amet. </p> <div slot="footer"> <kol-button id="modal-1-cancel" _label="Schließen" style="margin-right: 0.5em;"></kol-button> </div> </kol-card> </kol-modal> <kol-modal id="modal-2" _aria-label="Vorgang löschen" _width="400px"> <kol-card _headline="Vorgang löschen" _has-footer=""> <p slot="content">Wollen Sie den Vorgang wirklich löschen?</p> <div slot="footer"> <kol-button id="modal-2-cancel" _label="Schließen" style="margin-right: 0.5em;"></kol-button> </div> </kol-card> </kol-modal> <kol-modal id="modal-3" _aria-label="Modal schließen" _width="400px"> <kol-card _headline="Modal schließen"> <p slot="content">Klicken Sie einfach rechts oben auf das X.</p> </kol-card> </kol-modal> </div> <div class="gap-2 col-12 d-grid"> <kol-button id="modal-open-1" _label="Modal (mit Schließen) öffnen"></kol-button> <kol-button id="modal-open-2" _label="Modal (ohne Schließen) öffnen"></kol-button> <!-- <kol-button id="modal-open-3" _label="Modal (einfaches Schließen) öffnen"></kol-button> --> <script src="assets/modal-simulation.js"></script> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Nav</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-nav _aria-label="Navigation mit sinnvoller Breite" _links="[{'_label':'1 Navigationspunkt mit sehr langem Link-Test','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_label':'2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#abc','_icon':'woodpecker'},{'_active':true,'_label':'3 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_children':[{'_label':'3.1 Navigationspunkt','_href':'#abc','_icon':'woodpecker'},{'_label':'3.2 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_active':true,'_label':'3.3 Navigationspunkt','_href':'#abc','_children':[{'_active':true,'_label':'3.3.1 Navigationspunkt (aktiv)','_href':'#abc'},{'_label':'3.3.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.4 Navigationspunkt','_href':'#abc','_children':[{'_label':'3.4.1 Navigationspunkt','_href':'#abc'},{'_label':'3.4.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.5 Navigationspunkt','_href':'#abc'}]},{'_label':'4 Navigationspunkt','_href':'#abc'}]" _orientation="horizontal"></kol-nav> <kol-nav class="font-80" _aria-label="Navigation mit sinnvoller Breite" _links="[{'_label':'1 Navigationspunkt mit sehr langem Link-Test','_href':'#abc','_icon':'woodpecker','_iconOnly': true,'_tooltipAlign':'bottom','_target':'asdasd'},{'_label':'2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#abc','_icon':'woodpecker','_iconOnly': true},{'_active':true,'_label':'3 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_iconOnly': true,'_children':[{'_label':'3.1 Navigationspunkt','_href':'#abc','_icon':'woodpecker'},{'_label':'3.2 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_active':true,'_label':'3.3 Navigationspunkt','_href':'#abc','_children':[{'_active':true,'_label':'3.3.1 Navigationspunkt (aktiv)','_href':'#abc'},{'_label':'3.3.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.4 Navigationspunkt','_href':'#abc','_children':[{'_label':'3.4.1 Navigationspunkt','_href':'#abc'},{'_label':'3.4.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.5 Navigationspunkt','_href':'#abc'}]},{'_label':'4 Navigationspunkt','_href':'#abc','_iconOnly': true}]" _orientation="horizontal" style="display: inline-flex;"></kol-nav> <kol-nav class="max-width" id="click-nav" _aria-label="Navigation mit sinnvoller Breite"></kol-nav> <kol-nav class="font-80 max-width" _aria-label="Navigation in der Breite beschränkt" _has-compact-button="" _links="[{'_label':'1 Navigationspunkt mit sehr langem Link-Test','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_label':'2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#abc','_icon':'woodpecker'},{'_active':true,'_label':'3 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_children':[{'_label':'3.1 Navigationspunkt','_href':'#abc','_icon':'woodpecker'},{'_label':'3.2 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_active':true,'_label':'3.3 Navigationspunkt','_href':'#abc','_children':[{'_active':true,'_label':'3.3.1 Navigationspunkt (aktiv)','_href':'#abc'},{'_label':'3.3.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.4 Navigationspunkt','_href':'#abc','_children':[{'_label':'3.4.1 Navigationspunkt','_href':'#abc'},{'_label':'3.4.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.5 Navigationspunkt','_href':'#abc'}]},{'_label':'4 Navigationspunkt','_href':'#abc'}]"></kol-nav> <kol-nav class="font-60 max-width" _aria-label="Navigation initial eingeklappt" _compact="" _links="[{'_label':'1 Navigationspunkt mit sehr langem Link-Test','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_label':'2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#abc','_icon':'woodpecker'},{'_active':true,'_label':'3 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_children':[{'_label':'3.1 Navigationspunkt','_href':'#abc','_icon':'woodpecker'},{'_label':'3.2 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_active':true,'_label':'3.3 Navigationspunkt','_href':'#abc','_children':[{'_active':true,'_label':'3.3.1 Navigationspunkt (aktiv)','_href':'#abc'},{'_label':'3.3.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.4 Navigationspunkt','_href':'#abc','_children':[{'_label':'3.4.1 Navigationspunkt','_href':'#abc'},{'_label':'3.4.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.5 Navigationspunkt','_href':'#abc'}]},{'_label':'4 Navigationspunkt','_href':'#abc'}]"></kol-nav> <kol-nav class="font-60 max-width" _aria-label="Navigation initial eingeklappt" _compact="" _links="[{'_label':'1 Navigationspunkt mit sehr langem Link-Test','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_label':'2 Navigationspunkt und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_href':'#abc','_icon':'woodpecker'},{'_label':'3 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_children':[{'_label':'3.1 Navigationspunkt','_href':'#abc','_icon':'woodpecker'},{'_label':'3.2 Navigationspunkt','_href':'#abc','_icon':'woodpecker','_target':'asdasd'},{'_label':'3.3 Navigationspunkt','_href':'#abc','_children':[{'_label':'3.3.1 Navigationspunkt','_href':'#abc'},{'_label':'3.3.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.4 Navigationspunkt','_href':'#abc','_children':[{'_label':'3.4.1 Navigationspunkt','_href':'#abc'},{'_label':'3.4.2 Navigationspunkt','_href':'#abc'}]},{'_label':'3.5 Navigationspunkt','_href':'#abc'}]},{'_active':true,'_label':'4 Navigationspunkt (aktiv)','_href':'#abc'}]"></kol-nav> </div> </div> <script src="assets/nav-simulation.js"></script> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Test"></kol-badge> </div> <kol-heading _level="2">Pagination</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-pagination _total="11" _page="6" _variant="primary" _sibling-count="0"></kol-pagination> <kol-pagination _total="11" _page="2" _variant="secondary" _has-buttons="false"></kol-pagination> <kol-pagination _total="11" _page="10" _variant="normal" _has-buttons="{'first':false,'last':false,'next':false,'previous':false}"></kol-pagination> <kol-pagination _total="11" _page="1" _variant="danger" _sibling-count="0" _boundary-count="2" _has-buttons="{'first':true,'last':true,'next':false,'previous':false}"></kol-pagination> <kol-pagination _total="11" _page="11" _variant="ghost" _boundary-count="2" _has-buttons="{'first':false,'last':false,'next':true,'previous':true}"></kol-pagination> <kol-pagination _total="110" _page="6" _page-size="1" _page-size-options="[10,20]" _variant="primary" _sibling-count="0"></kol-pagination> <kol-pagination _total="110" _page="16" _page-size="5" _page-size-options="[20,15,10,5]" _variant="primary" _sibling-count="0"></kol-pagination> <kol-pagination _total="110" _page="6" _page-size-options="[20,15,10,5]" _variant="primary" _sibling-count="0"></kol-pagination> <kol-pagination _total="110" _page="50" _page-size-options="[20,15,10,5]" _variant="primary" _sibling-count="0"></kol-pagination> <kol-indented-text>Wenn es keine Seiten gibt, dann wird die Pagination wie folgt angezeigt.</kol-indented-text> <kol-pagination _total="0" _page="0 "></kol-pagination> </div> </div> <script src="assets/pagination-simulation.js"></script> </li> <li></li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> </div> <kol-heading _level="2">Progress</kol-heading> </div> <div class="col-12"> <kol-progress></kol-progress> <kol-button _label="Simulation starten"></kol-button> </div> <div class="col-12"> <kol-progress _unit="Schnitzel" _value="75" _type="cycle"></kol-progress> <kol-button _label="Simulation starten"></kol-button> </div> <div class="col-12"> <script src="assets/progress-simulation.js"></script> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Skip-Nav</kol-heading> <kol-indent-text> <p><b>Links sind unsichtbar geschalten</b><br>Um die Links zu sehen, am besten einmal in diesen Bereich klicken und Tab-Taste drücken.</p> </kol-indent-text> <kol-skip-nav _aria-label="Versteckte Navigation" _links="[{'_label':'Ganz hoch und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen','_selector':'header'},{'_label':'Zum Formular','_selector':'kol-form'},{'_label':'Zum Ende','_selector':'footer'}]"></kol-skip-nav> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Spin</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-button _label="Aktion ausführen"></kol-button> <kol-spin></kol-spin> <script src="assets/spin-simulation.js"></script> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _color="#300" _label="Experimentell"></kol-badge> </div> <kol-heading _level="2">Symbol</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <p>In diesem Satz wird das ☺ vom Screenreader nicht vorgelesen.</p> <p>In diesem Satz wird das <kol-symbol _aria-label="Lächelndes Gesicht" _symbol="☺"></kol-symbol> vom Screenreader vorgelesen.</p> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> <kol-heading _level="2">Table</kol-heading> </div> <!-- <kol-heading _level="3">2 Header, Daten Horizontal</kol-heading>
88
- <div class="gap-2 col-12 d-grid">
89
- <kol-table
90
- _dual
91
- _orientation="horizontal"
92
- _caption="2 Header, Daten Horizontal"
93
- _header-lines="[{'_headers': [{'label': 'Montag', 'key': 'montag'}, {'label': 'Dienstag', 'key': 'dienstag'}, {'label': 'Mittwoch', 'key': 'mittwoch'}, {'label': 'Donnerstag', 'key': 'donnerstag'}, {'label': 'Freitag', 'key': 'freitag'}], '_orientation': 'horizontal', '_position': 0}, {'_headers': [{'label': '0800 - 0900'}, {'label': '0900 - 1000'}, {'label': '1000 - 1100'}, {'label': '1100 - 1200'}], '_orientation': 'vertical', '_position': 0}]"
94
- _order="['montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag']"
95
- _data="[{'montag': 'Alex', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Helena', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Marcus'}, {'montag': 'Fabian', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Hong', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}]"
96
- >
97
- </kol-table>
98
- </div>
99
- <kol-heading _level="3">2 Header, Daten Vertikal</kol-heading>
100
- <div class="gap-2 col-12 d-grid">
101
- <kol-table
102
- class="block overflow-hidden"
103
- _dual
104
- _orientation="vertical"
105
- _caption="2 Header, Daten Vertikal"
106
- _header-lines="[{'_headers': [{'label': 'Montag'}, {'label': 'Dienstag'}, {'label': 'Mittwoch'}, {'label': 'Donnerstag'}, {'label': 'Freitag'}], '_orientation': 'horizontal', '_position': 0}, {'_headers': [{'label': '0800 - 0900', 'key': '8bis9'}, {'label': '0900 - 1000', 'key': '9bis10'}, {'label': '1000 - 1100', 'key': '10bis11'}, {'label': '1100 - 1200', 'key': '11bis12'}], '_orientation': 'vertical', '_position': 0}]"
107
- _order="['8bis9', '9bis10', '10bis11', '11bis12']"
108
- _data="[{'8bis9': 'Sophie', '9bis10': 'Marcel', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Christian', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Angela', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Marcel', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Marcel', '10bis11': 'Felix', '11bis12': 'Jenny'}]"
109
- >
110
- </kol-table>
111
- </div>
112
- <kol-heading _level="3">2 Horizontal Header mit Span, Daten Horizontal</kol-heading>
113
- <div class="gap-2 col-12 d-grid">
114
- <kol-table
115
- class="block overflow-hidden"
116
- _dual
117
- _orientation="horizontal"
118
- _caption="2 Horizontal Header mit Span, Daten Horizontal"
119
- _header-lines="[{'_headers': [{'label': 'Q2', 'span': 3}, {'label': 'Q3', 'span': 3}], '_orientation': 'horizontal'}, {'_headers': [{'label': 'April', 'key': 'april'}, {'label': 'Mai', 'key': 'mai'}, {'label': 'Juni', 'key': 'juni'}, {'label': 'Juli', 'key': 'juli'}, {'label': 'August', 'key': 'august'}, {'label': 'September', 'key': 'september'}], '_orientation': 'horizontal', '_position': 1}, {'_headers': [{'label': 'Berlin'},{'label': 'Hamburg'},{'label': 'München'}], '_orientation': 'vertical', '_position': 0}]"
120
- _order="['april', 'mai', 'juni', 'juli', 'august', 'september']"
121
- _data="[{'april': '10', 'mai': '11', 'juni': '12', 'juli': '12', 'august': '16', 'september': '15'},{'april': '3', 'mai': '3', 'juni': '3', 'juli': '4', 'august': '4', 'september': '6'},{'april': '42', 'mai': '43', 'juni': '44', 'juli': '32', 'august': '45', 'september': '42'}]"
122
- >
123
- </kol-table>
124
- </div>
125
- <kol-heading _level="3">2 Vertikal Header mit Span, Daten Horizontal</kol-heading>
126
- <div class="gap-2 col-12 d-grid">
127
- <kol-table
128
- class="block overflow-hidden"
129
- _dual
130
- _orientation="horizontal"
131
- _caption="2 Vertikal Header mit Span, Daten Horizontal"
132
- _header-lines="[{'_headers':[{'label':'Juni','key':'juni'},{'label':'Juli','key':'juli'},{'label':'August','key':'august'},{'label':'September','key':'september'}],'_orientation':'horizontal'},{'_headers':[{'label':'Bayern','span':2},{'label':'Berlin'},{'label':'Nordrhein-Westfalen','span':3}],'_orientation':'vertical','_position':0},{'_headers':[{'label':'München'},{'label':'Nürnberg'},{'label':'Berlin'},{'label':'Bonn'},{'label':'Düsseldorf'},{'label':'Köln'}],'_orientation':'vertical','_position':1}]"
133
- _order="['juni','juli','august','september']"
134
- _data="[{'juni':'100','juli':'101','august':'102','september':'105'},{'juni':'13','juli':'13','august':'12','september':'12'},{'juni':'87','juli':'88','august':'87','september':'90'},{'juni':'12','juli':'11','august':'12','september':'12'},{'juni':'42','juli':'43','august':'39','september':'42'},{'juni':'98','juli':'99','august':'102','september':'109'}]"
135
- >
136
- </kol-table>
137
- </div>
138
- <kol-heading _level="3"
139
- >2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal</kol-heading
140
- >
141
- <div class="gap-2 col-12 d-grid">
142
- <kol-table
143
- class="block overflow-hidden"
144
- _dual
145
- _orientation="horizontal"
146
- _caption="2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal"
147
- _header-lines="[{'_headers':[{'label':'Q2','span':3},{'label':'Q3','span':3}],'_orientation':'horizontal'},{'_headers':[{'label':'April','key':'april'},{'label':'Mai','key':'mai'},{'label':'Juni','key':'juni'},{'label':'Juli','key':'juli'},{'label':'August','key':'august'},{'label':'September','key':'september'}],'_orientation':'horizontal','_position':1},{'_headers':[{'label':'Bayern','span':2},{'label':'Berlin'},{'label':'Nordrhein-Westfalen','span':3}],'_orientation':'vertical','_position':0,'_label':'Bundesland'},{'_headers':[{'label':'München'},{'label':'Nürnberg'},{'label':'Berlin'},{'label':'Bonn'},{'label':'Düsseldorf'},{'label':'Köln'}],'_orientation':'vertical','_position':1,'_label':'Stadt'}]"
148
- _order="['april','mai','juni','juli','august','september']"
149
- _data="[{'april':'97','mai':'99','juni':'100','juli':'101','august':'102','september':'105'},{'april':'11','mai':'13','juni':'13','juli':'13','august':'12','september':'12'},{'april':'86','mai':'85','juni':'87','juli':'88','august':'87','september':'90'},{'april':'11','mai':'12','juni':'12','juli':'11','august':'12','september':'12'},{'april':'42','mai':'41','juni':'42','juli':'43','august':'39','september':'42'},{'april':'100','mai':'99','juni':'98','juli':'99','august':'102','september':'109'}]"
150
- >
151
- </kol-table>
152
- </div>
153
- <kol-heading _level="3">2 Horizontal Header mit Span, Daten Vertikal</kol-heading>
154
- <div class="gap-2 col-12 d-grid">
155
- <kol-table
156
- class="block overflow-hidden"
157
- _dual
158
- _orientation="vertical"
159
- _caption="2 Horizontal Header mit Span, Daten Vertikal"
160
- _header-lines="[{'_headers': [{'label': 'Q2', 'span': 3}, {'label': 'Q3', 'span': 3}], '_orientation': 'horizontal'}, {'_headers': [{'label': 'April'}, {'label': 'Mai'}, {'label': 'Juni'}, {'label': 'Juli'}, {'label': 'August'}, {'label': 'September'}], '_orientation': 'horizontal', '_position': 1}, {'_headers': [{'label': 'Berlin', 'key': 'berlin'},{'label': 'Hamburg', 'key': 'hamburg'},{'label': 'München', 'key': 'münchen'}], '_orientation': 'vertical', '_position': 0}]"
161
- _order="['berlin', 'hamburg', 'münchen']"
162
- _data="[{'berlin':'52','hamburg':'42','münchen':'93'},{'berlin':'53','hamburg':'41','münchen':'96'},{'berlin':'54','hamburg':'40','münchen':'98'},{'berlin':'66','hamburg':'42','münchen':'102'},{'berlin':'68','hamburg':'41','münchen':'100'},{'berlin':'69','hamburg':'42','münchen':'107'}]"
163
- >
164
- </kol-table>
165
- </div>
166
- <kol-heading _level="3">2 Vertikal Header mit Span, Daten Vertikal</kol-heading>
167
- <div class="gap-2 col-12 d-grid">
168
- <kol-table
169
- class="block overflow-hidden"
170
- _dual
171
- _orientation="vertical"
172
- _caption="2 Vertikal Header mit Span, Daten Vertikal"
173
- _header-lines="[{'_headers':[{'label':'Juni'},{'label':'Juli'},{'label':'August'},{'label':'September'}],'_orientation':'horizontal'},{'_headers':[{'label':'Bayern','span':2},{'label':'Berlin'},{'label':'Nordrhein-Westfalen','span':3}],'_orientation':'vertical','_position':0},{'_headers':[{'label':'München','key':'münchen'},{'label':'Nürnberg','key':'nürnberg'},{'label':'Berlin','key':'berlin'},{'label':'Bonn','key':'bonn'},{'label':'Düsseldorf','key':'düsseldorf'},{'label':'Köln','key':'köln'}],'_orientation':'vertical','_position':1}]"
174
- _order="['münchen', 'nürnberg', 'berlin', 'bonn', 'düsseldorf', 'köln']"
175
- _data="[{'münchen':'97','nürnberg':'21','berlin':'58','bonn':'14','düsseldorf':'42','köln':'99'},{'münchen':'99','nürnberg':'20','berlin':'57','bonn':'15','düsseldorf':'43','köln':'96'},{'münchen':'100','nürnberg':'22','berlin':'59','bonn':'15','düsseldorf':'42','köln':'98'},{'münchen':'102','nürnberg':'21','berlin':'62','bonn':'15','düsseldorf':'44','köln':'101'}]"
176
- >
177
- </kol-table>
178
- </div>
179
- <kol-heading _level="3"
180
- >2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Vertikal</kol-heading
181
- >
182
- <div class="gap-2 col-12 d-grid">
183
- <kol-table
184
- class="block overflow-hidden"
185
- _dual
186
- _orientation="vertical"
187
- _caption="2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Vertikal"
188
- _header-lines="[{'_headers':[{'label':'Q2','span':3},{'label':'Q3','span':3}],'_orientation':'horizontal'},{'_headers':[{'label':'April'},{'label':'Mai'},{'label':'Juni'},{'label':'Juli'},{'label':'August'},{'label':'September'}],'_orientation':'horizontal','_position':1},{'_headers':[{'label':'Bayern','span':2},{'label':'Berlin'},{'label':'Nordrhein-Westfalen','span':3}],'_orientation':'vertical','_position':0},{'_headers':[{'label':'München','key':'münchen'},{'label':'Nürnberg','key':'nürnberg'},{'label':'Berlin','key':'berlin'},{'label':'Bonn','key':'bonn'},{'label':'Düsseldorf','key':'düsseldorf'},{'label':'Köln','key':'köln'}],'_orientation':'vertical','_position':1}]"
189
- _order="['münchen', 'nürnberg', 'berlin', 'bonn', 'düsseldorf', 'köln']"
190
- _data="[{'münchen':'97','nürnberg':'21','berlin':'58','bonn':'14','düsseldorf':'42','köln':'99'},{'münchen':'99','nürnberg':'20','berlin':'57','bonn':'15','düsseldorf':'43','köln':'96'},{'münchen':'100','nürnberg':'22','berlin':'59','bonn':'15','düsseldorf':'42','köln':'98'},{'münchen':'102','nürnberg':'21','berlin':'62','bonn':'15','düsseldorf':'44','köln':'101'},{'münchen':'101','nürnberg':'22','berlin':'66','bonn':'16','düsseldorf':'45','köln':'102'},{'münchen':'106','nürnberg':'21','berlin':'65','bonn':'16','düsseldorf':'46','köln':'103'}]"
191
- >
192
- </kol-table>
193
- </div>
194
- <kol-heading _level="3">1 Horizontal Header</kol-heading>
195
- <div class="gap-2 col-12 d-grid">
196
- <kol-table
197
- class="block overflow-hidden"
198
- _dual
199
- _orientation="horizontal"
200
- _caption="1 Horizontal Header"
201
- _header-lines="[{'_headers': [{'label': 'Montag', 'key': 'montag'}, {'label': 'Dienstag', 'key': 'dienstag'}, {'label': 'Mittwoch', 'key': 'mittwoch'}, {'label': 'Donnerstag', 'key': 'donnerstag'}, {'label': 'Freitag', 'key': 'freitag'}], '_orientation': 'horizontal', '_position': 0}]"
202
- _order="['montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag']"
203
- _data="[{'montag': 'Alex', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Helena', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Fabian', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Hong', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}]"
204
- >
205
- </kol-table>
206
- </div>
207
- <kol-heading _level="3">1 Vertikal Header</kol-heading>
208
- <div class="gap-2 col-12 d-grid">
209
- <kol-table
210
- class="block overflow-hidden"
211
- _dual
212
- _orientation="vertical"
213
- _caption="1 Vertikal Header"
214
- _header-lines="[{'_headers': [{'label': '0800 - 0900', 'key': '8bis9'}, {'label': '0900 - 1000', 'key': '9bis10'}, {'label': '1000 - 1100', 'key': '10bis11'}, {'label': '1100 - 1200', 'key': '11bis12'}], '_orientation': 'vertical', '_position': 0}]"
215
- _order="['8bis9', '9bis10', '10bis11', '11bis12']"
216
- _data="[{'8bis9': 'Sophie', '9bis10': 'Marcel', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Christian', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Angela', '10bis11': 'Naomi', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Marcel', '10bis11': 'Felix', '11bis12': 'Susan'}, {'8bis9': 'Sophie', '9bis10': 'Marcel', '10bis11': 'Felix', '11bis12': 'Jenny'}]"
217
- >
218
- </kol-table>
219
- </div> --> <kol-heading _level="3">2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal (Row- und Col-Span)</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table _caption="2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal (Row- und
220
- Col-Span)" _pagination="false" _headers="{'horizontal':[[{'label':'','colSpan':2,'rowSpan':2,'asTd':true},{'label':'Q2','colSpan':2},{'label':'Juni','key':'juni','rowSpan':2},{'label':'Q3','colSpan':3}],[{'label':'April','key':'april'},{'label':'Mai','key':'mai'},{'label':'Juli','key':'juli'},{'label':'August','key':'august'},{'label':'September','key':'september'}]],'vertical':[[{'label':'Bayern','rowSpan':2},{'label':'Berlin','key':'berlin','colSpan':2},{'label':'Nordrhein-Westfalen','rowSpan':3}],[{'label':'München','key':'münchen'},{'label':'Nürnberg','key':'nürnberg'},{'label':'Bonn','key':'bonn'},{'label':'Düsseldorf','key':'düsseldorf'},{'label':'Köln','key':'köln'}]]}" _data="[{'april':'97','mai':'99','juni':'100','juli':'101','august':'102','september':'105'},{'april':'11','mai':'13','juni':'13','juli':'13','august':'12','september':'12'},{'april':'86','mai':'85','juni':'87','juli':'88','august':'87','september':'90'},{'april':'11','mai':'12','juni':'12','juli':'11','august':'12','september':'12'},{'april':'42','mai':'41','juni':'42','juli':'43','august':'39','september':'42'},{'april':'100','mai':'99','juni':'98','juli':'99','august':'102','september':'109'}]"></kol-table> </div> <kol-heading _level="3">2 Header, Daten Horizontal, Sort and Render</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table id="table-1" _caption="2 Header, Daten Horizontal, Sort and Render" _data="[{'montag': 'Alex', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Helena', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Marcus'}, {'montag': 'Fabian', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Hong', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}]"></kol-table> </div> <kol-heading _level="3">2 Header, Daten Vertikal, Sort and Render</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table id="table-2" _caption="2 Header, Daten Vertikal, Sort and Render" _data="[{'montag': 'Alex', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Helena', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Marcus'}, {'montag': 'Fabian', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Hong', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}]"></kol-table> </div> <kol-heading _level="3">Tabelle + Filter</kol-heading> <kol-input-text id="filter-input" _type="search">Filtern</kol-input-text> <div class="gap-2 col-12 d-grid"> <kol-table id="filter-table" _caption="Tabelle + Filter" _headers="{'horizontal':[[{'label':'Montag','key':'montag'},{'label':'Dienstag','key':'dienstag'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}"></kol-table> </div> <kol-heading _level="3">Nur Horizontal Header, Daten Horizontal, Pagination</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table id="table-3a" _caption="Nur Horizontal Header, Daten Horizontal, Pagination (A)" _headers="{'horizontal':[[{'label':'Montag','key':'montag','width':'10em'},{'label':'Dienstag','key':'dienstag','width':'15em'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}" _pagination="{'_boundaryCount': 0, '_page': 3, '_pageSize': 20, '_pageSizeOptions': [ 5, 10, 20, 50, 100 ]}"></kol-table> </div> <div class="gap-2 col-12 d-grid"> <kol-table id="table-3b" _caption="Nur Horizontal Header, Daten Horizontal, Pagination (B)" _headers="{'horizontal':[[{'label':'Montag','key':'montag','width':'10em'},{'label':'Dienstag','key':'dienstag','width':'15em'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}"></kol-table> </div> <kol-heading _level="3">Nur Horizontal Header, Daten Horizontal, Pagination, leer</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table _caption="Nur Horizontal Header, Daten Horizontal, Pagination, leer" _headers="{'horizontal':[[{'label':'Montag','key':'montag','width':'10em'},{'label':'Dienstag','key':'dienstag','width':'15em'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}" _min-width="1000px" _pagination=""></kol-table> </div> <kol-heading _level="3">Nur Vertikal Header, Daten Vertikal, Pagination</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table id="table-4" _caption="Nur Vertikal Header, Daten Vertikal, Pagination" _headers="{'vertical':[[{'label':'Montag','key':'montag'},{'label':'Dienstag','key':'dienstag'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}" _min-width="1000px" _pagination=""></kol-table> </div> <kol-heading _level="3">Nur Horizontal Header, Daten Horizontal, ohne Pagination</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table id="table-5" _caption="Nur Horizontal Header, Daten Horizontal, ohne Pagination" _headers="{'horizontal':[[{'label':'Montag','key':'montag','width':'10em'},{'label':'Dienstag','key':'dienstag','width':'15em'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}"></kol-table> </div> <kol-heading _level="3">Nur Vertikal Header, Daten Vertikal, ohne Pagination</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table id="table-6" _caption="Nur Vertikal Header, Daten Vertikal, ohne Pagination" _headers="{'vertical':[[{'label':'Montag','key':'montag'},{'label':'Dienstag','key':'dienstag'},{'label':'Mittwoch','key':'mittwoch'},{'label':'Donnerstag','key':'donnerstag'},{'label':'Freitag','key':'freitag'}]]}" _min-width="1000px"></kol-table> </div> <kol-heading _level="3">Manuelle Datenbefüllung und Steuerung der Pagination (experimentell)</kol-heading> <div class="gap-2 col-12 d-grid"> <kol-table class="p-4" _caption="Manuelle Datenbefüllung" _headers="{'horizontal': [[{'label': 'Montag', 'key': 'montag'}, {'label': 'Dienstag', 'key': 'dienstag'}, {'label': 'Mittwoch', 'key': 'mittwoch'}, {'label': 'Donnerstag', 'key': 'donnerstag'}, {'label': 'Freitag', 'key': 'freitag'}]]}" _data="[{'montag': 'Alex', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Helena', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Marcus'}, {'montag': 'Fabian', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}, {'montag': 'Hong', 'dienstag': 'Marie', 'mittwoch': 'Kevin', 'donnerstag': 'Maya', 'freitag': 'Ben'}]" _pagination="{'_total': 100, '_pageSize': 5, '_pageSizeOptions': [3,5,8]}"></kol-table> </div> </div> <script src="assets/table-simulation.js"></script> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> </div> <kol-heading _level="2">Tabs</kol-heading> </div> <div class="gap-2 col-12 d-grid"> <kol-alert _type="info"> Die Steuerung eines Tabs erfolgt durch klicken oder Pfeiltasten. Die Umsetzung ist nach W3C umgesetzt: <ul style="padding: 0.5em 2em;"> <li> <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html" _target="w3c"> https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html </kol-link> </li> <li> <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html" _target="w3c"> https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html </kol-link> </li> </ul> </kol-alert> <kol-tabs id="tabs-with-events" _aria-label="Tab-Navigation" _tabs="[{'_label':'Tab 1', '_icon': 'home'},{'_label':'Tab 2', '_variant': 'primary'},{'_label':'Tab 3','_disabled': true},{'_label':'Tab 4'},{'_label':'Tab 5'},{'_label':'Tab 6'},{'_label':'Tab 7'},{'_label':'Tab 8'}]"> <div> Tab 1 <div>Tab 1.1</div> </div> <div>Tab 2</div> <div>Tab 3</div> <div>Tab 4</div> <div>Tab 5</div> <div>Tab 6</div> <div>Tab 7</div> <div>Tab 8</div> </kol-tabs> <kol-tabs class="font-80" id="tabs-with-create" _aria-label="Tab-Navigation" _tabs="[{'_label':'Tab 1', '_icon': 'home','_disabled': true},{'_label':'Tab 2', '_variant': 'primary'},{'_label':'Tab 3','_disabled': true},{'_label':'Tab 4'},{'_label':'Tab 5'},{'_label':'Tab 6'},{'_label':'Tab 7'},{'_label':'Tab 8'}]"> <div>Tab 1</div> <div>Tab 2</div> <div>Tab 3</div> <div>Tab 4</div> <div>Tab 5</div> <div>Tab 6</div> <div>Tab 7</div> <div>Tab 8</div> </kol-tabs> <kol-tabs class="font-60" _aria-label="Tab-Navigation" _selected="7" _tabs="[{'_label':'Tab 1', '_icon': 'home'},{'_label':'Tab 2', '_variant': 'primary'},{'_label':'Tab 3','_disabled': true},{'_label':'Tab 4'},{'_label':'Tab 5'},{'_label':'Tab 6'},{'_label':'Tab 7'},{'_label':'Tab 8','_disabled': true}]"> <div>Tab 1</div> <div>Tab 2</div> <div>Tab 3</div> <div>Tab 4</div> <div>Tab 5</div> <div>Tab 6</div> <div>Tab 7</div> <div>Tab 8</div> </kol-tabs> <kol-tabs _aria-label="Tab-Navigation" _tabs="[{'_label':'Tab 1','_disabled': true},{'_label':'Tab 2','_disabled': true},{'_label':'Tab 3','_disabled': true}]"> <div>Tab 1</div> <div>Tab 2</div> <div>Tab 3</div> </kol-tabs> <kol-tabs _aria-label="Tolle Tabs" _selected="2" _tabs="[{'_label':'Tab 1','_icon': 'book-mark'},{'_label':'Tab 2','_icon': 'history'},{'_label':'Tab 3','_icon': 'settings-alt'}]"> <div>Tab 1</div> <div>Tab 2</div> <div>Tab 3</div> </kol-tabs> </div> </div> <script src="assets/tabs-simulation.js"></script> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="dashboard" _color="#600" _label="Retest"></kol-badge> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12*"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Toast</kol-heading> </div> <div class="col-12"> <kol-indent-text> <p> <b>Die Toast wird anfänglich und oben für kurze Zeit angezeigt.</b> </p> </kol-indent-text> <kol-button _label="Toast starten"></kol-button> </div> <div class="col-12"> <script src="assets/toast-simulation.js"></script> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> </div> <kol-heading _level="2">Tooltip</kol-heading> <p> Die Tooltip-Komponente implementiert das Gegenstück zum Aria-Label. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne
221
- Screenreader die Beschriftung eines Elementes anzuzeigen. </p> <kol-details _summary="Hinweise zur Barrierefreiheit"> <p> Die Tooltip-Komponente wird bei Focus oder Hover angezeigt und dient ausschließlich dem/der sehenden Nutzer:in ohne Screenreader die
222
- Beschriftung (Aria-Label) lesen zu können. Der Text des Tooltips ist selbst nicht mit der Tastatur erreichbar und zudem mittels Aria-Hidden
223
- für die Screenreader versteckt. </p> <kol-alert _type="info">Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange zudem von der Entwicklung sichergestellt wurde, dass der
224
- Tooltip-Text auch in gleicher Weise vom Screenreader vorgelesen wird.</kol-alert> </kol-details> </div> <div class="gap-2 col-12 d-grid justify-content-center"> <kol-button _label="Oben" _icon="simple-up" _icon-only="" _tooltip-align="top" _variant="primary"></kol-button> <kol-button _label="Unten" _icon="simple-down" _icon-only="" _tooltip-align="bottom" _variant="secondary"></kol-button> <kol-button _label="Links" _icon="simple-left" _icon-only="" _tooltip-align="left" _variant="normal"></kol-button> <kol-button _label="Rechts" _icon="simple-right" _icon-only="" _tooltip-align="right" _variant="danger"></kol-button> <kol-button _label="Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip. Ich bin der Text im Tooltip." _icon="home" _icon-only="" _variant="ghost"></kol-button> <kol-button _label="Disabled" _icon="bin" _icon-only="" _disabled=""></kol-button> </div> </div> </li> <li> <div class="row"> <div class="col-12"> <div class="gap-2 d-flex"> <kol-badge _icon="check" _color="#030" _label="BIK BITV-Test v12"></kol-badge> <kol-badge _icon="search-document" _color="#033" _label="Snapshot-Tests"></kol-badge> </div> <kol-heading _level="2">Version</kol-heading> </div> <div class="col-12"> <div class="gap-2 d-flex"> <kol-version _version="1.0.0"></kol-version> <kol-version _label="1.0.0"></kol-version> </div> </div> </div> </li> </ol> </main> <footer> <kol-button id="table-of-content-button" _icon="arrow-up" _icon-only="" _tooltip-align="left" _label="Zum Seitenanfang hochscrollen" style="position: fixed; right: 1rem; bottom: 4rem;"></kol-button> </footer> <script src="assets/@leanup/lib/index.js"></script> <script src="assets/@leanup/forms/index.js"></script> <script src="assets/accordion-simulation.js"></script> <script src="assets/button-simulation.js"></script> <script src="assets/form-simulation.js"></script> <script src="assets/form-simulation.textarea.js"></script> <script src="assets/form-simulation.weitere-cases.js"></script> <script src="assets/smart-button-simulation.js"></script> </body></html>