@adia-ai/web-components 0.6.7 → 0.6.9

package/components/code/code.css

@@ -90,7 +90,7 @@
   }
 
   /* Header — chrome band above the code block */
-  > header {
+  & > header {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -103,14 +103,14 @@
     color: var(--code-header-fg);
   }
 
-  > header [slot="label"] {
+  & > header [slot="label"] {
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
   /* Copy button — ghost style */
-  > header [slot="copy"] {
+  & > header [slot="copy"] {
     all: unset;
     cursor: pointer;
     font-size: var(--code-header-font);
@@ -121,7 +121,7 @@
       background var(--code-duration) var(--code-easing),
       color var(--code-duration) var(--code-easing);
   }
-  > header [slot="copy"]:hover {
+  & > header [slot="copy"]:hover {
     background: var(--code-copy-hover-bg);
     color: var(--code-copy-hover-fg);
   }
@@ -129,7 +129,7 @@
   /* Pre > Code — reset any ambient page styling (margins, borders,
      radii, backgrounds) so the <code-ui> chrome is the single source
      of visual framing. */
-  > pre {
+  & > pre {
     margin: 0;
     border: none;
     border-radius: 0;
@@ -141,11 +141,11 @@
     line-height: 1.5;
     scrollbar-width: none;
   }
-  > pre::-webkit-scrollbar {
+  & > pre::-webkit-scrollbar {
     display: none;
   }
 
-  > pre > code {
+  & > pre > code {
     margin: 0;
     padding: 0;
     border: none;
@@ -162,10 +162,10 @@
      a `[data-line-state]` row whose bg picks up the state token. The
      CodeMirror path doesn't use these markers; line decorations there go
      through CM extensions instead. */
-  > pre > code[data-line-state-mode] {
+  & > pre > code[data-line-state-mode] {
     display: block;
   }
-  > pre > code[data-line-state-mode] > [data-line-state] {
+  & > pre > code[data-line-state-mode] > [data-line-state] {
     display: grid;
     grid-template-columns: 1fr;
     /* Bleed the row tint to the pre's padding edges so it reads as a
@@ -173,33 +173,33 @@
     margin-inline: calc(-1 * var(--code-px));
     padding-inline: var(--code-px);
   }
-  > pre > code[data-line-numbers] > [data-line-state] {
+  & > pre > code[data-line-numbers] > [data-line-state] {
     grid-template-columns: auto 1fr;
     column-gap: var(--a-space-3);
   }
-  > pre > code[data-line-state-mode] [data-line-num] {
+  & > pre > code[data-line-state-mode] [data-line-num] {
     color: var(--a-fg-subtle);
     text-align: end;
     user-select: none;
     min-width: 1.5ch;
   }
-  > pre > code[data-line-state-mode] [data-line-body] {
+  & > pre > code[data-line-state-mode] [data-line-body] {
     white-space: pre;
   }
   /* Empty lines still need height so the diff column counts line up. */
-  > pre > code[data-line-state-mode] [data-line-body]:empty::before {
+  & > pre > code[data-line-state-mode] [data-line-body]:empty::before {
     content: " ";
   }
-  > pre > code [data-line-state="added"] {
+  & > pre > code [data-line-state="added"] {
     background: var(--a-success-muted);
   }
-  > pre > code [data-line-state="removed"] {
+  & > pre > code [data-line-state="removed"] {
     background: var(--a-danger-muted);
   }
 
   /* Footer — optional chrome band below the code block
      (line counts, byte size, language family, etc.) */
-  > footer {
+  & > footer {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -288,7 +288,7 @@
      CM's CSS-in-JS stylesheets load first + at lower specificity, so
      these rules override without !important. */
 
-  > [data-cm-mount] {
+  & > [data-cm-mount] {
     display: block;
     overflow: hidden;
   }

package/components/command/command.css

@@ -87,7 +87,7 @@
   }
 
   /* ── Search header ── */
-  > header {
+  & > header {
     display: flex;
     align-items: center;
     gap: var(--command-gap);
@@ -96,13 +96,13 @@
     flex-shrink: 0;
   }
 
-  > header icon-ui {
+  & > header icon-ui {
     flex-shrink: 0;
     color: var(--command-fg-muted);
     --a-icon-size: 1rem;
   }
 
-  > header input {
+  & > header input {
     flex: 1;
     min-width: 0;
     border: none;
@@ -115,16 +115,16 @@
     padding: 0;
   }
 
-  > header input::placeholder {
+  & > header input::placeholder {
     color: var(--command-fg-muted);
   }
 
   /* Suppress focus ring on the input — the palette itself is the focused surface */
-  > header input:focus-visible {
+  & > header input:focus-visible {
     outline: none;
     box-shadow: none;
   }
-  > header:focus-within {
+  & > header:focus-within {
     outline: none;
     box-shadow: none;
   }
@@ -217,7 +217,7 @@
   }
 
   /* ── Footer ── */
-  > footer {
+  & > footer {
     display: flex;
     align-items: center;
     gap: var(--command-px);

package/components/grid/grid.css

@@ -33,10 +33,10 @@
   :scope[columns="auto-fit"]  { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
 
   /* Column span — children can span multiple columns */
-  > [span="2"] { grid-column: span 2; }
-  > [span="3"] { grid-column: span 3; }
-  > [span="4"] { grid-column: span 4; }
-  > [span="5"] { grid-column: span 5; }
-  > [span="6"] { grid-column: span 6; }
-  > [span="full"] { grid-column: 1 / -1; }
+  & > [span="2"] { grid-column: span 2; }
+  & > [span="3"] { grid-column: span 3; }
+  & > [span="4"] { grid-column: span 4; }
+  & > [span="5"] { grid-column: span 5; }
+  & > [span="6"] { grid-column: span 6; }
+  & > [span="full"] { grid-column: 1 / -1; }
 }

package/components/pane/pane.css

@@ -81,7 +81,7 @@
   }
 
   /* ── Pane header ── */
-  > header {
+  & > header {
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -98,17 +98,17 @@
     transition: background var(--pane-duration) var(--pane-easing);
   }
 
-  > header:hover {
+  & > header:hover {
     background: var(--pane-header-bg-hover);
   }
 
-  > header:focus-visible {
+  & > header:focus-visible {
     outline: none;
     box-shadow: var(--a-focus-ring) inset;
   }
 
   /* Collapse indicator — stamped by JS as icon-ui */
-  > header > [slot="chevron"] {
+  & > header > [slot="chevron"] {
     --a-icon-size: var(--a-caret-size);
     flex-shrink: 0;
     margin-inline-start: auto;
@@ -122,7 +122,7 @@
   }
 
   /* ── Sections ── */
-  > section {
+  & > section {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -130,13 +130,13 @@
     padding: var(--pane-section-py) var(--pane-section-px);
   }
 
-  > section::-webkit-scrollbar {
+  & > section::-webkit-scrollbar {
     display: none;
   }
 
   /* Section header — section's padding is the single source of horizontal inset;
      content inside the section must not add its own padding. */
-  > section > header {
+  & > section > header {
     font-size: var(--pane-section-header-size);
     color: var(--pane-section-header-fg);
     padding-bottom: var(--pane-col-gap);
@@ -147,12 +147,12 @@
 
   /* Defensive: a data-col directly under a section inherits the section's inset;
      adding its own padding would compound and misalign with the section header. */
-  > section > [data-col] {
+  & > section > [data-col] {
     padding: 0;
   }
 
   /* Section divider between sections */
-  > section + section {
+  & > section + section {
     border-top: 1px solid var(--pane-border);
   }
 
@@ -165,7 +165,7 @@
   }
 
   /* ── Footer ── */
-  > footer {
+  & > footer {
     min-height: var(--pane-bar-height);
     display: flex;
     align-items: center;

package/components/stack/stack.css

@@ -14,7 +14,7 @@
     text-align: inherit;
   }
 
-  > * {
+  & > * {
     grid-area: 1 / 1;
   }
 

package/core/template.js

@@ -91,6 +91,106 @@ function getTemplate(strings) {
   return tpl;
 }
 
+// §-TBD (FB-55, P1): the HTML parser lowercases attribute names inside
+// <template>.innerHTML per HTML5 §13.2.5.32, so `.className=${expr}`
+// arrives at scan() as `.classname`. The `name.slice(1)` strips the dot
+// and the binding writes to a lowercase enumerable expando instead of
+// invoking the camelCase property setter. Net: classes never apply, no
+// warning, no error.
+//
+// The trap affects every camelCase DOM property surface — `.className`,
+// `.innerText`, `.tabIndex`, `.ariaLabel`, `.contentEditable`,
+// `.readOnly`, `.maxLength`, `.minLength`, `.colSpan`, `.rowSpan` — AND
+// every camelCase property declared via `UIElement.static properties`
+// (e.g. `.minL`, `.maxChroma`, `.hueDriftMax`, `.colorScheme`,
+// `.strokeWidth`, `.collapseKeepLeading`). Even the canonical example
+// `<my-panel .minL=${minL}>` from packages/web-components/README.md:212
+// silently failed pre-fix.
+//
+// Two-layer fix:
+//
+//   1. Static PROP_CASE_FIX map covers built-in DOM camelCase property
+//      names (zero-cost lookup, no prototype walk per binding for the
+//      common case).
+//
+//   2. Prototype-walk fallback finds the canonical camelCase property
+//      name on the element's prototype chain via case-insensitive
+//      match. Cost is O(prototype-chain-depth × prototype-key-count)
+//      per UNIQUE template binding (cached in parts[i].name, not
+//      re-walked per update() tick). Custom-element prototype chains
+//      are short (subclass → UIElement → HTMLElement → Element → Node
+//      → EventTarget); cost is negligible.
+//
+// Backward-compatible: when the prototype walk finds no case-insensitive
+// match (genuine lowercase-expando case — rare but possible), the
+// original lowercase name is preserved. No consumer that was
+// deliberately writing to a lowercase expando regresses.
+//
+// Verification: 8-test matrix in core/template.test.js's FB-55 describe
+// block. RESPONSE-55 documents the trap end-to-end.
+const PROP_CASE_FIX = {
+  classname: 'className',
+  innertext: 'innerText',
+  innerhtml: 'innerHTML',
+  outerhtml: 'outerHTML',
+  textcontent: 'textContent',
+  tabindex: 'tabIndex',
+  arialabel: 'ariaLabel',
+  ariadescribedby: 'ariaDescribedBy',
+  arialabelledby: 'ariaLabelledBy',
+  ariarole: 'role',
+  contenteditable: 'contentEditable',
+  readonly: 'readOnly',
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  colspan: 'colSpan',
+  rowspan: 'rowSpan',
+  cellpadding: 'cellPadding',
+  cellspacing: 'cellSpacing',
+  usemap: 'useMap',
+  ismap: 'isMap',
+  accesskey: 'accessKey',
+  defaultchecked: 'defaultChecked',
+  defaultvalue: 'defaultValue',
+  defaultselected: 'defaultSelected',
+};
+
+// Resolve a lowercase property name to its canonical camelCase form on
+// the given element. Returns the original `lower` name when no
+// case-insensitive match exists (preserves expando semantics). Walks
+// instance own-properties first (UIElement installs camelCase props via
+// `Object.defineProperty(this, ...)` in the constructor, so they live
+// on the instance, not the prototype), then prototype chain. Skips
+// Object.prototype to avoid noisy matches on `toString` etc.
+//
+// IMPORTANT: at scan() time the custom element has typically NOT yet
+// been constructed (template fragment is cloned + scanned before
+// insertion → upgrade), so instance-defined props aren't visible yet.
+// PROP_CASE_FIX covers built-in DOM camelCase props at scan() time;
+// the per-element walk runs ALSO at applyValue() time (lazy resolve,
+// cached on the part after first hit) to catch UIElement instance props
+// once the element has been upgraded.
+function resolvePropName(el, lower) {
+  if (PROP_CASE_FIX[lower]) return PROP_CASE_FIX[lower];
+  // Instance own-properties (UIElement installProps lives here).
+  const ownNames = Object.getOwnPropertyNames(el);
+  for (let i = 0; i < ownNames.length; i++) {
+    const n = ownNames[i];
+    if (n !== lower && n.toLowerCase() === lower) return n;
+  }
+  // Prototype chain (built-in DOM camelCase + class-defined accessors).
+  let proto = Object.getPrototypeOf(el);
+  while (proto && proto !== Object.prototype) {
+    const names = Object.getOwnPropertyNames(proto);
+    for (let i = 0; i < names.length; i++) {
+      const n = names[i];
+      if (n !== lower && n.toLowerCase() === lower) return n;
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  return lower;
+}
+
 export function stamp(result, container) {
   let inst = container._i;
   if (!inst || inst.s !== result.strings) {
@@ -104,12 +204,118 @@ export function stamp(result, container) {
 function mount(result, container) {
   const { strings } = result;
   const tpl = getTemplate(strings);
-  const f = tpl.content.cloneNode(true);
+  let f = tpl.content.cloneNode(true);
+
+  // §-TBD (FB-57, P1): when stamping into an SVG or MathML context, the
+  // fragment's Elements arrive HTML-namespaced because `tpl.innerHTML =
+  // m` is parsed at document level without foreign-content context. SVG
+  // and MathML layout are namespace-strict — HTMLUnknownElement nodes
+  // inside an SVG render to zero-bound-rect invisible. Re-namespace the
+  // fragment before insertion, respecting `<foreignObject>` and
+  // `<annotation-xml>` HTML boundaries per the HTML5 foreign-content
+  // insertion-mode spec.
+  //
+  // Discriminator runs once per mount() call (no per-update cost).
+  // Re-namespacing walks the fragment recursively (O(node-count)),
+  // cheap for typical interpolation arrays (16 lines + 11 stops in
+  // the canonical curve-preview case = 27 createElementNS calls).
+  //
+  // Implementation site choice: mount() rather than getTemplate(),
+  // because:
+  //   - container reference is in hand only at mount()
+  //   - the same cached template may be stamped into either context;
+  //     namespacing per-cache-entry would double the WeakMap size
+  //     and require a cache-key extension
+  //   - cloning is already happening here; re-namespacing piggybacks
+  //     on the existing fragment walk
+  //
+  // RESPONSE-57 documents the trap end-to-end. Regression tests pin
+  // the inline-SVG path (must keep working), nested-SVG path (would
+  // fail pre-fix), foreignObject boundary (HTML inside SVG stays
+  // HTML), and MathML parallel.
+  const ns = foreignContentNS(container);
+  if (ns) f = renamespaceFragment(f, ns);
+
   const parts = scan(f, result.values.length);
   container.replaceChildren(f);
   return { s: strings, p: parts };
 }
 
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';
+const XHTML_NS = 'http://www.w3.org/1999/xhtml';
+
+// Determine whether `container` is inside an SVG or MathML subtree, and
+// return the namespace to re-namespace stamped fragments into. Returns
+// null when the container is in HTML context (the no-op case — vast
+// majority of templates). Respects `<foreignObject>` (SVG) and
+// `<annotation-xml encoding=text/html|application/xhtml+xml>` (MathML)
+// HTML boundaries per HTML5 §12.2.5 foreign-content insertion mode.
+function foreignContentNS(container) {
+  if (!container || container.nodeType !== 1) return null;
+  // Direct check — container's own namespace is a fast-path.
+  if (container.namespaceURI === SVG_NS) return SVG_NS;
+  if (container.namespaceURI === MATHML_NS) return MATHML_NS;
+  // Walk ancestors to find a foreign-content root. `closest()` matches
+  // the element itself + ancestors, so this catches the wrap()-span
+  // case (HTML span inside an SVG subtree). The first match wins —
+  // foreignObject/annotation-xml inside SVG short-circuits before we
+  // see the outer <svg>, correctly returning null (HTML context).
+  if (typeof container.closest !== 'function') return null;
+  const anchor = container.closest('svg, math, foreignObject, annotation-xml');
+  if (!anchor) return null;
+  const tag = anchor.localName;
+  if (tag === 'foreignobject' || tag === 'foreignObject') return null;
+  if (tag === 'annotation-xml') {
+    const enc = (anchor.getAttribute('encoding') || '').toLowerCase();
+    if (enc === 'text/html' || enc === 'application/xhtml+xml') return null;
+    return MATHML_NS;
+  }
+  if (tag === 'svg') return SVG_NS;
+  if (tag === 'math') return MATHML_NS;
+  return null;
+}
+
+// Recursively transfer fragment children into a new fragment with each
+// Element recreated in the target namespace. Text/comment nodes clone
+// unchanged. `<foreignObject>` and `<annotation-xml encoding=text/html>`
+// stay in the target namespace themselves, but their descendants revert
+// to HTML (matches the browser parser's foreign-content insertion mode).
+function renamespaceFragment(fragment, ns) {
+  const out = document.createDocumentFragment();
+  transferChildren(fragment, out, ns);
+  return out;
+}
+
+function transferChildren(src, dstParent, ns) {
+  for (const child of [...src.childNodes]) {
+    const t = child.nodeType;
+    if (t === 1 /* Element */) {
+      const dst = document.createElementNS(ns, child.localName);
+      for (const a of child.attributes) {
+        if (a.namespaceURI) dst.setAttributeNS(a.namespaceURI, a.name, a.value);
+        else dst.setAttribute(a.name, a.value);
+      }
+      dstParent.appendChild(dst);
+      // Boundary handling: <foreignObject> (SVG) and
+      // <annotation-xml encoding=text/html> (MathML) revert to HTML.
+      const local = child.localName;
+      let childNs = ns;
+      if (ns === SVG_NS && (local === 'foreignObject' || local === 'foreignobject')) {
+        childNs = XHTML_NS;
+      } else if (ns === MATHML_NS && local === 'annotation-xml') {
+        const enc = (child.getAttribute('encoding') || '').toLowerCase();
+        if (enc === 'text/html' || enc === 'application/xhtml+xml') childNs = XHTML_NS;
+      }
+      transferChildren(child, dst, childNs);
+    } else {
+      // Text, comment, etc. — clone unchanged. Comments are load-bearing
+      // (the `<!--p:N-->` placeholders scan() looks for).
+      dstParent.appendChild(child.cloneNode(true));
+    }
+  }
+}
+
 function scan(fragment, count) {
   const parts = new Array(count);
   const w = document.createTreeWalker(fragment, 129);
@@ -146,14 +352,21 @@ function scan(fragment, count) {
             // canonical style-object path; for everything else keep
             // the generic property-assignment recipe.
             const a = attr.name;
+            // §-TBD (FB-55 #2, P1): updated post-fix. The v0.5.5 §184
+            // recommendation had `.className=${expression}` first;
+            // that path now works (§-TBD PROP_CASE_FIX above) but
+            // `class="${expression}"` is the more discoverable form
+            // that doesn't require knowing the camelCase property
+            // name. Promoting it first. The `.classList=` line is
+            // removed entirely — classList is a read-only getter, no
+            // PROP_CASE_FIX entry can make it assignable.
             const specific =
               a === 'class'
-                ? `    .className=\${expression}  ← write to the className property (NOT .class, which is an expando)\n` +
-                  `    class="\${expression}"      ← full replacement (whole class string is the expression)\n` +
-                  `    .classList=\${{foo: true, bar: false}}  ← if/when implemented; verify in USAGE.md\n`
+                ? `    class="\${expression}"      ← full replacement (whole class string is the expression)\n` +
+                  `    .className=\${expression}  ← writes to the className property (resolved camelCase since FB-55 fix)\n`
                 : a === 'style'
-                  ? `    .style.cssText=\${expression}  ← write CSS text to .style.cssText\n` +
-                    `    style="\${expression}"      ← full replacement of the style string\n`
+                  ? `    style="\${expression}"      ← full replacement of the style string\n` +
+                    `    .style.cssText=\${expression}  ← write CSS text via the style.cssText accessor\n`
                   : `    ${a}="\${expression}"      ← full replacement (whole attr is the placeholder)\n` +
                     `    .${a}=\${expression}        ← property assignment (preferred for objects/functions)\n`;
             // eslint-disable-next-line no-console
@@ -173,8 +386,12 @@ function scan(fragment, count) {
           n.removeAttribute(name);
           parts[i] = { t: 'e', n, name: name.slice(1), c: undefined, _fx: null };
         } else if (name[0] === '.') {
+          // §-TBD (FB-55, P1): resolve the parser-lowercased property
+          // name back to its canonical camelCase via PROP_CASE_FIX +
+          // prototype walk. See PROP_CASE_FIX comment above for context.
+          // Lazy-resolve in applyValue() too — see _resolved guard there.
           n.removeAttribute(name);
-          parts[i] = { t: 'p', n, name: name.slice(1), c: undefined, _fx: null };
+          parts[i] = { t: 'p', n, name: resolvePropName(n, name.slice(1)), c: undefined, _fx: null, _resolved: false };
         } else if (name[0] === '?') {
           // §250 (v0.5.11, FEEDBACK-27): Lit-style boolean attribute syntax
           // (`?attr=${bool}`) is NOT supported. Without this branch, the
@@ -256,6 +473,18 @@ function applyValue(p, v) {
     if (v == null || v === false) p.n.removeAttribute(p.name);
     else p.n.setAttribute(p.name, v === true ? '' : v);
   } else if (p.t === 'p') {
+    // §-TBD (FB-55, P1): two-phase property-name resolution. PROP_CASE_FIX
+    // resolved at scan() time for zero-cost built-in DOM camelCase (the
+    // common case). For UIElement custom-element props installed on the
+    // INSTANCE via the constructor's installProps(), the property doesn't
+    // exist at scan() time (element not yet upgraded), so a lazy lookup
+    // here catches them. Resolution is cached back into p.name on first
+    // hit — subsequent updates skip the walk.
+    if (!p._resolved) {
+      const resolved = resolvePropName(p.n, p.name);
+      if (resolved !== p.name) p.name = resolved;
+      p._resolved = true;
+    }
     p.n[p.name] = v;
   } else if (p.t === 'e') {
     if (isHandler(p.c)) p.n.removeEventListener(p.name, p.c);