u2ui 1.0.1 → 1.4.6

package/css/norm/oldies.css

@@ -1,60 +1,71 @@
-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 */
-}
+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 */
+}
+[inert] { /* ch < 102 sf < 15.5 ff < 112 */
+	pointer-events: none;
+	cursor: default;
+	-webkit-user-select: none;
+	user-select: none;
+}
+/* [inert], [inert] *) { too slow
+	/* user-modify: read-only !important; no effect? * /
+	-webkit-user-select: none;
+	user-select: none;
+} */

package/css/{classes → utils}/README.md

@@ -1,13 +1,19 @@
-# classes.css
-deprecated
+# utils.css
+planned
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/css/utils/utils.css" rel=stylesheet>
+```
 
 ## Demos
 
-[test.html](http://gcdn.li/u2ui/u2@main/css/classes/tests/test.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/css/utils/tests/test.html)  
 
 ## Inspiration
 
-https://smolcss.dev/
+https://smolcss.dev/
 https://picocss.com/
 
 ## About

package/css/{classes/classes.css → utils/utils.css}

@@ -1,78 +1,78 @@
-/* namespace-less classes (well known / defacto standards) */
-/*
-## naming
-.sr-only:
-- tailwind
-- firefox-reader-mode
-
-.visually-hidden:
-- h5bp (main.css)
-- bootstrap
-- drupal
-- firefox-reader-mode
-*/
-.visually-hidden {
-    position: absolute !important;
-    padding:0 !important;
-    border:0 !important;
-    clip: rect(0, 0, 0, 0);
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    overflow: clip; /* ch90 ff29 */
-    /*
-    content: url(); /* new idea, ok? screenreaders will read filename * /
-    contain:strict; /* performance? * /
-    white-space: nowrap; /* why * /
-    margin-left:-1px; /* can not reproduce  * /
-    */
-}
-
-/* idea: bigger hit-areas */
-.u2-hitBig {
-    position:relative;
-}
-.u2-hitBig::after {
-    content:'';
-    position:absolute;
-    inset: calc( var(--hit-padding, .5rem) * -1 );
-    background:#f001;
-}
-
-/* rename to u2-pad? */
-.u2-p {
-    padding:1rem;
-}
-.u2-p :first-child {
-    margin-top:0;
-}
-.u2-p :last-child {
-    margin-bottom:0;
-}
-
-/*
-.u2-grow {
-    flex-grow:1;
-}
-.u2-flex-col {
-    display:flex;
-    flex-direction:column;
-}
-
-https://meowni.ca/posts/monica-dot-css/
-
-.horizontal {display: flex; flex-direction: row; justify-content: space-between}
-.vertical {display: flex; flex-direction: column}
-.center {justify-content: center; align-items: center}
-.flex {flex: 1}
-
-tailwind: .w-full
-bootstrap: .w-100
-codyhouse: .width-100%
-bulma: .is-fullwidth
-.u2-width-full {
-    width:100%;
-    width:-moz-available;
-    width:-webkit-fill-available;
-}
-*/
+/* namespace-less classes (well known / defacto standards) */
+/*
+## naming
+.sr-only:
+- tailwind
+- firefox-reader-mode
+
+.visually-hidden:
+- h5bp (main.css)
+- bootstrap
+- drupal
+- firefox-reader-mode
+*/
+.visually-hidden {
+    position: absolute !important;
+    padding:0 !important;
+    border:0 !important;
+    clip: rect(0, 0, 0, 0);
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    overflow: clip; /* ch90 ff29 */
+    /*
+    content: url(); /* new idea, ok? screenreaders will read filename * /
+    contain:strict; /* performance? * /
+    white-space: nowrap; /* why * /
+    margin-left:-1px; /* can not reproduce  * /
+    */
+}
+
+/* idea: bigger hit-areas */
+.u2-hitBig {
+    position:relative;
+}
+.u2-hitBig::after {
+    content:'';
+    position:absolute;
+    inset: calc( var(--hit-padding, .5rem) * -1 );
+    background:#f001;
+}
+
+/* rename to u2-pad? */
+.u2-p {
+    padding:1rem;
+}
+.u2-p :first-child {
+    margin-top:0;
+}
+.u2-p :last-child {
+    margin-bottom:0;
+}
+
+/*
+.u2-grow {
+    flex-grow:1;
+}
+.u2-flex-col {
+    display:flex;
+    flex-direction:column;
+}
+
+https://meowni.ca/posts/monica-dot-css/
+
+.horizontal {display: flex; flex-direction: row; justify-content: space-between}
+.vertical {display: flex; flex-direction: column}
+.center {justify-content: center; align-items: center}
+.flex {flex: 1}
+
+tailwind: .w-full
+bootstrap: .w-100
+codyhouse: .width-100%
+bulma: .is-fullwidth
+.u2-width-full {
+    width:100%;
+    width:-webkit-fill-available;
+    width:stretch;
+}
+*/

package/el/accordion/README.md

@@ -1,59 +1,60 @@
-# <u2-accordion> - element
-rendering accordion
-
-## Features
-
-- Minimal
-- Use markup as usual
-- Navigateable through keys
-- Content is searchable (using `hidden=until-found`)
-
-## Usage
-
-```html
-<u2-accordion single>
-    <h4>Accordion</h4>
-    <article>
-        Content 1, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
-    </article>
-    <h4>Component</h4>
-    <article>
-        Content 2, lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
-    </article>
-</u2-accordion>
-```
-
-```css
-u2-accordion {
-    &::part(trigger) {
-        background-color: #f0f0f0;
-    }
-    &::part(title) {
-        font-size: 1.2em;
-    }
-    &::part(icon) {
-        color: #f00;
-    }
-    &::part(content) {
-        background-color: #f8f8f8;
-    }
-}
-```
-
-## Install
-
-```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/accordion/accordion.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/accordion/accordion.min.js" type=module async></script>
-```
-
-## Demos
-
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/minimal.html)  
-[test.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/test.html)  
-
-## 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. ♥
-
+# &lt;u2-accordion&gt; - element
+Turns HTML structures with headings into an accordion, using the content between headings as each panel’s content.
+
+## Features
+
+- Minimal
+- Use markup as usual
+- Navigateable through keys
+- Content is searchable (using `hidden=until-found`)
+
+## Usage
+
+```html
+<u2-accordion single>
+    <h4>Accordion</h4>
+    <article>
+        Content 1, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
+    </article>
+    <h4>Component</h4>
+    <article>
+        Content 2, lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
+    </article>
+</u2-accordion>
+```
+
+```css
+u2-accordion {
+    &::part(trigger) {
+        background-color: #f0f0f0;
+    }
+    &::part(title) {
+        font-size: 1.2em;
+    }
+    &::part(icon) {
+        color: #f00;
+    }
+    &::part(content) {
+        background-color: #f8f8f8;
+    }
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/accordion/accordion.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/accordion/accordion.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/test.html)  
+[styled.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/styled.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/accordion/tests/minimal.html)  
+
+## 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/el/accordion/accordion.css

@@ -1,7 +1,11 @@
-/*
-there are no style-fallbacks for accordion, as without js, they should be headings and paragraphs
-*/
-
-u2-accordion:not(:defined) {
-    display:contents;
-}
+/*
+there are no style-fallbacks for accordion, as without js, they should be headings and paragraphs
+*/
+
+u2-accordion:not(:defined) {
+    display:contents;
+}
+
+u2-accordion .accTrigger {
+    font-size:inherit;
+}