@litejs/ui 24.7.0 → 25.1.0

package/README.md

@@ -11,12 +11,12 @@ LiteJS UI – [![Size][3]][4] [![Buy Me A Tea][5]][6]
 LiteJS UI is an old-school framework for high-quality web UIs,
 used on heavy-traffic websites since 2006.
 
- - Dependency-free, weighs around 20KB (+8KB polyfills for ancient browsers).
+ - Dependency-free, weighs around 25kB (+8kB polyfills for old browsers).
  - Written in ES5, compatible with all browsers (including IE5.5).
  - No transpiling/compiling/bundling headache, just write a working code.
 
-For usage instructions, see [wiki](https://github.com/litejs/ui/wiki)
-and [Quick-Start](https://github.com/litejs/litejs/wiki/Quick-Start) guide.
+For usage instructions, see [Quick-Start](https://github.com/litejs/litejs/wiki/Quick-Start) guide
+and [wiki](https://github.com/litejs/ui/wiki).
 
 
 ## Contributing

package/css/anim.css

@@ -0,0 +1,20 @@
+
+/**
+ *  1. Trigger GPU acceleration.
+ *     Remove first flicker on iphone.
+ */
+
+.anim,
+.anim:after,
+.anim:before {
+	-webkit-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+	   -moz-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+	     -o-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+	        transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+
+	-webkit-transform: translate3d(0, 0, 0);     /* 1 */
+	        transform: translate3d(0, 0, 0);
+	-webkit-perspective: 1000;
+	        perspective: 1000;
+}
+

package/css/base.css

@@ -17,7 +17,6 @@
 
 *, *:before, *:after {
 	color: inherit;
-	text-decoration: inherit;
 	-webkit-box-sizing: inherit;          /* 3 */
 	   -moz-box-sizing: inherit;
 	        box-sizing: inherit;
@@ -192,25 +191,6 @@ button,
 	white-space: nowrap;
 }
 
-/**
- *  1. Trigger GPU acceleration.
- *     Remove first flicker on iphone.
- */
-
-.anim,
-.anim:after,
-.anim:before {
-	-webkit-transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
-	   -moz-transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
-	     -o-transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
-	        transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
-
-	-webkit-transform: translate3d(0, 0, 0);     /* 1 */
-	        transform: translate3d(0, 0, 0);
-	-webkit-perspective: 1000;
-	        perspective: 1000;
-}
-
 .sm .sm-left,
 .md .md-left,
 .lg .lg-left,

package/css/grid-1of.css

@@ -23,3 +23,69 @@
 .h4of5, .md .md-h4of5, .lg .md-h4of5, .lg .lg-h4of5 { height: 80%; }
 /**/
 
+
+.w1-10 { width: 10%; }
+.w1-9 { width: 11.11%; }
+.w1-8 { width: 12.5%; }
+.w1-7 { width: 14.29%; }
+.w1-6 { width: 16.67%; }
+.w1-5 { width: 20%; }
+.w2-9 { width: 22.22%; }
+.w1-4 { width: 25%; }
+.w2-7 { width: 28.57%; }
+.w1-3 { width: 33.33%; }
+.w3-8 { width: 37.5%; }
+.w2-5 { width: 40%; }
+.w3-7 { width: 42.86%; }
+.w4-9 { width: 44.44%; }
+.w1-2 { width: 50%; }
+.w5-9 { width: 55.56%; }
+.w3-5 { width: 60%; }
+.w5-8 { width: 62.5%; }
+.w2-3 { width: 66.67%; }
+.w3-4 { width: 75%; }
+.w7-9 { width: 77.78%; }
+.w4-5 { width: 80%; }
+.w5-6 { width: 83.33%; }
+.w6-7 { width: 85.71%; }
+.w7-8 { width: 87.5%; }
+.w8-9 { width: 88.89%; }
+.w9-10 { width: 90%; }
+.w1-1 { width: 100%; }
+
+
+/*
+.w90, .md .md-w90, .lg .md-w90, .lg.lg .lg-w90 { width: 90%; }
+.w80, .md .md-w80, .lg .md-w80, .lg.lg .lg-w80 { width: 80%; }
+.w70, .md .md-w70, .lg .md-w70, .lg.lg .lg-w70 { width: 70%; }
+.w60, .md .md-w60, .lg .md-w60, .lg.lg .lg-w60 { width: 60%; }
+.w40, .md .md-w40, .lg .md-w40, .lg.lg .lg-w40 { width: 40%; }
+.w30, .md .md-w30, .lg .md-w30, .lg.lg .lg-w30 { width: 40%; }
+.w20, .md .md-w20, .lg .md-w20, .lg.lg .lg-w20 { width: 20%; }
+.w10, .md .md-w10, .lg .md-w10, .lg.lg .lg-w10 { width: 10%; }
+
+.h80, .md .md-h80, .lg .md-h80, .lg.lg .lg-h80 { height: 80%; }
+.h60, .md .md-h60, .lg .md-h60, .lg.lg .lg-h60 { height: 60%; }
+.h40, .md .md-h40, .lg .md-h40, .lg.lg .lg-h40 { height: 40%; }
+.h20, .md .md-h20, .lg .md-h20, .lg.lg .lg-h20 { height: 20%; }
+
+.l80, .md .md-l80, .lg .md-l80, .lg.lg .lg-l80 { left: 80%; }
+.l60, .md .md-l60, .lg .md-l60, .lg.lg .lg-l60 { left: 60%; }
+.l40, .md .md-l40, .lg .md-l40, .lg.lg .lg-l40 { left: 40%; }
+.l20, .md .md-l20, .lg .md-l20, .lg.lg .lg-l20 { left: 20%; }
+
+.col:first-child:nth-last-child(2), .col:first-child:nth-last-child(2) ~ .col {
+	width: 50%;
+}
+.col:first-child:nth-last-child(3), .col:first-child:nth-last-child(3) ~ .col {
+	width: 33.333%;
+}
+.col:first-child:nth-last-child(4), .col:first-child:nth-last-child(4) ~ .col {
+	width: 25%;
+}
+.col:first-child:nth-last-child(5), .col:first-child:nth-last-child(5) ~ .col {
+	width: 20%;
+}
+*/
+
+

package/css/grid.css

@@ -27,46 +27,43 @@ Expects box-sizing: border-box;
 }
 
 .col,
-.w12, .md .md-w12, .lg .md-w12, .lg .lg-w12 { width: 100%; }
-.w11, .md .md-w11, .lg .md-w11, .lg .lg-w11 { width: 91.6667%; }
-.w10, .md .md-w10, .lg .md-w10, .lg .lg-w10 { width: 83.3333%; }
-.w9 , .md .md-w9 , .lg .md-w9 , .lg .lg-w9  { width: 75%; }
-.w8 , .md .md-w8 , .lg .md-w8 , .lg .lg-w8  { width: 66.6667%; }
-.w7 , .md .md-w7 , .lg .md-w7 , .lg .lg-w7  { width: 58.3333%; }
-.w6 , .md .md-w6 , .lg .md-w6 , .lg .lg-w6  { width: 50%; }
-.w5 , .md .md-w5 , .lg .md-w5 , .lg .lg-w5  { width: 41.6667%; }
-.w4 , .md .md-w4 , .lg .md-w4 , .lg .lg-w4  { width: 33.3333%; }
-.w3 , .md .md-w3 , .lg .md-w3 , .lg .lg-w3  { width: 25%; }
-.w2 , .md .md-w2 , .lg .md-w2 , .lg .lg-w2  { width: 16.6667%; }
-.w1 , .md .md-w1 , .lg .md-w1 , .lg .lg-w1  { width: 8.3333%; }
+.w12, .md .md-w12, .lg .md-w12, .lg.lg .lg-w12 { width: 100%; }
+.w11, .md .md-w11, .lg .md-w11, .lg.lg .lg-w11 { width: 91.667%; }
+.w10, .md .md-w10, .lg .md-w10, .lg.lg .lg-w10 { width: 83.333%; }
+.w9 , .md .md-w9 , .lg .md-w9 , .lg.lg .lg-w9  { width: 75%; }
+.w8 , .md .md-w8 , .lg .md-w8 , .lg.lg .lg-w8  { width: 66.667%; }
+.w7 , .md .md-w7 , .lg .md-w7 , .lg.lg .lg-w7  { width: 58.333%; }
+.w6 , .md .md-w6 , .lg .md-w6 , .lg.lg .lg-w6  { width: 50%; }
+.w5 , .md .md-w5 , .lg .md-w5 , .lg.lg .lg-w5  { width: 41.667%; }
+.w4 , .md .md-w4 , .lg .md-w4 , .lg.lg .lg-w4  { width: 33.333%; }
+.w3 , .md .md-w3 , .lg .md-w3 , .lg.lg .lg-w3  { width: 25%; }
+.w2 , .md .md-w2 , .lg .md-w2 , .lg.lg .lg-w2  { width: 16.667%; }
+.w1 , .md .md-w1 , .lg .md-w1 , .lg.lg .lg-w1  { width: 8.333%; }
 
-.h12, .md .md-h12, .lg .md-h12, .lg .lg-h12 { height: 100%; }
-.h11, .md .md-h11, .lg .md-h11, .lg .lg-h11 { height: 91.6667%; }
-.h10, .md .md-h10, .lg .md-h10, .lg .lg-h10 { height: 83.3333%; }
-.h9 , .md .md-h9 , .lg .md-h9 , .lg .lg-h9  { height: 75%; }
-.h8 , .md .md-h8 , .lg .md-h8 , .lg .lg-h8  { height: 66.6667%; }
-.h7 , .md .md-h7 , .lg .md-h7 , .lg .lg-h7  { height: 58.3333%; }
-.h6 , .md .md-h6 , .lg .md-h6 , .lg .lg-h6  { height: 50%; }
-.h5 , .md .md-h5 , .lg .md-h5 , .lg .lg-h5  { height: 41.6667%; }
-.h4 , .md .md-h4 , .lg .md-h4 , .lg .lg-h4  { height: 33.3333%; }
-.h3 , .md .md-h3 , .lg .md-h3 , .lg .lg-h3  { height: 25%; }
-.h2 , .md .md-h2 , .lg .md-h2 , .lg .lg-h2  { height: 16.6667%; }
-.h1 , .md .md-h1 , .lg .md-h1 , .lg .lg-h1  { height: 8.3333%; }
+.h12, .md .md-h12, .lg .md-h12, .lg.lg .lg-h12 { height: 100%; }
+.h11, .md .md-h11, .lg .md-h11, .lg.lg .lg-h11 { height: 91.667%; }
+.h10, .md .md-h10, .lg .md-h10, .lg.lg .lg-h10 { height: 83.333%; }
+.h9 , .md .md-h9 , .lg .md-h9 , .lg.lg .lg-h9  { height: 75%; }
+.h8 , .md .md-h8 , .lg .md-h8 , .lg.lg .lg-h8  { height: 66.667%; }
+.h7 , .md .md-h7 , .lg .md-h7 , .lg.lg .lg-h7  { height: 58.333%; }
+.h6 , .md .md-h6 , .lg .md-h6 , .lg.lg .lg-h6  { height: 50%; }
+.h5 , .md .md-h5 , .lg .md-h5 , .lg.lg .lg-h5  { height: 41.667%; }
+.h4 , .md .md-h4 , .lg .md-h4 , .lg.lg .lg-h4  { height: 33.333%; }
+.h3 , .md .md-h3 , .lg .md-h3 , .lg.lg .lg-h3  { height: 25%; }
+.h2 , .md .md-h2 , .lg .md-h2 , .lg.lg .lg-h2  { height: 16.667%; }
+.h1 , .md .md-h1 , .lg .md-h1 , .lg.lg .lg-h1  { height: 8.333%; }
 
-
-/*
-.col:first-child:nth-last-child(2), .col:first-child:nth-last-child(2) ~ .col {
-	width: 50%;
-}
-.col:first-child:nth-last-child(3), .col:first-child:nth-last-child(3) ~ .col {
-	width: 33.333%;
-}
-.col:first-child:nth-last-child(4), .col:first-child:nth-last-child(4) ~ .col {
-	width: 25%;
-}
-.col:first-child:nth-last-child(5), .col:first-child:nth-last-child(5) ~ .col {
-	width: 20%;
-}
-*/
+.l12, .md .md-l12, .lg .md-l12, .lg.lg .lg-l12 { left: 100%; }
+.l11, .md .md-l11, .lg .md-l11, .lg.lg .lg-l11 { left: 91.667%; }
+.l10, .md .md-l10, .lg .md-l10, .lg.lg .lg-l10 { left: 83.333%; }
+.l9,  .md .md-l9,  .lg .md-l9,  .lg.lg .lg-l9  { left: 75%; }
+.l8,  .md .md-l8,  .lg .md-l8,  .lg.lg .lg-l8  { left: 66.667%; }
+.l7,  .md .md-l7,  .lg .md-l7,  .lg.lg .lg-l7  { left: 58.333%; }
+.l6,  .md .md-l6,  .lg .md-l6,  .lg.lg .lg-l6  { left: 50%; }
+.l5,  .md .md-l5,  .lg .md-l5,  .lg.lg .lg-l5  { left: 41.667%; }
+.l4,  .md .md-l4,  .lg .md-l4,  .lg.lg .lg-l4  { left: 33.333%; }
+.l3,  .md .md-l3,  .lg .md-l3,  .lg.lg .lg-l3  { left: 25%; }
+.l2,  .md .md-l2,  .lg .md-l2,  .lg.lg .lg-l2  { left: 16.667%; }
+.l1,  .md .md-l1,  .lg .md-l1,  .lg.lg .lg-l1  { left: 8.333%; }
 
 

package/css/spacing-4.css

@@ -1,37 +1,37 @@
 
-.p0, .p00, .p01, .p02, .p03, .p04 { padding-top:    0; padding-bottom:    0; }
-.p1, .p10, .p11, .p12, .p13, .p14 { padding-top:  4px; padding-bottom:  4px; }
-.p2, .p20, .p21, .p22, .p23, .p24 { padding-top:  8px; padding-bottom:  8px; }
-.p3, .p30, .p31, .p32, .p33, .p34 { padding-top: 12px; padding-bottom: 12px; }
-.p4, .p40, .p41, .p42, .p43, .p44 { padding-top: 16px; padding-bottom: 16px; }
+.p0,  .p01, .p02, .p03, .p04 { padding-top:    0; padding-bottom:    0; }
+.p10, .p1,  .p12, .p13, .p14 { padding-top:  4px; padding-bottom:  4px; }
+.p20, .p21, .p2,  .p23, .p24 { padding-top:  8px; padding-bottom:  8px; }
+.p30, .p31, .p32, .p3,  .p34 { padding-top: 12px; padding-bottom: 12px; }
+.p40, .p41, .p42, .p43, .p4  { padding-top: 16px; padding-bottom: 16px; }
 
-.p0, .p00, .p10, .p20, .p30, .p40 { padding-left:    0; padding-right:    0; }
-.p1, .p01, .p11, .p21, .p31, .p41 { padding-left:  4px; padding-right:  4px; }
-.p2, .p02, .p12, .p22, .p32, .p42 { padding-left:  8px; padding-right:  8px; }
-.p3, .p03, .p13, .p23, .p33, .p43 { padding-left: 12px; padding-right: 12px; }
-.p4, .p04, .p14, .p24, .p34, .p44 { padding-left: 16px; padding-right: 16px; }
+.p0,  .p10, .p20, .p30, .p40 { padding-left:    0; padding-right:    0; }
+.p01, .p1,  .p21, .p31, .p41 { padding-left:  4px; padding-right:  4px; }
+.p02, .p12, .p2,  .p32, .p42 { padding-left:  8px; padding-right:  8px; }
+.p03, .p13, .p23, .p3,  .p43 { padding-left: 12px; padding-right: 12px; }
+.p04, .p14, .p24, .p34, .p4  { padding-left: 16px; padding-right: 16px; }
 
-.m0, .m00, .m01, .m02, .m03, .m04 { margin-top:    0; margin-bottom:    0; }
-.m1, .m10, .m11, .m12, .m13, .m14 { margin-top:  4px; margin-bottom:  4px; }
-.m2, .m20, .m21, .m22, .m23, .m24 { margin-top:  8px; margin-bottom:  8px; }
-.m3, .m30, .m31, .m32, .m33, .m34 { margin-top: 12px; margin-bottom: 12px; }
-.m4, .m40, .m41, .m42, .m43, .m44 { margin-top: 16px; margin-bottom: 16px; }
+.m0,  .m01, .m02, .m03, .m04 { margin-top:    0; margin-bottom:    0; }
+.m10, .m1,  .m12, .m13, .m14 { margin-top:  4px; margin-bottom:  4px; }
+.m20, .m21, .m2,  .m23, .m24 { margin-top:  8px; margin-bottom:  8px; }
+.m30, .m31, .m32, .m3,  .m34 { margin-top: 12px; margin-bottom: 12px; }
+.m40, .m41, .m42, .m43, .m4  { margin-top: 16px; margin-bottom: 16px; }
 
-.m0, .m00, .m10, .m20, .m30, .m40 { margin-left:    0; margin-right:    0; }
-.m1, .m01, .m11, .m21, .m31, .m41 { margin-left:  4px; margin-right:  4px; }
-.m2, .m02, .m12, .m22, .m32, .m42 { margin-left:  8px; margin-right:  8px; }
-.m3, .m03, .m13, .m23, .m33, .m43 { margin-left: 12px; margin-right: 12px; }
-.m4, .m04, .m14, .m24, .m34, .m44 { margin-left: 16px; margin-right: 16px; }
+.m0,  .m10, .m20, .m30, .m40 { margin-left:    0; margin-right:    0; }
+.m01, .m1,  .m21, .m31, .m41 { margin-left:  4px; margin-right:  4px; }
+.m02, .m12, .m2,  .m32, .m42 { margin-left:  8px; margin-right:  8px; }
+.m03, .m13, .m23, .m3,  .m43 { margin-left: 12px; margin-right: 12px; }
+.m04, .m14, .m24, .m34, .m4  { margin-left: 16px; margin-right: 16px; }
 
 .grid.p1, .grid.p1 > .row > .col, .grid.p1 > .col { padding: 2px; }
 .grid.p2, .grid.p2 > .row > .col, .grid.p2 > .col { padding: 4px; }
 .grid.p3, .grid.p3 > .row > .col, .grid.p3 > .col { padding: 6px; }
 .grid.p4, .grid.p4 > .row > .col, .grid.p4 > .col { padding: 8px; }
-.grid.p1 > .grid, .grid.p2 > .grid, .grid.p3 > .grid, .grid.p4 > .grid { padding: 0; }
+.grid > .grid { padding: 0; }
 
 .grid.b1, .grid.b1 > .row > .col, .grid.b1 > .col { border: 2px solid transparent; }
 .grid.b2, .grid.b2 > .row > .col, .grid.b2 > .col { border: 4px solid transparent; }
 .grid.b3, .grid.b3 > .row > .col, .grid.b3 > .col { border: 6px solid transparent; }
 .grid.b4, .grid.b4 > .row > .col, .grid.b4 > .col { border: 8px solid transparent; }
-.grid.b1 > .grid, .grid.b2 > .grid, .grid.b3 > .grid, .grid.b4 > .grid { border: none; }
+.grid > .grid { border: none; }
 

package/el/Pie.tpl

@@ -70,7 +70,7 @@
 %svg Chart-line
 	g.Chart-line
 		;svgToLast
-		path ;svgLine: points, {radius: radius}
+		path ;svgLine points, {radius: radius}
 
 %svg Chart-axes
 	g.labels.x-labels

package/el/Slider.tpl

@@ -206,7 +206,7 @@
 			var diff = vert ? offset - e.pageY : e.pageX - offset
 			diff = (diff > maxPx ? maxPx : (diff < minPx ? minPx : diff))
 			set((diff / px) + min, e, diff)
-			return Event.stop(e)
+			return El.stop(e)
 		}
 		function stop(e) {
 			if (drag) {
@@ -263,7 +263,7 @@
 %el Toggle
 	label.Toggle.reset[tabindex=0]
 		input[type=checkbox].hide
-			;readonly: row && !row.write
-			;checked: model && (row && row.opts ? row.opts === model.get(row.path) : !!model.get(row.path))
+			;readonly! row && !row.write
+			;checked! model && (row && row.opts ? row.opts === model.get(row.path) : !!model.get(row.path))
 		.Toggle-knob.anim
 

package/el/dialog.ui

@@ -93,8 +93,8 @@
 		$$(".js-btn", el).on("click", resolve)
 		$ui.one("show", resolve)
 		if (scope.bgClose) El.on(el, "click", resolve)
-		El.on(el, "wheel", Event.stop)
-		El.on(el.lastChild, "click", Event.stop)
+		El.on(el, "wheel", El.stop)
+		El.on(el.lastChild, "click", El.stop)
 		if (scope.vibrate && navigator.vibrate) {
 			vibrate = navigator.vibrate(scope.vibrate)
 		}
@@ -138,7 +138,7 @@
 %el Dialog-numpad
 .row.js-numpad
 	@click ".btn", function(){}
-	;each: num in [1,2,3,4,5,6,7,8,9,"CLEAR",0]
+	;each! "num",[1,2,3,4,5,6,7,8,9,"CLEAR",0]
 	.col.w4>.btn {num}
 
 %js
@@ -149,21 +149,21 @@
 
 %el Dialog
 .Dialog.grid.p2.anim
-	.col.ts3 ;txt!_(title, map)
-	.col.js-body ;md!_(body, map)
+	.col.ts3 ;txt! _(title, map)
+	.col.js-body ;md! _(body, map)
 	.col
-		.group ;each: action in actions
+		.group ;each! action in actions
 			.btn.js-btn
-				;txt!_(action.title)
-				;class!"w" + (12/actions.length)
-				;nop: this.focus()
-				;set: "data-action", action.action
-				;class!"is-" + action.action, action.action
+				;txt! _(action.title)
+				;class! "w" + (12/actions.length)
+				;nop! this.focus()
+				;set! "data-action", action.action
+				;class! "is-" + action.action, action.action
 
 %el Modal
 .Modal.max.fix.anim
 	.Modal-bg.max.abs
 	.Modal-content.Modal--blur.grid.p2.anim
-		;cls!"Modal--blur",!1,1
+		;cls! "Modal--blur",!1,1
 		%slot
 

package/el/form.ui

@@ -160,7 +160,7 @@ label.row
 		%child
 		.input__hint
 			= _(description)
-			;if: description
+			;if! description
 
 %el Form-subheader
 .col
@@ -176,14 +176,14 @@ Form-row
 	input.field
 
 %el Form-ro
-Form-row>span ;txt: value
+Form-row>span ;txt! value
 
 %el Form-hidden
 div>input.field[type=hidden]
 
 %el Form-boolean
 Form-row
-	input.field[type=checkbox] ;value: value
+	input.field[type=checkbox] ;value! value
 
 %el Form-boolean-ro
 Form-row>span
@@ -206,9 +206,9 @@ Form-ro
 
 %el Form-enum
 Form-row
-	select.field ;each:val in $d["enum"]
+	select.field ;each! "val", $d["enum"]
 		option
-			;val:: val
+			;val! val
 			= _("" + val)
 
 %el Form-enum-ro
@@ -217,10 +217,10 @@ Form-ro
 %el Form-list
 Form-row
 	select.field
-		;list: api(resourceCollection.format(params, $d)), required ? 0 : [""], value
+		;list api(resourceCollection.format(params, $d)), required ? 0 : [""], value
 		option
-			;val:: item.id
-			;txt:: _(item.name)
+			;val! item.id
+			;txt! _(item.name)
 
 %el Form-list-ro
 Form-row>span
@@ -235,8 +235,8 @@ Form-row>span
 			= _(description)
 		.js-items.cf
 		a.btn.right
-			;if: !$d.noAdd
-			;txt: _($d.name + ".Add")
+			;if! !$d.noAdd
+			;txt! _($d.name + ".Add")
 			@click: $d.add
 
 %el Form-array-item
@@ -246,7 +246,7 @@ Form-row>span
 		;set "data-tooltip", _("Delete")
 		@click $d.del
 	b
-		;if: title
-		;txt: title
+		;if! title
+		;txt! title
 	.grid.b2.js-item
 

package/el/material.tpl

@@ -197,6 +197,7 @@
 	!function($ui) {
 		var menuTarget, menuEl, tipTarget, tipEl, tick, wait
 		, ripple = El(".waves-ripple")
+		, html = document.documentElement
 		El.near = near
 		function near(source, target, x, y, margin) {
 			var rect = target.getBoundingClientRect()
@@ -242,7 +243,7 @@
 				left: (left < 0 ? 0 : left) + "px"
 			})
 		}
-		El.on(document.body, "mouseover", onOver)
+		El.on(html, "mouseover", onOver)
 		El.on(window, "focusin", onOver)
 		$ui.on("show", closeTooltip)
 		function onOver(e) {
@@ -301,7 +302,7 @@
 		$ui.on("ping", closeMenu)
 		$ui.on("closeMenu", closeMenu)
 		$ui.on("showMenu", function(e, target, menu, x, y, margin) {
-			Event.stop(e)
+			El.stop(e)
 			var close = menuEl && menuTarget == target
 			closeMenu()
 			if (close) return
@@ -322,8 +323,8 @@
 				})
 			}
 		})
-		El.on(document.body, "click", closeMenu)
-		El.on(document.body, "pointerdown", pointerdown)
+		El.on(html, "click", closeMenu)
+		El.on(html, "pointerdown", pointerdown)
 		function pointerdown(e) {
 			var target = e.target
 			if (!El.hasClass(target, "waves") || target.disabled) return
@@ -346,7 +347,7 @@
 			end()
 			wait = 1
 			tick = setTimeout(end, 800)
-			El.one(document.body, "pointerup", end)
+			El.one(html, "pointerup", end)
 			ripple.offsetTop // force repaint
 			El.cls(ripple, "waves-ripple--play")
 		}

package/load.js

@@ -19,14 +19,14 @@
 
 
 !function(window, Function) {
-	xhr._s = new Date()
-	var rewrite = {
+	var initTime = xhr._t = +new Date()
+	, rewrite = {
 		//!{loadRewrite}
 	}
 	// Move setTimeout from window.prototype to window object for future patching in IE9.
 	, setTimeout_ = window.setTimeout = setTimeout
 	/*** debug ***/
-	// Expose xhr._c for tests.
+	// Expose xhr._c for testing.
 	, loaded = xhr._c = {}
 	/*/
 	, loaded = {}
@@ -56,38 +56,33 @@
 	, xhrs = []
 	/**/
 
+	, unsentLog = xhr._l = []
 	/*** onerror ***/
 	, lastError
-	, unsentErrors = xhr._e = []
 	, onerror = window.onerror = function(message, file, line, col, error) {
 		// Do not send multiple copies of the same error.
 		// file = document.currentScript.src || import.meta.url
 		if (lastError !== (lastError =
 			[ file
 			, line
-			, col || (window.event || unsentErrors).errorCharacter || "?"
+			, col || (window.event || unsentLog).errorCharacter || "?"
 			, message
 			].join(":")
-		) && 2 > unsentErrors.push(
-			[ +new Date()
-			, lastError
-			, error && (error.stack || error.stacktrace) || "-"
-			, "" + location
-			]
-		)) setTimeout_(sendErrors, 307)
-	}
-
-	function sendErrors() {
-		if (xhr.err) {
-			xhr.err(unsentErrors)
-		} else {
-			setTimeout_(sendErrors, 1307)
-		}
+		)) log("e", lastError, (error && (error.stack || error.stacktrace) || "-") + "\n" + location)
 	}
 	/*/
 	, onerror = nop
 	/**/
 
+	xhr.log = log
+	function log(type, msg, extra) {
+		if (unsentLog.push([ new Date() - initTime, type, msg, extra ]) < 2) sendLog()
+	}
+
+	function sendLog() {
+		setTimeout_(xhr.sendLog || sendLog, 1307)
+	}
+
 	// next === true is for sync call
 
 	window.xhr = xhr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "24.7.0",
+  "version": "25.1.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -12,21 +12,18 @@
   ],
   "homepage": "https://litejs.com",
   "repository": "github:litejs/ui",
-  "bugs": "https://github.com/litejs/dev/issues",
   "main": "ui.js",
   "files": [
     "*.js",
     "binding",
     "css",
-    "el",
-    "shim"
+    "el"
   ],
   "scripts": {
-    "lint": "jshint --config=.github/jshint.json *.js",
-    "test": "lj test test/index.js --tz='Europe/Tallinn' --brief --sources=load.js,require.js,index.js"
+    "test": "lj t"
   },
   "devDependencies": {
-    "@litejs/cli": "24.6.2",
-    "@litejs/dom": "24.7.0"
+    "@litejs/cli": "25.1.1",
+    "@litejs/dom": "25.1.0"
   }
 }

package/shim.js

@@ -377,6 +377,7 @@
 
 	b += "if(a.call(b,t[i],i,t))"
 	patch("filter",      b + "o.push(t[i])" + c)
+	patch("find",        b + "return t[i]")
 	patch("some",        b + "return!0;return!1")
 
 	patch("flat",        "return a<1?S.call(t):(b=t.concat.apply([],t))&&a>1&&b.some(X)?b.flat(a-1):b", 0, isArray)