@happyvertical/smrt-messages 0.34.4 → 0.34.6

package/dist/svelte/components/EmailFilterManager.svelte

@@ -6,6 +6,7 @@
  * 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 { BlacklistEntry, WhitelistEntry } from '../types.js';
 
@@ -158,33 +159,36 @@ function getPatternPlaceholder(type: string): string {
 
 <div class="email-filter-manager">
   <div class="section-toggle">
-    <button
+    <Button
+      variant={activeSection === 'whitelist' ? 'primary' : 'ghost'}
+      size="sm"
       class="section-btn"
-      class:active={activeSection === 'whitelist'}
       onclick={() => activeSection = 'whitelist'}
     >
       Whitelist
       <span class="count">{whitelist.length}</span>
-    </button>
-    <button
+    </Button>
+    <Button
+      variant={activeSection === 'blacklist' ? 'primary' : 'ghost'}
+      size="sm"
       class="section-btn"
-      class:active={activeSection === 'blacklist'}
       onclick={() => activeSection = 'blacklist'}
     >
       Blacklist
       <span class="count">{blacklist.length}</span>
-    </button>
+    </Button>
   </div>
 
   {#if filterError}
     <div class="filter-error" role="alert" aria-live="assertive">
       {filterError}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="sm"
         class="dismiss-btn"
         aria-label={t(M['messages.email_filter_manager.dismiss_error'])}
         onclick={() => filterError = null}
-      >&times;</button>
+      >&times;</Button>
     </div>
   {/if}
 
@@ -196,10 +200,12 @@ function getPatternPlaceholder(type: string): string {
           {t(M['messages.email_filter_manager.whitelist_description'])}
         </div>
         {#if !isReadonly && onaddwhitelist}
-          <button
+          <Button
+            variant="secondary"
+            size="sm"
             class="add-btn"
             onclick={() => { resetWhitelistForm(); showWhitelistForm = true; }}
-          >+ Add</button>
+          >+ Add</Button>
         {/if}
       </div>
 
@@ -249,10 +255,10 @@ function getPatternPlaceholder(type: string): string {
             </div>
           </div>
           <div class="form-actions">
-            <button class="cancel-btn" onclick={resetWhitelistForm} disabled={savingWhitelist}>Cancel</button>
-            <button class="save-btn" onclick={saveWhitelistEntry} disabled={savingWhitelist || !wlPattern.trim()}>
+            <Button variant="secondary" size="sm" class="cancel-btn" onclick={resetWhitelistForm} disabled={savingWhitelist}>Cancel</Button>
+            <Button variant="primary" size="sm" class="save-btn" onclick={saveWhitelistEntry} disabled={savingWhitelist || !wlPattern.trim()}>
               {savingWhitelist ? 'Saving...' : 'Add'}
-            </button>
+            </Button>
           </div>
         </div>
       {/if}
@@ -276,11 +282,13 @@ function getPatternPlaceholder(type: string): string {
                 {/if}
               </div>
               {#if !isReadonly && onremovewhitelist}
-                <button
+                <Button
+                  variant="ghost"
+                  size="sm"
                   class="delete-btn"
                   onclick={() => removeWhitelistEntry(entry)}
                   title={t(M['messages.email_filter_manager.whitelist_remove'])}
-                >&times;</button>
+                >&times;</Button>
               {/if}
             </div>
           {/each}
@@ -296,10 +304,12 @@ function getPatternPlaceholder(type: string): string {
           {t(M['messages.email_filter_manager.blacklist_description'])}
         </div>
         {#if !isReadonly && onaddblacklist}
-          <button
+          <Button
+            variant="secondary"
+            size="sm"
             class="add-btn"
             onclick={() => { resetBlacklistForm(); showBlacklistForm = true; }}
-          >+ Add</button>
+          >+ Add</Button>
         {/if}
       </div>
 
@@ -345,10 +355,10 @@ function getPatternPlaceholder(type: string): string {
             </div>
           </div>
           <div class="form-actions">
-            <button class="cancel-btn" onclick={resetBlacklistForm} disabled={savingBlacklist}>Cancel</button>
-            <button class="save-btn" onclick={saveBlacklistEntry} disabled={savingBlacklist || !blPattern.trim()}>
+            <Button variant="secondary" size="sm" class="cancel-btn" onclick={resetBlacklistForm} disabled={savingBlacklist}>Cancel</Button>
+            <Button variant="primary" size="sm" class="save-btn" onclick={saveBlacklistEntry} disabled={savingBlacklist || !blPattern.trim()}>
               {savingBlacklist ? 'Saving...' : 'Add'}
-            </button>
+            </Button>
           </div>
         </div>
       {/if}
@@ -372,11 +382,13 @@ function getPatternPlaceholder(type: string): string {
                 {/if}
               </div>
               {#if !isReadonly && onremoveblacklist}
-                <button
+                <Button
+                  variant="ghost"
+                  size="sm"
                   class="delete-btn"
                   onclick={() => removeBlacklistEntry(entry)}
                   title={t(M['messages.email_filter_manager.blacklist_remove'])}
-                >&times;</button>
+                >&times;</Button>
               {/if}
             </div>
           {/each}
@@ -401,28 +413,19 @@ function getPatternPlaceholder(type: string): string {
     border-radius: var(--smrt-radius-md, 8px);
   }
 
-  .section-btn {
+  /*
+   * The whitelist/blacklist toggle now renders through smrt-ui's <Button>,
+   * driven by `variant={active ? 'primary' : 'ghost'}` (a plain class:active view
+   * toggle, not an ARIA tablist). The variants own background/color/hover;
+   * `.section-toggle :global(.section-btn)` only re-asserts the row layout
+   * (flex/gap/radius) inside the pierced Button child scope (issue #1589).
+   */
+  .section-toggle :global(.section-btn) {
     display: flex;
     align-items: center;
     gap: 0.375rem;
-    padding: 0.375rem 0.75rem;
-    border: none;
     border-radius: var(--smrt-radius-md, 8px);
-    background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
     font-size: var(--smrt-typography-label-large-size, 0.8125rem);
-    font-family: inherit;
-    cursor: pointer;
-    transition: all 150ms ease;
-  }
-
-  .section-btn.active {
-    background: var(--smrt-color-primary-container, #d8e2ff);
-    color: var(--smrt-color-primary, #005ac1);
-  }
-
-  .section-btn:hover:not(.active) {
-    background: var(--smrt-color-surface-container-high, #e6e7ef);
   }
 
   .count {
@@ -450,25 +453,16 @@ function getPatternPlaceholder(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 flex-shrink (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);
@@ -557,42 +551,20 @@ function getPatternPlaceholder(type: string): string {
     padding-top: 0.25rem;
   }
 
-  .cancel-btn {
-    padding: 0.375rem 0.75rem;
-    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;
+  /*
+   * Cancel/Save now use Button's secondary/primary variants (dead bespoke CSS
+   * removed). `.form-actions :global(...)` only re-asserts the rounded radius;
+   * Cancel's neutral outline override keeps it from picking up secondary's
+   * primary border color (issue #1589).
+   */
+  .form-actions :global(.cancel-btn),
+  .form-actions :global(.save-btn) {
     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);
   }
 
   .entries-list {
@@ -684,7 +656,13 @@ function getPatternPlaceholder(type: string): string {
     flex-shrink: 0;
   }
 
-  .delete-btn {
+  /*
+   * The remove button now renders through smrt-ui's <Button variant="ghost">.
+   * `.entry-card :global(.delete-btn)` anchors on the real `.entry-card` element
+   * and pierces the Button child scope to keep the round icon button and its
+   * red-on-hover affordance (issue #1589).
+   */
+  .entry-card :global(.delete-btn) {
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: 1;
     padding: 0.125rem 0.5rem;
@@ -692,13 +670,10 @@ function getPatternPlaceholder(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-card :global(.delete-btn):hover {
     background: var(--smrt-color-error-container, #fce4ec);
     color: var(--smrt-color-error, #ba1a1a);
     border-color: var(--smrt-color-error, #ba1a1a);
@@ -724,11 +699,16 @@ function getPatternPlaceholder(type: string): string {
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
   }
 
-  .dismiss-btn {
+  /*
+   * The dismiss button now renders through smrt-ui's <Button variant="ghost">.
+   * `.filter-error :global(.dismiss-btn)` anchors on the real `.filter-error`
+   * element and pierces the Button child scope. `color: inherit` keeps the icon
+   * matching the error banner color (issue #1589).
+   */
+  .filter-error :global(.dismiss-btn) {
     background: transparent;
     border: none;
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    cursor: pointer;
     color: inherit;
     padding: 0 0.25rem;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"EmailFilterManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailFilterManager.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,KAAK;IACpB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAmUD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"EmailFilterManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailFilterManager.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,KAAK;IACpB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAoUD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/FolderNav.svelte

@@ -3,6 +3,7 @@
  * FolderNav - Folder/label navigation sidebar
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.messages.js';
 import type { FolderData } from '../types.js';
 
@@ -50,10 +51,10 @@ function getFolderIcon(specialUse?: string): string {
     <ul class="folder-list" role="list">
       {#each _systemFolders as folder (folder.id)}
         <li>
-          <button
-            class="folder-item"
-            class:folder-item--active={folder.id === activeFolderId}
-            type="button"
+          <Button
+            variant="ghost"
+            fullWidth
+            class={folder.id === activeFolderId ? 'folder-item folder-item--active' : 'folder-item'}
             onclick={() => onfolderclick?.(folder)}
             aria-current={folder.id === activeFolderId ? 'true' : undefined}
           >
@@ -62,7 +63,7 @@ function getFolderIcon(specialUse?: string): string {
             {#if showCounts && folder.unreadCount > 0}
               <span class="unread-badge">{folder.unreadCount}</span>
             {/if}
-          </button>
+          </Button>
         </li>
       {/each}
     </ul>
@@ -75,10 +76,10 @@ function getFolderIcon(specialUse?: string): string {
     <ul class="folder-list" role="list">
       {#each _userFolders as folder (folder.id)}
         <li>
-          <button
-            class="folder-item"
-            class:folder-item--active={folder.id === activeFolderId}
-            type="button"
+          <Button
+            variant="ghost"
+            fullWidth
+            class={folder.id === activeFolderId ? 'folder-item folder-item--active' : 'folder-item'}
             onclick={() => onfolderclick?.(folder)}
             aria-current={folder.id === activeFolderId ? 'true' : undefined}
           >
@@ -87,7 +88,7 @@ function getFolderIcon(specialUse?: string): string {
             {#if showCounts && folder.unreadCount > 0}
               <span class="unread-badge">{folder.unreadCount}</span>
             {/if}
-          </button>
+          </Button>
         </li>
       {/each}
     </ul>
@@ -107,7 +108,14 @@ function getFolderIcon(specialUse?: string): string {
     padding: 0;
   }
 
-  .folder-item {
+  /*
+   * Folder rows now render through smrt-ui's <Button variant="ghost" fullWidth>.
+   * The <button> is emitted inside the Button child, so `.folder-list :global(.folder-item)`
+   * anchors on the real `.folder-list` element and pierces the child scope to keep
+   * the nav-row layout, neutral color, hover and active styling (issue #1589). The
+   * active modifier is `folder-item--active`, NOT a Button variant class.
+   */
+  .folder-list :global(.folder-item) {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -115,7 +123,6 @@ function getFolderIcon(specialUse?: string): string {
     padding: 0.5rem 0.75rem;
     border: none;
     background: none;
-    cursor: pointer;
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
     color: var(--smrt-color-on-surface, #1a1c1e);
     border-radius: var(--smrt-radius-small, 0.25rem);
@@ -123,16 +130,16 @@ function getFolderIcon(specialUse?: string): string {
     text-align: left;
   }
 
-  .folder-item:hover {
+  .folder-list :global(.folder-item):hover {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .folder-item--active {
+  .folder-list :global(.folder-item--active) {
     background: var(--smrt-color-secondary-container, #d7e3f7);
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .folder-item:focus-visible {
+  .folder-list :global(.folder-item):focus-visible {
     outline: 2px solid var(--smrt-color-primary, #005ac1);
     outline-offset: -2px;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"FolderNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/FolderNav.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9C;AAiFD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FolderNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/FolderNav.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9C;AAkFD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/ForwardForm.svelte

@@ -10,6 +10,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';
 
@@ -85,17 +86,16 @@ export interface Props {
   {/if}
 
   <div class="actions">
-    <button
-      type="button"
-      class="btn-primary"
+    <Button
+      variant="primary"
       disabled={isSending || to.length === 0}
       onclick={handleSend}
     >
       {isSending ? 'Sending...' : 'Forward'}
-    </button>
-    <button type="button" class="btn-text" onclick={() => oncancel?.()}>
+    </Button>
+    <Button variant="ghost" class="btn-text" onclick={() => oncancel?.()}>
       Cancel
-    </button>
+    </Button>
   </div>
 </div>
 
@@ -162,29 +162,13 @@ export interface Props {
     gap: 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-text {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
-    border: none;
-    background: transparent;
+  /*
+   * Forward now uses Button's primary variant directly (dead .btn-primary CSS
+   * removed). The Cancel 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/ForwardForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForwardForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForwardForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0FD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ForwardForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForwardForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA4FD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageCard.svelte

@@ -4,6 +4,7 @@
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { M } from '../i18n.messages.js';
 import type { AccountData, MessageData } from '../types.js';
@@ -106,6 +107,7 @@ const _slackMeta = $derived.by(() => {
     </div>
   {/if}
 
+  <!-- raw-primitive-allow: large pressable message row wrapping rich header/subject/preview content (a structural selection surface with descendant compact-mode layout rules), not a standard action button -->
   <button
     class="message-content"
     type="button"
@@ -162,15 +164,15 @@ const _slackMeta = $derived.by(() => {
   </button>
 
   {#if onflag}
-    <button
+    <Button
+      variant="ghost"
       class="flag-btn"
-      type="button"
       onclick={() => onflag?.(message)}
       title={message.isFlagged ? 'Unflag' : 'Flag'}
       aria-label={message.isFlagged ? 'Unflag' : 'Flag'}
     >
       {message.isFlagged ? '⚑' : '⚐'}
-    </button>
+    </Button>
   {/if}
 </div>
 
@@ -308,21 +310,26 @@ const _slackMeta = $derived.by(() => {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .flag-btn {
+  /*
+   * The flag toggle now renders through smrt-ui's <Button variant="ghost">.
+   * `.message-card :global(.flag-btn)` anchors on the real `.message-card`
+   * element and pierces the Button child scope to keep the dimmed icon-toggle
+   * styling (issue #1589).
+   */
+  .message-card :global(.flag-btn) {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     border: none;
     background: none;
-    cursor: pointer;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     color: var(--smrt-color-on-surface-variant, #43474e);
     opacity: 0.5;
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
 
-  .flag-btn:hover {
+  .message-card :global(.flag-btn):hover {
     opacity: 1;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"MessageCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CACnD;AA6ID,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CACnD;AA+ID,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageDetail.svelte

@@ -3,7 +3,7 @@
  * MessageDetail - Full message view with type-adaptive sections
  */
 
-import { Card } from '@happyvertical/smrt-ui/ui';
+import { Button, Card } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import type { AccountData, AttachmentData, MessageData } from '../types.js';
 import AttachmentChip from './AttachmentChip.svelte';
@@ -162,19 +162,19 @@ const _displayBody = $derived.by(() => {
     {#if onreply || onforward || ondelete}
       <div class="actions">
         {#if onreply}
-          <button class="action-btn" type="button" onclick={() => onreply?.(message)}>
+          <Button variant="ghost" class="action-btn" onclick={() => onreply?.(message)}>
             ↩ Reply
-          </button>
+          </Button>
         {/if}
         {#if onforward}
-          <button class="action-btn" type="button" onclick={() => onforward?.(message)}>
+          <Button variant="ghost" class="action-btn" onclick={() => onforward?.(message)}>
             ↪ Forward
-          </button>
+          </Button>
         {/if}
         {#if ondelete}
-          <button class="action-btn action-btn--danger" type="button" onclick={() => ondelete?.(message)}>
+          <Button variant="ghost" class="action-btn action-btn--danger" onclick={() => ondelete?.(message)}>
             🗑 Delete
-          </button>
+          </Button>
         {/if}
       </div>
     {/if}
@@ -280,27 +280,34 @@ const _displayBody = $derived.by(() => {
     border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
   }
 
-  .action-btn {
+  /*
+   * Action buttons now render through smrt-ui's <Button variant="ghost">. The
+   * <button> is emitted inside the Button child, so `.actions :global(.action-btn)`
+   * anchors on the real `.actions` element and pierces the child scope to keep
+   * the original outlined-surface styling (issue #1589). The destructive button's
+   * modifier is `action-btn--danger`, NOT `danger`, to avoid colliding with
+   * Button's own `.danger` variant class.
+   */
+  .actions :global(.action-btn) {
     padding: 0.5rem 1rem;
     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-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .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);
   }
 
-  .action-btn--danger:hover {
+  .actions :global(.action-btn--danger):hover {
     background: var(--smrt-color-error-container, #ffdad6);
   }
 </style>