u2ui 1.0.0

package/css/classless/README.md

@@ -0,0 +1,26 @@
+# classless.css
+null
+
+## Demos
+
+[aria.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/aria.html)  
+[list-bullet.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/list-bullet.html)  
+[more.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/more.html)  
+[oklch.experiments.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/oklch.experiments.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/test.html)  
+[variables.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/variables.html)  
+
+## Resources
+
+https://github.com/picocss/pico  
+https://github.com/oxalorg/sakura  
+https://github.com/ubershmekel/cssbed  
+https://github.com/kognise/water.css  
+Collection: https://github.com/dbohdan/classless-css  
+https://meowni.ca/posts/monica-dot-css/
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/css/classless/aria.css

@@ -0,0 +1,64 @@
+
+/* [aria-label] as tooltip */
+[aria-label]::before {
+  content:attr(aria-label);
+  position:absolute;
+  transform:translate(-1rem, -130%);
+  display:none;
+  border-radius:3px;
+  padding:.2rem .5rem;
+  filter: drop-shadow(0 0 .2em #0008);
+  background-color:#000;
+  color:#fff;
+  font-size:.7rem;
+  pointer-events:none;
+
+  /* add arrow */
+  border-width:0 0 .7rem 0;
+  border-color:transparent;
+  border-style:solid;
+  background-color: transparent;
+  background-image:
+    linear-gradient(#000,#000),
+    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M12 21L0 3h24z"/></svg>');
+  background-repeat: no-repeat, no-repeat;
+  background-origin: padding-box, border-box;
+  background-size: 100%, auto 1rem;
+  background-position: 0 0, bottom 0 left .8rem;
+  transform:translate(-1rem, -100%);
+  /**/
+}
+
+[aria-label]:focus::before, [aria-label]:hover::before {
+  display:block;
+}
+label[aria-label]:focus-within::before {
+  display:block;
+}
+
+
+/* more */
+[aria-controls] {
+  cursor: pointer;
+}
+[aria-busy=true] {
+  cursor: progress;
+}
+
+
+nav a[aria-current] { color:var(--color); } /* parent pages */
+nav a[aria-current=page] { font-weight:bold; } /* current page */
+
+/*
+sticky footer plugin
+main {
+  background-color:var(--color-bg);
+}
+[role=contentinfo] {
+  position:sticky;
+  z-index:-1;
+  bottom:0;
+  left:0;
+  right:0;
+}
+*/

package/css/classless/classless.css

@@ -0,0 +1,124 @@
+/* https://dev.to/5t3ph/my-top-css-tips-as-shared-on-twitter-part-1-23e2 */
+/* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css */
+
+html {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    accent-color: var(--color); /* ch 93, ff 92, sa 15.4 */
+}
+a {
+    color: var(--color);
+    /* transition: color .2s; ff flickers on visited-color-change https://bugzilla.mozilla.org/show_bug.cgi?id=868975 */
+    transition: color .2s;
+}
+/* a:visited {
+    xcolor: var(--color-dark);
+    color: hsl(calc(var(--hsl-h) + 64), var(--hsl-s), var(--hsl-l));
+} */
+a:hover, a:focus {
+    color: var(--color-text);
+}
+hr {
+    color: var(--color-line);
+    margin: 2rem 0;
+    border-width:var(--line-width);
+}
+
+/* margin-trim on the container may be a good alternative, only safari for now */
+:is(h1,h2,h3,h4,h5,h6,p,ul,ol):first-child { margin-top:0; }
+:is(h1,h2,h3,h4,h5,h6,p,ul,ol):last-child { margin-bottom:0; }
+
+
+table {
+    inline-size: 100%; /* take container margins into account: width:-moz-available; width:-webkit-fill-available; (not working in firefox) */
+    word-break: normal;
+}
+td, th {
+    padding: .5em;
+}
+
+dialog {
+    background-color:var(--color-bg);
+    color:var(--color-text);
+}
+
+mark {
+    background-color: hsl(var(--hsl-h), 100%, 70%, 0.5);
+}
+
+/* focus/active style */
+/* :focus {
+    outline: .4rem solid hsl(var(--hsl), .2);
+    transition: .15s;
+}
+:focus:not(:focus-visible) { outline-width: 0; }
+:active:active {
+    outline-width: .6rem;
+}
+*/
+
+:focus-visible, :focus:active { /* how to prevent custom-elements to recive the outline they are focu and active if an inner element is focus and active */
+    outline: .4rem solid hsl(var(--hsl), .2);
+    transition: .15s;
+    &:active {
+        outline-width: .6rem;
+    }
+}
+
+
+/* FORM */
+
+/* all inputs, buttons */
+/* is:(input, textarea, select, button, .btn, ::file-selector-button, ::-webkit-file-upload-button) { forgiving :is-selector usable after safari 13.7 */
+input, textarea, select, button, .btn {
+    padding-inline: .4em;
+    padding-block: .3em;
+    font-family:inherit;
+    max-inline-size: 100%;
+    /* todo: new ok? */
+    /* xborder: 1px solid; */
+    border-radius: var(--radius); /* remove? */
+    /* min-height:1.3em; todo? for select, input same height in chrome, firefox has same height if they have borders? or line-height: 1.2;? line-height can not be set on select */
+    border-width:var(--line-width);
+    border-color:var(--color-line);
+}
+
+
+/* file-input */
+input[type=file] {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    border: 0;
+    background-color: var(--color-light);
+}
+
+/* buttons */
+button, .btn {
+    background-color: var(--color);
+    color: var(--color-bg);
+    border-color: transparent;
+    padding-inline: 1em;
+    transition: background-color .1s; /* better every property? does not get along with focus-animation */
+	text-decoration:none; /* .btn */
+}
+.btn:not([hidden]) {
+	display:inline-block;
+}
+/* button:hover:not(:disabled), .btn:hover, button:focus { */
+:is(button, .btn):not(:disabled):where(:hover, :focus, [aria-pressed="true"]) {
+    background-color: var(--color-dark);
+}
+button:disabled {
+    opacity: .5;
+}
+/* ::file-selector-button, ::-webkit-file-upload-button, select[size], / * chrome * / select[multiple] { */
+select[size], /* chrome */ select[multiple] {
+    border-top-right-radius: 0;/* recheck: border-end-end-radius supported? (-safari) */
+    border-bottom-right-radius: 0;
+    margin: 0 .5em 0 0;
+}
+
+:focus::placeholder {
+    opacity: .2;
+}

package/css/classless/full.css

@@ -0,0 +1,11 @@
+
+@import "../norm/norm.css";
+@import "../base/base.css";
+@import "../base/nomotion.css" prefers-reduced-motion;
+@import "../base/print.css" print;
+
+@import "./variables.css";
+@import "./classless.css";
+@import "./more.css";
+
+

package/css/classless/more.css

@@ -0,0 +1,340 @@
+/*
+Resources:
+https://getbootstrap.com/docs/5.0/forms/overview/
+https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/
+*/
+
+/****************/
+/* custom list  */
+/****************/
+
+/* li::marker { content: "• "; } /* ::marker is bad, its shown even if list-style:none*/
+
+ul {
+	list-style-type: '•  '; 	/* ·•●⏺‣▶⏵✔⊚○◌🞅🞇🞉🖝 */
+	padding-inline-start: 1em;
+}
+ul > li::marker {
+	font-size: 1em;
+}
+
+/****************/
+/* custom select */
+/****************/
+
+select:not([size], [multiple]) {
+	-webkit-appearance: none;
+	appearance: none;
+	/* *
+	background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021.3%2012.1%22%20fill%3D%22%23333333%22%3E%3Cpath%20d%3D%22M10.7%2012.1L0%201.5%201.4.1l9.3%209.2L19.9%200l1.4%201.4z%22%2F%3E%3C%2Fsvg%3E");
+	background-repeat:no-repeat;
+	background-size:.8em .8em;
+	background-position:right .3em top 50%;
+	padding-right:1.5em;
+	/* */
+	/* */
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='4'><path d='M4 0h6L7 4'/></svg>");
+	background-repeat: no-repeat;
+	background-position: 100% 50%;
+	background-size: 1em;
+	padding-right: 1.3em;
+	/*
+	only possible if in :where() so background-color can be overwritten
+	xbackground: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
+	xtext-overflow: ellipsis;
+	*/
+}
+
+/***************************/
+/* custom check-/radiobox  */
+/***************************/
+
+input:is([type=radio], [type=checkbox]) {
+	-webkit-appearance: none;
+	appearance: none;
+	transform:rotate(.002deg); /* improve rendering in ff, chrome */
+}
+
+input:is([type=radio], [type=checkbox]) {
+	width: 1.1em;
+	height: 1.1em;
+	background-color: #fff;
+	border: solid 1px;
+	position: relative;
+	border-radius: .15em;
+	padding: 0;
+	vertical-align: -.14em;
+}
+
+input:is([type=radio],[type=checkbox]):checked {
+	border-color: var(--color, blue);
+}
+
+input:is([type=radio], [type=checkbox])::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+	font-family: Arial, Helvetica, sans-serif;
+	font-weight: normal;
+	font-size: .65em;
+	line-height:1.1;
+}
+
+input:is([type=radio],[type=checkbox]):checked::before {
+	background-color: var(--color, blue);
+}
+
+/* checkbox */
+input[type=checkbox]:checked::before {
+	content: "✔";
+}
+
+/* radio */
+input[type=radio] {
+	border-radius: 100%;
+}
+input[type=radio]::before {
+	border-radius: inherit;
+	border: .18em solid #fff;
+}
+
+/* disabled */
+input:is([type=radio],[type=checkbox]):disabled {
+		opacity: .5;
+}
+
+/* indeterminate */
+input:is([type=radio],[type=checkbox]):indeterminate::before {
+	color: currentColor;
+	/* font-size: .8em;
+	content: "─"; */
+	font-size: 1em;
+	content: "﹣";
+	opacity:.6;
+	font-weight:200;
+}
+
+/*
+	indicator (beta)
+	z-index can not be behinde checkbox, only behinde ::before
+*/
+
+input:where([type=radio], [type=checkbox]):not(:disabled)::after {
+	content: '';
+	position: absolute;
+	top: -60%;
+	left: -60%;
+	right: -60%;
+	bottom: -60%;
+	border-radius: 50%;
+	transition: background-color .3s;
+}
+
+input:where([type=radio], [type=checkbox]):hover::after {
+	background-color: #0001;
+}
+
+/***************************/
+/* color input             */
+/***************************/
+
+input[type=color] {
+	padding: 0;
+	border-radius: 99em;
+	width: 1.4em;
+	height: 1.4em;
+	border-width: 1px;
+	overflow: hidden;
+	box-shadow: 0 0 .5em #0003;
+	cursor: pointer;
+    vertical-align:-0.3em;
+}
+
+input[type=color]::-moz-color-swatch {
+	border: 0;
+}
+
+input[type=color]::-webkit-color-swatch {
+	border: 0;
+}
+
+input[type=color]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+/***************************/
+/* scrollbars              */
+/***************************/
+
+html {
+	--scrollbar-thin:;
+	/* space (: ;) => true, nospace (:;) = false  */
+	--scrollbar-color-track: var(--color-area, #f4f4f4);
+	--scrollbar-color-thumb: var(--color, #ccc);
+}
+
+* {
+	scrollbar-width: var(--scrollbar-thin) thin;
+	scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
+}
+
+::-webkit-scrollbar {
+	width: var(--scrollbar-thin) 8px;
+	height: var(--scrollbar-thin) 8px;
+}
+::-webkit-scrollbar-track {
+	background: var(--scrollbar-color-track);
+}
+::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar-color-thumb);
+}
+
+select, textarea { --scrollbar-thin: ; }
+
+/***************************/
+/* range inputs            */
+/***************************/
+
+input[type=range] {
+	background-color: transparent;
+	border: 0;
+	-webkit-appearance: none;
+	padding: 0;
+}
+
+/* todo where(webkit, moz) (forgiving) */
+
+input[type=range]::-webkit-slider-runnable-track {
+	box-sizing: border-box;
+	height: .5em;
+	background: #fff;
+	border: 1px solid #0008;
+	border-radius: 1em;
+	cursor: pointer;
+}
+
+input[type=range]::-moz-range-track {
+	box-sizing: border-box;
+	height: .5em;
+	background: #fff;
+	border: 1px solid #0008;
+	border-radius: 1em;
+	cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-thumb {
+	box-sizing: border-box;
+	width: 1em;
+	height: 1em;
+	background: var(--color);
+	border-radius: 100%;
+	cursor: pointer;
+	margin-top: -.3em;
+	-webkit-appearance: none;
+}
+
+input[type=range]::-moz-range-thumb {
+	box-sizing: border-box;
+	width: 1em;
+	height: 1em;
+	background: var(--color);
+	border-radius: 100%;
+	cursor: pointer;
+}
+
+input[type=range]:hover::-webkit-slider-thumb {
+	box-shadow: 0 0 0 .5em #0001
+}
+
+input[type=range]:hover::-moz-range-thumb {
+	box-shadow: 0 0 0 .5em #0001
+}
+
+/* autofill (chrome) */
+input:-webkit-autofill { /* also works for firefox! */
+	filter: none;
+	box-shadow: 0 0 0 100px var(--color-light) inset;
+}
+
+::selection {
+	background: hsl(var(--hsl), 0.3);
+}
+
+/* Spin Buttons
+- bigger chromes spinners
+- hide firefox spnners
+*
+input[type=number] {
+    appearance:textfield;
+}
+@supports selector(::-webkit-inner-spin-button) {
+	input[type="number"] {
+		padding-right:1.2em;
+	}
+	::-webkit-inner-spin-button {
+		position: absolute;
+		right: 0;
+		top: -1px;
+		bottom: -1px;
+		padding-left:.2em;
+		padding-right:.2em;
+	}
+}
+/**/
+
+
+/***************************/
+/* details / summary       */
+/***************************/
+
+details { border-bottom: 1px solid var(--color-line); transition-duration:.3s; }
+summary {
+	padding:.5rem 0;
+	line-height:1; /* to center floated ::after */
+	--line-height:1; /* to center floated ::after */
+}
+details[open] > summary { margin-bottom: .5rem; }
+details[open] { padding-bottom: 1rem; }
+
+/* nested *
+details details {
+	margin-inline:.5rem;
+}
+/* */
+
+/*
+# custom icon
+- display:flex not working in safari 14
+needed?:
+summary::marker { display: none; }
+summary::-moz-list-bullet { xlist-style-type: none; }
+*/
+summary { list-style-type: none; }
+summary::-webkit-details-marker { display: none; }
+summary::after {
+	line-height:.9;
+	content:'▾'; /* not working in all browsers: ⏵❯ unknown support: ⟩⟩ */
+	transform: rotate(-90deg);
+	width: 1rem;
+	height: 1rem;
+	float: right;
+	transition: transform .2s;
+	/* customize
+	font-family:--u2-ico-font;
+	background-image: var(--ico-chevron);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 1rem auto;
+	*/
+}
+details[open] > summary::after {
+	transform: rotate(0deg);
+}
+/**/

package/css/classless/simple.css

@@ -0,0 +1,103 @@
+body {
+    max-width:var(--width);
+    padding:1rem;
+
+    display: grid; /* center content. Margins will not collapse :/ */
+    place-content: center stretch;
+}
+body > * {
+    min-width:0; /* gap makes min-width = content-width, in some cases it will overflow */
+}
+section,
+body > footer,
+body > header {
+    padding-block: 2rem;
+}
+body > footer {
+    border-block-start: .1em solid var(--color);
+    text-align:center;
+}
+
+body > header {
+    border-block-end: .1em solid var(--color);
+}
+
+
+table {
+    font-size: max(.8rem, 14px);
+}
+tr:not(:last-child) {
+    border-style:solid; /* new: not on td/th any problems? */
+    border-color:var(--color-line);
+    border-block-width: 0 var(--line-width);
+    border-inline-width: 0;
+}
+
+
+blockquote {
+    margin: 0;
+    padding: .5rem;
+    
+    padding-inline-start: 1rem;
+    border-inline-start: .3rem solid var(--color);
+
+    background-color: var(--color-light);
+    font-size: .8em;
+}
+
+pre {
+    background-color: var(--color-light);
+    padding: 1rem;
+    overflow-x: auto;
+    border-radius: var(--radius);
+    font-size: .8em;
+}
+code {
+    font-size: .9em;
+    padding-inline: .3em;
+    padding-block: .1em;
+    background-color: var(--color-light);
+    white-space: pre-wrap;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    line-height: var(--line-height);
+    --line-height: 1;
+}
+
+/* figure */
+figure {
+    padding:0;
+    margin-block: 1rem;
+    margin-inline: auto;
+    box-shadow: var(--shadow);
+    border-radius: var(--radius);
+    overflow:auto;
+    /*
+    font-size: 1.2rem;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    */
+}
+figure > img {
+    border-radius: var(--radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+figcaption {
+    opacity: .7;
+    font-size: .9rem;
+    font-style: italic;
+    text-align: center;
+}
+p, dd, li {
+    max-inline-size: 80ch;
+}
+
+
+/* button:has(*) {
+    display:flex;
+    gap:.5em;
+    align-items:center;
+    text-align:left;
+} */

package/css/classless/snippeds/a/icons.css

@@ -0,0 +1,12 @@
+
+a[download], a[target] {
+    text-decoration: none;
+}
+a[target]::after {
+    content: '🠆';
+    margin-left: .2em;
+}
+a[download]::after {
+    content: ' 🠇'; /* 🠇⤵↓ */
+    margin-left: .2em;
+}