u2ui 1.0.0

package/css/norm/norm.css

@@ -0,0 +1,98 @@
+:where(html) {
+	/* Chrome rounds computed line-height:
+	16px (font-size) * 1.15 (line-height) = 18.4px (line-height);
+	But chrome uses 18px. So use a number that gives full pixels. (1.124 or 1.1875) */
+	line-height: 1.1875;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
+:where(h1) {
+	font-size: 2em; /* Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
+	margin-block: 0.67em;
+}
+:where(dl, ol, ul) :where(dl, ol, ul) {
+	margin: 0; /* Remove the margin on nested lists in Chrome and Safari. */
+}
+:where(hr) {
+	color: inherit; /* Correct the inheritance of border color in Firefox. */
+}
+:where(abbr[title]) {
+	-webkit-text-decoration: underline dotted; /* safari (does not support unprefixed shorthand) */
+    text-decoration-thickness: .08em; /* safari, chrome to match firefox */
+	text-underline-offset: 0.1em; /* safari, chrome to match firefox */
+}
+:where(b, strong) {
+	font-weight: bolder; /* Add the correct font weight in Chrome and Safari. */
+}
+:where(small) {
+	font-size: 80%; /* Add the correct font size in all browsers. */
+}
+:where(table) {
+	border-color: currentColor; /* Correct table border color in Chrome and Safari. */
+	/* text-indent: 0; will enable it if someone has a need for it */
+}
+:where(textarea, button, input, select) { /* textarea: Firefox, all:Safari */
+	margin: 0;
+}
+:where(textarea) { /* behave like in firefox */
+	baseline-source: first; /* available in chrome 111, safari no */
+}
+:where(button, input:is([type="button"], [type="reset"], [type="submit"])) {
+	-webkit-appearance: button; /* Correct the inability to style buttons in iOS and Safari. */
+}
+:where([type="search"]) {
+	-webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari. */
+	/* outline-offset: -2px; /* Correct the outline style in Safari. Get worse in chrome... */
+}
+:where(::-webkit-search-decoration) {
+	-webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS. */
+}
+:where(::placeholder) { /* Correct the text style of placeholders in Chrome and Safari. */
+	color: inherit;
+	opacity: .54;
+}
+:where(::-webkit-file-upload-button) {
+	-webkit-appearance: button; /* Correct the inability to style upload buttons in iOS and Safari. */
+	font: inherit; /* Change font properties to `inherit` in Safari. */
+}
+:where(:-moz-ui-invalid) { /* Remove the additional :invalid styles in Firefox. */
+	box-shadow: none;
+}
+:where(summary) { /* Add the correct display in safari 14 */
+	display: list-item;
+}
+:where(search) {
+	display:block;
+}
+:where([inert]) { /* ch < 102 sf < 15.5 ff < 112 */
+	pointer-events: none;
+	cursor: default;
+	-webkit-user-select: none;
+	user-select: none;
+}
+/* :where([inert], [inert] *) { too slow
+	/* user-modify: read-only !important; no effect? * /
+	-webkit-user-select: none;
+	user-select: none;
+} */
+
+:where([popover]) {
+    position: fixed;
+    width: fit-content;
+    height: fit-content;
+    color: canvastext;
+    background-color: canvas;
+    inset: 0;
+    margin: auto;
+    border-width: initial;
+    border-style: solid;
+    border-color: initial;
+    border-image: initial;
+    padding: 0.25em;
+    overflow: auto;
+}
+@supports not selector(:popover-open) {
+    :where([popover]) {
+        display: none;
+    }
+}

package/css/norm/oldies.css

@@ -0,0 +1,60 @@
+hr {
+    box-sizing: content-box; /* firefox 57- https://bugzilla.mozilla.org/show_bug.cgi?id=1377188 */
+    height: 0; /* fixed */
+    overflow: visible; /* ie edge 18- */
+}
+pre, code, kbd, samp {
+    font-family: monospace, monospace; /* Consolas on windows? Correct the inheritance and scaling of font size in all browsers. */
+    font-size: 1em; /* Correct the odd `em` font sizing in all browsers. */
+}
+table {
+    text-indent: 0; /* Remove text indentation from table contents in Chrome and Safari. */
+}
+select, button {
+    text-transform: none; /* Remove the inheritance of text transform in Firefox. */
+}
+progress {
+    vertical-align: baseline; /* needed? (firefox, chrome, safari: vertical-align: -0.2em) */
+}
+audio:not([controls]) { /* "Add the correct display in iOS 4-7". do we need it? display is inline but its still hidden!? */
+    display: none;
+    height: 0;
+}
+ol ol, ol ul, ul ol, ul ul {
+  margin: 0;  /* ie edge18- */
+}
+main {
+    display: block; /* ie */
+}
+a {
+    background-color: transparent; /* ie 10 */
+}
+svg:not(:root) {
+    overflow: hidden; /* ie */
+}
+button {
+    overflow: visible; /* ie */
+    text-transform: none; /* edge 18- ff? ie */
+}
+input {
+    overflow: visible; /* edge18- ie */
+}
+legend {
+    box-sizing: border-box; /* ie edge18- */
+    color: inherit; /* ie */
+    display: table; /* ie edge18- */
+    max-width: 100%; /* ie edge18- */
+    white-space: normal; /* ie edge18- */
+}
+progress {
+    display: inline-block; /* ie edge18- */
+}
+textarea {
+    overflow: auto; /* ie */
+}
+details {
+    display: block; /* ie edge18- */
+}
+template {
+    display: none; /* ie */
+}

package/css/norm/tests/test.html

@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width">
+
+  <title>Level.css TEST</title>
+
+  <script src="./test.js" type=module async></script>
+
+  <link rel="stylesheet" href="../oldies.css">
+  <link rel="stylesheet" href="../norm.css">
+  <link rel="stylesheet" href="../beta.css">
+
+  <style>
+    body {
+      display: grid;
+      gap:1rem;
+      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    }
+    body > * {
+      background:#eee;
+      min-height:300px;
+    }
+  </style>
+
+</head>
+
+<body>
+
+
+<section>
+  <b>line-height should be 1.1875</b>
+  <table>
+    <tr>
+      <td>font-size:
+      <td id=fontSizeOut>
+    <tr>
+      <td>line-height:
+      <td id=lineHeightOut>
+    <tr>
+      <td>line-height unitless:
+      <td id=lineHeightOutRelative style=font-weight:900>
+  </table>
+  <div id=lineHeightTest style="box-shadow:0 0 4px">
+    Testing this<br>
+    5 Lines<br>
+    height:<br>
+    Expected: <b id=lineHeightExpected>x</b><br>
+    Result: <b id=lineHeightResult>x</b>
+  </div>
+  <script>
+    setInterval(function(){
+      var style = getComputedStyle(document.documentElement);
+      var fontSize   = style.fontSize.replace('px','');
+      var lineHeight = style.lineHeight.replace('px','');
+      fontSizeOut.innerHTML = fontSize;
+      lineHeightOut.innerHTML = lineHeight;
+      lineHeightOutRelative.innerHTML = parseFloat(lineHeight) / parseFloat(fontSize);
+
+      var testHeight = lineHeightTest.offsetHeight;
+      var expected = 5 * 1.1875 * parseFloat(fontSize);
+      lineHeightExpected.innerHTML = '(5*1.1875*'+parseFloat(fontSize)+ ') = '+expected;
+      lineHeightResult.innerHTML   =  testHeight + 'px';
+    },100)
+  </script>
+</section>
+
+
+
+<div>
+  <b>h1</b>
+  <br>
+  H1 in a section should have same font-size and same margins
+  <div style="display:flex; gap:20px">
+    <div>
+      <h1>H1 in div</h1>
+      more content
+    </div>
+    <section>
+      <h1>H1 in section</h1>
+      more content
+    </section>
+  </div>
+</div>
+
+<section>
+  <b>Nested dl, ol, ul</b>
+  <div id=listTests style="height:500px">
+    <dl>
+      <dt>
+        dl dl:
+        <dl>
+          <dt>dl > dt > dl > dt</dt>
+          <dd>dl > dt > dl > dd</dd>
+        </ol>
+      </dt>
+      <dd>dl > dd</dd>
+      <dt>
+        dl ol:
+        <ol>
+          <li>dl > dt > ol > li</li>
+        </ol>
+      </dt>
+      <dd>dl > dd</dd>
+      <dt>
+        dl ul:
+        <ul>
+          <li>dl > dt > ul > li</li>
+        </ul>
+      </dt>
+      <dd>dl > dd</dd>
+    </dl>
+    <ol>
+      <li>
+        ol dl:
+        <dl>
+          <dt> ol > li > dl > dt </dt>
+          <dd> ol > li > dl > dd </dd>
+        </dl>
+      </li>
+    </ol>
+    <ul>
+      <li>
+        ul dl:
+        <dl>
+          <dt> ul > li > dl > dt </dt>
+          <dd> ul > li > dl > dd </dd>
+        </dl>
+      </li>
+    </ul>
+  </div>
+  <style>
+    #listTests * {
+      line-height:1.15;
+      outline:1px solid red;
+    }
+    #listTests dl dl,
+    #listTests dl ol,
+    #listTests dl ul,
+    #listTests ol dl,
+    #listTests ul dl {
+      outline-color:green;
+      z-index:1;
+      position:relative;
+    }
+  </style>
+
+</section>
+
+<section>
+  <b>hr</b>
+  <br>
+  border-color sould be blue<br>
+  height should be 0 (red background-color not visible)<br>
+  should overflow wrapper element (content-box, width:100%)
+  <div id=hr-wrapper>
+    <hr id=hr>
+  </div>
+  <style style="display:block; white-space:pre">
+    #hr-wrapper {
+      color:blue;
+      width:60%;
+      box-shadow:0 0 5px green;
+    }
+    #hr {
+      background-color:red;
+      border:10px solid;
+      margin:0;
+      width:100%;
+    }
+  </style>
+</section>
+
+<section>
+  <b>abbr[title]</b>
+  <br>
+  <abbr title="Cascading Style Sheets">I should have dotted underline</abbr>
+  <br>
+  <abbr>I not</abbr>
+</section>
+
+<section style="line-height:1.3">
+  <b>b, string</b>
+  <br>
+  font-weight:100:
+  <div id=b-wrapper>
+    <div style="font-weight:100">
+      <span>span</span> <br>
+      <b>this is a b</b>, <strong>strong</strong>
+    </div>
+    font-weight:400:
+    <div style="font-weight:400">
+      <span>span</span> <br>
+      <b>this is a b</b>, <strong>strong</strong>
+    </div>
+    font-weight:500:
+    <div style="font-weight:500">
+      <span>span</span> <br>
+      <b>this is a b</b>, <strong>strong</strong>
+    </div>
+    font-weight:600:
+    <div style="font-weight:600">
+      <span>span</span> <br>
+      <b>this is a b</b>, <strong>strong</strong>
+    </div>
+  </div>
+  <style>
+    #b-wrapper {
+      font-family:system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue";
+    }
+    #b-wrapper > div {
+      font-size:27px;
+      box-shadow: 0 0 5px;;
+    }
+  </style>
+</section>
+
+<section style="line-height:1.3; font-size:30px">
+  <b>pre, code, kbd, samp</b>
+  <pre>pre
+12345</pre>
+  <code>code</code> <span style="font-family: monospace;">span mono</span>  <span>span</span><br>
+  <kbd>kbd</kbd> <span style="font-family: monospace;">span mono</span>  <span>span</span><br>
+  <samp>samp</samp> <span style="font-family: monospace;">span mono</span>  <span>span</span><br>
+</section>
+
+<section style="line-height:1.3; font-size:30px">
+  <b>small</b><br>
+  has font-size 80%<br>
+  <span style="font-size:80%">span 80%</span> | <small>small 80%?</small>
+</section>
+
+<section>
+  <b>table</b>
+  <br>
+  border-color should be currentColor not grey.
+  <div id=table-wrapper>
+    <table id=table>
+      <tr>
+        <td>Table Cell<br>Table Cell line 2
+    </table>
+  </div>
+  <style>
+    #table-wrapper {
+      font-size:30px;
+      border-color:green;
+    }
+    #table {
+      border-width:10px;
+      border-style:solid;
+    }
+  </style>
+</section>
+
+<section>
+  <b>button, input, select: margin:0</b>
+  <br>
+  <button>Button</button><input><select><option></select><br>
+  <button>Button</button><input><select><option></select><br>
+  <hr>
+  <b>button, select text-transform not inherited</b>
+  <br>
+  <div style=text-transform:uppercase>
+    UpperCase<br>
+    <button>Button</button><input value=input><select><option>select</select>
+  </div>
+
+  <hr>
+  <b>input size-attr</b>
+  <br>
+  <table>
+    <tr>
+      <td>size=1
+      <td><input size="1">
+    <tr>
+      <td>size=4
+      <td><input size="4">
+    <tr>
+      <td>size=20
+      <td><input size="20">
+    <tr>
+      <td>no size
+      <td><input>
+
+  </table>
+
+</section>
+
+
+<section>
+  /**
+  * Correct the inability to style buttons in iOS and Safari.
+  */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  <button>test</button>
+</section>
+
+<section>
+  <b>progress element should be vertical-align baseline</b>
+  <br>
+  <div style="line-height:2em; outline:1px solid green">
+    Synergistically network sticky potentialities and installed base systems.<br>
+    Synergistically network.
+    <progress id="file" max="100" value="70">70%</progress>
+  </div>
+</section>
+
+<section style="line-height:1.5">
+  <b>textarea</b><br>
+  <b>margin:0</b>
+  <br>
+  <div style="border:1px solid">
+    <textarea></textarea>g
+  </div>
+  <div style="border:1px solid">
+    <textarea style="margin:0">referenz</textarea>g
+  </div>
+
+  <b>baseline-source:first</b>
+  <div style="border:1px solid;">
+    baseline<textarea style="vertical-align: baseline;">vertical-align:baseline</textarea>
+  </div>
+</section>
+
+<section>
+  <b>type=search</b>
+  <input type=search>
+  <input value="normal textfield as reference">
+  <pre>
+  Correct the odd appearance in Chrome and Safari.
+  [type="search"] {
+    -webkit-appearance: textfield;
+  }
+  Remove the inner padding in Chrome and Safari on macOS.
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  </pre>
+</section>
+
+<section>
+  <pre>
+  Correct the cursor style of increment and decrement buttons in Safari.
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+ <input type="number" step="1" value="1">
+</section>
+
+<section>
+  <b>placeholder</b>
+  <br>
+  not a fixed color, instead opacity. color inherits
+  <input placeholder=placeholder-text style="background-color:rgb(117, 117, 117); color:#fff">
+</section>
+
+<section>
+  <b>file button</b>
+  <input type=file>
+  /**
+  * 1. Correct the inability to style upload buttons in iOS and Safari.
+  * 2. Change font properties to `inherit` in Safari.
+  */
+ ::-webkit-file-upload-button {
+   -webkit-appearance: button; /* 1 */
+   font: inherit; /* 2 */
+ }
+</section>
+
+
+<section>
+  <b>:invalid</b>
+  <br>
+  should not have invalid style by default<br>
+  type something and blur
+  <input required pattern=x value=y id=invalidTest>
+  <script>
+    invalidTest.value = 'u';
+  </script>
+</section>
+
+<!--section>
+  <div style="position:relative">
+    <button onclick="this.nextElementSibling.toggleAttribute('open')">toggle dialog</button>
+    <dialog id="favDialog" open>
+      <form method="dialog">
+        <p>
+          <label>Favorite animal:
+            <select>
+              <option></option>
+              <option>Brine shrimp</option>
+              <option>Red panda</option>
+              <option>Spider monkey</option>
+            </select>
+          </label>
+        </p>
+        <menu>
+          <button value="cancel">Cancel</button>
+          <button id="confirmBtn" value="default">Confirm</button>
+          <button type=button onclick="this.closest('dialog').append('test '.repeat(10000))">Add lot of contents</button>
+        </menu>
+      </form>
+    </dialog>
+    Some Text. Phosfluorescently evolve cross-media models with progressive markets. Dynamically scale frictionless innovation rather than cross-unit interfaces. Intrinsicly aggregate backward-compatible models and strategic quality vectors. Objectively e-enable resource sucking value vis-a-vis go forward leadership. Quickly integrate fully tested channels rather than enabled catalysts for change. Phosfluorescently seize cross-platform benefits with.
+  </div>
+</section-->
+
+
+<section>
+
+  <details id=summaryTest>
+    <summary>No list-style-type</summary>
+    <p>More info about the details.</p>
+  </details>
+
+  <details id=summaryTest>
+    <summary style="list-style-type:circle">list-style-type:circle</summary>
+    <p>More info about the details.</p>
+  </details>
+
+  <details id=summaryTest>
+    <summary style="list-style-type:armenian">list-style-type:armenian</summary>
+    <p>More info about the details.</p>
+  </details>
+
+</section>

