u2ui 1.5.1 → 1.5.2

package/el/accordion/accordion.js

@@ -1,17 +1,15 @@
+import U2Element from '../../u2/Element.js';
 
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
 
-export default class U2Accordion extends HTMLElement {
+export default class U2Accordion extends U2Element {
 
     constructor() {
         super();
 
-        import('../ico/ico.js');
-
         let shadowRoot = this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
+        this.useEl('ico');
         shadowRoot.innerHTML = `
         <style>
-        @import url('${icoCssUrl}');
         :host {
             display:block;
             gap:.5em;

package/el/alert/alert.js

@@ -1,8 +1,6 @@
-
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+import U2Element from '../../u2/Element.js';
 
 const style = `
-@import url('${icoCssUrl}');
 :host(:not([dismissable]))::part(close) { display:none; } /* TODO: does not work in chrome */
 :host {
     --u2-ico-dir:var(--u2-ico-dir-material);
@@ -80,14 +78,13 @@ slot[name=icon] {
 /* slot[name=action]:empty-slot { display:none; } not possible */`;
 
 
-export default class U2Alert extends HTMLElement {
+export default class U2Alert extends U2Element {
     constructor() {
         super();
  
-        import('../../attr/focusgroup/focusgroup.js');
-        import('../ico/ico.js');
-
         this.attachShadow({mode: 'open'});
+        this.useEl('ico');
+        this.useAttr('focusgroup');
         this.shadowRoot.innerHTML = `
             <style>${style}</style>
             <div id=container>

package/el/calendar/calendar.js

@@ -1,5 +1,6 @@
+import U2Element from '../../u2/Element.js';
 
-export default class U2Calendar extends HTMLElement {
+export default class U2Calendar extends U2Element {
   static observedAttributes = ['view', 'date', 'lang'];
 
   constructor() {
@@ -8,12 +9,10 @@ export default class U2Calendar extends HTMLElement {
     this._currentDate = new Date();
     this._locale = null;
     this._weekStart = 0; // 0 = Sunday .. 6 = Saturday
-    import('../ico/ico.js');
-    const icoCssUrl = import.meta.resolve('../ico/ico.css');
+    this.useEl('ico');
 
     this.shadowRoot.innerHTML = `
       <style>
-        @import url('${icoCssUrl}');
         :host {
           display: flex;
           flex-direction: column;
@@ -295,7 +294,7 @@ export default class U2Calendar extends HTMLElement {
 
 
 
-class U2CalendarItem extends HTMLElement {
+class U2CalendarItem extends U2Element {
   static observedAttributes = ['start', 'end'];
 
   constructor() {

package/el/fields/fields.js

@@ -1,8 +1,9 @@
-export default class U2Fields extends HTMLElement {
+import U2Element from '../../u2/Element.js';
+export default class U2Fields extends U2Element {
     constructor() {
         super();
         this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
-        import('../responsive/responsive.js');
+        this.useEl('responsive');
 
         this.shadowRoot.innerHTML = `
             <style>
@@ -11,7 +12,7 @@ export default class U2Fields extends HTMLElement {
                     margin-block:.5rem;
                     white-space:nowrap;
                 }
-                u2-responsive {
+                #container { /* out-specify responsive.css, which useEl now adopts */
                     display: grid;
                     align-items:baseline;
                     grid-template-columns: auto 1fr;

package/el/input/input.js

@@ -1,3 +1,4 @@
+import U2Element from '../../u2/Element.js';
 // Type-Handler mit Lifecycle
 class TypeHandler {
     constructor(element, shadow) {
@@ -288,7 +289,6 @@ class FileHandler extends TypeHandler {
     }
     get css() {
         return `
-      @import url('${import.meta.resolve('../../class/badge/badge.css')}');
       :host { vertical-align: top; }
       #droparea {
         flex: 1 1 auto;
@@ -334,7 +334,8 @@ class FileHandler extends TypeHandler {
     }
 
     init() {
-        import('../bytes/bytes.js');
+        this.element.useEl('bytes');
+        this.element.useClass('badge');
 
         const browse = this.shadow.getElementById('browse');
 
@@ -433,15 +434,13 @@ const TYPE_REGISTRY = {
 };
 
 // Custom Element
-export default class U2Input extends HTMLElement {
+export default class U2Input extends U2Element {
     constructor() {
         super();
-        import('../ico/ico.js');
-
         const shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
+        this.useEl('ico');
         shadow.innerHTML = `
       <style>
-        @import url('${import.meta.resolve('../ico/ico.css')}');
         
         :host {
           display: inline-block;

package/el/rating/rating.js

@@ -1,7 +1,6 @@
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+import U2Element from '../../u2/Element.js';
 
 const style = `
-@import url('${icoCssUrl}');
 :host {
     --u2-ico-dir: var(--u2-ico-dir-material);
     --color-inactive:#ccc;
@@ -25,15 +24,14 @@ const style = `
 }
 `;
 
-export default class U2Rating extends HTMLElement {
+export default class U2Rating extends U2Element {
     static formAssociated = true;
     #value = null;
     constructor() {
         super();
 
-        import('../ico/ico.js');
-
         this.attachShadow({mode: 'open'});
+        this.useEl('ico');
         this.shadowRoot.innerHTML = `
             <style>${style}</style>
             <div id=stars></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "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/Element.js

@@ -0,0 +1,37 @@
+import { sheet } from './utils.js';
+
+const base = new URL('../', import.meta.url).href; // this copy of u2
+
+/** Base class for u2 elements — keeps a subtree on one u2 version.
+    A scoped shadow root only resolves tags its own registry knows, and a shadow opened
+    without the option silently falls back to the global one. Inheriting it instead means
+    nesting composes: whatever version enhanced the root stays the version all the way down. */
+export default class U2Element extends HTMLElement {
+
+    attachShadow(options) {
+        return super.attachShadow({customElementRegistry: this.customElementRegistry, ...options});
+    }
+
+    useEl(name, options)    { return use(this, 'el', name, options); }
+    useClass(name, options) { return use(this, 'class', name, options); }
+    useAttr(name, options)  { return use(this, 'attr', name, options); }
+}
+
+/** Bring what a child needs into this element's shadow. Both start at once — the css is the
+    part that shows, it must not wait for a module. Defaults follow the category: an el has
+    both, a class is css only, an attr is js only — `u2-skin` is the attr that styles, and it
+    stays an attr because it carries a value: useAttr('skin', {css:true}). */
+function use(el, category, name, {css = category !== 'attr', js = category !== 'class'} = {}) {
+    const path = `${base}${category}/${name}/${name}`;
+    const warn = err => console.warn('u2: could not load', category + '/' + name, err);
+    // unshift, not push: the element's own styles are adopted after these and have to keep
+    // winning ties, no matter when the child's sheet arrives.
+    if (css) sheet(path + '.css').then(s => el.shadowRoot.adoptedStyleSheets.unshift(s), warn);
+    if (!js) return;
+    return import(path + '.js').then(mod => {
+        if (category !== 'el') return; // a class has no js, an attr installs itself
+        const registry = el.customElementRegistry ?? customElements;
+        const tag = 'u2-' + name;
+        registry.get(tag) || registry.define(tag, mod.default);
+    }, warn);
+}

package/u2/enhance.js

@@ -9,29 +9,18 @@ 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';
+import { importCss, sheet } 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 = {}) {

package/u2/plan-scoped-refactoring.md

@@ -263,14 +263,9 @@ Erst ab **Phase 3** relevant:
 
 ## Offen / später
 
-- **`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.
+- **Die übrigen 36 Elemente auf `U2Element`.** Solange eines `extends HTMLElement` bleibt, fällt
+  sein Shadow auf `window.customElements` zurück, sobald es doch mal ein u2-Element rendert.
+  Mechanisch, aber 36 Dateien.
 - **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
@@ -278,4 +273,65 @@ Erst ab **Phase 3** relevant:
   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.
+
+## Erledigt in 1.5.2 — `U2Element`
+
+[`u2/Element.js`](Element.js): Basisklasse, die den Elementen die Registry-Arbeit abnimmt.
+`attachShadow()` belegt `customElementRegistry: this.customElementRegistry` vor — alle
+Aufrufstellen bleiben dadurch **wortgleich wie vorher**. `this.useEl(name)` importiert
+`el/<name>/<name>.js` und definiert die Klasse in die eigene Registry (`?? customElements`).
+Async ist unkritisch: ein Element upgraded auch, wenn es erst nach dem `innerHTML` definiert wird.
+
+Dazu `useClass(name)` und `useAttr(name)`. Alle drei holen ausserdem die **CSS ins eigene Shadow** —
+u2-Elemente haben meist kein eigenes Shadow (`ico` schreibt sein SVG ins Light DOM, `ico.css` stylt
+`u2-ico { … }` von aussen), CSS gehört deshalb immer dem Root, in dem das Kind steht. Der Vater
+musste sie bisher von Hand per `@import` holen, und `fields` vergass `responsive.css` dabei.
+
+**Keine Deklaration am Kind.** Ein `static hasCss` müsste erst per JS geladen werden, bevor die CSS
+überhaupt startet — es macht den wichtigeren Request garantiert langsamer. `projects.json` wäre
+ebenfalls erst ein Fetch (und ist Enhance-Territorium). Also beides parallel, bedingungslos, und die
+Defaults kommen aus der Kategorie — dieselben wie in `enhance`:
+
+| | js | css | Dateien |
+|---|---|---|---|
+| `el` | ja | ja | js 41/41, css 37/41 |
+| `class` | **nein** | ja | js 0/8, css 8/8 |
+| `attr` | ja | **nein** | js 15/16, css 1/16 |
+
+Die Ausreisser gehören an die *Aufrufstelle*, nicht als Feld an alle 41 Elemente:
+`useAttr('skin', {css:true})`. `skin` bleibt dauerhaft ein Attribut, weil es einen Wert trägt —
+als Klasse ginge das erst mit einem Selektor wie `.u2-class-*`.
+
+**Reihenfolge:** adoptierte Sheets kommen *nach* den Tree-Styles, die Kind-CSS würde also die
+Overrides des Vaters schlagen. `use()` macht darum `unshift`, nicht `push` — sobald der `<style>`
+eines Vaters auch mal adoptiert wird, steht er hinter den Kindern, unabhängig davon, wann deren
+Sheet eintrifft. Solange der Vater ein Tree-`<style>` hat, muss er die Kind-Regeln
+**überspezifizieren**. Ein echter Fall bestand: `fields` überschrieb `u2-responsive {display:block}`
+mit `u2-responsive {display:grid}` — Gleichstand, jetzt `#container`.
+
+Die sechs Module, die u2-Elemente in ihr *eigenes* Shadow rendern:
+
+| Modul | Kind |
+|---|---|
+| `alert`, `accordion`, `calendar`, `rating` | `ico` |
+| `input` | `ico`, `bytes` |
+| `fields` | `responsive` |
+
+```js
+export default class U2Alert extends U2Element {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});   // erbt die Registry
+        this.useEl('ico');                   // Klasse in die Registry + ico.css ins Shadow
+        this.useAttr('focusgroup');          // nur js
+```
+
+Ausserhalb eines scoped Roots ist `this.customElementRegistry` `undefined`, die Option gilt als
+abwesend und `useEl()` fällt auf `customElements` zurück — Verhalten unverändert.
+
+Nicht betroffen, bewusst: **Attribute** (`focusgroup`, `draghandle`, `dropzone`, …) sind kein
+Registry-Thema; `table` erzeugt sein `u2-ico` im **Light DOM**, wo `enhance` es ohnehin sieht;
+`input`s `u2-badge` ist eine *Klasse*, kein Tag; `tree`s `u2-ico` ist auskommentiert.
+`U2CalendarItem` erbt `U2Element` mit, obwohl sein Shadow heute keine Custom Elements enthält.
+
 - Scoped-Verkettung von Kind-Elementen in die Eltern-Registry (siehe „Interne Deps").

package/u2/utils.js

@@ -59,3 +59,20 @@ function rootGetStyleWrapper(root) {
     }
     return styleWrapper;
 }
+
+
+///////////////////////////
+// stylesheets
+
+const sheets = new Map();
+/** One parsed CSSStyleSheet per url, shared by every root that adopts it. */
+export 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);
+}