@happyvertical/smrt-messages 0.34.5 → 0.34.7

package/dist/svelte/components/EmailAccountManager.svelte

@@ -5,7 +5,9 @@
  * Reusable component for adding, editing, testing, and removing
  * email accounts. 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 { EmailAccountData } from '../types.js';
 
@@ -171,10 +173,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>
 
@@ -185,20 +189,20 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-name">{t(M['messages.email_account_manager.account_name'])}</label>
-          <input id="ea-name" class="form-input" type="text" bind:value={maName} placeholder={t(M['messages.email_account_manager.account_name_placeholder'])} />
+          <Input id="ea-name" class="form-input" type="text" bind:value={maName} placeholder={t(M['messages.email_account_manager.account_name_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-email">{t(M['messages.email_account_manager.email_address'])}</label>
-          <input id="ea-email" class="form-input" type="email" bind:value={maEmail} placeholder={t(M['messages.email_account_manager.email_placeholder'])} />
+          <Input id="ea-email" class="form-input" type="email" bind:value={maEmail} placeholder={t(M['messages.email_account_manager.email_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 0 0 130px;">
           <label class="form-label" for="ea-provider">Provider</label>
-          <select id="ea-provider" class="form-select" bind:value={maProviderType}>
+          <Select id="ea-provider" class="form-select" bind:value={maProviderType}>
             <option value="imap">IMAP</option>
             <option value="gmail">Gmail</option>
             <option value="outlook">Outlook</option>
             <option value="exchange">Exchange</option>
-          </select>
+          </Select>
         </div>
       </div>
 
@@ -206,19 +210,19 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 2;">
           <label class="form-label" for="ea-imap-host">Host</label>
-          <input id="ea-imap-host" class="form-input" type="text" bind:value={maImapHost} placeholder={t(M['messages.email_account_manager.imap_host_placeholder'])} />
+          <Input id="ea-imap-host" class="form-input" type="text" bind:value={maImapHost} placeholder={t(M['messages.email_account_manager.imap_host_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 0 0 90px;">
           <label class="form-label" for="ea-imap-port">Port</label>
-          <input id="ea-imap-port" class="form-input" type="number" bind:value={maImapPort} />
+          <Input id="ea-imap-port" class="form-input" type="number" bind:value={maImapPort} />
         </div>
         <div class="form-field" style="flex: 0 0 120px;">
           <label class="form-label" for="ea-imap-sec">Security</label>
-          <select id="ea-imap-sec" class="form-select" bind:value={maImapSecurity}>
+          <Select id="ea-imap-sec" class="form-select" bind:value={maImapSecurity}>
             <option value="ssl">SSL/TLS</option>
             <option value="starttls">STARTTLS</option>
             <option value="none">None</option>
-          </select>
+          </Select>
         </div>
       </div>
 
@@ -226,19 +230,19 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 2;">
           <label class="form-label" for="ea-smtp-host">Host</label>
-          <input id="ea-smtp-host" class="form-input" type="text" bind:value={maSmtpHost} placeholder={t(M['messages.email_account_manager.smtp_host_placeholder'])} />
+          <Input id="ea-smtp-host" class="form-input" type="text" bind:value={maSmtpHost} placeholder={t(M['messages.email_account_manager.smtp_host_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 0 0 90px;">
           <label class="form-label" for="ea-smtp-port">Port</label>
-          <input id="ea-smtp-port" class="form-input" type="number" bind:value={maSmtpPort} />
+          <Input id="ea-smtp-port" class="form-input" type="number" bind:value={maSmtpPort} />
         </div>
         <div class="form-field" style="flex: 0 0 120px;">
           <label class="form-label" for="ea-smtp-sec">Security</label>
-          <select id="ea-smtp-sec" class="form-select" bind:value={maSmtpSecurity}>
+          <Select id="ea-smtp-sec" class="form-select" bind:value={maSmtpSecurity}>
             <option value="ssl">SSL/TLS</option>
             <option value="starttls">STARTTLS</option>
             <option value="none">None</option>
-          </select>
+          </Select>
         </div>
       </div>
 
@@ -246,14 +250,15 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-username">Username</label>
-          <input id="ea-username" class="form-input" type="text" bind:value={maUsername} placeholder={t(M['messages.email_account_manager.username_placeholder'])} />
+          <Input id="ea-username" class="form-input" type="text" bind:value={maUsername} placeholder={t(M['messages.email_account_manager.username_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-password">Password</label>
-          <input id="ea-password" class="form-input" type="password" bind:value={maPassword} placeholder={editingId ? '(unchanged)' : ''} />
+          <Input id="ea-password" class="form-input" type="password" bind:value={maPassword} placeholder={editingId ? '(unchanged)' : ''} />
         </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={maIsActive} />
             Active
           </label>
@@ -261,10 +266,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 +277,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 +294,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 +333,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 +380,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);
@@ -432,29 +434,14 @@ function getProviderLabel(type: string): string {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .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 account-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;
@@ -481,42 +468,20 @@ function getProviderLabel(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 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-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 +503,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 +631,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 +660,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":"AAaA,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;AAkUD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}