@happyvertical/smrt-svelte 0.55.16 → 0.55.18

package/dist/browser-ai/svelte/components/STTTest.svelte

@@ -106,7 +106,7 @@ function clearLogs() {
 }
 </script>
 
-<div class="stt-test">
+<div class="stt-test" data-smrt-component="STTTest">
   <h3>{t(M['ui.stt_test.heading'])}</h3>
 
   <div class="controls">
@@ -203,30 +203,32 @@ function clearLogs() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .stt-test {
-    padding: var(--smrt-spacing-md, 16px);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-surface-container-low, #f9fafb);
+    padding: var(--smrt-spacing-md);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-container-low);
     max-width: 500px;
   }
 
   h3 {
-    margin: 0 0 var(--smrt-spacing-md, 16px);
+    margin: 0 0 var(--smrt-spacing-md);
     font: var(--smrt-typography-title-large-font, 1.125rem / 1.25 sans-serif);
   }
 
   .controls {
     display: flex;
-    gap: var(--smrt-spacing-sm, 12px);
+    gap: var(--smrt-spacing-sm);
     align-items: flex-end;
-    margin-bottom: var(--smrt-spacing-md, 16px);
+    margin-bottom: var(--smrt-spacing-md);
   }
 
   .adapter-select {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
     flex: 1;
   }
 
