u2ui 1.0.1 → 1.4.6

package/el/tabs/README.md

@@ -1,5 +1,5 @@
 # <u2-tabs> - element
-rendering tabs
+Turns HTML structures with headings into an interactive, tabbed interface, using the content between headings as each tab’s content.
 
 ## Features
 
@@ -11,37 +11,37 @@ rendering tabs
 ## Usage
 
 ```html
-<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>
+    <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>
 ```
 
 ```css
-u2-tabs {
-    max-height:30rem;
+u2-tabs {
+    max-height:30rem;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tabs/tabs.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tabs/tabs.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/tabs/tabs.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/tabs/tabs.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/tabs/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/tabs/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/tabs/tests/minimal.html)  
 
 ## About
 

package/el/tabs/manifest.json

@@ -1,59 +1,44 @@
-{
-    "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"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "tabs.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "",
+            "name": "U2Tabs",
+            "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": "U2Tabs",
+                "module": "tabs.js"
+            }
+        }]
+    }]
+}

package/el/tabs/tabs.css

@@ -1,23 +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;
+/*
+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

@@ -1,210 +1,192 @@
-// 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'});
-    }
-}
-*/
+// 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,
+};
+
+export default class U2Tabs 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?
+
+        this._onTitleClick = this._onTitleClick.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+        this._update = this._update.bind(this);
+
+        this._tabsSlot = shadowRoot.querySelector('#tabs');
+        this._panelsSlot = shadowRoot.querySelector('#panels');
+        this._tabsSlot.addEventListener('slotchange', this._update);
+        this._panelsSlot.addEventListener('slotchange', this._update);
+        this._tabsSlot.addEventListener('click', this._onTitleClick);
+        this._tabsSlot.addEventListener('keydown', this._onKeyDown);
+
+        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.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.tabIndex = select ? 0 : -1;
+            tab.ariaSelected = select;
+            this.panels[i].tabIndex = select ? 0 : -1; // chrome needs tabindex=-1 for scrollable areas
+            this.panels[i].hidden = select ? false : 'until-found';
+        }
+    }
+
+    _update() {
+        this.tabs = this._tabsSlot.assignedNodes({ flatten: true });
+        this.panels = this._panelsSlot.assignedNodes({ flatten: true }).filter(el => el.nodeType === Node.ELEMENT_NODE);
+        for (let panel of this.panels) panel.role = 'tabpanel';
+        for (let tab of this.tabs) tab.role = 'tab';
+        this._selectTab(this._selected);
+    }
+
+    connectedCallback() {
+        for (let child of this.children) if (tagToTab[child.tagName]) child.slot = 'title';
+        this._update();
+        this.selected = this._findFirstSelectedTab() || 0;
+    }
+
+    _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]?.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);
+            this._selectTab(this._selected);
+        }
+    }
+
+}
+customElements.define('u2-tabs', U2Tabs);
+
+// 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/textfit/README.md

@@ -4,28 +4,28 @@ Exactly fit text
 ## Usage
 
 ```html
-<u2-textfit>
-    <span contenteditable>Textfit</span>
+<u2-textfit>
+    <span contenteditable>Textfit</span>
 </u2-textfit>
 ```
 
 ```css
-u2-textfit {
-    font-size: clamp(20px, var(--js-font-size), 400px);
+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>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/textfit/textfit.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/textfit/textfit.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)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/textfit/tests/minimal.html)  
 
 ## About