u2ui 1.0.0

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 (440) hide show
  1. package/.htaccess +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +36 -0
  4. package/attr/behavior/README.md +25 -0
  5. package/attr/behavior/behavior.js +261 -0
  6. package/attr/behavior/manifest.json +43 -0
  7. package/attr/behavior/tests/minimal.html +19 -0
  8. package/attr/behavior/tests/test.html +98 -0
  9. package/attr/confirm/README.md +36 -0
  10. package/attr/confirm/confirm.js +90 -0
  11. package/attr/confirm/manifest.json +43 -0
  12. package/attr/confirm/tests/minimal.html +23 -0
  13. package/attr/confirm/tests/test.html +79 -0
  14. package/attr/draghandle/README.md +41 -0
  15. package/attr/draghandle/draghandle.js +42 -0
  16. package/attr/draghandle/tests/minimal.html +44 -0
  17. package/attr/focusgroup/README.md +49 -0
  18. package/attr/focusgroup/focusgroup.js +100 -0
  19. package/attr/focusgroup/manifest.json +38 -0
  20. package/attr/focusgroup/tests/minimal.html +27 -0
  21. package/attr/focusgroup/tests/test.html +154 -0
  22. package/attr/href/README.md +38 -0
  23. package/attr/href/href.js +42 -0
  24. package/attr/href/manifest.json +43 -0
  25. package/attr/href/tests/minimal.html +17 -0
  26. package/attr/href/tests/test.html +70 -0
  27. package/attr/intersect/README.md +42 -0
  28. package/attr/intersect/intersect.js +99 -0
  29. package/attr/intersect/manifest.json +57 -0
  30. package/attr/intersect/tests/minimal.html +30 -0
  31. package/attr/intersect/tests/test.html +64 -0
  32. package/attr/navigable/README.md +31 -0
  33. package/attr/navigable/TargetObserver.js +91 -0
  34. package/attr/navigable/U2TargetObserver.js +75 -0
  35. package/attr/navigable/manifest.json +42 -0
  36. package/attr/navigable/navigable.js +87 -0
  37. package/attr/navigable/tests/U1TargetObserver.html +56 -0
  38. package/attr/navigable/tests/minimal.html +17 -0
  39. package/attr/navigable/tests/targetObserver.html +106 -0
  40. package/attr/navigable/tests/test.html +84 -0
  41. package/attr/parallax/README.md +48 -0
  42. package/attr/parallax/parallax.js +119 -0
  43. package/attr/parallax/tests/minimal.html +25 -0
  44. package/attr/parallax/tests/performance.html +102 -0
  45. package/attr/parallax/tests/test.html +108 -0
  46. package/attr/skin/README.md +59 -0
  47. package/attr/skin/skin.css +51 -0
  48. package/attr/skin/tests/minimal.html +34 -0
  49. package/attr/skin/tests/test.html +96 -0
  50. package/class/badge/README.md +25 -0
  51. package/class/badge/badge.css +35 -0
  52. package/class/badge/tests/minimal.html +17 -0
  53. package/class/badge/tests/test.html +112 -0
  54. package/class/card1/README.md +45 -0
  55. package/class/card1/card1.css +30 -0
  56. package/class/card1/tests/minimal.html +33 -0
  57. package/class/card1/tests/test.html +78 -0
  58. package/class/flex/README.md +62 -0
  59. package/class/flex/flex.css +25 -0
  60. package/class/flex/tests/minimal.html +31 -0
  61. package/class/flex/tests/test.html +58 -0
  62. package/class/grid/README.md +52 -0
  63. package/class/grid/grid.css +40 -0
  64. package/class/grid/tests/minimal.html +34 -0
  65. package/class/grid/tests/test.html +78 -0
  66. package/class/input/README.md +49 -0
  67. package/class/input/input.css +33 -0
  68. package/class/input/tests/minimal.html +39 -0
  69. package/class/input/tests/test.html +29 -0
  70. package/class/reset/README.md +47 -0
  71. package/class/reset/reset.css +8 -0
  72. package/class/reset/tests/minimal.html +23 -0
  73. package/class/table/README.md +57 -0
  74. package/class/table/table.css +126 -0
  75. package/class/table/tests/minimal.html +40 -0
  76. package/class/table/tests/test.html +226 -0
  77. package/class/unstyle/README.md +32 -0
  78. package/class/unstyle/tests/minimal.html +22 -0
  79. package/class/unstyle/tests/test.html +32 -0
  80. package/class/unstyle/unstyle.css +12 -0
  81. package/class/width/README.md +48 -0
  82. package/class/width/tests/minimal.html +27 -0
  83. package/class/width/tests/test.html +101 -0
  84. package/class/width/width.css +22 -0
  85. package/css/base/README.md +25 -0
  86. package/css/base/base.css +127 -0
  87. package/css/base/beta.css +50 -0
  88. package/css/base/full.css +5 -0
  89. package/css/base/nomotion.css +9 -0
  90. package/css/base/print.css +36 -0
  91. package/css/base/tests/nomotion.html +89 -0
  92. package/css/base/tests/test.html +539 -0
  93. package/css/classes/README.md +17 -0
  94. package/css/classes/classes.css +78 -0
  95. package/css/classes/tests/test.html +63 -0
  96. package/css/classless/README.md +26 -0
  97. package/css/classless/aria.css +64 -0
  98. package/css/classless/classless.css +124 -0
  99. package/css/classless/full.css +11 -0
  100. package/css/classless/more.css +340 -0
  101. package/css/classless/simple.css +103 -0
  102. package/css/classless/snippeds/a/icons.css +12 -0
  103. package/css/classless/snippeds/experiments/conventions.css +41 -0
  104. package/css/classless/snippeds/hr/gradient.css +3 -0
  105. package/css/classless/snippeds/hr/section_sign.css +16 -0
  106. package/css/classless/snippeds/hr/tests.html +50 -0
  107. package/css/classless/tests/aria.html +101 -0
  108. package/css/classless/tests/foreign/classless-almond.css.html +445 -0
  109. package/css/classless/tests/foreign/classless-classless.css.html +831 -0
  110. package/css/classless/tests/foreign/classless-mvp.html +415 -0
  111. package/css/classless/tests/foreign/classless.sakura.html +224 -0
  112. package/css/classless/tests/foreign/stylestage.dev.html +304 -0
  113. package/css/classless/tests/foreign/test-homogenizer.html +433 -0
  114. package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
  115. package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
  116. package/css/classless/tests/list-bullet.html +110 -0
  117. package/css/classless/tests/more.html +246 -0
  118. package/css/classless/tests/oklch.experiments.html +280 -0
  119. package/css/classless/tests/test.html +106 -0
  120. package/css/classless/tests/variables.html +109 -0
  121. package/css/classless/variables.css +99 -0
  122. package/css/norm/README.md +37 -0
  123. package/css/norm/beta.css +40 -0
  124. package/css/norm/norm.css +98 -0
  125. package/css/norm/oldies.css +60 -0
  126. package/css/norm/tests/test.html +434 -0
  127. package/css/norm/tests/test.js +103 -0
  128. package/el/accordion/README.md +59 -0
  129. package/el/accordion/accordion.css +7 -0
  130. package/el/accordion/accordion.js +258 -0
  131. package/el/accordion/manifest.json +57 -0
  132. package/el/accordion/tests/minimal.html +44 -0
  133. package/el/accordion/tests/test.html +168 -0
  134. package/el/alert/README.md +67 -0
  135. package/el/alert/alert copy.js +224 -0
  136. package/el/alert/alert.css +73 -0
  137. package/el/alert/alert.js +187 -0
  138. package/el/alert/manifest.json +77 -0
  139. package/el/alert/tests/minimal.html +36 -0
  140. package/el/alert/tests/test.html +105 -0
  141. package/el/buttongroup/README.md +36 -0
  142. package/el/buttongroup/buttongroup.css +30 -0
  143. package/el/buttongroup/buttongroup.js +56 -0
  144. package/el/buttongroup/tests/minimal.html +31 -0
  145. package/el/buttongroup/tests/test.html +83 -0
  146. package/el/bytes/README.md +41 -0
  147. package/el/bytes/bytes.css +6 -0
  148. package/el/bytes/bytes.js +97 -0
  149. package/el/bytes/manifest.json +95 -0
  150. package/el/bytes/tests/minimal.html +19 -0
  151. package/el/bytes/tests/test.html +117 -0
  152. package/el/carousel/README.md +52 -0
  153. package/el/carousel/carousel.css +46 -0
  154. package/el/carousel/carousel.js +371 -0
  155. package/el/carousel/manifest.json +58 -0
  156. package/el/carousel/tests/experiments.html +77 -0
  157. package/el/carousel/tests/minimal.html +31 -0
  158. package/el/carousel/tests/nested.html +54 -0
  159. package/el/carousel/tests/test.html +136 -0
  160. package/el/carousel-nav/README.md +40 -0
  161. package/el/carousel-nav/carousel-nav.js +74 -0
  162. package/el/carousel-nav/tests/minimal.html +32 -0
  163. package/el/carousel-nav/tests/test.html +59 -0
  164. package/el/code/README.md +68 -0
  165. package/el/code/code.css +46 -0
  166. package/el/code/code.js +289 -0
  167. package/el/code/manifest.json +66 -0
  168. package/el/code/tests/minimal.html +35 -0
  169. package/el/code/tests/test.html +162 -0
  170. package/el/copy/README.md +35 -0
  171. package/el/copy/copy.css +3 -0
  172. package/el/copy/copy.js +118 -0
  173. package/el/copy/manifest.json +49 -0
  174. package/el/copy/tests/minimal.html +21 -0
  175. package/el/copy/tests/test.html +75 -0
  176. package/el/counter/README.md +47 -0
  177. package/el/counter/counter.css +8 -0
  178. package/el/counter/counter.js +95 -0
  179. package/el/counter/manifest.json +59 -0
  180. package/el/counter/tests/minimal.html +27 -0
  181. package/el/counter/tests/test.html +106 -0
  182. package/el/ico/README.md +162 -0
  183. package/el/ico/font/Font Awesome.css +22 -0
  184. package/el/ico/font/LigatureSymbols.css +7 -0
  185. package/el/ico/font/Material Icons.css +6 -0
  186. package/el/ico/font/RemixFilled.css +8 -0
  187. package/el/ico/font/RemixOutlined.css +8 -0
  188. package/el/ico/font/old/anicons.css +31 -0
  189. package/el/ico/font/old/devicons.css +210 -0
  190. package/el/ico/font/old/material.all.css +36 -0
  191. package/el/ico/font/old/remix.css +15 -0
  192. package/el/ico/font/old/utf8.css +54 -0
  193. package/el/ico/ico.css +111 -0
  194. package/el/ico/ico.js +189 -0
  195. package/el/ico/manifest.json +86 -0
  196. package/el/ico/tests/combinations.html +86 -0
  197. package/el/ico/tests/emojis.html +213 -0
  198. package/el/ico/tests/fonts.html +110 -0
  199. package/el/ico/tests/ico-directory.html +254 -0
  200. package/el/ico/tests/minimal.html +46 -0
  201. package/el/ico/tests/test.html +210 -0
  202. package/el/ico/tests/util-multi.svg +6 -0
  203. package/el/ico/tests/util.css +2 -0
  204. package/el/ico/tests/util.js +110 -0
  205. package/el/input/README.md +39 -0
  206. package/el/input/input.css +35 -0
  207. package/el/input/input.js +331 -0
  208. package/el/input/tests/formParticipation.html +113 -0
  209. package/el/input/tests/minimal.html +33 -0
  210. package/el/input/tests/test.html +258 -0
  211. package/el/masonry/README.md +51 -0
  212. package/el/masonry/manifest.json +60 -0
  213. package/el/masonry/masonry.css +27 -0
  214. package/el/masonry/masonry.js +92 -0
  215. package/el/masonry/tests/minimal.html +39 -0
  216. package/el/masonry/tests/test.html +42 -0
  217. package/el/number/README.md +47 -0
  218. package/el/number/manifest.json +121 -0
  219. package/el/number/number.css +6 -0
  220. package/el/number/number.js +67 -0
  221. package/el/number/tests/minimal.html +25 -0
  222. package/el/number/tests/test.html +138 -0
  223. package/el/out/README.md +32 -0
  224. package/el/out/manifest.json +38 -0
  225. package/el/out/out.css +2 -0
  226. package/el/out/out.js +59 -0
  227. package/el/out/tests/minimal.html +25 -0
  228. package/el/out/tests/test.html +37 -0
  229. package/el/parallax-bg/README.md +36 -0
  230. package/el/parallax-bg/parallax-bg.css +13 -0
  231. package/el/parallax-bg/parallax-bg.js +186 -0
  232. package/el/parallax-bg/tests/bg.jpg +0 -0
  233. package/el/parallax-bg/tests/bg1.jpg +0 -0
  234. package/el/parallax-bg/tests/bg2.jpg +0 -0
  235. package/el/parallax-bg/tests/demo.html +88 -0
  236. package/el/parallax-bg/tests/minimal.html +30 -0
  237. package/el/parallax-bg/tests/test.html +64 -0
  238. package/el/parallax-bg/tests/visible.html +90 -0
  239. package/el/qrcode/README.md +38 -0
  240. package/el/qrcode/manifest.json +43 -0
  241. package/el/qrcode/package.json +22 -0
  242. package/el/qrcode/qrcode.css +13 -0
  243. package/el/qrcode/qrcode.js +46 -0
  244. package/el/qrcode/tests/minimal.html +26 -0
  245. package/el/qrcode/tests/test.html +31 -0
  246. package/el/rating/README.md +45 -0
  247. package/el/rating/manifest.json +65 -0
  248. package/el/rating/rating.css +11 -0
  249. package/el/rating/rating.js +139 -0
  250. package/el/rating/tests/minimal.html +26 -0
  251. package/el/rating/tests/tests.html +77 -0
  252. package/el/rte/README.md +37 -0
  253. package/el/rte/rte.css +9 -0
  254. package/el/rte/rte.js +56 -0
  255. package/el/rte/tests/minimal.html +25 -0
  256. package/el/rte/tests/test.html +37 -0
  257. package/el/skeleton/README.md +30 -0
  258. package/el/skeleton/manifest.json +51 -0
  259. package/el/skeleton/skeleton.css +61 -0
  260. package/el/skeleton/skeleton.js +72 -0
  261. package/el/skeleton/tests/minimal.html +22 -0
  262. package/el/skeleton/tests/test.html +22 -0
  263. package/el/splitbutton/README.md +39 -0
  264. package/el/splitbutton/splitbutton.css +48 -0
  265. package/el/splitbutton/splitbutton.js +26 -0
  266. package/el/splitbutton/tests/minimal.html +30 -0
  267. package/el/splitbutton/tests/test.html +68 -0
  268. package/el/splitpanel/README.md +39 -0
  269. package/el/splitpanel/manifest.json +49 -0
  270. package/el/splitpanel/splitpanel.css +17 -0
  271. package/el/splitpanel/splitpanel.js +116 -0
  272. package/el/splitpanel/tests/minimal.html +31 -0
  273. package/el/splitpanel/tests/tests.html +121 -0
  274. package/el/table/README.md +68 -0
  275. package/el/table/manifest.json +43 -0
  276. package/el/table/table.css +59 -0
  277. package/el/table/table.js +194 -0
  278. package/el/table/tests/minimal.html +38 -0
  279. package/el/table/tests/test.html +108 -0
  280. package/el/tabs/README.md +50 -0
  281. package/el/tabs/manifest.json +59 -0
  282. package/el/tabs/tabs.css +23 -0
  283. package/el/tabs/tabs.js +210 -0
  284. package/el/tabs/tests/minimal.html +35 -0
  285. package/el/tabs/tests/test.html +180 -0
  286. package/el/textfit/README.md +34 -0
  287. package/el/textfit/manifest.json +45 -0
  288. package/el/textfit/tests/minimal.html +25 -0
  289. package/el/textfit/tests/test.html +26 -0
  290. package/el/textfit/textfit.css +6 -0
  291. package/el/textfit/textfit.js +80 -0
  292. package/el/time/README.md +72 -0
  293. package/el/time/manifest.json +118 -0
  294. package/el/time/tests/minimal.html +19 -0
  295. package/el/time/tests/test.html +160 -0
  296. package/el/time/time copy.js +141 -0
  297. package/el/time/time.js +168 -0
  298. package/el/time/time.old.uhtml.js +129 -0
  299. package/el/tooltip/README.md +48 -0
  300. package/el/tooltip/manifest.json +69 -0
  301. package/el/tooltip/tests/minimal.html +25 -0
  302. package/el/tooltip/tests/test.html +178 -0
  303. package/el/tooltip/tooltip.css +97 -0
  304. package/el/tooltip/tooltip.js +82 -0
  305. package/el/tree1/README.md +111 -0
  306. package/el/tree1/manifest.json +78 -0
  307. package/el/tree1/tests/animated.html +134 -0
  308. package/el/tree1/tests/custom.html +51 -0
  309. package/el/tree1/tests/minimal.html +44 -0
  310. package/el/tree1/tests/test.html +260 -0
  311. package/el/tree1/tree1.css +26 -0
  312. package/el/tree1/tree1.js +265 -0
  313. package/el/typewriter/README.md +62 -0
  314. package/el/typewriter/manifest.json +66 -0
  315. package/el/typewriter/tests/minimal.html +25 -0
  316. package/el/typewriter/tests/test.html +78 -0
  317. package/el/typewriter/typewriter.css +6 -0
  318. package/el/typewriter/typewriter.js +166 -0
  319. package/el/typewriter/typewriter.mp3 +0 -0
  320. package/js/Placer/Placer.js +156 -0
  321. package/js/Placer/README.md +62 -0
  322. package/js/Placer/tests/minimal.html +34 -0
  323. package/js/Placer/tests/test.html +49 -0
  324. package/js/PointerObserver/PointerObserver.js +130 -0
  325. package/js/PointerObserver/README.md +34 -0
  326. package/js/PointerObserver/tests/minimal.html +29 -0
  327. package/js/PointerObserver/tests/test.html +35 -0
  328. package/js/SelectorObserver/README.md +47 -0
  329. package/js/SelectorObserver/SelectorObserver.js +201 -0
  330. package/js/SelectorObserver/tests/minimal.html +21 -0
  331. package/js/SelectorObserver/tests/test.html +57 -0
  332. package/js/SelectorObserver/tests/tests.html +161 -0
  333. package/js/contextmenu/README.md +93 -0
  334. package/js/contextmenu/contextmenu.js +336 -0
  335. package/js/contextmenu/tests/minimal.html +44 -0
  336. package/js/contextmenu/tests/test.html +131 -0
  337. package/js/dialog/README.md +49 -0
  338. package/js/dialog/dialog.js +261 -0
  339. package/js/dialog/notification.mp3 +0 -0
  340. package/js/dialog/tests/minimal.html +29 -0
  341. package/js/dialog/tests/notification.mp3 +0 -0
  342. package/js/dialog/tests/test.html +135 -0
  343. package/js/rte/README.md +44 -0
  344. package/js/rte/old/NodeCleaner.js +315 -0
  345. package/js/rte/old/Rte/Rte.mjs +316 -0
  346. package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
  347. package/js/rte/old/Rte/Rte.ui.mjs +154 -0
  348. package/js/rte/old/Rte/crossbrowser.mjs +323 -0
  349. package/js/rte/old/Rte/font/tinymce.svg +98 -0
  350. package/js/rte/old/Rte/font/tinymce.woff +0 -0
  351. package/js/rte/old/Rte/helpers.mjs +159 -0
  352. package/js/rte/old/Rte/htmlparser.mjs +178 -0
  353. package/js/rte/old/Rte/index.mjs +5 -0
  354. package/js/rte/old/Rte/main.css +189 -0
  355. package/js/rte/old/old.rte.js +132 -0
  356. package/js/rte/old/range-selection.old.js +394 -0
  357. package/js/rte/rte.js +7 -0
  358. package/js/rte/src/behavior.js +228 -0
  359. package/js/rte/src/events.js +73 -0
  360. package/js/rte/src/fixes.js +251 -0
  361. package/js/rte/src/range.js +472 -0
  362. package/js/rte/src/rte.js +72 -0
  363. package/js/rte/src/ui/items/ai.js +167 -0
  364. package/js/rte/src/ui/items/code.js +93 -0
  365. package/js/rte/src/ui/items/undo.js +183 -0
  366. package/js/rte/src/ui.items.js +571 -0
  367. package/js/rte/src/ui.js +269 -0
  368. package/js/rte/src/util/htmlparser.js +178 -0
  369. package/js/rte/src/util/indentHtml.js +48 -0
  370. package/js/rte/tests/ai.html +81 -0
  371. package/js/rte/tests/behavior.html +88 -0
  372. package/js/rte/tests/events.html +69 -0
  373. package/js/rte/tests/fixes.html +95 -0
  374. package/js/rte/tests/minimal.html +34 -0
  375. package/js/rte/tests/notes.md +6 -0
  376. package/js/rte/tests/range.html +167 -0
  377. package/js/rte/tests/selection-explorer.html +222 -0
  378. package/js/rte/tests/test.html +92 -0
  379. package/js/shortcut/README.md +33 -0
  380. package/js/shortcut/shortcut.js +89 -0
  381. package/js/shortcut/tests/minimal.html +23 -0
  382. package/js/shortcut/tests/test.html +68 -0
  383. package/package.json +12 -0
  384. package/u2/README.md +4 -0
  385. package/u2/auto.js +161 -0
  386. package/u2/auto.ui.js +85 -0
  387. package/u2/experiments/Waiter/test.html +132 -0
  388. package/u2/experiments/getElementByIdPromise/test.html +76 -0
  389. package/u2/experiments/patchInputValue.html +124 -0
  390. package/u2/experiments/radiobutton/test.html +75 -0
  391. package/u2/experiments/tests/test.html +223 -0
  392. package/u2/experiments/u1-responsive/responsive.js +62 -0
  393. package/u2/experiments/u1-responsive/test.html +65 -0
  394. package/u2/experiments/u2Element.js +139 -0
  395. package/u2/experiments/u2Element.test.html +47 -0
  396. package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
  397. package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
  398. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
  399. package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
  400. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
  401. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
  402. package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
  403. package/u2/old-stuff/css/parser/mod.js +182 -0
  404. package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
  405. package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
  406. package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
  407. package/u2/old-stuff/css/parser/style.html +52 -0
  408. package/u2/old-stuff/css/parser/test.html +38 -0
  409. package/u2/old-stuff/el/ai-texter/README.md +23 -0
  410. package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
  411. package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
  412. package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
  413. package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
  414. package/u2/old-stuff/init.js +38 -0
  415. package/u2/old-stuff/markHashLinks.js +51 -0
  416. package/u2/old-stuff/onElement/mod.js +73 -0
  417. package/u2/old-stuff/test-helpers/mod.js +36 -0
  418. package/u2/old-stuff/test-helpers/test.html +4 -0
  419. package/u2/old-stuff/tests/init.js.html +51 -0
  420. package/u2/old-stuff/viewport.js +64 -0
  421. package/u2/projects.json +468 -0
  422. package/u2/tests/boilerplate.html +46 -0
  423. package/u2/tests/kacheln.html +245 -0
  424. package/u2/tests/showcase.html +270 -0
  425. package/u2/tests/showcase2.html +157 -0
  426. package/u2/tests/test-init.js +35 -0
  427. package/u2/tests/test.html +355 -0
  428. package/u2/tools/baseElement.js +95 -0
  429. package/u2/tools/baseElement.test.html +119 -0
  430. package/u2/tools/ce-inspector.js +308 -0
  431. package/u2/tools/ce-inspector.test.html +66 -0
  432. package/u2/tools/ce-manfest-from-element.js +207 -0
  433. package/u2/tools/dev-iframe.js +213 -0
  434. package/u2/tools/dev-iframe.test.html +75 -0
  435. package/u2/tools/eventsExplorer.js +101 -0
  436. package/u2/tools/logo/u1.svg +9 -0
  437. package/u2/tools/logo/u1ui.svg +6 -0
  438. package/u2/tools/update.repos.json.js +234 -0
  439. package/u2/u2.js +14 -0
  440. package/u2/utils.js +59 -0
