@pageboard/html 0.10.14 → 0.10.17

package/elements/card.js

@@ -18,7 +18,7 @@ exports.cards = {
 		shape: {
 			title: 'Shape',
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'Default',
 			}, {
 				const: "square",
@@ -33,9 +33,8 @@ exports.cards = {
 		},
 		responsive: {
 			title: 'Responsive',
-			nullable: true,
 			anyOf: [{
-				title: 'Disable',
+				title: 'No',
 				const: null
 			}, {
 				title: 'Stackable',

package/elements/form.js

@@ -92,7 +92,7 @@ exports.api_form = {
 					title: 'Method',
 					nullable: true,
 					type: "string",
-					pattern: "^(\\w+\\.\\w+)?$"
+					pattern: /^(\w+\.\w+)?$/.source
 				},
 				parameters: {
 					title: 'Parameters',

package/elements/grid.js

@@ -17,8 +17,10 @@ exports.grid = {
 		},
 		responsive: {
 			title: 'Responsive',
-			nullable: true,
 			anyOf: [{
+				title: 'No',
+				const: null
+			}, {
 				title: 'Stackable',
 				const: 'stackable'
 			}, {
@@ -67,9 +69,8 @@ exports.grid_row = {
 	properties: {
 		responsive: {
 			title: 'Responsive',
-			nullable: true,
 			anyOf: [{
-				title: 'Disable',
+				title: 'No',
 				const: null
 			}, {
 				title: 'Stackable',

package/elements/image.js

@@ -12,8 +12,9 @@ exports.image = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {
@@ -156,8 +157,9 @@ exports.inlineImage = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {

package/elements/inputs.js

@@ -156,8 +156,8 @@ exports.input_text = {
 		nodes: 'inline*'
 	},
 	patterns: {
-		tel: '^(\\(\\d+\\))? *\\d+([ .\\-]?\\d+)*$',
-		email: '^[\\w.!#$%&\'*+\\/=?^`{|}~-]+@\\w(?:[\\w-]{0,61}\\w)?(?:\\.\\w(?:[\\w-]{0,61}\\w)?)*$'
+		tel: /^(\(\d+\))? *\d+([ .\-]?\d+)*$/.source,
+		email: /^[\w.!#$%&'*+\/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
 	},
 	html: `<div class="[width|num: wide] field [type|eq:hidden:hidden:]">
 		<label block-content="label">Label</label>

package/elements/layout.js

@@ -106,8 +106,9 @@ exports.layout = {
 				image: {
 					title: 'Image',
 					description: 'Local or remote URL',
-					nullable: true,
 					anyOf: [{
+						type: "null"
+					}, {
 						type: "string",
 						format: "uri"
 					}, {
@@ -168,7 +169,7 @@ exports.layout = {
 				size: {
 					title: 'Size',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Auto'
 					}, {
 						const: 'cover',
@@ -181,7 +182,7 @@ exports.layout = {
 				position: {
 					title: 'Position',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Top Left'
 					}, {
 						const: 'top center',
@@ -212,7 +213,7 @@ exports.layout = {
 				repeat: {
 					title: 'Repeat',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Repeat'
 					}, {
 						const: 'no-repeat',
@@ -234,7 +235,7 @@ exports.layout = {
 				attachment: {
 					title: 'Attachment',
 					anyOf: [{
-						type: 'null',
+						const: null,
 						title: 'Local'
 					}, {
 						const: 'scroll',

package/elements/media.js

@@ -8,8 +8,9 @@ exports.video = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {
@@ -88,8 +89,9 @@ exports.audio = {
 		url: {
 			title: 'Address',
 			description: 'Local or remote URL',
-			nullable: true,
 			anyOf: [{
+				type: "null"
+			}, {
 				type: "string",
 				format: "uri"
 			}, {

package/elements/menu.js

@@ -9,7 +9,6 @@ exports.menu = {
 	properties: {
 		direction: {
 			title: 'Direction',
-			nullable: true,
 			anyOf: [{
 				const: null,
 				title: "Horizontal"
@@ -37,7 +36,6 @@ exports.menu_group = {
 	properties: {
 		position: {
 			title: 'Position',
-			nullable: true,
 			anyOf: [{
 				const: null,
 				title: "Left"
@@ -153,7 +151,6 @@ exports.menu_item_dropdown = {
 	properties: {
 		position: {
 			title: 'Position',
-			nullable: true,
 			anyOf: [{
 				const: null,
 				title: "Left"

package/elements/page.js

@@ -16,9 +16,8 @@ exports.page.properties.transition = {
 	properties: {
 		close: {
 			title: 'Close',
-			nullable: true,
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'None'
 			}, {
 				const: 'tr-up',
@@ -39,9 +38,8 @@ exports.page.properties.transition = {
 		},
 		open: {
 			title: 'Open',
-			nullable: true,
 			anyOf: [{
-				type: 'null',
+				const: null,
 				title: 'None'
 			}, {
 				const: 'tr-up',

package/elements/paragraph.js

@@ -128,7 +128,7 @@ exports.heading = {
 		id: {
 			nullable: true,
 			type: 'string',
-			pattern: '^[a-z0-9-]*$'
+			pattern: /^[a-z0-9-]*$/.source
 		}
 	},
 	contents: {

package/elements/rating.js

@@ -27,7 +27,7 @@ exports.rating = {
 			title: 'Color',
 			anyOf: [{
 				title: 'Default',
-				type: 'null'
+				const: null
 			}, {
 				title: 'Star',
 				const: "star"

package/lib/nouislider.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.noUiSlider = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
     exports.PipsMode = void 0;
     (function (PipsMode) {
@@ -127,7 +127,7 @@
                 : doc.body.scrollTop;
         return {
             x: x,
-            y: y
+            y: y,
         };
     }
     // we provide a function to compute constants instead
@@ -140,18 +140,18 @@
             ? {
                 start: "pointerdown",
                 move: "pointermove",
-                end: "pointerup"
+                end: "pointerup",
             }
             : window.navigator.msPointerEnabled
                 ? {
                     start: "MSPointerDown",
                     move: "MSPointerMove",
-                    end: "MSPointerUp"
+                    end: "MSPointerUp",
                 }
                 : {
                     start: "mousedown touchstart",
                     move: "mousemove touchmove",
-                    end: "mouseup touchend"
+                    end: "mouseup touchend",
                 };
     }
     // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
@@ -163,7 +163,7 @@
             var opts = Object.defineProperty({}, "passive", {
                 get: function () {
                     supportsPassive = true;
-                }
+                },
             });
             // @ts-ignore
             window.addEventListener("test", null, opts);
@@ -384,18 +384,18 @@
                 stepBefore: {
                     startValue: this.xVal[j - 2],
                     step: this.xNumSteps[j - 2],
-                    highestStep: this.xHighestCompleteStep[j - 2]
+                    highestStep: this.xHighestCompleteStep[j - 2],
                 },
                 thisStep: {
                     startValue: this.xVal[j - 1],
                     step: this.xNumSteps[j - 1],
-                    highestStep: this.xHighestCompleteStep[j - 1]
+                    highestStep: this.xHighestCompleteStep[j - 1],
                 },
                 stepAfter: {
                     startValue: this.xVal[j],
                     step: this.xNumSteps[j],
-                    highestStep: this.xHighestCompleteStep[j]
-                }
+                    highestStep: this.xHighestCompleteStep[j],
+                },
             };
         };
         Spectrum.prototype.countStepDecimals = function () {
@@ -481,7 +481,7 @@
         to: function (value) {
             return value === undefined ? "" : value.toFixed(2);
         },
-        from: Number
+        from: Number,
     };
     var cssClasses = {
         target: "target",
@@ -519,12 +519,12 @@
         valueVertical: "value-vertical",
         valueNormal: "value-normal",
         valueLarge: "value-large",
-        valueSub: "value-sub"
+        valueSub: "value-sub",
     };
     // Namespaces of internal event listeners
     var INTERNAL_EVENT_NS = {
         tooltips: ".__tooltips",
-        aria: ".__aria"
+        aria: ".__aria",
     };
     //endregion
     function testStep(parsed, entry) {
@@ -714,6 +714,7 @@
         var hover = entry.indexOf("hover") >= 0;
         var unconstrained = entry.indexOf("unconstrained") >= 0;
         var dragAll = entry.indexOf("drag-all") >= 0;
+        var smoothSteps = entry.indexOf("smooth-steps") >= 0;
         if (fixed) {
             if (parsed.handles !== 2) {
                 throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles");
@@ -728,10 +729,11 @@
             tap: tap || snap,
             drag: drag,
             dragAll: dragAll,
+            smoothSteps: smoothSteps,
             fixed: fixed,
             snap: snap,
             hover: hover,
-            unconstrained: unconstrained
+            unconstrained: unconstrained,
         };
     }
     function testTooltips(parsed, entry) {
@@ -817,7 +819,7 @@
             animate: true,
             animationDuration: 300,
             ariaFormat: defaultFormatter,
-            format: defaultFormatter
+            format: defaultFormatter,
         };
         // Tests are executed in the order they are presented here.
         var tests = {
@@ -844,7 +846,7 @@
             documentElement: { r: false, t: testDocumentElement },
             cssPrefix: { r: true, t: testCssPrefix },
             cssClasses: { r: true, t: testCssClasses },
-            handleAttributes: { r: false, t: testHandleAttributes }
+            handleAttributes: { r: false, t: testHandleAttributes },
         };
         var defaults = {
             connect: false,
@@ -856,7 +858,7 @@
             cssClasses: cssClasses,
             keyboardPageMultiplier: 5,
             keyboardMultiplier: 1,
-            keyboardDefaultStep: 10
+            keyboardDefaultStep: 10,
         };
         // AriaFormat defaults to regular format, if any.
         if (options.format && !options.ariaFormat) {
@@ -888,7 +890,7 @@
         // Pips don't move, so we can place them using left/top.
         var styles = [
             ["left", "top"],
-            ["right", "bottom"]
+            ["right", "bottom"],
         ];
         parsed.style = styles[parsed.dir][parsed.ort];
         return parsed;
@@ -1273,7 +1275,7 @@
             var format = pips.format || {
                 to: function (value) {
                     return String(Math.round(value));
-                }
+                },
             };
             scope_Pips = scope_Target.appendChild(addMarking(spread, filter, format));
             return scope_Pips;
@@ -1472,6 +1474,14 @@
                     scope_Body.removeEventListener("selectstart", preventDefault);
                 }
             }
+            if (options.events.smoothSteps) {
+                data.handleNumbers.forEach(function (handleNumber) {
+                    setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false);
+                });
+                data.handleNumbers.forEach(function (handleNumber) {
+                    fireEvent("update", handleNumber);
+                });
+            }
             data.handleNumbers.forEach(function (handleNumber) {
                 fireEvent("change", handleNumber);
                 fireEvent("set", handleNumber);
@@ -1509,21 +1519,21 @@
                 pageOffset: event.pageOffset,
                 handleNumbers: data.handleNumbers,
                 buttonsProperty: event.buttons,
-                locations: scope_Locations.slice()
+                locations: scope_Locations.slice(),
             });
             var endEvent = attachEvent(actions.end, scope_DocumentElement, eventEnd, {
                 target: event.target,
                 handle: handle,
                 listeners: listeners,
                 doNotReject: true,
-                handleNumbers: data.handleNumbers
+                handleNumbers: data.handleNumbers,
             });
             var outEvent = attachEvent("mouseout", scope_DocumentElement, documentLeave, {
                 target: event.target,
                 handle: handle,
                 listeners: listeners,
                 doNotReject: true,
-                handleNumbers: data.handleNumbers
+                handleNumbers: data.handleNumbers,
             });
             // We want to make sure we pushed the listeners in the listener list rather than creating
             // a new one as it has already been passed to the event handlers.
@@ -1668,7 +1678,7 @@
                     // These events are only bound to the visual handle
                     // element, not the 'real' origin element.
                     attachEvent(actions.start, handle.children[0], eventStart, {
-                        handleNumbers: [index]
+                        handleNumbers: [index],
                     });
                 });
             }
@@ -1679,7 +1689,7 @@
             // Fire hover events
             if (behaviour.hover) {
                 attachEvent(actions.move, scope_Base, eventHover, {
-                    hover: true
+                    hover: true,
                 });
             }
             // Make the range draggable.
@@ -1710,7 +1720,7 @@
                         attachEvent(actions.start, eventHolder, eventStart, {
                             handles: handlesToDrag,
                             handleNumbers: handleNumbersToDrag,
-                            connect: connect
+                            connect: connect,
                         });
                     });
                 });
@@ -1771,7 +1781,7 @@
             });
         }
         // Split out the handle positioning logic so the Move event can use it, too
-        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue) {
+        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) {
             var distance;
             // For sliders with multiple handles, limit movement to the other handle.
             // Apply the margin option by adding it to the handle positions.
@@ -1810,7 +1820,9 @@
                     to = Math.min(to, distance);
                 }
             }
-            to = scope_Spectrum.getStep(to);
+            if (!smoothSteps) {
+                to = scope_Spectrum.getStep(to);
+            }
             // Limit percentage to the 0 - 100 range
             to = limit(to);
             // Return false if handle can't move
@@ -1830,6 +1842,7 @@
             var proposals = locations.slice();
             // Store first handle now, so we still have it in case handleNumbers is reversed
             var firstHandle = handleNumbers[0];
+            var smoothSteps = options.events.smoothSteps;
             var b = [!upward, upward];
             var f = [upward, !upward];
             // Copy handleNumbers so we don't change the dataset
@@ -1842,7 +1855,7 @@
             // Step 1: get the maximum percentage that any of the handles can move
             if (handleNumbers.length > 1) {
                 handleNumbers.forEach(function (handleNumber, o) {
-                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false);
+                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps);
                     // Stop if one of the handles can't move.
                     if (to === false) {
                         proposal = 0;
@@ -1860,7 +1873,8 @@
             var state = false;
             // Step 2: Try to set the handles with the found percentage
             handleNumbers.forEach(function (handleNumber, o) {
-                state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state;
+                state =
+                    setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state;
             });
             // Step 3: If a handle moved, fire events
             if (state) {
@@ -1905,9 +1919,9 @@
         }
         // Test suggested values and apply margin, step.
         // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436)
-        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput) {
+        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) {
             if (!exactInput) {
-                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false);
+                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps);
             }
             if (to === false) {
                 return false;
@@ -2059,7 +2073,7 @@
             if (options.snap) {
                 return [
                     value - nearbySteps.stepBefore.startValue || null,
-                    nearbySteps.stepAfter.startValue - value || null
+                    nearbySteps.stepAfter.startValue - value || null,
                 ];
             }
             // If the next value in this step moves into the next step,
@@ -2118,7 +2132,7 @@
                 "step",
                 "format",
                 "pips",
-                "tooltips"
+                "tooltips",
             ];
             // Only change options that we're actually passed to update.
             updateAble.forEach(function (name) {
@@ -2203,7 +2217,7 @@
             getOrigins: function () {
                 return scope_Handles;
             },
-            pips: pips // Issue #594
+            pips: pips, // Issue #594
         };
         return scope_Self;
     }
@@ -2228,13 +2242,13 @@
         // A reference to the default classes, allows global changes.
         // Use the cssClasses option for changes to one slider.
         cssClasses: cssClasses,
-        create: initialize
+        create: initialize,
     };
 
     exports.create = initialize;
     exports.cssClasses = cssClasses;
-    exports['default'] = nouislider;
+    exports["default"] = nouislider;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.14",
+  "version": "0.10.17",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "formdata-polyfill": "^4.0.10",
-    "nouislider": "^15.5.0",
+    "nouislider": "^15.5.1",
     "object-fit-images": "^3.2.4",
     "postinstall-bundle": "^0.7.4"
   },

package/ui/form.js

@@ -33,27 +33,26 @@ class HTMLCustomFormElement extends HTMLFormElement {
 		delete state.query.submit;
 		state.finish(() => {
 			if (state.status != 200) return;
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('submit', true, true);
-			this.dispatchEvent(e);
+			this.dispatchEvent(new Event('submit', {
+				bubbles: true,
+				cancelable: true
+			}));
 		});
 	}
-	read(withDefaults) {
+	read(withDefaults = false) {
 		const fd = new FormData(this);
 		const query = {};
 		fd.forEach((val, key) => {
-			if (val == null || val == "") {
-				const cur = this.querySelectorAll(`[name="${key}"]`).slice(-1).pop();
-				if (cur.required == false) {
-					val = undefined;
-				} else {
-					val = null;
-				}
+			const cur = this.querySelectorAll(`[name="${key}"]`).slice(-1).pop();
+			if (cur.type == "file") {
+				val = cur.value;
 			}
+			if (val == "") val = null;
+			// build array-like values
 			const old = query[key];
 			if (old !== undefined) {
 				if (!Array.isArray(old)) {
-					query[key] = [old];
+					query[key] = old == null ? [] : [old];
 				}
 				if (val !== undefined) query[key].push(val);
 			} else {
@@ -61,37 +60,48 @@ class HTMLCustomFormElement extends HTMLFormElement {
 			}
 		});
 
+		// withDefaults: keep value if equals to its default
+		// else unset value
 		for (const node of this.elements) {
-			if (node.name == null || node.name == "" || node.type == "button") continue;
+			const { name, type } = node;
+			if (name == null || name == "" || type == "button") {
+				continue;
+			}
 			let val = node.value;
 			if (val == "") val = null;
-			if (node.type == "radio") {
-				if (!withDefaults && node.checked == node.defaultChecked && query[node.name] == val) {
-					query[node.name] = undefined;
-				}
-			} else if (node.type == "checkbox") {
-				if (!(node.name in query)) {
-					if (!withDefaults) query[node.name] = undefined;
-				}
-			} else if (node.type == "hidden") {
-				// always include them
-			} else {
-				let defVal = node.defaultValue;
-				if (defVal == "") defVal = null;
-				if (!withDefaults && query[node.name] == defVal) {
-					query[node.name] = undefined;
-				} else {
-					// not yet using form-associated custom input
-					query[node.name] = node.value;
-				}
-			}
-			if (query[node.name] === undefined && withDefaults) {
-				query[node.name] = null;
+			let defVal = node.defaultValue;
+			if (defVal == "") defVal = null;
+
+			switch (type) {
+				case "radio":
+					if (!withDefaults && node.checked == node.defaultChecked) {
+						if (query[name] == val) {
+							query[name] = undefined;
+						}
+					}
+					break;
+				case "checkbox":
+					if (!withDefaults) {
+						if (!(name in query)) {
+							query[name] = undefined;
+						}
+					}
+					break;
+				case "hidden":
+					break;
+				default:
+					if (withDefaults) {
+						if (query[name] === undefined) {
+							query[name] = defVal;
+						}
+					} else if (val === defVal) {
+						query[name] = node.required ? null : undefined;
+					}
 			}
 		}
+		// FIXME use e.submitter polyfill when available
+		// https://github.com/Financial-Times/polyfill-library/issues/1111
 		const btn = document.activeElement;
-		// FIXME https://github.com/whatwg/html/issues/3195 use e.submitter polyfill
-		// https://github.com/whatwg/xhr/issues/262 it's a mess
 		if (btn && btn.type == "submit" && btn.name && btn.value) {
 			query[btn.name] = btn.value;
 		}
@@ -345,7 +355,8 @@ HTMLInputElement.prototype.fill = function (val) {
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.checked = val;
 	} else if (this.type == "file") {
-		this.setAttribute('value', val);
+		if (val == '' || val == null) this.removeAttribute('value');
+		else this.setAttribute('value', val);
 	} else {
 		this.value = val;
 	}
@@ -363,7 +374,7 @@ HTMLInputElement.prototype.save = function () {
 	if (this.type == "radio" || this.type == "checkbox") {
 		this.defaultChecked = this.checked;
 	} else if (this.type == "file") {
-		this.defaultValue = this.getAttribute('value');
+		this.defaultValue = this.getAttribute('value') || '';
 	} else {
 		this.defaultValue = this.value;
 	}
@@ -381,11 +392,13 @@ Object.defineProperty(HTMLInputElement.prototype, 'defaultValue', {
 	configurable: true,
 	enumerable: true,
 	get: function () {
+		// FIXME might not be needed anymore
 		if (this.form?.method == "get") return '';
 		else return this.getAttribute('value');
 	},
 	set: function (val) {
-		this.setAttribute('value', val);
+		if (val == '' || val == null) this.removeAttribute('value');
+		else this.setAttribute('value', val);
 	}
 });
 

package/ui/input-file.js

@@ -14,7 +14,6 @@ class HTMLElementInputFile extends HTMLInputElement {
 		super();
 		if (this.init) this.init();
 		this.save();
-
 	}
 	get defaultValue() {
 		return this.#defaultValue;
@@ -26,7 +25,7 @@ class HTMLElementInputFile extends HTMLInputElement {
 		return this.getAttribute('value');
 	}
 	set value(str) {
-		if (str != null) {
+		if (str) {
 			this.setAttribute('value', str);
 		} else {
 			this.removeAttribute('value');

package/ui/input-range.js

@@ -81,9 +81,10 @@ class HTMLElementInputRange extends HTMLInputElement {
 			helper.classList.remove('indeterminate');
 			if (isInt) values = values.map((n) => parseInt(n));
 			this.rangeValue = values;
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('change', true, true);
-			this.dispatchEvent(e);
+			this.dispatchEvent(new Event('change', {
+				bubbles: true,
+				cancelable: true
+			}));
 		});
 		helper.addEventListener('keydown', this, true);
 		helper.addEventListener('dblclick', this, true);
@@ -92,9 +93,10 @@ class HTMLElementInputRange extends HTMLInputElement {
 	handleEvent(e) {
 		if (e.type == "dblclick" || e.keyCode == 8 || e.keyCode == 46) {
 			this.fill();
-			const ne = document.createEvent('HTMLEvents');
-			ne.initEvent('change', true, true);
-			this.dispatchEvent(ne);
+			this.dispatchEvent(new Event('change', {
+				bubbles: true,
+				cancelable: true
+			}));
 		}
 	}
 

package/ui/menu.css

@@ -45,14 +45,17 @@
 	display: flex;
 	flex-direction: column;
 }
+.right.burger .popup.item > .placer {
+	left: auto;
+	right:0;
+}
 .right.popup.item > .placer > div {
 	left:auto;
 	right:0;
 }
 .fixed.popup.item > .placer > div {
-	position:fixed;
-	max-width: 100%;
-	max-height: 100%;
+	max-width: 100vw;
+	max-height: 100vh;
 }
 .center.popup.item > .placer > div {
 	transform: translateX(-50%);

package/ui/menu.js

@@ -27,15 +27,17 @@ class HTMLElementMenu extends VirtualHTMLElement {
 		const menu = this.firstElementChild;
 		const helper = this.lastElementChild;
 		helper.lastElementChild.lastElementChild.appendChild(this.toHelper(menu));
-		this.observer = new ResizeObserver((entries, observer) => {
-			window.requestAnimationFrame(() => {
-				const styles = window.getComputedStyle(this);
-				const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
-				const menuWidth = menu.offsetWidth;
-				this.classList.toggle('burger', parentWidth <= menuWidth);
+		state.finish(() => {
+			this.observer = new ResizeObserver((entries, observer) => {
+				window.requestAnimationFrame(() => {
+					const styles = window.getComputedStyle(this);
+					const parentWidth = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) + this.offsetWidth;
+					const menuWidth = menu.offsetWidth;
+					this.classList.toggle('burger', parentWidth <= menuWidth);
+				});
 			});
+			this.observer.observe(this.parentNode);
 		});
-		this.observer.observe(this.parentNode);
 	}
 	close(state) {
 		if (this.observer) this.observer.disconnect();
@@ -55,7 +57,7 @@ class HTMLElementMenu extends VirtualHTMLElement {
 			} else {
 				const padding = this.offsetTop + this.offsetHeight;
 				const menu = tosser.lastElementChild.lastElementChild;
-				menu.style.maxHeight = `calc(100% - ${padding}px)`;
+				menu.style.maxHeight = `calc(100vh - ${padding}px)`;
 			}
 		} else if (item) {
 			this.active = item != this.active ? item : null;

package/ui/query-tags.js

@@ -90,9 +90,10 @@ class HTMLElementQueryTags extends VirtualHTMLElement {
 			else if (control.selected) control.selected = false;
 			else if (control.reset) control.reset();
 			else if (control.value) control.value = "";
-			const e = document.createEvent('HTMLEvents');
-			e.initEvent('submit', true, true);
-			control.form.dispatchEvent(e);
+			control.form.dispatchEvent(new Event('submit', {
+				bubbles: true,
+				cancelable: true
+			}));
 		}
 		label.remove();
 	}