jekyll-theme-zer0 1.24.0 → 1.25.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f65c3a0d1bdabc361ffa201b1ef8718b51d9d90ac9f562d465cbcf11da23cff3
-  data.tar.gz: 5a688bea4feaf4b0408a072cf0d23dea6922aaab810dfea9e71f5e6d55147b29
+  metadata.gz: 2ffe866835e858107f670f29086f904914d21bf1159d8c6eb3cbd138f79caf64
+  data.tar.gz: d26f27d6460136cc9f2da67da26523721b52b0e7525e0811498910215e2f29e2
 SHA512:
-  metadata.gz: 021abbb9996ad7419ce2d27e73ece0234e79f63b8fca7f9ce1619406f91d5e61eabe9ab352257dc09df144c45a75ffa79aa9ff4120c354384fdf3c65420d2557
-  data.tar.gz: 01f76088c04901271942a073140c1ab38ac98bb1ed9ec2defa4d20cb532e331589415f341fa62a0dc34e20ad4a6194a6d9e34477e35d601a8e3593e96d830f22
+  metadata.gz: 50038606f12260b1382fceee13299e6f8a9ca0b08b00ba18e285ed88ee762fd425e853d6fde39e8c9f72f8b345f841b04b29a3e4b095a89c36f01dc4d267d036
+  data.tar.gz: e2e2764ca02d2d10250c768beb66ca7b7ba44c60b22e1852f3993f245080b5b2d3ad532245b33e394a078ae912cc60b28b33ee9fb23403194a1e75183841d925

data/CHANGELOG.md