package/attr/confirm/tests/minimal.html ADDED
@@ -0,0 +1,23 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <title>test</title>
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <script src="../confirm.js" type=module async></script>
13
+
14
+ <body>
15
+
16
+ <section class=main>
17
+
18
+ <form u2-confirm="Save name?" target=_blank>
19
+ <label><input name=name></label>
20
+ <button>confirm</button>
21
+ </form>
22
+
23
+ </section>
package/attr/confirm/tests/test.html ADDED
@@ -0,0 +1,79 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+ <script src="../confirm.js" type=module async></script>
12
+
13
+
14
+ <body>
15
+
16
+ <section>
17
+
18
+ <h2>Tests</h2>
19
+
20
+ <form u2-confirm="send form?" id=theForm>
21
+ <label>
22
+ <input name="x">
23
+ </label>
24
+ <br>
25
+ <button u2-confirm="Send form using btn?">
26
+ send
27
+ <small>(u2-confirm on the button element)</small>
28
+ </button>
29
+ <br>
30
+ <button>
31
+ send
32
+ <small>(u2-confirm on the form element)</small>
33
+ </button>
34
+ </form>
35
+
36
+ <button onclick="theForm.requestSubmit()">requestSubmit</button>
37
+
38
+ <h2>Using submit-event <small>(and preventDefault)</small></h2>
39
+
40
+ <form u2-confirm="send form?" id=theForm2>
41
+ <label>
42
+ <input name="y">
43
+ </label>
44
+ <button>send</button>
45
+ </form>
46
+
47
+ <script>
48
+ theForm2.addEventListener('submit',e=>{
49
+ e.preventDefault();
50
+ var data = new FormData(theForm2)
51
+ console.log(data)
52
+ });
53
+ </script>
54
+
55
+ <h2>Not form related Button</h2>
56
+
57
+ <button u2-confirm="Would you like an alert()?" onclick="alert('clicked')">
58
+ without form
59
+ <small>klick me</small>
60
+ </button>
61
+
62
+ <h2>No message (default message)</h2>
63
+ <button u2-confirm onclick="alert('clicked')" lang=en>
64
+ [lang="en"]
65
+ </button>
66
+
67
+ <button u2-confirm onclick="alert('clicked')" lang=de>
68
+ [lang="de"]
69
+ </button>
70
+
71
+ <button u2-confirm onclick="alert('clicked')" lang=fr>
72
+ [lang="fr"]
73
+ </button>
74
+
75
+ <h2>Link (not working! implemented if needed)</h2>
76
+
77
+ <a u2-confirm="open U2Ui on github?" href="https://github.com/u2ui/u2" target="_blank">a link</a>
78
+
79
+ </section>
package/attr/draghandle/README.md ADDED
@@ -0,0 +1,41 @@
1
+ # [u2-draghandle] - attribute
2
+ Define a drag handle-element for an element that uses the draggable attribute.
3
+
4
+ ## Usage
5
+
6
+ ```html
7
+ <article draggable="false">
8
+ <u2-ico u2-draghandle>
9
+ <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"></path></svg>
10
+ </u2-ico>
11
+ <h2>This is a draggable article.</h2>
12
+ <p>
13
+ It is draggable, but only by its drag handle.
14
+ </p>
15
+ </article>
16
+ ```
17
+
18
+ ```css
19
+ [draggable="false"] {
20
+ border: .5rem solid #eee;
21
+ }
22
+ [draggable="true"] {
23
+ border: .5rem solid var(--color, #4caf50);
24
+ }
25
+ ```
26
+
27
+ ## Install
28
+
29
+ ```html
30
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/draghandle/draghandle.min.js" type=module async></script>
31
+ ```
32
+
33
+ ## Demos
34
+
35
+ [minimal.html](http://gcdn.li/u2ui/u2@main/attr/draghandle/tests/minimal.html)
36
+
37
+ ## About
38
+
39
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
40
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
41
+
package/attr/draghandle/draghandle.js ADDED
@@ -0,0 +1,42 @@
1
+ import 'https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js';
2
+
3
+ const css = `
4
+ [u2-draghandle] {
5
+ cursor: grab;
6
+ touch-action: none; /* needed? probably yes */
7
+ }
8
+ `;
9
+ document.head.insertAdjacentHTML('afterbegin', `<style>${css}</style>`);
10
+
11
+
12
+ const root = document;
13
+ // root.addEventListener("pointerdown",(e)=>{
14
+ // root.releasePointerCapture(e.pointerId);
15
+ // })
16
+ root.addEventListener('pointerenter', e => {
17
+ if (!e.target.matches) return // document
18
+ if (!e.target.matches('[u2-draghandle]')) return;
19
+ const draggable = e.target.closest('[draggable]');
20
+ if (!draggable) console.warn('u2-draghandle: no draggable parent found');
21
+ if (draggable.getAttribute('draggable') === 'true') console.warn('u2-draghandle: draggable-attribute should be empty or false, but was true');
22
+ draggable.setAttribute('draggable', true);
23
+ },true);
24
+ root.addEventListener('pointerleave', e => {
25
+ if (!e.target.matches) return // document
26
+ if (!e.target.matches('[u2-draghandle]')) return;
27
+ e.target.closest('[draggable]').setAttribute('draggable', 'false');
28
+ },true);
29
+
30
+ // desktop only
31
+ // addEventListener('mouseenter', e => {
32
+ // if (!e.target.matches('[u2-draghandle]')) return;
33
+ // const draggable = e.target.closest('[draggable]');
34
+ // if (!draggable) console.warn('u2-draghandle: no draggable parent found');
35
+ // if (draggable.getAttribute('draggable') === 'true') console.warn('u2-draghandle: draggable-attribute should be empty or false, but was true');
36
+ // draggable.setAttribute('draggable', true);
37
+ // },true);
38
+
39
+ // addEventListener('mouseleave', e => {
40
+ // if (!e.target.matches('[u2-draghandle]')) return;
41
+ // e.target.closest('[draggable]').setAttribute('draggable', 'false');
42
+ // },true);
package/attr/draghandle/tests/minimal.html ADDED
@@ -0,0 +1,44 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+ <script src="../draghandle.js" type=module></script>
12
+
13
+ <body>
14
+
15
+ <section class=main>
16
+ <article draggable="false">
17
+ <u2-ico u2-draghandle>
18
+ <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"></path></svg>
19
+ </u2-ico>
20
+ <h2>This is a draggable article.</h2>
21
+ <p>
22
+ It is draggable, but only by its drag handle.
23
+ </p>
24
+ </article>
25
+ </section>
26
+
27
+ <style class=main>
28
+ [draggable="false"] {
29
+ border: .5rem solid #eee;
30
+ }
31
+ [draggable="true"] {
32
+ border: .5rem solid var(--color, #4caf50);
33
+ }
34
+ </style>
35
+
36
+ <style>
37
+ [u2-draghandle] {
38
+ float: right;
39
+ }
40
+ article {
41
+ padding:1rem;
42
+ background-color: #f8f8f8;
43
+ }
44
+ </style>
package/attr/focusgroup/README.md ADDED
@@ -0,0 +1,49 @@
1
+ # [u2-focusgroup] - attribute
2
+ Focus movement by arrow keys
3
+
4
+ ## Features
5
+
6
+ It allows you to focus elements with arrow keys inside a container.
7
+
8
+ - Works inside shadow dom.
9
+ - Use focusgroup="wrap" to focus the first element when the last element is focused and vice versa.
10
+ - Use focusgroup="remember" to focus the last focused element when group is focused again.
11
+ - Text-Inputs only works for up and down arrow keys.
12
+
13
+
14
+ See also:
15
+ https://open-ui.org/components/focusgroup.explainer/
16
+ https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md
17
+
18
+ ## Usage
19
+
20
+ ```html
21
+ <div u2-focusgroup="wrap remember">
22
+ <button>focusgroup</button>
23
+ <button>focus and</button>
24
+ <button>then use arrow-keys</button>
25
+ </div>
26
+ ```
27
+
28
+ ```css
29
+ [u2-focusgroup] [tabindex="0"] {
30
+ background: lightblue;
31
+ }
32
+ ```
33
+
34
+ ## Install
35
+
36
+ ```html
37
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/focusgroup/focusgroup.min.js" type=module async></script>
38
+ ```
39
+
40
+ ## Demos
41
+
42
+ [minimal.html](http://gcdn.li/u2ui/u2@main/attr/focusgroup/tests/minimal.html)
43
+ [test.html](http://gcdn.li/u2ui/u2@main/attr/focusgroup/tests/test.html)
44
+
45
+ ## About
46
+
47
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
48
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
49
+
package/attr/focusgroup/focusgroup.js ADDED
@@ -0,0 +1,100 @@
1
+
2
+ addEventListener('keydown', e => {
3
+ if (e.defaultPrevented) return;
4
+ if (e.altKey) return; // alt is reserved for browser back/forward
5
+ if (e.ctrlKey || e.metaKey || e.shiftKey) return; // we only want to handle arrow keys without modifiers, in the future we could add a setting for this (focus last element with arrow left + shift)
6
+
7
+ const isVertical = (e.code === 'ArrowUp' || e.code === 'ArrowDown');
8
+ const isHorizontal = (e.code === 'ArrowLeft' || e.code === 'ArrowRight');
9
+ if (!isVertical && !isHorizontal) return;
10
+
11
+ const {target, container} = eventTargets(e);
12
+ if (!container) return;
13
+
14
+ if (isHorizontal) {
15
+ if (target.tagName === 'INPUT' && (target.type !== 'checkbox' && target.type !== 'radio')) return;
16
+ if (target.tagName === 'TEXTAREA') return;
17
+ }
18
+ if (isVertical) {
19
+ if (target.tagName === 'SELECT') return;
20
+ if (target.tagName === 'TEXTAREA') return;
21
+ }
22
+
23
+ const tmp = container.getAttribute('u2-focusgroup').split(' ');
24
+ const options = Object.fromEntries(tmp.map(o => [o, true]));
25
+ if (!options.horizontal && !options.vertical) {
26
+ options.horizontal = true;
27
+ options.vertical = true;
28
+ }
29
+
30
+ if (!options.horizontal && isHorizontal) return;
31
+ if (!options.vertical && isVertical) return;
32
+
33
+ let direction = 0;
34
+ if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') direction = -1;
35
+ if (e.code === 'ArrowRight' || e.code === 'ArrowDown') direction = 1;
36
+ if (direction === 0) return;
37
+
38
+ const items = groupItems(container);
39
+ if (items.length < 2) return;
40
+
41
+ const index = items.indexOf(target);
42
+
43
+ if (index === -1) {
44
+ console.warn('should not happen, got a focusgroup-key-event, but the target is not focusable!');
45
+ return;
46
+ }
47
+
48
+ let next = items[index + direction];
49
+ if (!next && options.wrap) next = direction === 1 ? items.at(0) : items.at(-1);
50
+ if (!next) return;
51
+
52
+ next.focus();
53
+
54
+ // remember
55
+ if (options.remember) {
56
+ items.forEach(el => el.setAttribute('tabindex', el === next ? '0' : '-1'));
57
+ }
58
+
59
+ e.preventDefault();
60
+ });
61
+
62
+
63
+ // addEventListener('focusin', e => {
64
+ // const {target, container} = eventTargets(e);
65
+ // if (!container) return;
66
+ // const remember = container.getAttribute('u2-focusgroup').split(' ').includes('remember');
67
+ // if (!remember) return;
68
+ // groupItems(container).forEach(el => el.setAttribute('tabindex', el === target ? '0' : '-1'));
69
+ // });
70
+
71
+
72
+
73
+ function groupItems(container) {
74
+ const selector = ' :not(u2-focusgroup) a[href], button, input, select, textarea, [contenteditable], [tabindex]';
75
+ const elements = [...container.querySelectorAll(selector)];
76
+
77
+ // handle slotted elements, beta
78
+ const slots = container.matches('slot') ? [container] : container.querySelectorAll('slot'); // TODO: handle slotted elements
79
+ slots.forEach(slot => {
80
+ const slotted = slot.assignedElements({flatten: true}).filter(el => el.matches(selector));
81
+ elements.push(...slotted);
82
+ });
83
+
84
+ return elements.filter(el => !el.disabled);
85
+ }
86
+
87
+ function eventTargets(event){
88
+ let target = event.target;
89
+ let container = target.closest('[u2-focusgroup]');
90
+ if (!container) { // inside shadow dom
91
+ target = event.originalTarget; // only for firefox?
92
+ if (!target) return {};
93
+ container = target.closest('[u2-focusgroup]');
94
+ }
95
+ if (!container) container = target.assignedSlot?.closest('[u2-focusgroup]'); // if slotted, ok?
96
+ return {
97
+ target,
98
+ container
99
+ };
100
+ }
package/attr/focusgroup/manifest.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "README.md",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "focusgroup.js",
8
+ "declarations": [
9
+ {
10
+ "description": "Focus movement by arrow keys",
11
+ "name": "u2-focusgroup",
12
+ "members": [],
13
+ "events": [],
14
+ "attributes": [
15
+ {
16
+ "name": "u2-focusgroup",
17
+ "description": "It allows you to focus elements with arrow keys inside a container.",
18
+ "u2Examples": ["", "wrap", "wrap vertical remember", "remember"]
19
+ }
20
+ ],
21
+ "cssProperties": [],
22
+ "attributeName": "u2-focusgroup"
23
+ }
24
+ ],
25
+ "exports": [
26
+ {
27
+ "kind": "custom-attribute-definition",
28
+ "name": "u2-focusgroup",
29
+ "declaration": {
30
+ "name": "u2-focusgroup",
31
+ "module": "focusgroup.js"
32
+ }
33
+ }
34
+ ]
35
+ }
36
+ ]
37
+ }
38
+
package/attr/focusgroup/tests/minimal.html ADDED
@@ -0,0 +1,27 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+ <script src="../focusgroup.js"></script>
12
+
13
+ <body>
14
+
15
+ <section class=main>
16
+ <div u2-focusgroup="wrap remember">
17
+ <button>focusgroup</button>
18
+ <button>focus and</button>
19
+ <button>then use arrow-keys</button>
20
+ </div>
21
+ </section>
22
+
23
+ <style class=main>
24
+ [u2-focusgroup] [tabindex="0"] {
25
+ background: lightblue;
26
+ }
27
+ </style>
package/attr/focusgroup/tests/test.html ADDED
@@ -0,0 +1,154 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+ <title>Attribute u2-focusgroup tests</title>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <script src="../focusgroup.js"></script>
13
+
14
+ <body>
15
+
16
+ <section>
17
+ <h2>u2-focusgroup</h2>
18
+
19
+ <div style="display:flex; gap:1rem" u2-focusgroup>
20
+ <button>press left or up key to focus the previous button</button>
21
+ <button disabled>disabled</button>
22
+ <button>press right or down key to focus the next button</button>
23
+ </div>
24
+ </section>
25
+
26
+ <section>
27
+ <h2>u2-focusgroup="wrap remember"</h2>
28
+ <p>
29
+ <strong>Wrap:</strong> If the last element has focus the next will be the first element.
30
+ </p>
31
+ <p>
32
+ <strong>Remember:</strong> If you come back to the group the last focused element will be focused. (The others can not be focused by tab-key.)
33
+ </p>
34
+
35
+ <div style="display:flex; gap:1rem" u2-focusgroup="wrap remember">
36
+ <label>1. <input type="checkbox"></label>
37
+ <label>2. <input type="checkbox"></label>
38
+ <label>3. <input type="checkbox"></label>
39
+ </div>
40
+ </section>
41
+
42
+ <section>
43
+ <h2>u2-focusgroup="horizontal" / "vertical"</h2>
44
+
45
+ <fieldset style="display:flex; gap:1rem; " u2-focusgroup="horizontal">
46
+ <legend>horizontal</legend>
47
+ <div tabindex="0">1</div>
48
+ <div tabindex="-1">tabindex=-1</div>
49
+ <div tabindex="0">2</div>
50
+ </fieldset>
51
+
52
+ <fieldset style="display:flex; gap:1; flex-direction: column;" u2-focusgroup="vertical">
53
+ <legend>vertical</legend>
54
+ <div tabindex="0">1</div>
55
+ <div tabindex="0">2</div>
56
+ </fieldset>
57
+ <section>
58
+
59
+ <section>
60
+ <h2>inside shadow dom</h2>
61
+
62
+ <div id=shadowTest></div>
63
+
64
+ <script>
65
+ const shadow = shadowTest.attachShadow({mode: 'open'});
66
+ shadow.innerHTML = `
67
+ <div style="display:flex; gap:1rem" u2-focusgroup>
68
+ <button>press left or up key to focus the previous button</button>
69
+ <button>press right or down key to focus the next button</button>
70
+ </div>
71
+ `;
72
+ </script>
73
+ </section>
74
+
75
+ <section>
76
+ <h2>Using different input fields</h2>
77
+
78
+ <div style="display:flex; flex-direction:column; gap:1rem" u2-focusgroup>
79
+ <label>
80
+ text
81
+ <input type="text">
82
+ horizontal does not work
83
+ </label>
84
+ <label>
85
+ checkbox
86
+ <input type="checkbox">
87
+ does work
88
+ </label>
89
+ <label>
90
+ radio
91
+ <input type="radio">
92
+ does work
93
+ </label>
94
+ <label>
95
+ select
96
+ <select><option>1</option><option>2</option></select>
97
+ vertical does not work
98
+ </label>
99
+ <label>
100
+ textarea
101
+ <textarea></textarea>
102
+ horizontal and vertical do not work
103
+ </label>
104
+ </div>
105
+ </section>
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+
114
+ <!--
115
+ from microsoft focusgroup polyfill
116
+
117
+ <style>
118
+ span.fakeradio { display:inline-block; width:20px; height:20px; border-radius:50%; background:lightgray; }
119
+ span.fakeradio:focus { outline: 2px solid black; }
120
+ [role=menu] { display: flex; flex-direction: column; width: 250px; border: 1px solid black; }
121
+ [role=menuitem]:focus { outline: 2px solid blue; }
122
+ </style>
123
+ </head>
124
+ <body>
125
+ <div u2-focusgroup>
126
+ <input type="checkbox">
127
+ <input type="checkbox">
128
+ </div>
129
+ <fieldset u2-focusgroup>
130
+ <legend>shopping list</legend>
131
+ <label u2-focusgroup="extends wrap"><input type="checkbox">Apples</label>
132
+ <label u2-focusgroup="extends"><input type="checkbox">Bananas</label>
133
+ <label u2-focusgroup="extends wrap"><input type="checkbox">Carrots</label>
134
+ <label u2-focusgroup="extends"><input type="checkbox">Tomatoes</label>
135
+ </fieldset>
136
+ <p>Pretend radio buttons (wrapping)</p>
137
+ <div u2-focusgroup="wrap">
138
+ <span tabindex="0" class="fakeradio"></span>
139
+ <span tabindex="-1" class="fakeradio"></span>
140
+ <span tabindex="-1" class="fakeradio"></span>
141
+ <span tabindex="-1" class="fakeradio"></span>
142
+ </div>
143
+ <p>vertical menu (with horizontal submenus)</p>
144
+ <div u2-focusgroup="vertical" role="menu">
145
+ <div tabindex=0 role="menuitem">menu item 1</div>
146
+ <div tabindex=-1 role="menuitem">menu item 2</div>
147
+ <div tabindex=-1 role="menuitem">menu item 3</div>
148
+ <div tabindex=-1 u2-focusgroup="extends horizontal wrap" aria-orientation="horizontal" style="display: flex;justify-content: space-evenly" >
149
+ <span tabindex=-1 role="menuitem">sub 3.1</span>
150
+ <span tabindex=-1 role="menuitem">sub 3.2</span>
151
+ </div>
152
+ <div tabindex=-1 role="menuitem">menu item 4</div>
153
+ </div>
154
+ -->
package/attr/href/README.md ADDED
@@ -0,0 +1,38 @@
1
+ # [u2-href] - attribute
2
+ Every element can be a link
3
+
4
+ ## Usage
5
+
6
+ ```html
7
+ <div u2-href="http://schwups.ch" u2-href-target=_blank>
8
+ Pseudo link
9
+ </div>
10
+ ```
11
+
12
+ ## Install
13
+
14
+ ```html
15
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/href/href.min.js" type=module async></script>
16
+ ```
17
+
18
+ ## Demos
19
+
20
+ [minimal.html](http://gcdn.li/u2ui/u2@main/attr/href/tests/minimal.html)
21
+ [test.html](http://gcdn.li/u2ui/u2@main/attr/href/tests/test.html)
22
+
23
+ ## Description
24
+
25
+ This attribute allows you to turn any element into a link by simply adding the `u2-href` attribute to it.
26
+ `Ctrl + click` will open the link in a new tab.
27
+ Clicks on interactive elements inside the pseudo-link element prevent the link from being opened.
28
+ XSS attacks are prevented by disallowing the `javascript:` protocol.
29
+
30
+ ## Note
31
+
32
+ Always offer an A-Tag with the same link. Screen readers do not recognize that this is a link!
33
+
34
+ ## About
35
+
36
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
37
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
38
+