@happyvertical/smrt-chat 0.34.5 → 0.34.7

package/dist/svelte/components/dialogs/SearchMessages.svelte

@@ -3,7 +3,9 @@
  * SearchMessages - Message search interface with results list
  * Provides a search input and displays matching messages
  */
+import { Form, Input } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
 import type { ChatMessageData } from '../../types.js';
 
@@ -25,11 +27,16 @@ export interface Props {
 let { isOpen, onclose, onsearch, results, onselectresult }: Props = $props();
 
 let query = $state('');
-let searchInput = $state<HTMLInputElement | null>(null);
 
 const hasResults = $derived(results.length > 0);
 const hasQuery = $derived(query.trim().length > 0);
 
+// The Input primitive doesn't expose its inner element, so resolve it by id.
+function focusSearchInput() {
+  if (typeof document === 'undefined') return;
+  document.getElementById('search-messages-input')?.focus();
+}
+
 function handleSubmit() {
   const trimmed = query.trim();
   if (trimmed.length > 0) {
@@ -94,8 +101,10 @@ $effect(() => {
 });
 
 $effect(() => {
-  if (isOpen && searchInput) {
-    searchInput.focus();
+  if (isOpen) {
+    // Defer a frame so the search input is mounted before focusing.
+    const raf = requestAnimationFrame(focusSearchInput);
+    return () => cancelAnimationFrame(raf);
   }
 });
 </script>
@@ -108,7 +117,9 @@ $effect(() => {
   >
     <div class="search-panel__header">
       <h2 class="search-panel__title">{t(M['chat.search_messages.title'])}</h2>
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="close-btn"
         type="button"
         onclick={handleClose}
@@ -118,10 +129,10 @@ $effect(() => {
           <path d="M18 6 6 18" />
           <path d="m6 6 12 12" />
         </svg>
-      </button>
+      </Button>
     </div>
 
-    <form
+    <Form
       class="search-form"
       onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}
     >
@@ -130,9 +141,9 @@ $effect(() => {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.35-4.35" />
         </svg>
-        <input
-          bind:this={searchInput}
+        <Input
           bind:value={query}
+          id="search-messages-input"
           type="search"
           class="search-input"
           placeholder={t(M['chat.search_messages.input_placeholder'])}
@@ -140,20 +151,22 @@ $effect(() => {
           aria-label={t(M['chat.search_messages.query'])}
         />
         {#if hasQuery}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="clear-btn"
             type="button"
-            onclick={() => { query = ''; searchInput?.focus(); }}
+            onclick={() => { query = ''; focusSearchInput(); }}
             aria-label={t(M['chat.search_messages.clear'])}
           >
             <svg class="clear-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
               <path d="M18 6 6 18" />
               <path d="m6 6 12 12" />
             </svg>
-          </button>
+          </Button>
         {/if}
       </div>
-    </form>
+    </Form>
 
     <div class="search-results" aria-label={t(M['chat.search_messages.results'])}>
       {#if hasResults}
@@ -163,6 +176,7 @@ $effect(() => {
         <ul class="results-list" aria-label={t(M['chat.search_messages.results'])}>
           {#each results as message (message.id)}
             <li class="results-list__item">
+              <!-- raw-primitive-allow: large pressable search-result card wrapping rich content (avatar, sender, date, multi-line highlighted message excerpt); no Button primitive owns this structural selection-card pattern -->
               <button
                 class="result-item"
                 type="button"
@@ -231,35 +245,28 @@ $effect(() => {
     color: var(--smrt-color-on-surface, #1a1c1e);
   }
 
-  .close-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .search-panel__header :global(.close-btn) {
     width: 1.75rem;
     height: 1.75rem;
-    border: none;
+    padding: 0;
     background: none;
     border-radius: var(--smrt-radius-medium, 0.5rem);
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .close-btn:hover {
+  .search-panel__header :global(.close-btn:hover) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .close-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
-
   .close-btn__icon {
     width: 1rem;
     height: 1rem;
   }
 
-  .search-form {
+  /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
+  :global(.search-form) {
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
   }
@@ -287,34 +294,39 @@ $effect(() => {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .search-input {
+  /* The Input primitive sits inside the bordered .search-input-wrap, which owns
+     the border + focus-within ring — so neutralize the primitive's own chrome
+     (border/background/padding/box-shadow) and let it render borderless. */
+  :global(.search-input) {
     flex: 1;
     border: none;
     outline: none;
+    padding: 0;
     background: transparent;
+    box-shadow: none;
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
     color: var(--smrt-color-on-surface, #1a1c1e);
   }
 
-  .search-input::placeholder {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+  :global(.search-input:focus) {
+    border: none;
+    outline: none;
+    box-shadow: none;
   }
 
-  .clear-btn {
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .search-input-wrap :global(.clear-btn) {
     flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     width: 1.25rem;
     height: 1.25rem;
-    border: none;
+    padding: 0;
     background: none;
     border-radius: var(--smrt-radius-full, 9999px);
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
   }
 
-  .clear-btn:hover {
+  .search-input-wrap :global(.clear-btn:hover) {
+    background: none;
     color: var(--smrt-color-on-surface, #1a1c1e);
   }
 
@@ -448,10 +460,13 @@ $effect(() => {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .close-btn,
     .result-item,
     .search-input-wrap {
       transition: none;
     }
+
+    .search-panel__header :global(.close-btn) {
+      transition: none;
+    }
   }
 </style>

package/dist/svelte/components/dialogs/SearchMessages.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchMessages.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/dialogs/SearchMessages.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qBAAqB;IACrB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAyKD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SearchMessages.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/dialogs/SearchMessages.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qBAAqB;IACrB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAmLD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/layout/ChatLayout.svelte

@@ -72,6 +72,7 @@ function handlePointerUp() {
     />
   </aside>
 
+  <!-- raw-primitive-allow: custom drag-to-resize splitter with pointer capture (pointerdown/move/up) and ArrowLeft/ArrowRight keyboard resizing; a press-and-drag control no Button primitive owns -->
   <button
     type="button"
     class="chat-layout__resize-handle"

package/dist/svelte/components/layout/ChatLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/ChatLayout.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA+DD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChatLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/ChatLayout.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgED,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/layout/MemberList.svelte

@@ -4,6 +4,7 @@
  * Lists participants grouped by online status with role badges
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatParticipantData } from '../../types.js';
 
@@ -74,7 +75,9 @@ function getRoleBadgeLabel(role: string): string {
   <div class="member-list__header">
     <h2 class="member-list__title">Members</h2>
     <span class="member-list__count">{participants.length}</span>
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
       class="close-btn"
       type="button"
       onclick={onclose}
@@ -84,7 +87,7 @@ function getRoleBadgeLabel(role: string): string {
         <path d="M18 6 6 18" />
         <path d="m6 6 12 12" />
       </svg>
-    </button>
+    </Button>
   </div>
 
   <div class="member-list__content">
@@ -235,30 +238,22 @@ function getRoleBadgeLabel(role: string): string {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .close-btn {
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .member-list__header :global(.close-btn) {
     margin-left: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     width: 1.75rem;
     height: 1.75rem;
-    border: none;
+    padding: 0;
     background: none;
     border-radius: var(--smrt-radius-medium, 0.5rem);
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .close-btn:hover {
+  .member-list__header :global(.close-btn:hover) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .close-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
-
   .close-btn__icon {
     width: 1rem;
     height: 1rem;
@@ -384,7 +379,7 @@ function getRoleBadgeLabel(role: string): string {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .close-btn {
+    .member-list__header :global(.close-btn) {
       transition: none;
     }
   }

package/dist/svelte/components/layout/MemberList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MemberList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/MemberList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,YAAY,EAAE,mBAAmB,EAAE,CAAC;IACpC,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0LD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"MemberList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/MemberList.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,YAAY,EAAE,mBAAmB,EAAE,CAAC;IACpC,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA2LD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/layout/RoomHeader.svelte

@@ -4,6 +4,7 @@
  * Displays room info and provides access to members and search
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatRoomData } from '../../types.js';
 
@@ -78,7 +79,9 @@ const roomTypeLabel = $derived.by(() => {
 
   <div class="room-header__actions">
     {#if onshowmembers}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="header-btn"
         type="button"
         onclick={onshowmembers}
@@ -92,11 +95,13 @@ const roomTypeLabel = $derived.by(() => {
           <path d="M16 3.13a4 4 0 0 1 0 7.75" />
         </svg>
         <span class="header-btn__count">{participantCount}</span>
-      </button>
+      </Button>
     {/if}
 
     {#if onshowsearch}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="header-btn"
         type="button"
         onclick={onshowsearch}
@@ -107,7 +112,7 @@ const roomTypeLabel = $derived.by(() => {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.35-4.35" />
         </svg>
-      </button>
+      </Button>
     {/if}
   </div>
 </header>
@@ -201,28 +206,20 @@ const roomTypeLabel = $derived.by(() => {
     gap: 0.25rem;
   }
 
-  .header-btn {
-    display: inline-flex;
-    align-items: center;
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .room-header__actions :global(.header-btn) {
     gap: 0.25rem;
     padding: 0.375rem 0.5rem;
-    border: none;
     background: none;
     border-radius: var(--smrt-radius-medium, 0.5rem);
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .header-btn:hover {
+  .room-header__actions :global(.header-btn:hover) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .header-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
-
   .header-btn__icon {
     width: 1.25rem;
     height: 1.25rem;
@@ -234,7 +231,7 @@ const roomTypeLabel = $derived.by(() => {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .header-btn {
+    .room-header__actions :global(.header-btn) {
       transition: none;
     }
   }

package/dist/svelte/components/layout/RoomHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoomHeader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomHeader.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8FD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RoomHeader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomHeader.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA+FD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/layout/RoomList.svelte

@@ -4,6 +4,7 @@
  * Groups rooms by type: channels, DMs, and agent conversations
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatRoomData } from '../../types.js';
 
@@ -71,19 +72,22 @@ function formatTimestamp(date?: string | Date | null): string {
 <nav class="room-list" aria-label={t(M['chat.room_list.rooms_label'])}>
   {#if oncreateroom}
     <div class="room-list__header">
-      <button
+      <Button
+        variant="ghost"
+        fullWidth
         class="create-room-btn"
         type="button"
         onclick={oncreateroom}
         aria-label={t(M['chat.room_list.create_new_room'])}
       >
         {t(M['chat.room_list.new_room'])}
-      </button>
+      </Button>
     </div>
   {/if}
 
   {#if channels.length > 0}
     <section class="room-group">
+      <!-- raw-primitive-allow: section disclosure trigger with aria-expanded toggling a collapsible room list, wrapping rich content (rotating chevron, group label, room count); structural accordion header no Button primitive owns -->
       <button
         class="room-group__header"
         type="button"
@@ -101,6 +105,7 @@ function formatTimestamp(date?: string | Date | null): string {
         <ul class="room-group__list" role="list">
           {#each channels as room (room.id)}
             <li>
+              <!-- raw-primitive-allow: pressable room-selection row with active and aria-current state, wrapping rich content (type icon, name, unread badge); no Button primitive owns this structural nav-selection pattern -->
               <button
                 class="room-item"
                 class:room-item--active={room.id === currentRoomId}
@@ -126,6 +131,7 @@ function formatTimestamp(date?: string | Date | null): string {
 
   {#if directMessages.length > 0}
     <section class="room-group">
+      <!-- raw-primitive-allow: section disclosure trigger with aria-expanded toggling a collapsible room list, wrapping rich content (rotating chevron, group label, room count); structural accordion header no Button primitive owns -->
       <button
         class="room-group__header"
         type="button"
@@ -143,6 +149,7 @@ function formatTimestamp(date?: string | Date | null): string {
         <ul class="room-group__list" role="list">
           {#each directMessages as room (room.id)}
             <li>
+              <!-- raw-primitive-allow: pressable room-selection row with active and aria-current state, wrapping rich content (avatar, name, last-message preview, timestamp, unread badge); no Button primitive owns this structural nav-selection pattern -->
               <button
                 class="room-item"
                 class:room-item--active={room.id === currentRoomId}
@@ -184,6 +191,7 @@ function formatTimestamp(date?: string | Date | null): string {
 
   {#if agentRooms.length > 0}
     <section class="room-group">
+      <!-- raw-primitive-allow: section disclosure trigger with aria-expanded toggling a collapsible room list, wrapping rich content (rotating chevron, group label, room count); structural accordion header no Button primitive owns -->
       <button
         class="room-group__header"
         type="button"
@@ -201,6 +209,7 @@ function formatTimestamp(date?: string | Date | null): string {
         <ul class="room-group__list" role="list">
           {#each agentRooms as room (room.id)}
             <li>
+              <!-- raw-primitive-allow: pressable room-selection row with active and aria-current state, wrapping rich content (agent icon, name, unread badge); no Button primitive owns this structural nav-selection pattern -->
               <button
                 class="room-item"
                 class:room-item--active={room.id === currentRoomId}
@@ -227,9 +236,9 @@ function formatTimestamp(date?: string | Date | null): string {
     <div class="room-list__empty">
       <p>{t(M['chat.room_list.no_rooms'])}</p>
       {#if oncreateroom}
-        <button class="create-link" type="button" onclick={oncreateroom}>
+        <Button variant="ghost" size="sm" class="create-link" type="button" onclick={oncreateroom}>
           {t(M['chat.room_list.create_first_room'])}
-        </button>
+        </Button>
       {/if}
     </div>
   {/if}
@@ -247,27 +256,21 @@ function formatTimestamp(date?: string | Date | null): string {
     padding: 0.5rem 0.75rem;
   }
 
-  .create-room-btn {
-    width: 100%;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .room-list__header :global(.create-room-btn) {
     padding: 0.5rem 0.75rem;
     border: 1px dashed var(--smrt-color-outline, #74777f);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     background: transparent;
     color: var(--smrt-color-primary, #005ac1);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .create-room-btn:hover {
+  .room-list__header :global(.create-room-btn:hover) {
     background: var(--smrt-color-primary-container, #d6e3ff);
   }
 
-  .create-room-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
-
   .room-group {
     margin-top: 0.25rem;
   }
@@ -452,20 +455,26 @@ function formatTimestamp(date?: string | Date | null): string {
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
   }
 
-  .create-link {
-    border: none;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .room-list__empty :global(.create-link) {
     background: none;
     color: var(--smrt-color-primary, #005ac1);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
     text-decoration: underline;
   }
 
+  .room-list__empty :global(.create-link:hover) {
+    background: none;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .room-item,
-    .create-room-btn,
     .room-group__chevron {
       transition: none;
     }
+
+    .room-list__header :global(.create-room-btn) {
+      transition: none;
+    }
   }
 </style>

package/dist/svelte/components/layout/RoomList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoomList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA6LD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"RoomList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomList.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAoMD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}