u2ui 1.0.0 → 1.4.5

package/el/breadcrumb/breadcrumb.js

@@ -0,0 +1,119 @@
+const styleSheet = new CSSStyleSheet();
+styleSheet.replaceSync(`
+    :host { display: flex; }      
+    nav { display: contents; }
+    ol { display: contents; }      
+    li {
+        display: inline-flex;
+        align-items: center;
+    }
+    [part=separator] {
+        content: var(--u2-breadcrumb-separator);
+        margin-inline: var(--u2-breadcrumb-separator-margin-inline);
+
+        &::before {
+            content: inherit; /* does not work in chrome :( */
+            content: var(--u2-breadcrumb-separator);
+        }
+        li:last-child > & {
+            display:none;
+        }
+    }
+`);
+
+export default class U2Breadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
+        const nav = document.createElement('nav');
+        //nav.ariaLabel = this.getAttribute('aria-label') || 'Breadcrumb';
+        nav.ariaLabel ??= 'Breadcrumb';
+        this.ol = document.createElement('ol');
+        nav.append(this.ol);
+        this.shadowRoot.adoptedStyleSheets = [styleSheet];
+        this.shadowRoot.append(nav);
+    }
+    connectedCallback() {
+        this.render();
+        this.observer = new MutationObserver(() => this.render());
+        this.observer.observe(this, { childList: true });
+        if (this.hasAttribute('auto')) {
+            import('../../js/navigator/url-change-event.js');
+            this.generateFromLocation();
+            addEventListener('u2-url-change', ({detail})=>{
+                if (detail.sameDocument) return;
+                setTimeout(()=> this.generateFromLocation() ,20);
+            })
+        }
+    }
+    generateFromLocation() {
+        this.innerHTML = '';
+        const currentUrl = new URL(location.href);
+        const pathParts = currentUrl.pathname.match(/[^/]+\/|[^/]+/g) || [];
+        let currentPath = currentUrl.origin + '/'; // Startet mit der Basis-URL (z.B. https://example.com)
+        const homeLink = document.createElement('a'); // Start-Element "Home" (/)
+        homeLink.textContent = 'Home';
+        homeLink.href = currentUrl.origin + '/';
+        this.append(homeLink);
+
+        pathParts.forEach((part, index) => {
+            currentPath += part;
+            const name = part.replace('/','').replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+            const link = document.createElement('a');
+            link.textContent = name;
+            link.href = currentPath;
+            this.append(link);
+        });
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+
+    render() {
+        const links = Array.from(this.querySelectorAll(':scope > :not(script)'));
+
+        this.ol.innerHTML = '';
+        links.forEach((link, index) => {
+            const li = document.createElement('li');
+            const slot = document.createElement('slot');
+            const separator = document.createElement('span');
+            separator.part = 'separator';
+            //const locationUrl = location.href;
+            //if (link.href === locationUrl) link.ariaCurrent = 'location';
+            requestAnimationFrame(()=>{ // chrome...
+                slot.assign(link);
+            })
+            li.append(slot, separator);
+            this.ol.append(li);
+            const pageUrl = location.href.split('#')[0].split('?')[0];
+            if (link.href === pageUrl) {
+                link.ariaCurrent = 'page';
+                link.dataset.href = link.getAttribute('href');
+                link.removeAttribute('href'); // ok?
+            }
+        });
+
+        // generate json ld
+        const breadcrumbData = {
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            "itemListElement": links.map((link, index) => ({
+                "@type": "ListItem",
+                "position": index + 1,
+                "name": link.textContent.trim(),
+                "item": new URL(link.href, window.location.origin).href
+            }))
+        };
+        this.ldScript.textContent = JSON.stringify(breadcrumbData, null, 2);
+    }
+    get ldScript() {
+        this._ldScript ??= this.querySelector('script[type="application/ld+json"]');
+        if (this._ldScript) return this._ldScript;
+        this._ldScript = document.createElement('script');
+        this._ldScript.type = 'application/ld+json';
+        this.append(this._ldScript);
+        return this._ldScript;
+    }
+}
+
+customElements.define('u2-breadcrumb', U2Breadcrumb);

package/el/breadcrumb/manifest.json

