@happyvertical/smrt-messages 0.34.5 → 0.34.7

package/dist/svelte/components/EmailFilterManager.svelte

@@ -5,7 +5,9 @@
  * Reusable component for managing email allow/block lists.
  * Works with any backend via callback props.
  */
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 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 +160,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 +201,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>
 
@@ -209,15 +216,15 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 0 0 120px;">
               <label class="form-label" for="wl-type">Type</label>
-              <select id="wl-type" class="form-select" bind:value={wlType}>
+              <Select id="wl-type" class="form-select" bind:value={wlType}>
                 <option value="email">Email</option>
                 <option value="domain">Domain</option>
                 <option value="regex">Regex</option>
-              </select>
+              </Select>
             </div>
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="wl-pattern">Pattern</label>
-              <input
+              <Input
                 id="wl-pattern"
                 class="form-input"
                 type="text"
@@ -229,7 +236,7 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="wl-category">Category <span class="optional">(optional)</span></label>
-              <input
+              <Input
                 id="wl-category"
                 class="form-input"
                 type="text"
@@ -239,7 +246,7 @@ function getPatternPlaceholder(type: string): string {
             </div>
             <div class="form-field" style="flex: 2;">
               <label class="form-label" for="wl-desc">Description</label>
-              <input
+              <Input
                 id="wl-desc"
                 class="form-input"
                 type="text"
@@ -249,10 +256,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 +283,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 +305,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>
 
@@ -309,15 +320,15 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 0 0 120px;">
               <label class="form-label" for="bl-type">Type</label>
-              <select id="bl-type" class="form-select" bind:value={blType}>
+              <Select id="bl-type" class="form-select" bind:value={blType}>
                 <option value="email">Email</option>
                 <option value="domain">Domain</option>
                 <option value="regex">Regex</option>
-              </select>
+              </Select>
             </div>
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="bl-pattern">Pattern</label>
-              <input
+              <Input
                 id="bl-pattern"
                 class="form-input"
                 type="text"
@@ -329,7 +340,7 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="bl-reason">Reason</label>
-              <input
+              <Input
                 id="bl-reason"
                 class="form-input"
                 type="text"
@@ -339,16 +350,17 @@ function getPatternPlaceholder(type: string): string {
             </div>
             <div class="form-field checkbox-field">
               <label class="form-label checkbox-label">
+                <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
                 <input type="checkbox" bind:checked={blAutoArchive} />
                 Auto-archive
               </label>
             </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 +384,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 +415,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 +455,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);
@@ -508,29 +504,14 @@ function getPatternPlaceholder(type: string): string {
     opacity: 0.7;
   }
 
-  .form-input,
-  .form-select {
-    padding: 0.5rem 0.625rem;
-    border-radius: var(--smrt-radius-md, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    font-family: inherit;
-    transition: border-color 150ms ease;
-  }
-
-  .form-input:focus,
-  .form-select:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-  }
-
-  .form-input::placeholder {
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    opacity: 0.5;
-  }
-
+  /*
+   * The form fields now render through smrt-ui's <Input> / <Select>, which bring
+   * their own tokenised border / background / focus / placeholder styling and
+   * honor prefers-reduced-motion themselves. The old `.form-input` / `.form-select`
+   * rules (and their :focus / ::placeholder overrides) are dropped as dead — they
+   * targeted the raw elements that now live inside the primitive child scopes
+   * (issue #1589).
+   */
   .checkbox-field {
     justify-content: flex-end;
     padding-bottom: 0.5rem;
@@ -557,42 +538,20 @@ function getPatternPlaceholder(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;
+   * 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-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);
   }
 
   .entries-list {
@@ -684,7 +643,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 +657,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 +686,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":"AAaA,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;AAsUD,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,8 @@ export interface Props {
 
 <script lang="ts">
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Textarea } from '@happyvertical/smrt-ui/forms';
+  import { Button } from '@happyvertical/smrt-ui/ui';
   import { M } from '../i18n.js';
   import RecipientInput from './RecipientInput.svelte';
 
@@ -67,12 +69,11 @@ export interface Props {
     onchange={(r) => { to = r; }}
   />
 
-  <textarea
-    class="forward-body"
+  <Textarea
     bind:value={body}
     placeholder={t(M['messages.forward_form.note_placeholder'])}
     rows={3}
-  ></textarea>
+  />
 
   <div class="forwarded-original">
     <pre class="forwarded-text">{forwardedBlock}</pre>
@@ -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>
 
@@ -117,22 +117,6 @@ export interface Props {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .forward-body {
-    width: 100%;
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
-    border-radius: var(--smrt-radius-sm, 8px);
-    padding: var(--smrt-spacing-2, 8px);
-    font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-body-medium-size, 14px);
-    resize: vertical;
-    box-sizing: border-box;
-  }
-
-  .forward-body:focus {
-    outline: 2px solid var(--smrt-color-primary, #6750a4);
-    outline-offset: -1px;
-  }
-
   .forwarded-original {
     padding: var(--smrt-spacing-2, 8px);
     background: var(--smrt-color-surface-variant, #e7e0ec);
@@ -162,29 +146,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;AA8FD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}