u2ui 1.0.1 → 1.4.6

package/css/base/base.css

@@ -1,127 +1,153 @@
-*, ::before, ::after {
-	box-sizing: border-box;
-	scroll-behavior: smooth;
-	line-height:var(--line-height); /* also for: letter-spacing? */
-	background-repeat: no-repeat;
-}
-html {
-	block-size: 100%; /* 100dvh? */
-	word-break:break-word;
-	overflow-wrap:break-word;
-	-webkit-hyphens: auto;
-	hyphens: auto;
-	hyphenate-limit-chars:auto 3; /* only chrome */
-	tab-size: 4;
-	--line-height: calc(1em + .5rem);
-	-webkit-tap-highlight-color: transparent;
-	font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-	font-size: calc(12px + .3vw);
-	scrollbar-gutter: stable;
-	overflow-y: auto;
-}
-body {
-	margin:auto;
-	min-block-size: 100%;
-	font-size:max(1rem, 16px); /* 16px => safari ios dont zoom in */
-}
-h1, h2, h3, h4, h5, h6 {
-	margin-block:1em;
-}
-h1, h2, h3, h4, h5, h6, figcaption, blockquote, legend, caption { /* th? */
-	text-wrap: balance;
-}
-p, li {
-	text-wrap: pretty;
-}
-hr {
-	border-style:solid;
-	border-width:0 0 1px 0;
-	border-top-width:0 !important;
-}
-video, audio, video, iframe {
-	width: 100%; /* max-width:-moz-available / -webkit-fill-available; incompatibility causes problems */
-}
-iframe {
-    display:block;
-}
-img, svg, canvas {
-	max-width: 100%;
-}
-img, svg, video, canvas {
-	object-fit:cover;
-	height: auto;
-}
-video { background-color:#aaa; }
-script, style {
-	white-space: pre;
-	font-family: monospace;
-	margin-block: 1rem;
-	overflow:auto;
-}
-/* table */
-table {
-	border-collapse: collapse;
-	border-spacing: 0; /* if not collapsed, border-spacing defaults to 0 */
-	font-variant-numeric: tabular-nums;
-}
-th {
-	text-align: inherit;
-	text-align: -webkit-match-parent; /* inherit not working in safari */
-}
-/* nav */
-nav a { text-decoration:none; } /* display:block? color:inherit? */
-nav li { list-style: none; }
-nav ul { padding-inline-start:1.5em; }
-nav > ul { padding-inline-start:0; }
-
-/* clickable */
-select, summary, label, button:not(:disabled), input:where([type=checkbox], [type=radio], [type=file]), ::file-selector-button, .btn {
-	cursor:pointer;
-}
-
-[inert] { opacity:.4; }
-
-/* form */
-input, textarea, select, button, ::file-selector-button, .btn {
-	padding:.2em;
-	border:1px solid rgba(0,0,0,.5);
-	font: inherit;
-	/*
-	try to match immutable select-line-height
-	in chrome:1.22, in ff:1.17 (best fit line-height:1.19?)
-	"normal" does not work in chrome unless not -webkit-appearance: none;
-	*/
-	line-height:var(--line-height); /* needed as font:inherit does inherit line-height */
-	--line-height:normal;
-}
-button, ::file-selector-button, .btn {
-	padding-inline:.7em;
-}
-select { background-color:Field; }
-textarea {
-	vertical-align: baseline;
-	vertical-align: -webkit-baseline-middle;
-}
-textarea { resize: vertical; }
-/* textarea:not(:hover) { resize:none; } some browsers may stop resizing if mouse resize is none */
-
-input, textarea { inline-size:13rem; }
-input:where([type=radio], [type=checkbox], [type=file], [type=date], [type=time], [type=datetime-local], [type=color]) { inline-size:revert; }  /* todo: incomplete? */
-input:where([type=range]) { vertical-align:middle }
-
-
-/* animatable popovers */
-:is(dialog, [popover]) {
-    &, &::backdrop {
-        transition-behavior: allow-discrete;
-        opacity: 0;
-        &:popover-open, &:modal, &[open] {
-            &, &::backdrop {
-                opacity: 1;
-                @starting-style {
-                    opacity: 0;
-                }
-            }
-        }
-    }
-}
+@layer normalize {
+
+	@view-transition {
+		navigation: auto;
+	}
+
+	*, ::before, ::after {
+		box-sizing: border-box;
+		scroll-behavior: smooth;
+		line-height:var(--line-height);/* also for: letter-spacing? */
+		background-repeat: no-repeat;
+	}
+	html {
+		interpolate-size: allow-keywords;
+		block-size: 100%;/* 100dvh? */
+		overflow-wrap:break-word;
+		-webkit-hyphens: auto;/* safari < 17 */
+		hyphens: auto;
+		hyphenate-limit-chars:auto 4 4;/* chrome, firefox */
+		tab-size: 4;
+		--line-height: calc(1em + .5rem);
+		-webkit-tap-highlight-color: transparent;
+		font-family: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+		font-size: calc(12.5px + .25vw);
+		scrollbar-gutter: stable;
+		overflow-y: auto;
+	}
+	body {
+		margin:auto;
+		min-block-size: 100%;
+		display: flow-root;/* so that margin of children does not affect body */
+		font-size:max(1rem, 14px);
+	}
+
+	h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
+		margin-block-start: 1.2em; /* would lh be better? */
+		margin-block-end: 0.5em;
+	}
+	h1, h2, h3, h4, h5, h6, figcaption, blockquote, legend, caption { /* th? */
+		text-wrap: balance;
+	}
+	p, li {
+		text-wrap: pretty;
+	}
+	p { margin-top: 0 }
+	hr {
+		border-style:solid;
+		border-width:0 0 1px 0;
+		border-top-width:0 !important;
+	}
+	video, audio, iframe {
+		inline-size: 100%;
+		inline-size:-webkit-fill-available;
+		inline-size:stretch;
+	}
+	iframe { display:block; }
+	img, svg, canvas {
+		max-inline-size: 100%;
+		max-inline-size:-moz-available;
+		max-inline-size:-webkit-fill-available;
+		max-inline-size:stretch;
+	}
+	img, svg, video, canvas {
+		object-fit:cover;
+		block-size: auto;
+	}
+	video { background-color:#aaa; }
+	script, style {
+		white-space: pre;
+		font-family: monospace;
+		margin-block: 1rem;
+		overflow:auto;
+	}
+	/* table */
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;/* if not collapsed, border-spacing defaults to 0 */
+		font-variant-numeric: tabular-nums;
+	}
+	th {
+		text-align: inherit;
+		text-align: -webkit-match-parent;/* inherit not working in safari */
+	}
+	/* nav */
+	nav a { text-decoration:none; }/* display:block? color:inherit? */
+	nav li { list-style: none; }
+	nav ul { padding-inline-start:1.5em; }
+	nav > ul { padding-inline-start:0; }
+
+	/* clickable */
+	:where(select, summary, label, button, input:is([type=checkbox], [type=radio], [type=file]), .btn):not(:disabled) {
+		cursor:pointer;
+	}
+
+	[inert], :disabled { opacity:.4; }
+
+	/* form */
+
+	legend { padding-inline: .4em; }
+
+	input, textarea, select, button, .btn {
+		padding:.2em;
+		border:1px solid rgba(0,0,0,.5);
+		font: inherit;
+		line-height:var(--line-height);/* needed as font:inherit does inherit line-height */
+		--line-height:normal;
+		/* try to match immutable select-line-height (best fit line-height:1.19?) "normal" not work in chrome unless not -webkit-appearance: none; */
+	}
+	button, .btn {
+		padding-inline:.7em;
+	}
+
+
+	select { background-color:Field; }
+	textarea {
+		vertical-align: baseline;
+		vertical-align: -webkit-baseline-middle;
+	}
+	textarea { resize: vertical; }
+
+	input:not([type=radio], [type=checkbox], [type=file], [type=date], [type=time], [type=datetime-local], [type=color]), textarea { inline-size:13rem; }
+	input:where([type=range]) { vertical-align:middle }
+
+	:focus::placeholder { opacity: .2; }
+
+	/* animatable dialog and popover */
+	dialog, [popover], ::backdrop, :fullscreen { 
+		transition-behavior: allow-discrete;
+		transition-property: opacity, overlay, display;
+		/*transition-duration: 0.3s; todo? */
+		opacity: 0;
+	}
+
+	dialog:is(:modal,[open]), :popover-open, :fullscreen {
+		&, &::backdrop {
+			opacity: 1;
+			@starting-style { opacity: 0; } /* seams to work now */
+		}
+	}
+
+	::backdrop { transition-duration:inherit; }
+
+	[popover] { inset: auto; }/* ok? una: https://x.com/Una/status/1917662266427859202 */
+
+}
+
+/* outside layer, other ways it will be overwritten by a simple "a" selector */
+.btn {
+	inline-size: fit-content;
+	text-decoration: none;
+	color:inherit;
+	&:not([hidden]) { display:inline-block; }
+}