@@ -0,0 +1,42 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "breadcrumb.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A custom HTML element for displaying breadcrumb navigation.",
+            "name": "U2Breadcrumb",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "auto",
+                "type": "boolean",
+                "description": "Automatically generate breadcrumb items based on the current URL path."
+            }],
+            "cssProperties": [{
+                "name": "--u2-breadcrumb-separator",
+                "syntax": "<string>",
+                "default": "'/'",
+                "description": "The separator character between breadcrumb items."
+            },{
+                "name": "--u2-breadcrumb-separator-margin-inline",
+                "syntax": "<length>",
+                "default": "0.4rem",
+                "description": "The horizontal margin around the separator."
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-breadcrumb",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-breadcrumb",
+            "declaration": {
+                "name": "U2Breadcrumb",
+                "module": "breadcrumb.js"
+            }
+        }]
+    }]
+}

package/el/buttongroup/README.md

@@ -1,36 +1,36 @@
-# <u2-buttongroup> - element
-buttongroup element
-
-## Usage
-
-```html
-<u2-buttongroup>
-    <button type=button>Button</button>
-    <button type=button>Group</button>
-    <button type=button>Component</button>
-</u2-buttongroup>
-```
-
-```css
-u2-buttongroup:focus-within {
-    border-color: green;
-}
-```
-
-## Install
-
-```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/buttongroup/buttongroup.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/buttongroup/buttongroup.min.js" type=module async></script>
-```
-
-## Demos
-
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/buttongroup/tests/minimal.html)  
-[test.html](http://gcdn.li/u2ui/u2@main/el/buttongroup/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-buttongroup&gt; - element
+A container for grouping buttons together; buttons that don’t have space will be moved into a dropdown menu.
+
+## Usage
+
+```html
+<u2-buttongroup>
+    <button type=button>Button</button>
+    <button type=button>Group</button>
+    <button type=button>Demo</button>
+</u2-buttongroup>
+```
+
+```css
+u2-buttongroup:focus-within {
+    border-color: green;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/buttongroup/buttongroup.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/buttongroup/buttongroup.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/buttongroup/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/buttongroup/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/buttongroup/buttongroup.css

@@ -1,30 +1,38 @@
-u2-buttongroup {
-    display:inline-flex;
-    white-space: nowrap;
-    max-width:100%;
-    max-width: -webkit-fill-available;
-    max-width: -moz-available;
-    max-width: stretch;
-    
-    xdisplay:flex;
-
-    row-gap: .2em;
-    --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
-    &:not(:defined) {
-        flex-wrap:wrap;
-    }
-}
-
-u2-buttongroup > :not(:last-child) {
-    border-right:0;
-    border-end-end-radius: 0;
-    border-start-end-radius: 0;
-}
-u2-buttongroup > :not(:first-child) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    &:is(u2-splitbutton) > button {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-    }
-}
+u2-buttongroup {
+    display:inline-flex;
+    white-space: nowrap;
+    max-inline-size:100%;
+    max-inline-size:-moz-available;
+    max-inline-size: -webkit-fill-available;
+    max-inline-size: stretch;
+    
+    --u2-ico-dir:var(--u2-ico-dir-material);
+
+    &:not(:defined) {
+        flex-wrap:wrap;
+    }
+
+    &[gap] {
+        gap: var(--line-width, 1px);
+    }
+    &:not([gap]) {
+        & > :not(:last-child) {
+            border-right-width: 0;
+        }
+    }
+}
+
+:is(u2-buttongroup, .S.S.S) {
+    & > :not(:last-child) {
+        border-end-end-radius: 0;
+        border-start-end-radius: 0;
+    }
+    & > :not(:first-child) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+        &:is(u2-menubutton) > button {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+}

package/el/buttongroup/buttongroup.js

@@ -1,56 +1,68 @@
-// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
-
-
-customElements.define('u2-buttongroup', class extends HTMLElement {
-    constructor(...args) {
-        super(...args);
-
-        
-        this.resizeObserver = new ResizeObserver(() => {
-            this._build();
-            console.log('resize');
-        });
-        //import ('../splitbutton/splitbutton.js'); // needs the css too
-
-    }
-
-    _build() {
-        let hasmMore = false;
-        const containerWidth = this.clientWidth;
-        const items = [...this.children].map(btn => {return {btn, width: btn.clientWidth}}); // todo: clientWidth when flex:0 0 auto
-        let fullWidth = items.reduce((acc, item) => acc + item.width, 0);
-        while ( fullWidth > containerWidth) {
-            const item = items.pop();
-            if (item.btn.tagName === 'U2-SPLITBUTTON') continue;
-            const li = document.createElement('li');
-            li.appendChild(item.btn);
-            this.menuButton.querySelector('menu').prepend(li);
-            fullWidth -= item.width;
-            hasmMore = true;
-        }
-        if (hasmMore) {
-            this.appendChild(this.menuButton);
-        }
-    }
-
-    connectedCallback() {
-        requestAnimationFrame(() => {
-            this.menuButton = this.querySelector(':scope > u2-splitbutton');
-            if (!this.menuButton) {
-                this.menuButton = document.createElement('u2-splitbutton');
-                this.menuButton.innerHTML = `
-                <button style="padding-inline:.3em">
-                    <u2-ico inline icon=more_vert>⋮</u2-ico>
-                </button>
-                <menu></menu>
-                `;    
-            }
-            this._build()
-        });
-        this.resizeObserver.observe(this);
-    }
-    disconnectedCallback() {
-        this.resizeObserver.unobserve(this);
-    }
-
-});
+// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
+
+// todo? attribute overflow: scroll | dropdown | break
+
+export default class U2Buttongroup extends HTMLElement {
+    constructor(...args) {
+        super(...args);
+        this.resizeObserver = new ResizeObserver(() => this._build());
+        this.setAttribute('u2-focusgroup','horizontal remember');
+        import('../../attr/focusgroup/focusgroup.js')
+        //import ('../menubutton/menubutton.js'); // needs the css too
+    }
+
+    addItemToMenu(item) {
+        const li = document.createElement('li');
+        li.append(item);
+        this.menuButton.querySelector('menu').prepend(li);
+    }
+    _build() {
+
+        let hasMore = false;
+
+        if (this.scrollWidth <= this.clientWidth) {
+            const li = this.menuButton.querySelector(':scope > menu > :first-child');
+            if (li) {
+                hasMore = true;
+                const item = li.querySelector('*');
+                li.remove();
+                const last = this.querySelector(':scope > :not(u2-menubutton):last-of-type');
+                last ? last.after(item) : this.prepend(item);
+            }
+        }
+        
+        const items = [...this.children].filter(item => item.tagName !== 'U2-MENUBUTTON');
+        
+        while (this.scrollWidth > this.clientWidth) {
+            const item = items.pop();
+            if (!item) break;
+            this.addItemToMenu(item);
+            hasMore = true;
+        }
+
+        hasMore ? this.appendChild(this.menuButton) : this.menuButton.remove();
+    }
+
+    connectedCallback() {
+        this.role ??= 'group';
+        requestAnimationFrame(() => {
+            this.menuButton = this.querySelector(':scope > u2-menubutton');
+            if (!this.menuButton) {
+                this.menuButton = document.createElement('u2-menubutton');
+                //this.menuButton.style['--u2-ico-dir'] = 'var(--u2-ico-dir-material)';
+                this.menuButton.innerHTML = 
+                `<button style="padding-inline:.3em"><u2-ico inline icon=more-vert>⋮</u2-ico></button>
+                <menu></menu>`;    
+            }
+            this._build();
+        });
+        this.resizeObserver.observe(this);
+        this.resizeObserver.observe(this.parentElement);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.unobserve(this);
+        this.resizeObserver.unobserve(this.parentElement);
+    }
+
+}
+customElements.define('u2-buttongroup', U2Buttongroup);

package/el/buttongroup/manifest.json

@@ -0,0 +1,28 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "buttongroup.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A container for grouping buttons together; buttons that don’t have space will be moved into a dropdown menu.",
+            "name": "U2Buttongroup",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-buttongroup",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-buttongroup",
+            "declaration": {
+                "name": "U2Buttongroup",
+                "module": "buttongroup.js"
+            }
+        }]
+    }]
+}

package/el/bytes/README.md

@@ -1,5 +1,5 @@
 # <u2-bytes> - element
-Displays formatted bytess
+Displays formatted bytes
 
 ## Usage
 
@@ -10,14 +10,14 @@ Displays formatted bytess
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/bytes/bytes.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/bytes/bytes.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/bytes/bytes.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/bytes/bytes.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/bytes/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/bytes/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/bytes/tests/minimal.html)  
 
 ## Attributes
 

package/el/bytes/bytes.css

@@ -1,6 +1,6 @@
-u2-bytes {
-    text-align:right; /* if block */
-    /* only as child of a table-cell? (would probably be confusing) */
-    font-variant: tabular-nums;
-    font-feature-settings: "tnum";
-}
+u2-bytes {
+    text-align:right; /* if block */
+    /* only as child of a table-cell? (would probably be confusing) */
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+}