jekyll-theme-zer0 1.28.0 → 1.30.0

data/_includes/components/info-section.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-046 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   INFO SECTION - Settings Offcanvas with Tabbed Interface
   ===================================================================
@@ -7,13 +7,14 @@
   File: info-section.html
   Path: _includes/components/info-section.html
   Purpose: Unified settings offcanvas panel with three tabs —
-           Appearance (color mode, skin, backgrounds, primary color),
+           Appearance (language, color mode, skin, backgrounds, primary color),
            Site (environment, theme & build info, admin links) and
            Developer (page location, metadata, source shortcuts).
 
   Dependencies:
   - Bootstrap 5 Offcanvas, Tabs
   - _includes/components/env-detect.html (sets is_production/build_env)
+  - _includes/components/language-toggle.html (panel variant — Language)
   - _includes/components/halfmoon.html (color-mode segmented control)
   - _includes/components/background-settings.html (skin + backgrounds)
   - _includes/components/env-switcher.html
@@ -34,23 +35,23 @@
   - https://getbootstrap.com/docs/5.3/components/offcanvas/
   - https://getbootstrap.com/docs/5.3/components/navs-tabs/
   ===================================================================
--->
+{% endcomment %}
 
 {% include components/env-detect.html %}
 
-<!-- Settings Offcanvas -->
+{% comment %} Settings Offcanvas {% endcomment %}
 <div class="offcanvas offcanvas-end" tabindex="-1" id="info-section" aria-labelledby="infoSectionLabel">
 
-  <!-- Offcanvas Header -->
+  {% comment %} Offcanvas Header {% endcomment %}
   <div class="offcanvas-header border-bottom pb-0 d-block">
     <div class="d-flex align-items-center justify-content-between mb-2">
-      <h5 class="offcanvas-title" id="infoSectionLabel">
+      <h2 class="offcanvas-title h5" id="infoSectionLabel">
         <i class="bi bi-gear-wide-connected me-2" aria-hidden="true"></i>Settings
-      </h5>
+      </h2>
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
 
-    <!-- Tab Navigation -->
+    {% comment %} Tab Navigation {% endcomment %}
     <ul class="nav nav-tabs nav-fill" id="infoTabs" role="tablist">
       <li class="nav-item" role="presentation">
         <button class="nav-link active" id="appearance-tab" data-bs-toggle="tab" data-bs-target="#appearance-pane" type="button" role="tab" aria-controls="appearance-pane" aria-selected="true">
@@ -75,25 +76,29 @@
     </ul>
   </div>
 
-  <!-- Offcanvas Body with Tab Content -->
+  {% comment %} Offcanvas Body with Tab Content {% endcomment %}
   <div class="offcanvas-body">
     <div class="tab-content" id="infoTabContent">
 
-      <!-- Appearance Tab — everything that changes how the site looks -->
+      {% comment %} Appearance Tab — everything that changes how the site looks {% endcomment %}
       <div class="tab-pane fade show active" id="appearance-pane" role="tabpanel" aria-labelledby="appearance-tab" tabindex="0">
 
-        <!-- Color Mode -->
+        {% comment %} Language — renders its own heading, and nothing at all when
+             site.translation is disabled. NOT cached: page-dependent. {% endcomment %}
+        {% include components/language-toggle.html variant="panel" %}
+
+        {% comment %} Color Mode {% endcomment %}
         <div class="mb-4">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+          <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
             <i class="bi bi-moon-stars me-1" aria-hidden="true"></i>Color Mode
-          </h6>
+          </h3>
           {% include components/halfmoon.html class="w-100" %}
         </div>
 
-        <!-- Theme skin + SVG backgrounds (skin buttons, toggle, opacity) -->
+        {% comment %} Theme skin + SVG backgrounds (skin buttons, toggle, opacity) {% endcomment %}
         {% include_cached components/background-settings.html %}
 
-        <!-- Primary color picker mounts here (appearance.js, optional) -->
+        {% comment %} Primary color picker mounts here (appearance.js, optional) {% endcomment %}
         <div id="zer0AppearanceSlot"></div>
 
         <p class="text-body-secondary small mb-0 mt-4">
@@ -102,49 +107,49 @@
         </p>
       </div>
 
