@veluai/velu 0.1.13 → 0.1.15

package/runtime/velu-ui/components/page-header.css

@@ -1,520 +1,557 @@
-/* PageHeader — top-of-page header. All values are tokens; light/dark
-   via [data-theme]. Vertical rhythm is the Stack primitive; columns
-   are CSS grid (so the centre slot stays centred regardless of how
-   wide the brand or actions get). */
-
-.velu-header {
-  /* Sticky to the viewport top so the header stays visible as the
-     page scrolls. z-index is above sidebars/article content but
-     below modals (chatbot z:50, search palette z:60). */
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 30;
-  /* No bottom padding — the tabs row sits flush at the header's
-     bottom edge so the active tab's 2px underline meets the header's
-     bottom border (the selector "touches" the header line). */
-  padding-block-start: var(--s-1);
-  padding-block-end: 0;
-  /* Symmetric inline gutter so the brand (left) and the actions
-     (right) are pulled in to the same level and align with the page
-     content below. */
-  padding-inline: var(--s5);
-  /* --surface-color resolves to #f2f3f4 in light mode (and themes
-     to #323334 in dark) — a subtle hairline separator. */
-  border-block-end: var(--border-width) solid var(--surface-color);
-  background: var(--page-bg);
-  color: var(--text-color);
-  /* Background + shadow animate so the rest-state↔scrolled-state flip
-     is smooth (not a hard cut). backdrop-filter can't transition
-     cleanly in every engine, so we don't try. */
-  transition: background 0.18s ease, box-shadow 0.18s ease;
-  /* Lift shadow recipe, theme-aware. On the near-black dark surface a
-     low-alpha black shadow is invisible, so dark mode uses a much
-     higher alpha + larger blur to read as a lift. */
-  --velu-header-shadow: 0 var(--s-4) var(--s0)
-    color-mix(in srgb, #000 8%, transparent);
-}
-[data-theme='dark'] .velu-header {
-  --velu-header-shadow: 0 var(--s-3) var(--s1)
-    color-mix(in srgb, #000 55%, transparent);
-}
-
-/* Once the user has scrolled even a single pixel, the header becomes
-   a translucent frosted-glass overlay so the article content shows
-   through faintly underneath. color-mix keeps the recipe token-driven:
-   75% --page-bg + transparent → 75% opaque in either theme. */
-.velu-header--scrolled {
-  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
-  backdrop-filter: saturate(140%) blur(12px);
-  -webkit-backdrop-filter: saturate(140%) blur(12px);
-  /* Lift shadow (theme-aware recipe defined on .velu-header) so the
-     header reads as raised above the article scrolling beneath it. */
-  box-shadow: var(--velu-header-shadow);
-}
-
-
-/* ── Top row ────────────────────────────────────────────────────────── */
-/* 3-column grid: brand at the inline-start, center slot in the middle,
-   actions at the inline-end. The center column flexes (1fr) so the
-   brand and actions stay snug to their edges while the search sits
-   between them; justify-self centers the center node within its 1fr
-   cell so it doesn't stretch. */
-.velu-header__top {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: var(--s1);
-}
-.velu-header__col--brand {
-  justify-self: start;
-}
-.velu-header__col--center {
-  justify-self: center;
-  min-inline-size: 0;
-}
-.velu-header__col--actions {
-  justify-self: end;
-}
-
-/* Brand */
-.velu-header__brand-link {
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-  color: inherit;
-}
-.velu-header__mark {
-  flex: none;
-  /* 32 × 24 — exact ratio of the brand mark's viewBox. */
-  inline-size: 2em;
-  block-size: 1.5em;
-  color: var(--accent-color);
-}
-.velu-header__wordmark {
-  font-family: var(--font-brand);
-  font-weight: var(--weight-light);
-  /* 32px wordmark. */
-  font-size: 2rem;
-  line-height: 1;
-  letter-spacing: -0.01em;
-  color: var(--text-color);
-}
-
-/* ── Action buttons ─────────────────────────────────────────────────── */
-.velu-header__action {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding: var(--s-3);
-  border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  /* No explicit line-height — inherits the page's --lh-body so the
-     button computes to the same height as the Search trigger (which
-     also inherits). The button's text contributes the same vertical
-     space as the search label. */
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.12s ease, border-color 0.12s ease,
-    color 0.12s ease;
-}
-.velu-header__action--outlined {
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  color: var(--text-color);
-}
-.velu-header__action--outlined:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-.velu-header__action--primary {
-  background: var(--accent-color);
-  border: var(--border-width) solid var(--accent-color);
-  color: #fff;
-}
-.velu-header__action--primary:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
-}
-.velu-header__action-icon {
-  display: inline-flex;
-  flex: none;
-  /* Match the Search trigger's icon at rest — muted. Flips to the
-     accent color on hover of an outlined action (the text + border
-     also go accent there, so the icon shifts with them). */
-  color: var(--muted-color);
-  transition: color 0.12s ease;
-}
-.velu-header__action--outlined:hover .velu-header__action-icon {
-  color: var(--accent-color);
-}
-
-/* Inline list of action buttons. Same cluster spacing as before; gets
-   `display: none` at narrow widths so the kebab takes over. */
-.velu-header__actions-list {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-2);
-}
-
-/* ── Kebab overflow menu (narrow widths only) ──────────────────────── */
-/* Hidden at wide widths — the inline action list is shown instead. */
-.velu-header__kebab {
-  position: relative;
-  display: none;
-}
-.velu-header__kebab-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--muted-color);
-  cursor: pointer;
-  transition: color 0.12s ease, background 0.12s ease;
-}
-.velu-header__kebab-toggle:hover {
-  color: var(--text-color);
-  background: var(--surface-color);
-}
-
-/* Dropdown — anchored to the kebab button's bottom-right. Same fabric
-   as the page (no shadow flourish — matches the TocBar dropdown). */
-.velu-header__kebab-menu {
-  position: absolute;
-  inset-block-start: calc(100% + var(--s-3));
-  inset-inline-end: 0;
-  margin: 0;
-  padding-block: var(--s-2);
-  padding-inline: 0;
-  list-style: none;
-  min-inline-size: 10rem;
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-0.25rem);
-  pointer-events: none;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0s linear 0.15s;
-  z-index: 31;
-}
-.velu-header__kebab[data-open='true'] .velu-header__kebab-menu {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  pointer-events: auto;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0s;
-}
-.velu-header__kebab-item {
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  inline-size: 100%;
-  padding-block: var(--s-2);
-  padding-inline: var(--s0);
-  background: transparent;
-  border: 0;
-  font: inherit;
-  font-size: var(--f-h6);
-  color: var(--text-color);
-  text-align: start;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.velu-header__kebab-item:hover {
-  background: var(--surface-color);
-  color: var(--accent-color);
-}
-.velu-header__kebab-icon {
-  display: inline-flex;
-  flex: none;
-  color: var(--muted-color);
-}
-.velu-header__kebab-item:hover .velu-header__kebab-icon {
-  color: var(--accent-color);
-}
-
-/* ── Breadcrumb (mobile-only replacement for tabs) ─────────────────── */
-/* Single-line trail with character-unit max width — long content
-   truncates with `text-overflow: ellipsis` rather than reflowing the
-   row or pushing the trailing burger. `display: inline-block` (not
-   flex) so the inline children can be ellipsed by text-overflow,
-   which only applies to inline-level content. Hidden by default;
-   the @container block at the bottom flips it on at mobile widths. */
-.velu-header__crumbs {
-  --velu-crumb-max: 24ch;
-  display: none;
-  align-items: center;
-  flex-wrap: nowrap;
-  max-inline-size: var(--velu-crumb-max);
-  min-inline-size: 0;
-  overflow: hidden;
-  /* Native-button reset — the strip is now a <button> so we need to
-     null out the browser's default chrome (background, border,
-     focus padding) and inherit the font from the header. */
-  padding: 0;
-  background: transparent;
-  border: 0;
-  font: inherit;
-  color: var(--text-color);
-  font-size: var(--f-h6);
-  cursor: pointer;
-}
-/* Each segment is a flex child that can shrink independently — the
-   final ("current page") segment is the one that ellipses if the
-   trail outgrows the max-width. */
-.velu-header__crumb {
-  flex: 0 1 auto;
-  min-inline-size: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.velu-header__crumb-link {
-  flex: 0 1 auto;
-  min-inline-size: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: inherit;
-  text-decoration: none;
-}
-.velu-header__crumb-link:hover {
-  color: var(--accent-color);
-}
-/* Chevron separator — never shrinks (flex: none). Sized in `em` so
-   it scales with the breadcrumb's font-size (h6 currently); 1em
-   matches the text glyph height, keeping the trail visually
-   balanced if --f-h6 ever changes. Gap to neighbouring segments
-   comes from `margin-inline: var(--s-3)` (~8px). */
-.velu-header__crumb-sep {
-  flex: none;
-  inline-size: 1em;
-  block-size: 1em;
-  stroke-width: 1;
-  margin-inline: var(--s-3);
-}
-
-/* ── Mobile burger nav button ──────────────────────────────────────── */
-/* Hidden by default; the @container query at the bottom flips it to
-   `inline-flex` at mobile widths. Defined BEFORE the @container so
-   that block's `display: inline-flex` overrides this `display: none`
-   via source-order cascade (same specificity). Sized 1.5rem (24px)
-   to match the top-row icon glyphs — no inner padding, the button
-   IS the icon. */
-/* Trailing slot at the right end of the tabs row (e.g. language
-   switcher). Pushed right by auto margin; hidden on mobile (above). */
-.velu-header__tabs-trailing {
-  margin-inline-start: auto;
-}
-
-.velu-header__menu {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--muted-color);
-  cursor: pointer;
-  transition: color 0.12s ease, background 0.12s ease;
-}
-.velu-header__menu:hover {
-  color: var(--text-color);
-  background: var(--surface-color);
-}
-
-/* ── Narrow-width swap ─────────────────────────────────────────────── */
-/* Same threshold as docs-layout / toc-bar — at < 1024px the inline
-   action buttons collapse into the kebab menu. The header lives inside
-   `.velu-docs-layout` (which is the `docs` container), so this query
-   reacts to the layout's width, not the viewport. */
-@container docs (max-width: 1024px) {
-  .velu-header__actions-list {
-    display: none;
-  }
-  .velu-header__kebab {
-    display: inline-block;
-  }
-  /* The big desktop inline inset is desktop-only; dial it back at
-     tablet (mobile reduces it further below). */
-  .velu-header {
-    padding-inline: var(--s2);
-  }
-}
-
-/* ── Mobile collapse (< 640px) ─────────────────────────────────────── */
-/* At mobile widths the header has to fit brand + search-icon + ask-ai
-   + kebab on one row at 375px. Hide the labels on action buttons (the
-   icon span keeps its class, so the unnamed text span is the second
-   child) and tighten the column gap. The trailing slot (theme toggle)
-   is hidden — it can be re-surfaced inside the kebab dropdown later. */
-@container docs (max-width: 640px) {
-  /* Language switcher (tabs-row trailing slot) folds into the drawer
-     on mobile. */
-  .velu-header__tabs-trailing {
-    display: none;
-  }
-  /* Drop the visible "Ask AI" / "Book Demo" label; icon survives. */
-  .velu-header__action > span:not(.velu-header__action-icon) {
-    display: none;
-  }
-  /* Compact padding when only the icon remains. */
-  .velu-header__action {
-    padding: var(--s-3);
-  }
-  /* Theme toggle hidden at mobile — too crowded; users can rely on
-     OS-level theme until we surface it inside the kebab. */
-  .velu-header__col--actions .velu-theme-toggle {
-    display: none;
-  }
-  /* 16px gap between the top-right icons (Search ↔ AskAI ↔ Kebab) —
-     applied at three levels because the icons live in two separate
-     Cluster components whose `space` prop sets an inline `gap`, so the
-     CSS needs `!important` to win over the inline style. --s0 is 1rem
-     which evaluates to 16px at the default root font-size. */
-  .velu-header__top {
-    gap: var(--s0) !important;
-  }
-  .velu-header__col--center,
-  .velu-header__col--actions {
-    gap: var(--s0) !important;
-  }
-  /* Reduce the header's outer horizontal padding so brand + actions
-     get more breathing room at 375px. */
-  .velu-header {
-    padding-inline: var(--s-1);
-  }
-  /* Shrink the wordmark slightly — 2rem competes with the icon row
-     for horizontal space; 1.5rem still reads as the brand. */
-  .velu-header__wordmark {
-    font-size: 1.5rem;
-  }
-  /* Flatten the 3-col grid into a flex row so the center cluster
-     (Search + Ask AI) sits flush with the actions cluster (Kebab) on
-     the right side. `margin-inline-start: auto` on center pushes both
-     clusters to the trailing edge, brand stays at the leading edge. */
-  .velu-header__top {
-    display: flex;
-    align-items: center;
-  }
-  .velu-header__col--center {
-    justify-self: auto;
-    margin-inline-start: auto;
-  }
-  .velu-header__col--actions {
-    justify-self: auto;
-  }
-  /* Borderless / transparent icon buttons in the right cluster — at
-     mobile they read as a row of icon chips alongside the kebab, not
-     pill-shaped buttons. */
-  .velu-header__col--center .velu-search__trigger,
-  .velu-header__col--center .velu-header__action--outlined,
-  .velu-header__col--center .velu-header__action--primary {
-    background: transparent;
-    border: 0;
-  }
-  /* Uniform 1.5rem glyphs across all icon buttons in the right cluster
-     (Search, Ask AI, kebab, burger) so they read as a single coherent
-     row. Targets the SVG directly — lucide icons render as <svg>.
-     `stroke-width: 1` thins the lucide default (2) so the icons read
-     as light line glyphs rather than chunky outlines. */
-  .velu-header__col--center .velu-search__trigger-icon svg,
-  .velu-header__col--center .velu-header__action-icon svg,
-  .velu-header__kebab-toggle svg,
-  .velu-header__menu svg {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    stroke-width: 1;
-  }
-  /* Use the body text color (not muted) for the icon buttons at
-     mobile — without the surrounding label/border to give them
-     weight, the muted-grey tint reads as "disabled". */
-  .velu-header__col--center .velu-search__trigger,
-  .velu-header__col--center .velu-search__trigger-icon,
-  .velu-header__col--center .velu-header__action,
-  .velu-header__col--center .velu-header__action-icon,
-  .velu-header__kebab-toggle,
-  .velu-header__menu {
-    color: var(--text-color);
-  }
-  /* Tabs row swap: hide the individual tabs (they collapse into the
-     mobile menu later), reveal the breadcrumb in their place. The
-     `.velu-header__tabs > .velu-header__tab` selector raises the
-     specificity above the base `.velu-header__tab { display: inline-flex }`
-     rule that appears later in this file, so the cascade resolves in
-     this block's favor without re-ordering the whole file. */
-  .velu-header__tabs > .velu-header__tab {
-    display: none;
-  }
-  .velu-header__crumbs {
-    display: flex;
-  }
-  /* Burger sits at the trailing edge of the tabs row — pushes itself
-     to the right via auto margin so the tabs cluster left as usual.
-     Hidden at wider widths via the default `display: none` below. */
-  .velu-header__menu {
-    display: inline-flex;
-    margin-inline-start: auto;
-  }
-  .velu-header__menu svg {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-}
-
-
-/* ── Tabs row ───────────────────────────────────────────────────────── */
-/* Tab is a horizontal link row with an optional icon, a label, and an
-   optional external-link chip. Active tab has accent color + an
-   underline rail. */
-.velu-header__tab {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding-block: var(--s-3);
-  padding-inline: var(--s-3);
-  border-block-end: 2px solid transparent;
-  color: var(--text-color);
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  text-decoration: none;
-  transition: color 0.12s ease, border-color 0.12s ease;
-}
-.velu-header__tab:hover {
-  color: var(--accent-color);
-}
-.velu-header__tab--active {
-  color: var(--accent-color);
-  border-block-end-color: var(--accent-color);
-}
-.velu-header__tab-icon,
-.velu-header__tab-external {
-  display: inline-flex;
-  flex: none;
-  color: var(--muted-color);
-}
-/* On hover / active, the icon follows the tab's accent color. */
-.velu-header__tab:hover .velu-header__tab-icon,
-.velu-header__tab--active .velu-header__tab-icon {
-  color: inherit;
-}
-.velu-header__tab-external {
-  font-size: var(--f-h7);
-  opacity: 0.7;
-}
+/* PageHeader — top-of-page header. All values are tokens; light/dark
+   via [data-theme]. Vertical rhythm is the Stack primitive; columns
+   are CSS grid (so the centre slot stays centred regardless of how
+   wide the brand or actions get). */
+
+.velu-header {
+  /* Sticky to the viewport top so the header stays visible as the
+     page scrolls. z-index is above sidebars/article content but
+     below modals (chatbot z:50, search palette z:60). */
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 30;
+  /* No bottom padding — the tabs row sits flush at the header's
+     bottom edge so the active tab's 2px underline meets the header's
+     bottom border (the selector "touches" the header line). */
+  padding-block-start: var(--s-1);
+  padding-block-end: 0;
+  /* Symmetric inline gutter so the brand (left) and the actions
+     (right) are pulled in to the same level and align with the page
+     content below. */
+  padding-inline: var(--s5);
+  /* --surface-color resolves to #f2f3f4 in light mode (and themes
+     to #323334 in dark) — a subtle hairline separator. */
+  border-block-end: var(--border-width) solid var(--surface-color);
+  background: var(--page-bg);
+  color: var(--text-color);
+  /* Background + shadow animate so the rest-state↔scrolled-state flip
+     is smooth (not a hard cut). backdrop-filter can't transition
+     cleanly in every engine, so we don't try. */
+  transition: background 0.18s ease, box-shadow 0.18s ease;
+  /* Lift shadow recipe, theme-aware. On the near-black dark surface a
+     low-alpha black shadow is invisible, so dark mode uses a much
+     higher alpha + larger blur to read as a lift. */
+  --velu-header-shadow: 0 var(--s-4) var(--s0)
+    color-mix(in srgb, #000 8%, transparent);
+}
+[data-theme='dark'] .velu-header {
+  --velu-header-shadow: 0 var(--s-3) var(--s1)
+    color-mix(in srgb, #000 55%, transparent);
+}
+
+/* Once the user has scrolled even a single pixel, the header becomes
+   a translucent frosted-glass overlay so the article content shows
+   through faintly underneath. color-mix keeps the recipe token-driven:
+   75% --page-bg + transparent → 75% opaque in either theme. */
+.velu-header--scrolled {
+  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
+  backdrop-filter: saturate(140%) blur(12px);
+  -webkit-backdrop-filter: saturate(140%) blur(12px);
+  /* Lift shadow (theme-aware recipe defined on .velu-header) so the
+     header reads as raised above the article scrolling beneath it. */
+  box-shadow: var(--velu-header-shadow);
+}
+
+
+/* ── Top row ────────────────────────────────────────────────────────── */
+/* 3-column grid: brand at the inline-start, center slot in the middle,
+   actions at the inline-end. The center column flexes (1fr) so the
+   brand and actions stay snug to their edges while the search sits
+   between them; justify-self centers the center node within its 1fr
+   cell so it doesn't stretch. */
+.velu-header__top {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--s1);
+}
+.velu-header__col--brand {
+  justify-self: start;
+}
+.velu-header__col--center {
+  justify-self: center;
+  min-inline-size: 0;
+}
+.velu-header__col--actions {
+  justify-self: end;
+}
+
+/* Brand */
+.velu-header__brand-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+.velu-header__mark {
+  flex: none;
+  /* 32 × 24 — exact ratio of the brand mark's viewBox. */
+  inline-size: 2em;
+  block-size: 1.5em;
+  color: var(--accent-color);
+}
+.velu-header__wordmark {
+  font-family: var(--font-brand);
+  font-weight: var(--weight-light);
+  /* 32px wordmark. */
+  font-size: 2rem;
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--text-color);
+}
+
+/* Configured site logo (replaces the mark + wordmark). Height-constrained to
+   the brand row; width scales by aspect ratio up to a sane cap. */
+.velu-logo {
+  display: block;
+  block-size: 2rem;
+  inline-size: auto;
+  max-inline-size: 12rem;
+  object-fit: contain;
+}
+/* Per-theme swap: light image by default, dark image under [data-theme=dark].
+   `display` (not opacity) so the inactive one leaves the a11y tree too. The
+   `mono` single-image case has neither modifier and always shows. */
+.velu-logo--dark {
+  display: none;
+}
+[data-theme='dark'] .velu-logo--light {
+  display: none;
+}
+[data-theme='dark'] .velu-logo--dark {
+  display: block;
+}
+
+/* ── Action buttons ─────────────────────────────────────────────────── */
+.velu-header__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  /* No explicit line-height — inherits the page's --lh-body so the
+     button computes to the same height as the Search trigger (which
+     also inherits). The button's text contributes the same vertical
+     space as the search label. */
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, border-color 0.12s ease,
+    color 0.12s ease;
+}
+.velu-header__action--outlined {
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  color: var(--text-color);
+}
+.velu-header__action--outlined:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+.velu-header__action--primary {
+  background: var(--accent-color);
+  border: var(--border-width) solid var(--accent-color);
+  color: #fff;
+}
+.velu-header__action--primary:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+/* Plain text link (navbar.links) — no fill or border, just text that goes
+   accent on hover. Transparent border keeps it the same height as the
+   buttons beside it; tighter inline padding reads as a link, not a button. */
+.velu-header__action--link {
+  background: transparent;
+  border: var(--border-width) solid transparent;
+  color: var(--text-color);
+  padding-inline: var(--s-5);
+}
+.velu-header__action--link:hover {
+  color: var(--accent-color);
+}
+.velu-header__action--link:hover .velu-header__action-icon {
+  color: var(--accent-color);
+}
+.velu-header__action-icon {
+  display: inline-flex;
+  flex: none;
+  /* Match the Search trigger's icon at rest — muted. Flips to the
+     accent color on hover of an outlined action (the text + border
+     also go accent there, so the icon shifts with them). */
+  color: var(--muted-color);
+  transition: color 0.12s ease;
+}
+.velu-header__action--outlined:hover .velu-header__action-icon {
+  color: var(--accent-color);
+}
+
+/* Inline list of action buttons. Same cluster spacing as before; gets
+   `display: none` at narrow widths so the kebab takes over. */
+.velu-header__actions-list {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+/* ── Kebab overflow menu (narrow widths only) ──────────────────────── */
+/* Hidden at wide widths — the inline action list is shown instead. */
+.velu-header__kebab {
+  position: relative;
+  display: none;
+}
+.velu-header__kebab-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+.velu-header__kebab-toggle:hover {
+  color: var(--text-color);
+  background: var(--surface-color);
+}
+
+/* Dropdown — anchored to the kebab button's bottom-right. Same fabric
+   as the page (no shadow flourish — matches the TocBar dropdown). */
+.velu-header__kebab-menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-end: 0;
+  margin: 0;
+  padding-block: var(--s-2);
+  padding-inline: 0;
+  list-style: none;
+  min-inline-size: 10rem;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.25rem);
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s linear 0.15s;
+  z-index: 31;
+}
+.velu-header__kebab[data-open='true'] .velu-header__kebab-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0s;
+}
+.velu-header__kebab-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  inline-size: 100%;
+  padding-block: var(--s-2);
+  padding-inline: var(--s0);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  font-size: var(--f-h6);
+  color: var(--text-color);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.velu-header__kebab-item:hover {
+  background: var(--surface-color);
+  color: var(--accent-color);
+}
+.velu-header__kebab-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--muted-color);
+}
+.velu-header__kebab-item:hover .velu-header__kebab-icon {
+  color: var(--accent-color);
+}
+
+/* ── Breadcrumb (mobile-only replacement for tabs) ─────────────────── */
+/* Single-line trail with character-unit max width — long content
+   truncates with `text-overflow: ellipsis` rather than reflowing the
+   row or pushing the trailing burger. `display: inline-block` (not
+   flex) so the inline children can be ellipsed by text-overflow,
+   which only applies to inline-level content. Hidden by default;
+   the @container block at the bottom flips it on at mobile widths. */
+.velu-header__crumbs {
+  --velu-crumb-max: 24ch;
+  display: none;
+  align-items: center;
+  flex-wrap: nowrap;
+  max-inline-size: var(--velu-crumb-max);
+  min-inline-size: 0;
+  overflow: hidden;
+  /* Native-button reset — the strip is now a <button> so we need to
+     null out the browser's default chrome (background, border,
+     focus padding) and inherit the font from the header. */
+  padding: 0;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  cursor: pointer;
+}
+/* Each segment is a flex child that can shrink independently — the
+   final ("current page") segment is the one that ellipses if the
+   trail outgrows the max-width. */
+.velu-header__crumb {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.velu-header__crumb-link {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
+}
+.velu-header__crumb-link:hover {
+  color: var(--accent-color);
+}
+/* Chevron separator — never shrinks (flex: none). Sized in `em` so
+   it scales with the breadcrumb's font-size (h6 currently); 1em
+   matches the text glyph height, keeping the trail visually
+   balanced if --f-h6 ever changes. Gap to neighbouring segments
+   comes from `margin-inline: var(--s-3)` (~8px). */
+.velu-header__crumb-sep {
+  flex: none;
+  inline-size: 1em;
+  block-size: 1em;
+  stroke-width: 1;
+  margin-inline: var(--s-3);
+}
+
+/* ── Mobile burger nav button ──────────────────────────────────────── */
+/* Hidden by default; the @container query at the bottom flips it to
+   `inline-flex` at mobile widths. Defined BEFORE the @container so
+   that block's `display: inline-flex` overrides this `display: none`
+   via source-order cascade (same specificity). Sized 1.5rem (24px)
+   to match the top-row icon glyphs — no inner padding, the button
+   IS the icon. */
+/* Trailing slot at the right end of the tabs row (e.g. language
+   switcher). Pushed right by auto margin; hidden on mobile (above). */
+.velu-header__tabs-trailing {
+  margin-inline-start: auto;
+}
+
+.velu-header__menu {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+.velu-header__menu:hover {
+  color: var(--text-color);
+  background: var(--surface-color);
+}
+
+/* ── Narrow-width swap ─────────────────────────────────────────────── */
+/* Same threshold as docs-layout / toc-bar — at < 1024px the inline
+   action buttons collapse into the kebab menu. The header lives inside
+   `.velu-docs-layout` (which is the `docs` container), so this query
+   reacts to the layout's width, not the viewport. */
+@container docs (max-width: 1024px) {
+  .velu-header__actions-list {
+    display: none;
+  }
+  .velu-header__kebab {
+    display: inline-block;
+  }
+  /* The big desktop inline inset is desktop-only; dial it back at
+     tablet (mobile reduces it further below). */
+  .velu-header {
+    padding-inline: var(--s2);
+  }
+}
+
+/* ── Mobile collapse (< 640px) ─────────────────────────────────────── */
+/* At mobile widths the header has to fit brand + search-icon + ask-ai
+   + kebab on one row at 375px. Hide the labels on action buttons (the
+   icon span keeps its class, so the unnamed text span is the second
+   child) and tighten the column gap. The trailing slot (theme toggle)
+   is hidden — it can be re-surfaced inside the kebab dropdown later. */
+@container docs (max-width: 640px) {
+  /* Language switcher (tabs-row trailing slot) folds into the drawer
+     on mobile. */
+  .velu-header__tabs-trailing {
+    display: none;
+  }
+  /* Drop the visible "Ask AI" / "Book Demo" label; icon survives. */
+  .velu-header__action > span:not(.velu-header__action-icon) {
+    display: none;
+  }
+  /* Compact padding when only the icon remains. */
+  .velu-header__action {
+    padding: var(--s-3);
+  }
+  /* Theme toggle hidden at mobile — too crowded; users can rely on
+     OS-level theme until we surface it inside the kebab. */
+  .velu-header__col--actions .velu-theme-toggle {
+    display: none;
+  }
+  /* 16px gap between the top-right icons (Search ↔ AskAI ↔ Kebab) —
+     applied at three levels because the icons live in two separate
+     Cluster components whose `space` prop sets an inline `gap`, so the
+     CSS needs `!important` to win over the inline style. --s0 is 1rem
+     which evaluates to 16px at the default root font-size. */
+  .velu-header__top {
+    gap: var(--s0) !important;
+  }
+  .velu-header__col--center,
+  .velu-header__col--actions {
+    gap: var(--s0) !important;
+  }
+  /* Reduce the header's outer horizontal padding so brand + actions
+     get more breathing room at 375px. */
+  .velu-header {
+    padding-inline: var(--s-1);
+  }
+  /* Shrink the wordmark slightly — 2rem competes with the icon row
+     for horizontal space; 1.5rem still reads as the brand. */
+  .velu-header__wordmark {
+    font-size: 1.5rem;
+  }
+  /* Flatten the 3-col grid into a flex row so the center cluster
+     (Search + Ask AI) sits flush with the actions cluster (Kebab) on
+     the right side. `margin-inline-start: auto` on center pushes both
+     clusters to the trailing edge, brand stays at the leading edge. */
+  .velu-header__top {
+    display: flex;
+    align-items: center;
+  }
+  .velu-header__col--center {
+    justify-self: auto;
+    margin-inline-start: auto;
+  }
+  .velu-header__col--actions {
+    justify-self: auto;
+  }
+  /* Borderless / transparent icon buttons in the right cluster — at
+     mobile they read as a row of icon chips alongside the kebab, not
+     pill-shaped buttons. */
+  .velu-header__col--center .velu-search__trigger,
+  .velu-header__col--center .velu-header__action--outlined,
+  .velu-header__col--center .velu-header__action--primary {
+    background: transparent;
+    border: 0;
+  }
+  /* Uniform 1.5rem glyphs across all icon buttons in the right cluster
+     (Search, Ask AI, kebab, burger) so they read as a single coherent
+     row. Targets the SVG directly — lucide icons render as <svg>.
+     `stroke-width: 1` thins the lucide default (2) so the icons read
+     as light line glyphs rather than chunky outlines. */
+  .velu-header__col--center .velu-search__trigger-icon svg,
+  .velu-header__col--center .velu-header__action-icon svg,
+  .velu-header__kebab-toggle svg,
+  .velu-header__menu svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    stroke-width: 1;
+  }
+  /* Use the body text color (not muted) for the icon buttons at
+     mobile — without the surrounding label/border to give them
+     weight, the muted-grey tint reads as "disabled". */
+  .velu-header__col--center .velu-search__trigger,
+  .velu-header__col--center .velu-search__trigger-icon,
+  .velu-header__col--center .velu-header__action,
+  .velu-header__col--center .velu-header__action-icon,
+  .velu-header__kebab-toggle,
+  .velu-header__menu {
+    color: var(--text-color);
+  }
+  /* Tabs row swap: hide the individual tabs (they collapse into the
+     mobile menu later), reveal the breadcrumb in their place. The
+     `.velu-header__tabs > .velu-header__tab` selector raises the
+     specificity above the base `.velu-header__tab { display: inline-flex }`
+     rule that appears later in this file, so the cascade resolves in
+     this block's favor without re-ordering the whole file. */
+  .velu-header__tabs > .velu-header__tab {
+    display: none;
+  }
+  .velu-header__crumbs {
+    display: flex;
+  }
+  /* Burger sits at the trailing edge of the tabs row — pushes itself
+     to the right via auto margin so the tabs cluster left as usual.
+     Hidden at wider widths via the default `display: none` below. */
+  .velu-header__menu {
+    display: inline-flex;
+    margin-inline-start: auto;
+  }
+  .velu-header__menu svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+}
+
+
+/* ── Tabs row ───────────────────────────────────────────────────────── */
+/* Tab is a horizontal link row with an optional icon, a label, and an
+   optional external-link chip. Active tab has accent color + an
+   underline rail. */
+.velu-header__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-block: var(--s-3);
+  padding-inline: var(--s-3);
+  border-block-end: 2px solid transparent;
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+.velu-header__tab:hover {
+  color: var(--accent-color);
+}
+.velu-header__tab--active {
+  color: var(--accent-color);
+  border-block-end-color: var(--accent-color);
+}
+.velu-header__tab-icon,
+.velu-header__tab-external {
+  display: inline-flex;
+  flex: none;
+  color: var(--muted-color);
+}
+/* On hover / active, the icon follows the tab's accent color. */
+.velu-header__tab:hover .velu-header__tab-icon,
+.velu-header__tab--active .velu-header__tab-icon {
+  color: inherit;
+}
+.velu-header__tab-external {
+  font-size: var(--f-h7);
+  opacity: 0.7;
+}