@litejs/ui 24.11.0 → 25.1.0

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

@@ -191,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,59 +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%; }
 
-
-.l12, .md .md-l12, .lg .md-l12, .lg .lg-l12 { left: 100%; }
-.l11, .md .md-l11, .lg .md-l11, .lg .lg-l11 { left: 91.6667%; }
-.l10, .md .md-l10, .lg .md-l10, .lg .lg-l10 { left: 83.3333%; }
-.l9,  .md .md-l9,  .lg .md-l9,  .lg .lg-l9  { left: 75%; }
-.l8,  .md .md-l8,  .lg .md-l8,  .lg .lg-l8  { left: 66.6667%; }
-.l7,  .md .md-l7,  .lg .md-l7,  .lg .lg-l7  { left: 58.3333%; }
-.l6,  .md .md-l6,  .lg .md-l6,  .lg .lg-l6  { left: 50%; }
-.l5,  .md .md-l5,  .lg .md-l5,  .lg .lg-l5  { left: 41.6667%; }
-.l4,  .md .md-l4,  .lg .md-l4,  .lg .lg-l4  { left: 33.3333%; }
-.l3,  .md .md-l3,  .lg .md-l3,  .lg .lg-l3  { left: 25%; }
-.l2,  .md .md-l2,  .lg .md-l2,  .lg .lg-l2  { left: 16.6667%; }
-.l1,  .md .md-l1,  .lg .md-l1,  .lg .lg-l1  { left: 8.3333%; }
-
-/*
-.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/el/Slider.tpl

@@ -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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "24.11.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.10.0",
-    "@litejs/dom": "24.8.0"
+    "@litejs/cli": "25.1.1",
+    "@litejs/dom": "25.1.0"
   }
 }

package/ui.js

@@ -11,7 +11,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	window.El = El
 	asEmitter(window.LiteJS = LiteJS)
 
-	var UNDEF, lastExp, parser, pushBase, styleNode
+	var UNDEF, parser, pushBase, styleNode
 	, NUL = null
 	, html = document.documentElement
 	, body = document.body
@@ -37,10 +37,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	, BIND_ATTR = "data-bind"
 	, elSeq = 0
 	, elCache = {}
-	, formatRe = /{((?:("|')(?:\\.|[^\\])*?\2|.)+?)}/g
-	, renderRe = /[;\s]*([-.\w$]+)(?:([ :!])((?:(["'\/])(?:\\.|[^\\])*?\4|[^;])*))?/g
+	, renderRe = /[;\s]*([-.\w$]+)(?:(!?)[ :]*((?:(["'\/])(?:\\.|[^\\])*?\4|[^;])*))?/g
 	, selectorRe = /([.#:[])([-\w]+)(?:([~^$*|]?)=(("|')(?:\\.|[^\\])*?\5|[-\w]+))?]?/g
-	, templateRe = /([ \t]*)(%?)((?:("|')(?:\\.|[^\\])*?\4|[-\w:.#[\]~^$*|]=?)*) ?([\/>+=@^;]|)(([\])}]?).*?([[({]?))(?=\x1f|\n|$)+/g
 	, fnCache = {}
 	, fnRe = /('|")(?:\\.|[^\\])*?\1|\/(?:\\.|[^\\])+?\/[gim]*|\$el\b|\$[aos]\b|\b(?:false|in|if|new|null|this|true|typeof|void|function|var|else|return)\b|\.\w+|\w+:/g
 	, wordRe = /[a-z_$][\w$]*/ig
@@ -68,10 +66,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		set: acceptMany(setAttr),
 		txt: elTxt,
 		val: elVal,
-		view: function(el, url) {
-			setAttr(el, "href", (pushBase || "#") + expand(url || ""))
-		}
 	}
