@public-ui/components 1.1.7-rc.10

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 (887) hide show
  1. package/LICENSE +287 -0
  2. package/README.md +7 -0
  3. package/custom-elements.json +2757 -0
  4. package/dist/cjs/a11y.tipps-54ec8bae.js +4 -0
  5. package/dist/cjs/app-globals-bc902400.js +4 -0
  6. package/dist/cjs/bund-ef793fe2.js +4 -0
  7. package/dist/cjs/button-link-4380f157.js +4 -0
  8. package/dist/cjs/color-1fa1e9b8.js +4 -0
  9. package/dist/cjs/controller-2a7b57a1.js +4 -0
  10. package/dist/cjs/controller-2e60fafc.js +4 -0
  11. package/dist/cjs/controller-31aca951.js +4 -0
  12. package/dist/cjs/controller-7c2e68bd.js +4 -0
  13. package/dist/cjs/controller-df507ca2.js +4 -0
  14. package/dist/cjs/controller-f4eac510.js +4 -0
  15. package/dist/cjs/dev.utils-3c37c3f3.js +4 -0
  16. package/dist/cjs/devtools-b7556d66.js +4 -0
  17. package/dist/cjs/icon-d3e06146.js +4 -0
  18. package/dist/cjs/index-4c07edf5.js +4 -0
  19. package/dist/cjs/index-6301c622.js +4 -0
  20. package/dist/cjs/index-e6ae017d.js +5 -0
  21. package/dist/cjs/index.cjs.js +4 -0
  22. package/dist/cjs/index.m-d4f02c88.js +4 -0
  23. package/dist/cjs/kol-abbr.cjs.entry.js +4 -0
  24. package/dist/cjs/kol-accordion.cjs.entry.js +4 -0
  25. package/dist/cjs/kol-alert.cjs.entry.js +4 -0
  26. package/dist/cjs/kol-badge.cjs.entry.js +4 -0
  27. package/dist/cjs/kol-breadcrumb.cjs.entry.js +4 -0
  28. package/dist/cjs/kol-button-group.cjs.entry.js +4 -0
  29. package/dist/cjs/kol-button-wc_3.cjs.entry.js +4 -0
  30. package/dist/cjs/kol-button.cjs.entry.js +4 -0
  31. package/dist/cjs/kol-card.cjs.entry.js +4 -0
  32. package/dist/cjs/kol-color.cjs.entry.js +4 -0
  33. package/dist/cjs/kol-counter.cjs.entry.js +4 -0
  34. package/dist/cjs/kol-details.cjs.entry.js +4 -0
  35. package/dist/cjs/kol-form.cjs.entry.js +4 -0
  36. package/dist/cjs/kol-heading.cjs.entry.js +4 -0
  37. package/dist/cjs/kol-icon-font-awesome.cjs.entry.js +4 -0
  38. package/dist/cjs/kol-icon-icofont.cjs.entry.js +4 -0
  39. package/dist/cjs/kol-icon.cjs.entry.js +4 -0
  40. package/dist/cjs/kol-indented-text.cjs.entry.js +4 -0
  41. package/dist/cjs/kol-input-adapter-leanup.cjs.entry.js +4 -0
  42. package/dist/cjs/kol-input-checkbox.cjs.entry.js +4 -0
  43. package/dist/cjs/kol-input-color.cjs.entry.js +4 -0
  44. package/dist/cjs/kol-input-email.cjs.entry.js +4 -0
  45. package/dist/cjs/kol-input-file.cjs.entry.js +4 -0
  46. package/dist/cjs/kol-input-number.cjs.entry.js +4 -0
  47. package/dist/cjs/kol-input-password.cjs.entry.js +4 -0
  48. package/dist/cjs/kol-input-radio-group.cjs.entry.js +4 -0
  49. package/dist/cjs/kol-input-radio.cjs.entry.js +4 -0
  50. package/dist/cjs/kol-input-range.cjs.entry.js +4 -0
  51. package/dist/cjs/kol-input-text.cjs.entry.js +4 -0
  52. package/dist/cjs/kol-kolibri.cjs.entry.js +4 -0
  53. package/dist/cjs/kol-link-group.cjs.entry.js +4 -0
  54. package/dist/cjs/kol-link-wc.cjs.entry.js +4 -0
  55. package/dist/cjs/kol-link.cjs.entry.js +4 -0
  56. package/dist/cjs/kol-logo.cjs.entry.js +4 -0
  57. package/dist/cjs/kol-modal.cjs.entry.js +4 -0
  58. package/dist/cjs/kol-nav.cjs.entry.js +4 -0
  59. package/dist/cjs/kol-pagination.cjs.entry.js +4 -0
  60. package/dist/cjs/kol-progress.cjs.entry.js +4 -0
  61. package/dist/cjs/kol-select.cjs.entry.js +4 -0
  62. package/dist/cjs/kol-skip-nav.cjs.entry.js +4 -0
  63. package/dist/cjs/kol-spin.cjs.entry.js +4 -0
  64. package/dist/cjs/kol-symbol.cjs.entry.js +4 -0
  65. package/dist/cjs/kol-table.cjs.entry.js +4 -0
  66. package/dist/cjs/kol-tabs.cjs.entry.js +4 -0
  67. package/dist/cjs/kol-textarea.cjs.entry.js +4 -0
  68. package/dist/cjs/kol-toast.cjs.entry.js +4 -0
  69. package/dist/cjs/kol-tooltip.cjs.entry.js +4 -0
  70. package/dist/cjs/kol-version.cjs.entry.js +4 -0
  71. package/dist/cjs/kolibri.cjs.js +4 -0
  72. package/dist/cjs/loader.cjs.js +4 -0
  73. package/dist/cjs/prop.validators-490c913d.js +4 -0
  74. package/dist/cjs/register-2a6fd996.js +4 -0
  75. package/dist/cjs/validation-5005bdab.js +4 -0
  76. package/dist/cjs/validation-846b8c03.js +4 -0
  77. package/dist/cjs/validator-a391018d.js +4 -0
  78. package/dist/components/color.js +4 -0
  79. package/dist/components/component.js +4 -0
  80. package/dist/components/component10.js +4 -0
  81. package/dist/components/component11.js +4 -0
  82. package/dist/components/component12.js +4 -0
  83. package/dist/components/component13.js +4 -0
  84. package/dist/components/component14.js +4 -0
  85. package/dist/components/component2.js +4 -0
  86. package/dist/components/component3.js +4 -0
  87. package/dist/components/component4.js +4 -0
  88. package/dist/components/component5.js +4 -0
  89. package/dist/components/component6.js +4 -0
  90. package/dist/components/component7.js +4 -0
  91. package/dist/components/component8.js +4 -0
  92. package/dist/components/component9.js +4 -0
  93. package/dist/components/controller.js +4 -0
  94. package/dist/components/controller2.js +4 -0
  95. package/dist/components/controller3.js +4 -0
  96. package/dist/components/controller4.js +4 -0
  97. package/dist/components/devtools.js +4 -0
  98. package/dist/components/icon.js +4 -0
  99. package/dist/components/index.d.ts +71 -0
  100. package/dist/components/index.js +4 -0
  101. package/dist/components/index.m.js +4 -0
  102. package/dist/components/index2.js +4 -0
  103. package/dist/components/index3.js +4 -0
  104. package/dist/components/kol-abbr.d.ts +11 -0
  105. package/dist/components/kol-abbr.js +4 -0
  106. package/dist/components/kol-accordion.d.ts +11 -0
  107. package/dist/components/kol-accordion.js +4 -0
  108. package/dist/components/kol-alert.d.ts +11 -0
  109. package/dist/components/kol-alert.js +4 -0
  110. package/dist/components/kol-badge.d.ts +11 -0
  111. package/dist/components/kol-badge.js +4 -0
  112. package/dist/components/kol-breadcrumb.d.ts +11 -0
  113. package/dist/components/kol-breadcrumb.js +4 -0
  114. package/dist/components/kol-button-group.d.ts +11 -0
  115. package/dist/components/kol-button-group.js +4 -0
  116. package/dist/components/kol-button-wc.d.ts +11 -0
  117. package/dist/components/kol-button-wc.js +4 -0
  118. package/dist/components/kol-button.d.ts +11 -0
  119. package/dist/components/kol-button.js +4 -0
  120. package/dist/components/kol-card.d.ts +11 -0
  121. package/dist/components/kol-card.js +4 -0
  122. package/dist/components/kol-color.d.ts +11 -0
  123. package/dist/components/kol-color.js +4 -0
  124. package/dist/components/kol-counter.d.ts +11 -0
  125. package/dist/components/kol-counter.js +4 -0
  126. package/dist/components/kol-details.d.ts +11 -0
  127. package/dist/components/kol-details.js +4 -0
  128. package/dist/components/kol-form.d.ts +11 -0
  129. package/dist/components/kol-form.js +4 -0
  130. package/dist/components/kol-heading-wc.d.ts +11 -0
  131. package/dist/components/kol-heading-wc.js +4 -0
  132. package/dist/components/kol-heading.d.ts +11 -0
  133. package/dist/components/kol-heading.js +4 -0
  134. package/dist/components/kol-icon-font-awesome.d.ts +11 -0
  135. package/dist/components/kol-icon-font-awesome.js +4 -0
  136. package/dist/components/kol-icon-icofont.d.ts +11 -0
  137. package/dist/components/kol-icon-icofont.js +4 -0
  138. package/dist/components/kol-icon.d.ts +11 -0
  139. package/dist/components/kol-icon.js +4 -0
  140. package/dist/components/kol-indented-text.d.ts +11 -0
  141. package/dist/components/kol-indented-text.js +4 -0
  142. package/dist/components/kol-input-adapter-leanup.d.ts +11 -0
  143. package/dist/components/kol-input-adapter-leanup.js +4 -0
  144. package/dist/components/kol-input-checkbox.d.ts +11 -0
  145. package/dist/components/kol-input-checkbox.js +4 -0
  146. package/dist/components/kol-input-color.d.ts +11 -0
  147. package/dist/components/kol-input-color.js +4 -0
  148. package/dist/components/kol-input-email.d.ts +11 -0
  149. package/dist/components/kol-input-email.js +4 -0
  150. package/dist/components/kol-input-file.d.ts +11 -0
  151. package/dist/components/kol-input-file.js +4 -0
  152. package/dist/components/kol-input-number.d.ts +11 -0
  153. package/dist/components/kol-input-number.js +4 -0
  154. package/dist/components/kol-input-password.d.ts +11 -0
  155. package/dist/components/kol-input-password.js +4 -0
  156. package/dist/components/kol-input-radio-group.d.ts +11 -0
  157. package/dist/components/kol-input-radio-group.js +4 -0
  158. package/dist/components/kol-input-radio.d.ts +11 -0
  159. package/dist/components/kol-input-radio.js +4 -0
  160. package/dist/components/kol-input-range.d.ts +11 -0
  161. package/dist/components/kol-input-range.js +4 -0
  162. package/dist/components/kol-input-text.d.ts +11 -0
  163. package/dist/components/kol-input-text.js +4 -0
  164. package/dist/components/kol-input.d.ts +11 -0
  165. package/dist/components/kol-input.js +4 -0
  166. package/dist/components/kol-kolibri.d.ts +11 -0
  167. package/dist/components/kol-kolibri.js +4 -0
  168. package/dist/components/kol-link-group.d.ts +11 -0
  169. package/dist/components/kol-link-group.js +4 -0
  170. package/dist/components/kol-link-wc.d.ts +11 -0
  171. package/dist/components/kol-link-wc.js +4 -0
  172. package/dist/components/kol-link.d.ts +11 -0
  173. package/dist/components/kol-link.js +4 -0
  174. package/dist/components/kol-logo.d.ts +11 -0
  175. package/dist/components/kol-logo.js +4 -0
  176. package/dist/components/kol-modal.d.ts +11 -0
  177. package/dist/components/kol-modal.js +4 -0
  178. package/dist/components/kol-nav.d.ts +11 -0
  179. package/dist/components/kol-nav.js +4 -0
  180. package/dist/components/kol-pagination.d.ts +11 -0
  181. package/dist/components/kol-pagination.js +4 -0
  182. package/dist/components/kol-progress.d.ts +11 -0
  183. package/dist/components/kol-progress.js +4 -0
  184. package/dist/components/kol-select.d.ts +11 -0
  185. package/dist/components/kol-select.js +4 -0
  186. package/dist/components/kol-skip-nav.d.ts +11 -0
  187. package/dist/components/kol-skip-nav.js +4 -0
  188. package/dist/components/kol-spin.d.ts +11 -0
  189. package/dist/components/kol-spin.js +4 -0
  190. package/dist/components/kol-symbol.d.ts +11 -0
  191. package/dist/components/kol-symbol.js +4 -0
  192. package/dist/components/kol-table.d.ts +11 -0
  193. package/dist/components/kol-table.js +4 -0
  194. package/dist/components/kol-tabs.d.ts +11 -0
  195. package/dist/components/kol-tabs.js +4 -0
  196. package/dist/components/kol-textarea.d.ts +11 -0
  197. package/dist/components/kol-textarea.js +4 -0
  198. package/dist/components/kol-toast.d.ts +11 -0
  199. package/dist/components/kol-toast.js +4 -0
  200. package/dist/components/kol-tooltip.d.ts +11 -0
  201. package/dist/components/kol-tooltip.js +4 -0
  202. package/dist/components/kol-version.d.ts +11 -0
  203. package/dist/components/kol-version.js +4 -0
  204. package/dist/components/prop.validators.js +4 -0
  205. package/dist/components/shadow.js +4 -0
  206. package/dist/components/shadow2.js +4 -0
  207. package/dist/components/validation.js +4 -0
  208. package/dist/custom-elements/devtools.js +4 -0
  209. package/dist/custom-elements/index.d.ts +339 -0
  210. package/dist/custom-elements/index.js +4 -0
  211. package/dist/esm/a11y.tipps-1c83d041.js +4 -0
  212. package/dist/esm/app-globals-1ddbfb3b.js +4 -0
  213. package/dist/esm/bund-91b5001a.js +4 -0
  214. package/dist/esm/button-link-f489475e.js +4 -0
  215. package/dist/esm/color-20533e03.js +4 -0
  216. package/dist/esm/controller-0daf13c7.js +4 -0
  217. package/dist/esm/controller-2e3018c4.js +4 -0
  218. package/dist/esm/controller-530b88df.js +4 -0
  219. package/dist/esm/controller-86bf62ed.js +4 -0
  220. package/dist/esm/controller-aa7513aa.js +4 -0
  221. package/dist/esm/controller-d106df71.js +4 -0
  222. package/dist/esm/dev.utils-c9cfb9a5.js +4 -0
  223. package/dist/esm/devtools-6678ab14.js +4 -0
  224. package/dist/esm/icon-63b36435.js +4 -0
  225. package/dist/esm/index-a604e45a.js +4 -0
  226. package/dist/esm/index-bc1a7f22.js +5 -0
  227. package/dist/esm/index-c4d8198b.js +4 -0
  228. package/dist/esm/index.js +4 -0
  229. package/dist/esm/index.m-df5ce03f.js +4 -0
  230. package/dist/esm/kol-abbr.entry.js +4 -0
  231. package/dist/esm/kol-accordion.entry.js +4 -0
  232. package/dist/esm/kol-alert.entry.js +4 -0
  233. package/dist/esm/kol-badge.entry.js +4 -0
  234. package/dist/esm/kol-breadcrumb.entry.js +4 -0
  235. package/dist/esm/kol-button-group.entry.js +4 -0
  236. package/dist/esm/kol-button-wc_3.entry.js +4 -0
  237. package/dist/esm/kol-button.entry.js +4 -0
  238. package/dist/esm/kol-card.entry.js +4 -0
  239. package/dist/esm/kol-color.entry.js +4 -0
  240. package/dist/esm/kol-counter.entry.js +4 -0
  241. package/dist/esm/kol-details.entry.js +4 -0
  242. package/dist/esm/kol-form.entry.js +4 -0
  243. package/dist/esm/kol-heading.entry.js +4 -0
  244. package/dist/esm/kol-icon-font-awesome.entry.js +4 -0
  245. package/dist/esm/kol-icon-icofont.entry.js +4 -0
  246. package/dist/esm/kol-icon.entry.js +4 -0
  247. package/dist/esm/kol-indented-text.entry.js +4 -0
  248. package/dist/esm/kol-input-adapter-leanup.entry.js +4 -0
  249. package/dist/esm/kol-input-checkbox.entry.js +4 -0
  250. package/dist/esm/kol-input-color.entry.js +4 -0
  251. package/dist/esm/kol-input-email.entry.js +4 -0
  252. package/dist/esm/kol-input-file.entry.js +4 -0
  253. package/dist/esm/kol-input-number.entry.js +4 -0
  254. package/dist/esm/kol-input-password.entry.js +4 -0
  255. package/dist/esm/kol-input-radio-group.entry.js +4 -0
  256. package/dist/esm/kol-input-radio.entry.js +4 -0
  257. package/dist/esm/kol-input-range.entry.js +4 -0
  258. package/dist/esm/kol-input-text.entry.js +4 -0
  259. package/dist/esm/kol-kolibri.entry.js +4 -0
  260. package/dist/esm/kol-link-group.entry.js +4 -0
  261. package/dist/esm/kol-link-wc.entry.js +4 -0
  262. package/dist/esm/kol-link.entry.js +4 -0
  263. package/dist/esm/kol-logo.entry.js +4 -0
  264. package/dist/esm/kol-modal.entry.js +4 -0
  265. package/dist/esm/kol-nav.entry.js +4 -0
  266. package/dist/esm/kol-pagination.entry.js +4 -0
  267. package/dist/esm/kol-progress.entry.js +4 -0
  268. package/dist/esm/kol-select.entry.js +4 -0
  269. package/dist/esm/kol-skip-nav.entry.js +4 -0
  270. package/dist/esm/kol-spin.entry.js +4 -0
  271. package/dist/esm/kol-symbol.entry.js +4 -0
  272. package/dist/esm/kol-table.entry.js +4 -0
  273. package/dist/esm/kol-tabs.entry.js +4 -0
  274. package/dist/esm/kol-textarea.entry.js +4 -0
  275. package/dist/esm/kol-toast.entry.js +4 -0
  276. package/dist/esm/kol-tooltip.entry.js +4 -0
  277. package/dist/esm/kol-version.entry.js +4 -0
  278. package/dist/esm/kolibri.js +4 -0
  279. package/dist/esm/loader.js +4 -0
  280. package/dist/esm/polyfills/core-js.js +1 -0
  281. package/dist/esm/polyfills/css-shim.js +1 -0
  282. package/dist/esm/polyfills/dom.js +19 -0
  283. package/dist/esm/polyfills/es5-html-element.js +1 -0
  284. package/dist/esm/polyfills/index.js +1 -0
  285. package/dist/esm/polyfills/system.js +1 -0
  286. package/dist/esm/prop.validators-8c56bf7d.js +4 -0
  287. package/dist/esm/register-c6216033.js +4 -0
  288. package/dist/esm/validation-735dcb5c.js +4 -0
  289. package/dist/esm/validation-a5b35355.js +4 -0
  290. package/dist/esm/validator-985dcb65.js +4 -0
  291. package/dist/index.cjs.js +1 -0
  292. package/dist/index.js +1 -0
  293. package/dist/kolibri/a11y.tipps-1c83d041.js +4 -0
  294. package/dist/kolibri/app-globals-1ddbfb3b.js +4 -0
  295. package/dist/kolibri/assets/accordion-simulation.js +1 -0
  296. package/dist/kolibri/assets/bund/bund.css +41 -0
  297. package/dist/kolibri/assets/bund/font/BundesSans-Web-Black.ttf +0 -0
  298. package/dist/kolibri/assets/bund/font/BundesSans-Web-Black.woff +0 -0
  299. package/dist/kolibri/assets/bund/font/BundesSans-Web-Black.woff2 +0 -0
  300. package/dist/kolibri/assets/bund/font/BundesSans-Web-BlackItalic.ttf +0 -0
  301. package/dist/kolibri/assets/bund/font/BundesSans-Web-BlackItalic.woff +0 -0
  302. package/dist/kolibri/assets/bund/font/BundesSans-Web-BlackItalic.woff2 +0 -0
  303. package/dist/kolibri/assets/bund/font/BundesSans-Web-Bold.ttf +0 -0
  304. package/dist/kolibri/assets/bund/font/BundesSans-Web-Bold.woff +0 -0
  305. package/dist/kolibri/assets/bund/font/BundesSans-Web-Bold.woff2 +0 -0
  306. package/dist/kolibri/assets/bund/font/BundesSans-Web-BoldItalic.ttf +0 -0
  307. package/dist/kolibri/assets/bund/font/BundesSans-Web-BoldItalic.woff +0 -0
  308. package/dist/kolibri/assets/bund/font/BundesSans-Web-BoldItalic.woff2 +0 -0
  309. package/dist/kolibri/assets/bund/font/BundesSans-Web-Light.ttf +0 -0
  310. package/dist/kolibri/assets/bund/font/BundesSans-Web-Light.woff +0 -0
  311. package/dist/kolibri/assets/bund/font/BundesSans-Web-Light.woff2 +0 -0
  312. package/dist/kolibri/assets/bund/font/BundesSans-Web-LightItalic.ttf +0 -0
  313. package/dist/kolibri/assets/bund/font/BundesSans-Web-LightItalic.woff +0 -0
  314. package/dist/kolibri/assets/bund/font/BundesSans-Web-LightItalic.woff2 +0 -0
  315. package/dist/kolibri/assets/bund/font/BundesSans-Web-Medium.ttf +0 -0
  316. package/dist/kolibri/assets/bund/font/BundesSans-Web-Medium.woff +0 -0
  317. package/dist/kolibri/assets/bund/font/BundesSans-Web-Medium.woff2 +0 -0
  318. package/dist/kolibri/assets/bund/font/BundesSans-Web-MediumItalic.ttf +0 -0
  319. package/dist/kolibri/assets/bund/font/BundesSans-Web-MediumItalic.woff +0 -0
  320. package/dist/kolibri/assets/bund/font/BundesSans-Web-MediumItalic.woff2 +0 -0
  321. package/dist/kolibri/assets/bund/font/BundesSans-Web-Regular.ttf +0 -0
  322. package/dist/kolibri/assets/bund/font/BundesSans-Web-Regular.woff +0 -0
  323. package/dist/kolibri/assets/bund/font/BundesSans-Web-Regular.woff2 +0 -0
  324. package/dist/kolibri/assets/bund/font/BundesSans-Web-RegularItalic.ttf +0 -0
  325. package/dist/kolibri/assets/bund/font/BundesSans-Web-RegularItalic.woff +0 -0
  326. package/dist/kolibri/assets/bund/font/BundesSans-Web-RegularItalic.woff2 +0 -0
  327. package/dist/kolibri/assets/bund/font/bundessansweb-bold-woff-data.woff +0 -0
  328. package/dist/kolibri/assets/bund/font/bundessansweb-regular-woff-data.woff +0 -0
  329. package/dist/kolibri/assets/bund/font/bundesserifweb-regular-woff-data.woff +0 -0
  330. package/dist/kolibri/assets/bund/forms.js +1 -0
  331. package/dist/kolibri/assets/bund/svg/itzbund.svg +13 -0
  332. package/dist/kolibri/assets/button-simulation.js +1 -0
  333. package/dist/kolibri/assets/favicon.ico +0 -0
  334. package/dist/kolibri/assets/fontawesome-free/v5/LICENSE.txt +34 -0
  335. package/dist/kolibri/assets/fontawesome-free/v5/css/all.css +4616 -0
  336. package/dist/kolibri/assets/fontawesome-free/v5/css/all.min.css +5 -0
  337. package/dist/kolibri/assets/fontawesome-free/v5/css/brands.css +15 -0
  338. package/dist/kolibri/assets/fontawesome-free/v5/css/brands.min.css +5 -0
  339. package/dist/kolibri/assets/fontawesome-free/v5/css/fontawesome.css +4582 -0
  340. package/dist/kolibri/assets/fontawesome-free/v5/css/fontawesome.min.css +5 -0
  341. package/dist/kolibri/assets/fontawesome-free/v5/css/regular.css +15 -0
  342. package/dist/kolibri/assets/fontawesome-free/v5/css/regular.min.css +5 -0
  343. package/dist/kolibri/assets/fontawesome-free/v5/css/solid.css +16 -0
  344. package/dist/kolibri/assets/fontawesome-free/v5/css/solid.min.css +5 -0
  345. package/dist/kolibri/assets/fontawesome-free/v5/css/svg-with-js.css +371 -0
  346. package/dist/kolibri/assets/fontawesome-free/v5/css/svg-with-js.min.css +5 -0
  347. package/dist/kolibri/assets/fontawesome-free/v5/css/v4-shims.css +2172 -0
  348. package/dist/kolibri/assets/fontawesome-free/v5/css/v4-shims.min.css +5 -0
  349. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.eot +0 -0
  350. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.svg +3717 -0
  351. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.ttf +0 -0
  352. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff +0 -0
  353. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff2 +0 -0
  354. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.eot +0 -0
  355. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.svg +801 -0
  356. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.ttf +0 -0
  357. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff +0 -0
  358. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff2 +0 -0
  359. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.eot +0 -0
  360. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.svg +5034 -0
  361. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.ttf +0 -0
  362. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff +0 -0
  363. package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff2 +0 -0
  364. package/dist/kolibri/assets/fontawesome-free/v6/LICENSE.txt +165 -0
  365. package/dist/kolibri/assets/fontawesome-free/v6/css/all.css +10408 -0
  366. package/dist/kolibri/assets/fontawesome-free/v6/css/all.min.css +6 -0
  367. package/dist/kolibri/assets/fontawesome-free/v6/css/brands.css +1432 -0
  368. package/dist/kolibri/assets/fontawesome-free/v6/css/brands.min.css +6 -0
  369. package/dist/kolibri/assets/fontawesome-free/v6/css/fontawesome.css +6338 -0
  370. package/dist/kolibri/assets/fontawesome-free/v6/css/fontawesome.min.css +6 -0
  371. package/dist/kolibri/assets/fontawesome-free/v6/css/regular.css +19 -0
  372. package/dist/kolibri/assets/fontawesome-free/v6/css/regular.min.css +6 -0
  373. package/dist/kolibri/assets/fontawesome-free/v6/css/solid.css +19 -0
  374. package/dist/kolibri/assets/fontawesome-free/v6/css/solid.min.css +6 -0
  375. package/dist/kolibri/assets/fontawesome-free/v6/css/svg-with-js.css +634 -0
  376. package/dist/kolibri/assets/fontawesome-free/v6/css/svg-with-js.min.css +6 -0
  377. package/dist/kolibri/assets/fontawesome-free/v6/css/v4-font-face.css +26 -0
  378. package/dist/kolibri/assets/fontawesome-free/v6/css/v4-font-face.min.css +6 -0
  379. package/dist/kolibri/assets/fontawesome-free/v6/css/v4-shims.css +2146 -0
  380. package/dist/kolibri/assets/fontawesome-free/v6/css/v4-shims.min.css +6 -0
  381. package/dist/kolibri/assets/fontawesome-free/v6/css/v5-font-face.css +22 -0
  382. package/dist/kolibri/assets/fontawesome-free/v6/css/v5-font-face.min.css +6 -0
  383. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-brands-400.ttf +0 -0
  384. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-brands-400.woff2 +0 -0
  385. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-regular-400.ttf +0 -0
  386. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-regular-400.woff2 +0 -0
  387. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-solid-900.ttf +0 -0
  388. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-solid-900.woff2 +0 -0
  389. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-v4compatibility.ttf +0 -0
  390. package/dist/kolibri/assets/fontawesome-free/v6/webfonts/fa-v4compatibility.woff2 +0 -0
  391. package/dist/kolibri/assets/form-simulation.js +1 -0
  392. package/dist/kolibri/assets/form-simulation.textarea.js +1 -0
  393. package/dist/kolibri/assets/form-simulation.weitere-cases.js +1 -0
  394. package/dist/kolibri/assets/icofont/demo.html +18942 -0
  395. package/dist/kolibri/assets/icofont/fonts/icofont.eot +0 -0
  396. package/dist/kolibri/assets/icofont/fonts/icofont.svg +2105 -0
  397. package/dist/kolibri/assets/icofont/fonts/icofont.ttf +0 -0
  398. package/dist/kolibri/assets/icofont/fonts/icofont.woff +0 -0
  399. package/dist/kolibri/assets/icofont/fonts/icofont.woff2 +0 -0
  400. package/dist/kolibri/assets/icofont/icofont.css +10757 -0
  401. package/dist/kolibri/assets/icofont/icofont.min.css +7 -0
  402. package/dist/kolibri/assets/itzbund.logo.svg +6 -0
  403. package/dist/kolibri/assets/kolibri.logo.svg +31 -0
  404. package/dist/kolibri/assets/logo.kolibri.invert.svg +9 -0
  405. package/dist/kolibri/assets/logo.kolibri.svg +9 -0
  406. package/dist/kolibri/assets/logo.kolibri.text.invert.svg +9 -0
  407. package/dist/kolibri/assets/logo.kolibri.text.svg +10 -0
  408. package/dist/kolibri/assets/modal-simulation.js +1 -0
  409. package/dist/kolibri/assets/nav-simulation.js +1 -0
  410. package/dist/kolibri/assets/pagination-simulation.js +1 -0
  411. package/dist/kolibri/assets/progress-simulation.js +1 -0
  412. package/dist/kolibri/assets/roboto/LICENSE.txt +202 -0
  413. package/dist/kolibri/assets/roboto/Roboto-Black.ttf +0 -0
  414. package/dist/kolibri/assets/roboto/Roboto-BlackItalic.ttf +0 -0
  415. package/dist/kolibri/assets/roboto/Roboto-Bold.ttf +0 -0
  416. package/dist/kolibri/assets/roboto/Roboto-BoldItalic.ttf +0 -0
  417. package/dist/kolibri/assets/roboto/Roboto-Italic.ttf +0 -0
  418. package/dist/kolibri/assets/roboto/Roboto-Light.ttf +0 -0
  419. package/dist/kolibri/assets/roboto/Roboto-LightItalic.ttf +0 -0
  420. package/dist/kolibri/assets/roboto/Roboto-Medium.ttf +0 -0
  421. package/dist/kolibri/assets/roboto/Roboto-MediumItalic.ttf +0 -0
  422. package/dist/kolibri/assets/roboto/Roboto-Regular.ttf +0 -0
  423. package/dist/kolibri/assets/roboto/Roboto-Thin.ttf +0 -0
  424. package/dist/kolibri/assets/roboto/Roboto-ThinItalic.ttf +0 -0
  425. package/dist/kolibri/assets/roboto/roboto.css +27 -0
  426. package/dist/kolibri/assets/smart-button-simulation.js +1 -0
  427. package/dist/kolibri/assets/spin-simulation.js +1 -0
  428. package/dist/kolibri/assets/style.css +144 -0
  429. package/dist/kolibri/assets/table-simulation.js +1 -0
  430. package/dist/kolibri/assets/tabs-simulation.js +1 -0
  431. package/dist/kolibri/assets/themes/bamf.css +39 -0
  432. package/dist/kolibri/assets/themes/bmf.bak.css +283 -0
  433. package/dist/kolibri/assets/themes/bmf.css +39 -0
  434. package/dist/kolibri/assets/themes/bzst.css +245 -0
  435. package/dist/kolibri/assets/themes/itzbund.css +259 -0
  436. package/dist/kolibri/assets/themes/mapz.bak.css +219 -0
  437. package/dist/kolibri/assets/themes/mapz.css +39 -0
  438. package/dist/kolibri/assets/toast-simulation.js +1 -0
  439. package/dist/kolibri/bund-91b5001a.js +4 -0
  440. package/dist/kolibri/button-link-f489475e.js +4 -0
  441. package/dist/kolibri/color-20533e03.js +4 -0
  442. package/dist/kolibri/controller-0daf13c7.js +4 -0
  443. package/dist/kolibri/controller-2e3018c4.js +4 -0
  444. package/dist/kolibri/controller-530b88df.js +4 -0
  445. package/dist/kolibri/controller-86bf62ed.js +4 -0
  446. package/dist/kolibri/controller-aa7513aa.js +4 -0
  447. package/dist/kolibri/controller-d106df71.js +4 -0
  448. package/dist/kolibri/dev.utils-c9cfb9a5.js +4 -0
  449. package/dist/kolibri/devtools-6678ab14.js +4 -0
  450. package/dist/kolibri/icon-63b36435.js +4 -0
  451. package/dist/kolibri/index-a604e45a.js +4 -0
  452. package/dist/kolibri/index-bc1a7f22.js +5 -0
  453. package/dist/kolibri/index-c4d8198b.js +4 -0
  454. package/dist/kolibri/index.esm.js +4 -0
  455. package/dist/kolibri/index.m-df5ce03f.js +4 -0
  456. package/dist/kolibri/kol-abbr.entry.js +4 -0
  457. package/dist/kolibri/kol-accordion.entry.js +4 -0
  458. package/dist/kolibri/kol-alert.entry.js +4 -0
  459. package/dist/kolibri/kol-badge.entry.js +4 -0
  460. package/dist/kolibri/kol-breadcrumb.entry.js +4 -0
  461. package/dist/kolibri/kol-button-group.entry.js +4 -0
  462. package/dist/kolibri/kol-button-wc_3.entry.js +4 -0
  463. package/dist/kolibri/kol-button.entry.js +4 -0
  464. package/dist/kolibri/kol-card.entry.js +4 -0
  465. package/dist/kolibri/kol-color.entry.js +4 -0
  466. package/dist/kolibri/kol-counter.entry.js +4 -0
  467. package/dist/kolibri/kol-details.entry.js +4 -0
  468. package/dist/kolibri/kol-form.entry.js +4 -0
  469. package/dist/kolibri/kol-heading.entry.js +4 -0
  470. package/dist/kolibri/kol-icon-font-awesome.entry.js +4 -0
  471. package/dist/kolibri/kol-icon-icofont.entry.js +4 -0
  472. package/dist/kolibri/kol-icon.entry.js +4 -0
  473. package/dist/kolibri/kol-indented-text.entry.js +4 -0
  474. package/dist/kolibri/kol-input-adapter-leanup.entry.js +4 -0
  475. package/dist/kolibri/kol-input-checkbox.entry.js +4 -0
  476. package/dist/kolibri/kol-input-color.entry.js +4 -0
  477. package/dist/kolibri/kol-input-email.entry.js +4 -0
  478. package/dist/kolibri/kol-input-file.entry.js +4 -0
  479. package/dist/kolibri/kol-input-number.entry.js +4 -0
  480. package/dist/kolibri/kol-input-password.entry.js +4 -0
  481. package/dist/kolibri/kol-input-radio-group.entry.js +4 -0
  482. package/dist/kolibri/kol-input-radio.entry.js +4 -0
  483. package/dist/kolibri/kol-input-range.entry.js +4 -0
  484. package/dist/kolibri/kol-input-text.entry.js +4 -0
  485. package/dist/kolibri/kol-kolibri.entry.js +4 -0
  486. package/dist/kolibri/kol-link-group.entry.js +4 -0
  487. package/dist/kolibri/kol-link-wc.entry.js +4 -0
  488. package/dist/kolibri/kol-link.entry.js +4 -0
  489. package/dist/kolibri/kol-logo.entry.js +4 -0
  490. package/dist/kolibri/kol-modal.entry.js +4 -0
  491. package/dist/kolibri/kol-nav.entry.js +4 -0
  492. package/dist/kolibri/kol-pagination.entry.js +4 -0
  493. package/dist/kolibri/kol-progress.entry.js +4 -0
  494. package/dist/kolibri/kol-select.entry.js +4 -0
  495. package/dist/kolibri/kol-skip-nav.entry.js +4 -0
  496. package/dist/kolibri/kol-spin.entry.js +4 -0
  497. package/dist/kolibri/kol-symbol.entry.js +4 -0
  498. package/dist/kolibri/kol-table.entry.js +4 -0
  499. package/dist/kolibri/kol-tabs.entry.js +4 -0
  500. package/dist/kolibri/kol-textarea.entry.js +4 -0
  501. package/dist/kolibri/kol-toast.entry.js +4 -0
  502. package/dist/kolibri/kol-tooltip.entry.js +4 -0
  503. package/dist/kolibri/kol-version.entry.js +4 -0
  504. package/dist/kolibri/kolibri.esm.js +4 -0
  505. package/dist/kolibri/prop.validators-8c56bf7d.js +4 -0
  506. package/dist/kolibri/register-c6216033.js +4 -0
  507. package/dist/kolibri/validation-735dcb5c.js +4 -0
  508. package/dist/kolibri/validation-a5b35355.js +4 -0
  509. package/dist/kolibri/validator-985dcb65.js +4 -0
  510. package/dist/loader/cdn.js +4 -0
  511. package/dist/loader/index.cjs.js +4 -0
  512. package/dist/loader/index.d.ts +12 -0
  513. package/dist/loader/index.es2017.js +4 -0
  514. package/dist/loader/index.js +4 -0
  515. package/dist/loader/package.json +11 -0
  516. package/dist/types/components/@deprecated/input/controller.d.ts +36 -0
  517. package/dist/types/components/@deprecated/input/types.d.ts +22 -0
  518. package/dist/types/components/@else/all/component.d.ts +12 -0
  519. package/dist/types/components/@else/color/component.d.ts +5 -0
  520. package/dist/types/components/@else/counter/component.d.ts +9 -0
  521. package/dist/types/components/abbr/component.d.ts +23 -0
  522. package/dist/types/components/abbr/test/html.mock.d.ts +2 -0
  523. package/dist/types/components/accordion/component.d.ts +38 -0
  524. package/dist/types/components/accordion/test/html.mock.d.ts +6 -0
  525. package/dist/types/components/alert/component.d.ts +40 -0
  526. package/dist/types/components/alert/test/html.mock.d.ts +2 -0
  527. package/dist/types/components/badge/color-rgba.d.ts +1 -0
  528. package/dist/types/components/badge/component.d.ts +47 -0
  529. package/dist/types/components/badge/contrast.d.ts +9 -0
  530. package/dist/types/components/badge/rgba-convert.d.ts +1 -0
  531. package/dist/types/components/badge/test/html.mock.d.ts +2 -0
  532. package/dist/types/components/breadcrumb/component.d.ts +26 -0
  533. package/dist/types/components/breadcrumb/test/html.mock.d.ts +2 -0
  534. package/dist/types/components/button/component.d.ts +52 -0
  535. package/dist/types/components/button/controller.d.ts +5 -0
  536. package/dist/types/components/button/shadow.d.ts +29 -0
  537. package/dist/types/components/button-group/component.d.ts +12 -0
  538. package/dist/types/components/card/component.d.ts +29 -0
  539. package/dist/types/components/card/test/html.mock.d.ts +2 -0
  540. package/dist/types/components/component-list.d.ts +2 -0
  541. package/dist/types/components/details/component.d.ts +24 -0
  542. package/dist/types/components/details/test/html.mock.d.ts +4 -0
  543. package/dist/types/components/form/component.d.ts +30 -0
  544. package/dist/types/components/form/controller.d.ts +8 -0
  545. package/dist/types/components/form/test/html.mock.d.ts +2 -0
  546. package/dist/types/components/heading/component.d.ts +19 -0
  547. package/dist/types/components/heading/shadow.d.ts +7 -0
  548. package/dist/types/components/heading/test/html.mock.d.ts +7 -0
  549. package/dist/types/components/heading/validation.d.ts +2 -0
  550. package/dist/types/components/icon/component.d.ts +25 -0
  551. package/dist/types/components/icon/test/html.mock.d.ts +2 -0
  552. package/dist/types/components/icon-font-awesome/component.d.ts +19 -0
  553. package/dist/types/components/icon-icofont/component.d.ts +18 -0
  554. package/dist/types/components/icon-icofont/test/html.mock.d.ts +2 -0
  555. package/dist/types/components/icon-icofont/validation.d.ts +3 -0
  556. package/dist/types/components/indented-text/component.d.ts +13 -0
  557. package/dist/types/components/indented-text/test/html.mock.d.ts +4 -0
  558. package/dist/types/components/input/component.d.ts +21 -0
  559. package/dist/types/components/input/controller.d.ts +10 -0
  560. package/dist/types/components/input/types.d.ts +18 -0
  561. package/dist/types/components/input-adapter-leanup/component.d.ts +4 -0
  562. package/dist/types/components/input-adapter-leanup/controller.d.ts +10 -0
  563. package/dist/types/components/input-adapter-leanup/types.d.ts +9 -0
  564. package/dist/types/components/input-checkbox/component.d.ts +43 -0
  565. package/dist/types/components/input-checkbox/controller.d.ts +12 -0
  566. package/dist/types/components/input-checkbox/types.d.ts +47 -0
  567. package/dist/types/components/input-color/component.d.ts +45 -0
  568. package/dist/types/components/input-color/controller.d.ts +13 -0
  569. package/dist/types/components/input-color/types.d.ts +48 -0
  570. package/dist/types/components/input-email/component.d.ts +64 -0
  571. package/dist/types/components/input-email/controller.d.ts +9 -0
  572. package/dist/types/components/input-email/types.d.ts +62 -0
  573. package/dist/types/components/input-file/component.d.ts +50 -0
  574. package/dist/types/components/input-file/controller.d.ts +12 -0
  575. package/dist/types/components/input-file/types.d.ts +50 -0
  576. package/dist/types/components/input-number/component.d.ts +65 -0
  577. package/dist/types/components/input-number/controller.d.ts +21 -0
  578. package/dist/types/components/input-number/types.d.ts +63 -0
  579. package/dist/types/components/input-password/component.d.ts +61 -0
  580. package/dist/types/components/input-password/controller.d.ts +22 -0
  581. package/dist/types/components/input-password/types.d.ts +58 -0
  582. package/dist/types/components/input-radio/component.d.ts +43 -0
  583. package/dist/types/components/input-radio/controller.d.ts +33 -0
  584. package/dist/types/components/input-radio/types.d.ts +47 -0
  585. package/dist/types/components/input-radio-group/component.d.ts +23 -0
  586. package/dist/types/components/input-range/component.d.ts +48 -0
  587. package/dist/types/components/input-range/controller.d.ts +16 -0
  588. package/dist/types/components/input-range/types.d.ts +51 -0
  589. package/dist/types/components/input-text/component.d.ts +67 -0
  590. package/dist/types/components/input-text/controller.d.ts +28 -0
  591. package/dist/types/components/input-text/types.d.ts +67 -0
  592. package/dist/types/components/kolibri/component.d.ts +35 -0
  593. package/dist/types/components/link/component.d.ts +61 -0
  594. package/dist/types/components/link/shadow.d.ts +29 -0
  595. package/dist/types/components/link/test/html.mock.d.ts +2 -0
  596. package/dist/types/components/link-group/component.d.ts +52 -0
  597. package/dist/types/components/link-group/test/html.mock.d.ts +2 -0
  598. package/dist/types/components/logo/component.d.ts +22 -0
  599. package/dist/types/components/modal/component.d.ts +40 -0
  600. package/dist/types/components/modal/service.d.ts +11 -0
  601. package/dist/types/components/nav/component.d.ts +56 -0
  602. package/dist/types/components/nav/validation.d.ts +8 -0
  603. package/dist/types/components/pagination/component.d.ts +83 -0
  604. package/dist/types/components/pagination/types.d.ts +7 -0
  605. package/dist/types/components/progress/component.d.ts +32 -0
  606. package/dist/types/components/select/component.d.ts +51 -0
  607. package/dist/types/components/select/controller.d.ts +22 -0
  608. package/dist/types/components/select/types.d.ts +54 -0
  609. package/dist/types/components/skip-nav/component.d.ts +25 -0
  610. package/dist/types/components/spin/component.d.ts +19 -0
  611. package/dist/types/components/spin/test/html.mock.d.ts +2 -0
  612. package/dist/types/components/symbol/component.d.ts +21 -0
  613. package/dist/types/components/symbol/test/html.mock.d.ts +2 -0
  614. package/dist/types/components/table/component.d.ts +58 -0
  615. package/dist/types/components/tabs/component.d.ts +72 -0
  616. package/dist/types/components/textarea/component.d.ts +49 -0
  617. package/dist/types/components/textarea/controller.d.ts +16 -0
  618. package/dist/types/components/textarea/types.d.ts +54 -0
  619. package/dist/types/components/toast/component.d.ts +46 -0
  620. package/dist/types/components/toast/test/html.mock.d.ts +2 -0
  621. package/dist/types/components/toast/toaster.d.ts +16 -0
  622. package/dist/types/components/tooltip/component.d.ts +36 -0
  623. package/dist/types/components/tooltip/test/html.mock.d.ts +2 -0
  624. package/dist/types/components/version/component.d.ts +18 -0
  625. package/dist/types/components/version/test/html.mock.d.ts +2 -0
  626. package/dist/types/components.d.ts +4068 -0
  627. package/dist/types/enums/bund.d.ts +68 -0
  628. package/dist/types/enums/color.d.ts +25 -0
  629. package/dist/types/enums/events.d.ts +19 -0
  630. package/dist/types/enums/font-awesome.d.ts +2 -0
  631. package/dist/types/global/devtools.d.ts +1 -0
  632. package/dist/types/global/script.d.ts +2 -0
  633. package/dist/types/index.d.ts +8 -0
  634. package/dist/types/kolibri.d.ts +7 -0
  635. package/dist/types/stencil-public-runtime.d.ts +1576 -0
  636. package/dist/types/types/alert.d.ts +6 -0
  637. package/dist/types/types/aria-label.d.ts +3 -0
  638. package/dist/types/types/button-link.d.ts +106 -0
  639. package/dist/types/types/callbacks.d.ts +4 -0
  640. package/dist/types/types/common.d.ts +1 -0
  641. package/dist/types/types/heading-level.d.ts +1 -0
  642. package/dist/types/types/icofont.d.ts +1 -0
  643. package/dist/types/types/icon.d.ts +40 -0
  644. package/dist/types/types/input/control/number.d.ts +1 -0
  645. package/dist/types/types/input/control/text.d.ts +1 -0
  646. package/dist/types/types/input/types.d.ts +28 -0
  647. package/dist/types/types/modal.d.ts +4 -0
  648. package/dist/types/types/orientation.d.ts +1 -0
  649. package/dist/types/types/progress.d.ts +1 -0
  650. package/dist/types/types/table.d.ts +37 -0
  651. package/dist/types/types/toast.d.ts +4 -0
  652. package/dist/types/utils/a11y.tipps.d.ts +7 -0
  653. package/dist/types/utils/color.utils.d.ts +15 -0
  654. package/dist/types/utils/dev.utils.d.ts +29 -0
  655. package/dist/types/utils/prop.validators.d.ts +71 -0
  656. package/dist/types/utils/validator.d.ts +3 -0
  657. package/jest-test-results.json +1 -0
  658. package/package.json +20 -0
  659. package/vscode-custom-data.json +12885 -0
  660. package/www/assets/@leanup/forms/bundle.js +1 -0
  661. package/www/assets/@leanup/forms/bundle.js.map +1 -0
  662. package/www/assets/@leanup/forms/index.js +1 -0
  663. package/www/assets/@leanup/forms/index.js.map +1 -0
  664. package/www/assets/@leanup/lib/bundle.js +1 -0
  665. package/www/assets/@leanup/lib/bundle.js.map +1 -0
  666. package/www/assets/@leanup/lib/index.js +1 -0
  667. package/www/assets/@leanup/lib/index.js.map +1 -0
  668. package/www/assets/accordion-simulation.js +1 -0
  669. package/www/assets/bund/bund.css +41 -0
  670. package/www/assets/bund/font/BundesSans-Web-Black.ttf +0 -0
  671. package/www/assets/bund/font/BundesSans-Web-Black.woff +0 -0
  672. package/www/assets/bund/font/BundesSans-Web-Black.woff2 +0 -0
  673. package/www/assets/bund/font/BundesSans-Web-BlackItalic.ttf +0 -0
  674. package/www/assets/bund/font/BundesSans-Web-BlackItalic.woff +0 -0
  675. package/www/assets/bund/font/BundesSans-Web-BlackItalic.woff2 +0 -0
  676. package/www/assets/bund/font/BundesSans-Web-Bold.ttf +0 -0
  677. package/www/assets/bund/font/BundesSans-Web-Bold.woff +0 -0
  678. package/www/assets/bund/font/BundesSans-Web-Bold.woff2 +0 -0
  679. package/www/assets/bund/font/BundesSans-Web-BoldItalic.ttf +0 -0
  680. package/www/assets/bund/font/BundesSans-Web-BoldItalic.woff +0 -0
  681. package/www/assets/bund/font/BundesSans-Web-BoldItalic.woff2 +0 -0
  682. package/www/assets/bund/font/BundesSans-Web-Light.ttf +0 -0
  683. package/www/assets/bund/font/BundesSans-Web-Light.woff +0 -0
  684. package/www/assets/bund/font/BundesSans-Web-Light.woff2 +0 -0
  685. package/www/assets/bund/font/BundesSans-Web-LightItalic.ttf +0 -0
  686. package/www/assets/bund/font/BundesSans-Web-LightItalic.woff +0 -0
  687. package/www/assets/bund/font/BundesSans-Web-LightItalic.woff2 +0 -0
  688. package/www/assets/bund/font/BundesSans-Web-Medium.ttf +0 -0
  689. package/www/assets/bund/font/BundesSans-Web-Medium.woff +0 -0
  690. package/www/assets/bund/font/BundesSans-Web-Medium.woff2 +0 -0
  691. package/www/assets/bund/font/BundesSans-Web-MediumItalic.ttf +0 -0
  692. package/www/assets/bund/font/BundesSans-Web-MediumItalic.woff +0 -0
  693. package/www/assets/bund/font/BundesSans-Web-MediumItalic.woff2 +0 -0
  694. package/www/assets/bund/font/BundesSans-Web-Regular.ttf +0 -0
  695. package/www/assets/bund/font/BundesSans-Web-Regular.woff +0 -0
  696. package/www/assets/bund/font/BundesSans-Web-Regular.woff2 +0 -0
  697. package/www/assets/bund/font/BundesSans-Web-RegularItalic.ttf +0 -0
  698. package/www/assets/bund/font/BundesSans-Web-RegularItalic.woff +0 -0
  699. package/www/assets/bund/font/BundesSans-Web-RegularItalic.woff2 +0 -0
  700. package/www/assets/bund/font/bundessansweb-bold-woff-data.woff +0 -0
  701. package/www/assets/bund/font/bundessansweb-regular-woff-data.woff +0 -0
  702. package/www/assets/bund/font/bundesserifweb-regular-woff-data.woff +0 -0
  703. package/www/assets/bund/forms.js +1 -0
  704. package/www/assets/bund/svg/itzbund.svg +13 -0
  705. package/www/assets/button-simulation.js +1 -0
  706. package/www/assets/favicon.ico +0 -0
  707. package/www/assets/fontawesome-free/v5/LICENSE.txt +34 -0
  708. package/www/assets/fontawesome-free/v5/css/all.css +4616 -0
  709. package/www/assets/fontawesome-free/v5/css/all.min.css +5 -0
  710. package/www/assets/fontawesome-free/v5/css/brands.css +15 -0
  711. package/www/assets/fontawesome-free/v5/css/brands.min.css +5 -0
  712. package/www/assets/fontawesome-free/v5/css/fontawesome.css +4582 -0
  713. package/www/assets/fontawesome-free/v5/css/fontawesome.min.css +5 -0
  714. package/www/assets/fontawesome-free/v5/css/regular.css +15 -0
  715. package/www/assets/fontawesome-free/v5/css/regular.min.css +5 -0
  716. package/www/assets/fontawesome-free/v5/css/solid.css +16 -0
  717. package/www/assets/fontawesome-free/v5/css/solid.min.css +5 -0
  718. package/www/assets/fontawesome-free/v5/css/svg-with-js.css +371 -0
  719. package/www/assets/fontawesome-free/v5/css/svg-with-js.min.css +5 -0
  720. package/www/assets/fontawesome-free/v5/css/v4-shims.css +2172 -0
  721. package/www/assets/fontawesome-free/v5/css/v4-shims.min.css +5 -0
  722. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.eot +0 -0
  723. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.svg +3717 -0
  724. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.ttf +0 -0
  725. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff +0 -0
  726. package/www/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff2 +0 -0
  727. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.eot +0 -0
  728. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.svg +801 -0
  729. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.ttf +0 -0
  730. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff +0 -0
  731. package/www/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff2 +0 -0
  732. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.eot +0 -0
  733. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.svg +5034 -0
  734. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.ttf +0 -0
  735. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff +0 -0
  736. package/www/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff2 +0 -0
  737. package/www/assets/fontawesome-free/v6/LICENSE.txt +165 -0
  738. package/www/assets/fontawesome-free/v6/css/all.css +10408 -0
  739. package/www/assets/fontawesome-free/v6/css/all.min.css +6 -0
  740. package/www/assets/fontawesome-free/v6/css/brands.css +1432 -0
  741. package/www/assets/fontawesome-free/v6/css/brands.min.css +6 -0
  742. package/www/assets/fontawesome-free/v6/css/fontawesome.css +6338 -0
  743. package/www/assets/fontawesome-free/v6/css/fontawesome.min.css +6 -0
  744. package/www/assets/fontawesome-free/v6/css/regular.css +19 -0
  745. package/www/assets/fontawesome-free/v6/css/regular.min.css +6 -0
  746. package/www/assets/fontawesome-free/v6/css/solid.css +19 -0
  747. package/www/assets/fontawesome-free/v6/css/solid.min.css +6 -0
  748. package/www/assets/fontawesome-free/v6/css/svg-with-js.css +634 -0
  749. package/www/assets/fontawesome-free/v6/css/svg-with-js.min.css +6 -0
  750. package/www/assets/fontawesome-free/v6/css/v4-font-face.css +26 -0
  751. package/www/assets/fontawesome-free/v6/css/v4-font-face.min.css +6 -0
  752. package/www/assets/fontawesome-free/v6/css/v4-shims.css +2146 -0
  753. package/www/assets/fontawesome-free/v6/css/v4-shims.min.css +6 -0
  754. package/www/assets/fontawesome-free/v6/css/v5-font-face.css +22 -0
  755. package/www/assets/fontawesome-free/v6/css/v5-font-face.min.css +6 -0
  756. package/www/assets/fontawesome-free/v6/webfonts/fa-brands-400.ttf +0 -0
  757. package/www/assets/fontawesome-free/v6/webfonts/fa-brands-400.woff2 +0 -0
  758. package/www/assets/fontawesome-free/v6/webfonts/fa-regular-400.ttf +0 -0
  759. package/www/assets/fontawesome-free/v6/webfonts/fa-regular-400.woff2 +0 -0
  760. package/www/assets/fontawesome-free/v6/webfonts/fa-solid-900.ttf +0 -0
  761. package/www/assets/fontawesome-free/v6/webfonts/fa-solid-900.woff2 +0 -0
  762. package/www/assets/fontawesome-free/v6/webfonts/fa-v4compatibility.ttf +0 -0
  763. package/www/assets/fontawesome-free/v6/webfonts/fa-v4compatibility.woff2 +0 -0
  764. package/www/assets/form-simulation.js +1 -0
  765. package/www/assets/form-simulation.textarea.js +1 -0
  766. package/www/assets/form-simulation.weitere-cases.js +1 -0
  767. package/www/assets/icofont/demo.html +18942 -0
  768. package/www/assets/icofont/fonts/icofont.eot +0 -0
  769. package/www/assets/icofont/fonts/icofont.svg +2105 -0
  770. package/www/assets/icofont/fonts/icofont.ttf +0 -0
  771. package/www/assets/icofont/fonts/icofont.woff +0 -0
  772. package/www/assets/icofont/fonts/icofont.woff2 +0 -0
  773. package/www/assets/icofont/icofont.css +10757 -0
  774. package/www/assets/icofont/icofont.min.css +7 -0
  775. package/www/assets/itzbund.logo.svg +6 -0
  776. package/www/assets/kolibri.logo.svg +31 -0
  777. package/www/assets/logo.kolibri.invert.svg +9 -0
  778. package/www/assets/logo.kolibri.svg +9 -0
  779. package/www/assets/logo.kolibri.text.invert.svg +9 -0
  780. package/www/assets/logo.kolibri.text.svg +10 -0
  781. package/www/assets/modal-simulation.js +1 -0
  782. package/www/assets/nav-simulation.js +1 -0
  783. package/www/assets/pagination-simulation.js +1 -0
  784. package/www/assets/progress-simulation.js +1 -0
  785. package/www/assets/roboto/LICENSE.txt +202 -0
  786. package/www/assets/roboto/Roboto-Black.ttf +0 -0
  787. package/www/assets/roboto/Roboto-BlackItalic.ttf +0 -0
  788. package/www/assets/roboto/Roboto-Bold.ttf +0 -0
  789. package/www/assets/roboto/Roboto-BoldItalic.ttf +0 -0
  790. package/www/assets/roboto/Roboto-Italic.ttf +0 -0
  791. package/www/assets/roboto/Roboto-Light.ttf +0 -0
  792. package/www/assets/roboto/Roboto-LightItalic.ttf +0 -0
  793. package/www/assets/roboto/Roboto-Medium.ttf +0 -0
  794. package/www/assets/roboto/Roboto-MediumItalic.ttf +0 -0
  795. package/www/assets/roboto/Roboto-Regular.ttf +0 -0
  796. package/www/assets/roboto/Roboto-Thin.ttf +0 -0
  797. package/www/assets/roboto/Roboto-ThinItalic.ttf +0 -0
  798. package/www/assets/roboto/roboto.css +27 -0
  799. package/www/assets/smart-button-simulation.js +1 -0
  800. package/www/assets/spin-simulation.js +1 -0
  801. package/www/assets/style.css +144 -0
  802. package/www/assets/table-simulation.js +1 -0
  803. package/www/assets/tabs-simulation.js +1 -0
  804. package/www/assets/themes/bamf.css +39 -0
  805. package/www/assets/themes/bmf.bak.css +283 -0
  806. package/www/assets/themes/bmf.css +39 -0
  807. package/www/assets/themes/bzst.css +245 -0
  808. package/www/assets/themes/itzbund.css +259 -0
  809. package/www/assets/themes/mapz.bak.css +219 -0
  810. package/www/assets/themes/mapz.css +39 -0
  811. package/www/assets/toast-simulation.js +1 -0
  812. package/www/build/a11y.tipps-1c83d041.js +4 -0
  813. package/www/build/app-globals-1ddbfb3b.js +4 -0
  814. package/www/build/bund-91b5001a.js +4 -0
  815. package/www/build/button-link-f489475e.js +4 -0
  816. package/www/build/color-20533e03.js +4 -0
  817. package/www/build/controller-0daf13c7.js +4 -0
  818. package/www/build/controller-2e3018c4.js +4 -0
  819. package/www/build/controller-530b88df.js +4 -0
  820. package/www/build/controller-86bf62ed.js +4 -0
  821. package/www/build/controller-aa7513aa.js +4 -0
  822. package/www/build/controller-d106df71.js +4 -0
  823. package/www/build/dev.utils-c9cfb9a5.js +4 -0
  824. package/www/build/devtools-6678ab14.js +4 -0
  825. package/www/build/icon-63b36435.js +4 -0
  826. package/www/build/index-a604e45a.js +4 -0
  827. package/www/build/index-bc1a7f22.js +5 -0
  828. package/www/build/index-c4d8198b.js +4 -0
  829. package/www/build/index.esm.js +4 -0
  830. package/www/build/index.m-df5ce03f.js +4 -0
  831. package/www/build/kol-abbr.entry.js +4 -0
  832. package/www/build/kol-accordion.entry.js +4 -0
  833. package/www/build/kol-alert.entry.js +4 -0
  834. package/www/build/kol-badge.entry.js +4 -0
  835. package/www/build/kol-breadcrumb.entry.js +4 -0
  836. package/www/build/kol-button-group.entry.js +4 -0
  837. package/www/build/kol-button-wc_3.entry.js +4 -0
  838. package/www/build/kol-button.entry.js +4 -0
  839. package/www/build/kol-card.entry.js +4 -0
  840. package/www/build/kol-color.entry.js +4 -0
  841. package/www/build/kol-counter.entry.js +4 -0
  842. package/www/build/kol-details.entry.js +4 -0
  843. package/www/build/kol-form.entry.js +4 -0
  844. package/www/build/kol-heading.entry.js +4 -0
  845. package/www/build/kol-icon-font-awesome.entry.js +4 -0
  846. package/www/build/kol-icon-icofont.entry.js +4 -0
  847. package/www/build/kol-icon.entry.js +4 -0
  848. package/www/build/kol-indented-text.entry.js +4 -0
  849. package/www/build/kol-input-adapter-leanup.entry.js +4 -0
  850. package/www/build/kol-input-checkbox.entry.js +4 -0
  851. package/www/build/kol-input-color.entry.js +4 -0
  852. package/www/build/kol-input-email.entry.js +4 -0
  853. package/www/build/kol-input-file.entry.js +4 -0
  854. package/www/build/kol-input-number.entry.js +4 -0
  855. package/www/build/kol-input-password.entry.js +4 -0
  856. package/www/build/kol-input-radio-group.entry.js +4 -0
  857. package/www/build/kol-input-radio.entry.js +4 -0
  858. package/www/build/kol-input-range.entry.js +4 -0
  859. package/www/build/kol-input-text.entry.js +4 -0
  860. package/www/build/kol-kolibri.entry.js +4 -0
  861. package/www/build/kol-link-group.entry.js +4 -0
  862. package/www/build/kol-link-wc.entry.js +4 -0
  863. package/www/build/kol-link.entry.js +4 -0
  864. package/www/build/kol-logo.entry.js +4 -0
  865. package/www/build/kol-modal.entry.js +4 -0
  866. package/www/build/kol-nav.entry.js +4 -0
  867. package/www/build/kol-pagination.entry.js +4 -0
  868. package/www/build/kol-progress.entry.js +4 -0
  869. package/www/build/kol-select.entry.js +4 -0
  870. package/www/build/kol-skip-nav.entry.js +4 -0
  871. package/www/build/kol-spin.entry.js +4 -0
  872. package/www/build/kol-symbol.entry.js +4 -0
  873. package/www/build/kol-table.entry.js +4 -0
  874. package/www/build/kol-tabs.entry.js +4 -0
  875. package/www/build/kol-textarea.entry.js +4 -0
  876. package/www/build/kol-toast.entry.js +4 -0
  877. package/www/build/kol-tooltip.entry.js +4 -0
  878. package/www/build/kol-version.entry.js +4 -0
  879. package/www/build/kolibri.esm.js +4 -0
  880. package/www/build/kolibri.js +4 -0
  881. package/www/build/prop.validators-8c56bf7d.js +4 -0
  882. package/www/build/register-c6216033.js +4 -0
  883. package/www/build/validation-735dcb5c.js +4 -0
  884. package/www/build/validation-a5b35355.js +4 -0
  885. package/www/build/validator-985dcb65.js +4 -0
  886. package/www/host.config.json +15 -0
  887. package/www/index.html +212 -0
