stitch2 0.22.9 → 0.22.10

package/dist/elements.js

@@ -37,14 +37,22 @@ export const screenLocale = () => globalThis.__stitch2?.lang;
  */
 let idCount = 0;
 const ID_REFS = ['for', 'aria-labelledby', 'aria-describedby', 'aria-controls', 'aria-owns', 'aria-activedescendant', 'list'];
-function uniqueIds(content) {
+function uniqueIds(content, replacing) {
+    // The element's children are about to be replaced, not duplicated. Their IDs may also be
+    // referenced from outside the component (labels, descriptions and navigation anchors).
+    const occupied = new Set(Array.from(document.querySelectorAll('[id]'))
+        .filter((el) => !replacing.contains(el)).map((el) => el.id));
     const renamed = new Map();
     for (const el of Array.from(content.querySelectorAll('[id]'))) {
-        if (!document.getElementById(el.id))
+        if (!occupied.has(el.id))
             continue;
-        const next = el.id + '-s2-' + ++idCount;
+        let next;
+        do
+            next = el.id + '-s2-' + ++idCount;
+        while (occupied.has(next) || content.getElementById(next));
         renamed.set(el.id, next);
         el.id = next;
+        occupied.add(next);
     }
     if (!renamed.size)
         return;
@@ -95,7 +103,7 @@ export function defineElements(components, options) {
                         if (typeof props[key] === 'string' && !root.hasAttribute(`data-${key}`))
                             root.setAttribute(`data-${key}`, props[key]);
                 }
-                uniqueIds(t.content);
+                uniqueIds(t.content, this);
                 this.replaceWith(t.content);
                 if (options.after && !pending++)
                     queueMicrotask(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.22.9",
+  "version": "0.22.10",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",

package/skills/stitch2/references/components.md

@@ -61,6 +61,10 @@ never patch the bundle or restyle the element on a screen. Props are the element
 an empty attribute is true) and its content is children. A component the screens need but the app lacks is
 added to the app first, with the same name.
 
+Keep native field IDs and their external label, ARIA and fragment references stable when nesting components.
+`stitch2/elements` preserves IDs from the element being replaced; only real collisions outside that element
+are renamed, together with references inside the component. Test both cases when changing a shared form.
+
 ## Colours come from DESIGN.md
 
 Every colour on a screen and in a component is one of DESIGN.md's: a token class (`bg-surface`,