-      <!-- Site Tab — where the site runs and what it is built from -->
+      {% comment %} Site Tab — where the site runs and what it is built from {% endcomment %}
       <div class="tab-pane fade" id="site-pane" role="tabpanel" aria-labelledby="site-tab" tabindex="0">
 
-        <!-- Environment -->
+        {% comment %} Environment {% endcomment %}
         <div class="mb-4">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+          <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
             <i class="bi bi-hdd-network me-1" aria-hidden="true"></i>Environment
-          </h6>
+          </h3>
           {% include components/env-switcher.html %}
         </div>
 
-        <!-- Theme & Build -->
+        {% comment %} Theme & Build {% endcomment %}
         <div class="mb-4">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+          <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
             <i class="bi bi-info-circle me-1" aria-hidden="true"></i>Theme &amp; Build
-          </h6>
+          </h3>
           {% include components/theme-info.html %}
         </div>
 
-        <!-- Admin quick links — cached include; renders only links to pages
-             that exist in the build (see components/admin-links.html) -->
+        {% comment %} Admin quick links — cached include; renders only links to pages
+             that exist in the build (see components/admin-links.html) {% endcomment %}
         {% include_cached components/admin-links.html %}
       </div>
 
-      <!-- Developer Tab — tools scoped to the current page -->
+      {% comment %} Developer Tab — tools scoped to the current page {% endcomment %}
       <div class="tab-pane fade" id="developer-pane" role="tabpanel" aria-labelledby="developer-tab" tabindex="0">
 
-        <!-- Page Location — breadcrumbs render nothing on the homepage or
-             when site.breadcrumbs is off, so the section mirrors that gate -->
+        {% comment %} Page Location — breadcrumbs render nothing on the homepage or
+             when site.breadcrumbs is off, so the section mirrors that gate {% endcomment %}
         {% if page.url != "/" and site.breadcrumbs %}
         <div class="mb-4">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+          <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
             <i class="bi bi-signpost-split me-1" aria-hidden="true"></i>Page Location
-          </h6>
+          </h3>
           {% include navigation/breadcrumbs.html %}
         </div>
         {% endif %}
 
-        <!-- Page Metadata -->
+        {% comment %} Page Metadata {% endcomment %}
         <div class="mb-4">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+          <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
             <i class="bi bi-file-earmark-code me-1" aria-hidden="true"></i>Page Info
-          </h6>
+          </h3>
           <div class="table-responsive">
             <table class="table table-sm table-hover mb-0 small">
               <tbody>
@@ -175,11 +180,11 @@
           </div>
         </div>
 
-        <!-- Source Code Shortcuts -->
+        {% comment %} Source Code Shortcuts {% endcomment %}
         <div class="mb-3">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+          <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
             <i class="bi bi-code-square me-1" aria-hidden="true"></i>Source Code
-          </h6>
+          </h3>
           {% include components/dev-shortcuts.html %}
         </div>
       </div>
@@ -189,9 +194,9 @@
 
 </div>
 
-<!-- Copy-to-clipboard for the panel's URL fields (event delegation; no
+{% comment %} Copy-to-clipboard for the panel's URL fields (event delegation; no
      inline handlers). Buttons declare data-zer0-copy="<text>" or