@@ -5,6 +5,99 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.25.0](https://github.com/bamr87/zer0-mistakes/compare/v1.24.0...v1.25.0) (2026-07-03)
+
+
+### Features
+
+* **features:** reverse-traceability source tags — applied and enforced ([#270](https://github.com/bamr87/zer0-mistakes/issues/270)) ([f2c0c07](https://github.com/bamr87/zer0-mistakes/commit/f2c0c073c08bce62956a56b4b3e77d48a00ba309))
+* **includes:** rebuild settings offcanvas into 3 coherent tabs ([#276](https://github.com/bamr87/zer0-mistakes/issues/276)) ([6d7fa5e](https://github.com/bamr87/zer0-mistakes/commit/6d7fa5e028a540576205462cb37797f6ee11c98a))
+* **navigation:** collection-aware sidebar modes with shared resolver ([#273](https://github.com/bamr87/zer0-mistakes/issues/273)) ([104285f](https://github.com/bamr87/zer0-mistakes/commit/104285fbed2d27646549c9aa956dea5108d91f77))
+
+
+### Bug Fixes
+
+* **features:** stop ZER0-061 card from swallowing every following card ([#268](https://github.com/bamr87/zer0-mistakes/issues/268)) ([46a604d](https://github.com/bamr87/zer0-mistakes/commit/46a604d1bf4331422b382bf895aeecae928fda70))
+* **navigation:** remove redundant entries from navigation menus ([916eca2](https://github.com/bamr87/zer0-mistakes/commit/916eca269726c984c5c0c9dc9533c83d9975f906))
+* **sass:** mobile audit — contain author card, restore consent z-order, grow tap targets ([#275](https://github.com/bamr87/zer0-mistakes/issues/275)) ([8ec9867](https://github.com/bamr87/zer0-mistakes/commit/8ec9867858ff87e9b8a6fcd4a68ec7e50582c3c1))
+
+## [Unreleased]
+
+### Changed
+
+- **Settings panel rebuilt** — the navbar Settings offcanvas (`#info-section`)
+  is reorganized from four overlapping tabs (Settings / Environment /
+  Developer / Background) into three with one purpose each, guarded by the
+  new `test/visual/settings-panel.spec.js` smoke suite
+  (evidence: [`test/visual/evidence/settings-panel/`](test/visual/evidence/settings-panel/README.md)
+  — 4 tabs → 3, duplicate color-mode controls 6 → 3, dead search box
+  removed, admin links 0 → 4):
+  - **Appearance** consolidates every look-and-feel control exactly once:
+    color mode (one-click segmented control replacing the two-click
+    dropdown), theme skin, background toggle + layer opacity with inline
+    values, and the primary-color picker — now mounted *inside* the tab
+    instead of appended below the tab content where it duplicated the
+    color-mode buttons under every tab.
+  - **Site** stacks the environment card (copyable page URL via a delegated
+    `data-zer0-copy` handler — inline `onclick` handlers removed),
+    quick links, deduplicated theme & build info, and Admin quick links.
+  - **Developer** keeps page location (rendered only where breadcrumbs
+    render — no more empty heading on the homepage), page metadata, and
+    source shortcuts (dead never-initialized tooltip attributes dropped).
+  - The dead Settings-tab search box (an empty `#searchbox` no JS ever
+    bound to) is removed; the search modal remains the one search surface.
+  - Mobile tabs keep their text labels (their accessible names) at every
+    width and drop the decorative icons instead of the reverse.
+
+### Fixed
+
+- **Settings panel admin links never rendered** — the
+  `_plugins/admin_page_urls.rb` lookup powering them never ran: the
+  `github-pages` gem forces safe mode and randomizes `plugins_dir`, so local
+  `_plugins` are disabled on GitHub Pages, in CI, and in the Docker dev
+  server alike. The plugin is replaced with a pure-Liquid scan in the cached
+  `_includes/components/admin-links.html` (jekyll-include-cache is
+  whitelisted), so the Admin section now renders its existence-gated links
+  (0 → 4 on the demo site).
+
+- **Mobile responsive audit** — four defects found by driving every key route
+  and component under phone emulation (320–414px), each guarded by the new
+  `test/visual/mobile-responsive.spec.js` smoke suite
+  (evidence: [`test/visual/evidence/mobile-responsive/`](test/visual/evidence/mobile-responsive/README.md) —
+  author-card page overflow 19px → 0 on small phones; consent buttons 0
+  tap-blocked; all footer/copy tap targets ≥24px):
+  - **Author card**: a long nowrap expertise badge propagated through flexbox
+    `min-width: auto` and pushed the whole page past the viewport on ≤340px
+    phones, widening the layout viewport so the fixed navbar rendered "cut
+    off" and the page panned sideways.
+  - **Cookie consent banner**: the `.zer0-bg-body` child-elevation rule
+    flattened the banner (and the TOC FAB) to `z-index: 1`, letting the chat
+    and local-graph FABs paint over — and steal taps from — the banner's
+    Reject All / Accept All buttons on mobile. The rule now excludes
+    `.position-fixed`, restoring the `--zer0-layer-*` token order.
+  - **Footer tap targets**: text links (~19px) and icon-only social links
+    (~16px) now meet the WCAG 2.5.8 24px minimum via block padding and
+    minimum boxes — text size and visual design unchanged.
+  - **Breadcrumb tap targets**: breadcrumb links (~19px bare text) gain a
+    ≥24px tap box via block padding + matching negative margin, without
+    shifting the visual baseline.
+  - **Code-copy buttons**: grown from ~22px to ≥24px tall (32px on
+    coarse/touch pointers).
+  - **ToC / chat FAB collision**: on mobile, the table-of-contents FAB and
+    the AI-chat toggle both claimed the right-edge slot above back-to-top
+    and overlapped (ToC painting over the chat button). The chat toggle and
+    its panel now step one slot higher on pages that render the ToC FAB,
+    and the chat panel is capped to the viewport so it can't poke above
+    short tablet/landscape screens.
+
+### Added
+
+- **Mobile test tier**: `test/visual/mobile-responsive.spec.js` runs the above
+  guards plus offcanvas-menu, search-modal, and settings-panel fit/tap checks
+  under real Pixel-class emulation in the `smoke` tier; `npm run test:mobile`
+  runs just this suite. New `dismissCookieConsent` fixture pre-seeds the
+  consent choice for tests that interact with lower-screen chrome.
+
 ## [1.24.0](https://github.com/bamr87/zer0-mistakes/compare/v1.23.0...v1.24.0) (2026-07-01)
 
 
@@ -42,6 +135,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug Fixes
 
+* **features:** stop a feature card from swallowing every card after it on `/features/` — a raw `<key>` in the ZER0-061 description rendered as a stray HTML element. Fixed the description (`/authors/:key/`), escaped all `description` output on the features page and in `feature-card.html`, and added a registry-gate check that rejects raw `<`/`>` in titles/descriptions. (evidence: [`test/visual/evidence/features-card-escape/`](test/visual/evidence/features-card-escape/README.md))
 * **includes:** existence-guard component-showcase demo links — breadcrumb and list-group items now render as real links when the target page exists in the build (`/docs/`, `/docs/customization/`, `/categories/`, `/tags/`) and as plain text when absent; removes inert `href="#"` / `onclick="return false;"` workaround ([#219](https://github.com/bamr87/zer0-mistakes/issues/219)) (evidence: [`test/visual/evidence/component-showcase/`](test/visual/evidence/component-showcase/README.md))
 
 ### Tests

data/README.md

@@ -757,11 +757,11 @@ All workflows live under [`.github/workflows/`](.github/workflows/).
 
 | # | Workflow | File | Trigger | Purpose |
 |---|----------|------|---------|---------|
-| 1 | **Comprehensive CI Pipeline** | [`ci.yml`](.github/workflows/ci.yml) | push / PR / dispatch | Detect changes → fast checks → quality control → matrix test suite → integration tests → build & validate |
-| 2 | **TEST (Latest Dependencies)** | [`test-latest.yml`](.github/workflows/test-latest.yml) | daily schedule / push / PR / dispatch | Zero-pin Docker build with bleeding-edge gems; tests then promotes passing images to Docker Hub |
+| 1 | **Comprehensive CI Pipeline** | [`ci.yml`](.github/workflows/ci.yml) | push / PR / dispatch | Detect changes → quality control (incl. quick preflight) → matrix test suite → integration tests → build & validate |
+| 2 | **TEST (Latest Dependencies)** | [`test-latest.yml`](.github/workflows/test-latest.yml) | daily schedule / push / dispatch | Zero-pin Docker build with bleeding-edge gems; tests then promotes passing images to Docker Hub |
 | 3 | **Release** | [`release.yml`](.github/workflows/release.yml) | push to `main` | release-please opens a release PR from Conventional Commits; merging it tags `vX.Y.Z` and publishes the gem to [RubyGems](https://rubygems.org/gems/jekyll-theme-zer0) |
 | 4 | **Update Dependencies** | [`update-dependencies.yml`](.github/workflows/update-dependencies.yml) | weekly schedule | Refreshes `Gemfile.lock` to latest compatible versions and opens an automated PR |
-| 5 | **CodeQL Security Scanning** | [`codeql.yml`](.github/workflows/codeql.yml) | push / PR on code paths + weekly | Static security analysis across Ruby, JavaScript/TypeScript, Python, Actions, and YAML |
+| 5 | **CodeQL Security Scanning** | [`codeql.yml`](.github/workflows/codeql.yml) | push / PR on code paths + weekly | Static security analysis across Ruby, JavaScript/TypeScript, Python, and Actions |
 | 6 | **Content & Docs Review** | [`ai-content-review.yml`](.github/workflows/ai-content-review.yml) | PR on docs/content | Deterministic SEO/quality review + optional Claude agent + docs front matter, internal-link, and markdownlint checks |
 | 7 | **Convert Jupyter Notebooks** | [`convert-notebooks.yml`](.github/workflows/convert-notebooks.yml) | push to `pages/_notebooks/**.ipynb` | Auto-converts `.ipynb` → Jekyll-friendly Markdown with extracted images |
 | 8 | **Sync** | [`sync.yml`](.github/workflows/sync.yml) | push affecting `_data/backlog.yml` or `_data/roadmap.yml` | Mirrors the backlog to GitHub Issues and regenerates the README roadmap section |

data/_data/authors.yml

@@ -1,3 +1,4 @@
+# Feature: ZER0-061
 # Authors Data File
 # =================
 # Define author profiles for blog posts

data/_data/features.yml

@@ -1,6 +1,6 @@
 # zer0-mistakes Theme Features Registry
 # Comprehensive feature tracking for the zer0-mistakes Jekyll theme
-# Version: 1.23.0
+# Version: 1.24.0
 # Last Updated: 2026-06-30
 
 features:
@@ -1767,7 +1767,7 @@ features:
 
   - id: ZER0-061
     title: "Author Profiles System"
-    description: "Auto-generated author profile pages and a searchable author directory from _data/authors.yml — each author gets a /authors/<key>/ hub with bio, stats, and a filterable grid of their content across collections"
+    description: "Auto-generated author profile pages and a searchable author directory from _data/authors.yml — each author gets a /authors/:key/ hub with bio, stats, and a filterable grid of their content across collections"
     implemented: true
     version: "1.20.0"
     link: "/authors/"
@@ -2109,3 +2109,38 @@ features:
       - na: "CI security scan — .github/workflows/secret-scan.yml"
     references:
       workflow: ".github/workflows/secret-scan.yml"
+
+  - id: ZER0-077
+    title: "Unified Settings Panel"
+    description: "Navbar settings offcanvas reorganized into Appearance, Site, and Developer tabs — consolidated color-mode/skin/background controls, delegated copy-to-clipboard, and existence-gated admin quick links computed in cached Liquid"
+    implemented: true
+    version: "1.25.0"
+    link: "/"
+    docs: "/docs/customization/includes/"
+    tags: [ui, navigation, bootstrap, accessibility]
+    date: 2026-07-02
+    provenance:
+      introduced_in: "1.25.0"
+      pr: 276
+      commit: "3b951604"
+      issue: null
+    tests:
+      - "test/visual/settings-panel.spec.js"
+    references:
+      includes:
+        - "_includes/components/info-section.html"
+        - "_includes/components/admin-links.html"
+        - "_includes/components/halfmoon.html"
+        - "_includes/components/env-switcher.html"
+        - "_includes/components/theme-info.html"
+        - "_includes/components/background-settings.html"
+        - "_includes/components/dev-shortcuts.html"
+      scripts:
+        - "assets/js/halfmoon.js"
+        - "assets/js/modules/theme/appearance.js"
+      sass:
+        - "_sass/utilities/_layout.scss"
+    features:
+      - "Appearance tab: one-click color mode, 9 theme skins, background layer opacity, primary color"
+      - "Site tab: environment badge, copyable page URL, quick links, theme & build info, admin links"
+      - "Developer tab: breadcrumb page location, page metadata, source-code shortcuts"

data/_data/navigation/README.md

@@ -19,11 +19,18 @@
 #
 # ## Navigation Modes
 #
-# The sidebar supports three navigation modes set via `page.sidebar.nav`:
-#
-# 1. **auto** - Auto-generates from collection documents
-# 2. **tree** - Uses YAML data from this directory
-# 3. **categories** - Groups by Jekyll categories
+# The sidebar supports these navigation modes set via `page.sidebar.nav`
+# (resolved by _includes/navigation/sidebar-config.html; page front matter →
+# collection `sidebar:` metadata → site.sidebar → nothing):
+#
+# 1. **auto** - Best mode for the page's collection: a curated
+#    _data/navigation/<collection>.yml wins, then the live "collection"
+#    folder tree, then post "categories"
+# 2. **collection** - Live folder tree of the page's (or a named) collection
+# 3. **categories** - Posts grouped by Jekyll category
+# 4. **tags** - Posts grouped by Jekyll tag
+# 5. **<file name>** - Any other value renders _data/navigation/<value>.yml
+#    as a curated tree (e.g. `nav: docs` → docs.yml)
 #
 # ## Available Files
 #
@@ -42,6 +49,9 @@
 #   nav: docs  # Uses _data/navigation/docs.yml
 # ```
 #
+# Collections named like a file here get it automatically under `nav: auto`
+# (docs.yml, about.yml, quickstart.yml, posts.yml ↔ the matching collection).
+#
 # ## Navbar capacity & responsive constraints (main.yml)
 #
 # The top navbar adapts the `main.yml` items to the viewport automatically:

data/_data/navigation/main.yml

@@ -18,8 +18,6 @@
   icon: bi-newspaper
   url: /news/
   children:
-    - title: All News
-      url: /news/
     - title: Categories
       url: /categories/
     - title: Tags
@@ -29,8 +27,6 @@
   icon: bi-journal-text
   url: /notes/
   children:
-    - title: All Notes
-      url: /notes/
     - title: Git Cheatsheet
       url: /notes/git-cheatsheet/
     - title: Docker Commands
@@ -46,8 +42,6 @@
   icon: bi-journal-code
   url: /notebooks/
   children:
-    - title: All Notebooks
-      url: /notebooks/
     - title: Test Notebook
       url: /notebooks/test-notebook/
 
@@ -55,8 +49,6 @@
   icon: bi-journal-bookmark
   url: /docs/
   children:
-    - title: Documentation Home
-      url: /docs/
     - title: Installation
       url: /docs/installation/
     - title: Jekyll Guide

data/_data/roadmap.yml

@@ -1,3 +1,4 @@
+# Feature: ZER0-052
 # =============================================================================
 # zer0-mistakes Roadmap — Single Source of Truth
 # =============================================================================

data/_includes/README.md

@@ -18,10 +18,12 @@ Essential layout components that form the foundation of the site:
 All navigation-related components:
 
 - `navbar.html` - Main navigation menu
-- `sidebar-left.html` - Left sidebar with dynamic navigation
+- `sidebar-left.html` - Left sidebar panel (offcanvas shell around the resolved nav)
+- `sidebar-config.html` - Resolves the effective sidebar mode/title/icon (page → collection → site); shared by layout, header, sidebar, and drawer
+- `sidebar-nav.html` - Renders the resolved sidebar mode (dispatches to the includes below)
 - `sidebar-right.html` - Right sidebar content
-- `sidebar-folders.html` - Dynamic folder structure generation
-- `sidebar-categories.html` - Category-based navigation
+- `sidebar-folders.html` - "collection" mode: collapsible folder tree of a collection's documents
+- `sidebar-categories.html` - "categories"/"tags" modes: posts grouped by taxonomy term
 - `nav_list.html` - Manual navigation list rendering
 - `breadcrumbs.html` - Navigation breadcrumbs
 
@@ -37,12 +39,13 @@ Analytics and tracking integrations:
 
 Reusable UI components and widgets:
 
-- `searchbar.html` - Search functionality
+- `searchbar.html` - Deprecated search stub (superseded by `search-modal.html`)
 - `powered-by.html` - "Powered by" credits display
 - `quick-index.html` - Quick page index
 - `dev-shortcuts.html` - Developer shortcuts
-- `info-section.html` - Settings/info modal
-- `halfmoon.html` - Dark mode toggle
+- `info-section.html` - Settings offcanvas (Appearance / Site / Developer tabs)
+- `admin-links.html` - Cached admin quick links for the settings offcanvas
+- `halfmoon.html` - Light/dark/auto color-mode segmented control
 - `zer0-env-var.html` - Environment variable configuration
 - `svg.html` - SVG icon definitions
 - `js-cdn.html` - CDN JavaScript libraries
@@ -79,7 +82,7 @@ When including files in layouts or other templates, use the full path:
 ```liquid
 {% include core/head.html %}
 {% include navigation/sidebar-left.html %}
-{% include components/searchbar.html %}
+{% include components/search-modal.html %}
 {% include analytics/google-analytics.html %}
 ```
 

data/_includes/analytics/google-analytics.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-038 {% endcomment %}
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script>
     (function () {

data/_includes/analytics/google-tag-manager-body.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-039 {% endcomment %}
 <!-- Google Tag Manager (noscript) -->
     <noscript>
         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NN8P7RZ" 

data/_includes/analytics/google-tag-manager-head.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-039 {% endcomment %}
 <!-- 
   title: Google Tag Manager 
   file: 

data/_includes/analytics/posthog.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-006 {% endcomment %}
 <!--
   ===================================================================
   POSTHOG ANALYTICS - Privacy-First Web Analytics Integration

data/_includes/components/README.md

@@ -87,7 +87,8 @@ If a component needs a token that doesn't exist yet, propose it in `_sass/tokens
 | Component                | Purpose                                              |
 |--------------------------|------------------------------------------------------|
 | `author-eeat.html`       | E-E-A-T author bio with Schema.org markup.           |
-| `info-section.html`      | Settings offcanvas with theme/appearance controls.    |
+| `admin-links.html`       | Cached admin quick links (settings offcanvas Site tab). |
+| `info-section.html`      | Settings offcanvas — Appearance / Site / Developer.   |
 | `js-cdn.html`            | Body-end script bundle.                               |
 | `search-modal.html`      | Global search modal.                                  |
 

data/_includes/components/admin-links.html

@@ -0,0 +1,63 @@
+{% comment %} Feature: ZER0-077 {% endcomment %}
+{%- comment -%}
+  Component:   admin-links
+  Path:        _includes/components/admin-links.html
+  Purpose:     "Admin" section of the settings offcanvas — quick links to the
+               built-in admin pages, each rendered only when the target page
+               exists in the build (prevents 404s on bare-minimum /
+               remote-theme sites that haven't created the admin pages).
+  Params:      none — site-scoped only. Include with {% include_cached %} so
+               the URL scan below runs once per build, not once per page.
+  Depends on:  site.pages, the `about` collection, Bootstrap list-group.
+  Notes:       Pure Liquid on purpose: local _plugins never load under the
+               github-pages gem (it forces safe mode and randomizes
+               plugins_dir), so a plugin-computed lookup is dead on GitHub
+               Pages and in the Docker dev server. Keep page.* out of this
+               file — it would poison the include cache.
+{%- endcomment -%}
+
+{%- assign _page_urls = site.pages | map: "url" | join: "|" -%}
+{%- assign _about_urls = "" -%}
+{%- if site.about -%}
+  {%- assign _about_urls = site.about | map: "url" | join: "|" -%}
+{%- endif -%}
+{%- capture _admin_urls -%}|{{ _page_urls }}|{{ _about_urls }}|{%- endcapture -%}
+
+{%- assign _cfg_page = false -%}
+{%- assign _theme_page = false -%}
+{%- assign _nav_page = false -%}
+{%- assign _env_page = false -%}
+{%- if _admin_urls contains "|/about/config/|" -%}{% assign _cfg_page = true %}{%- endif -%}
+{%- if _admin_urls contains "|/about/settings/theme/|" -%}{% assign _theme_page = true %}{%- endif -%}
+{%- if _admin_urls contains "|/about/settings/navigation/|" -%}{% assign _nav_page = true %}{%- endif -%}
+{%- if _admin_urls contains "|/about/settings/environment/|" -%}{% assign _env_page = true %}{%- endif -%}
+
+{% if _cfg_page or _theme_page or _nav_page or _env_page %}
+<div class="mb-3">
+  <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+    <i class="bi bi-speedometer2 me-1" aria-hidden="true"></i>Admin
+  </h6>
+  <div class="list-group list-group-flush small">
+    {% if _cfg_page %}
+    <a href="{{ '/about/config/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-gear me-2 text-body-secondary" aria-hidden="true"></i>Configuration
+    </a>
+    {% endif %}
+    {% if _theme_page %}
+    <a href="{{ '/about/settings/theme/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-palette me-2 text-body-secondary" aria-hidden="true"></i>Theme Customizer
+    </a>
+    {% endif %}
+    {% if _nav_page %}
+    <a href="{{ '/about/settings/navigation/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-signpost-2 me-2 text-body-secondary" aria-hidden="true"></i>Navigation Editor
+    </a>
+    {% endif %}
+    {% if _env_page %}
+    <a href="{{ '/about/settings/environment/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-hdd-network me-2 text-body-secondary" aria-hidden="true"></i>Environment Dashboard
+    </a>
+    {% endif %}
+  </div>
+</div>
+{% endif %}

data/_includes/components/admin-tabs.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-050 {% endcomment %}
 <!--
   ===================================================================
   ADMIN TABS — Reusable tabbed interface for admin pages

data/_includes/components/ai-chat.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-060 {% endcomment %}
 {%- comment -%}
   Component:   ai-chat
   Path:        _includes/components/ai-chat.html
@@ -351,14 +352,35 @@
   @media (max-width: 576px) {
     #aiChatPanel {
       width: calc(100vw - 2rem);
-      right: 1rem;
-      bottom: 8rem;
+      right: var(--zer0-space-fab-offset, 1rem);
+      /* One gap above the toggle's slot (toggle is 3rem tall). */
+      bottom: calc(var(--zer0-space-fab-offset, 1rem) + var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem) + 3rem + var(--zer0-space-fab-gap, 0.75rem));
       max-height: 60vh;
     }
+  }
+
+  /* Below lg, pages with a sidebar/TOC render the mobile TOC FAB in this
+     same right-edge slot (offset + size + gap — see .bd-toc-fab in
+     _sass/layouts/_navbar-extras.scss). Step the chat toggle and panel one
+     slot higher there so the two buttons never overlap. */
+  @media (max-width: 991.98px) {
+    /* Cap the panel to the space between its anchored bottom (worst case:
+       the stepped-up slot below) and the fixed header — a 540px panel pokes
+       above short tablet/landscape viewports. */
+    #aiChatPanel {
+      max-height: min(60vh, calc(100vh
+        - var(--zer0-space-fab-offset, 1rem)
+        - 2 * (var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem))
+        - 3rem - var(--zer0-space-fab-gap, 0.75rem)
+        - 4rem));
+    }
+
+    body:has(#tocFab) #aiChatToggle {
+      bottom: calc(var(--zer0-space-fab-offset, 1rem) + 2 * (var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem)));
+    }
 
-    #aiChatToggle {
-      bottom: 4.5rem;
-      right: 1rem;
+    body:has(#tocFab) #aiChatPanel {
+      bottom: calc(var(--zer0-space-fab-offset, 1rem) + 2 * (var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem)) + 3rem + var(--zer0-space-fab-gap, 0.75rem));
     }
   }
 

data/_includes/components/author-eeat.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-054 {% endcomment %}
 <!--
   ===================================================================
   AUTHOR E-E-A-T BLOCK - Experience, Expertise, Authority, Trust

data/_includes/components/background-customizer.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-065 {% endcomment %}
 <!--
   ===================================================================
   BACKGROUND CUSTOMIZER — fffuel-style background settings panel

data/_includes/components/background-settings.html

@@ -1,17 +1,21 @@
+{% comment %} Feature: ZER0-077 {% endcomment %}
 <!--
   ===================================================================
   BACKGROUND SETTINGS — fffuel-style background controls (tab content)
   ===================================================================
-  
+
   File: background-settings.html
   Path: _includes/components/background-settings.html
-  Purpose: Background skin selector and opacity controls, rendered
-           inside the Settings offcanvas Background tab.
-  
+  Purpose: Theme-skin selector and SVG-background controls, rendered
+           inside the Settings offcanvas Appearance tab.
+
   Dependencies:
     - assets/js/background-customizer.js (zer0Bg API)
     - _sass/theme/_backgrounds.scss (CSS custom properties)
     - Bootstrap 5 form components
+
+  Section headings match the h6 pattern used by the parent
+  info-section.html so the Appearance tab reads as one surface.
   ===================================================================
 -->
 
@@ -21,9 +25,9 @@
 <!-- Skin selector -->
 <div class="mb-4">
   <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-    <i class="bi bi-palette2 me-1"></i>Theme Skin
+    <i class="bi bi-palette2 me-1" aria-hidden="true"></i>Theme Skin
   </h6>
-  <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons">
+  <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons" role="group" aria-label="Theme skin">
     {% for skin in skins %}
     <button class="btn btn-sm btn-outline-primary{% if skin == current_skin %} active{% endif %}"
             data-skin="{{ skin }}"
@@ -34,51 +38,48 @@
   </div>
 </div>
 
-<!-- Background toggle -->
+<!-- SVG background toggle + layer opacity -->
 <div class="mb-4">
   <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-    <i class="bi bi-image me-1"></i>SVG Backgrounds
+    <i class="bi bi-image me-1" aria-hidden="true"></i>Background
   </h6>
-  <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded">
-    <label class="form-check-label" for="zer0BgToggle">Enable SVG backgrounds</label>
+
+  <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded mb-3">
+    <label class="form-check-label" for="zer0BgToggle">SVG backgrounds</label>
     <div class="form-check form-switch mb-0">
       <input class="form-check-input" type="checkbox" id="zer0BgToggle" checked>
     </div>
   </div>
-</div>
-
-<!-- Opacity sliders -->
-<div class="mb-4">
-  <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-    <i class="bi bi-sliders2 me-1"></i>Layer Opacity
-  </h6>
 
   <div class="mb-3">
-    <label class="form-label small" for="zer0GradientOpacity">Gradient opacity</label>
+    <label class="form-label small d-flex justify-content-between mb-1" for="zer0GradientOpacity">
+      <span>Gradient opacity</span>
+      <span class="text-body-secondary" id="zer0GradientOpacityVal">0.6</span>
+    </label>
     <input type="range" class="form-range" id="zer0GradientOpacity"
            min="0" max="1" step="0.05" value="0.6">
-    <small class="text-body-secondary"><span id="zer0GradientOpacityVal">0.6</span></small>
   </div>
 
   <div class="mb-3">
-    <label class="form-label small" for="zer0TextureOpacity">Texture opacity</label>
+    <label class="form-label small d-flex justify-content-between mb-1" for="zer0TextureOpacity">
+      <span>Texture opacity</span>
+      <span class="text-body-secondary" id="zer0TextureOpacityVal">0.04</span>
+    </label>
     <input type="range" class="form-range" id="zer0TextureOpacity"
            min="0" max="0.2" step="0.005" value="0.04">
-    <small class="text-body-secondary"><span id="zer0TextureOpacityVal">0.04</span></small>
   </div>
 
   <div class="mb-3">
-    <label class="form-label small" for="zer0PatternOpacity">Pattern opacity</label>
+    <label class="form-label small d-flex justify-content-between mb-1" for="zer0PatternOpacity">
+      <span>Pattern opacity</span>
+      <span class="text-body-secondary" id="zer0PatternOpacityVal">0.08</span>
+    </label>
     <input type="range" class="form-range" id="zer0PatternOpacity"
            min="0" max="0.3" step="0.01" value="0.08">
-    <small class="text-body-secondary"><span id="zer0PatternOpacityVal">0.08</span></small>
   </div>
-</div>
 
-<!-- Reset -->
-<div>
-  <button class="btn btn-sm btn-outline-danger" id="zer0BgReset" type="button">
-    <i class="bi bi-arrow-counterclockwise me-1"></i>Reset to defaults
+  <button class="btn btn-sm btn-outline-secondary" id="zer0BgReset" type="button">
+    <i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset background
   </button>
 </div>
 
@@ -119,15 +120,13 @@ document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("zer0BgReset").addEventListener("click", function () {
     zer0Bg.setSkin("{{ current_skin }}");
     zer0Bg.toggle(true);
-    zer0Bg.setOpacity("gradient", 0.6);
-    zer0Bg.setOpacity("texture", 0.04);
-    zer0Bg.setOpacity("pattern", 0.08);
-    document.getElementById("zer0GradientOpacity").value = 0.6;
-    document.getElementById("zer0TextureOpacity").value = 0.04;
-    document.getElementById("zer0PatternOpacity").value = 0.08;
-    document.getElementById("zer0GradientOpacityVal").textContent = "0.6";
-    document.getElementById("zer0TextureOpacityVal").textContent = "0.04";
-    document.getElementById("zer0PatternOpacityVal").textContent = "0.08";
+    var defaults = { zer0GradientOpacity: "0.6", zer0TextureOpacity: "0.04", zer0PatternOpacity: "0.08" };
+    var layers = { zer0GradientOpacity: "gradient", zer0TextureOpacity: "texture", zer0PatternOpacity: "pattern" };
+    Object.keys(defaults).forEach(function (id) {
+      zer0Bg.setOpacity(layers[id], defaults[id]);
+      document.getElementById(id).value = defaults[id];
+      document.getElementById(id + "Val").textContent = defaults[id];
+    });
     toggle.checked = true;
     document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
     var active = document.querySelector('#zer0SkinButtons [data-skin="{{ current_skin }}"]');

data/_includes/components/component-showcase.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-071 {% endcomment %}
 <!--
   ===================================================================
   COMPONENT SHOWCASE - Live Bootstrap 5 demo gallery

data/_includes/components/cookie-consent.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-007 {% endcomment %}
 <!--
   ===================================================================
   COOKIE CONSENT - GDPR/CCPA Compliant Privacy Management