package/www/index.html ADDED
@@ -0,0 +1,212 @@
1
+ <!doctype html><html dir="ltr" lang="de"><head> <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.7-rc.10"></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
2
+ 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
3
+ 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
4
+ Icon-Komponente umgesetzt, der nun egal ist, welche Icon-Font es verwendet. Es stellt, aber unabhängig davon weiterhin sicher, dass Icons für
5
+ 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
6
+ Navigationsstrukturen haben wir jeweils einen extrem langen Text und ein extrem langes Wort verwendet, um eine potenzielle Falschverwendung
7
+ 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
8
+ 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
9
+ außenstehende Fokus-Rahmen abgeschnitten, weil die KoliBri-Komponenten stets 0 Außenabstand haben. Andererseits ist ein nach innen verschobener
10
+ 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
11
+ fokussierten Elements ist. Was ja eben zum besseren Fokus führt. Die Tatsache, dass der Fokus-Rahmen aufgrund fehlenden Außenabstand
12
+ 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
13
+ des <kol-abbr _title="Hypertext-Markup-Language">HTML</kol-abbr>-Attributes <code>type</code> bestimmt werden. Das Problem ist, dass bei manchen
14
+ Browsern die Schaltflächen-Icons innerhalb der Standard-Eingabefelder nicht fokussierbar und/oder die Eingabesteuerungen nicht barrierefrei
15
+ 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,
16
+ dass bei allen Eingabefeldern mit zusätzlichen Aktionen, stets die Geräte- und Browser-spezifischen Steuerelemente dem/der Nutzer:in angezeigt
17
+ 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
18
+ 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
19
+ keinen Einfluss. Wir sehen davon ab aus Gründen der Interoperabilität und Standardisierung, derartige Steuerelement durch eine proprietäre
20
+ 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
21
+ maiores! Laboriosam placeat omnis illo maxime laborum fugiat deserunt mollitia! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos
22
+ aperiam rem, doloremque cum, explicabo qui reiciendis minima sequi quidem et harum dolorum consequatur tempore id tempora provident quae
23
+ 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
24
+ pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing
25
+ elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet
26
+ 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
27
+ pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing
28
+ elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet
29
+ 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
30
+ pariatur, vero neque! A temporibus sequi, officia suscipit inventore delectus doloremque. Lorem ipsum dolor sit amet consectetur adipisicing
31
+ elit. Magnam, porro, eligendi ullam dignissimos alias dolore quibusdam minima totam a inventore optio sapiente laborum nihil iure, dolor amet
32
+ 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
33
+ earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing
34
+ elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi
35
+ 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="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> </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
36
+ earum aut doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing
37
+ elit. Officiis perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi
38
+ 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
39
+ 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
40
+ 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
41
+ 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
42
+ 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
43
+ 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
44
+ 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
45
+ 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
46
+ 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
47
+ sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
48
+ 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
49
+ ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
50
+ 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
51
+ 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
52
+ 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
53
+ sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
54
+ 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
55
+ 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
56
+ 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
57
+ 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.
58
+ 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
59
+ 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
60
+ rerum natus sequi unde modi magni laudantium deleniti aliquid quae maiores voluptate iusto earum cum cumque! Lorem ipsum dolor sit amet
61
+ 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> <kol-input-adapter-leanup 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> </kol-input-adapter-leanup> <kol-input-adapter-leanup class="d-grid gap-2" id="change-checkbox"> <kol-input-checkbox _type="checkbox">Ich akzeptiere die Allgemeinen Geschäftsbedingungen.</kol-input-checkbox> </kol-input-adapter-leanup> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputColor</kol-heading> <kol-input-adapter-leanup 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> </kol-input-adapter-leanup> </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> <kol-input-adapter-leanup 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> </kol-input-adapter-leanup> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputFile</kol-heading> <kol-input-adapter-leanup 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> </kol-input-adapter-leanup> </div> <div class="d-grid gap-2"> <kol-heading _level="3">InputNumber</kol-heading> <kol-input-adapter-leanup 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> </kol-input-adapter-leanup> <kol-input-adapter-leanup class="d-grid gap-2" id="new-input-date"> <kol-input-number _type="date">Datum</kol-input-number> </kol-input-adapter-leanup> <kol-input-number _type="datetime-local">Local-Datetime (Standard)</kol-input-number> <kol-input-number _type="datetime-local" _step="1">Local-Datetime (mit Sekunden)</kol-input-number> <kol-input-number _type="month">Monat</kol-input-number> <kol-input-number _type="week">Woche</kol-input-number> <kol-input-number _type="time">Zeit (Standard)</kol-input-number> <kol-input-number _type="time" _step="1">Zeit (mit Sekunden)</kol-input-number> </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"> <kol-input-adapter-leanup class="d-grid gap-2" id="anrede-adapter"> <kol-input-radio>Anrede</kol-input-radio> </kol-input-adapter-leanup> <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> <kol-input-adapter-leanup 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> </kol-input-adapter-leanup> </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> <kol-input-adapter-leanup class="d-grid gap-2" id="kol-input-text"> <kol-input-text class="vorname" _id="input-text-vorname" _type="text"></kol-input-text> </kol-input-adapter-leanup> <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> <kol-input-adapter-leanup class="d-grid gap-2"> <kol-select class="list4value">Stimmung (vorbelegt)</kol-select> <kol-select class="list4value" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </kol-input-adapter-leanup> <kol-select class="value4list">Stimmung (nicht vorbelegt)</kol-select> <kol-input-adapter-leanup class="d-grid gap-2"> <kol-select class="value4list">Stimmung (vorbelegt)</kol-select> <kol-select class="value4list" _multiple="">Stimmung (Mehrfachauswahl, vorbelegt)</kol-select> </kol-input-adapter-leanup> <kol-select id="fix-select-multi" _multiple="">Mehrfachauswahl</kol-select> </div> <div class="d-grid gap-2"> <kol-heading _level="3">Textarea</kol-heading> <kol-input-adapter-leanup class="d-grid gap-2" id="new-textarea"> <kol-textarea>Label</kol-textarea> </kol-input-adapter-leanup> <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> </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 _icon="paper-plane" _href="https://wikipedia.de">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 _use-case="image" _icon="paper-plane" _icon-only="" _aria-label="Icon als Link" _href="https://de.wikipedia.org" _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">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
62
+ Ü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,
63
+ 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
64
+ 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
65
+ 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
66
+ Modals. Hierbei ist zu beachten, dass KoliBri nur Elemente deaktiviert die sich im Browser-Seitenbereich befinden. Das Fokusieren den
67
+ 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
68
+ 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
69
+ 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
70
+ dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
71
+ aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
72
+ sanctus est Lorem ipsum dolor sit amet. et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
73
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
74
+ 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
75
+ 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>
76
+ <div class="gap-2 col-12 d-grid">
77
+ <kol-table
78
+ _dual
79
+ _orientation="horizontal"
80
+ _caption="2 Header, Daten Horizontal"
81
+ _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}]"
82
+ _order="['montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag']"
83
+ _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'}]"
84
+ >
85
+ </kol-table>
86
+ </div>
87
+ <kol-heading _level="3">2 Header, Daten Vertikal</kol-heading>
88
+ <div class="gap-2 col-12 d-grid">
89
+ <kol-table
90
+ class="block overflow-hidden"
91
+ _dual
92
+ _orientation="vertical"
93
+ _caption="2 Header, Daten Vertikal"
94
+ _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}]"
95
+ _order="['8bis9', '9bis10', '10bis11', '11bis12']"
96
+ _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'}]"
97
+ >
98
+ </kol-table>
99
+ </div>
100
+ <kol-heading _level="3">2 Horizontal Header mit Span, Daten Horizontal</kol-heading>
101
+ <div class="gap-2 col-12 d-grid">
102
+ <kol-table
103
+ class="block overflow-hidden"
104
+ _dual
105
+ _orientation="horizontal"
106
+ _caption="2 Horizontal Header mit Span, Daten Horizontal"
107
+ _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}]"
108
+ _order="['april', 'mai', 'juni', 'juli', 'august', 'september']"
109
+ _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'}]"
110
+ >
111
+ </kol-table>
112
+ </div>
113
+ <kol-heading _level="3">2 Vertikal Header mit Span, Daten Horizontal</kol-heading>
114
+ <div class="gap-2 col-12 d-grid">
115
+ <kol-table
116
+ class="block overflow-hidden"
117
+ _dual
118
+ _orientation="horizontal"
119
+ _caption="2 Vertikal Header mit Span, Daten Horizontal"
120
+ _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}]"
121
+ _order="['juni','juli','august','september']"
122
+ _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'}]"
123
+ >
124
+ </kol-table>
125
+ </div>
126
+ <kol-heading _level="3"
127
+ >2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal</kol-heading
128
+ >
129
+ <div class="gap-2 col-12 d-grid">
130
+ <kol-table
131
+ class="block overflow-hidden"
132
+ _dual
133
+ _orientation="horizontal"
134
+ _caption="2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Horizontal"
135
+ _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'}]"
136
+ _order="['april','mai','juni','juli','august','september']"
137
+ _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'}]"
138
+ >
139
+ </kol-table>
140
+ </div>
141
+ <kol-heading _level="3">2 Horizontal Header mit Span, Daten Vertikal</kol-heading>
142
+ <div class="gap-2 col-12 d-grid">
143
+ <kol-table
144
+ class="block overflow-hidden"
145
+ _dual
146
+ _orientation="vertical"
147
+ _caption="2 Horizontal Header mit Span, Daten Vertikal"
148
+ _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}]"
149
+ _order="['berlin', 'hamburg', 'münchen']"
150
+ _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'}]"
151
+ >
152
+ </kol-table>
153
+ </div>
154
+ <kol-heading _level="3">2 Vertikal Header mit Span, Daten Vertikal</kol-heading>
155
+ <div class="gap-2 col-12 d-grid">
156
+ <kol-table
157
+ class="block overflow-hidden"
158
+ _dual
159
+ _orientation="vertical"
160
+ _caption="2 Vertikal Header mit Span, Daten Vertikal"
161
+ _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}]"
162
+ _order="['münchen', 'nürnberg', 'berlin', 'bonn', 'düsseldorf', 'köln']"
163
+ _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'}]"
164
+ >
165
+ </kol-table>
166
+ </div>
167
+ <kol-heading _level="3"
168
+ >2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Vertikal</kol-heading
169
+ >
170
+ <div class="gap-2 col-12 d-grid">
171
+ <kol-table
172
+ class="block overflow-hidden"
173
+ _dual
174
+ _orientation="vertical"
175
+ _caption="2 Horizontal Header mit Span, 2 Vertikal Header mit Span, Daten Vertikal"
176
+ _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}]"
177
+ _order="['münchen', 'nürnberg', 'berlin', 'bonn', 'düsseldorf', 'köln']"
178
+ _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'}]"
179
+ >
180
+ </kol-table>
181
+ </div>
182
+ <kol-heading _level="3">1 Horizontal Header</kol-heading>
183
+ <div class="gap-2 col-12 d-grid">
184
+ <kol-table
185
+ class="block overflow-hidden"
186
+ _dual
187
+ _orientation="horizontal"
188
+ _caption="1 Horizontal Header"
189
+ _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}]"
190
+ _order="['montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag']"
191
+ _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'}]"
192
+ >
193
+ </kol-table>
194
+ </div>
195
+ <kol-heading _level="3">1 Vertikal Header</kol-heading>
196
+ <div class="gap-2 col-12 d-grid">
197
+ <kol-table
198
+ class="block overflow-hidden"
199
+ _dual
200
+ _orientation="vertical"
201
+ _caption="1 Vertikal Header"
202
+ _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}]"
203
+ _order="['8bis9', '9bis10', '10bis11', '11bis12']"
204
+ _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'}]"
205
+ >
206
+ </kol-table>
207
+ </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
208
+ 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
209
+ 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
210
+ Beschriftung (Aria-Label) lesen zu können. Der Text des Tooltips ist selbst nicht mit der Tastatur erreichbar und zudem mittels Aria-Hidden
211
+ 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
212
+ 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>