-     data-zer0-copy-target="#input-id". -->
+     data-zer0-copy-target="#input-id". {% endcomment %}
 <script>
 document.addEventListener("click", function (e) {
   var btn = e.target.closest("[data-zer0-copy], [data-zer0-copy-target]");

data/_includes/components/js-cdn.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   JAVASCRIPT - Local vendor libraries
   ===================================================================
@@ -12,43 +12,43 @@
   
   Refresh: ./scripts/vendor-install.sh (see vendor-manifest.json)
   ===================================================================
--->
+{% endcomment %}
 
-<!-- Bootstrap 5.3.3 Bundle (includes Popper.js) -->
+{% comment %} Bootstrap 5.3.3 Bundle (includes Popper.js) {% endcomment %}
 <script src="{{ '/assets/vendor/bootstrap/js/bootstrap.bundle.min.js' | relative_url }}"></script>
 
-<!-- Navigation ES Modules — orchestrator for sidebar, scroll spy, keyboard
+{% comment %} Navigation ES Modules — orchestrator for sidebar, scroll spy, keyboard
      shortcuts, gestures, focus, AND the navbar dropdowns/mobile menu that
-     formerly lived in /assets/js/navigation.js (now deprecated). -->
+     formerly lived in /assets/js/navigation.js (now deprecated). {% endcomment %}
 <script type="module" src="{{ '/assets/js/modules/navigation/index.js' | relative_url }}?v={{ site.time | date: '%s' }}"></script>
 
-<!-- Generic UI helpers (toast, copy-to-clipboard, image fade-in) -->
+{% comment %} Generic UI helpers (toast, copy-to-clipboard, image fade-in) {% endcomment %}
 <script defer src="{{ '/assets/js/ui-helpers.js' | relative_url }}"></script>
 
-<!-- Posts-archive pagination (auto-activates only on pages with a
-     [data-posts-archive] container; safe to load globally). -->
+{% comment %} Posts-archive pagination (auto-activates only on pages with a
+     [data-posts-archive] container; safe to load globally). {% endcomment %}
 <script defer src="{{ '/assets/js/posts-pagination.js' | relative_url }}"></script>
 
-<!-- Search modal controller -->
+{% comment %} Search modal controller {% endcomment %}
 <script src="{{ '/assets/js/search-modal.js' | relative_url }}"></script>
 
-<!-- Share helpers -->
+{% comment %} Share helpers {% endcomment %}
 <script src="{{ '/assets/js/share-actions.js' | relative_url }}"></script>
 
-<!-- fffuel-style background customizer (skin switching, toggle, opacity) -->
+{% comment %} fffuel-style background customizer (skin switching, toggle, opacity) {% endcomment %}
 <script src="{{ '/assets/js/background-customizer.js' | relative_url }}"></script>
 
-<!-- Optional runtime Appearance panel (enabled via site.appearance_panel) -->
+{% comment %} Optional runtime Appearance panel (enabled via site.appearance_panel) {% endcomment %}
 {% if site.appearance_panel %}
 <script defer src="{{ '/assets/js/modules/theme/appearance.js' | relative_url }}"></script>
 {% endif %}
 
-<!-- Obsidian wiki-link / embed / tag client-side resolver (fallback for the
+{% comment %} Obsidian wiki-link / embed / tag client-side resolver (fallback for the
      remote_theme GH Pages build, where _plugins/obsidian_links.rb cannot run).
      Honours `obsidian: { enabled: false }` in _config.yml — when disabled the
      resolver script is not loaded and the flag self-disables any fork that
      loads it another way. Note: `| default: true` would flip `false` back to
-     true (Liquid treats false as falsy), so test enabled == false explicitly. -->
+     true (Liquid treats false as falsy), so test enabled == false explicitly. {% endcomment %}
 {%- assign obsidian_attachments_path = site.obsidian.attachments_path | default: '/assets/images/notes' -%}
 <script>
   window.OBSIDIAN_CONFIG = window.OBSIDIAN_CONFIG || {};
@@ -62,7 +62,7 @@
 <script defer src="{{ '/assets/js/obsidian-wiki-links.js' | relative_url }}?v={{ site.time | date: '%s' }}"></script>
 {%- endif -%}
 
-<!-- Optional fork overrides: opt-in via `site.user_overrides: true` in _config.yml. -->
+{% comment %} Optional fork overrides: opt-in via `site.user_overrides: true` in _config.yml. {% endcomment %}
 {% if site.user_overrides %}
 <script defer src="{{ '/assets/js/user-overrides.js' | relative_url }}"></script>
 {% endif %}

data/_includes/components/language-toggle.html

@@ -2,24 +2,61 @@
 {%- comment -%}
   Component:   language-toggle
   Path:        _includes/components/language-toggle.html
-  Purpose:     Navbar dropdown that switches between the English original and
-               its machine-generated translations (scripts/translate.rb).
-               Shows the source language plus every configured target
-               language; targets without a generated translation for the
-               current page render as disabled entries.
-  Params:      none — reads page.lang / page.url / page.translation_source_url
-               and the generated _data/i18n/manifest.yml.
+  Purpose:     Switches between the English original and its machine-generated
+               translations (scripts/translate.rb). Shows the source language
+               plus every configured target language. Every entry is a live
+               link: a target without a generated translation for the current
+               page falls back to the source page and is explained by one
+               footnote (it used to render as a disabled entry — see T-038).
+  Params:      variant (string, optional, default "navbar")
+                 - "navbar" — compact dropdown for the header utility cluster
+                 - "panel"  — self-contained "Language" section for the
+                              Settings offcanvas (components/info-section.html),
+                              rendered as an always-visible list of choices
+                              with its own section heading
+  Reads:       page.lang / page.url / page.translation_source_url and the
+               generated _data/i18n/manifest.yml.
   Depends on:  site.translation.* config, site.data.i18n.manifest,
                _data/i18n/languages.yml (display names), core/i18n.html,
-               Bootstrap 5 dropdown, Bootstrap Icons (bi-translate)
+               Bootstrap 5 dropdown (navbar variant only), Bootstrap Icons
+               (bi-translate)
   Notes:       Renders nothing when translation is disabled or no target
                languages are configured. The chosen language is remembered in
                localStorage("zer0-lang") for future UX (no auto-redirect).
                Must NOT be include_cached — the menu is page-dependent.
+               The theme ships the "panel" variant (the navbar is reserved for
+               main navigation); "navbar" stays for consumers that prefer the
+               header dropdown.
+
+               MENU CONTRACT (T-038 / #406) — shared by both variants:
+                 * No DISABLED rows. A target language without a generated
+                   translation is still a link; it goes to the source-language
+                   page and still records the preference in zer0-lang, so the
+                   menu never contains a dead end.
+                 * The current language is marked with a check icon and a
+                   subtle tint — NOT Bootstrap's `.active` primary fill, which
+                   read as a selected nav item rather than "you are here".
+                 * Machine-generated translations carry a small "auto" chip.
+                   The source language never does (a human wrote it), and
+                   neither do untranslated rows (nothing was generated).
+                 * The per-row "(Not yet translated)" text is replaced by ONE
+                   footnote under a divider, referenced from each untranslated
+                   row via aria-describedby. Per-row text was the single
+                   biggest contributor to menu width.
+               Trigger changes (icon-only, no caret) apply to the navbar
+               variant only — the panel has a section heading, not a button.
+
+               New ui keys (lang_machine_translated, lang_machine_translated_title,
+               lang_untranslated_note) live in _data/ui-text.yml `en`. core/i18n.html
+               REPLACES the whole `ui` map on a translated page rather than merging
+               it, so until scripts/translate.rb regenerates _data/i18n/<lang>.yml
+               these keys are absent there — every use below therefore carries a
+               literal `| default:` fallback. Do not remove them.
 {%- endcomment -%}
 {%- assign _lt_langs = site.translation.languages -%}
 {%- if site.translation.enabled and _lt_langs and _lt_langs.size > 0 -%}
 {%- include core/i18n.html -%}
+{%- assign _lt_variant = include.variant | default: 'navbar' -%}
 {%- assign _lt_source = site.translation.source_lang | default: 'en' -%}
 {%- assign _lt_current = page.lang | default: _lt_source -%}
 {%- if _lt_current == _lt_source -%}
@@ -30,25 +67,117 @@
 {%- assign _lt_entry = site.data.i18n.manifest.pages[_lt_src_url] -%}
 {%- assign _lt_names = site.data.i18n.languages -%}
 {%- assign _lt_source_name = _lt_names[_lt_source].native | default: _lt_source -%}
+{%- comment -%}
+  Display name of the language being read, for the trigger's title/aria — the
+  icon-only button has no visible text, so the accessible name has to carry it.
+{%- endcomment -%}
+{%- if _lt_current == _lt_source -%}
+  {%- assign _lt_current_name = _lt_source_name -%}
+{%- else -%}
+  {%- assign _lt_current_name = _lt_names[_lt_current].native | default: _lt_current -%}
+{%- endif -%}
+{%- comment -%}
+  Does ANY target language lack a translation of this page? Drives whether the
+  footnote + divider render at all — an all-translated menu shows neither.
+  A target we are currently reading is by definition translated.
+{%- endcomment -%}
+{%- assign _lt_untranslated = 0 -%}
+{%- for _lt_l in _lt_langs -%}
+  {%- unless _lt_l == _lt_current or _lt_entry[_lt_l] -%}
+    {%- assign _lt_untranslated = _lt_untranslated | plus: 1 -%}
+  {%- endunless -%}
+{%- endfor -%}
+{%- assign _lt_note_id = 'zer0-lang-untranslated-note' -%}
+{%- assign _lt_auto_label = ui.lang_machine_translated | default: 'auto' -%}
+{%- assign _lt_auto_title = ui.lang_machine_translated_title | default: 'Machine-generated translation' -%}
+{%- assign _lt_note_text = ui.lang_untranslated_note | default: 'Marked languages are not yet translated — those links open the original.' -%}
+{%- assign _lt_fallback_url = _lt_src_url | default: '/' | relative_url -%}
+{%- if _lt_variant == 'panel' -%}
+<div class="mb-4 nav-lang-panel" id="zer0-lang-toggle">
+    <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
+        <i class="bi bi-translate me-1" aria-hidden="true"></i>{{ ui.lang_toggle_label | default: "Language" }}
+    </h3>
+    <div class="list-group nav-lang-options" role="group" aria-label="{{ ui.lang_toggle_aria | default: 'Change language' }}">
+        {%- if _lt_current == _lt_source %}
+        <span class="list-group-item nav-lang-item is-current" aria-current="true">
+            <span class="nav-lang-code">{{ _lt_source | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_source_name }}</span>
+            <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+        </span>
+        {%- else %}
+        <a class="list-group-item list-group-item-action nav-lang-item" data-lang="{{ _lt_source }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}">
+            <span class="nav-lang-code">{{ _lt_source | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_source_name }}</span>
+        </a>
+        {%- endif %}
+        {%- for _lt_lang in _lt_langs -%}
+        {%- assign _lt_name = _lt_names[_lt_lang].native | default: _lt_lang -%}
+        {%- assign _lt_t = _lt_entry[_lt_lang] %}
+        {%- if _lt_current == _lt_lang %}
+        <span class="list-group-item nav-lang-item is-current" aria-current="true">
+            <span class="nav-lang-code">{{ _lt_lang | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_name }}</span>
+            <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+            <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+        </span>
+        {%- elsif _lt_t %}
+        <a class="list-group-item list-group-item-action nav-lang-item" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_lang }}" href="{{ _lt_t.url | relative_url }}">
+            <span class="nav-lang-code">{{ _lt_lang | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_name }}</span>
+            <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+        </a>
+        {%- else %}
+        {%- comment -%}
+          No translation yet — still a LINK, not a disabled row. It goes to the
+          source page and records the preference, so the reader lands on real
+          content instead of a dead entry. hreflang describes the DESTINATION,
+          which is the source language, not the one that was clicked.
+        {%- endcomment -%}
+        <a class="list-group-item list-group-item-action nav-lang-item is-untranslated" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}" aria-describedby="{{ _lt_note_id }}-panel">
+            <span class="nav-lang-code">{{ _lt_lang | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_name }}</span>
+            <span class="nav-lang-mark" aria-hidden="true">*</span>
+        </a>
+        {%- endif %}
+        {%- endfor %}
+    </div>
+    {%- if _lt_untranslated > 0 %}
+    <hr class="nav-lang-divider">
+    <p class="nav-lang-note" id="{{ _lt_note_id }}-panel">{{ _lt_note_text }}</p>
+    {%- endif %}
+</div>
+{%- else -%}
 <div class="dropdown nav-lang-toggle" id="zer0-lang-toggle">
+    {%- comment -%}
+      Icon-only, square, and caret-free. `dropdown-toggle` is what draws the
+      Bootstrap caret; it is NOT what wires the dropdown — Bootstrap binds on
+      [data-bs-toggle="dropdown"], so dropping the class costs no behaviour.
+      The visible EN/FR label is gone at every width (it was already hidden
+      below xl), so title + aria-label are the only accessible name and both
+      name the language being read.
+    {%- endcomment -%}
     <button
-        class="btn nav-lang-button dropdown-toggle"
+        class="btn nav-lang-button"
         type="button"
         id="langToggleButton"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         aria-label="{{ ui.lang_toggle_aria | default: 'Change language' }}"
-        title="{{ ui.lang_toggle_label | default: 'Language' }}"
+        title="{{ ui.lang_toggle_label | default: 'Language' }}: {{ _lt_current_name }}"
     >
         <i class="{{ site.default_icon }} bi-translate" aria-hidden="true"></i>
-        <span class="nav-link-text d-none d-xl-inline ms-1 text-uppercase">{{ _lt_current | slice: 0, 2 }}</span>
     </button>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="langToggleButton">
+    <ul class="dropdown-menu dropdown-menu-end nav-lang-menu" aria-labelledby="langToggleButton">
         <li>
             {%- if _lt_current == _lt_source %}
-            <span class="dropdown-item active" aria-current="true">{{ _lt_source_name }}</span>
+            <span class="dropdown-item nav-lang-item is-current" aria-current="true">
+                <span class="nav-lang-name">{{ _lt_source_name }}</span>
+                <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+            </span>
             {%- else %}
-            <a class="dropdown-item" data-lang="{{ _lt_source }}" hreflang="{{ _lt_source }}" href="{{ _lt_src_url | default: '/' | relative_url }}">{{ _lt_source_name }}</a>
+            <a class="dropdown-item nav-lang-item" data-lang="{{ _lt_source }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}">
+                <span class="nav-lang-name">{{ _lt_source_name }}</span>
+            </a>
             {%- endif %}
         </li>
         {%- for _lt_lang in _lt_langs -%}
@@ -56,23 +185,41 @@
         {%- assign _lt_t = _lt_entry[_lt_lang] %}
         <li>
             {%- if _lt_current == _lt_lang %}
-            <span class="dropdown-item active" aria-current="true">{{ _lt_name }}</span>
+            <span class="dropdown-item nav-lang-item is-current" aria-current="true">
+                <span class="nav-lang-name">{{ _lt_name }}</span>
+                <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+                <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+            </span>
             {%- elsif _lt_t %}
-            <a class="dropdown-item" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_lang }}" href="{{ _lt_t.url | relative_url }}">{{ _lt_name }}</a>
+            <a class="dropdown-item nav-lang-item" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_lang }}" href="{{ _lt_t.url | relative_url }}">
+                <span class="nav-lang-name">{{ _lt_name }}</span>
+                <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+            </a>
             {%- else %}
