jekyll-theme-zer0 1.27.0 → 1.29.0

data/_sass/components/_setup-wizard.scss

@@ -0,0 +1,235 @@
+// =============================================================================
+// Setup wizard (_includes/setup/wizard.html + assets/js/setup-wizard.js)
+// =============================================================================
+// Feature: ZER0-067 · Redesign: T-040 / #408
+//
+// Three columns at lg+ (stepper / steps / live preview), stacked below. The
+// two rules that matter most:
+//
+//   1. `.wizard-panes` is a GRID with every pane in the same cell, so the
+//      container is always exactly as tall as the tallest step; `.wizard-nav`
+//      is then pushed to the bottom of the card with `margin-top: auto`.
+//      Neither alone is enough: the grid stops the CONTAINER resizing, and the
+//      auto margin stops the BUTTONS floating up inside a short step.
+//      Together, Back/Next sit at the same y offset on every step.
+//   2. The preview panel is sticky and always present, so it needs its own
+//      scroll region rather than growing the page.
+// =============================================================================
+
+// -----------------------------------------------------------------------------
+// Vertical stepper
+// -----------------------------------------------------------------------------
+
+.wizard-stepper-wrap {
+  top: 1.5rem; // paired with .sticky-lg-top in the markup
+}
+
+.wizard-stepper {
+  gap: 0.25rem;
+}
+
+.wizard-step {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  min-height: 44px; // WCAG touch target
+  text-align: left;
+  color: var(--zer0-color-ink-muted);
+  background: none;
+  border: 0;
+  border-radius: var(--zer0-radius-sm, 0.375rem);
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover:not(:disabled) {
+    color: var(--zer0-color-ink, inherit);
+    background: var(--zer0-color-bg-muted);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+  }
+
+  // Upcoming, and not reachable until every earlier step validates.
+  &.is-locked,
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &.is-active {
+    font-weight: 600;
+    color: var(--zer0-color-ink, inherit);
+    background: var(--zer0-color-bg-muted);
+
+    .wizard-step-marker {
+      color: #fff;
+      background: var(--bs-primary);
+      border-color: var(--bs-primary);
+    }
+  }
+
+  &.is-done .wizard-step-marker {
+    color: var(--bs-success, #198754);
+    border-color: var(--bs-success, #198754);
+  }
+}
+
+.wizard-step-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.9rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 50%;
+}
+
+.wizard-step-text {
+  min-width: 0;
+}
+
+.wizard-step-label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// "Draft saved" acknowledgement. Kept in the layout (no display toggling) so
+// its appearance never shifts the stepper.
+.wizard-draft-chip {
+  margin: 0.75rem 0 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--bs-success, #198754);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &.is-visible {
+    opacity: 1;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Step panes — the stable-height half
+// -----------------------------------------------------------------------------
+
+.wizard-panes {
+  // Every pane is stacked in ONE grid cell, so the row's height is
+  // max(pane heights) — computed by the browser, continuously, exactly.
+  //
+  // This used to be a flex column whose min-height JS measured and wrote
+  // inline. Measuring a box you have to un-hide, lay out, read and restore is
+  // a guess: it came back ~16px short of the tallest pane, and the shortest
+  // step's Back/Next sat 16px higher than everywhere else. Grid asks the
+  // layout engine the same question and gets the answer right, on every
+  // reflow, with no resize listener.
+  display: grid;
+  min-height: 26rem; // floor for the degenerate case of no panes
+
+  // The selector carries `.tab-content` purely for specificity: Bootstrap's
+  // `.tab-content > .tab-pane { display: none }` would otherwise take the
+  // cell's only occupant out of the grid on a tie.
+  &.tab-content > .tab-pane {
+    display: flex;
+    flex-direction: column;
+    grid-area: 1 / 1; // one cell, all panes
+
+    // Inactive panes stay in layout — that is the whole point — but must not
+    // be seen, focused, clicked, or read out. `visibility: hidden` does all
+    // four (it removes the subtree from the a11y tree and from the tab
+    // order), which `opacity: 0` alone would not.
+    visibility: hidden;
+    pointer-events: none;
+
+    &.active {
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
+  > .tab-pane > .card {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  > .tab-pane > .card > .card-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+  }
+}
+
+// Pinned to the bottom of the card, so a short step does not float its
+// Back/Next up the page relative to a tall one.
+//
+// Pinning the row's BOTTOM is only half the job: the test measures the Next
+// button's TOP, so anything that changes the row's height moves it. Two things
+// did, and both are fixed here rather than in the assertion.
+.wizard-nav {
+  // 1. Never a block box. Step 1's nav is `text-end` with no `d-flex`, so its
+  //    button was an inline-block on a line box and sat on the baseline — the
+  //    descender space below it left that button ~2px above every other step's.
+  //    `flex-end` is the base; the later steps' `justify-content-between`
+  //    utility (Bootstrap emits `!important`) still wins where it is applied.
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+
+  // 2. Never let a label wrap. In the real three-column layout the middle
+  //    column is ~270px, and "Review & Download" wrapped to a second line —
+  //    making that one button a line-height taller. With the row pinned to the
+  //    bottom, the extra line pushes the button's TOP up instead of its bottom
+  //    down, which is the 16px the offset test caught on step 4.
+  .btn {
+    white-space: nowrap;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Persistent live preview
+// -----------------------------------------------------------------------------
+
+.wizard-preview {
+  top: 1.5rem; // paired with .sticky-lg-top
+}
+
+.wizard-preview-code {
+  max-height: 60vh;
+  margin-bottom: 0;
+  overflow: auto;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.wizard-preview-live {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+// Below lg the three columns stack; the preview is no longer sticky and a
+// shorter scroll region reads better under the form.
+@media (max-width: 991.98px) {
+  .wizard-preview-code {
+    max-height: 20rem;
+  }
+
+  .wizard-stepper {
+    flex-direction: row !important;
+    flex-wrap: wrap;
+  }
+
+  .wizard-step {
+    width: auto;
+    flex: 1 1 auto;
+  }
+}

data/_sass/components/_ui-enhancements.scss

@@ -82,7 +82,7 @@ img {
     left: 50%;
     width: 0;
     height: 0;
-    border-radius: 50%;
+    border-radius: var(--zer0-radius-circle);
     background: rgba(255, 255, 255, 0.2);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
@@ -405,7 +405,7 @@ a:not(.btn) {
 .btn {
   .ripple {
     position: absolute;
-    border-radius: 50%;
+    border-radius: var(--zer0-radius-circle);
     background: rgba(255, 255, 255, 0.6);
     transform: scale(0);
     animation: ripple-animation 0.6s ease-out;
@@ -424,7 +424,7 @@ a:not(.btn) {
 @media (max-width: 991.98px) {
   .navbar-collapse {
     background-color: var(--bs-body-bg);
-    border-radius: 0.5rem;
+    border-radius: var(--zer0-radius-lg);
     margin-top: 1rem;
     padding: 1rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -432,7 +432,7 @@ a:not(.btn) {
   
   .navbar-nav .nav-link {
     padding: 0.75rem 1rem;
-    border-radius: 0.375rem;
+    border-radius: var(--zer0-radius);
     transition: all 0.2s ease;
     
     &:hover {
@@ -506,7 +506,7 @@ a:not(.btn) {
 *:focus-visible {
   outline: 2px solid var(--bs-primary);
   outline-offset: 2px;
-  border-radius: 0.25rem;
+  border-radius: var(--zer0-radius-sm);
 }
 
 // Enhanced active link states
@@ -530,7 +530,7 @@ a:not(.btn) {
 // Better table responsiveness
 @media (max-width: 768px) {
   .table-responsive {
-    border-radius: 0.5rem;
+    border-radius: var(--zer0-radius-lg);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
   

data/_sass/core/_navbar.scss

@@ -7,8 +7,9 @@
 //   - Desktop >= 992px (inline nav; label density via @container bd-nav)
 //   - Mobile < 992px (offcanvas)
 // Nav label tiers (center track / bd-nav container width):
-//   - >= 38rem (~608px): full labels (with ellipsis safety when crowded)
-//   - < 38rem: icon-only (tooltips on lg–xl viewports)
+//   - >= 51rem (~816px): icon + full label
+//   - 41-50.99rem: label only (icons dropped so the labels still fit)
+//   - < 41rem (~656px): icon-only (tooltips on lg–xl viewports)
 // ==============================================================================
 
 // -----------------------------------------------------------------------------
@@ -399,16 +400,22 @@
     transform: rotate(180deg);
   }
 
-  // Show labels whenever the center track has room (>= ~38rem / 608px).
-  // Items keep min-width:0 + ellipsis so a crowded row degrades gracefully
-  // before falling all the way back to the icon-only tier below.
-  @container bd-nav (min-width: 38rem) {
+  // Label density degrades in three tiers, measured on the center track
+  // (the `bd-nav` container), so items fit instead of ellipsizing:
+  //   >= 51rem (816px)   icon + label      — the roomy default
+  //   41-50.99rem        label only        — icons dropped to buy ~20px/item
+  //   < 41rem (656px)    icon only         — labels no longer fit at all
+  // Each boundary is the MEASURED width the tier below it needs for the
+  // theme's seven demo items (815px with icons, 647px without), so a tier only
+  // engages once its own content fits. Items keep min-width:0 + ellipsis as the
+  // last-resort safety net for consumers with more or longer entries.
+  @container bd-nav (min-width: 41rem) {
     #bdNavbar .navbar-nav {
       gap: 0.125rem;
     }
 
     #bdNavbar .nav-link {
-      padding: 0.375rem 0.5rem;
+      padding: 0.375rem;
     }
 
     #bdNavbar .nav-link .nav-link-text {
@@ -462,14 +469,36 @@
       min-width: 1.25rem;
       min-height: 0;
       width: 1.25rem;
-      padding-left: 0.125rem;
-      padding-right: 0.125rem;
+      padding-left: 0;
+      padding-right: 0;
       margin-left: 0 !important;
     }
   }
 
-  // Icon-only when the center track is too narrow even for ellipsized labels
-  @container bd-nav (max-width: 37.99rem) {
+  // Middle tier — the labels fit but the icons no longer do. Dropping the
+  // decorative icon (the label is the accessible name) and tightening the
+  // chevron buys back roughly 20px per item, which is the difference between
+  // "Notebooks" and "N…" at 992-1200px viewports.
+  @container bd-nav (min-width: 41rem) and (max-width: 50.99rem) {
+    #bdNavbar .nav-link i {
+      display: none;
+    }
+
+    #bdNavbar .nav-item > .nav-link:not(.dropdown-toggle-split),
+    #bdNavbar .nav-hover-dropdown > .nav-link:first-child {
+      gap: 0;
+    }
+
+    // Scoped with #bdNavbar to outrank the shared base rule at the top of this
+    // file, which sets the chevron to 1.5rem.
+    #bdNavbar .nav-hover-dropdown > .dropdown-toggle-split {
+      min-width: 1rem;
+      width: 1rem;
+    }
+  }
+
+  // Icon-only when the center track is too narrow even for bare labels
+  @container bd-nav (max-width: 40.99rem) {
     @include navbar-nav-icon-only;
   }
 }
@@ -489,6 +518,40 @@
     --bs-offcanvas-width: min(21rem, 86vw);
   }
 
+  // #bdNavbar lives INSIDE the fixed header, whose stacking context sits at
+  // Bootstrap's $zindex-fixed (1030) — below the body-level offcanvas
+  // backdrop (1040). The menu's own z-index (1045) only orders it within the
+  // header's context, so without help the whole open menu paints BEHIND the
+  // backdrop and none of its links are tappable. Lift the header above the
+  // backdrop only while its offcanvas is opening/open/closing. Browsers
+  // without :has() just keep the old (dimmed-menu) behavior.
+  body:has(#bdNavbar.offcanvas-lg.showing) header.fixed-top,
+  body:has(#bdNavbar.offcanvas-lg.show) header.fixed-top,
+  body:has(#bdNavbar.offcanvas-lg.hiding) header.fixed-top {
+    z-index: 1046; // $zindex-offcanvas (1045) + 1
+  }
+
+  // ...but that lift must never bury Settings. #info-section is a body-level
+  // offcanvas at the SAME edge and the same z-index (1045), so while the nav
+  // menu is still on screen — including the ~300ms `.hiding` tail after a tap
+  // on its own "Settings" item — the lifted header painted the whole Settings
+  // panel out of sight. Drop the header back below the offcanvas layer for as
+  // long as Settings is on screen; navbar.js also closes the nav menu first so
+  // the two panels do not overlap at all in browsers that support it.
+  body:has(#info-section.offcanvas.showing) header.fixed-top,
+  body:has(#info-section.offcanvas.show) header.fixed-top,
+  body:has(#info-section.offcanvas.hiding) header.fixed-top {
+    z-index: 1030; // $zindex-fixed — back under the offcanvas backdrop
+  }
+
+  // Belt and braces for browsers without :has() — Settings outranks the header
+  // stacking context on its own.
+  #info-section.offcanvas.showing,
+  #info-section.offcanvas.show,
+  #info-section.offcanvas.hiding {
+    z-index: 1047; // above the lifted header (1046)
+  }
+
   // Wrapper is inert on mobile so offcanvas layout matches pre-wrapper structure
   #bdNavbar .bd-navbar-nav-viewport {
     display: contents;
@@ -818,6 +881,156 @@
   }
 }
 
+// -----------------------------------------------------------------------------
+// Language section inside the Settings offcanvas
+// (components/language-toggle.html variant="panel")
+// -----------------------------------------------------------------------------
+
+.nav-lang-panel .nav-lang-options {
+  --bs-list-group-border-radius: 0.375rem;
+
+  .list-group-item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0.75rem;
+    min-height: 44px; // WCAG touch target
+    font-size: 0.9375rem;
+  }
+
+  .nav-lang-code {
+    flex-shrink: 0;
+    min-width: 2.25rem;
+    padding: 0.05rem 0.35rem;
+    font-family: var(--zer0-font-mono);
+    font-size: 0.7rem;
+    line-height: 1.4;
+    text-align: center;
+    color: var(--zer0-color-ink-muted);
+    background: var(--zer0-color-bg-muted);
+    border-radius: var(--zer0-radius-sm);
+  }
+
+  .nav-lang-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Language menu — shared by BOTH variants (T-038 / #406)
+// -----------------------------------------------------------------------------
+// The current language reads as "you are here", not as a selected nav item, so
+// it gets a tint + check icon rather than Bootstrap's `.active` primary fill.
+// Rows are links even when a translation does not exist yet (they fall back to
+// the source page), and the reason lives in one footnote instead of on every
+// row — per-row "(Not yet translated)" was what made the menu wide.
+
+.nav-lang-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  &.is-current {
+    font-weight: 600;
+    color: var(--zer0-color-ink, inherit);
+    background: var(--zer0-color-bg-muted);
+  }
+
+  // The marker is the footnote's anchor; the note itself carries the wording.
+  &.is-untranslated .nav-lang-name {
+    color: var(--zer0-color-ink-muted);
+  }
+}
+
+.nav-lang-check {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.nav-lang-mark {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--zer0-color-ink-muted);
+}
+
+// "auto" — this language was machine-generated (scripts/translate.rb).
+.nav-lang-auto {
+  flex-shrink: 0;
+  padding: 0.05rem 0.3rem;
+  font-family: var(--zer0-font-mono);
+  font-size: 0.625rem;
+  line-height: 1.4;
+  text-transform: lowercase;
+  color: var(--zer0-color-ink-muted);
+  background: var(--zer0-color-bg-muted);
+  border-radius: var(--zer0-radius-sm);
+}
+
+// The one footnote that replaced the per-row notices. It is the only element
+// in the menu allowed to wrap — everything else ellipsises inside the 220px.
+.nav-lang-note {
+  margin: 0;
+  padding: 0.25rem 0.75rem 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: var(--zer0-color-ink-muted);
+  white-space: normal;
+}
+
+.nav-lang-divider {
+  margin: 0.5rem 0 0.25rem;
+  opacity: 0.15;
+}
+
+// -----------------------------------------------------------------------------
+// Navbar dropdown variant (components/language-toggle.html, default variant)
+// -----------------------------------------------------------------------------
+
+.nav-lang-toggle {
+  .nav-lang-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.375rem; // 38px square — the icon carries the whole control
+    height: 2.375rem;
+    padding: 0;
+    line-height: 1;
+
+    // Belt and braces: if `dropdown-toggle` is ever re-added, no caret returns.
+    &::after {
+      display: none;
+    }
+  }
+
+  .nav-lang-menu {
+    min-width: 0;
+    max-width: 220px;
+
+    .nav-lang-item {
+      // Bootstrap's dropdown-item is nowrap; the name ellipsises instead so a
+      // long native name cannot push the menu past its cap.
+      overflow: hidden;
+
+      &.is-current {
+        // Beat `.dropdown-item.active`'s specificity is unnecessary (we no
+        // longer emit `.active`), but a hovered current row should not flip to
+        // the link-hover colour and lose the "you are here" reading.
+        color: var(--zer0-color-ink, inherit);
+      }
+    }
+
+    .nav-lang-name {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
 // -----------------------------------------------------------------------------
 // Navigation Tooltips
 // Enhanced tooltips for compact desktop view
@@ -917,26 +1130,57 @@
     gap: 0.25rem;
 }
 
+// Shortcut affordance chip on the search button — the design-system navbar
+// pattern (ui_kits/website/Navbar.jsx). Overrides Bootstrap's inverted <kbd>
+// so the chip reads as a quiet hint, not a highlighted key.
+#navbar .nav-search-kbd {
+    align-items: center;
+    margin-left: 0.1rem;
+    padding: 0.05rem 0.35rem;
+    font-family: var(--zer0-font-mono);
+    font-size: 0.7rem;
+    line-height: 1.4;
+    color: var(--zer0-color-ink-muted);
+    background: var(--zer0-color-bg-muted);
+    border-radius: var(--zer0-radius-sm);
+}
+
+// The bar spans the full viewport (header markup uses .container-fluid) with a
+// fluid gutter instead of a centred .container-xl track, so the menubar gets the
+// whole screen width. Consumers that want the old capped bar set
+// --zer0-navbar-max-width (e.g. 1320px) in their own stylesheet.
+#navbar .navbar-main {
+    max-width: var(--zer0-navbar-max-width, 100%);
+    margin-inline: auto;
+    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
+}
+
 // Desktop (lg+): 3-column grid — [brand/title | main nav | utilities] so nav cannot paint over Search/Settings
 @media (min-width: 992px) {
     #navbar .navbar-main {
         display: grid !important;
         grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
         align-items: center;
-        column-gap: 0.5rem;
+        column-gap: 0.75rem;
         row-gap: 0.25rem;
         flex-wrap: unset !important;
         container-type: inline-size;
         container-name: navbar-main;
     }
 
+    // The brand cluster is sized by its content (grid track 1 is `auto`), so an
+    // unbounded title would starve the menubar of the width its labels need.
+    // Cap it at a share of the BAR — `cqi` resolves against .navbar-main (the
+    // named container), where a plain percentage would resolve against the
+    // content-sized track and collapse the title to nothing. The title already
+    // ellipsizes past the cap.
     #navbar .navbar-main-start {
         grid-column: 1;
         display: flex;
         align-items: center;
         gap: 0.375rem;
         min-width: 0;
-        max-width: none;
+        max-width: 30cqi;
         flex-shrink: 1;
     }
 
@@ -1012,8 +1256,12 @@
         max-width: none;
     }
 
-    // Progressive brand degradation (container width, not viewport)
-    @container navbar-main (min-width: 80rem) {
+    // Progressive brand degradation (container width, not viewport).
+    // The home-link icons add ~108px to the brand cluster, so they only appear
+    // once the bar is wide enough to carry them AND the full menubar
+    // (815px of items + 328px brand + 146px utilities + gaps ≈ 82rem); 86rem
+    // leaves headroom for a longer site title.
+    @container navbar-main (min-width: 86rem) {
         #navbar .navbar-home-links {
             display: inline-flex !important;
         }