+	, bindOnce = []
 	, globalScope = {
 		El: El,
 		$b: bindings
@@ -152,7 +148,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		el.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", href)
 	}
 	if (window.SVGElement) {
-		each("animate animateMotion animateTransform circle clipPath defs desc ellipse feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence filter foreignObject g image line linearGradient marker mask metadata mpath path pattern polygon polyline radialGradient rect script set stop svg switch symbol text textPath tspan use view", function(name) {
+		each("animate animateMotion animateTransform circle clipPath defs ellipse feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence g image line linearGradient marker mask mpath path pattern polygon polyline radialGradient rect set stop svg text textPath tspan use", function(name) {
 			elCache[name] = document.createElementNS("http://www.w3.org/2000/svg", name)
 		})
 		// a style title
@@ -205,6 +201,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 
 	function one(type, fn, scope) {
 		var emitter = this === window ? emptyArr : this
+
 		function remove() {
 			off.call(emitter, type, fn, scope)
 			off.call(emitter, type, remove, scope)
@@ -374,7 +371,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				render(view.o)
 				viewEmit(parent, "openChild", view, close)
 				viewEmit(view, "open", params)
+				/*** kb ***/
 				addKb(view.kb)
+				/**/
 				params._c = UNDEF
 			}
 			if ((params._d = params._v = view.c)) {
@@ -392,7 +391,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				viewClose(view.c)
 				elKill(view.o)
 				view.o = UNDEF
+				/*** kb ***/
 				rmKb(view.kb)
+				/**/
 				viewEmit(view, "close")
 			}
 		}
@@ -432,6 +433,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			var parent = El("div")
 			, stack = [-1]
 			, parentStack = []
+			, templateRe = /([ \t]*)(%?)((?:("|')(?:\\.|[^\\])*?\4|[-\w:.#[\]~^$*|]=?)*) ?([\/>=@^;]|)(([\])}]?).*?([[({]?))(?=\x1f|$)/gm
 
 			function work(all, indent, plugin, sel, q, op, text, mapEnd, mapStart, offset) {
 				if (offset && all === indent) return
@@ -466,8 +468,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 						append(parent, parent = El(sel))
 					}
 					if (text && op != "/") {
-						if (op === ">" || op === "+") {
-							replace(indent + (op === "+" ? text : " " + text), templateRe, work)
+						if (op === ">") {
+							replace(indent + " " + text, templateRe, work)
 						} else if (op === "=") {
 							append(parent, text) // + "\n")
 						} else {
@@ -539,7 +541,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			var params = $d.params = { _t: Date.now() }
 			, view = viewGet(url, params)
 			if (!view.o || lastUrl !== url) {
-				$d.url = lastExp = lastUrl = url
+				$d.url = lastUrl = expand(url)
 				viewPing(view, params)
 			}
 		}
@@ -896,9 +898,22 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 		})
 		function format(str, data, getter) {
-			return replace(str, formatRe, function(all, path) {
-				return getter(data, path, "")
-			})
+			for (var char, inQuote, inExpr, depth = 0, pos = 0, len = str.length; pos < len; ) {
+				char = str.charAt(pos++)
+				if (char == "'" || char == "\"") { // '"
+					inQuote = (!inExpr || char === inQuote) ? "" : char
+				} else if (inQuote) {
+					if (char == "\\") pos++
+				} else if (char == "{" && depth++ < 1) {
+					inExpr = pos
+				} else if (char == "}" && inExpr && --depth < 1) {
+					char = getter(data, str.slice(inExpr, pos - 1), "")
+					str = str.slice(0, inExpr - 1) + char + str.slice(pos)
+					pos = inExpr + char.length - 1
+					len = str.length
+				}
+			}
+			return str
 		}
 		function iGet(obj, path, fallback) {
 			return isStr(path) ? (
@@ -1093,9 +1108,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			},
 			"if": function(el, enabled) {
 				if (enabled) {
-					elReplace(el._if, el)
+					elReplace(el._r, el)
 				} else {
-					elReplace(el, el._if || (el._if = Comm("if", bind(render, el, el, this))))
+					elReplace(el, el._r || (el._r = Comm("if", bind(render, el, el, this))))
 					return true
 				}
 			},
@@ -1105,17 +1120,23 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				cls(el, el[prefix + opts], 0)
 				cls(el, el[prefix + opts] = match && prefix + match)
 			},
+			name: function(el, name) {
+				setAttr(el, "name", expand(name, 1))
+			},
 			ref: function(el, name) {
 				this[name] = el
 			},
 			$s: function(el) {
-				var scope = elScope(el, el)
+				var scope = this
 				each(slice.call(arguments, 1), function(args) {
 					each(args, function(arg, i) {
 						if (isStr(i)) scope[i] = arg
 						else scope[arg] = setAttr(el, arg, "")
 					})
 				})
+			},
+			view: function(el, url) {
+				setAttr(el, "href", (pushBase || "#") + expand(url || ""))
 			}
 		}),
 		$d: globalScope,
@@ -1128,8 +1149,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		hasClass: hasClass,
 		matches: matches,
 		nearest: nearest,
-		next: bind(walk, El, "nextSibling"),
-		prev: bind(walk, El, "previousSibling"),
 		rate: rate,
 		replace: elReplace,
 		scope: elScope,
@@ -1277,6 +1296,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			elRm(el)
 			if (el.nodeType < 2) {
 				el.$s = UNDEF
+				elKill(el._r) // Replacement element like comment from if binding
 				elEmpty(el)
 				if (el.valObject !== UNDEF) {
 					el.valObject = UNDEF
@@ -1398,20 +1418,16 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		, expr = node[attr] || (node[attr] = setAttr(node, attr, "") || true)
 		if (expr !== true) try {
 			fn = fnCache[expr] || (fnCache[expr] = makeFn(expr))
-			return fn(node, scope, attr, fn.o)
+			return fn(node, scope, attr, bindOnce)
 		} catch (e) {
 			throw e + "\n" + attr + ": " + expr
 		}
 	}
-	function makeFn(fn, raw) {
-		var i = 0
-		, bindOnce = []
+	function makeFn(fn, raw, i) {
 		fn = raw || "$s&&(" + replace(fn, renderRe, function(match, name, op, args) {
 			return (
-				(op === "!" && (bindOnce[i] = match)) ?
-				"($el[$a]=$el[$a].replace($o[" + (i++)+ "],''),0)||" :
-				""
-			) + "$b['" + (bindings[name] ? name + "'].call($s,$el" : "set']($el,'" + name + "'") + (args ? "," + replace(args, /^\s*(\w+) in /,"'$1',") : "") + ")||"
+				op ? "($el[$a]=$el[$a].replace($o[" + (i = bindOnce.indexOf(match), i < 0 ? bindOnce.push(match) - 1 : i)+ "],''),0)||" : ""
+			) + "$b['" + (bindings[name] ? name + "'].call($s" + (name == "$s" ? "=El.scope($el,$el)": "") + ",$el" : "set']($el,'" + name + "'") + (args ? "," + args : "") + ")||"
 		}) + "$r)"
 		var vars = replace(fn, fnRe, "").match(wordRe) || []
 		for (i = vars.length; i--; ) {
@@ -1419,7 +1435,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			else vars[i] += "=$s." + vars[i]
 		}
 		fn = Function("$el,$s,$a,$o,$r", (vars[0] ? "var " + vars : "") + ";return " + fn)
-		fn.o = bindOnce
 		return fn
 	}
 
@@ -1554,8 +1569,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		function touchWheel(e) {
 			// IE10 enabled pinch-to-zoom gestures from multi-touch trackpad’s as mousewheel event with ctrlKey.
 			// Chrome M35 and Firefox 55 followed up.
+			// alt+wheel may be OS level zoom, use shiftKey as alternative
 			if (!touches[0]) {
-				var ev = e.ctrlKey ? "pinch" : e.altKey ? "rotate" : UNDEF
+				var ev = e.ctrlKey ? "pinch" : e.altKey || e.shiftKey ? "rotate" : UNDEF
 				if (ev && emit(e.currentTarget || e.target, ev, e, e.deltaY/20, 0)) {
 					return eventStop(e)
 				}
@@ -1623,10 +1639,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function nearest(el, sel) {
 		return el ? find(el, sel) || nearest(el.parentNode, sel) : NUL
 	}
-	function walk(attr, el, sel) {
-		for (; el && !matches(el = el[attr], sel); );
-		return el
-	}
 	function acceptMany(fn, prepareVal) {
 		return function f(el, name, val, selector, delay, data) {
 			if (el && name) {
@@ -1672,9 +1684,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function blur() {
 		// IE8 can throw on accessing document.activeElement.
 		try {
-			var el = document.activeElement
-			, tag = el.tagName
-			if (tag === "A" || tag === "BUTTON") el.blur()
+			document.activeElement.blur()
 		} catch(e) {}
 	}
 	function camelFn(_, a) {
@@ -1687,13 +1697,14 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			else for (key in arr) if (hasOwn(arr, key)) fn.call(scope, arr[key], key, arr)
 		}
 	}
-	function expand(str) {
+	function expand(str, ns) {
 		var first = str.charAt(0)
 		, rest = str.slice(1)
+		, lastExp = expand[ns]
 		return (
 			first === "+" ? lastExp + rest :
 			first === "%" ? ((first = lastExp.lastIndexOf(rest.charAt(0))), (first > 0 ? lastExp.slice(0, first) : lastExp)) + rest :
-			(lastExp = str)
+			(expand[ns] = str)
 		)
 	}
 	function injectCss(cssText) {