package/css/base/beta.css

@@ -1,50 +1,34 @@
-:where(*, ::before, ::after) {
-	background-size: contain; /* or cover? */
-	background-position: 50% 50%;
-	border-style:solid; /* default to solid but 0px */
-	border-width:0;
-}
-[type=number] { text-align: end; }
-legend {
-	padding-left: .3em;
-	padding-right: .3em;
-}
-tbody, thead, tfoot {
-	vertical-align: inherit;
-}
-
-select, summary, label, button:not(:disabled), [type=checkbox], [type=radio], [type=file], .btn, ::file-selector-button {
-	touch-action: manipulation;
-}
-button, ::file-selector-button, .btn {
-	user-select: none;
-}
-.btn {
-	inline-size: fit-content;
-	text-decoration: none;
-}
-
-
-
-/* what could go wrong? *
-*, ::after, ::before,  ::backdrop {
-    transition-behavior: allow-discrete;
-}
-working example (https://jsfiddle.net/befn3wvc/64/)
-/* */
-
-
-
-
-
-
-
-
-
-
-
-/*
-body {
-	background-image: var(--report-to);
-}
-*/
+@layer normalize {
+
+:where(*, ::before, ::after) {
+	background-size: contain; /* or cover? */
+	background-position: 50% 50%;
+	border-style:solid; /* default to solid but 0px */
+	border-width:0; /* removes default borders at fieldset, dialog, ... */
+}
+[type=number] { text-align: end; }
+tbody, thead, tfoot {
+	vertical-align: inherit;
+}
+select, summary, label, button:not(:disabled), [type=checkbox], [type=radio], [type=file], .btn, ::file-selector-button {
+	touch-action: manipulation;
+}
+button, ::file-selector-button, .btn {
+	user-select: none;
+}
+
+}
+
+/* what could go wrong? *
+*, ::after, ::before,  ::backdrop {
+    transition-behavior: allow-discrete;
+}
+working example (https://jsfiddle.net/befn3wvc/64/)
+/* */
+
+
+/*
+body {
+	background-image: var(--report-to);
+}
+*/