-            <span class="dropdown-item disabled" aria-disabled="true" title="{{ ui.lang_not_available | default: 'Not yet translated' }}">{{ _lt_name }} <small class="text-body-secondary">({{ ui.lang_not_available | default: 'Not yet translated' }})</small></span>
+            {%- comment -%} See the panel variant above — link, never a dead row. {%- endcomment -%}
+            <a class="dropdown-item nav-lang-item is-untranslated" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}" aria-describedby="{{ _lt_note_id }}">
+                <span class="nav-lang-name">{{ _lt_name }}</span>
+                <span class="nav-lang-mark" aria-hidden="true">*</span>
+            </a>
             {%- endif %}
         </li>
         {%- endfor %}
+        {%- if _lt_untranslated > 0 %}
+        <li><hr class="dropdown-divider"></li>
+        <li><p class="nav-lang-note" id="{{ _lt_note_id }}">{{ _lt_note_text }}</p></li>
+        {%- endif %}
     </ul>
 </div>
+{%- endif -%}
 <script>
   // Remember the visitor's language pick (no auto-redirect — just preference).
+  // Delegated at document level so it covers both variants and stays correct
+  // if a consumer renders the component more than once per page.
   (function () {
-    var toggle = document.getElementById('zer0-lang-toggle');
-    if (!toggle) return;
-    toggle.addEventListener('click', function (event) {
-      var item = event.target.closest('a.dropdown-item[data-lang]');
+    if (window.__zer0LangPrefWired) return;
+    window.__zer0LangPrefWired = true;
+    document.addEventListener('click', function (event) {
+      var item = event.target.closest('#zer0-lang-toggle a[data-lang]');
       if (!item) return;
       try { localStorage.setItem('zer0-lang', item.getAttribute('data-lang')); } catch (e) { /* private mode */ }
     });