@@ -236,43 +238,43 @@ function clearLogs() {
 
   .status {
     display: flex;
-    gap: var(--smrt-spacing-md, 16px);
+    gap: var(--smrt-spacing-md);
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
-    margin-bottom: var(--smrt-spacing-md, 16px);
-    padding: var(--smrt-spacing-sm, 8px);
+    margin-bottom: var(--smrt-spacing-md);
+    padding: var(--smrt-spacing-sm);
     background: var(--smrt-color-surface, white);
-    border-radius: var(--smrt-radius-small, 4px);
+    border-radius: var(--smrt-radius-small);
   }
 
   .status-item {
     display: flex;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .record-controls {
     display: flex;
     justify-content: center;
-    margin: var(--smrt-spacing-md, 20px) 0;
+    margin: var(--smrt-spacing-md) 0;
   }
 
   .record-btn {
-    padding: var(--smrt-spacing-md, 16px) var(--smrt-spacing-xl, 32px);
+    padding: var(--smrt-spacing-md) var(--smrt-spacing-xl);
     font: var(--smrt-typography-label-large-font, 500 1rem / 1.25 sans-serif);
-    background: var(--smrt-color-tertiary, #006c4f);
-    color: var(--smrt-color-on-tertiary, #ffffff);
+    background: var(--smrt-color-tertiary);
+    color: var(--smrt-color-on-tertiary);
     border: none;
-    border-radius: var(--smrt-radius-medium, 8px);
+    border-radius: var(--smrt-radius-medium);
     cursor: pointer;
     transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, ease);
   }
 
   .record-btn:hover:not(:disabled) {
-    background: var(--smrt-color-tertiary-container, #006c4f);
+    background: var(--smrt-color-tertiary-container);
     opacity: 0.9;
   }
 
   .record-btn.recording {
-    background: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error);
     animation: pulse 1s infinite;
   }
 
@@ -287,25 +289,25 @@ function clearLogs() {
   }
 
   .error {
-    padding: var(--smrt-spacing-md, 12px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    border: 1px solid var(--smrt-color-error, #ba1a1a);
-    border-radius: var(--smrt-radius-small, 6px);
-    color: var(--smrt-color-on-error-container, #410002);
+    padding: var(--smrt-spacing-md);
+    background: var(--smrt-color-error-container);
+    border: 1px solid var(--smrt-color-error);
+    border-radius: var(--smrt-radius-small);
+    color: var(--smrt-color-on-error-container);
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
-    margin-bottom: var(--smrt-spacing-md, 16px);
+    margin-bottom: var(--smrt-spacing-md);
   }
 
   .result {
-    margin-bottom: var(--smrt-spacing-md, 16px);
+    margin-bottom: var(--smrt-spacing-md);
   }
 
   .transcript {
-    margin-top: var(--smrt-spacing-sm, 8px);
-    padding: var(--smrt-spacing-md, 12px);
+    margin-top: var(--smrt-spacing-sm);
+    padding: var(--smrt-spacing-md);
     background: var(--smrt-color-surface, white);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-small, 6px);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small);
     min-height: 60px;
     font: var(--smrt-typography-body-large-font, 1rem / 1.5 sans-serif);
   }
@@ -318,21 +320,21 @@ function clearLogs() {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--smrt-spacing-sm, 8px);
+    margin-bottom: var(--smrt-spacing-sm);
   }
 
   .log-list {
-    background: var(--smrt-color-inverse-surface, #1f2937);
-    color: var(--smrt-color-inverse-on-surface, #d1d5db);
-    padding: var(--smrt-spacing-sm, 8px);
-    border-radius: var(--smrt-radius-small, 4px);
+    background: var(--smrt-color-inverse-surface);
+    color: var(--smrt-color-inverse-on-surface);
+    padding: var(--smrt-spacing-sm);
+    border-radius: var(--smrt-radius-small);
     max-height: 150px;
     overflow-y: auto;
     font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
   }
 
   .log-entry {
-    padding: var(--smrt-spacing-1, 4px) 0;
+    padding: var(--smrt-spacing-1) 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -344,4 +346,5 @@ function clearLogs() {
       animation: none;
     }
   }
+}
 </style>

package/dist/browser-ai/svelte/components/VoiceInput.svelte

@@ -49,7 +49,7 @@ async function handleToggle() {
 }
 </script>
 
-<div class="voice-input" class:sm={size === 'sm'} class:lg={size === 'lg'}>
+<div class="voice-input" class:sm={size === 'sm'} class:lg={size === 'lg'} data-smrt-component="VoiceInput">
   {#if stt.isInitializing}
     <DownloadProgress
       progress={stt.downloadProgress ? {
@@ -84,11 +84,13 @@ async function handleToggle() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .voice-input {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--smrt-spacing-sm, 8px);
+    gap: var(--smrt-spacing-sm);
   }
 
   .mic-button {
@@ -96,8 +98,8 @@ async function handleToggle() {
     height: 3rem;
     border-radius: var(--smrt-radius-full, 50%);
     border: none;
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -107,7 +109,7 @@ async function handleToggle() {
   }
 
   .mic-button:hover:not(:disabled) {
-    background: var(--smrt-color-primary-container, #005ac1);
+    background: var(--smrt-color-primary-container);
     opacity: 0.9;
     transform: scale(1.05);
   }
@@ -118,7 +120,7 @@ async function handleToggle() {
   }
 
   .mic-button.listening {
-    background: var(--smrt-color-error, #ba1a1a);
+    background: var(--smrt-color-error);
     animation: pulse 1.5s ease-in-out infinite;
   }
 
@@ -163,12 +165,12 @@ async function handleToggle() {
   .error {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-sm, 8px);
-    padding: var(--smrt-spacing-md, 12px) var(--smrt-spacing-md, 16px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    border: 1px solid var(--smrt-color-error, #ba1a1a);
-    border-radius: var(--smrt-radius-medium, 8px);
-    color: var(--smrt-color-on-error-container, #410002);
+    gap: var(--smrt-spacing-sm);
+    padding: var(--smrt-spacing-md) var(--smrt-spacing-md);
+    background: var(--smrt-color-error-container);
+    border: 1px solid var(--smrt-color-error);
+    border-radius: var(--smrt-radius-medium);
+    color: var(--smrt-color-on-error-container);
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
   }
 
@@ -178,8 +180,8 @@ async function handleToggle() {
     justify-content: center;
     width: 20px;
     height: 20px;
-    background: var(--smrt-color-error, #ba1a1a);
-    color: var(--smrt-color-on-error, #ffffff);
+    background: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
     border-radius: var(--smrt-radius-full, 50%);
     font-weight: var(--smrt-typography-weight-bold, 700);
     font: var(--smrt-typography-label-small-font, 0.75rem / 1 sans-serif);
@@ -198,4 +200,5 @@ async function handleToggle() {
       animation: none;
     }
   }
+}
 </style>

package/dist/components/activity/ActivityList.svelte

@@ -32,4 +32,4 @@ $effect(() => {
   };
 });
 </script>
-{#if shell}<WorkspaceActivityList filter={{ kind: prefix }} {emptyLabel} />{:else}<p>{emptyLabel}</p>{/if}
+{#if shell}<WorkspaceActivityList filter={{ kind: prefix }} {emptyLabel} />{:else}<p data-smrt-component="ActivityList">{emptyLabel}</p>{/if}