@pageboard/html 0.10.13 → 0.10.16

package/ui/item.css

@@ -23,7 +23,7 @@
 	border-radius: 0rem;
 	box-shadow: none;
 	transition: box-shadow 0.1s ease;
-	z-index: '';
+	z-index: "";
 	font-size: 1em;
 }
 .ui.items > .ui a {
@@ -50,7 +50,7 @@
 
 .ui.items > .ui::after {
 	display: block;
-	content: ' ';
+	content: " ";
 	height: 0px;
 	clear: both;
 	overflow: hidden;
@@ -74,7 +74,7 @@
 	float: none;
 	margin: 0em;
 	padding: 0em;
-	max-height: '';
+	max-height: "";
 	align-self: top;
 	width:175px;
 }
@@ -106,7 +106,7 @@
 }
 .ui.items > .ui > .content::after {
 	display: block;
-	content: ' ';
+	content: " ";
 	height: 0px;
 	clear: both;
 	overflow: hidden;
@@ -122,15 +122,15 @@
 }
 .ui.items > .ui > .content > .header {
 	display: inline-block;
-	margin: -0.21425em 0em 0em;
-	font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+	margin: -0.2142em 0em 0em;
+	font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
 	font-weight: bold;
-	color: rgba(0, 0, 0, 0.85);
+	color: rgb(0 0 0 / 85%);
 }
 
 /* Default Header Size */
 .ui.items > .ui > .content > .header:not(.ui) {
-	font-size: 1.28571429em;
+	font-size: 1.2857em;
 }
 
 /*--------------
@@ -150,12 +150,12 @@
 
 .ui.items > .ui .content img {
 	align-self: middle;
-	width: '';
+	width: "";
 }
 .ui.items > .ui img.avatar,
 .ui.items > .ui .avatar img {
-	width: '';
-	height: '';
+	width: "";
+	height: "";
 	border-radius: 500rem;
 }
 
@@ -168,7 +168,7 @@
 	max-width: auto;
 	font-size: 1em;
 	line-height: 1.4285em;
-	color: rgba(0, 0, 0, 0.87);
+	color: rgb(0 0 0 / 87%);
 }
 
 /*--------------
@@ -187,10 +187,10 @@
 ---------------*/
 
 .ui.items > .ui .meta {
-	margin: 0.5em 0em 0.5em;
+	margin: 0.5em 0em;
 	font-size: 1em;
 	line-height: 1em;
-	color: rgba(0, 0, 0, 0.6);
+	color: rgb(0 0 0 / 60%);
 }
 .ui.items > .ui .meta * {
 	margin-right: 0.3em;
@@ -210,16 +210,16 @@
 
 /* Generic */
 .ui.items > .ui > .content a:not(.ui) {
-	color: '';
+	color: "";
 	transition: color 0.1s ease;
 }
 .ui.items > .ui > .content a:not(.ui):hover {
-	color: '';
+	color: "";
 }
 
 /* Header */
 .ui.items > .ui > .content > a.header {
-	color: rgba(0, 0, 0, 0.85);
+	color: rgb(0 0 0 / 85%);
 }
 .ui.items > .ui > .content > a.header:hover {
 	color: #1e70bf;
@@ -227,10 +227,10 @@
 
 /* Meta */
 .ui.items > .ui .meta > a:not(.ui) {
-	color: rgba(0, 0, 0, 0.4);
+	color: rgb(0 0 0 / 40%);
 }
 .ui.items > .ui .meta > a:not(.ui):hover {
-	color: rgba(0, 0, 0, 0.87);
+	color: rgb(0 0 0 / 87%);
 }
 
 /*--------------
@@ -244,11 +244,11 @@
 /* Icon */
 .ui.items > .ui > .content .favorite.icon {
 	cursor: pointer;
-	opacity: 0.75;
+	opacity: 75%;
 	transition: color 0.1s ease;
 }
 .ui.items > .ui > .content .favorite.icon:hover {
-	opacity: 1;
+	opacity: 100%;
 	color: #FFB70A;
 }
 .ui.items > .ui > .content .active.favorite.icon {
@@ -261,11 +261,11 @@
 /* Icon */
 .ui.items > .ui > .content .like.icon {
 	cursor: pointer;
-	opacity: 0.75;
+	opacity: 75%;
 	transition: color 0.1s ease;
 }
 .ui.items > .ui > .content .like.icon:hover {
-	opacity: 1;
+	opacity: 100%;
 	color: #FF2733;
 }
 .ui.items > .ui > .content .active.like.icon {
@@ -282,10 +282,10 @@
 	background: none;
 	margin: 0.5rem 0em 0em;
 	width: 100%;
-	padding: 0em 0em 0em;
+	padding: 0em;
 	top: 0em;
 	left: 0em;
-	color: rgba(0, 0, 0, 0.4);
+	color: rgb(0 0 0 / 40%);
 	box-shadow: none;
 	transition: color 0.1s ease;
 	border-top: none;
@@ -298,7 +298,7 @@
 }
 .ui.items > .ui .extra::after {
 	display: block;
-	content: ' ';
+	content: " ";
 	height: 0px;
 	clear: both;
 	overflow: hidden;
@@ -319,7 +319,7 @@
 	margin-right: 1em;
 }
 .ui.three.items > .ui > .image {
-	width: calc(33.33333333% - 1em);
+	width: calc(33.3333% - 1em);
 	margin-right: 1em;
 }
 .ui.four.items > .ui > .image {
@@ -331,11 +331,11 @@
 	margin-right: 0.75em;
 }
 .ui.six.items > .ui > .image {
-	width: calc(16.66666667% - 0.75em);
+	width: calc(16.6667% - 0.75em);
 	margin-right: 0.75em;
 }
 .ui.seven.items > .ui > .image {
-	width: calc(14.28571429% - 0.5em);
+	width: calc(14.2857% - 0.5em);
 	margin-right: 0.5em;
 }
 
@@ -409,7 +409,7 @@
 --------------------*/
 
 .ui.divided.items > .ui {
-	border-top: 1px solid rgba(34, 36, 38, 0.15);
+	border-top: 1px solid rgb(34 36 38 / 15%);
 	margin: 0em;
 	padding: 1em 0em;
 }

package/ui/layout.css

@@ -53,7 +53,7 @@
 }
 
 .inverted.layout {
-	background: rgba(0, 0, 0, 0.8);
+	background: rgb(0 0 0 / 80%);
 }
 
 .inverted.layout p {

package/ui/loading.css

@@ -21,24 +21,24 @@
 	0% {
 		width:0%;
 		margin-left:0px;
-		opacity:0.3;
+		opacity:30%;
 	}
 	50% {
 		width:20px;
 		margin-left:-10px;
-		opacity:1;
+		opacity:100%;
 	}
 	100% {
 		width:0%;
 		margin-left:0px;
-		opacity:0.3;
+		opacity:30%;
 	}
 }
 
 .loading[data-src]::after {
 	display: block;
 	animation: scanner 6s steps(3, end) infinite;
-	content: '';
+	content: "";
 	width: 20px;
 	height: 0;
 	border-top: 4px dotted #aaa;
@@ -48,17 +48,17 @@
 
 .error[data-src]::after {
 	display: block;
-	content: '∅';
+	content: "∅";
 }
 
 .waiting[data-src]::after {
 	display:block;
-	content: '?';
+	content: "?";
 }
 
 .denied[data-src]::after {
 	display:block;
-	content: '🛇';
+	content: "🛇";
 }
 
 .error[data-src],

package/ui/menu.css

@@ -11,7 +11,7 @@
 	width: auto;
 	height: auto;
 	top: 100% !important;
-	opacity: 1;
+	opacity: 100%;
 }
 
 /* menu item with icon */

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();

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();
 	}

package/ui/rating.css

@@ -24,7 +24,7 @@ element-rating .icon {
 	height: auto;
 	transition: opacity 0.1s ease, background 0.1s ease, text-shadow 0.1s ease, color 0.1s ease;
 	backface-visibility: hidden;
-	color: rgba(0, 0, 0, 0.15);
+	color: rgb(0 0 0 / 15%);
 }
 element-rating .icon:last-child {
 	padding-right:0;
@@ -40,20 +40,20 @@ element-rating .icon::before {
 
 /* Active Icon */
 element-rating .active.icon {
-	color: rgba(0, 0, 0, 0.85);
+	color: rgb(0 0 0 / 85%);
 }
 
 /* Selected Icon */
 element-rating .icon.selected,
 element-rating .icon.selected.active {
-	color: rgba(0, 0, 0, 0.87);
+	color: rgb(0 0 0 / 87%);
 }
 
 /* Star */
 
 /* Inactive */
 element-rating.star .icon {
-	color: rgba(0, 0, 0, 0.15);
+	color: rgb(0 0 0 / 15%);
 	text-shadow: none;
 }
 
@@ -73,7 +73,7 @@ element-rating.star .icon.selected.active {
 /* Heart */
 
 element-rating.heart .icon {
-	color: rgba(0, 0, 0, 0.15);
+	color: rgb(0 0 0 / 15%);
 	text-shadow: none !important;
 }
 
@@ -101,10 +101,10 @@ element-rating.disabled .icon {
 
 /* Selected Rating */
 element-rating.selected .active.icon {
-	opacity: 1;
+	opacity: 100%;
 }
 element-rating .icon.selected,
 element-rating.selected .icon.selected {
-	opacity: 1;
+	opacity: 100%;
 }
 

package/ui/site.css

@@ -22,10 +22,10 @@ body {
 	overflow-x: hidden;
 	min-width: 320px;
 	background: #FFFFFF;
-	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 	font-size: 14px;
 	line-height: 1.4285em;
-	color: rgba(0, 0, 0, 0.87);
+	color: rgb(0 0 0 / 87%);
 }
 .hidden,[hidden] {
 	display:none !important;
@@ -41,9 +41,9 @@ h2,
 h3,
 h4,
 h5 {
-	font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
-	line-height: 1.28571429em;
-	margin: calc(2rem - 0.14285714em) 0 1rem;
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	line-height: 1.2857em;
+	margin: calc(2rem - 0.1428em) 0 1rem;
 	font-weight: bold;
 	padding: 0;
 }
@@ -52,13 +52,13 @@ h1 {
 	font-size: 2rem;
 }
 h2 {
-	font-size: 1.71428571rem;
+	font-size: 1.7143rem;
 }
 h3 {
-	font-size: 1.28571429rem;
+	font-size: 1.2857rem;
 }
 h4 {
-	font-size: 1.07142857rem;
+	font-size: 1.0714rem;
 }
 h5 {
 	font-size: 1rem;
@@ -172,7 +172,6 @@ i.icon {
 	height:1em;
 	font-size:1em;
 	text-align:center;
-	speak:none;
 }
 i.icon::before {
 	display:block;
@@ -192,7 +191,7 @@ i.icon::before {
 	cursor: pointer;
 }
 .caret-icon::before {
-	content: '\f0da';
+	content: "\f0da";
 	transform: rotate(0deg);
 	font-family: Accordion;
 	font-style:normal;
@@ -211,25 +210,25 @@ i.icon::before {
 
 i.icon.prev::before {
 	background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1331 672q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>');
-	content:'';
+	content:"";
 }
 i.icon.next::before {
 	background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1299 1088q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>');
-	content:'';
+	content:"";
 }
 i.icon.up::before {
 	background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1523 1312q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>');
-	content:'';
+	content:"";
 }
 
 .ui.breadcrumb .divider::before {
-	content: '>';
+	content: ">";
 }
 
 i.icon.delete::before,
 i.icon.close::before {
 	font-size:2em;
-	content:'×';
+	content:"×";
 	width:auto;
 	height:auto;
 }
@@ -246,54 +245,45 @@ i.icon.close::before {
 
 
 /* Site */
-::-webkit-selection {
-	background-color: #CCE2FF;
-	color: rgba(0, 0, 0, 0.87);
-}
-::-moz-selection {
-	background-color: #CCE2FF;
-	color: rgba(0, 0, 0, 0.87);
-}
 ::selection {
 	background-color: #CCE2FF;
-	color: rgba(0, 0, 0, 0.87);
+	color: rgb(0 0 0 / 87%);
 }
 
 /* Force Simple Scrollbars */
 body ::-webkit-scrollbar {
-	-webkit-appearance: none;
+	appearance: none;
 	width: 10px;
 }
 body ::-webkit-scrollbar-track {
-	background: rgba(0, 0, 0, 0.1);
+	background: rgb(0 0 0 / 10%);
 	border-radius: 0px;
 }
 body ::-webkit-scrollbar-thumb {
 	cursor: pointer;
 	border-radius: 5px;
-	background: rgba(0, 0, 0, 0.25);
-	-webkit-transition: color 0.2s ease;
+	background: rgb(0 0 0 / 25%);
 	transition: color 0.2s ease;
 }
 body ::-webkit-scrollbar-thumb:window-inactive {
-	background: rgba(0, 0, 0, 0.15);
+	background: rgb(0 0 0 / 15%);
 }
 body ::-webkit-scrollbar-thumb:hover {
-	background: rgba(128, 135, 139, 0.8);
+	background: rgb(128 135 139 / 80%);
 }
 
 /* Inverted UI */
 body .ui.inverted::-webkit-scrollbar-track {
-	background: rgba(255, 255, 255, 0.1);
+	background: rgb(255 255 255 / 10%);
 }
 body .ui.inverted::-webkit-scrollbar-thumb {
-	background: rgba(255, 255, 255, 0.25);
+	background: rgb(255 255 255 / 25%);
 }
 body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
-	background: rgba(255, 255, 255, 0.15);
+	background: rgb(255 255 255 / 15%);
 }
 body .ui.inverted::-webkit-scrollbar-thumb:hover {
-	background: rgba(255, 255, 255, 0.35);
+	background: rgb(255 255 255 / 35%);
 }
 
 /* Fixes */
@@ -315,7 +305,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 	width: auto;
 	height: auto;
 	top: 100% !important;
-	opacity: 1;
+	opacity: 100%;
 }
 
 [contenteditable] .field[block-focused] .dropdown > .menu {

package/ui/tab.css

@@ -9,10 +9,7 @@ element-tabs {
 }
 element-tabs > .ui.tabular.menu + div[block-content="tabs"] > .segment {
 	border-top: none;
-	margin-left: 0;
-	margin-top: 0;
-	margin-right: 0;
-	margin-bottom:1rem;
+	margin:0 0 1rem;
 	width: 100%;
 }
 

package/ui/transition.css

@@ -1,16 +1,16 @@
 /* async progress bar and error signal */
 
 body::after {
-	content: '';
+	content: "";
 	position:fixed;
 	display:block;
 	left:0;
 	top:1px;
 	width:0%;
 	height:0;
-	opacity:0.7;
+	opacity:70%;
 	background: #4486cc;
-	box-shadow: 0 0 5px rgba(99, 162, 235, 0.7);
+	box-shadow: 0 0 5px rgb(99 162 235 / 70%);
 	z-index:1000;
 }
 html[data-stage] > body::after {
@@ -75,7 +75,7 @@ html.transition > body + body[data-transition-open] {
 }
 
 html.transition > body + body[data-transition-open] > *:not([block-type="main"]) {
-	opacity:0;
+	opacity:0%;
 }
 
 html.transition > body + body[data-transition-open="tr-right"] {
@@ -99,7 +99,7 @@ html.transition > body + body[data-transition-open="tr-bottom"] {
 }
 
 html.transition > body + body[data-transition-open="fade"] {
-	opacity:0;
+	opacity:0%;
 	transition: opacity 1.5s ease-in;
 }
 
@@ -107,7 +107,7 @@ html.transition.transitioning > body + body[data-transition-open|="tr"] {
 	transform: translate3d(0, 0, 0);
 }
 html.transition.transitioning > body + body[data-transition-open="fade"] {
-	opacity:1;
+	opacity:100%;
 }
 
 /* closing transitions */
@@ -118,7 +118,7 @@ html.transition > body[data-transition-close|="tr"]:first-of-type {
 
 html.transition > body[data-transition-close="fade"]:first-of-type {
 	z-index:1;
-	opacity:1;
+	opacity:100%;
 	transition: opacity 1.5s ease-in;
 }
 
@@ -139,6 +139,6 @@ html.transition.transitioning > body[data-transition-close="tr-bottom"]:first-of
 }
 
 html.transition.transitioning > body[data-transition-close="fade"]:first-of-type {
-	opacity:0;
+	opacity:0%;
 }