Theme fix 2

Author: morehawes

docs/theme.md

@@ -119,7 +119,9 @@ Rows within panels are separated by a featherlight border. Override the opacity
 
 ### §6e — Icon buttons (`.icon-btn`)
 
-Inactive icons use `--bs-secondary-color`; active/hover state transitions to `--bs-primary`. The 0.15 s ease avoids jarring state snaps.
+Inactive icons use `--bs-secondary-color`; the **active panel** (`[aria-pressed="true"]`) and hover state both transition to `--bs-primary`. The 0.15 s ease avoids jarring state snaps.
+
+> **Important:** The `[aria-pressed="true"]` active rule **must** live in §6e (the visual overrides section). Do not rely on §6g for this — §6g is structural-only and may be overridden. Custom themes that omit `&[aria-pressed="true"]` from §6e will have no visible active panel indicator.
 
 ### §6f — Share URL textarea (`.navigator-share-textarea`)
 

docs/theme/green.scss

@@ -179,12 +179,13 @@ $font-size-base: 0.9375rem; // 15 px
 
 
 // §6e  Icon buttons
-// White icons in the dark top bar; green on hover/active.
+// White icons in the dark top bar; green on active/hover.
 
 .icon-btn {
   color: var(--bs-secondary-color);
   transition: color 0.15s ease;
 
+  &[aria-pressed="true"],
   &:hover {
     color: var(--bs-primary);
   }
@@ -193,6 +194,7 @@ $font-size-base: 0.9375rem; // 15 px
 [data-bs-theme="dark"] .icon-btn {
   color: rgba(255, 255, 255, 0.55);
 
+  &[aria-pressed="true"],
   &:hover {
     color: var(--bs-primary);
   }
@@ -287,10 +289,6 @@ $font-size-base: 0.9375rem; // 15 px
   position: relative;
   padding: 4px 4px 18px;
 
-  &[aria-pressed="true"] {
-    color: var(--bs-primary);
-  }
-
   &:focus-visible {
     outline: 2px solid white;
     outline-offset: 2px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ogis/navigator",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "type": "module",
   "description": "A map for everyone, right in the browser.",
   "homepage": "https://www.ogis.org/navigator",

src/assets/sass/theme.scss

@@ -196,6 +196,7 @@ $font-size-base: 0.9375rem; // 15 px
   color: var(--bs-secondary-color);
   transition: color 0.15s ease;
 
+  &[aria-pressed="true"],
   &:hover {
     color: var(--bs-primary);
   }
@@ -204,6 +205,7 @@ $font-size-base: 0.9375rem; // 15 px
 [data-bs-theme="dark"] .icon-btn {
   color: rgba(255, 255, 255, 0.50);
 
+  &[aria-pressed="true"],
   &:hover {
     color: var(--bs-primary);
   }
@@ -306,10 +308,6 @@ $font-size-base: 0.9375rem; // 15 px
   position: relative;
   padding: 4px 4px 18px;
 
-  &[aria-pressed="true"] {
-    color: var(--bs-primary);
-  }
-
   &:focus-visible {
     outline: 2px solid white;
     outline-offset: 2px;