u2ui 1.4.5 → 1.5.0

package/attr/confirm/confirm.js

@@ -2,7 +2,8 @@
 let resentConfirmed = false;
 
 // submit
-// todo: test if it works inside shadow dom
+// idea: test if it works inside shadow dom
+// idea: Alt+click to skip confirmation? but how in the submit path?
 
 document.addEventListener('submit', e=>{
     if (resentConfirmed) return; // dont check again

package/class/unstyle/unstyle.css

@@ -1,6 +1,7 @@
 .u2-unstyle.u2-unstyle.u2-unstyle {
     background-color:unset;
     color: unset;
+    text-align: unset;
     margin: unset;
     padding: unset;
     display: inline;

package/el/alert/alert.css

@@ -6,7 +6,7 @@ u2-alert {
     display:block;
     padding: 1em;
     margin-block: 1em;
-    border: var(--line-width,1px) solid var(--color);
+    border: var(--line-width,1px) solid var(--color, currentColor);
     background-color: var(--color-bg, Canvas);
     width:100%;
     width:-webkit-fill-available;

package/el/calendar/calendar.css

@@ -2,7 +2,7 @@ u2-calendar {
     overflow:auto;
     max-height:90vh;
     &::part(drop-target) {
-        outline: 2px dashed var(--color, #2196f3);
+        outline: 2px dashed var(--color, currentColor);
         z-index: 1;
     }
 }
@@ -11,7 +11,7 @@ u2-calendaritem {
         cursor: move;
     }
     &:focus {
-        outline: 2px dotted var(--color-text, #000);
+        outline: 2px dotted var(--color-text, CanvasText);
     }
 }
 

package/el/input/input.css

@@ -84,12 +84,12 @@ u2-input:where([type="stepper"]) {
 
 u2-input[type="file"] {
     html.u2DraggingFile & {
-        outline: .4rem solid var(--color-light, #0cf);
+        outline: .4rem solid var(--color-light, color-mix(in srgb, currentColor, transparent 60%));
         background-color:#ff6;
         outline-offset: .2rem;
     }
     &.u2DragOver.u2DragOver {
-        outline: .4rem solid var(--color, #0cf);
+        outline: .4rem solid var(--color, currentColor);
         outline-offset: .2rem;
     }
 }

package/el/maintitlebar/maintitlebar.css

@@ -7,7 +7,7 @@ u2-maintitlebar {
     width: env(titlebar-area-width, 100%);
     max-width:100%;
     background-color: var(--color, canvas);
-    color: var(--color-bg);
+    color: var(--color-bg, Canvas);
     z-index: 1000;
     font-size:min(14px, 1rem);
 

package/el/pagination/pagination.css

@@ -9,19 +9,19 @@ u2-pagination nav {
 
     & a {
         display: block;
-        padding: calc(var(--gap) / 2) var(--gap);
+        padding: calc(var(--gap, 1rem) / 2) var(--gap, 1rem);
         text-decoration: none;
         color: inherit;
         text-align: center;
     }
 
     & a:hover {
-        background: var(--color-light);
+        background: var(--color-light, color-mix(in srgb, CanvasText, Canvas 88%));
     }
 
     & a[aria-current="page"] {
         font-weight: bold;
-        background: var(--color);
+        background: var(--color, CanvasText);
         color: white;
     }
 }

package/el/rte/rte.css

@@ -1,6 +1,6 @@
 u2-rte {
     display:block;
-    border:1px solid var(--color-line, #ccc);
+    border:1px solid var(--color-line, color-mix(in srgb, currentColor, transparent 75%));
 }
 
 u2-rte > textarea {

package/el/toc/toc.js

@@ -1,5 +1,7 @@
 import '../../js/navigator/url-change-event.js';
 
+// possible todo: taking headingoffset into account https://w3c.github.io/hackathon-tpac-2024/submissions/bkardell.html
+
 export default class U2Toc extends HTMLElement {
     constructor() {
         super();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",

package/u2/auto.js

@@ -7,33 +7,21 @@ let rootUrl = root.toString();
 
 if (root.host === 'localhost') debug = true;
 
-//let min = '.min';
-
-// get faster cdn updates? https://purge.jsdelivr.net/gh/nuxodin/cleanup.js@latest/
-
 if (debug) { // top level await safari >= 15.1
-    //min = '';
     await Promise.all([
-        //import('https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/mod.min.js'),
-        //import('https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/htmlfills.min.js'),
-        //import('https://cdn.jsdelivr.net/gh/nuxodin/cleanup.js/mod.min.js'),
+        //import('https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/mod.js'),
+        //import('https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/htmlfills.js'),
+        //import('https://cdn.jsdelivr.net/gh/nuxodin/cleanup.js/mod.js'),
     ]);
 }
 
 import {importCss} from './utils.js';
-import {repos} from './u2.js';
-
-const projects = await repos();
+import {enhance} from './enhance.js';
 
 let prio = 1;
 setTimeout(()=>prio = 2);
 setTimeout(()=>prio = 3, 2000);
 const needed = { js:{}, css:{} };
-function impJs(url){
-    if (!url) return;
-    needed.js[url] ??= prio;
-    return import(url);
-}
 function impCss(url, options={}){
     if (!url || url in needed.css) return;
     importCss(url, options).then(res=>{
@@ -69,49 +57,9 @@ impCss(rootUrl+'css/classless/more.css');
 ////////////////////////////////////////////////////////////////
 
 
-function newNode(node){
-    if (node.tagName.startsWith('U2-')) {
-        let name = node.tagName.substring(3).toLowerCase();
-        if (!customElements.get('u2-'+name)) {
-            loadProject('el', name);
-        }
-    }
-    for (const klass of node.classList) {
-        if (!klass.startsWith('u2-')) continue;
-        let name = klass.substring(3);
-        loadProject('class', name);
-    }
-    for (const attr of node.attributes) {
-        if (!attr.name.startsWith('u2-')) continue;
-        let name = attr.name.substring(3).replace(/-.*/,''); // example: u2-href-target => href
-        loadProject('attr', name);
-    }
-}
-
-function loadProject(category, name){
-    const id = category + '/' + name;
-    const meta = projects[id];
-    if (!meta) { console.warn('u2: project not found:', category+'/'+name); return; }
-    const hasJs = meta.js ?? (category==='el' || category==='attr');
-    const hasCss = meta.css ?? (category==='el' || category==='class');
-    hasCss &&  impCss(rootUrl + id + '/' + name + '.css');
-    hasJs && impJs(rootUrl + id + '/' + name + '.js');
-}
-
-function newNodeRoot(node){
-    if (!node.tagName) return;
-    newNode(node);
-    node.querySelectorAll('*').forEach(newNode);
-}
-var mo = new MutationObserver((entries)=>{
-    for (const entry of entries) {
-        for (const node of entry.addedNodes) newNodeRoot(node);
-    }
-});
-
+/** enhance() does the scanning and loading; this file only records it for the ui. */
 export function addShadowRoot(rootNode){
-    mo.observe(rootNode,{childList:true, subtree:true, characterData:false});
-    newNodeRoot(rootNode);
+    return enhance(rootNode, { onLoad: (kind, url) => needed[kind][url] ??= prio });
 }
 addShadowRoot(document.documentElement)
 

package/u2/enhance.js

@@ -0,0 +1,145 @@
+/* Run u2 inside one root: watch it, load what its markup needs and put it there — elements
+in that root's own registry, css as adopted sheets. Unlike ./auto.js this touches nothing
+outside the root: no global stylesheets, no window.customElements, no localStorage, no ui.
+
+In a shadow root the css is an adopted sheet, parsed once and shared by every other root;
+fetching it needs the same connect-src as ./u2.js already does for projects.json. In the
+document it stays a <link>, so the page keeps its say over u2's own rules.
+
+See ./plan-scoped-refactoring.md */
+
+import { repos } from './u2.js';
+import { importCss } from './utils.js';
+
+const base = new URL('../', import.meta.url).href; // this copy of u2 — another root may run another
+const scoped = 'customElementRegistry' in ShadowRoot.prototype;
+// The default scope: module identity gives one per u2 version, so a caller who does not care
+// gets isolation for free. A caller who brings its own wins, and the elements follow the root.
+const versionRegistry = scoped ? new CustomElementRegistry() : undefined;
+const sheets = new Map(); // url -> Promise<CSSStyleSheet>, shared across roots
+
+// the manifest is wanted by every load, so fetch it on import and keep the resolved map
+let projects = null;
+repos().then(map => projects = map);
+
+function sheet(url) {
+    if (!sheets.has(url)) {
+        sheets.set(url, fetch(url).then(r => r.text()).then(css => {
+            const s = new CSSStyleSheet();
+            s.replaceSync(css); // u2 css has no relative url() and no @import
+            return s;
+        }));
+    }
+    return sheets.get(url);
+}
+
+/** Attach a shadow root that runs its own u2. Same signature as the native method. */
+export function attachShadow(host, options = {}) {
+    const registry = options.customElementRegistry ?? versionRegistry;
+    const root = host.attachShadow({ mode: 'open', ...options, customElementRegistry: registry });
+    enhance(root);
+    return root;
+}
+
+/** Watch a root and load the u2 parts its markup uses. Returns a function that stops watching.
+  * The registry is the root's own — define anywhere else and the root would not resolve it.
+  * `onLoad(kind, url)` reports every file, for callers that keep a list of what a page needs. */
+export function enhance(root, { registry = root.customElementRegistry ?? customElements, onLoad } = {}) {
+    const seen = new Set();
+    const isShadow = root instanceof ShadowRoot;
+
+    // Adoption order is the cascade, so the fetch starts at once but the push waits its turn.
+    let queue = Promise.resolve();
+    function addCss(url) {
+        if (!isShadow) return importCss(url); // in the document a <link> keeps the page's say
+        const loading = sheet(url);
+        queue = queue.then(async () => root.adoptedStyleSheets.push(await loading));
+    }
+
+    // norm and base are what a root cannot inherit: box-sizing, font:inherit on form controls,
+    // images that stay inside. Not variables.css — tokens reach a root by inheritance.
+    for (const css of ['css/norm/norm.css', 'css/base/base.css']) {
+        const url = base + css;
+        addCss(url);
+        onLoad?.('css', url);
+    }
+
+    // The repeat case must stay synchronous: a list of 50 identical elements calls this 50
+    // times, and only the first may allocate. Nothing awaits it, so run() catches its own.
+    function load(category, name) {
+        const id = category + '/' + name;
+        if (seen.has(id)) return;
+        seen.add(id);
+        run(id, category, name).catch(err => console.warn('u2: could not load', id, err));
+    }
+
+    async function run(id, category, name) {
+        const meta = (projects ?? await repos())[id];
+        if (!meta) { console.warn('u2: project not found:', id); return; }
+
+        // css belongs in this root: a class or an attribute has no effect without it,
+        // and element css styles the element from outside its own shadow
+        if (meta.css ?? (category !== 'attr')) {
+            const url = `${base}${id}/${name}.css`;
+            // A shadow root shares one parsed sheet with every other root. In the document a
+            // <link> keeps the cascade as it is — an adopted sheet would outrank the page's
+            // own stylesheets and break overrides. (Layers may make this moot one day.)
+            addCss(url);
+            onLoad?.('css', url);
+        }
+        if (!(meta.js ?? (category !== 'class'))) return;
+
+        const jsUrl = `${base}${id}/${name}.js`;
+        const mod = await import(jsUrl);
+        onLoad?.('js', jsUrl);
+        // attributes register nothing — their listeners sit on the document and cross shadow
+        // boundaries on purpose, so they are not scoped by this root
+        if (category !== 'el') return;
+
+        const tag = 'u2-' + name;
+        // the file still registers itself globally — that is a different registry
+        if (!registry.get(tag)) registry.define(tag, mod.default);
+        for (const [t, cls] of Object.entries(mod.extraElements ?? {})) {
+            if (!registry.get(t)) registry.define(t, cls);
+        }
+    }
+
+    // Hot path: every element inserted into the root passes through here. Index loops, so
+    // neither a DOMTokenList nor a NamedNodeMap iterator is allocated per element.
+    function visit(el) {
+        const tag = el.tagName;
+        if (tag.startsWith('U2-')) load('el', tag.slice(3).toLowerCase());
+
+        const cls = el.className; // string on html elements, SVGAnimatedString on svg
+        if (typeof cls === 'string' && cls.includes('u2-')) {
+            const list = el.classList;
+            for (let i = 0, n = list.length; i < n; i++) {
+                const c = list[i];
+                if (c.startsWith('u2-')) load('class', c.slice(3));
+            }
+        }
+
+        const attrs = el.attributes;
+        for (let i = 0, n = attrs.length; i < n; i++) {
+            const name = attrs[i].name;
+            if (name.startsWith('u2-')) load('attr', name.slice(3).replace(/-.*/, ''));
+        }
+    }
+
+    function scan(node) {
+        if (node.nodeType === 1) visit(node); // text and comment nodes carry nothing
+        const els = node.querySelectorAll?.('*');
+        if (els) for (let i = 0, n = els.length; i < n; i++) visit(els[i]);
+    }
+
+    const observer = new MutationObserver(entries => {
+        for (let i = 0, n = entries.length; i < n; i++) {
+            const added = entries[i].addedNodes;
+            for (let j = 0, m = added.length; j < m; j++) scan(added[j]);
+        }
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    scan(root);
+
+    return () => observer.disconnect();
+}

package/u2/plan-scoped-refactoring.md

@@ -131,20 +131,43 @@ sowohl U2Auto als auch der Datei-Side-Effect definieren können).
   - muss **vor** dem ersten scoped ShadowRoot geladen sein,
   - etwas Laufzeit-Overhead,
   - wenige Edge-Cases (`el.constructor`).
+- **Namen (recherchiert, nicht `registry` — das war ein Entwurfsname):**
+  `host.attachShadow({ customElementRegistry })`, Rücklesen über
+  `root.customElementRegistry`, programmatisch
+  `document.createElement(tag, { customElementRegistry })`, nachträglich
+  `registry.initialize(root)`. Chrome/Edge 146+, Safari 26+, Firefox noch nicht.
 - Feature-Detection:
   ```js
-  if (!('registry' in ShadowRoot.prototype))
+  if (!('customElementRegistry' in ShadowRoot.prototype))
     await import('.../scoped-custom-element-registry.min.js');
   ```
   Einmal am Anfang laden, danach funktioniert scoped überall gleich.
 
 ## CSS-Anmerkung
 
-Komponenten-CSS liegt bereits im jeweiligen Shadow der Elemente (z.B. accordion
-importiert `ico.css` in seinen eigenen ShadowRoot). Das globale `impCss` aus auto.js ist
-nur für classless/utilities/base zuständig. Für ein scoped Panel entscheidet man separat,
-ob und welche dieser globalen Stylesheets **in** das Panel-Shadow geladen werden — das ist
-unabhängig vom Element-Registry-Thema.
+Komponenten-CSS liegt teils im Shadow des Elements (accordion importiert `ico.css` in sein
+eigenes Shadow), teils stylt es das Element **von aussen**: `ico.css` setzt
+`u2-ico { --size }` und `u2-ico > svg { height }`. Solches CSS muss in den
+**konsumierenden** Root — ohne es hat `u2-ico` dort keine Grösse. `U2Auto` lädt Element-CSS
+deshalb in seinen Root, nicht ins Dokument.
+
+Das globale `impCss` (classless/utilities/base) bleibt davon unberührt; ob es zusätzlich ins
+Panel-Shadow soll, entscheidet man separat.
+
+**Was in einen Root gehört und was nicht** — die Trennlinie verläuft nach Selektor-Reichweite,
+nicht nach Datei:
+
+| | |
+|---|---|
+| vererbend (Tokens, `line-height`, `hyphens`, `font-family`) | kommt durch die Grenze — **nicht** in `:host` setzen, das wäre ein Zurücksetzen |
+| Element-/Universalselektoren (`*{box-sizing}`, `input{font:inherit}`, `img{max-inline-size}`, `table`, `a`, `h1`) | hält an der Grenze — **nur dafür** adoptiert man ein Sheet |
+| Host-Kasten (`block-size`, `overflow-y`, `scrollbar-gutter`) | gehört gar nicht auf `:host` |
+
+`input, textarea, select, button { font: inherit }` ist der wichtigste: es *stellt* Vererbung
+erst her, die UA-Styles brechen. Ohne diese Regel erbt ein Formularfeld im Root nichts.
+
+Wer in einem Root wirklich neu beginnen will, setzt die Werte selbst — die Sheets tun es nicht
+für ihn.
 
 ## Interne Element-Deps (der harte Teil)
 
@@ -152,24 +175,31 @@ Elemente, die andere u2-Elemente in ihr **eigenes** Shadow rendern, dürfen sich
 auf den globalen Side-Effect verlassen. In einer scoped Registry ist `u2-ico` sonst nicht
 sichtbar.
 
-**Umstellung** (registry-agnostisch, schon heute non-breaking):
+**Gemessen** ([u2/tests/enhance.test.html](tests/enhance.test.html), Chrome nativ):
+
+- Ein im scoped Root geparstes Element trägt die Registry: `el.customElementRegistry === outer`.
+- Aber `el.attachShadow({mode})` **ohne** die Option bekommt `window.customElements` — die
+  Vererbung passiert *nicht* automatisch. **Isolation komponiert nicht von selbst.**
+- Dieselbe Klasse darf in **mehreren** Registries definiert werden. Ein Element braucht darum
+  keine Singleton zu importieren, es folgt seinem Root.
+
+Ein Element muss seine Registry deshalb aktiv weiterreichen, und zwar an beiden Stellen:
 
 ```js
-// vorher (Side-Effect)
-import('../ico/ico.js');
+const registry = this.customElementRegistry ?? customElements;
+this.attachShadow({ mode: 'open', customElementRegistry: registry });
 
-// nachher (explizit + Guard)
 import U2Ico from '../ico/ico.js';
-define('u2-ico', U2Ico);
+registry.define('u2-ico', U2Ico);   // nicht global
 ```
 
-Betroffen u.a.: `accordion`→`ico`, `rating`→`ico`, `buttongroup`→`focusgroup`,
-`fields`→`responsive`.
+Betroffen: `accordion`→`ico`, `alert`→`ico`, `calendar`→`ico`, `rating`→`ico`,
+`input`→`ico`+`bytes`, `fields`→`responsive`.
 
-> Vollständig sauber wird das erst, wenn solche Kind-Elemente in **dieselbe** scoped
-> Registry registriert werden wie das Eltern-Shadow. Für die erste Ausbaustufe (globale
-> Nutzung) reicht die explizite `define()`-Umstellung; die scoped-Verkettung ist ein
-> Folge-Schritt.
+> Ohne diesen Schritt ist die Isolation genau eine Ebene tief: das Panel-Root benutzt seine
+> Version, alles was ein Element in sein *eigenes* Shadow rendert, kommt aus der globalen —
+> also aus der Version der Host-Seite. `enhance` kann das nicht beheben, sein
+> MutationObserver endet an jeder Shadow-Grenze.
 
 ## Migrationsplan (phasenweise)
 
@@ -201,7 +231,9 @@ Nach Phase 1: global unverändert, aber die gesamte Plumbing für scoped ist vor
 6. **Polyfill-Loader** + Feature-Detection einbauen.
 7. **`attachU2Shadow(host)`** exportieren.
 8. CMS-Panel: eigenes Shadow via `attachU2Shadow` erzeugen und dort die isolierte
-   u2-Instanz laufen lassen.
+   u2-Instanz laufen lassen. Scoped werden nur die `u2-*`-Elemente; die eigenen Elemente
+   des Konsumenten bleiben global — sie haben eindeutige Namen, existieren in einer
+   Version, und der Host muss von aussen auffindbar bleiben.
 
 ### Phase 3 — Isolation scharf schalten (der einzige echte Break)
 
@@ -231,6 +263,19 @@ Erst ab **Phase 3** relevant:
 
 ## Offen / später
 
-- **Scoped Attribute-Registry** (`u2-*`-Attribute isoliert): gleiche Factory-Idee wie
-  `U2Auto`, aber eigener Mechanismus. Bewusst **später**, um den Scope hier klein zu halten.
+- **`U2Element` als Basisklasse** (wenn sie kommt) nimmt den Elementen die Registry-Arbeit ab:
+  `attachShadow(options)` überschreiben und `customElementRegistry: this.customElementRegistry`
+  vorbelegen — dann bleiben alle Aufrufstellen wie heute. Dazu ein Einzeiler für Kind-Elemente,
+  etwa `this.registerElement('ico')`: importiert die Klasse, definiert sie in die eigene
+  Registry **und adoptiert `ico.css` ins eigene Shadow**. Beides steht heute von Hand in jedem
+  Modul, und `fields` vergisst die CSS von `responsive` bereits. Async ist unkritisch — ein
+  Element upgraded auch, wenn es erst nach dem `innerHTML` definiert wird.
+  Ein `createElement`-Helper lohnt nicht: `innerHTML` benutzt ohnehin die Registry des Shadows.
+- **Attribute sind kein Registry-Problem.** Sie kollidieren nicht über Namen, sie
+  *installieren sich doppelt*, wenn zwei u2-Kopien laufen. Alle 10 hängen ihre Listener an
+  `document`, vier davon (`confirm`, `dropzone`, `draghandle`, `movable`) benutzen
+  `composedPath()` — sie arbeiten absichtlich über Shadow-Grenzen hinweg, und sie an einen
+  Scope zu binden würde sie kaputtmachen.
+  Zu klären ist deshalb nicht „wie scopen wir", sondern zweierlei: **einmal pro Dokument**
+  installieren, und **pro Modul** entscheiden, welche Wirkung wirklich subtree-lokal ist.
 - Scoped-Verkettung von Kind-Elementen in die Eltern-Registry (siehe „Interne Deps").

package/u2/tools/update.skill.js

@@ -45,6 +45,8 @@ function generateSkillContent(repos) {
     return dedent(`
         # u2 Framework
 
+        <!-- generated by u2/tools/update.skill.js — edit the template there, not this file -->
+
         Modular web component framework.
         https://github.com/u2ui/u2
         
@@ -78,6 +80,8 @@ function generateSkillContent(repos) {
 
         ## CSS
 
+        Everything under \`css/\` is **optional** — wanting only \`u2-alert\` does not drag in \`base.css\`.
+
         auto.js also loads: css/base/base.css, css/classless/variables.css, css/classless/classless.css
 
         Sets sensible defaults — do not re-implement these when base is loaded:

package/u2/u2.js

@@ -14,17 +14,17 @@ u2.el = function(elRepo, options){
 
 
 let cachedRepos = null;
-export async function repos(){
-    if (!cachedRepos) {
-        cachedRepos = {};
-        const data = await fetch(import.meta.url + '/../projects.json').then(res=>res.json());
-        for (const category in data) {
-            for (const repo in data[category]) {
-                cachedRepos[category+'/'+repo] = data[category][repo];
+/** The promise is the cache — caching the object handed a still-empty one to concurrent callers. */
+export function repos(){
+    return cachedRepos ??= fetch(import.meta.url + '/../projects.json')
+        .then(res => res.json())
+        .then(data => {
+            const flat = {};
+            for (const category in data) {
+                for (const repo in data[category]) flat[category+'/'+repo] = data[category][repo];
             }
-        }
-    }
-    return cachedRepos;
+            return flat;
+        });
 }
 
 

package/u2/utils.js

@@ -1,7 +1,7 @@
 ///////////////////////////
 // cssImport
 
-const cssImported = [];
+const cssImported = Object.create(null); // keyed by url — an array here means dictionary mode
 export function importCss(url, options={}) {
     return new Promise((resolve, reject) => {
         const link = _importCss(url, options);