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/parallax/tests/test.html ADDED
@@ -0,0 +1,108 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>parallax attribute test.html | U2-design-system</title>
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <script src="../parallax.js" type=module async></script>
10
+
11
+ <style>
12
+ body, html {
13
+ margin:0;
14
+ height:100%;
15
+ font-size: calc(12px + 1vmax);
16
+ font-family:arial;
17
+ }
18
+ h1 {
19
+ margin:0;
20
+ }
21
+ #bg {
22
+ height:100%;
23
+ }
24
+ #bg > span {
25
+ z-index:-1;
26
+ position:absolute;
27
+ background:red;
28
+ width:2em;
29
+ height:2em;
30
+ will-change:transform;
31
+ }
32
+ #logo {
33
+ height:100vh;
34
+ display:flex;
35
+ justify-content: center;
36
+ align-items: center;
37
+ gap:.5em;
38
+ font-size:calc(16px + 1vw);
39
+ }
40
+ #logo > span {
41
+ flex-basis:3em;
42
+ height:3em;
43
+ display:flex;
44
+ justify-content: center;
45
+ align-items: center;
46
+ color: white;
47
+ color:black;
48
+ border:1px solid black;
49
+
50
+ }
51
+ #logo :nth-child(1) { --u2-parallax-speed:1.3; background-color:#79BBE8; }
52
+ #logo :nth-child(2) { --u2-parallax-speed:1.2; background-color:#7EE2F2; }
53
+ #logo :nth-child(3) { --u2-parallax-speed:1.1; background-color:#7CDBCF; }
54
+ #logo :nth-child(4) { --u2-parallax-speed:1.0; background-color:#7EF2C2; }
55
+ #logo :nth-child(5) { --u2-parallax-speed:0.9; background-color:#79E89A; }
56
+
57
+ </style>
58
+ <script type=module>
59
+ for (let i=400; i>0; i--) {
60
+ var span = document.createElement('span')
61
+ span.setAttribute('u2-parallax', true);
62
+ let speed = Math.random();
63
+ span.style.setProperty('--u2-parallax-speed', speed);
64
+ span.style.setProperty('opacity', speed+.1);
65
+ span.style.setProperty('left', Math.random()*100+'%');
66
+ span.style.setProperty('top', Math.random()*100+'%');
67
+ span.style.width = (5 + (speed * 50)) + 'px';
68
+ span.style.height = (5 + (speed * 50)) + 'px';
69
+ span.style.zIndex = -Math.floor((1-speed) * 100);
70
+ const colors = ['#79BBE8','#7EE2F2','#7CDBCF','#7EF2C2','#79E89A'];
71
+ const index = Math.floor(Math.random() * colors.length)
72
+ span.style.backgroundColor = colors[index];
73
+ bg.append(span)
74
+ }
75
+ </script>
76
+ </head>
77
+ <body>
78
+
79
+ <div id=bg>
80
+ <h1 id=logo>
81
+ <span u2-parallax>P</span>
82
+ <span u2-parallax>A</span>
83
+ <span u2-parallax>R</span>
84
+ <span u2-parallax>A</span>
85
+ <span u2-parallax>X</span>
86
+ </h1>
87
+ </div>
88
+
89
+
90
+ <!--div style="height:400px; overflow:hidden; margin-top:100vh; background:white; position:relative; box-shadow:0 0 10px">
91
+ <div u2-parallax style="position:absolute; top:calc(1450px * -.5 * (var(--u2-parallax-speed) - 1 ) ); bottom:calc(1450px * -.5 * (var(--u2-parallax-speed) - 1) ); left:0; right:0; --u2-parallax-speed:1; background: rgb(154,148,255); background: linear-gradient(173deg, rgba(154,148,255,1) 0%, rgba(228,88,62,1) 29%, rgba(74,215,76,1) 59%, rgba(0,212,255,1) 100%);">
92
+ para
93
+ </div>
94
+ asdf
95
+ </div-->
96
+
97
+
98
+ <div style="max-width:800px; margin:4em auto; padding:2em; background:rgba(255,255,255,.8); border:1px solid">
99
+ <h2>How to use</h2>
100
+ <p>Include the script from...</p>
101
+ <p>Add the attribute "u2-parallax" to each element you like to change the speed.</p>
102
+ <pre>&lt;span u2-parallax style="--u2-parallax-speed:2"&gt;
103
+ I am twice as fast
104
+ &lt;/span&gt;</pre>
105
+ </div>
106
+
107
+
108
+ <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
package/attr/skin/README.md ADDED
@@ -0,0 +1,59 @@
1
+ # [u2-skin] - attribute
2
+ Change the skin of a widget
3
+
4
+ - Recalculates css color-variables
5
+ - Sets the background and the text color
6
+
7
+ ## Usage
8
+
9
+ ```html
10
+ <div u2-skin="invert" style="padding:1rem">
11
+ <h3>Inverted</h3>
12
+ <button>button</button>
13
+ </div>
14
+ <br>
15
+ <div u2-skin="theme" style="padding:1rem">
16
+ <h3>Theme-color as background</h3>
17
+ <button>button</button>
18
+ </div>
19
+ ```
20
+
21
+ ```css
22
+ [u2-skin=pink] {
23
+ --hsl-h: 330;
24
+ --hsl-s: 90%;
25
+ --hsl-l: 70%;
26
+ }
27
+ ```
28
+
29
+ ## Install
30
+
31
+ ```html
32
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/skin/skin.min.js" type=module async></script>
33
+ ```
34
+
35
+ ## Demos
36
+
37
+ [minimal.html](http://gcdn.li/u2ui/u2@main/attr/skin/tests/minimal.html)
38
+ [test.html](http://gcdn.li/u2ui/u2@main/attr/skin/tests/test.html)
39
+
40
+ ## Description
41
+
42
+ `[u2-skin=invert]` will invert the colors of the widget (switches among other things the background color and the text color).
43
+
44
+ `[u2-skin=theme]` will use the theme color (`--color`) as background color
45
+
46
+ Custom skins can easily be added.
47
+ Just change `--hsl-h` for example:
48
+
49
+ ```css
50
+ [skin=pink] {
51
+ --hsl-h: 330;
52
+ }
53
+ ```
54
+
55
+ ## About
56
+
57
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
58
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
59
+
package/attr/skin/skin.css ADDED
@@ -0,0 +1,51 @@
1
+
2
+ [u2-skin] {
3
+ color: var(--color-text);
4
+ background-color: var(--color-bg);
5
+
6
+ ::selection {
7
+ color: var(--color-bg);
8
+ background-color: var(--color-text);
9
+ }
10
+ }
11
+
12
+
13
+
14
+ [u2-skin=invert] {
15
+ --color-light: var(--color-init-dark);
16
+ --color-dark: var(--color-init-light);
17
+
18
+ --color-bg: var(--color-init-text);
19
+ --color-text: var(--color-init-bg);
20
+ --color-area: var(--color-light);
21
+
22
+ :has(>&) {
23
+ --color-init: var(--color);
24
+ --color-init-light: var(--color-light);
25
+ --color-init-dark: var(--color-dark);
26
+
27
+ --color-init-bg: var(--color-bg);
28
+ --color-init-text: var(--color-text);
29
+ }
30
+ [u2-skin]:has(>&) {
31
+ outline: 10px dotted red !important; /* invert can not be child of skin; */
32
+ }
33
+
34
+ }
35
+
36
+ [u2-skin=theme] {
37
+ --color: var(--color-init-text);
38
+ --color-bg: var(--color-init);
39
+ --color-text: var(--color-init-bg);
40
+ :has(>&) {
41
+ --color-init: var(--color);
42
+ --color-init-bg: var(--color-bg);
43
+ --color-init-text: var(--color-text);
44
+ }
45
+ }
46
+
47
+
48
+ /*
49
+ contrast text color by background lightness *
50
+ https://jsfiddle.net/gqm0wvcn/4/
51
+ */
package/attr/skin/tests/minimal.html ADDED
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>skin.attr test | U2 design-system</title>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+ <link rel=stylesheet href="../skin.css">
12
+
13
+ <body>
14
+
15
+
16
+ <section class="main">
17
+ <div u2-skin="invert" style="padding:1rem">
18
+ <h3>Inverted</h3>
19
+ <button>button</button>
20
+ </div>
21
+ <br>
22
+ <div u2-skin="theme" style="padding:1rem">
23
+ <h3>Theme-color as background</h3>
24
+ <button>button</button>
25
+ </div>
26
+ </section>
27
+
28
+ <style class=main>
29
+ [u2-skin=pink] {
30
+ --hsl-h: 330;
31
+ --hsl-s: 90%;
32
+ --hsl-l: 70%;
33
+ }
34
+ </style>
package/attr/skin/tests/test.html ADDED
@@ -0,0 +1,96 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>skin.attr test | U2 design-system</title>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+
10
+ <link rel=stylesheet href="../skin.css">
11
+
12
+ <script type=module async src="../../../el/code/code.js"></script>
13
+ <link rel=stylesheet href="../../../el/code/code.css">
14
+
15
+ <style>
16
+ section {
17
+ padding:2rem;
18
+ margin:2rem;
19
+ }
20
+ </style>
21
+ <body>
22
+
23
+ <section>
24
+ <h1>No skin attribute</h1>
25
+ <p>Some Text in a Paragraph Some Text in a Paragraph Some Text in a ParagraphSome Text in a Paragraph Some</p>
26
+ <hr>
27
+ <button>some button</button>
28
+ <input type=text>
29
+ <input type=checkbox>
30
+ </section>
31
+
32
+ <section u2-skin=invert>
33
+ <h1>[u2-skin=invert]</h1>
34
+ <p>Some Text in a Paragraph Some Text in a Paragraph Some Text in a ParagraphSome Text in a Paragraph Some</p>
35
+ <hr>
36
+ <button>some button</button>
37
+ <input type=text>
38
+ <input type=checkbox>
39
+ </section>
40
+
41
+
42
+ <section u2-skin=theme>
43
+ <h1>[u2-skin=theme]</h1>
44
+ <p>Some Text in a Paragraph Some Text in a Paragraph Some Text in a ParagraphSome Text in a Paragraph Some</p>
45
+ <hr>
46
+ <button>some button</button>
47
+ <input type=text>
48
+ <input type=checkbox>
49
+ </section>
50
+
51
+ <section>
52
+ <h1>Custom Skins:</h1>
53
+ </section>
54
+
55
+ <section u2-skin=pink>
56
+ <h1>[u2-skin=pink]</h1>
57
+ <p>Some Text in a Paragraph Some Text in a Paragraph Some Text in a ParagraphSome Text in a Paragraph Some</p>
58
+
59
+ <u2-code trim editable style="background-color:var(--color-light); color:black; padding:1em">
60
+ <style>
61
+ [u2-skin=pink] {
62
+ --hsl-h: 330;
63
+ --hsl-l: 60%;
64
+ }
65
+ </style>
66
+ </u2-code>
67
+
68
+ <hr>
69
+
70
+ <button>some button</button>
71
+ <input type=text>
72
+ <input type=checkbox>
73
+ </section>
74
+
75
+ <section u2-skin=pink-theme>
76
+ <h1>[u2-skin=pink-theme]</h1>
77
+ <p>Some Text in a Paragraph Some Text in a Paragraph Some Text in a ParagraphSome Text in a Paragraph Some</p>
78
+
79
+ <u2-code trim editable style="background-color:var(--color-light); color:black; padding:1em">
80
+ <style>
81
+ [u2-skin=pink-theme] {
82
+ --hsl-h: 330;
83
+ --hsl-l: 60%;
84
+ --color: var(--color-light);
85
+ --color-bg: hsl(var(--hsl));
86
+ --color-text: var(--color-light);
87
+ }
88
+ </style>
89
+ </u2-code>
90
+
91
+ <hr>
92
+
93
+ <button>some button</button>
94
+ <input type=text>
95
+ <input type=checkbox>
96
+ </section>
package/class/badge/README.md ADDED
@@ -0,0 +1,25 @@
1
+ # .u2-badge - class
2
+ Rendering badges
3
+
4
+ ## Usage
5
+
6
+ ```html
7
+ <span class=u2-badge>Badge</span>
8
+ ```
9
+
10
+ ## Install
11
+
12
+ ```html
13
+ <link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/badge/badge.min.css" rel=stylesheet>
14
+ ```
15
+
16
+ ## Demos
17
+
18
+ [minimal.html](http://gcdn.li/u2ui/u2@main/class/badge/tests/minimal.html)
19
+ [test.html](http://gcdn.li/u2ui/u2@main/class/badge/tests/test.html)
20
+
21
+ ## About
22
+
23
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
24
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
25
+
package/class/badge/badge.css ADDED
@@ -0,0 +1,35 @@
1
+ .u2-badge {
2
+ background-color:var(--color-dark, CanvasText);
3
+ color:var(--color-bg, Canvas);
4
+
5
+ display:inline-flex;
6
+ border-radius:1em;
7
+ line-height: var(--line-height);
8
+ --line-height:1.1;
9
+ font-weight:normal;
10
+
11
+ min-width: 1.6em;
12
+ min-height: 1.6em;
13
+ padding-inline: .6em;
14
+ padding-block: .2em .25em;
15
+ justify-content: center;
16
+ align-items: center;
17
+ text-align: center;
18
+
19
+ box-sizing: border-box;
20
+
21
+ /*
22
+ box-decoration-break:clone; /* not needed for inline-flex * /
23
+ vertical-align:middle;
24
+ margin-bottom:-.1em;
25
+ margin-top:-.1em;
26
+ transform: scale(0.99999999);
27
+ */
28
+ }
29
+
30
+ .u2-badge:empty {
31
+ min-width: .6em;
32
+ min-height: .6em;
33
+ padding:0;
34
+ /* margin-left:-.1em; */
35
+ }
package/class/badge/tests/minimal.html ADDED
@@ -0,0 +1,17 @@
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
+ <link href="../badge.css" rel=stylesheet>
12
+
13
+ <body>
14
+
15
+ <section class="main">
16
+ <span class=u2-badge>Badge</span>
17
+ </section>
package/class/badge/tests/test.html ADDED
@@ -0,0 +1,112 @@
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>badge.class test | u2ui design system</title>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <link rel=stylesheet href="../badge.css">
13
+ <body>
14
+
15
+ <section id=u2-badge>
16
+ <h2>.u2-badge</h2>
17
+
18
+ <h3>No Content</h3>
19
+ <div>
20
+ ✉<sup class=u2-badge style="background-color:red"></sup>
21
+ ♞<sup class=u2-badge style="background-color:red"></sup>
22
+ </div>
23
+
24
+ <h3>Using span</h3>
25
+ <div>
26
+ <span class=u2-badge>done</span>
27
+ <span class=u2-badge>todog</span>
28
+ <span class="u2-badge">warn</span>
29
+ </div>
30
+
31
+ <h3>Using small</h3>
32
+ <div>
33
+ Here: <small class=u2-badge>done</small>
34
+ <small class=u2-badge>done</small>
35
+ </div>
36
+
37
+ <h3>Using sup</h3>
38
+ <p>
39
+ <sup class=u2-badge>pro tip ★</sup> show here |
40
+ E-mails <sup class=u2-badge>3</sup>
41
+ </p>
42
+
43
+ <h3>Breaks</h3>
44
+ <p style="max-width:200px">
45
+ <small class=u2-badge>super long badge containing more words</small>
46
+ </p>
47
+
48
+ <h3>Combining</h3>
49
+ <p>
50
+ <button>
51
+ Notifications
52
+ <small class=u2-badge>5</small>
53
+ </button>
54
+ <h1>
55
+ Heading
56
+ <small class=u2-badge>5</small>
57
+ sup: <sup class=u2-badge>5</sup>
58
+ </h1>
59
+ </p>
60
+
61
+
62
+ <h3>Text font-familie properties</h3>
63
+ <p>Ascenders and descenders</p>
64
+ <style contenteditable style="display:block">
65
+ body {
66
+ xfont-family: "Arial", "Helvetica", sans-serif;
67
+ xfont-family: "Arial Black", "Arial", sans-serif;
68
+ xfont-family: "Book Antiqua", "Arial", sans-serif;
69
+ xfont-family: "Comic Sans MS", "Arial", sans-serif;
70
+ xfont-family: "Courier New", "Courier", monospace;
71
+ xfont-family: "Georgia", "Times New Roman", serif;
72
+ xfont-family: "Impact", "Arial", sans-serif;
73
+ xfont-family: "Lucida Console", "Courier", monospace;
74
+ xfont-family: "Lucida Sans Unicode", "Lucida Grande", "Helvetica", sans-serif;
75
+ xfont-family: "MS Sans Serif", "Arial", sans-serif;
76
+ xfont-family: "MS Serif", "Arial", sans-serif;
77
+ xfont-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
78
+ xfont-family: "Tahoma", "Geneva", sans-serif;
79
+ xfont-family: "Times New Roman", "Times", serif;
80
+ xfont-family: "Trebuchet MS", "Lucida Grande", "Helvetica", sans-serif;
81
+ xfont-family: "Verdana", "Geneva", sans-serif;
82
+
83
+ }
84
+ </style>
85
+
86
+ </section>
87
+
88
+
89
+ <section>
90
+ <h2>Pulse (not integrated)</h2>
91
+ <span class="u2-badge -Pulse" style="--pulse-color:var(--color)">2</span>
92
+ &nbsp;&nbsp;
93
+ <span class="u2-badge -Pulse" style="background:red; --pulse-color:red"></span>
94
+ </section>
95
+
96
+ <style contenteditable>
97
+ .u2-badge.-Pulse {
98
+ animation: 1.5s ease 0s infinite normal none running pulse;
99
+ }
100
+ @keyframes pulse {
101
+ 0% {
102
+ box-shadow: 0 0 0 0 var(--pulse-color, black);
103
+ }
104
+ 70% {
105
+ box-shadow: 0 0 0 0.5rem transparent;
106
+ }
107
+ 100% {
108
+ box-shadow: 0 0 0 0 transparent;
109
+ }
110
+ }
111
+ </style>
112
+ </section>
package/class/card1/README.md ADDED
@@ -0,0 +1,45 @@
1
+ # .u2-card1 - class
2
+ card-class (beta)
3
+
4
+ We named it with the prefix "1" to prevent compatibility-issues if we like to change behavoir
5
+
6
+ ## Usage
7
+
8
+ ```html
9
+ <article class=u2-card1>
10
+ <img src="https://picsum.photos/800/400" width=800 height=400 style="padding:0" alt="image">
11
+ <h1>Card 1</h1>
12
+ <div class=-body>
13
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos porro pariatur ducimus aut?
14
+ Saepe vitae sequi doloribus perspiciatis quae?
15
+ </div>
16
+ <div style="background:#f8f8f8">
17
+ <div class=u2-flex style="justify-content:flex-end; row-gap:.5rem">
18
+ <button>button 1</button>
19
+ <button>button 2</button>
20
+ </div>
21
+ </div>
22
+ </article>
23
+ ```
24
+
25
+ ```css
26
+ .u2-card1 {
27
+ }
28
+ ```
29
+
30
+ ## Install
31
+
32
+ ```html
33
+ <link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/card1/card1.min.css" rel=stylesheet>
34
+ ```
35
+
36
+ ## Demos
37
+
38
+ [minimal.html](http://gcdn.li/u2ui/u2@main/class/card1/tests/minimal.html)
39
+ [test.html](http://gcdn.li/u2ui/u2@main/class/card1/tests/test.html)
40
+
41
+ ## About
42
+
43
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
44
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
45
+
package/class/card1/card1.css ADDED
@@ -0,0 +1,30 @@
1
+ .u2-card1 {
2
+ display: flex;
3
+ flex-direction: column;
4
+ box-shadow: var(--shadow);
5
+ border-radius: var(--radius);
6
+ }
7
+ .u2-card1.u2-card1 > :not(img) {
8
+ margin: 0;
9
+ padding: 1rem;
10
+ }
11
+ .u2-card1 > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
12
+ .u2-card1 > :last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; }
13
+
14
+ .u2-card1 > .-body {
15
+ flex:1 0 auto;
16
+ }
17
+
18
+
19
+
20
+ /* todo if needed
21
+ :where(a.u2-card1) {
22
+ color:inherit;
23
+ text-decoration:none;
24
+ transition: box-shadow .1s;
25
+ }
26
+ :where(a.u2-card1:hover) {
27
+ xbox-shadow: var(--shadow-x) var(--shadow-y) 1.6rem -.5rem rgba(23, 23, 23, 0.35),
28
+ var(--shadow-x) var(--shadow-y) 1.0rem -.7rem rgba(23, 23, 23, 0.2);
29
+ }
30
+ */
package/class/card1/tests/minimal.html ADDED
@@ -0,0 +1,33 @@
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>card1 test | U2 design-system</title>
8
+
9
+ <link rel=stylesheet href="../card1.css">
10
+
11
+ <body>
12
+
13
+ <section class="main">
14
+ <article class=u2-card1>
15
+ <img src="https://picsum.photos/800/400" width=800 height=400 style="padding:0" alt="image">
16
+ <h1>Card 1</h1>
17
+ <div class=-body>
18
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos porro pariatur ducimus aut?
19
+ Saepe vitae sequi doloribus perspiciatis quae?
20
+ </div>
21
+ <div style="background:#f8f8f8">
22
+ <div class=u2-flex style="justify-content:flex-end; row-gap:.5rem">
23
+ <button>button 1</button>
24
+ <button>button 2</button>
25
+ </div>
26
+ </div>
27
+ </article>
28
+ </section>
29
+
30
+ <style class="main">
31
+ .u2-card1 {
32
+ }
33
+ </style>