package/css/norm/tests/test.js

@@ -0,0 +1,103 @@
+//import './../cssChecker.js';
+
+let html = `
+<form id=testTools>
+    <table>
+        <!--tr>
+            <td>Hue:
+            <td><input type=range name=hsl-h unit="" min=0 max=360>
+        <tr>
+            <td>Saturation:
+            <td><input type=range name=hsl-s unit="%">
+        <tr>
+            <td>Lightness:
+            <td><input type=range name=hsl-l unit="%">
+        <tr>
+            <td>Radius:
+            <td><input type=range name=radius min=0 max=1 step=any unit="rem">
+        <tr>
+            <td>Gap:
+            <td><input type=range name=gap min=.5 max=4 step=any unit="rem">
+        -->
+    </table>
+    <div class=Table id=tStyleSheets>
+    </div>
+    <span style="font-size:2em; position:absolute; right:0; bottom:0" onclick="this.closest('#testTools').classList.toggle('-Mini')">🡙</span>
+</form>
+
+<style>
+#testTools {
+    position:fixed;
+    bottom:10px;
+    right:10px;
+    background:#fff;
+    box-shadow:0 0 10px;
+    font-size:15px;
+    line-height:1.2;
+    font-family:arial;
+    color:#000;
+    --line-height:1.2;
+}
+#testTools.-Mini {
+    height:40px;
+    overflow:hidden;
+}
+#testTools table,
+.Table {
+    width:100%;
+    display:table;
+    border-collapse: collapse;
+    text-indent: 0;
+}
+.Table > * {
+    display:table-row;
+}
+.Table > * > * {
+    display:table-cell;
+}
+#testTools td,
+.Table > * > * {
+    padding:.4em .8em;
+    border-bottom:1px solid #eee;
+}
+#testTools input:not([type=checkbox], [type=radio]) {
+    width:120px;
+    padding:0;
+}
+#testTools input {
+    margin:0;
+}
+</style>
+`;
+
+document.body.insertAdjacentHTML('beforeend',html);
+const els = testTools.elements;
+function resetInputs(){
+    Array.from(els).forEach(el=>{
+        const style = getComputedStyle(document.documentElement);
+        let value = style.getPropertyValue('--'+el.name);
+        value = parseFloat(value);
+        el.value = value;
+    })
+}
+resetInputs();
+testTools.addEventListener('input', ({target})=>{
+    console.log(target)
+    document.documentElement.style.setProperty('--'+target.name, target.value + target.getAttribute('unit') );
+});
+
+
+testTools.contentEditable = false;
+
+document.querySelectorAll('link[rel=stylesheet]').forEach(link=>{
+    const name = link.href.replace(/.*\/([^/]+)/,'$1');
+    const label = document.createElement('label');
+    label.innerHTML = '<span><input type=checkbox></span><span>'+name+'</span>';
+    const input = label.querySelector('input')
+    input.checked = !link.disabled;
+    tStyleSheets.append(label);
+    label.addEventListener('change',function(){
+        link.disabled = !input.checked;
+        setTimeout(resetInputs,200)
+    })
+})