u2ui 1.0.0

package/el/tabs/manifest.json

@@ -0,0 +1,59 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "tabs.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "tabs",
+                    "members": [
+                        {
+                            "kind": "property",
+                            "name": "select",
+                            "description": "Set or get the selected tab by index (0-n)"
+                        }
+                    ],
+                    "events": [
+                        {
+                            "name": "u2-activate"
+                        }
+                    ],
+                    "attributes": [
+                        {
+                            "name": "selected",
+                            "description": "Set or get the selected tab by index (0-n)",
+                            "type": "number"
+                        }
+                    ],
+                    "cssParts": [
+                        {
+                            "name": "tablist",
+                            "description": "The tab list container"
+                        },{
+                            "name": "panels",
+                            "description": "The tab panels container"
+                        }
+
+                    ],
+                    "superclass": { "name": "HTMLElement" },
+                    "tagName": "u2-tabs",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "u2-tabs",
+                    "declaration": {
+                        "name": "tabs",
+                        "module": "tabs.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/el/tabs/tabs.css

@@ -0,0 +1,23 @@
+/*
+there are no style-fallbacks for tabs, as without js, they should be headings and paragraphs
+*/
+
+u2-tabs [role="tab"] {
+    border-bottom: solid transparent;
+    white-space: nowrap;
+    cursor: pointer;
+    padding: .4rem 1rem;
+    margin: 0;
+    font-size:1rem;
+    font-weight:bold;
+    outline:0;
+}
+u2-tabs [role="tab"][aria-selected="true"] {
+    border-bottom-color: var(--color);
+}
+u2-tabs [role="tab"]:hover, [role="tab"]:focus {
+    background-color: #0000000a;
+}
+u2-tabs [role="tabpanel"] {
+    padding: 1rem;
+}

package/el/tabs/tabs.js

@@ -0,0 +1,210 @@
+// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
+
+const tagToTab = {
+    H1:1,
+    H2:1,
+    H3:1,
+    H4:1,
+    H5:1,
+    H6:1,
+    BUTTON:1,
+};
+
+customElements.define('u2-tabs', class extends HTMLElement {
+
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+        <style>
+        :host {
+            display: flex;
+            flex-direction:column;
+        }
+        #tabs {
+            flex:0 0 auto;
+            display:flex;
+            overflow: auto;
+            scroll-snap-type: x mandatory;
+            scrollbar-width: none;  /* hide scrollbars Firefox */
+        }
+        #tabs::-webkit-scrollbar {
+            display:none;  /* hide scrollbars (Safari and Chrome) */
+        }
+        #panels {
+            display:grid;
+            min-height:0;
+        }
+        #panels::slotted(*)  {
+            grid-area:1/1;
+            overflow:auto;
+            opacity:1;
+            display:block;
+        }
+        #panels::slotted([hidden="until-found"]) {
+            content-visibility:visible;
+            opacity:0;
+            z-index:-1;
+        }
+        </style>
+        <slot part=tablist id=tabs name=title role=tablist></slot>
+        <slot part=panels id=panels></slot>
+        `;
+        // slot tablist: when i add tabindex=-1, tabs are also no more keyboard focusable! (tested ch,ff) Why?
+
+        // Save refer to we can remove listeners later.
+        this._onTitleClick = this._onTitleClick.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+
+        this.addEventListener('beforematch', e=>{
+            let el = e.target;
+            while (el && el.parentNode) {
+                if (el.parentNode === this) {
+                    e.preventDefault();
+                    this.selected = this.tabs.indexOf(el.previousElementSibling);
+                    return;
+                }
+                el = el.parentElement;
+            }
+        })
+    }
+
+    get selected() {
+        return this._selected;
+    }
+
+    set selected(index) {
+        this._selected = index;
+        this._selectTab(index);
+        this.setAttribute('selected', index);
+    }
+    _selectTab(idx = null) { // todo? merge into `set selected()`?
+        for (let i = 0, tab; tab = this.tabs[i]; ++i) {
+            let select = i === idx;
+            tab.setAttribute('tabindex', select ? 0 : -1);
+            tab.setAttribute('aria-selected', select);
+            this.panels[i].setAttribute('tabindex', select ? 0 : -1); // chrome needs tabindex=-1 for scrollable areas
+            if (select) {
+                this.panels[i].removeAttribute('hidden');
+            } else {
+                this.panels[i].setAttribute('hidden', 'until-found');
+            }
+        }
+    }
+
+    connectedCallback() {
+        const tabsSlot = this.shadowRoot.querySelector('#tabs');
+        const panelsSlot = this.shadowRoot.querySelector('#panels');
+
+        for (let child of this.children) if (tagToTab[child.tagName]) child.slot = 'title';
+
+        const update = ()=>{
+            this.tabs = tabsSlot.assignedNodes({flatten: true});
+            this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => el.nodeType === Node.ELEMENT_NODE);
+            for (let panel of this.panels.values()) {
+                panel.setAttribute('role', 'tabpanel');
+            }
+            for (let tab of this.tabs.values()) {
+                tab.setAttribute('role', 'tab');
+            }
+            this.selected = this.selected;
+        }
+
+        update();
+        tabsSlot.addEventListener('slotchange', update);
+        panelsSlot.addEventListener('slotchange', update);
+
+        tabsSlot.addEventListener('click', this._onTitleClick);
+        tabsSlot.addEventListener('keydown', this._onKeyDown);
+
+        this.selected = this._findFirstSelectedTab() || 0;
+    }
+
+    disconnectedCallback() {
+        const tabsSlot = this.shadowRoot.querySelector('#tabs');
+        tabsSlot.removeEventListener('click', this._onTitleClick);
+        tabsSlot.removeEventListener('keydown', this._onKeyDown);
+    }
+
+    _onTitleClick({target}) {
+        if (target.slot === 'title') { // todo closest?
+
+            // beta, should not be here but in "_selectTab"?
+            let event = new CustomEvent('u2-activate', { bubbles: true, cancelable: true });
+            target.dispatchEvent(event);
+            if (event.defaultPrevented) return;
+
+            this.selected = this.tabs.indexOf(target);
+
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center'
+            });
+
+            target.focus();
+        }
+    }
+
+    _onKeyDown(e) {
+        if (e.ctrlKey || e.altKey || e.metaKey) return;
+        let index;
+        switch (e.code) {
+            case 'ArrowUp': case 'ArrowLeft':
+                index = this.selected - 1;
+                break;
+            case 'ArrowDown': case 'ArrowRight':
+                index = this.selected + 1;
+                break;
+            default:
+                return
+        }
+        e.preventDefault();
+        this.tabs[index] && this.tabs[index].click();
+
+    }
+
+    _findFirstSelectedTab() {
+        let index;
+        for (let [i, tab] of this.tabs.entries()) {
+            if (tab.hasAttribute('selected')) index = i;
+        }
+        return index;
+    }
+
+    static observedAttributes = ['selected'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'selected') {
+            this.selected = parseInt(newValue);
+        }
+    }
+
+});
+
+// beta, does not work if initial u2-target is already fired
+// problem: sometimes, on initial load, the event is fired before the listener is added
+document.addEventListener('u2-target', e => {
+    let tabs = document.querySelectorAll('u2-tabs > :target');
+    for (let tab of tabs) tab.click();
+});
+
+
+/* slide
+:host #panels {
+    border: 2px solid;
+    display:flex;
+    overflow:hidden;
+}
+:host #panels::slotted(*) {
+    flex:1 0 100%;
+    opacity:1;
+    visibility:visible;
+}
+_selectTab(idx = null) {
+    for (let i = 0, tab; tab = this.tabs[i]; ++i) {
+        ...
+        //if (select) this.panels[i].scrollIntoView({behavior: 'smooth'});
+    }
+}
+*/

package/el/tabs/tests/minimal.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+    <link href="../../../css/classless/full.css" rel=stylesheet>
+    <link href="../../../css/classless/simple.css" rel=stylesheet>
+    <link href="../../../attr/skin/skin.css" rel=stylesheet>
+
+    <link rel=stylesheet href="../tabs.css">
+    <script src="../tabs.js" type=module async></script>
+
+<body>
+
+    <section class=main>
+        <u2-tabs>
+            <h4>Tab 1</h4>
+            <article>
+                Content 1, consectetur adipisicing elit, sed do eiusmod tempor 
+                incididunt ut labore et dolore magna aliqua.
+            </article>
+            <h4>Tab 2</h4>
+            <article>
+                Content 2, lorem ipsum dolor sit amet, consectetur adipisicing elit
+                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </article>
+        </u2-tabs>
+    </section>
+
+    <style class=main>
+        u2-tabs {
+            max-height:30rem;
+        }
+    </style>

package/el/tabs/tests/test.html

@@ -0,0 +1,180 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <!--link rel=stylesheet href="../../../css/classless/aria.css"-->
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+
+    <link rel=stylesheet href="../tabs.css">
+    <script src="../tabs.js" type=module async></script>
+
+    <script type=module async src=../../../attr/navigatable/navigatable.js crossorigin></script>
+
+</head>
+
+<body>
+
+    <header>
+        <h1>u2-tabs tests</h1>
+        As you use the browsers search funktion, you find the contents of the tab-panels. (chrome for now)
+    </header>
+
+    <section>
+        <h2>Simple Tablist</h2>
+        <u2-tabs>
+            <h2>H2 as Tab</h2>
+            <section>Heading Elements (h1-h6) are automatically used as tabs</section>
+            <div slot=title>Div as Tab</div>
+            <section>If you like to use other Elements as tabs, you have to add the attribute <code>slot="title"</code></section>
+            <h2>Title 3</h2>
+            <section>content panel 3</section>
+        </u2-tabs>
+    </section>
+
+    <section>
+        <h2>Tablist browser-navigatable tabs (beta)</h2>
+        <u2-tabs>
+            <h2 u2-navigatable id="nav1">H2 as Tab</h2>
+            <section>Heading Elements (h1-h6) are automatically used as tabs</section>
+            <div slot=title u2-navigatable id="nav2">Div as Tab</div>
+            <section>If you like to use other Elements as tabs, you have to add the attribute <code>slot="title"</code></section>
+            <h2 u2-navigatable id="nav3">Title 3</h2>
+            <section>content panel 3</section>
+        </u2-tabs>
+    </section>
+
+    <section>
+        <h2>max-height</h2>
+        <u2-tabs style="max-height:20rem">
+            <h2>Title</h2>
+            <section>
+                <p>Phosfluorescently aggregate premium collaboration and idea-sharing through strategic e-commerce. Authoritatively negotiate error-free channels through value-added processes. Globally matrix superior manufactured products whereas dynamic markets. Authoritatively disintermediate sustainable initiatives via revolutionary quality vectors. Monotonectally expedite fully tested synergy before transparent imperatives.</p>
+                <p>Synergistically envisioneer team building ideas via competitive methodologies. Synergistically embrace sustainable relationships via adaptive benefits. Phosfluorescently integrate cross-unit technologies with cross-platform growth strategies. Globally reconceptualize bleeding-edge paradigms for turnkey technology. Interactively monetize efficient human capital rather than an expanded array of synergy.</p>
+                <p>Uniquely expedite interactive services rather than functionalized opportunities. Compellingly synthesize dynamic information and worldwide initiatives. Competently reintermediate sustainable networks through resource sucking manufactured products. Phosfluorescently synergize cross-platform mindshare and market-driven expertise. Competently innovate cutting-edge methodologies vis-a-vis fully researched action items.</p>
+                <p>Credibly maintain reliable synergy before cutting-edge leadership. Efficiently enable efficient strategic theme areas before timely ROI. Phosfluorescently integrate standardized customer service through cross functional synergy. Objectively matrix high-payoff expertise without standardized users. Monotonectally engineer B2B opportunities via functional supply chains.</p>
+                <p>Uniquely synthesize resource sucking leadership skills before multimedia based leadership skills. Interactively restore visionary innovation whereas end-to-end platforms. Compellingly evisculate client-centered human capital after value-added e-markets. Compellingly whiteboard high standards in vortals vis-a-vis.</p>
+            </section>
+            <h2>Title 2</h2>
+            <section>content panel 2</section>
+            <h2>Title 3</h2>
+            <section>content panel 3</section>
+        </u2-tabs>
+    </section>
+
+    <section>
+        <h2>Too many tabs</h2>
+        <u2-tabs>
+            <h2>Title</h2>
+            <section>content panel 1</section>
+            <h2>Title 2</h2>
+            <section>content panel 2</section>
+            <h2>Title 3</h2>
+            <section>content panel 3</section>
+            <h2>Title 4</h2>
+            <section>content panel 4</section>
+            <h2>Title 5</h2>
+            <section>content panel 5</section>
+            <h2>Title 6</h2>
+            <section>content panel 6</section>
+            <h2>Title 7</h2>
+            <section>content panel 7</section>
+            <h2>Title 8</h2>
+            <section>content panel 8</section>
+            <h2>Title 9</h2>
+            <section>content panel 9</section>
+            <h2>Title 10</h2>
+            <section>content panel 10</section>
+            <h2>Title 11</h2>
+            <section>content panel 11</section>
+            <h2>Title 12</h2>
+            <section>content panel 12</section>
+        </u2-tabs>
+    </section>
+
+    <section>
+        <h2>Nested</h2>
+        <u2-tabs>
+            <h2>Title 1</h2>
+
+                <u2-tabs>
+                    <h3>Item 1.1</h3>
+                    <section>Item 1 content</section>
+                    <h3>Item 1.2</h3>
+                    <section>Item 2 content</section>
+                    <h3>Item 1.3</h3>
+                    <section>Item 3 content</section>
+                    <h3>Item 1.4</h3>
+                    <section>Item 1 content</section>
+                </u2-tabs>
+
+            <h2>Title 2</h2>
+            <section>content panel 2</section>
+            <h2>Title 3</h2>
+            <section>content panel 3</section>
+            <h2>Title</h2>
+            <section>content panel 1</section>
+        </u2-tabs>
+    </section>
+
+
+    <style>
+        #styled u2-tabs {
+            border-radius: .5rem;
+            border:1px solid;
+            overflow:hidden;
+            box-shadow:var(--shadow);
+        }
+        #styled u2-tabs::part(tablist) {
+            justify-content: center;
+            color:#fff;
+            background:var(--color);
+        }
+        #styled u2-tabs::part(panels) {
+            background:#eee8;
+        }
+        #styled u2-tabs [role="tab"] {
+            padding:.5rem 1rem;
+        }
+        #styled u2-tabs [role="tab"][aria-selected="true"] {
+            border-bottom-color: transparent;
+            background:#0003;
+        }
+        #styled u2-tabs [role="tab"]:focus {
+            border-bottom-color: transparent;
+            background:#0005;
+        }
+        #styled [role=tabpanel] {
+            transition:.6s;
+        }
+    </style>
+
+    <section id=styled>
+        <h2>Nested, styled</h2>
+        <u2-tabs>
+            <h2>Title 1</h2>
+
+                <div>
+                    <u2-tabs>
+                        <h3>Item 1.1</h3>
+                        <section>Item 1 content</section>
+                        <h3>Item 1.2</h3>
+                        <section>Item 2 content</section>
+                        <h3>Item 1.3</h3>
+                        <section>Item 3 content</section>
+                        <h3>Item 1.4</h3>
+                        <section>Item 1 content</section>
+                    </u2-tabs>
+                </div>
+
+            <h2>Title 2</h2>
+            <section>content panel 2</section>
+            <h2>Title 3</h2>
+            <section>content panel 3</section>
+            <h2>Title</h2>
+            <section>content panel 1</section>
+        </u2-tabs>
+    </section>

package/el/textfit/README.md

@@ -0,0 +1,34 @@
+# <u2-textfit> - element
+Exactly fit text
+
+## Usage
+
+```html
+<u2-textfit>
+    <span contenteditable>Textfit</span>
+</u2-textfit>
+```
+
+```css
+u2-textfit {
+    font-size: clamp(20px, var(--js-font-size), 400px);
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/textfit/textfit.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/textfit/textfit.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/textfit/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/textfit/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. ♥
+

package/el/textfit/manifest.json

@@ -0,0 +1,45 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "textfit.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "textfit",
+                    "members": [
+                    ],
+                    "events": [
+                    ],
+                    "attributes": [
+                    ],
+                    "cssProperties": [
+                        {
+                            "name": "--js-font-size",
+                            "syntax": "<length>",
+                            "description": "Read only! The optimal font-size. This var can be used like this: font-size: clamp(14px, var(--js-font-size), 24px);"
+                        }
+                    ],
+                    "cssParts": [
+                    ],
+                    "superclass": { "name": "HTMLElement" },
+                    "tagName": "u2-textfit",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "u2-textfit",
+                    "declaration": {
+                        "name": "textfit",
+                        "module": "textfit.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/el/textfit/tests/minimal.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <link href="../textfit.css" rel=stylesheet>
+    <script src="../textfit.js" type=module async></script>
+
+<body>
+
+<section class="main">
+    <u2-textfit>
+        <span contenteditable>Textfit</span>
+    </u2-textfit>
+</section>
+
+<style class="main">
+    u2-textfit {
+        font-size: clamp(20px, var(--js-font-size), 400px);
+    }
+</style>

package/el/textfit/tests/test.html

@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+
+    <link rel=stylesheet href="../textfit.css">
+    <script src="../textfit.js" type=module async></script>
+
+</head>
+
+<body>
+
+    <section>
+
+        <div style="max-width:10rem; margin:auto; background-color:#eee; padding:1em">
+            <u2-textfit contenteditable>CSS IS</u2-textfit>
+            <u2-textfit contenteditable style="font-weight:bold">AWESOME</u2-textfit>
+        </div>
+
+    </section>

package/el/textfit/textfit.css

@@ -0,0 +1,6 @@
+u2-textfit {
+    display:block;
+    white-space:nowrap;
+    font-size:var(--js-font-size);
+    font-size: clamp(11px, var(--js-font-size), 400px);
+}