package/css/base/full.css

@@ -1,5 +1,5 @@
-
-@import "../norm/norm.css";
-@import "./base.css";
-@import "./nomotion.css" prefers-reduced-motion;
-@import "./print.css" print;
+
+@import "../norm/norm.css";
+@import "./base.css";
+@import "./nomotion.css" prefers-reduced-motion;
+@import "./print.css" print;

package/css/base/nomotion.css

@@ -1,9 +1,9 @@
-@media (prefers-reduced-motion) {
-    *, ::before, ::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-        background-attachment: initial;
-    }
+@media (prefers-reduced-motion) {
+    *, ::before, ::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+        background-attachment: initial;
+    }
 }

package/css/base/print.css

@@ -1,36 +1,36 @@
-/*
-resources:
-- https://github.com/h5bp/main.css/blob/main/src/_print.css
-*/
-
-@media print {
-
-	*, ::before, ::after {
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-
-	html {
-		--width:auto;
-		--color-bg:#fff;
-		--color-text:#000;
-		/*font-size:12pt; ?? */
-	}
-
-	header, footer {
-		display: none;
-	}
-
-	a:link:after {
-		content: " (" attr(href) ") ";
-		font-size:.9em;
-	}
-	a[href^="#"]:after, a[href^="javascript:"]:after {
-		content: "";
-	}
-
-	a:link {
-		text-decoration: underline;
-	}
-
-}
+/*
+resources:
+- https://github.com/h5bp/main.css/blob/main/src/_print.css
+*/
+
+@media print {
+
+	*, ::before, ::after {
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+
+	html {
+		--width:auto;
+		--color-bg:#fff;
+		--color-text:#000;
+		/*font-size:12pt; ?? */
+	}
+
+	header, footer {
+		display: none;
+	}
+
+	a:link:after {
+		content: " (" attr(href) ") ";
+		font-size:.9em;
+	}
+	a[href^="#"]:after, a[href^="javascript:"]:after {
+		content: "";
+	}
+
+	a:link {
+		text-decoration: underline;
+	}
+
+}

package/css/classless/README.md

@@ -1,14 +1,20 @@
 # classless.css
-null
+Applies color vars and minimal styling to plain HTML — buttons, links, typography, background. No classes involved.
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/css/classless/classless.css" rel=stylesheet>
+```
 
 ## 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)  
+[aria.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/aria.html)  
 [variables.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/variables.html)  
+[more.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/more.html)  
+[simple.html](http://gcdn.li/u2ui/u2@main/css/classless/tests/simple.html)  
 
 ## Resources
 

package/css/classless/aria.css

@@ -1,64 +1,51 @@
-
-/* [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;
-}
-*/
+/* [aria-label] as tooltip */
+[aria-label]::before {
+  content:attr(aria-label);
+  position:absolute;
+  transform:translate(-2rem, -130%);
+  display:none;
+  border-radius:.2rem;
+  padding:.3rem .5rem;
+  filter: drop-shadow(0 0 .3em #0008);
+  background-color:#000;
+  color:#fff;
+  font-size:.8rem;
+  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 */
+
+[role=note] {
+  background-color: var(--accent-light);
+}