From 313eca076d6f88057765d9f5dcb8fe04eb08ed60 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 17 Jun 2026 16:24:42 -0400
Subject: [PATCH] style(data-stores): add icon to Edit button; update style
 guidelines

- Edit button now has SquarePen icon + text per button UX standard
- Style guidelines: extract button icon+text rule into its own section 8
  (was buried in Accessibility); renumber Accessibility to section 9;
  add code examples and context table for the rule

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../GUIDE__AE_UI_Style_Guidelines.md          | 33 +++++++++++++++++--
 src/routes/core/data_stores/+page.svelte      |  6 ++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/documentation/GUIDE__AE_UI_Style_Guidelines.md b/documentation/GUIDE__AE_UI_Style_Guidelines.md
index 6329b583..1d4b9980 100644
--- a/documentation/GUIDE__AE_UI_Style_Guidelines.md
+++ b/documentation/GUIDE__AE_UI_Style_Guidelines.md
@@ -183,7 +183,37 @@ Always wrap in `{#if $lq__obj}{...}{:else}...skeleton...{/if}` — **never** sho
 
 ---
 
-## 8. Accessibility (Section 508 / WCAG 2.1 AA)
+## 8. Button UX Standard
+
+**Default rule: every button includes a Lucide icon AND a text label.**
+
+The icon gives instant visual recognition; the label removes ambiguity. This matters especially for non-English-native users and anyone scanning a UI quickly under conference-room pressure.
+
+| Context | Acceptable pattern |
+|---|---|
+| Standard action buttons | Icon (left, `size={14-16}`) + text label — **preferred** |
+| Space-constrained toolbars / icon rows | Icon-only — requires `title="..."` and `aria-label="..."` |
+| Extremely tight inline cells | Text-only — acceptable only when no icon fits |
+| Destructive / irreversible actions | Always icon + text, never icon-only |
+
+```svelte
+<!-- ✅ Standard -->
+<button class="btn preset-tonal-primary">
+    <SquarePen size={14} class="mr-1" /> Edit
+</button>
+
+<!-- ✅ Icon-only (toolbar) -->
+<button class="btn-icon preset-tonal-surface" title="Refresh results" aria-label="Refresh results">
+    <RefreshCw size={14} />
+</button>
+
+<!-- ❌ Text-only — add an icon -->
+<button class="btn preset-tonal-primary">Edit</button>
+```
+
+---
+
+## 9. Accessibility (Section 508 / WCAG 2.1 AA)
 
 | Requirement | Implementation |
 |---|---|
@@ -195,7 +225,6 @@ Always wrap in `{#if $lq__obj}{...}{:else}...skeleton...{/if}` — **never** sho
 | Form inputs | Visible `<label>` linked via `for` / `id`, or explicit `aria-label` |
 | Color-only information | Always pair color coding with icon or text — never color alone |
 | Minimum touch target | 44×44px effective hit area for all tap targets |
-| Button label + icon | All buttons should include **both a Lucide icon and text label**. Icon-only is acceptable for space-constrained toolbar/header actions (with `title` attribute); text-only is acceptable when layout is extremely tight. The icon+text combination aids non-English-native users who may not read the label fluently. |
 
 ---
 
diff --git a/src/routes/core/data_stores/+page.svelte b/src/routes/core/data_stores/+page.svelte
index 56ee33fe..20f2fb1a 100644
--- a/src/routes/core/data_stores/+page.svelte
+++ b/src/routes/core/data_stores/+page.svelte
@@ -15,6 +15,7 @@ import {
     LoaderCircle,
     Pencil,
     Plus,
+    SquarePen,
     RefreshCw,
     Search,
     X
@@ -596,8 +597,9 @@ function content_preview(ds: ae_DataStore): string {
                                     <button
                                         type="button"
                                         class="btn btn-sm preset-tonal-primary text-xs"
-                                        onclick={() => open_edit(ds)}>
-                                        Edit
+                                        onclick={() => open_edit(ds)}
+                                        title="Edit full record">
+                                        <SquarePen size={12} class="mr-1" /> Edit
                                     </button>
                                 </td>
                             </tr>