@happyvertical/smrt-chat 0.55.15 → 0.55.17

package/dist/svelte/components/messages/ThreadPanel.svelte

@@ -34,7 +34,7 @@ const replyCount = $derived(
 );
 </script>
 
-<aside class="thread-panel" aria-label={t(M['chat.thread_panel.thread_label'], { title: threadTitle })}>
+<aside class="thread-panel" aria-label={t(M['chat.thread_panel.thread_label'], { title: threadTitle })} data-smrt-component="ThreadPanel">
   <header class="thread-panel__header">
     <div class="thread-panel__header-text">
       <h3 class="thread-panel__title">{threadTitle}</h3>
@@ -78,13 +78,15 @@ const replyCount = $derived(
 </aside>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .thread-panel {
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
-    background: var(--smrt-color-surface, #ffffff);
-    border-left: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    background: var(--smrt-color-surface);
+    border-left: 1px solid var(--smrt-color-outline-variant);
   }
 
   .thread-panel__header {
@@ -92,7 +94,7 @@ const replyCount = $derived(
     align-items: center;
     gap: var(--smrt-spacing-3, 0.75rem);
     padding: var(--smrt-spacing-4, 1rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
     flex-shrink: 0;
   }
 
@@ -105,7 +107,7 @@ const replyCount = $derived(
     margin: 0;
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -113,16 +115,16 @@ const replyCount = $derived(
 
   .thread-panel__meta {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .thread-panel__resolved {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-success-container, #2e7d32);
-    background: var(--smrt-color-success-container, #e8f5e9);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-success-container);
+    background: var(--smrt-color-success-container);
+    border-radius: var(--smrt-radius-full);
     white-space: nowrap;
     flex-shrink: 0;
   }
@@ -134,13 +136,13 @@ const replyCount = $derived(
     padding: 0;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     flex-shrink: 0;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .thread-panel__header :global(.thread-panel__close:hover) {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .thread-panel__messages {
@@ -153,4 +155,5 @@ const replyCount = $derived(
   .thread-panel__input {
     flex-shrink: 0;
   }
+}
 </style>

package/dist/svelte/components/shared/FileUpload.svelte

@@ -107,7 +107,7 @@ function getFileIcon(type: string): string {
 }
 </script>
 
-<div class="file-upload" class:file-upload--disabled={disabled}>
+<div class="file-upload" class:file-upload--disabled={disabled} data-smrt-component="FileUpload">
   {#if pendingFiles.length > 0}
     <div class="file-upload__preview" aria-label={t(M['chat.file_upload.preview'])}>
       {#each pendingFiles as file, i (file.name + i)}
@@ -194,10 +194,12 @@ function getFileIcon(type: string): string {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .file-upload {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .file-upload--disabled {
@@ -206,9 +208,9 @@ function getFileIcon(type: string): string {
   }
 
   .file-upload__drop-zone {
-    border: 2px dashed var(--smrt-color-outline-variant, #c4c6d0);
-    border-radius: var(--smrt-radius-large, 12px);
-    padding: var(--smrt-spacing-5, 20px);
+    border: 2px dashed var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+    padding: var(--smrt-spacing-5);
     text-align: center;
     transition:
       border-color var(--smrt-duration-short2, 150ms),
@@ -216,8 +218,8 @@ function getFileIcon(type: string): string {
   }
 
   .file-upload__drop-zone--active {
-    border-color: var(--smrt-color-primary, #005ac1);
-    background: var(--smrt-color-primary-container, #d6e3ff);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
   }
 
   .file-upload__drop-zone--disabled {
@@ -228,7 +230,7 @@ function getFileIcon(type: string): string {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     cursor: pointer;
   }
 
@@ -241,36 +243,36 @@ function getFileIcon(type: string): string {
   }
 
   .file-upload__icon {
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .file-upload__text {
     font: var(--smrt-typography-body-medium-font, 0.875rem/1.4 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .file-upload__hint {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .file-upload__preview {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
-    padding: var(--smrt-spacing-2, 8px);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    border-radius: var(--smrt-radius-medium, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    gap: var(--smrt-spacing-1);
+    padding: var(--smrt-spacing-2);
+    background: var(--smrt-color-surface-container-low);
+    border-radius: var(--smrt-radius-medium);
+    border: 1px solid var(--smrt-color-outline-variant);
   }
 
   .file-upload__file {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
-    background: var(--smrt-color-surface, #fefbff);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface);
   }
 
   .file-upload__file-icon {
@@ -279,10 +281,10 @@ function getFileIcon(type: string): string {
     justify-content: center;
     width: 28px;
     height: 28px;
-    border-radius: var(--smrt-radius-small, 4px);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    border-radius: var(--smrt-radius-small);
+    background: var(--smrt-color-surface-variant);
     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);
     text-transform: uppercase;
     flex-shrink: 0;
   }
@@ -291,13 +293,13 @@ function getFileIcon(type: string): string {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     min-width: 0;
   }
 
   .file-upload__file-name {
     font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -305,7 +307,7 @@ function getFileIcon(type: string): string {
 
   .file-upload__file-size {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem/1 sans-serif);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
@@ -314,28 +316,28 @@ function getFileIcon(type: string): string {
     height: 24px;
     padding: 0;
     background: none;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    border-radius: var(--smrt-radius-full, 9999px);
+    color: var(--smrt-color-on-surface-variant);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .file-upload__file :global(.file-upload__file-remove:hover) {
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
   }
 
   .file-upload__preview-actions {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
-    padding-top: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-2);
+    padding-top: var(--smrt-spacing-1);
   }
 
   .file-upload__error {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-small, 4px);
-    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-small);
+    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);
   }
 
@@ -348,4 +350,5 @@ function getFileIcon(type: string): string {
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/shared/LinkPreview.svelte

@@ -26,7 +26,7 @@ const hostname = $derived.by(() => {
 });
 </script>
 
-<a class="link-preview" href={url} target="_blank" rel="noopener noreferrer">
+<a class="link-preview" href={url} target="_blank" rel="noopener noreferrer" data-smrt-component="LinkPreview">
   {#if imageUrl}
     <div class="link-preview__image">
       <img src={imageUrl} alt={title ?? ''} />
@@ -44,9 +44,11 @@ const hostname = $derived.by(() => {
 </a>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .link-preview {
     display: flex;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
+    border: 1px solid var(--smrt-color-outline-variant);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     overflow: hidden;
     text-decoration: none;
@@ -64,7 +66,7 @@ const hostname = $derived.by(() => {
     min-height: 60px;
     flex-shrink: 0;
     overflow: hidden;
-    background: var(--smrt-color-surface-container, #f3f4f6);
+    background: var(--smrt-color-surface-container);
   }
 
   .link-preview__image img {
@@ -85,7 +87,7 @@ const hostname = $derived.by(() => {
   .link-preview__title {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    color: var(--smrt-color-on-surface);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -93,7 +95,7 @@ const hostname = $derived.by(() => {
 
   .link-preview__description {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
@@ -103,6 +105,7 @@ const hostname = $derived.by(() => {
 
   .link-preview__domain {
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
+}
 </style>

package/dist/svelte/components/shared/MentionAutocomplete.svelte

@@ -80,7 +80,7 @@ function highlightMatch(
   <div
     class="mention-autocomplete"
     role="listbox"
-    aria-label={t(M['chat.mention_autocomplete.suggestions'])}
+    aria-label={t(M['chat.mention_autocomplete.suggestions'])} data-smrt-component="MentionAutocomplete"
   >
     {#each suggestions as suggestion, i (suggestion.id)}
       {@const parts = highlightMatch(suggestion.name, query)}
@@ -108,21 +108,23 @@ function highlightMatch(
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .mention-autocomplete {
     position: absolute;
     bottom: 100%;
     left: 0;
-    margin-bottom: var(--smrt-spacing-1, 4px);
+    margin-bottom: var(--smrt-spacing-1);
     min-width: 200px;
     max-width: 320px;
     max-height: 240px;
     overflow-y: auto;
-    background: var(--smrt-color-surface, #fefbff);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
-    border-radius: var(--smrt-radius-medium, 8px);
+    background: var(--smrt-color-surface);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
     box-shadow: var(--smrt-elevation-2, 0 2px 8px rgba(0, 0, 0, 0.15));
     z-index: var(--smrt-z-index-dropdown, 1000);
-    padding: var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-1);
     display: flex;
     flex-direction: column;
   }
@@ -130,25 +132,25 @@ function highlightMatch(
   .mention-autocomplete__item {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     width: 100%;
-    padding: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-2);
     border: none;
     background: transparent;
     cursor: pointer;
     text-align: left;
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    border-radius: var(--smrt-radius-small, 4px);
+    color: var(--smrt-color-on-surface);
+    border-radius: var(--smrt-radius-small);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
   .mention-autocomplete__item:hover,
   .mention-autocomplete__item--active {
-    background: var(--smrt-color-surface-container-high, #e6e6ea);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .mention-autocomplete__item:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -161,7 +163,7 @@ function highlightMatch(
 
   .mention-autocomplete__highlight {
     background: transparent;
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
@@ -170,4 +172,5 @@ function highlightMatch(
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/shared/ReadReceipts.svelte

@@ -25,7 +25,7 @@ function getInitial(name: string): string {
 }
 </script>
 
-<span class="read-receipts" aria-label={t(M['chat.read_receipts.read_status'], { readCount: readBy.length, total: totalParticipants })}>
+<span class="read-receipts" aria-label={t(M['chat.read_receipts.read_status'], { readCount: readBy.length, total: totalParticipants })} data-smrt-component="ReadReceipts">
   {#if readBy.length === 0}
     <!-- Single check: sent -->
     <svg class="read-receipts__icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
@@ -66,11 +66,13 @@ function getInitial(name: string): string {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .read-receipts {
     display: inline-flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 0.25rem);
-    color: var(--smrt-color-outline, #74777f);
+    color: var(--smrt-color-outline);
   }
 
   .read-receipts__icon {
@@ -78,12 +80,12 @@ function getInitial(name: string): string {
   }
 
   .read-receipts__icon--read {
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .read-receipts__count {
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .read-receipts__avatars {
@@ -94,8 +96,8 @@ function getInitial(name: string): string {
   .read-receipts__mini-avatar {
     width: 16px;
     height: 16px;
-    border-radius: var(--smrt-radius-full, 9999px);
-    border: 1px solid var(--smrt-color-surface, #ffffff);
+    border-radius: var(--smrt-radius-full);
+    border: 1px solid var(--smrt-color-surface);
     margin-left: -4px;
     object-fit: cover;
     flex-shrink: 0;
@@ -109,8 +111,8 @@ function getInitial(name: string): string {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-small-size, 0.5rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
@@ -119,9 +121,10 @@ function getInitial(name: string): string {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-container);
+    color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-label-small-size, 0.5rem);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
+}
 </style>

package/dist/svelte/components/shared/UserPresence.svelte

@@ -20,7 +20,7 @@ const labelText: Record<string, string> = {
 };
 </script>
 
-<span class="presence" aria-label={labelText[status]}>
+<span class="presence" aria-label={labelText[status]} data-smrt-component="UserPresence">
   <span class="presence__dot {status}"></span>
   {#if showLabel}
     <span class="presence__label">{labelText[status]}</span>
@@ -28,6 +28,8 @@ const labelText: Record<string, string> = {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .presence {
     display: inline-flex;
     align-items: center;
@@ -37,29 +39,30 @@ const labelText: Record<string, string> = {
   .presence__dot {
     width: 8px;
     height: 8px;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     flex-shrink: 0;
   }
 
   .presence__dot.online {
-    background: var(--smrt-color-success, #1e8e3e);
+    background: var(--smrt-color-success);
   }
 
   .presence__dot.away {
-    background: var(--smrt-color-warning, #f9ab00);
+    background: var(--smrt-color-warning);
   }
 
   .presence__dot.dnd {
-    background: var(--smrt-color-error, #b3261e);
+    background: var(--smrt-color-error);
   }
 
   .presence__dot.offline {
-    background: var(--smrt-color-outline, #74777f);
+    background: var(--smrt-color-outline);
   }
 
   .presence__label {
     font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     line-height: 1;
   }
+}
 </style>

package/dist/svelte/components/tabs/ChatTab.svelte

@@ -42,7 +42,7 @@ const {
 </script>
 
 {#if tab.isExpanded}
-  <div class="chat-tab chat-tab--expanded" aria-label={t(M['chat.chat_tab.chat_with'], { name: tab.room.name })}>
+  <div class="chat-tab chat-tab--expanded" aria-label={t(M['chat.chat_tab.chat_with'], { name: tab.room.name })} data-smrt-component="ChatTab">
     <div class="chat-tab__header">
       <!-- raw-primitive-allow: pressable header title wrapping rich content (room avatar component and name) that collapses the chat window on click; no Button primitive owns this structural avatar-header pattern -->
       <button
@@ -104,7 +104,7 @@ const {
     class="chat-tab chat-tab--collapsed"
     type="button"
     onclick={onexpand}
-    aria-label={t(M['chat.chat_tab.open_chat_with'], { name: tab.room.name })}
+    aria-label={t(M['chat.chat_tab.open_chat_with'], { name: tab.room.name })} data-smrt-component="ChatTab"
   >
     <Avatar
       name={tab.room.name}
@@ -119,12 +119,14 @@ const {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .chat-tab--expanded {
     display: flex;
     flex-direction: column;
     width: 328px;
-    background: var(--smrt-color-surface, #fefbff);
-    border-radius: var(--smrt-radius-large, 12px) var(--smrt-radius-large, 12px) 0 0;
+    background: var(--smrt-color-surface);
+    border-radius: var(--smrt-radius-large) var(--smrt-radius-large) 0 0;
     box-shadow: var(--smrt-elevation-3, 0 4px 8px rgba(0, 0, 0, 0.15));
     overflow: hidden;
   }
@@ -133,16 +135,16 @@ const {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     min-height: 44px;
   }
 
   .chat-tab__header-btn {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     background: none;
     border: none;
     color: inherit;
@@ -152,9 +154,9 @@ const {
   }
 
   .chat-tab__header-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-on-primary, #ffffff);
+    outline: 2px solid var(--smrt-color-on-primary);
     outline-offset: 2px;
-    border-radius: var(--smrt-radius-small, 4px);
+    border-radius: var(--smrt-radius-small);
   }
 
   .chat-tab__name {
@@ -167,7 +169,7 @@ const {
   .chat-tab__actions {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     flex-shrink: 0;
   }
 
@@ -178,7 +180,7 @@ const {
     padding: 0;
     background: none;
     color: inherit;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
@@ -194,24 +196,24 @@ const {
   .chat-tab--collapsed {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    background: var(--smrt-color-surface-container, #f0f0f4);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    background: var(--smrt-color-surface-container);
     border: none;
-    border-radius: var(--smrt-radius-large, 12px) var(--smrt-radius-large, 12px) 0 0;
+    border-radius: var(--smrt-radius-large) var(--smrt-radius-large) 0 0;
     cursor: pointer;
     box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.1));
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
     transition: background var(--smrt-duration-short2, 150ms);
     white-space: nowrap;
   }
 
   .chat-tab--collapsed:hover {
-    background: var(--smrt-color-surface-container-high, #e6e6ea);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .chat-tab--collapsed:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: -2px;
   }
 
@@ -221,10 +223,10 @@ const {
     justify-content: center;
     min-width: 18px;
     height: 18px;
-    padding: 0 var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-error, #ba1a1a);
-    color: var(--smrt-color-on-error, #ffffff);
+    padding: 0 var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     line-height: 1;
@@ -239,4 +241,5 @@ const {
       transition: none;
     }
   }
+}
 </style>