Polish pass 2: sidenav radius + More prompts match featured chip (#414)

* feat(chat): match sidenav New chat + New project radius to 8px

* feat(demo): match More prompts dropdown styling to featured chip

* chore(release): bump publishable libs to 0.0.38

Author: blove

examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts

@@ -51,4 +51,28 @@ describe('WelcomeSuggestionsComponent', () => {
     chipBtn.click();
     expect(captured).toBe(FEATURED_SUGGESTIONS[0].value);
   });
+
+  it('overrides the More prompts trigger to match the featured chip styling', () => {
+    // The component's styles block must include ::ng-deep overrides for the
+    // chat-select trigger so it visually matches chat-welcome-suggestion.
+    // We assert by inspecting the component's stringified styles via the
+    // DOM: the trigger should compute to chip-equivalent padding/border.
+    const trigger = fx.nativeElement.querySelector(
+      '.welcome-suggestions__row chat-select .chat-select__trigger',
+    ) as HTMLElement;
+    expect(trigger).toBeTruthy();
+    const cs = getComputedStyle(trigger);
+    // 10px 16px padding (chip)
+    expect(cs.paddingTop).toBe('10px');
+    expect(cs.paddingBottom).toBe('10px');
+    expect(cs.paddingLeft).toBe('16px');
+    expect(cs.paddingRight).toBe('16px');
+    // 1px border (chip has a border; default trigger has none).
+    // JSDOM 29 does not cascade border-width from <style> tags so we assert
+    // the source instead of getComputedStyle — the CSS must declare a border.
+    const componentStyles = (fx.componentInstance.constructor as { ɵcmp?: { styles?: string[] } }).ɵcmp?.styles?.join(' ') ?? '';
+    expect(componentStyles).toMatch(/border:\s*1px\s+solid/);
+    // pill radius (chip)
+    expect(cs.borderRadius).toBe('9999px');
+  });
 });

examples/chat/angular/src/app/modes/welcome-suggestions.component.ts

@@ -58,6 +58,23 @@ import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions';
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      /* Make the "More prompts" dropdown match the featured chip visually.
+         Scoped to .welcome-suggestions__row so the model picker (also
+         chat-select, elsewhere) is untouched. */
+      .welcome-suggestions__row ::ng-deep chat-select .chat-select__trigger {
+        height: auto;
+        padding: 10px 16px;
+        background: var(--ngaf-chat-surface);
+        color: var(--ngaf-chat-text);
+        border: 1px solid var(--ngaf-chat-separator);
+        border-radius: 9999px;
+        font-size: var(--ngaf-chat-font-size-sm);
+      }
+      .welcome-suggestions__row ::ng-deep chat-select .chat-select__trigger:hover:not(:disabled) {
+        background: var(--ngaf-chat-surface-alt);
+        border-color: var(--ngaf-chat-text-muted);
+        color: var(--ngaf-chat-text);
+      }
     `,
   ],
 })

libs/a2ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/a2ui",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "license": "MIT",
   "repository": {
     "type": "git",

libs/ag-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/ag-ui",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "peerDependencies": {
     "@ngaf/chat": "*",
     "@ngaf/licensing": "*",

libs/chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "exports": {
     ".": {
       "types": "./index.d.ts",

libs/chat/src/lib/compositions/chat-sidenav/chat-sidenav.component.spec.ts

@@ -334,6 +334,6 @@ describe('ChatSidenavComponent — New chat primary CTA', () => {
     const styles = (ChatSidenavComponent as unknown as { ɵcmp: { styles: string[] } }).ɵcmp.styles.join('\n');
     // Monochrome CTA: late-cascade block uses text/bg for contrast.
     expect(styles).toMatch(/\.chat-sidenav__action\.chat-sidenav__action--new[^{]*\{[^}]*background:\s*var\(--ngaf-chat-text/);
-    expect(styles).toMatch(/\.chat-sidenav__action--new[^{]*\{[^}]*border-radius:\s*9999px/);
+    expect(styles).toMatch(/\.chat-sidenav__action--new[^{]*\{[^}]*border-radius:\s*8px/);
   });
 });

libs/chat/src/lib/primitives/chat-project-list/chat-project-list.component.spec.ts

@@ -156,7 +156,7 @@ describe('ChatProjectListComponent — New project secondary pill', () => {
   it('renders the new-project button with borderless surface-alt pill styling', () => {
     const styles = (ChatProjectListComponent as unknown as { ɵcmp: { styles: string[] } }).ɵcmp.styles.join('\n');
     expect(styles).toMatch(/\.chat-project-list__new[^{]*\{[^}]*background:\s*var\(--ngaf-chat-surface-alt/);
-    expect(styles).toMatch(/\.chat-project-list__new[^{]*\{[^}]*border-radius:\s*9999px/);
+    expect(styles).toMatch(/\.chat-project-list__new[^{]*\{[^}]*border-radius:\s*8px/);
     expect(styles).toMatch(/\.chat-project-list__new[^{]*\{[^}]*border:\s*0/);
   });
 });

libs/chat/src/lib/styles/chat-project-list.styles.spec.ts

@@ -34,4 +34,10 @@ describe('CHAT_PROJECT_LIST_STYLES — New project button', () => {
       /\.chat-project-list__new:hover\s*\{[^}]*background:\s*color-mix\(in srgb,\s*var\(--ngaf-chat-text\)\s*8%,\s*var\(--ngaf-chat-surface-alt\)\)\s*;/,
     );
   });
+
+  it('uses 8px border-radius (consistent with thread items)', () => {
+    expect(normalized).toMatch(
+      /\.chat-project-list__new\s*\{[^}]*border-radius:\s*8px\s*;/,
+    );
+  });
 });

libs/chat/src/lib/styles/chat-project-list.styles.ts

@@ -79,7 +79,7 @@ export const CHAT_PROJECT_LIST_STYLES = `
     color: var(--ngaf-chat-text);
     border: 0;
     padding: 10px 16px;
-    border-radius: 9999px;
+    border-radius: 8px;
     font-size: 12px;
     display: flex;
     align-items: center;

libs/chat/src/lib/styles/chat-sidenav.styles.spec.ts

@@ -34,4 +34,10 @@ describe('CHAT_SIDENAV_STYLES — New chat button', () => {
       /\.chat-sidenav__action--new:focus-visible\s*\{[^}]*outline:\s*2px\s+solid\s+var\(--ngaf-chat-primary\)\s*;/,
     );
   });
+
+  it('uses 8px border-radius (consistent with Search button + thread items)', () => {
+    expect(normalized).toMatch(
+      /\.chat-sidenav__action\.chat-sidenav__action--new\s*\{[^}]*border-radius:\s*8px\s*;/,
+    );
+  });
 });