u2ui 1.5.20 → 1.7.5

package/attr/disableif/README.md

@@ -19,6 +19,26 @@ Disable form-elements (like inputs, buttons, fieldsets) based on a condition
 }
 ```
 
+## Conditions
+
+| condition | disabled while |
+|---|---|
+| `name` | a value of `name` is not empty |
+| `!name` | no value of `name` is not empty |
+| `name=v` | a value equals `v` |
+| `name!=v` | no value equals `v` |
+| `name>n`, `name<n` | a value is a number greater / less than `n` |
+
+A field's values are what the form would send under its name (`FormData`): none for an unchecked
+checkbox or a disabled field, several for same-named fields or a `select multiple`, a file by its name.
+So a field disabled by its own condition counts as empty for the conditions that depend on it, and
+chains settle in one go. Each check builds the `FormData`, which fires the form's `formdata` event.
+A field that is not in the form counts as empty, with a warning (a typo?).
+
+Typing applies at once; fields and conditions added, removed or changed in the form apply on the
+next microtask. A value set by script (`input.value = …`) is only seen with an `input` event.
+Removing the attribute leaves the element as it is.
+
 ## Install
 
 ```html
@@ -29,6 +49,7 @@ Disable form-elements (like inputs, buttons, fieldsets) based on a condition
 
 [test.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/test.html)  
 [minimal.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/minimal.html)  
+[disableif.test.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/disableif.test.html) (tests)  
 
 ## About
 

package/attr/disableif/disableif.js

@@ -1,59 +1,86 @@
 import { SelectorObserver } from '../../js/SelectorObserver/SelectorObserver.js';
 
