@happyvertical/smrt-messages 0.34.4 → 0.34.6

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782257816382,
+  "timestamp": 1782278435844,
   "packageName": "@happyvertical/smrt-messages",
-  "packageVersion": "0.34.4",
+  "packageVersion": "0.34.6",
   "objects": {
     "@happyvertical/smrt-messages:AccountCollection": {
       "name": "accountcollection",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-23T23:36:58.234Z",
+  "generatedAt": "2026-06-24T05:20:36.527Z",
   "packageName": "@happyvertical/smrt-messages",
-  "packageVersion": "0.34.4",
+  "packageVersion": "0.34.6",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "d9c65ec777b181715b289c2b2219c1e32ea81ffb96a5fa94f358afd4f3ace795",
-    "packageJson": "5e472dbdc50ae1f78e01a4466712499ff50a59429d2be9baaf9701ce3fe53b46",
+    "manifest": "74dd6bcd838fe3da57812b01b4e35eb63e6f61c12ff460a2ca6b75375598ffdb",
+    "packageJson": "c68a8210454fbeb5aec5c41dbf13319fbc5bba00cf9b089eebd2e47a0a3949c4",
     "agents": "32563a30ceeb21bd8732042f894e2a148fd83727caffc1eec7c97540005c6fdc"
   },
   "exports": [

package/dist/svelte/components/AccountCard.svelte

@@ -2,7 +2,7 @@
 /**
  * AccountCard - Individual account card with status and actions
  */
-import { Card } from '@happyvertical/smrt-ui/ui';
+import { Button, Card } from '@happyvertical/smrt-ui/ui';
 import type { AccountData } from '../types.js';
 import AccountAvatar from './AccountAvatar.svelte';
 
@@ -51,24 +51,24 @@ const _lastSyncFormatted = $derived.by(() => {
 
     <div class="actions">
       {#if onsync && account.isActive}
-        <button class="action-btn" type="button" onclick={() => onsync?.(account)}>
+        <Button variant="ghost" size="sm" class="action-btn" onclick={() => onsync?.(account)}>
           Sync
-        </button>
+        </Button>
       {/if}
       {#if account.isActive && ondeactivate}
-        <button class="action-btn" type="button" onclick={() => ondeactivate?.(account)}>
+        <Button variant="ghost" size="sm" class="action-btn" onclick={() => ondeactivate?.(account)}>
           Deactivate
-        </button>
+        </Button>
       {/if}
       {#if !account.isActive && onactivate}
-        <button class="action-btn" type="button" onclick={() => onactivate?.(account)}>
+        <Button variant="ghost" size="sm" class="action-btn" onclick={() => onactivate?.(account)}>
           Activate
-        </button>
+        </Button>
       {/if}
       {#if onremove}
-        <button class="action-btn action-btn--danger" type="button" onclick={() => onremove?.(account)}>
+        <Button variant="ghost" size="sm" class="action-btn action-btn--danger" onclick={() => onremove?.(account)}>
           Remove
-        </button>
+        </Button>
       {/if}
     </div>
   </div>
@@ -152,21 +152,30 @@ const _lastSyncFormatted = $derived.by(() => {
     gap: 0.375rem;
   }
 
-  .action-btn {
+  /*
+   * The action buttons now render through smrt-ui's <Button variant="ghost">.
+   * Svelte scopes `.action-btn` to this component, but the <button> is emitted
+   * inside the Button child, so a plain `.action-btn {}` rule would not match —
+   * `.actions :global(.action-btn)` anchors on `.actions` (a real element here)
+   * and pierces into the child (issue #1589). These overrides keep the original
+   * outlined-surface look (border/radius/color); the modifier class is
+   * `action-btn--danger`, NOT `danger`, so it never collides with Button's own
+   * `.danger` variant class.
+   */
+  .actions :global(.action-btn) {
     padding: 0.375rem 0.75rem;
     border: 1px solid var(--smrt-color-outline, #72787e);
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: var(--smrt-color-surface, #fefbff);
     color: var(--smrt-color-on-surface, #1a1c1e);
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
-    cursor: pointer;
   }
 
-  .action-btn:hover {
+  .actions :global(.action-btn):hover {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .action-btn--danger {
+  .actions :global(.action-btn--danger) {
     color: var(--smrt-color-error, #ba1a1a);
     border-color: var(--smrt-color-error, #ba1a1a);
   }

package/dist/svelte/components/AttachmentChip.svelte

@@ -2,6 +2,7 @@
 /**
  * AttachmentChip - File chip with icon, name, and size
  */
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { AttachmentData } from '../types.js';
 
 export interface Props {
@@ -33,16 +34,16 @@ const _formattedSize = $derived.by(() => {
 </script>
 
 {#if onclick}
-  <button
-    class="chip"
-    type="button"
+  <Button
+    variant="ghost"
+    class="chip chip--button"
     onclick={() => onclick?.(attachment)}
     title={`${attachment.filename} (${_formattedSize})`}
   >
     <span class="icon">{_icon}</span>
     <span class="name">{attachment.filename}</span>
     <span class="size">{_formattedSize}</span>
-  </button>
+  </Button>
 {:else}
   <span class="chip" title={`${attachment.filename} (${_formattedSize})`}>
     <span class="icon">{_icon}</span>
@@ -66,16 +67,34 @@ const _formattedSize = $derived.by(() => {
     max-width: 200px;
   }
 
-  button.chip {
+  /*
+   * The interactive chip now renders through smrt-ui's <Button variant="ghost">.
+   * The <button> is emitted inside the Button child carrying Button's scope hash,
+   * so the local `.chip` rule above no longer reaches it. `:global(.chip--button)`
+   * pierces that scope to give the button the same chip styling plus the
+   * pressable affordances; `chip--button` is a non-colliding modifier (issue
+   * #1589). The non-interactive `<span class="chip">` branch still uses the
+   * scoped `.chip` rule above.
+   */
+  :global(.chip.chip--button) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
     cursor: pointer;
+    max-width: 200px;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  button.chip:hover {
+  :global(.chip.chip--button):hover {
     background: color-mix(in srgb, var(--smrt-color-surface-variant, #e1e2ec) 92%, var(--smrt-color-shadow, #000));
   }
 
-  button.chip:focus-visible {
+  :global(.chip.chip--button):focus-visible {
     outline: 2px solid var(--smrt-color-primary, #005ac1);
     outline-offset: 1px;
   }

package/dist/svelte/components/AttachmentChip.svelte.d.ts

@@ -1,6 +1,3 @@
-/**
- * AttachmentChip - File chip with icon, name, and size
- */
 import type { AttachmentData } from '../types.js';
 export interface Props {
     attachment: AttachmentData;

package/dist/svelte/components/AttachmentChip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentChip.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentChip.svelte.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD;AA+CD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AttachmentChip.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentChip.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD;AAgDD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/AttachmentUpload.svelte

@@ -11,6 +11,7 @@ export interface Props {
 
 <script lang="ts">
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Button } from '@happyvertical/smrt-ui/ui';
   import { M } from '../i18n.js';
 
   const { t } = useI18n();
@@ -59,11 +60,12 @@ export interface Props {
         <div class="attachment-item">
           <span class="filename">{attachment.filename}</span>
           <span class="size">{formatSize(attachment.size)}</span>
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="remove"
             onclick={() => onremove?.(i)}
-            type="button"
-          >×</button>
+          >×</Button>
         </div>
       {/each}
     </div>
@@ -122,10 +124,15 @@ export interface Props {
     font-size: var(--smrt-typography-label-small-size, 11px);
   }
 
-  .remove {
+  /*
+   * The remove button now renders through smrt-ui's <Button variant="ghost">.
+   * The <button> lives inside the Button child, so `.attachment-item :global(.remove)`
+   * anchors on the real `.attachment-item` element and pierces the child scope to
+   * keep the compact error-colored icon styling (issue #1589).
+   */
+  .attachment-item :global(.remove) {
     background: none;
     border: none;
-    cursor: pointer;
     padding: 0 var(--smrt-spacing-1, 4px);
     color: var(--smrt-color-error, #ba1a1a);
     font-size: var(--smrt-typography-label-large-size, 14px);

package/dist/svelte/components/AttachmentUpload.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentUpload.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA6ED,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AttachmentUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentUpload.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA+ED,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/ComposeForm.svelte

@@ -18,6 +18,7 @@ export interface Props {
 
 <script lang="ts">
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Button } from '@happyvertical/smrt-ui/ui';
   import { M } from '../i18n.js';
   import RecipientInput from './RecipientInput.svelte';
   import AttachmentUpload from './AttachmentUpload.svelte';
@@ -182,10 +183,10 @@ export interface Props {
     {#if !showCc || !showBcc}
       <div class="cc-toggles">
         {#if !showCc}
-          <button type="button" class="link-btn" onclick={() => showCc = true}>Cc</button>
+          <Button variant="ghost" size="sm" class="link-btn" onclick={() => showCc = true}>Cc</Button>
         {/if}
         {#if !showBcc}
-          <button type="button" class="link-btn" onclick={() => showBcc = true}>Bcc</button>
+          <Button variant="ghost" size="sm" class="link-btn" onclick={() => showBcc = true}>Bcc</Button>
         {/if}
       </div>
     {/if}
@@ -259,19 +260,19 @@ export interface Props {
   {/if}
 
   <div class="actions">
-    <button
+    <Button
       type="submit"
-      class="btn-primary"
+      variant="primary"
       disabled={isSending || isOverLimit}
     >
       {isSending ? 'Sending...' : 'Send'}
-    </button>
-    <button type="button" class="btn-secondary" onclick={handleSaveDraft}>
+    </Button>
+    <Button variant="secondary" onclick={handleSaveDraft}>
       {t(M['messages.compose_form.save_draft'])}
-    </button>
-    <button type="button" class="btn-text" onclick={() => ondiscard?.()}>
+    </Button>
+    <Button variant="ghost" class="btn-text" onclick={() => ondiscard?.()}>
       Discard
-    </button>
+    </Button>
   </div>
 </form>
 
@@ -316,10 +317,15 @@ export interface Props {
     justify-content: flex-end;
   }
 
-  .link-btn {
+  /*
+   * The Cc/Bcc toggles now render through smrt-ui's <Button variant="ghost">.
+   * `.cc-toggles :global(.link-btn)` anchors on the real `.cc-toggles` element
+   * and pierces the Button child scope to keep the underlined text-link look
+   * (issue #1589).
+   */
+  .cc-toggles :global(.link-btn) {
     background: none;
     border: none;
-    cursor: pointer;
     color: var(--smrt-color-primary, #6750a4);
     font-size: var(--smrt-typography-label-large-size, 13px);
     text-decoration: underline;
@@ -373,40 +379,13 @@ export interface Props {
     padding-top: var(--smrt-spacing-2, 8px);
   }
 
-  .btn-primary {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-6, 24px);
-    border-radius: var(--smrt-radius-full, 20px);
-    border: none;
-    background: var(--smrt-color-primary, #6750a4);
-    color: var(--smrt-color-on-primary, #fff);
-    font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-label-large-size, 14px);
-    cursor: pointer;
-  }
-
-  .btn-primary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .btn-secondary {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
-    border-radius: var(--smrt-radius-full, 20px);
-    border: 1px solid var(--smrt-color-outline, #79747e);
-    background: transparent;
-    color: var(--smrt-color-primary, #6750a4);
-    font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-label-large-size, 14px);
-    cursor: pointer;
-  }
-
-  .btn-text {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
-    border: none;
-    background: transparent;
+  /*
+   * Send/Save-draft now use Button's primary/secondary variants directly (dead
+   * .btn-primary/.btn-secondary CSS removed). The Discard button keeps its
+   * neutral on-surface-variant text via `.actions :global(.btn-text)` (Button's
+   * ghost uses the primary color) — issue #1589.
+   */
+  .actions :global(.btn-text) {
     color: var(--smrt-color-on-surface-variant, #49454f);
-    font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-label-large-size, 14px);
-    cursor: pointer;
   }
 </style>

package/dist/svelte/components/ComposeForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposeForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ComposeForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAEX,YAAY,EAEb,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAoOD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ComposeForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ComposeForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAEX,YAAY,EAEb,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAsOD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/EmailAccountManager.svelte

@@ -6,6 +6,7 @@
  * email accounts. Works with any backend via callback props.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
 import type { EmailAccountData } from '../types.js';
 
@@ -171,10 +172,12 @@ function getProviderLabel(type: string): string {
       {t(M['messages.email_account_manager.section_description'])}
     </div>
     {#if !isReadonly && onsave}
-      <button
+      <Button
+        variant="secondary"
+        size="sm"
         class="add-btn"
         onclick={() => { resetForm(); showForm = true; }}
-      >{t(M['messages.email_account_manager.add_account'])}</button>
+      >{t(M['messages.email_account_manager.add_account'])}</Button>
     {/if}
   </div>
 
@@ -261,10 +264,10 @@ function getProviderLabel(type: string): string {
       </div>
 
       <div class="form-actions">
-        <button class="cancel-btn" onclick={resetForm} disabled={saving}>Cancel</button>
-        <button class="save-btn" onclick={save} disabled={saving || !maName.trim() || !maEmail.trim()}>
+        <Button variant="secondary" size="sm" class="cancel-btn" onclick={resetForm} disabled={saving}>Cancel</Button>
+        <Button variant="primary" size="sm" class="save-btn" onclick={save} disabled={saving || !maName.trim() || !maEmail.trim()}>
           {saving ? 'Saving...' : editingId ? 'Update' : 'Add Account'}
-        </button>
+        </Button>
       </div>
     </div>
   {/if}
@@ -272,12 +275,13 @@ function getProviderLabel(type: string): string {
   {#if actionError}
     <div class="test-result failure" role="alert" aria-live="assertive">
       {actionError}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="sm"
         class="dismiss-btn"
         aria-label={t(M['messages.email_account_manager.dismiss_error'])}
         onclick={() => actionError = null}
-      >&times;</button>
+      >&times;</Button>
     </div>
   {/if}
 
@@ -288,7 +292,7 @@ function getProviderLabel(type: string): string {
       {:else}
         {t(M['messages.email_account_manager.connection_failed'])} {testResult.error ?? 'Unknown error'}
       {/if}
-      <button class="dismiss-btn" onclick={() => testResult = null}>&times;</button>
+      <Button variant="ghost" size="sm" class="dismiss-btn" onclick={() => testResult = null}>&times;</Button>
     </div>
   {/if}
 
@@ -327,21 +331,25 @@ function getProviderLabel(type: string): string {
           {#if !isReadonly}
             <div class="entry-actions">
               {#if ontest}
-                <button
+                <Button
+                  variant="ghost"
+                  size="sm"
                   class="test-btn"
                   onclick={(e) => { e.stopPropagation(); testConnection(acct); }}
                   disabled={testingId === acct.id}
                   title={t(M['messages.email_account_manager.test_connection'])}
                 >
                   {testingId === acct.id ? '...' : 'Test'}
-                </button>
+                </Button>
               {/if}
               {#if ondelete}
-                <button
+                <Button
+                  variant="ghost"
+                  size="sm"
                   class="delete-btn"
                   onclick={(e) => { e.stopPropagation(); remove(acct); }}
                   title={t(M['messages.email_account_manager.remove'])}
-                >&times;</button>
+                >&times;</Button>
               {/if}
             </div>
           {/if}
@@ -370,25 +378,17 @@ function getProviderLabel(type: string): string {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .add-btn {
-    padding: 0.375rem 0.75rem;
+  /*
+   * The add button now renders through smrt-ui's <Button variant="secondary">.
+   * The variant owns the outlined-primary look + hover; `.section-header-row
+   * :global(.add-btn)` only re-asserts radius and the flex-shrink so the button
+   * keeps its place in the header row (issue #1589).
+   */
+  .section-header-row :global(.add-btn) {
     border-radius: var(--smrt-radius-md, 8px);
-    border: 1px solid var(--smrt-color-primary, #005ac1);
-    background: transparent;
-    color: var(--smrt-color-primary, #005ac1);
-    cursor: pointer;
-    font-size: var(--smrt-typography-label-large-size, 0.8125rem);
-    font-family: inherit;
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    transition: all 150ms ease;
     flex-shrink: 0;
   }
 
-  .add-btn:hover {
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #fff);
-  }
-
   .entry-form {
     background: var(--smrt-color-surface-container, #f0f1f9);
     border: 1px solid var(--smrt-color-primary, #005ac1);
@@ -481,42 +481,20 @@ function getProviderLabel(type: string): string {
     padding-top: 0.25rem;
   }
 
-  .cancel-btn {
-    padding: 0.375rem 0.75rem;
+  /*
+   * Cancel/Save now use Button's secondary/primary variants (dead bespoke CSS
+   * removed). `.form-actions :global(...)` only re-asserts the rounded radius so
+   * they match the form's other controls (issue #1589). Cancel's neutral outline
+   * color override keeps it from picking up secondary's primary border color.
+   */
+  .form-actions :global(.cancel-btn),
+  .form-actions :global(.save-btn) {
     border-radius: var(--smrt-radius-md, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
-    background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
-    font-size: var(--smrt-typography-label-large-size, 0.8125rem);
-    font-family: inherit;
-    transition: all 150ms ease;
   }
 
-  .cancel-btn:hover {
-    background: var(--smrt-color-surface-container-high, #e6e7ef);
-  }
-
-  .save-btn {
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--smrt-radius-md, 8px);
-    border: 1px solid var(--smrt-color-primary, #005ac1);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #fff);
-    cursor: pointer;
-    font-size: var(--smrt-typography-label-large-size, 0.8125rem);
-    font-family: inherit;
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    transition: all 150ms ease;
-  }
-
-  .save-btn:hover:not(:disabled) {
-    opacity: 0.9;
-  }
-
-  .save-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .form-actions :global(.cancel-btn) {
+    border-color: var(--smrt-color-outline-variant, #c2c7cf);
+    color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
   .test-result {
@@ -538,11 +516,16 @@ function getProviderLabel(type: string): string {
     color: var(--smrt-color-error, #ba1a1a);
   }
 
-  .dismiss-btn {
+  /*
+   * The dismiss button now renders through smrt-ui's <Button variant="ghost">.
+   * `.test-result :global(.dismiss-btn)` anchors on the real `.test-result`
+   * element and pierces the Button child scope. `color: inherit` keeps the icon
+   * matching the success/failure banner color (issue #1589).
+   */
+  .test-result :global(.dismiss-btn) {
     background: transparent;
     border: none;
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    cursor: pointer;
     color: inherit;
     padding: 0 0.25rem;
   }
@@ -661,29 +644,28 @@ function getProviderLabel(type: string): string {
     flex-shrink: 0;
   }
 
-  .test-btn {
+  /*
+   * The test and delete buttons now render through smrt-ui's <Button
+   * variant="ghost">. The <button> is emitted inside the Button child, so
+   * `.entry-actions :global(...)` anchors on the real `.entry-actions` element
+   * and pierces the child scope to keep the original outlined-pill styling and
+   * the delete button's red-on-hover affordance (issue #1589).
+   */
+  .entry-actions :global(.test-btn) {
     padding: 0.25rem 0.5rem;
     border-radius: var(--smrt-radius-sm, 4px);
     border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
-    font-family: inherit;
-    transition: all 150ms ease;
   }
 
-  .test-btn:hover:not(:disabled) {
+  .entry-actions :global(.test-btn):hover:not(:disabled) {
     border-color: var(--smrt-color-primary, #005ac1);
     color: var(--smrt-color-primary, #005ac1);
   }
 
-  .test-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .delete-btn {
+  .entry-actions :global(.delete-btn) {
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: 1;
     padding: 0.125rem 0.5rem;
@@ -691,13 +673,10 @@ function getProviderLabel(type: string): string {
     border: 1px solid transparent;
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
-    font-family: inherit;
-    transition: all 150ms ease;
     flex-shrink: 0;
   }
 
-  .delete-btn:hover {
+  .entry-actions :global(.delete-btn):hover {
     background: var(--smrt-color-error-container, #fce4ec);
     color: var(--smrt-color-error, #ba1a1a);
     border-color: var(--smrt-color-error, #ba1a1a);

package/dist/svelte/components/EmailAccountManager.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmailAccountManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailAccountManager.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,CACP,OAAO,EAAE,gBAAgB,KACtB,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AA+TD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"EmailAccountManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailAccountManager.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,CACP,OAAO,EAAE,gBAAgB,KACtB,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AAgUD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}