@adia-ai/web-components 0.6.49 → 0.7.0

package/components/tree/tree.test.js

@@ -101,3 +101,55 @@ describe('<tree-ui> tree-select forwards modifier keys (FB-46)', () => {
     expect(received.shiftKey).toBe(false);
   });
 });
+
+describe('<tree-item-ui> caret slot + actions adoption (caret convention + FB-89)', () => {
+  let host;
+  const settle = () => new Promise((r) => setTimeout(r, 30));
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+  });
+  afterEach(() => host.remove());
+
+  it('auto-stamps a slot="caret" icon (renamed from slot="chevron")', async () => {
+    const item = document.createElement('tree-item-ui');
+    item.setAttribute('text', 'Colors');
+    host.appendChild(item);
+    await settle();
+    const row = item.querySelector(':scope > [slot="row"]');
+    expect(row.querySelector('[slot="caret"]')).toBeTruthy();
+    expect(row.querySelector('[slot="chevron"]')).toBeNull();
+  });
+
+  it('adopts a declarative slot="actions" child into the stamped row (FB-89)', async () => {
+    const item = document.createElement('tree-item-ui');
+    item.setAttribute('text', 'Colors');
+    const btn = document.createElement('button-ui');
+    btn.setAttribute('slot', 'actions');
+    btn.setAttribute('icon', 'plus');
+    item.appendChild(btn);
+    host.appendChild(item);
+    await settle();
+    const row = item.querySelector(':scope > [slot="row"]');
+    // The action button is now INSIDE the row, not a sibling left below it.
+    expect(btn.parentElement).toBe(row);
+    expect(item.querySelector(':scope > [slot="actions"]')).toBeNull();
+  });
+
+  it('adopts a declarative slot="caret" child instead of stamping a default', async () => {
+    const item = document.createElement('tree-item-ui');
+    item.setAttribute('text', 'Colors');
+    const customCaret = document.createElement('icon-ui');
+    customCaret.setAttribute('slot', 'caret');
+    customCaret.setAttribute('name', 'folder');
+    item.appendChild(customCaret);
+    host.appendChild(item);
+    await settle();
+    const row = item.querySelector(':scope > [slot="row"]');
+    const carets = row.querySelectorAll('[slot="caret"]');
+    expect(carets.length).toBe(1);                    // no double-stamp
+    expect(carets[0]).toBe(customCaret);              // consumer's caret used
+    expect(carets[0].getAttribute('name')).toBe('folder');
+  });
+});

package/components/tree/tree.yaml

@@ -59,8 +59,8 @@ tokens:
     description: Background color on hover
   --tree-bg-selected:
     description: Background color when selected
-  --tree-chevron-size:
-    description: Size of the collapse chevron icon
+  --tree-caret-size:
+    description: Size of the collapse caret icon
   --tree-duration:
     description: Transition duration
   --tree-easing:
@@ -68,7 +68,7 @@ tokens:
   --tree-fg:
     description: Primary text color
   --tree-fg-muted:
-    description: Muted text color (icons, chevrons)
+    description: Muted text color (icons, carets)
   --tree-focus-ring:
     description: Focus ring box-shadow
   --tree-font-size:
@@ -121,7 +121,7 @@ a2ui:
       rows — selection is managed by the parent and bubbles once.
       Detail = {item, text, value, ctrlKey, metaKey, shiftKey}.
     - >-
-      Per ADR-0027, <tree-ui> composes <icon-ui> (for chevrons) but
+      Per ADR-0027, <tree-ui> composes <icon-ui> (for carets) but
       does NOT auto-import its children. Consumer pages must
       explicitly import both <tree-ui> and <tree-item-ui>.
 anti_patterns: []