-function checkCondition(el) {
-    const condition = el.getAttribute('u2-disableif');
-
-    const match = condition.match(/^(!?)([^=!<>]*)(=|!=|>|<)?([^=!<>]*)$/);
-    if (match) {
-        let [_, not, field, operator, value] = match;
-        if (not) {
-            if (operator) console.warn(`u2-disableif: "!" operator is not supported with other operators`, { el, field, operator, value });
-            operator = '=';
-        }
-        const target = el.form.elements[field];
-        if (!target) {
-            console.warn(`u2-disableif: field "${field}" not found`, { el, field, operator, value });
-            return;
-        }
-        let stringTargetValue = target.value;
-        if (target.type === 'checkbox') stringTargetValue = target.checked ? target.value : '';
+/** Once per element and problem, not on every update. */
+const warned = new WeakMap();
+function warn(el, problem) {
+    if (warned.get(el) === problem) return;
+    warned.set(el, problem);
+    console.warn('u2-disableif: ' + problem, el);
+}
 
-        const numericTargetValue = parseFloat(stringTargetValue);
-        const numericConditionValue = parseFloat(value);
+/**
+ * Whether the element's condition holds. A field's values are what the form would send under its
+ * name (FormData): none for an unchecked box or a disabled field, several for same-named fields or
+ * a select multiple; a file counts by its name. undefined: no valid condition (yet).
+ */
+function holds(el, data) {
+    const match = el.getAttribute('u2-disableif').match(/^(!?)([^=!<>]*)(=|!=|>|<)?([^=!<>]*)$/);
+    if (!match) return;
+    const [, not, field, operator, value] = match;
+    const form = el.form;
+    // a custom element that is not defined yet is no form field yet: check again once it is
+    const pending = !form.elements[field] && form.querySelector(`:not(:defined)[name="${CSS.escape(field)}"]`);
+    if (pending) { customElements.whenDefined(pending.localName).then(() => schedule(form)); return; }
+    if (not && operator) { warn(el, `"!" cannot be combined with "${operator}"`); return; }
+    if (!form.elements[field]) warn(el, `field "${field}" not found, so it is empty`); // a typo?
+    const values = data.getAll(field).map(v => typeof v === 'string' ? v : v.name);
+    switch (operator) {
+        case '=': return values.includes(value);
+        case '!=': return !values.includes(value);
+        case '>': return values.some(v => parseFloat(v) > parseFloat(value));
+        case '<': return values.some(v => parseFloat(v) < parseFloat(value));
+    }
+    return values.some(Boolean) !== !!not;
+}
 
-        let conditionMet = false;
-        switch (operator) {
-            case undefined:
-                conditionMet = !!stringTargetValue;
-                break;
-            case '=':
-                conditionMet = stringTargetValue === value;
-                break;
-            case '!=':
-                conditionMet = stringTargetValue !== value;
-                break;
-            case '>':
-                conditionMet = numericTargetValue > numericConditionValue;
-                break;
-            case '<':
-                conditionMet = numericTargetValue < numericConditionValue;
-                break;
+/** Applies all conditions of the form, again until nothing changes: disabling a field empties it for
+ *  the conditions that depend on it. A cycle stops after as many passes as there are conditions. */
+function update(form) {
+    const els = [...form.elements].filter(el => el.hasAttribute('u2-disableif'));
+    for (let pass = 0; pass <= els.length; pass++) {
+        const data = new FormData(form); // fires "formdata", once per pass
+        let changed = false;
+        for (const el of els) {
+            const disabled = holds(el, data);
+            if (disabled === undefined || disabled === el.disabled) continue;
+            el.disabled = disabled;
+            changed = true;
         }
-        el.disabled = conditionMet;
+        if (!changed) return;
     }
 }
 
+/** One update per form and `wait` (microtask, frame), however many changes ask for it. */
+const scheduled = new Map();
+function schedule(form, wait = queueMicrotask) {
+    const forms = scheduled.get(wait) ?? scheduled.set(wait, new WeakSet()).get(wait);
+    if (!form || forms.has(form)) return;
+    forms.add(form);
+    wait(() => { forms.delete(form); update(form); });
+}
+
+/** Typing applies at once. Fields and conditions that are added, removed or changed in the form
+ *  apply on the next microtask; one that changes its form also updates the new one. */
+const ATTRIBUTES = ['u2-disableif', 'name', 'form', 'value', 'checked', 'selected', 'multiple', 'type'];
+const watched = new WeakSet();
+function watch(form) {
+    if (!form || watched.has(form)) return;
+    watched.add(form);
+    form.addEventListener('input', () => update(form));
+    form.addEventListener('reset', () => setTimeout(() => update(form))); // the values change after the event
+    new MutationObserver(records => {
+        schedule(form);
+        for (const { target } of records) if (target.form !== form) { watch(target.form); schedule(target.form); }
+    }).observe(form, { subtree: true, childList: true, attributes: true, attributeFilter: ATTRIBUTES });
+}
 
 new SelectorObserver({
     on: (el) => {
-        checkCondition(el);
+        watch(el.form);
+        schedule(el.form);
         // wait for custom-element-inputs
-        // queueMicrotask(()=>checkCondition(el));
-        requestAnimationFrame(()=>checkCondition(el));
-        //setTimeout(()=>checkCondition(el));
-        const form = el.form;
-        el.form.addEventListener('input', () => checkCondition(el));
+        // queueMicrotask(() => schedule(el.form));
+        schedule(el.form, requestAnimationFrame);
+        // setTimeout(() => schedule(el.form));
     },
-    off: (el) => {
-    }
 }).observe('[u2-disableif]');

package/el/calendar/README.md

@@ -1,13 +1,13 @@
 # <u2-calendar> - element  (BETA)
-Calendar / month view component, use `<u2-calendaritem>` as children
+Calendar / month view component, use `<u2-calendar-item>` as children
 
 > Status: BETA — experimental. API and markup may change.
 
 ## Features
 
-- month view
+- month view, always six weeks: every month has the same height
 - lightweight layout and styling
-- supports `u2-calendaritem` children with `start` and `end` attributes
+- supports `u2-calendar-item` children with `start` and `end` attributes
 - events rendered as colored bars spanning multiple days
 - performat and responsive using css grid
 
@@ -21,8 +21,8 @@ u2Calendaritem2.addEventListener('click',()=>{
 
 ```html
 <u2-calendar date="2025-10-01">
-    <u2-calendaritem start="2025-10-09">Demo</u2-calendaritem>
-    <u2-calendaritem start="2025-10-19" end="2025-10-23" id="u2Calendaritem2">Demo 2</u2-calendaritem>
+    <u2-calendar-item start="2025-10-09">Demo</u2-calendar-item>
+    <u2-calendar-item start="2025-10-19" end="2025-10-23" id="u2Calendaritem2">Demo 2</u2-calendar-item>
 </u2-calendar>
   
 ```
@@ -31,7 +31,7 @@ u2Calendaritem2.addEventListener('click',()=>{
 u2-calendar {
   font-size:10px;
 }
-u2-calendaritem {
+u2-calendar-item {
   background-color:var(--color, orange);
   &:hover {
     background-color:var(--color-dark, red);

package/el/calendar/calendar.css

@@ -6,7 +6,7 @@ u2-calendar {
         z-index: 1;
     }
 }
-u2-calendaritem {
+u2-calendar-item {
     &[draggable="true"] {
         cursor: move;
     }
@@ -20,7 +20,7 @@ u2-calendaritem {
 u2-calendar:not(:defined) {
     display:block;
 }
-u2-calendaritem:not(:defined) {
+u2-calendar-item:not(:defined) {
     display:block;
     padding:.2em .9em;
     margin:.2em 0;

package/el/calendar/calendar.js

@@ -62,19 +62,25 @@ export default class U2Calendar extends U2Element {
       </style>
       <div class=navigation>
         <h2></h2>
-        <button onclick="this.getRootNode().host.date = new Date()" style="padding-inline:.5rem">
+        <button name=today style="padding-inline:.5rem">
           Today
         </button>
-        <button onclick="this.getRootNode().host.prev()">
+        <button name=prev>
           <u2-ico icon="chevron-left">&lt;</u2-ico>
         </button>
-        <button onclick="this.getRootNode().host.next()">
+        <button name=next>
           <u2-ico icon="chevron-right">&gt;</u2-ico>
         </button>
       </div>
       <div class=header></div>
       <div class=grid role=grid><slot></slot></div>
     `;
+    // no inline handlers: a CSP without 'unsafe-inline' would block them
+    this.shadowRoot.querySelector('.navigation').addEventListener('click', (e) => {
+      const name = e.target.closest('button')?.name;
+      if (name === 'today') this.date = new Date();
+      else if (name) this[name]();
+    });
   }
 
   _setLocale(localeStr) {
@@ -154,10 +160,9 @@ export default class U2Calendar extends U2Element {
     const firstOfMonth = new Date(Date.UTC(year, month, 1));
     const startOffset = (firstOfMonth.getUTCDay() - this._weekStart + 7) % 7;
 
-    for (let i = 0; i < 42; i++) { // 6 Wochen x 7 Tage
+    for (let i = 0; i < 42; i++) { // always 6 weeks, so every month has the same height
       const date = new Date(Date.UTC(year, month, 1 - startOffset + i));
       const isOtherMonth = date.getUTCMonth() !== month;
-      if (isOtherMonth && i === 35) break; // stop, if other month and last row
       const isToday = date.toDateString() === today.toDateString();
       grid.appendChild(this.createDayCell(date, i, isOtherMonth, isToday));
     }
@@ -190,7 +195,7 @@ export default class U2Calendar extends U2Element {
     });
   }
   _updateLayout() {
-    const items = Array.from(this.querySelectorAll('u2-calendaritem'));
+    const items = Array.from(this.querySelectorAll('u2-calendar-item'));
 
     // Berechne Wochen-Segmente für alle Items
     const itemWeeks = items.map(item => ({
@@ -235,14 +240,11 @@ export default class U2Calendar extends U2Element {
   splitIntoWeeks(start, end, year, month) {
     const weeks = [];
     const firstDay = new Date(Date.UTC(year, month, 1));
-    const monthEnd = new Date(Date.UTC(year, month + 1, 0));
     const startOffset = (firstDay.getUTCDay() - this._weekStart + 7) % 7;
 
     // Calculate the first and last day of the visible calendar view
     const viewStart = new Date(Date.UTC(year, month, 1 - startOffset));
-    const daysInMonth = monthEnd.getUTCDate();
-    const totalDays = Math.ceil((daysInMonth + startOffset) / 7) * 7;
-    const viewEnd = new Date(Date.UTC(year, month, 1 - startOffset + totalDays - 1));
+    const viewEnd = new Date(Date.UTC(year, month, 1 - startOffset + 41)); // 6 weeks, as rendered
 
     // Parse input dates and normalize to start of day
     const eventStart = new Date(start);
@@ -387,4 +389,6 @@ function getTimeFormatter(localeTag, options = { hour: '2-digit', minute: '2-dig
 
 
 customElements.get('u2-calendar') || customElements.define('u2-calendar', U2Calendar);
-customElements.get('u2-calendaritem') || customElements.define('u2-calendaritem', U2CalendarItem);
+customElements.get('u2-calendar-item') || customElements.define('u2-calendar-item', U2CalendarItem);
+
+export const extraElements = { 'u2-calendar-item': U2CalendarItem };

package/el/calendar/ext/drag.js

@@ -17,7 +17,7 @@ function removePart(el, partName) {
 document.addEventListener('dragstart', (e) => {
     const item = e.target.closest('[draggable="true"]');
     if (!item) return;
-    if (item.tagName.toLowerCase() !== 'u2-calendaritem') return;
+    if (item.tagName.toLowerCase() !== 'u2-calendar-item') return;
     draggedItem = item;
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/plain', '');

package/el/calendar/ext/keyNavigation.js

@@ -76,7 +76,7 @@ document.addEventListener('wheel', e => {
 
 // move event by one day left or right
 document.addEventListener('keydown', e => {
-    const item = e.target.closest('u2-calendaritem');
+    const item = e.target.closest('u2-calendar-item');
     if (!item) return;
     if (!item.draggable) return;
 

package/el/calendar/manifest.json

@@ -47,7 +47,7 @@
             "cssProperties": [],
             "cssParts": [],
             "superclass": { "name": "HTMLElement" },
-            "tagName": "u2-calendaritem",
+            "tagName": "u2-calendar-item",
             "customElement": true
         }],
         "exports": [{
@@ -59,7 +59,7 @@
             }
         },{
             "kind": "custom-element-definition",
-            "name": "u2-calendaritem",
+            "name": "u2-calendar-item",
             "declaration": {
                 "name": "U2CalendarItem",
                 "module": "calendar.js"

package/el/{carousel-nav → carouselnav}/README.md

@@ -1,10 +1,10 @@
-# <u2-carousel-nav> - element
+# <u2-carouselnav> - element
 Carousel navigation element for u2-carousel. (beta)
 
 ## Usage
 
 ```html
-<u2-carousel-nav></u2-carousel-nav>
+<u2-carouselnav></u2-carouselnav>
 <u2-carousel>
     <div>Item 1</div>
     <div>Item 2</div>
@@ -13,10 +13,10 @@ Carousel navigation element for u2-carousel. (beta)
 ```
 
 ```css
-u2-carousel-nav > * {
+u2-carouselnav > * {
     transition:.3s;
 }
-u2-carousel-nav > .-active {
+u2-carouselnav > .-active {
     transform:scale(1.2);
 }
 ```
@@ -24,13 +24,13 @@ u2-carousel-nav > .-active {
 ## Install
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/carousel-nav/carousel-nav.js" type=module async></script>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/carouselnav/carouselnav.js" type=module async></script>
 ```
 
 ## Demos
 
-[test.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/test.html)  
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/carouselnav/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/carouselnav/tests/minimal.html)  
 
 ## About
 

package/el/{carousel-nav/carousel-nav.js → carouselnav/carouselnav.js}

@@ -1,13 +1,13 @@
 
 const style = document.createElement('style');
 style.innerHTML = `
-u2-carousel-nav {
+u2-carouselnav {
 	display:flex;
 	justify-content:center;
 	margin:.5rem;
 	gap:.5rem;
 }
-u2-carousel-nav > * {
+u2-carouselnav > * {
 	width:1.2rem;
 	height:1.2rem;
 	border-radius:99rem;
@@ -22,10 +22,10 @@ u2-carousel-nav > * {
 	align-items:center;
 	opacity:.3;
 }
-u2-carousel-nav > :hover {
+u2-carouselnav > :hover {
 	opacity:.6;
 }
-u2-carousel-nav > .-active {
+u2-carouselnav > .-active {
 	opacity:1;
 }
 `
@@ -71,4 +71,4 @@ export default class U2CarouselNav extends HTMLElement {
 		})
 	}
 }
-customElements.get('u2-carousel-nav') || customElements.define('u2-carousel-nav', U2CarouselNav)
+customElements.get('u2-carouselnav') || customElements.define('u2-carouselnav', U2CarouselNav)

package/el/{carousel-nav → carouselnav}/manifest.json

@@ -3,7 +3,7 @@
     "readme": "README.md",
     "modules": [{
         "kind": "javascript-module",
-        "path": "carousel-nav.js",
+        "path": "carouselnav.js",
         "declarations": [{
             "kind": "class",
             "description": "Carousel navigation element for u2-carousel. (beta)",
@@ -16,15 +16,15 @@
             }],
             "cssProperties": [],
             "superclass": { "name": "HTMLElement" },
-            "tagName": "u2-carousel-nav",
+            "tagName": "u2-carouselnav",
             "customElement": true
         }],
         "exports": [{
             "kind": "custom-element-definition",
-            "name": "u2-carousel-nav",
+            "name": "u2-carouselnav",
             "declaration": {
                 "name": "U2CarouselNav",
-                "module": "carousel-nav.js"
+                "module": "carouselnav.js"
             }
         }]
     }]

package/el/{parallax-bg → parallaxbg}/README.md

@@ -1,4 +1,4 @@
-# <u2-parallax-bg> - element
+# <u2-parallaxbg> - element
 Scroll-driven parallax background-layer with dynamic container sizing for full content visibility
 
 ## Features
@@ -13,18 +13,18 @@ Scroll-driven parallax background-layer with dynamic container sizing for full c
 ## Usage
 
 ```html
-<div class=u2-parallax-bg-stage style="height:100%">
-    <u2-parallax-bg>
-        <img src="https://raw.githubusercontent.com/u2ui/u2/main/el/parallax-bg/tests/bg.jpg" alt="parallax-bg demo">
-    </u2-parallax-bg>
+<div class=u2-parallaxbg-stage style="height:100%">
+    <u2-parallaxbg>
+        <img src="https://raw.githubusercontent.com/u2ui/u2/main/el/parallaxbg/tests/bg.jpg" alt="parallaxbg demo">
+    </u2-parallaxbg>
 </div>
 ```
 
 ```css
-u2-parallax-bg {
-    --parallax-bg-speed:.7
+u2-parallaxbg {
+    --parallaxbg-speed:.7
 }
-u2-parallax-bg div {
+u2-parallaxbg div {
     display:grid;
     place-items: center;
 }
@@ -33,16 +33,16 @@ u2-parallax-bg div {
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/parallax-bg/parallax-bg.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/parallax-bg/parallax-bg.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/parallaxbg/parallaxbg.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/parallaxbg/parallaxbg.js" type=module async></script>
 ```
 
 ## Demos
 
-[test.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/test.html)  
-[visible.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/visible.html)  
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/minimal.html)  
-[demo.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/demo.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/parallaxbg/tests/test.html)  
+[visible.html](http://gcdn.li/u2ui/u2@main/el/parallaxbg/tests/visible.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/parallaxbg/tests/minimal.html)  
+[demo.html](http://gcdn.li/u2ui/u2@main/el/parallaxbg/tests/demo.html)  
 
 ## Also interesting
 

package/el/{parallax-bg → parallaxbg}/manifest.json

@@ -3,7 +3,7 @@
     "readme": "README.md",
     "modules": [{
         "kind": "javascript-module",
-        "path": "parallax-bg.js",
+        "path": "parallaxbg.js",
         "declarations": [{
             "kind": "class",
             "description": "Scroll-driven parallax background layer with dynamic container sizing",
@@ -12,20 +12,20 @@
             "events": [],
             "attributes": [],
             "cssProperties": [{
-                "name": "--parallax-bg-speed",
+                "name": "--parallaxbg-speed",
                 "description": "Parallax speed factor (1 = normal scroll speed)",
                 "syntax": "<number>"
             }],
             "superclass": { "name": "HTMLElement" },
-            "tagName": "u2-parallax-bg",
+            "tagName": "u2-parallaxbg",
             "customElement": true
         }],
         "exports": [{
             "kind": "custom-element-definition",
-            "name": "u2-parallax-bg",
+            "name": "u2-parallaxbg",
             "declaration": {
                 "name": "U2ParallaxBg",
-                "module": "parallax-bg.js"
+                "module": "parallaxbg.js"
             }
         }]
     }]

package/el/{parallax-bg/parallax-bg.css → parallaxbg/parallaxbg.css}

@@ -1,10 +1,10 @@
-.u2-parallax-bg-stage {
+.u2-parallaxbg-stage {
     position:relative;
     display: flow-root; /* prevent margin collapse on inner element */
     z-index:0; /* needed? else the parallax-element will go behinde everithing with a stackingcontext? */
 }
 
-u2-parallax-bg {
+u2-parallaxbg {
     position:absolute;
     inset: -.4px; /* ugly strange 1px space see demo */
     z-index:-1;

package/el/{parallax-bg/parallax-bg.js → parallaxbg/parallaxbg.js}

@@ -107,7 +107,7 @@ export default class U2ParallaxBg extends HTMLElement {
         this.visible = this.shadowRoot.querySelector('.visible');
 
         const style = getComputedStyle(this);
-        const speed = style.getPropertyValue('--parallax-bg-speed');
+        const speed = style.getPropertyValue('--parallaxbg-speed');
         this.speed = speed === '' ? .5 : parseFloat(speed);
     }
 	connectedCallback() {
@@ -149,13 +149,13 @@ export default class U2ParallaxBg extends HTMLElement {
         this.mover.style.bottom = -offset + 'px';
 
         // if the element cannot go further down or up
-        // the [parallax-bg-visible] element
+        // the [parallaxbg-visible] element
         // the most complicated part of the lib, seems to work well, but it was born by trial and error
         if (this.speed < 0) {
-            console.warn('parallax-bg: parallax-bg-visible attribute is not implemented for speed < 0');
+            console.warn('parallaxbg: parallaxbg-visible attribute is not implemented for speed < 0');
             return;
         }
-        //const visibleEl = this.querySelector('[parallax-bg-visible]');
+        //const visibleEl = this.querySelector('[parallaxbg-visible]');
         const visibleEl = this.visible;
         if (visibleEl) {
             let top = 0;
@@ -194,4 +194,4 @@ export default class U2ParallaxBg extends HTMLElement {
     }
 }
 
-customElements.get('u2-parallax-bg') || customElements.define('u2-parallax-bg', U2ParallaxBg)
+customElements.get('u2-parallaxbg') || customElements.define('u2-parallaxbg', U2ParallaxBg)

package/el/system/demoHtml.html

@@ -449,7 +449,7 @@ Line 3</pre>
         <img src="https://picsum.photos/id/20/400/200" alt="Slide 2">
         <img src="https://picsum.photos/id/30/400/200" alt="Slide 3">
     </u2-carousel>
-    <u2-carousel-nav for="myCarousel"></u2-carousel-nav>
+    <u2-carouselnav for="myCarousel"></u2-carouselnav>
 
     <hr>
 
@@ -468,8 +468,8 @@ Line 3</pre>
     <hr>
 
     <u2-calendar>
-        <u2-calendaritem date="2025-12-24">Christmas Eve</u2-calendaritem>
-        <u2-calendaritem date="2025-12-31">New Year's Eve</u2-calendaritem>
+        <u2-calendar-item date="2025-12-24">Christmas Eve</u2-calendar-item>
+        <u2-calendar-item date="2025-12-31">New Year's Eve</u2-calendar-item>
     </u2-calendar>
 
     <hr>
@@ -568,9 +568,9 @@ Line 3</pre>
     <hr>
 
     <div style="height: 300px; position: relative; overflow: hidden;">
-        <u2-parallax-bg>
+        <u2-parallaxbg>
             <img src="https://picsum.photos/id/50/800/600" alt="Parallax">
-        </u2-parallax-bg>
+        </u2-parallaxbg>
         <h2 style="position: relative; color: white;">Content on Top</h2>
     </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.20",
+  "version": "1.7.5",
   "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/enhance.js

@@ -98,7 +98,8 @@ export function enhance(root, { registry = root.customElementRegistry ?? customE
     // 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());
+        // the project is the part up to the first hyphen: u2-calendar-item comes with el/calendar
+        if (tag.startsWith('U2-')) load('el', tag.slice(3).toLowerCase().replace(/-.*/, ''));
 
         const cls = el.className; // string on html elements, SVGAnimatedString on svg
         if (typeof cls === 'string' && cls.includes('u2-')) {

package/u2/projects.json

@@ -246,15 +246,7 @@
     },
     "calendar": {
       "name": "calendar",
-      "description": "Calendar / month view component, use `<u2-calendaritem>` as children",
-      "beta": false,
-      "deprecated": false,
-      "css": true,
-      "js": true
-    },
-    "parallax-bg": {
-      "name": "parallax-bg",
-      "description": "Scroll-driven parallax background-layer with dynamic container sizing for full content visibility",
+      "description": "Calendar / month view component, use `<u2-calendar-item>` as children",
       "beta": false,
       "deprecated": false,
       "css": true,
@@ -284,6 +276,14 @@
       "css": true,
       "js": true
     },
+    "carouselnav": {
+      "name": "carouselnav",
+      "description": "Carousel navigation element for u2-carousel. (beta)",
+      "beta": true,
+      "deprecated": false,
+      "css": false,
+      "js": true
+    },
     "fields": {
       "name": "fields",
       "description": "Every content before a form element is considered as label",
@@ -332,6 +332,14 @@
       "css": true,
       "js": true
     },
+    "parallaxbg": {
+      "name": "parallaxbg",
+      "description": "Scroll-driven parallax background-layer with dynamic container sizing for full content visibility",
+      "beta": false,
+      "deprecated": false,
+      "css": true,
+      "js": true
+    },
     "carousel": {
       "name": "carousel",
       "description": "Simple carousel component",
@@ -492,14 +500,6 @@
       "css": true,
       "js": true
     },
-    "carousel-nav": {
-      "name": "carousel-nav",
-      "description": "Carousel navigation element for u2-carousel. (beta)",
-      "beta": true,
-      "deprecated": false,
-      "css": false,
-      "js": true
-    },
     "accordion": {
       "name": "accordion",
       "description": "Turns HTML structures with headings into an accordion, using the content between headings as each panel’s content.",