@happyvertical/smrt-chat 0.55.16 → 0.55.17

package/dist/svelte/components/assistant/AssistantComposer.svelte

@@ -392,7 +392,7 @@ function removeAttachment(id: string) {
 <div
   class="assistant-composer"
   ondrop={onupload ? handleDrop : undefined}
-  ondragover={onupload ? (event) => event.preventDefault() : undefined}
+  ondragover={onupload ? (event) => event.preventDefault() : undefined} data-smrt-component="AssistantComposer"
 >
   {#if sendError}
     <p class="assistant-composer-error" role="alert">
@@ -500,10 +500,12 @@ function removeAttachment(id: string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .assistant-composer {
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    background: var(--smrt-color-surface, #ffffff);
-    padding: var(--smrt-spacing-2, 8px);
+    border-top: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface);
+    padding: var(--smrt-spacing-2);
     flex-shrink: 0;
     container-type: inline-size;
   }
@@ -512,7 +514,7 @@ function removeAttachment(id: string) {
   .assistant-composer-row {
     display: flex;
     align-items: flex-end;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   :global(.assistant-composer-attach) {
@@ -523,15 +525,15 @@ function removeAttachment(id: string) {
     width: 44px;
     height: 44px;
     padding: 0;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
   }
 
   :global(.assistant-composer-attach:hover:not(:disabled)) {
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    background: var(--smrt-color-surface-container);
   }
 
   :global(.assistant-composer-attach:disabled) {
@@ -570,11 +572,11 @@ function removeAttachment(id: string) {
 
   :global(.assistant-composer-send) {
     flex-shrink: 0;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: none;
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
     cursor: pointer;
   }
@@ -588,21 +590,21 @@ function removeAttachment(id: string) {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--smrt-spacing-2, 8px);
-    margin: 0 0 var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
+    margin: 0 0 var(--smrt-spacing-2);
     padding: 0;
   }
 
   .assistant-composer-chip {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-container-low);
+    border: 1px solid var(--smrt-color-outline-variant);
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     max-width: 160px;
   }
 
@@ -615,18 +617,18 @@ function removeAttachment(id: string) {
   :global(.assistant-composer-chip-remove) {
     border: none;
     background: none;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     cursor: pointer;
     line-height: 1;
     padding: 0;
   }
 
   .assistant-composer-error {
-    margin: 0 0 var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    margin: 0 0 var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
   }
 
@@ -647,4 +649,5 @@ function removeAttachment(id: string) {
       margin-inline-start: auto;
     }
   }
+}
 </style>

package/dist/svelte/components/assistant/AssistantDock.svelte

@@ -604,7 +604,7 @@ async function handleConfirmAction(requestId: string) {
 }
 </script>
 
-<div class="assistant-dock">
+<div class="assistant-dock" data-smrt-component="AssistantDock">
   <div
     class="assistant-dock-layout"
     data-threads-open={threadsOpen || undefined}
@@ -995,6 +995,8 @@ async function handleConfirmAction(requestId: string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /* #3000: the dock sizes itself against its own container (a shell dock
    * edge can be ~250px wide) rather than the viewport. A container cannot
    * query itself, so the flex layout lives on an inner wrapper. */
@@ -1003,8 +1005,8 @@ async function handleConfirmAction(requestId: string) {
     height: 100%;
     min-height: 0;
     font-family: var(--smrt-font-family, system-ui, sans-serif);
-    background: var(--smrt-color-surface, #ffffff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
   }
 
   .assistant-dock-layout {
@@ -1019,9 +1021,9 @@ async function handleConfirmAction(requestId: string) {
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.35rem 0.75rem;
-    border-top: 1px solid var(--smrt-color-outline-variant, #c4c7c5);
+    border-top: 1px solid var(--smrt-color-outline-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
-    color: var(--smrt-color-on-surface-variant, #44474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .assistant-dock-run {
@@ -1030,16 +1032,16 @@ async function handleConfirmAction(requestId: string) {
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.35rem 0.75rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c7c5);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
   .assistant-dock-tool-request {
     margin: 0.5rem 0;
     padding: 0.75rem;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c7c5);
-    border-radius: var(--smrt-radius-md, 8px);
-    background: var(--smrt-color-surface-container, #f3f3f3);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-md);
+    background: var(--smrt-color-surface-container);
   }
 
   .assistant-dock-tool-request p {
@@ -1051,7 +1053,7 @@ async function handleConfirmAction(requestId: string) {
   }
 
   .assistant-dock-tool-request-warning {
-    color: var(--smrt-color-error, #b3261e);
+    color: var(--smrt-color-error);
   }
 
   .assistant-dock-tool-request-details pre {
@@ -1091,15 +1093,15 @@ async function handleConfirmAction(requestId: string) {
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      gap: var(--smrt-spacing-2, 8px);
+      gap: var(--smrt-spacing-2);
       flex-shrink: 0;
       width: 100%;
       min-height: 44px;
-      padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+      padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
       border: none;
-      border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-      background: var(--smrt-color-surface-container-low, #f7f7fb);
-      color: var(--smrt-color-on-surface, #1a1c1e);
+      border-bottom: 1px solid var(--smrt-color-outline-variant);
+      background: var(--smrt-color-surface-container-low);
+      color: var(--smrt-color-on-surface);
       font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
       font-family: inherit;
       border-radius: 0;
@@ -1109,7 +1111,7 @@ async function handleConfirmAction(requestId: string) {
 
     .assistant-dock .assistant-dock-layout > :global(.assistant-dock-threads-toggle::before) {
       content: '▸' / '';
-      color: var(--smrt-color-on-surface-variant, #43474e);
+      color: var(--smrt-color-on-surface-variant);
     }
 
     .assistant-dock .assistant-dock-layout[data-threads-open]
@@ -1118,7 +1120,7 @@ async function handleConfirmAction(requestId: string) {
     }
 
     .assistant-dock .assistant-dock-layout > :global(.assistant-dock-threads-toggle:focus-visible) {
-      outline: 2px solid var(--smrt-color-primary, #005ac1);
+      outline: 2px solid var(--smrt-color-primary);
       outline-offset: -2px;
     }
 
@@ -1130,7 +1132,7 @@ async function handleConfirmAction(requestId: string) {
       display: flex;
       max-width: none;
       max-height: 40%;
-      border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+      border-bottom: 1px solid var(--smrt-color-outline-variant);
     }
 
     .assistant-dock-threads > :global(.assistant-thread-list) {
@@ -1150,11 +1152,11 @@ async function handleConfirmAction(requestId: string) {
 
   .assistant-dock-empty {
     margin: 0;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    color: var(--smrt-color-on-surface-variant);
+    background: var(--smrt-color-surface-container-low);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .assistant-dock-scroll {
@@ -1162,8 +1164,8 @@ async function handleConfirmAction(requestId: string) {
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-3, 12px);
-    padding: var(--smrt-spacing-3, 12px);
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-3);
     min-height: 0;
   }
 
@@ -1173,7 +1175,7 @@ async function handleConfirmAction(requestId: string) {
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   /* Narrow-dock friendly bubbles: the user's message sits right, the
@@ -1187,26 +1189,26 @@ async function handleConfirmAction(requestId: string) {
   .assistant-dock-messages > li :global(.bubble),
   .assistant-dock-streaming :global(.bubble) {
     max-width: 85%;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-large, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-large);
     overflow-wrap: anywhere;
   }
 
   .assistant-dock-messages > li[data-role='user'] :global(.bubble),
   .assistant-dock-messages > li[data-role='user'] :global(.bubble--own) {
     align-self: flex-end;
-    background: var(--smrt-color-primary-container, #d8e2ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
-    border-radius: var(--smrt-radius-large, 12px);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+    border-radius: var(--smrt-radius-large);
   }
 
   .assistant-dock-messages > li:not([data-role='user']) :global(.bubble--agent),
   .assistant-dock-streaming :global(.bubble--agent) {
     align-self: flex-start;
-    background: var(--smrt-color-surface-container, #f0f0f4);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface);
     border-left: none;
-    border-radius: var(--smrt-radius-large, 12px);
+    border-radius: var(--smrt-radius-large);
   }
 
   .assistant-dock-streaming {
@@ -1221,9 +1223,9 @@ async function handleConfirmAction(requestId: string) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-5, 20px);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-5);
+    color: var(--smrt-color-on-surface-variant);
     text-align: center;
   }
 
@@ -1233,7 +1235,7 @@ async function handleConfirmAction(requestId: string) {
   }
 
   .assistant-dock-thread-state h2 {
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-title-medium-font, 600 1rem/1.4 sans-serif);
   }
 
@@ -1246,7 +1248,7 @@ async function handleConfirmAction(requestId: string) {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .assistant-dock-thread-loading {
@@ -1254,7 +1256,7 @@ async function handleConfirmAction(requestId: string) {
   }
 
   .assistant-dock-tool-call {
-    margin-top: var(--smrt-spacing-2, 8px);
+    margin-top: var(--smrt-spacing-2);
     min-width: 0;
   }
 
@@ -1265,17 +1267,17 @@ async function handleConfirmAction(requestId: string) {
 
   .assistant-dock-attachments {
     list-style: none;
-    margin: var(--smrt-spacing-2, 8px) 0 0;
+    margin: var(--smrt-spacing-2) 0 0;
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .assistant-dock-attachment {
     display: flex;
     align-items: baseline;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
   }
 
@@ -1301,63 +1303,64 @@ async function handleConfirmAction(requestId: string) {
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .assistant-dock-action-unknown {
-    margin-top: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-tertiary-container, #ffd8e4);
-    color: var(--smrt-color-on-tertiary-container, #31111d);
+    margin-top: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
   }
 
   .assistant-dock-action-unknown p {
-    margin: 0 0 var(--smrt-spacing-2, 8px);
+    margin: 0 0 var(--smrt-spacing-2);
   }
 
   .assistant-dock-stale {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-tertiary-container, #ffd8e4);
-    color: var(--smrt-color-on-tertiary-container, #31111d);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
   }
 
   .assistant-dock-stale p {
-    margin: 0 0 var(--smrt-spacing-2, 8px);
+    margin: 0 0 var(--smrt-spacing-2);
   }
 
   .assistant-dock-failed {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
   }
 
   .assistant-dock-failed p {
-    margin: 0 0 var(--smrt-spacing-2, 8px);
+    margin: 0 0 var(--smrt-spacing-2);
   }
 
   .assistant-dock-error {
     margin: 0;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-on-error-container, #410002);
-    background: var(--smrt-color-error-container, #ffdad6);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    color: var(--smrt-color-on-error-container);
+    background: var(--smrt-color-error-container);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .assistant-dock-single-actions {
     display: flex;
     justify-content: flex-end;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px) 0;
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2) 0;
   }
 
   .assistant-dock-composer-header {
-    padding: 0 var(--smrt-spacing-2, 8px);
-    padding-top: var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-2);
+    padding-top: var(--smrt-spacing-2);
   }
+}
 </style>

package/dist/svelte/components/assistant/AssistantThreadList.svelte

@@ -25,7 +25,7 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
 
 <nav
   class="assistant-thread-list"
-  aria-label={t(M['chat.assistant_thread_list.conversations_label'])}
+  aria-label={t(M['chat.assistant_thread_list.conversations_label'])} data-smrt-component="AssistantThreadList"
 >
   {#if oncreate}
     <Button
@@ -62,52 +62,54 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
 </nav>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .assistant-thread-list {
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
+    border-right: 1px solid var(--smrt-color-outline-variant);
+    background: var(--smrt-color-surface-container-low);
     min-width: 160px;
     overflow-y: auto;
   }
 
   :global(.assistant-thread-list-new) {
-    margin: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border: 1px dashed var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-medium, 8px);
+    margin: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: 1px dashed var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
     background: transparent;
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font: var(--smrt-typography-label-medium-font, 500 0.8125rem/1.3 sans-serif);
     cursor: pointer;
     text-align: left;
   }
 
   :global(.assistant-thread-list-new:hover) {
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    background: var(--smrt-color-surface-container);
   }
 
   .assistant-thread-list ul {
     list-style: none;
     margin: 0;
-    padding: 0 var(--smrt-spacing-2, 8px) var(--smrt-spacing-2, 8px);
+    padding: 0 var(--smrt-spacing-2) var(--smrt-spacing-2);
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   :global(.assistant-thread-list-item) {
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     width: 100%;
     min-width: 0;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: none;
-    border-radius: var(--smrt-radius-medium, 8px);
+    border-radius: var(--smrt-radius-medium);
     background: transparent;
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-body-medium-font, 0.875rem/1.4 sans-serif);
     text-align: left;
     cursor: pointer;
@@ -120,16 +122,16 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   :global(.assistant-thread-list-item:hover) {
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    background: var(--smrt-color-surface-container);
   }
 
   :global(.assistant-thread-list-item.active) {
-    background: var(--smrt-color-secondary-container, #d7e3f8);
-    color: var(--smrt-color-on-secondary-container, #0e1d31);
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
@@ -143,6 +145,7 @@ const { threads, activeThreadId = null, onselect, oncreate }: Props = $props();
   .count {
     flex-shrink: 0;
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>

package/dist/svelte/components/assistant/FloatingAssistant.svelte

@@ -161,7 +161,7 @@ function handleKeydown(event: KeyboardEvent) {
   data-expanded={panelExpanded || undefined}
   hidden={!visible}
   inert={!visible}
-  aria-hidden={!visible}
+  aria-hidden={!visible} data-smrt-component="FloatingAssistant"
 >
   {#if launcherVisible}
     <Button
@@ -212,6 +212,8 @@ function handleKeydown(event: KeyboardEvent) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .floating-assistant {
     position: fixed;
     z-index: var(--smrt-z-index-overlay, 1200);
@@ -230,7 +232,7 @@ function handleKeydown(event: KeyboardEvent) {
   .floating-assistant :global(.floating-assistant-launcher),
   .floating-assistant :global(.floating-assistant-collapse) {
     border: 1px solid var(--smrt-color-outline, currentColor);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface, Canvas);
     color: var(--smrt-color-on-surface, CanvasText);
     font: inherit;
@@ -254,7 +256,7 @@ function handleKeydown(event: KeyboardEvent) {
     inline-size: 1.75rem;
     block-size: 1.75rem;
     overflow: hidden;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
   }
 
   .floating-assistant-panel {
@@ -306,4 +308,5 @@ function handleKeydown(event: KeyboardEvent) {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/assistant/captions/CaptionOverlay.svelte

@@ -51,7 +51,7 @@ $effect(() => {
 });
 </script>
 
-<section bind:this={group} class="caption-overlay" aria-label={label}>
+<section bind:this={group} class="caption-overlay" aria-label={label} data-smrt-component="CaptionOverlay">
   <div bind:this={viewport} class="caption-overlay-viewport" onscroll={updatePosition}>
     <div bind:this={content} class="caption-overlay-content">
       {@render children()}
@@ -66,6 +66,8 @@ $effect(() => {
 </section>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .caption-overlay {
     position: fixed;
     z-index: var(--smrt-z-index-sticky, 1100);
@@ -102,4 +104,5 @@ $effect(() => {
     padding-block-start: var(--smrt-spacing-2, .5rem);
     background: var(--smrt-color-surface, Canvas);
   }
+}
 </style>

package/dist/svelte/components/assistant/captions/HeardCaptions.svelte

@@ -33,7 +33,7 @@ const visibleLines = $derived(lines.slice(-Math.max(1, maxLines)));
 </script>
 
 {#snippet surface()}
-  <section class="heard-captions" aria-label={speakerLabel}>
+  <section class="heard-captions" aria-label={speakerLabel} data-smrt-component="HeardCaptions">
     <p class="speaker">{speakerLabel}</p>
     <div class="caption-lines" aria-live="polite" aria-atomic="false">
       {#each visibleLines as line (line.id)}
@@ -57,9 +57,12 @@ const visibleLines = $derived(lines.slice(-Math.max(1, maxLines)));
 {/if}
 
 <style>
-  .heard-captions { box-sizing: border-box; min-inline-size: 0; max-inline-size: min(42rem, calc(100vw - 2rem)); overflow-wrap: anywhere; padding: .6rem .85rem; border-inline-start: .25rem solid var(--smrt-color-primary, #3154a5); background: color-mix(in srgb, var(--smrt-color-surface, white) 92%, var(--smrt-color-primary-container, #dce6ff)); color: var(--smrt-color-on-surface, #172033); border-radius: .35rem; box-shadow: var(--smrt-elevation-4, 0 .25rem .9rem color-mix(in srgb, var(--smrt-color-shadow, black) 16%, transparent)); }
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .heard-captions { box-sizing: border-box; min-inline-size: 0; max-inline-size: min(42rem, calc(100vw - 2rem)); overflow-wrap: anywhere; padding: .6rem .85rem; border-inline-start: .25rem solid var(--smrt-color-primary); background: color-mix(in srgb, var(--smrt-color-surface, white) 92%, var(--smrt-color-primary-container)); color: var(--smrt-color-on-surface); border-radius: .35rem; box-shadow: var(--smrt-elevation-4, 0 .25rem .9rem color-mix(in srgb, var(--smrt-color-shadow, black) 16%, transparent)); }
   .speaker { margin: 0 0 .25rem; font-weight: var(--smrt-typography-weight-bold, 700); letter-spacing: .03em; text-transform: uppercase; font-size: var(--smrt-typography-label-medium-size, .75rem); }
   .caption-lines p, .interim { margin: .15rem 0 0; }
   .interim { font-style: italic; opacity: .8; }
   @media (prefers-reduced-motion: reduce) { .heard-captions { scroll-behavior: auto; } }
+}
 </style>