diff --git a/docs/STYLING-HOOKS.md b/docs/STYLING-HOOKS.md
index 27245f43..c66087c8 100644
--- a/docs/STYLING-HOOKS.md
+++ b/docs/STYLING-HOOKS.md
@@ -405,6 +405,11 @@ use `[data-hp="tool"][data-tool="…"]`; the complete `data-tool` vocabulary is
 in the JSON inventory. The toolbar X and the X on the active mode tab use
 `[data-hp="editor-close"]` while retaining `data-editor-navigation="view"`.
 
+The three editor mode tabs are `[data-hp="mode-tab"][data-mode="plan|devices|decor"]`
+(#629) and keep `data-editor-navigation`. Like the tabs themselves, the hook is
+present only for a user allowed to edit. Nothing in the card's styles selects
+it; its audience is `test`.
+
 The one visible secondary/context surface uses `[data-hp="tray"]`. Its
 `data-kind` is the stable launcher id when a grouped launcher owns it and the
 broad secondary kind otherwise. A closed placeholder does not carry the hook.
diff --git a/docs/data-hp-contract.json b/docs/data-hp-contract.json
index 8cdc06d0..75abb945 100644
--- a/docs/data-hp-contract.json
+++ b/docs/data-hp-contract.json
@@ -69,6 +69,12 @@
       "since": "1.73.0-beta.7",
       "audience": ["test"]
     },
+    "mode-tab": {
+      "elements": ["button"],
+      "since": "1.78.0-beta.2",
+      "audience": ["test"],
+      "attributes": { "data-mode": ["plan", "devices", "decor"] }
+    },
     "opening": {
       "elements": ["g"],
       "since": "1.59.0-beta.3",
diff --git a/src/houseplan-card.ts b/src/houseplan-card.ts
index 112b303b..5c890e6f 100755
--- a/src/houseplan-card.ts
+++ b/src/houseplan-card.ts
@@ -10803,7 +10803,7 @@ export class HouseplanCard extends LitElement {
             ? html`<div class="modes">
                 ${([['plan', 'mdi:floor-plan'], ['devices', 'mdi:tune-variant'], ['decor', 'mdi:draw']] as const).map(
                   ([m, ic]) => html`<button class="modetab ${this._mode === m ? 'active' : ''}"
-                    data-editor-navigation=${m}
+                    data-hp="mode-tab" data-mode=${m} data-editor-navigation=${m}
                     title=${this._t(('mode.' + m + '_tip') as any)}
                     @click=${() => this._setMode(m)}>
                     <ha-icon icon=${ic}></ha-icon><span class="ml">${this._t(('mode.' + m) as any)}</span>