u2ui 1.0.0 → 1.4.5

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 (591) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +36 -36
  3. package/attr/behavior/README.md +6 -4
  4. package/attr/behavior/behavior.js +265 -261
  5. package/attr/behavior/manifest.json +42 -42
  6. package/attr/confirm/README.md +8 -8
  7. package/attr/confirm/confirm.js +86 -90
  8. package/attr/confirm/manifest.json +42 -42
  9. package/attr/disableif/README.md +37 -0
  10. package/attr/disableif/disableif.js +59 -0
  11. package/attr/disableif/manifest.json +38 -0
  12. package/attr/draghandle/README.md +15 -15
  13. package/attr/draghandle/draghandle.js +24 -42
  14. package/attr/draghandle/manifest.json +30 -0
  15. package/attr/dropzone/README.md +32 -0
  16. package/attr/dropzone/dropzone.js +485 -0
  17. package/attr/dropzone/manifest.json +36 -0
  18. package/attr/focusgroup/README.md +9 -9
  19. package/attr/focusgroup/focusgroup.js +97 -100
  20. package/attr/focusgroup/manifest.json +30 -38
  21. package/attr/href/README.md +5 -5
  22. package/attr/href/href.js +50 -42
  23. package/attr/href/manifest.json +42 -42
  24. package/attr/intersect/README.md +15 -15
  25. package/attr/intersect/intersect.js +98 -98
  26. package/attr/intersect/manifest.json +44 -57
  27. package/attr/lightbox/README.md +27 -0
  28. package/attr/lightbox/lightbox.js +120 -0
  29. package/attr/lightbox/manifest.json +29 -0
  30. package/attr/movable/README.md +27 -0
  31. package/attr/movable/manifest.json +47 -0
  32. package/attr/movable/movable.js +111 -0
  33. package/attr/navigable/README.md +9 -9
  34. package/attr/navigable/TargetObserver.js +90 -91
  35. package/attr/navigable/U2TargetObserver.js +75 -75
  36. package/attr/navigable/manifest.json +34 -42
  37. package/attr/navigable/navigable.js +85 -87
  38. package/attr/parallax/README.md +10 -10
  39. package/attr/parallax/manifest.json +36 -0
  40. package/attr/parallax/parallax.js +119 -119
  41. package/attr/scrollspy/README.md +43 -0
  42. package/attr/scrollspy/manifest.json +28 -0
  43. package/attr/scrollspy/scrollspy.js +85 -0
  44. package/attr/selectable/README.md +42 -0
  45. package/attr/selectable/SelectionManager.js +171 -0
  46. package/attr/selectable/manifest.json +33 -0
  47. package/attr/selectable/selectable.js +28 -0
  48. package/attr/skin/README.md +15 -16
  49. package/attr/skin/manifest.json +40 -0
  50. package/attr/skin/skin.css +49 -50
  51. package/attr/store/README.md +41 -0
  52. package/attr/store/manifest.json +28 -0
  53. package/attr/store/store.js +62 -0
  54. package/class/badge/README.md +2 -2
  55. package/class/badge/badge.css +34 -34
  56. package/class/card/README.md +51 -0
  57. package/class/card/card.css +31 -0
  58. package/class/flex/README.md +16 -16
  59. package/class/flex/flex.css +15 -25
  60. package/class/grid/README.md +18 -18
  61. package/class/grid/grid.css +38 -40
  62. package/class/reset/README.md +6 -6
  63. package/class/reset/reset.css +8 -8
  64. package/class/table/README.md +22 -21
  65. package/class/table/table.css +125 -125
  66. package/class/unstyle/README.md +7 -5
  67. package/class/unstyle/unstyle.css +14 -12
  68. package/class/width/README.md +18 -18
  69. package/class/width/width.css +21 -22
  70. package/css/README.md +11 -0
  71. package/css/base/README.md +8 -2
  72. package/css/base/base.css +153 -127
  73. package/css/base/beta.css +34 -50
  74. package/css/base/full.css +5 -5
  75. package/css/base/nomotion.css +8 -8
  76. package/css/base/print.css +36 -36
  77. package/css/classless/README.md +10 -4
  78. package/css/classless/aria.css +51 -64
  79. package/css/classless/classless.css +118 -124
  80. package/css/classless/full.css +11 -11
  81. package/css/classless/more.css +314 -340
  82. package/css/classless/simple.css +314 -103
  83. package/css/classless/snippeds/a/icons.css +66 -12
  84. package/css/classless/snippeds/a/tests.html +118 -0
  85. package/css/classless/snippeds/blockquote/big-quotes.css +36 -0
  86. package/css/classless/snippeds/blockquote/tests.html +62 -0
  87. package/css/classless/snippeds/button/square.css +22 -0
  88. package/css/classless/snippeds/button/tests.html +53 -0
  89. package/css/classless/snippeds/experiments/aria-header-nav-dropdown.css +46 -0
  90. package/css/classless/snippeds/hr/gradient.css +2 -2
  91. package/css/classless/snippeds/hr/section_sign.css +16 -16
  92. package/css/classless/snippeds/hr/tests.html +49 -49
  93. package/css/classless/snippeds/p/indent.css +9 -0
  94. package/css/classless/snippeds/p/initial.css +9 -0
  95. package/css/classless/snippeds/p/tests.html +60 -0
  96. package/css/classless/variables.css +132 -99
  97. package/css/norm/README.md +7 -1
  98. package/css/norm/beta.css +41 -39
  99. package/css/norm/norm.css +89 -98
  100. package/css/norm/oldies.css +71 -60
  101. package/css/{classes → utils}/README.md +10 -4
  102. package/css/{classes/classes.css → utils/utils.css} +78 -78
  103. package/el/accordion/README.md +60 -59
  104. package/el/accordion/accordion.css +11 -7
  105. package/el/accordion/accordion.js +211 -258
  106. package/el/accordion/manifest.json +44 -57
  107. package/el/alert/README.md +86 -67
  108. package/el/alert/alert.css +72 -73
  109. package/el/alert/alert.js +206 -187
  110. package/el/alert/manifest.json +59 -77
  111. package/el/breadcrumb/README.md +41 -0
  112. package/el/breadcrumb/breadcrumb.css +22 -0
  113. package/el/breadcrumb/breadcrumb.js +119 -0
  114. package/el/breadcrumb/manifest.json +42 -0
  115. package/el/buttongroup/README.md +36 -36
  116. package/el/buttongroup/buttongroup.css +38 -30
  117. package/el/buttongroup/buttongroup.js +68 -56
  118. package/el/buttongroup/manifest.json +28 -0
  119. package/el/bytes/README.md +4 -4
  120. package/el/bytes/bytes.css +6 -6
  121. package/el/bytes/bytes.js +98 -97
  122. package/el/bytes/manifest.json +90 -95
  123. package/el/calendar/README.md +64 -0
  124. package/el/calendar/calendar.css +36 -0
  125. package/el/calendar/calendar.js +391 -0
  126. package/el/calendar/ext/drag.js +69 -0
  127. package/el/calendar/ext/keyNavigation.js +101 -0
  128. package/el/calendar/manifest.json +69 -0
  129. package/el/carousel/README.md +14 -14
  130. package/el/carousel/carousel.css +45 -46
  131. package/el/carousel/carousel.js +398 -371
  132. package/el/carousel/manifest.json +44 -58
  133. package/el/carousel-nav/README.md +13 -14
  134. package/el/carousel-nav/carousel-nav.js +74 -74
  135. package/el/carousel-nav/manifest.json +31 -0
  136. package/el/chart/README.md +46 -0
  137. package/el/chart/chart.css +7 -0
  138. package/el/chart/chart.js +188 -0
  139. package/el/chart/engines/apexcharts.js +103 -0
  140. package/el/chart/engines/billboard.js +79 -0
  141. package/el/chart/engines/chart.js.js +32 -0
  142. package/el/chart/engines/chartist.js +74 -0
  143. package/el/chart/engines/echarts.js +65 -0
  144. package/el/chart/engines/frappe.js +49 -0
  145. package/el/chart/engines/nvd3.js +139 -0
  146. package/el/chart/engines/plotly.js +73 -0
  147. package/el/chart/manifest.json +54 -0
  148. package/el/code/README.md +21 -21
  149. package/el/code/code.css +46 -46
  150. package/el/code/code.js +291 -289
  151. package/el/code/manifest.json +59 -66
  152. package/el/cookiebanner/README.md +70 -0
  153. package/el/cookiebanner/cookiebanner.css +42 -0
  154. package/el/cookiebanner/cookiebanner.js +161 -0
  155. package/el/cookiebanner/extensions/googleConsentMode.js +36 -0
  156. package/el/cookiebanner/knownItems.js +291 -0
  157. package/el/cookiebanner/manifest.json +85 -0
  158. package/el/cookiebanner/ui.js +426 -0
  159. package/el/copy/README.md +9 -7
  160. package/el/copy/copy.css +3 -3
  161. package/el/copy/copy.js +89 -117
  162. package/el/copy/manifest.json +37 -49
  163. package/el/counter/README.md +12 -9
  164. package/el/counter/counter.css +8 -8
  165. package/el/counter/counter.js +96 -95
  166. package/el/counter/manifest.json +50 -59
  167. package/el/drawer/README.md +35 -0
  168. package/el/drawer/drawer.css +77 -0
  169. package/el/drawer/drawer.js +166 -0
  170. package/el/drawer/manifest.json +27 -0
  171. package/el/fields/README.md +34 -0
  172. package/el/fields/fields.css +5 -0
  173. package/el/fields/fields.js +133 -0
  174. package/el/fields/manifest.json +32 -0
  175. package/el/ico/README.md +119 -118
  176. package/el/ico/debug.js +86 -0
  177. package/el/ico/font/Font Awesome.css +22 -22
  178. package/el/ico/font/LigatureSymbols.css +7 -7
  179. package/el/ico/font/Material Icons.css +6 -6
  180. package/el/ico/font/RemixFilled.css +8 -8
  181. package/el/ico/font/RemixOutlined.css +8 -8
  182. package/el/ico/font/old/anicons.css +31 -31
  183. package/el/ico/font/old/devicons.css +210 -210
  184. package/el/ico/font/old/material.all.css +36 -36
  185. package/el/ico/font/old/remix.css +15 -15
  186. package/el/ico/font/old/utf8.css +54 -54
  187. package/el/ico/ico.css +122 -110
  188. package/el/ico/ico.js +163 -189
  189. package/el/ico/manifest.json +68 -86
  190. package/el/input/README.md +41 -39
  191. package/el/input/input.css +95 -35
  192. package/el/input/input.js +682 -331
  193. package/el/input/manifest.json +54 -0
  194. package/el/maintitlebar/README.md +39 -0
  195. package/el/maintitlebar/maintitlebar.css +40 -0
  196. package/el/maintitlebar/maintitlebar.js +17 -0
  197. package/el/maintitlebar/manifest.json +32 -0
  198. package/el/masonry/README.md +19 -19
  199. package/el/masonry/manifest.json +49 -60
  200. package/el/masonry/masonry.css +27 -27
  201. package/el/masonry/masonry.js +93 -92
  202. package/el/menubutton/README.md +39 -0
  203. package/el/menubutton/manifest.json +44 -0
  204. package/el/{splitbutton/splitbutton.css → menubutton/menubutton.css} +51 -47
  205. package/el/menubutton/menubutton.js +90 -0
  206. package/el/number/README.md +9 -6
  207. package/el/number/manifest.json +162 -121
  208. package/el/number/number.css +6 -6
  209. package/el/number/number.js +67 -67
  210. package/el/out/README.md +5 -5
  211. package/el/out/manifest.json +26 -38
  212. package/el/out/out.css +2 -2
  213. package/el/out/out.js +42 -59
  214. package/el/pagination/README.md +32 -0
  215. package/el/pagination/manifest.json +47 -0
  216. package/el/pagination/pagination.css +27 -0
  217. package/el/pagination/pagination.js +147 -0
  218. package/el/parallax-bg/README.md +26 -6
  219. package/el/parallax-bg/manifest.json +32 -0
  220. package/el/parallax-bg/parallax-bg.css +13 -13
  221. package/el/parallax-bg/parallax-bg.js +197 -186
  222. package/el/qrcode/README.md +7 -7
  223. package/el/qrcode/manifest.json +32 -43
  224. package/el/qrcode/package.json +22 -22
  225. package/el/qrcode/qrcode.css +13 -13
  226. package/el/qrcode/qrcode.js +53 -45
  227. package/el/rating/README.md +9 -20
  228. package/el/rating/manifest.json +52 -65
  229. package/el/rating/rating.css +10 -10
  230. package/el/rating/rating.js +148 -139
  231. package/el/responsive/README.md +43 -0
  232. package/el/responsive/manifest.json +41 -0
  233. package/el/responsive/responsive.css +4 -0
  234. package/el/responsive/responsive.js +143 -0
  235. package/el/rte/README.md +10 -10
  236. package/el/rte/manifest.json +33 -0
  237. package/el/rte/rte.css +9 -9
  238. package/el/rte/rte.js +56 -56
  239. package/el/skeleton/README.md +3 -3
  240. package/el/skeleton/manifest.json +37 -51
  241. package/el/skeleton/skeleton.css +67 -60
  242. package/el/skeleton/skeleton.js +71 -72
  243. package/el/splitpanel/README.md +33 -13
  244. package/el/splitpanel/manifest.json +36 -49
  245. package/el/splitpanel/splitpanel.css +20 -17
  246. package/el/splitpanel/splitpanel.js +117 -116
  247. package/el/spot/README.md +36 -0
  248. package/el/spot/manifest.json +55 -0
  249. package/el/spot/spot.css +23 -0
  250. package/el/spot/spot.js +106 -0
  251. package/el/system/README.md +29 -0
  252. package/el/system/demoHtml.html +660 -0
  253. package/el/system/manifest.json +32 -0
  254. package/el/system/styler.js +661 -0
  255. package/el/system/system.js +84 -0
  256. package/el/table/README.md +80 -68
  257. package/el/table/ext/autoFormatTable.js +228 -0
  258. package/el/table/manifest.json +32 -43
  259. package/el/table/table.css +4 -59
  260. package/el/table/table.js +468 -194
  261. package/el/tabs/README.md +17 -17
  262. package/el/tabs/manifest.json +44 -59
  263. package/el/tabs/tabs.css +22 -22
  264. package/el/tabs/tabs.js +192 -210
  265. package/el/textfit/README.md +7 -7
  266. package/el/textfit/manifest.json +33 -45
  267. package/el/textfit/textfit.css +5 -5
  268. package/el/textfit/textfit.js +80 -80
  269. package/el/time/README.md +6 -5
  270. package/el/time/manifest.json +79 -118
  271. package/el/time/time.js +179 -168
  272. package/el/toc/README.md +27 -0
  273. package/el/toc/manifest.json +36 -0
  274. package/el/toc/toc.css +3 -0
  275. package/el/toc/toc.js +85 -0
  276. package/el/tooltip/README.md +13 -10
  277. package/el/tooltip/manifest.json +56 -69
  278. package/el/tooltip/tooltip.css +100 -97
  279. package/el/tooltip/tooltip.js +146 -82
  280. package/el/tree/README.md +133 -0
  281. package/el/tree/ext/dnd.js +53 -0
  282. package/el/tree/ext/item.js +35 -0
  283. package/el/tree/manifest.json +61 -0
  284. package/el/tree/tree.css +18 -0
  285. package/el/tree/tree.js +236 -0
  286. package/el/typewriter/README.md +11 -11
  287. package/el/typewriter/manifest.json +45 -66
  288. package/el/typewriter/typewriter.css +6 -6
  289. package/el/typewriter/typewriter.js +161 -166
  290. package/el/video/README.md +37 -0
  291. package/el/video/manifest.json +96 -0
  292. package/el/video/video.js +550 -0
  293. package/js/Placer/Placer.js +156 -156
  294. package/js/Placer/README.md +14 -16
  295. package/js/PointerObserver/PointerObserver-no-scroll.js +146 -0
  296. package/js/PointerObserver/PointerObserver.js +161 -130
  297. package/js/PointerObserver/README.md +6 -7
  298. package/js/SelectorObserver/README.md +9 -9
  299. package/js/SelectorObserver/SelectorObserver.js +199 -200
  300. package/js/Tour/README.md +56 -0
  301. package/js/Tour/Tour.js +156 -0
  302. package/js/contextmenu/README.md +6 -31
  303. package/js/contextmenu/contextmenu.js +338 -336
  304. package/js/dialog/README.md +8 -7
  305. package/js/dialog/dialog.js +228 -261
  306. package/js/drag/README.md +28 -0
  307. package/js/drag/drag.js +38 -0
  308. package/js/drag/indicateDrop.js +80 -0
  309. package/js/loading/README.md +24 -0
  310. package/js/loading/loading.js +139 -0
  311. package/js/navigator/README.md +26 -0
  312. package/js/navigator/navigator.js +430 -0
  313. package/js/navigator/url-change-event.js +29 -0
  314. package/js/rte/README.md +13 -14
  315. package/js/rte/old/NodeCleaner.js +315 -315
  316. package/js/rte/old/Rte/Rte.ui.mjs +154 -154
  317. package/js/rte/old/Rte/index.mjs +5 -5
  318. package/js/rte/old/Rte/main.css +189 -189
  319. package/js/rte/old/old.rte.js +131 -131
  320. package/js/rte/old/range-selection.old.js +394 -394
  321. package/js/rte/rte.js +7 -7
  322. package/js/rte/src/behavior.js +228 -228
  323. package/js/rte/src/events.js +73 -73
  324. package/js/rte/src/fixes.js +250 -250
  325. package/js/rte/src/range.js +469 -472
  326. package/js/rte/src/rte.js +71 -71
  327. package/js/rte/src/ui/items/ai.js +166 -167
  328. package/js/rte/src/ui/items/code.js +93 -93
  329. package/js/rte/src/ui/items/undo.js +183 -183
  330. package/js/rte/src/ui.items.js +6 -7
  331. package/js/rte/src/ui.js +268 -268
  332. package/js/rte/src/util/indentHtml.js +21 -15
  333. package/js/serviceWorker/README.md +17 -0
  334. package/js/serviceWorker/serviceWorker.js +84 -0
  335. package/js/serviceWorker/sw.js +221 -0
  336. package/js/shortcut/README.md +6 -6
  337. package/js/shortcut/shortcut.js +53 -89
  338. package/package.json +9 -8
  339. package/theme/brutalist/README.md +10 -0
  340. package/theme/brutalist/theme.css +98 -0
  341. package/theme/elegance/README.md +10 -0
  342. package/theme/elegance/theme.css +120 -0
  343. package/theme/luxury/README.md +10 -0
  344. package/theme/luxury/theme.css +107 -0
  345. package/theme/minimalism/README.md +10 -0
  346. package/theme/minimalism/theme.css +103 -0
  347. package/theme/natur/README.md +10 -0
  348. package/theme/natur/theme.css +101 -0
  349. package/theme/pastell/README.md +10 -0
  350. package/theme/pastell/theme.css +99 -0
  351. package/theme/pop/README.md +10 -0
  352. package/theme/pop/theme.css +101 -0
  353. package/theme/prompt.css +175 -0
  354. package/theme/retro/README.md +10 -0
  355. package/theme/retro/theme.css +99 -0
  356. package/theme/soft/README.md +10 -0
  357. package/theme/soft/theme.css +84 -0
  358. package/theme/tech/README.md +10 -0
  359. package/theme/tech/theme.css +98 -0
  360. package/theme/test/README.md +10 -0
  361. package/theme/test/theme.css +109 -0
  362. package/theme/test.html +284 -0
  363. package/theme/tmp/README.md +10 -0
  364. package/theme/tmp/theme.css +323 -0
  365. package/u2/auto.js +156 -161
  366. package/u2/auto.ui.js +82 -85
  367. package/u2/plan-scoped-refactoring.md +236 -0
  368. package/u2/projects.json +757 -467
  369. package/u2/tools/baseElement.js +217 -95
  370. package/u2/tools/baseElement.test.html +139 -119
  371. package/u2/tools/ce-inspector.js +307 -307
  372. package/u2/tools/ce-inspector.test.html +67 -65
  373. package/u2/tools/ce-manfest-from-element.js +207 -207
  374. package/u2/tools/dev-iframe.js +212 -213
  375. package/u2/tools/dev-iframe.test.html +72 -74
  376. package/u2/tools/eventsExplorer.js +102 -101
  377. package/u2/tools/logo/u1.svg +9 -9
  378. package/u2/tools/promiseElementById.js +14 -0
  379. package/u2/tools/update.repos.json.js +259 -234
  380. package/u2/tools/update.skill.js +176 -0
  381. package/u2/tools/variable-styler.js +317 -0
  382. package/u2/u2.js +30 -14
  383. package/u2/utils.js +61 -59
  384. package/.htaccess +0 -7
  385. package/attr/behavior/tests/minimal.html +0 -19
  386. package/attr/behavior/tests/test.html +0 -98
  387. package/attr/confirm/tests/minimal.html +0 -23
  388. package/attr/confirm/tests/test.html +0 -79
  389. package/attr/draghandle/tests/minimal.html +0 -44
  390. package/attr/focusgroup/tests/minimal.html +0 -27
  391. package/attr/focusgroup/tests/test.html +0 -154
  392. package/attr/href/tests/minimal.html +0 -17
  393. package/attr/href/tests/test.html +0 -70
  394. package/attr/intersect/tests/minimal.html +0 -30
  395. package/attr/intersect/tests/test.html +0 -64
  396. package/attr/navigable/tests/U1TargetObserver.html +0 -56
  397. package/attr/navigable/tests/minimal.html +0 -17
  398. package/attr/navigable/tests/targetObserver.html +0 -106
  399. package/attr/navigable/tests/test.html +0 -84
  400. package/attr/parallax/tests/minimal.html +0 -25
  401. package/attr/parallax/tests/performance.html +0 -102
  402. package/attr/parallax/tests/test.html +0 -108
  403. package/attr/skin/tests/minimal.html +0 -34
  404. package/attr/skin/tests/test.html +0 -96
  405. package/class/badge/tests/minimal.html +0 -17
  406. package/class/badge/tests/test.html +0 -112
  407. package/class/card1/README.md +0 -45
  408. package/class/card1/card1.css +0 -30
  409. package/class/card1/tests/minimal.html +0 -33
  410. package/class/card1/tests/test.html +0 -78
  411. package/class/flex/tests/minimal.html +0 -31
  412. package/class/flex/tests/test.html +0 -58
  413. package/class/grid/tests/minimal.html +0 -34
  414. package/class/grid/tests/test.html +0 -78
  415. package/class/input/README.md +0 -49
  416. package/class/input/input.css +0 -33
  417. package/class/input/tests/minimal.html +0 -39
  418. package/class/input/tests/test.html +0 -29
  419. package/class/reset/tests/minimal.html +0 -23
  420. package/class/table/tests/minimal.html +0 -40
  421. package/class/table/tests/test.html +0 -226
  422. package/class/unstyle/tests/minimal.html +0 -22
  423. package/class/unstyle/tests/test.html +0 -32
  424. package/class/width/tests/minimal.html +0 -27
  425. package/class/width/tests/test.html +0 -101
  426. package/css/base/tests/nomotion.html +0 -89
  427. package/css/base/tests/test.html +0 -539
  428. package/css/classes/tests/test.html +0 -63
  429. package/css/classless/snippeds/experiments/conventions.css +0 -41
  430. package/css/classless/tests/aria.html +0 -101
  431. package/css/classless/tests/foreign/classless-almond.css.html +0 -445
  432. package/css/classless/tests/foreign/classless-classless.css.html +0 -831
  433. package/css/classless/tests/foreign/classless-mvp.html +0 -415
  434. package/css/classless/tests/foreign/classless.sakura.html +0 -224
  435. package/css/classless/tests/foreign/stylestage.dev.html +0 -304
  436. package/css/classless/tests/foreign/test-homogenizer.html +0 -433
  437. package/css/classless/tests/foreign/test-html5-elements-tester.html +0 -956
  438. package/css/classless/tests/foreign/test-opinionated_css.html +0 -148
  439. package/css/classless/tests/list-bullet.html +0 -110
  440. package/css/classless/tests/more.html +0 -246
  441. package/css/classless/tests/oklch.experiments.html +0 -280
  442. package/css/classless/tests/test.html +0 -106
  443. package/css/classless/tests/variables.html +0 -109
  444. package/css/norm/tests/test.html +0 -434
  445. package/css/norm/tests/test.js +0 -103
  446. package/el/accordion/tests/minimal.html +0 -44
  447. package/el/accordion/tests/test.html +0 -168
  448. package/el/alert/alert copy.js +0 -224
  449. package/el/alert/tests/minimal.html +0 -36
  450. package/el/alert/tests/test.html +0 -105
  451. package/el/buttongroup/tests/minimal.html +0 -31
  452. package/el/buttongroup/tests/test.html +0 -83
  453. package/el/bytes/tests/minimal.html +0 -19
  454. package/el/bytes/tests/test.html +0 -117
  455. package/el/carousel/tests/experiments.html +0 -77
  456. package/el/carousel/tests/minimal.html +0 -31
  457. package/el/carousel/tests/nested.html +0 -54
  458. package/el/carousel/tests/test.html +0 -136
  459. package/el/carousel-nav/tests/minimal.html +0 -32
  460. package/el/carousel-nav/tests/test.html +0 -59
  461. package/el/code/tests/minimal.html +0 -35
  462. package/el/code/tests/test.html +0 -162
  463. package/el/copy/tests/minimal.html +0 -21
  464. package/el/copy/tests/test.html +0 -75
  465. package/el/counter/tests/minimal.html +0 -27
  466. package/el/counter/tests/test.html +0 -106
  467. package/el/ico/tests/combinations.html +0 -86
  468. package/el/ico/tests/emojis.html +0 -213
  469. package/el/ico/tests/fonts.html +0 -110
  470. package/el/ico/tests/ico-directory.html +0 -254
  471. package/el/ico/tests/minimal.html +0 -46
  472. package/el/ico/tests/test.html +0 -210
  473. package/el/ico/tests/util-multi.svg +0 -6
  474. package/el/ico/tests/util.css +0 -2
  475. package/el/ico/tests/util.js +0 -110
  476. package/el/input/tests/formParticipation.html +0 -113
  477. package/el/input/tests/minimal.html +0 -33
  478. package/el/input/tests/test.html +0 -258
  479. package/el/masonry/tests/minimal.html +0 -39
  480. package/el/masonry/tests/test.html +0 -42
  481. package/el/number/tests/minimal.html +0 -25
  482. package/el/number/tests/test.html +0 -138
  483. package/el/out/tests/minimal.html +0 -25
  484. package/el/out/tests/test.html +0 -37
  485. package/el/parallax-bg/tests/bg.jpg +0 -0
  486. package/el/parallax-bg/tests/bg1.jpg +0 -0
  487. package/el/parallax-bg/tests/bg2.jpg +0 -0
  488. package/el/parallax-bg/tests/demo.html +0 -88
  489. package/el/parallax-bg/tests/minimal.html +0 -30
  490. package/el/parallax-bg/tests/test.html +0 -64
  491. package/el/parallax-bg/tests/visible.html +0 -90
  492. package/el/qrcode/tests/minimal.html +0 -26
  493. package/el/qrcode/tests/test.html +0 -31
  494. package/el/rating/tests/minimal.html +0 -26
  495. package/el/rating/tests/tests.html +0 -77
  496. package/el/rte/tests/minimal.html +0 -25
  497. package/el/rte/tests/test.html +0 -37
  498. package/el/skeleton/tests/minimal.html +0 -22
  499. package/el/skeleton/tests/test.html +0 -22
  500. package/el/splitbutton/README.md +0 -39
  501. package/el/splitbutton/splitbutton.js +0 -26
  502. package/el/splitbutton/tests/minimal.html +0 -30
  503. package/el/splitbutton/tests/test.html +0 -68
  504. package/el/splitpanel/tests/minimal.html +0 -31
  505. package/el/splitpanel/tests/tests.html +0 -121
  506. package/el/table/tests/minimal.html +0 -38
  507. package/el/table/tests/test.html +0 -108
  508. package/el/tabs/tests/minimal.html +0 -35
  509. package/el/tabs/tests/test.html +0 -180
  510. package/el/textfit/tests/minimal.html +0 -25
  511. package/el/textfit/tests/test.html +0 -26
  512. package/el/time/tests/minimal.html +0 -19
  513. package/el/time/tests/test.html +0 -160
  514. package/el/time/time copy.js +0 -141
  515. package/el/time/time.old.uhtml.js +0 -129
  516. package/el/tooltip/tests/minimal.html +0 -25
  517. package/el/tooltip/tests/test.html +0 -178
  518. package/el/tree1/README.md +0 -111
  519. package/el/tree1/manifest.json +0 -78
  520. package/el/tree1/tests/animated.html +0 -134
  521. package/el/tree1/tests/custom.html +0 -51
  522. package/el/tree1/tests/minimal.html +0 -44
  523. package/el/tree1/tests/test.html +0 -260
  524. package/el/tree1/tree1.css +0 -26
  525. package/el/tree1/tree1.js +0 -265
  526. package/el/typewriter/tests/minimal.html +0 -25
  527. package/el/typewriter/tests/test.html +0 -78
  528. package/js/Placer/tests/minimal.html +0 -34
  529. package/js/Placer/tests/test.html +0 -49
  530. package/js/PointerObserver/tests/minimal.html +0 -29
  531. package/js/PointerObserver/tests/test.html +0 -35
  532. package/js/SelectorObserver/tests/minimal.html +0 -21
  533. package/js/SelectorObserver/tests/test.html +0 -57
  534. package/js/SelectorObserver/tests/tests.html +0 -161
  535. package/js/contextmenu/tests/minimal.html +0 -44
  536. package/js/contextmenu/tests/test.html +0 -131
  537. package/js/dialog/tests/minimal.html +0 -29
  538. package/js/dialog/tests/notification.mp3 +0 -0
  539. package/js/dialog/tests/test.html +0 -135
  540. package/js/rte/tests/ai.html +0 -81
  541. package/js/rte/tests/behavior.html +0 -88
  542. package/js/rte/tests/events.html +0 -69
  543. package/js/rte/tests/fixes.html +0 -95
  544. package/js/rte/tests/minimal.html +0 -34
  545. package/js/rte/tests/notes.md +0 -6
  546. package/js/rte/tests/range.html +0 -167
  547. package/js/rte/tests/selection-explorer.html +0 -222
  548. package/js/rte/tests/test.html +0 -92
  549. package/js/shortcut/tests/minimal.html +0 -23
  550. package/js/shortcut/tests/test.html +0 -68
  551. package/u2/experiments/Waiter/test.html +0 -132
  552. package/u2/experiments/getElementByIdPromise/test.html +0 -76
  553. package/u2/experiments/patchInputValue.html +0 -124
  554. package/u2/experiments/radiobutton/test.html +0 -75
  555. package/u2/experiments/tests/test.html +0 -223
  556. package/u2/experiments/u1-responsive/responsive.js +0 -62
  557. package/u2/experiments/u1-responsive/test.html +0 -65
  558. package/u2/experiments/u2Element.js +0 -139
  559. package/u2/experiments/u2Element.test.html +0 -47
  560. package/u2/old-stuff/IterableWeakMap/mod.js +0 -70
  561. package/u2/old-stuff/css/onStyleSheet/mod.js +0 -114
  562. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +0 -28
  563. package/u2/old-stuff/css/onStyleSheet/test/include.css +0 -19
  564. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +0 -6
  565. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +0 -3
  566. package/u2/old-stuff/css/onStyleSheet/test/test.html +0 -48
  567. package/u2/old-stuff/css/parser/mod.js +0 -182
  568. package/u2/old-stuff/css/parser/parser_old/mod.js +0 -128
  569. package/u2/old-stuff/css/parser/parser_old/test.html +0 -43
  570. package/u2/old-stuff/css/parser/parser_old/util.js +0 -22
  571. package/u2/old-stuff/css/parser/style.html +0 -52
  572. package/u2/old-stuff/css/parser/test.html +0 -38
  573. package/u2/old-stuff/el/ai-texter/README.md +0 -23
  574. package/u2/old-stuff/el/ai-texter/ai-texter.css +0 -12
  575. package/u2/old-stuff/el/ai-texter/ai-texter.js +0 -153
  576. package/u2/old-stuff/el/ai-texter/tests/minimal.html +0 -47
  577. package/u2/old-stuff/el/ai-texter/tests/test.html +0 -71
  578. package/u2/old-stuff/init.js +0 -38
  579. package/u2/old-stuff/markHashLinks.js +0 -51
  580. package/u2/old-stuff/onElement/mod.js +0 -73
  581. package/u2/old-stuff/test-helpers/mod.js +0 -36
  582. package/u2/old-stuff/test-helpers/test.html +0 -4
  583. package/u2/old-stuff/tests/init.js.html +0 -51
  584. package/u2/old-stuff/viewport.js +0 -64
  585. package/u2/tests/boilerplate.html +0 -46
  586. package/u2/tests/kacheln.html +0 -245
  587. package/u2/tests/showcase.html +0 -270
  588. package/u2/tests/showcase2.html +0 -157
  589. package/u2/tests/test-init.js +0 -35
  590. package/u2/tests/test.html +0 -355
  591. package/u2/tools/logo/u1ui.svg +0 -6
@@ -1,56 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <title></title>
7
-
8
- <link rel=stylesheet href="../../../css/classless/full.css">
9
- <link rel=stylesheet href="../../../css/classless/simple.css">
10
- <script type=module async src="../../../u2/tests/test-init.js"></script>
11
-
12
- <body>
13
-
14
- <section>
15
- <h1>Details</h1>
16
-
17
- <button onclick="toggleParam('details1', true)">open</button>
18
- <button onclick="toggleParam('details1', false)">close</button>
19
- <button onclick="toggleParam('details1', null)">toggle</button>
20
- <button onclick="toggleParam('details1', null, true)">toggle, no browser-back-history</button>
21
-
22
- <details u2-navigable id=details1>
23
- <summary>summary 1</summary>
24
- More rext
25
- </details>
26
- <details u2-navigable id=details2>
27
- <summary>summary 2</summary>
28
- More rext
29
- </details>
30
-
31
-
32
- </section>
33
-
34
- <script type=module>
35
-
36
- import {U2TargetObserver, toggleParam} from "../U2TargetObserver.js";
37
- window.toggleParam = toggleParam;
38
-
39
-
40
- new U2TargetObserver({
41
- on: el => el.open = true,
42
- off: el => el.open = false,
43
- matches:'details[u2-navigable]',
44
- });
45
-
46
- addEventListener('toggle',e=>{
47
- const el = e.target;
48
- if (!el.matches('details[u2-navigable][id]')) return;
49
- if (el.open) {
50
- toggleParam(el.id, true);
51
- } else {
52
- toggleParam(el.id, false);
53
- }
54
- },true);
55
-
56
- </script>
@@ -1,17 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang=en>
3
- <head>
4
- <meta charset=utf-8>
5
- <meta name=viewport content="width=device-width">
6
-
7
- <script src="../navigable.js" type=module async></script>
8
-
9
- <body>
10
-
11
- <section class="main">
12
- Link to navigable dialog:<br>
13
- <a href="#navigable">open</a>
14
- <dialog u2-navigable id=navigable>
15
- go back using esc or your browser's back button
16
- </dialog>
17
- </section>
@@ -1,106 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <title></title>
7
-
8
- <link rel=stylesheet href="../../../css/classless/full.css">
9
- <link rel=stylesheet href="../../../css/classless/simple.css">
10
-
11
- <script src="../TargetObserver.js" type=module async></script>
12
-
13
- <body>
14
-
15
- <section>
16
- <h1>Dialog</h1>
17
- <a href="#dialog1">navigate to #dialog1</a>
18
- <!--todo: button onclick="dialog1.showModal()">open by javascript</button-->
19
-
20
- <dialog id="dialog1" u2-navigable>
21
- dialog 1 is open
22
- <br>
23
- <a href="#dialog2">navigate to #dialog2</a>
24
- </dialog>
25
-
26
- <dialog id="dialog2" u2-navigable>
27
- dialog 2 is open
28
- </dialog>
29
-
30
- </section>
31
-
32
- <script type=module>
33
- import {TargetObserver} from "../TargetObserver.js";
34
-
35
- /* dialog element */
36
- new TargetObserver({
37
- in: el => {
38
- !el.open && el.showModal()
39
- },
40
- out: el => {
41
- el.close()
42
- },
43
- matches: 'dialog[u2-navigable]',
44
- });
45
-
46
- addEventListener('close',e=>{
47
- const target = e.target;
48
- if (!target.id) return;
49
- if (e.target.id !== location.hash.substring(1)) return;
50
- if (!target.matches('dialog[u2-navigable]')) return;
51
-
52
- history.back();
53
- e.preventDefault();
54
- },true);
55
-
56
-
57
- /* divs */
58
- new TargetObserver({
59
- out: el => {
60
- el.hidden = true;
61
- },
62
- in: el => {
63
- el.hidden = false;
64
- },
65
- matches: '.div',
66
- });
67
-
68
- /* all */
69
- setTimeout(function(){ // test if it trigger after target changed
70
- let obs = new TargetObserver({
71
- on: el => console.log('on',el),
72
- off: el => console.log('off',el)
73
- });
74
-
75
- },1000)
76
- </script>
77
-
78
- <section>
79
- <h1>Details</h1>
80
-
81
- <a href="#div1">open div1</a><br>
82
- <a href="#div2">open div2 (should also open div1)</a>
83
-
84
- <div id="div1" hidden class="div">
85
- div 1
86
- <div id="div2" hidden class="div">
87
- div 2
88
- now open div 3
89
- </div>
90
- </div>
91
-
92
- <br>
93
-
94
- <a href="#div3">open div3</a><br>
95
-
96
- <div id="div3" hidden class="div">div 3</div>
97
-
98
- <style>
99
- .div {
100
- background:yellow;
101
- border: 1px solid;
102
- padding: 10px;
103
- margin: 10px;
104
- }
105
- </style>
106
- </section>
@@ -1,84 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width">
6
- <title>Attribute u2-href tests</title>
7
-
8
- <link rel=stylesheet href="../../../css/classless/full.css">
9
- <link rel=stylesheet href="../../../css/classless/simple.css">
10
- <script type=module async src="../../../u2/tests/test-init.js"></script>
11
-
12
- <script src="../navigable.js" type=module async></script>
13
-
14
- <body>
15
-
16
- <section>
17
- <h1>Dialog</h1>
18
- <a href="#dialog1">navigate to #dialog1</a>
19
- <!-- <br>
20
- <button onclick="dialog1.showModal()">open by javascript</button>
21
- <br>
22
- <a href="#dialog2">navigate to #dialog2 (nested)</a> -->
23
-
24
- <dialog id="dialog1" u2-navigable>
25
- dialog 1 is open
26
- <br>
27
- <a href="#dialog2">navigate to #dialog2</a>
28
-
29
- <dialog id="dialog2" u2-navigable>
30
- dialog 2 is open
31
- </dialog>
32
-
33
- <section>
34
- <h1>Checkbox</h1>
35
- <input type=checkbox u2-navigable id=checkbox1>
36
- <input type=checkbox u2-navigable id=checkbox2>
37
- <input type=checkbox u2-navigable id=checkbox3>
38
- </section>
39
-
40
- <section>
41
- <h1>Radiobutton</h1>
42
- <input type=radio u2-navigable name=radio1 id=radio1>
43
- <input type=radio u2-navigable name=radio1 id=radio2>
44
- <input type=radio u2-navigable name=radio1 id=radio3>
45
- </section>
46
-
47
-
48
- <button onclick="this.parentNode.close()">close</button>
49
- </dialog>
50
-
51
-
52
- </section>
53
-
54
-
55
-
56
- <section>
57
- <h1>Details</h1>
58
-
59
- <a href="#details1">navigate to #details1</a>
60
- <!-- todo: <button onclick="dialog1.showModal()">open by javascript</button> -->
61
- <details u2-navigable id=details1>
62
- <summary>summary 1</summary>
63
- More text
64
- </details>
65
- <details u2-navigable id=details2>
66
- <summary>summary 2</summary>
67
- More text
68
- </details>
69
- <div>search the word "more" in browser search. Details should open and url should be changed (chromium for now)</div>
70
-
71
- </section>
72
-
73
- <!-- Ergänzung für Popover-Element -->
74
- <section>
75
- <h1>Popover</h1>
76
- <a href="#popover1">Toggle Popover (href)</a>
77
- <br>
78
- <button popovertarget="popover1">Toggle Popover (popovertarget)</button>
79
- <div id=popover1 popover u2-navigable>
80
- <p>Popover content</p>
81
- <button popovertarget="popover1" popovertargetaction="hide">Close</button>
82
- </div>
83
- </section>
84
-
@@ -1,25 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang=en>
3
- <head>
4
- <meta charset=utf-8>
5
- <meta name=viewport content="width=device-width">
6
- <title>counter element test | 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
- <body>
12
-
13
- <section class=main>
14
- <div u2-parallax style="--u2-parallax-speed:1.1;">faster</div>
15
- <div u2-parallax style="--u2-parallax-speed:1;">parallax</div>
16
- <div u2-parallax style="--u2-parallax-speed:0.9;">slower</div>
17
- </section>
18
-
19
- <style class=main>
20
- [u2-parallax] {
21
- background:var(--color-light);
22
- display:inline-block;
23
- padding:.5rem;
24
- }
25
- </style>
@@ -1,102 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <meta charset="utf-8">
4
- <meta name=viewport content="width=device-width">
5
- <script src="../../../u2/tests/test-init.js" type=module async></script>
6
-
7
- <script src="../parallax.js" type=module async></script>
8
- <style>
9
- body, html {
10
- margin:0;
11
- height:100%;
12
- font-size: calc(12px + 1vmax);
13
- font-family:arial;
14
- }
15
- h1 {
16
- margin:0;
17
- }
18
- #bg {
19
- height:100%;
20
- }
21
- #bg > span {
22
- z-index:-1;
23
- position:absolute;
24
- background:red;
25
- width:2em;
26
- height:2em;
27
- box-shadow:0 0 10px black;
28
- border-radius:20px;
29
- contain:strict;
30
- }
31
- #bg > span::after {
32
- content:'gix';
33
- }
34
- #logo {
35
- height:100vh;
36
- display:flex;
37
- justify-content: center;
38
- align-items: center;
39
- gap:.5em;
40
- font-size:calc(16px + 1vw);
41
- }
42
- #logo > span {
43
- flex-basis:3em;
44
- height:3em;
45
- display:flex;
46
- justify-content: center;
47
- align-items: center;
48
- color: white;
49
- color:black;
50
- border:1px solid black;
51
-
52
- }
53
- #logo :nth-child(1) { --u2-parallax-speed:1.3; background-color:#79BBE8; }
54
- #logo :nth-child(2) { --u2-parallax-speed:1.2; background-color:#7EE2F2; }
55
- #logo :nth-child(3) { --u2-parallax-speed:1.1; background-color:#7CDBCF; }
56
- #logo :nth-child(4) { --u2-parallax-speed:1.0; background-color:#7EF2C2; }
57
- #logo :nth-child(5) { --u2-parallax-speed:0.9; background-color:#79E89A; }
58
-
59
- </style>
60
- <script type=module>
61
- for (let i=400; i>0; i--) {
62
- var span = document.createElement('span')
63
- span.setAttribute('u2-parallax', true);
64
- let speed = Math.random();
65
- span.style.setProperty('--u2-parallax-speed', speed);
66
- span.style.setProperty('opacity', speed+.1);
67
- span.style.setProperty('left', Math.random()*100+'%');
68
- span.style.setProperty('top', Math.random()*100+'%');
69
- span.style.width = (5 + (speed * 50)) + 'px';
70
- span.style.height = (5 + (speed * 50)) + 'px';
71
- span.style.zIndex = -Math.floor((1-speed) * 100);
72
- const colors = ['#79BBE8','#7EE2F2','#7CDBCF','#7EF2C2','#79E89A'];
73
- const index = Math.floor(Math.random() * colors.length)
74
- span.style.backgroundColor = colors[index];
75
- bg.append(span)
76
- }
77
- </script>
78
- </head>
79
- <body>
80
-
81
- <div id=bg>
82
- <h1 id=logo>
83
- <span u2-parallax>P</span>
84
- <span u2-parallax>A</span>
85
- <span u2-parallax>R</span>
86
- <span u2-parallax>A</span>
87
- <span u2-parallax>X</span>
88
- </h1>
89
- </div>
90
-
91
-
92
- <div style="max-width:800px; margin:4em auto; padding:2em; background:rgba(255,255,255,.8); border:1px solid">
93
- <h2>How to use</h2>
94
- <p>Include the script from...</p>
95
- <p>Add the attribute "u2-parallax" to each element you like to change the speed.</p>
96
- <pre>&lt;span u2-parallax style="--u2-parallax-speed:2"&gt;
97
- I am twice as fast
98
- &lt;/span&gt;</pre>
99
- </div>
100
-
101
-
102
- <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>
@@ -1,108 +0,0 @@
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>
@@ -1,34 +0,0 @@
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>
@@ -1,96 +0,0 @@
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>
@@ -1,17 +0,0 @@
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>