@veluai/velu 0.2.37 → 0.2.39

package/runtime/velu-ui/components/VepaFooter.jsx

@@ -3,36 +3,38 @@ import Logo from './Logo.jsx';
 import SocialLinks from './SocialLinks.jsx';
 import ThemePreferenceMenu from './ThemePreferenceMenu.jsx';
 
-export default function VepaFooter({ brand, columns = [], socials = [], linkComponent: Link = 'a' }) {
+export default function VepaFooter({ preset = 'vepa', brand, columns = [], socials = [], linkComponent: Link = 'a' }) {
   const single = columns.length === 1;
   const completeHeadings = columns.every((c) => c.title);
-  return <footer id="footer" className="vepa-footer" data-layout={columns.length <= 3 ? 'compact' : 'expanded'} data-single={single} data-headings={completeHeadings}>
-    <div className="vepa-footer__inner">
-      <div className="vepa-footer__top">
-        <div className="vepa-footer__brand-column">
-          <Link href={brand?.href || '/'} className="vepa-footer__brand">
+  const root = ['thulir', 'aalam'].includes(preset) ? 'thulir-footer' : 'vepa-footer';
+  return <footer id="footer" className={root} data-layout={columns.length <= 3 ? 'compact' : 'expanded'} data-single={single} data-headings={completeHeadings}>
+    <div className={`${root}__inner`}>
+      <div className={`${root}__top`}>
+        <div className={`${root}__brand-column`}>
+          <Link href={brand?.href || '/'} className={`${root}__brand`}>
             {brand?.logo ? <Logo logo={brand.logo} alt={brand.label} /> : <span>{brand?.label || 'Velu'}</span>}
           </Link>
-          <SocialLinks socials={socials} className="vepa-footer__brand-socials" />
+          {['thulir', 'aalam'].includes(preset) && <SocialLinks socials={socials} className="thulir-footer__brand-mobile-socials" />}
+          <SocialLinks socials={socials} className={`${root}__brand-socials`} />
         </div>
-        <div className="vepa-footer__columns" style={{ '--footer-columns': columns.length }}>
-          {columns.map((column, i) => <div className="vepa-footer__column" key={i}>
-            <div className="vepa-footer__links">
-              {column.title && !single && <p className="vepa-footer__heading">{column.title}</p>}
+        <div className={`${root}__columns`} style={{ '--footer-columns': columns.length }}>
+          {columns.map((column, i) => <div className={`${root}__column`} key={i}>
+            <div className={`${root}__links`}>
+              {column.title && !single && <p className={`${root}__heading`}>{column.title}</p>}
               {(column.items || []).map((item, j) => {
                 const external = /^https?:\/\//.test(item.href || '');
                 const Tag = external ? 'a' : Link;
-                return <Tag className="vepa-footer__link" key={j} href={item.href || '#'} {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}>{item.label}</Tag>;
+                return <Tag className={`${root}__link`} key={j} href={item.href || '#'} {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}>{item.label}</Tag>;
               })}
             </div>
           </div>)}
         </div>
-        <SocialLinks socials={socials} className="vepa-footer__end-socials" />
+        <SocialLinks socials={socials} className={`${root}__end-socials`} />
       </div>
-      {!completeHeadings && <SocialLinks socials={socials} className="vepa-footer__mobile-socials" />}
-      <div className="vepa-footer__divider" />
-      <div className="vepa-footer__bottom">
-        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className="vepa-footer__powered">Powered by <strong>Velu</strong></a>
+      {!completeHeadings && <SocialLinks socials={socials} className={`${root}__mobile-socials`} />}
+      <div className={`${root}__divider`} />
+      <div className={`${root}__bottom`}>
+        <a href="https://veludocs.com" target="_blank" rel="noreferrer" className={`${root}__powered`}>Powered by <strong>Velu</strong></a>
         <ThemePreferenceMenu inline />
       </div>
     </div>

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

@@ -71,12 +71,15 @@
   font-size: var(--f-h6);
 }
 
-/* Body + Header tabs — fixed height, vertically scrollable, so a long
-   response never makes the panel grow unbounded. */
+/* Body + Header tabs — fixed height, scrollable on both axes. Vertical
+   for long responses; horizontal so nowrap header keys stay reachable
+   when wider than the panel (document overflow-x is clipped to keep
+   sticky chrome from panning). */
 .velu-api-resp-headers__scroll,
 .velu-api-resp-body__scroll {
   max-block-size: 15rem;
-  overflow-y: auto;
+  min-inline-size: 0;
+  overflow: auto;
 }
 /* The CodeBlock owns its own border/radius; let it fill the scroll box. */
 .velu-api-resp-body__scroll > .velu-code-block {

package/runtime/velu-ui/components/chatbot.css

@@ -12,7 +12,8 @@
 
 /* ── Panel + slide ──────────────────────────────────────────────────── */
 /* Fixed panel width via `--vchat-width` (overridable, like --card-min);
-   capped at 100vw so it can never exceed the viewport. */
+   capped at 100% (not 100vw) so a vertical scrollbar can't push the
+   panel a few pixels past the layout width and create page h-scroll. */
 .velu-chatbot {
   /* Comfortable fixed panel width. The panel slides OVER the right
      edge (it's a floating overlay, z-50) so the article doesn't
@@ -24,7 +25,7 @@
   inset-inline-end: 0;
   z-index: 50;
   inline-size: var(--vchat-width);
-  max-inline-size: 100vw;
+  max-inline-size: 100%;
   display: flex;
   flex-direction: column;
   background: var(--page-bg);
@@ -97,8 +98,8 @@
     inset-inline: 0;
     inset-block-end: 0;
     inset-block-start: auto;
-    inline-size: 100vw;
-    max-inline-size: 100vw;
+    inline-size: 100%;
+    max-inline-size: 100%;
     block-size: min(85vh, 40rem);
     transform: translateY(100%);
     border-inline-start: 0;

package/runtime/velu-ui/components/docs-layout.css

@@ -37,6 +37,11 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  /* Never let a wide child widen the page: that would horizontally
+     scroll the sticky header with the article. Local scroll lives on
+     `__main` (and on code/table wrappers) instead. */
+  max-inline-size: 100%;
+  overflow-x: clip;
   background: var(--page-bg);
 }
 
@@ -90,13 +95,11 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  /* Bottom boundary: end the column a fixed gap above the viewport
-     bottom (mirrors the pinned top), so the nav scrolls within a
-     contained panel rather than running to the screen edge. The value
-     is driven by --velu-aside-bottom (set inline in App.jsx) so the
-     edge lifts to stay above the footer as it scrolls in; falls back
-     to a static gap. The mobile drawer resets this to 0. */
-  inset-block-end: var(--velu-aside-bottom, var(--s4));
+  /* Full viewport height — the footer sits under content + TOC only
+     (see `[data-velu-footer]`), so the left rail never lifts. No bottom
+     padding: the nav scroller (and its scrollbar) must reach the edge. */
+  inset-block-end: 0;
+  padding-block-end: 0;
 }
 /* Stack wrapper fills the aside so the inner nav region can flex-grow
    and own the scroll. */
@@ -127,77 +130,15 @@
 .velu-docs-nav-scroll {
   flex: 1 1 auto;
   min-block-size: 0;
-  overflow-y: auto;
-}
-
-/* Up / down scroll arrows — circular buttons centered on the top and
-   bottom edges of the scroll region. Hidden by default; revealed (via
-   the sibling combinator off the scroll div's data-fade-* attrs) only
-   when there's content beyond that edge. Clicking smooth-scrolls the
-   nav fully to that end (handlers in App.jsx). */
-.velu-docs-nav-arrow {
-  position: absolute;
-  inset-inline-start: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  padding: 0;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 999px;
-  /* Frosted glass — same recipe as the scrolled header / toc-bar: 75%
-     --page-bg + a saturate/blur backdrop, so the nav content shows through
-     faintly behind the button. */
-  background: color-mix(in srgb, var(--page-bg) 75%, transparent);
-  backdrop-filter: saturate(140%) blur(12px);
-  -webkit-backdrop-filter: saturate(140%) blur(12px);
-  color: var(--muted-color);
-  cursor: pointer;
-  z-index: 3;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(-50%) scale(0.9);
-  transition: opacity 0.15s ease, transform 0.15s ease, color 0.12s ease,
-    border-color 0.12s ease;
-  box-shadow: 0 var(--s-4) var(--s-1) color-mix(in srgb, #000 10%, transparent);
-}
-.velu-docs-nav-arrow:hover {
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-}
-.velu-docs-nav-arrow svg {
-  inline-size: 1.1em;
-  block-size: 1.1em;
-}
-.velu-docs-nav-arrow--up {
-  /* Float ABOVE the scroll region — up in the context-divider gap — instead
-     of over the first section heading. The lift is the arrow's own height
-     (2rem, matching block-size) plus a small gap, so its bottom clears the
-     scroll content and it never overlaps nav text. */
-  inset-block-start: calc(-2rem - var(--s-4));
-}
-.velu-docs-nav-arrow--down {
-  inset-block-end: var(--s-3);
-}
-/* Reveal whenever there's content beyond that edge — always on (not just on
-   hover), so the scroll affordance is visible as long as there's more to
-   scroll. The data-fade-* attrs (set by the runtime from scroll position)
-   already gate each arrow to the direction that actually has overflow. */
-.velu-docs-nav-scroll[data-fade-top='true'] ~ .velu-docs-nav-arrow--up,
-.velu-docs-nav-scroll[data-fade-bottom='true'] ~ .velu-docs-nav-arrow--down {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(-50%) scale(1);
+  /* Always reserve the scrollbar gutter (see always-on track styles
+     further below) instead of only appearing when content overflows. */
+  overflow-y: scroll;
+  /* Clear sticky section headings when scrolling the active item into view. */
+  scroll-padding-block-start: 2.75rem;
 }
 
-/* Edge fade: the scroll regions (left nav + right TOC) fade to
-   transparent at whichever edge has more content beyond it. The
-   --vf-top / --vf-bottom lengths default to 0 (no fade) and are
-   switched on by the data-fade-* attrs that App.jsx sets from scroll
-   position — so the top only fades once you've scrolled down, and the
-   bottom fade vanishes when you reach the end. */
-.velu-docs-nav-scroll,
+/* Edge fade: right TOC only. The left nav keeps crisp edges (no mask
+   blur) so the always-on scrollbar and sticky headings read cleanly. */
 .velu-docs-layout__aside--right {
   --vf-top: 0px;
   --vf-bottom: 0px;
@@ -216,22 +157,9 @@
     transparent
   );
 }
-/* Top fade only on the right TOC — the left nav uses sticky section
-   headers as its top treatment, so a top fade would just blur the
-   pinned heading. */
 .velu-docs-layout__aside--right[data-fade-top='true'] {
   --vf-top: var(--s2);
 }
-/* The left nav's under-heading fade (the ::after below a sticky section
-   heading) is shown only while the nav is scrolled up AND only under the
-   currently-PINNED section ([data-stuck], set by the runtime). Other sections'
-   headings scroll normally, so their first item must not be dimmed — only the
-   item sliding under the top-pinned heading fades. */
-.velu-docs-nav-scroll[data-fade-top='true']
-  .velu-sidebar__section[data-stuck='true']::after {
-  opacity: 1;
-}
-.velu-docs-nav-scroll[data-fade-bottom='true'],
 .velu-docs-layout__aside--right[data-fade-bottom='true'] {
   --vf-bottom: var(--s2);
 }
@@ -242,33 +170,61 @@
   padding-inline: var(--s1);
 }
 
-/* Scrollbars hide at rest and reveal only while the cursor is over the
-   column. Applies to the right TOC aside (scrolls directly) and the
-   left nav's inner scroll region (.velu-docs-nav-scroll). The gutter
-   stays reserved (scrollbar-width: thin from .velu-hide-scrollbar) —
-   only the thumb's color toggles — so revealing it never shifts
-   content. Overrides .velu-hide-scrollbar's always-on thumb. */
-.velu-docs-layout__aside--right,
-.velu-docs-nav-scroll {
+/* Right TOC: hide the thumb at rest, reveal on hover. Gutter stays
+   reserved so revealing never shifts content. */
+.velu-docs-layout__aside--right {
   scrollbar-color: transparent transparent;
 }
-.velu-docs-layout__aside--right:hover,
-.velu-docs-layout__aside--left:hover .velu-docs-nav-scroll {
+.velu-docs-layout__aside--right:hover {
   scrollbar-color: var(--border-color) transparent;
 }
-.velu-docs-layout__aside--right::-webkit-scrollbar-thumb,
-.velu-docs-nav-scroll::-webkit-scrollbar-thumb {
+.velu-docs-layout__aside--right::-webkit-scrollbar-thumb {
   background: transparent;
 }
-.velu-docs-layout__aside--right:hover::-webkit-scrollbar-thumb,
-.velu-docs-layout__aside--left:hover .velu-docs-nav-scroll::-webkit-scrollbar-thumb {
+.velu-docs-layout__aside--right:hover::-webkit-scrollbar-thumb {
   background: var(--border-color);
 }
-.velu-docs-layout__aside--right:hover::-webkit-scrollbar-thumb:hover,
-.velu-docs-layout__aside--left:hover .velu-docs-nav-scroll::-webkit-scrollbar-thumb:hover {
+.velu-docs-layout__aside--right:hover::-webkit-scrollbar-thumb:hover {
   background: var(--muted-color);
 }
 
+/* Left nav: scrollbar always on (gutter + track + thumb), flush to the
+   top and bottom of the scroll column — no inset rail or rounded ends. */
+.velu-docs-nav-scroll {
+  scrollbar-width: thin;
+  /* Firefox: thumb then track. */
+  scrollbar-color: var(--muted-color)
+    color-mix(in srgb, var(--muted-color) 28%, var(--page-bg));
+  /* Chromium overlay scrollbars often ignore ::-webkit-scrollbar-track,
+     so paint a permanent rail on the inline-end edge as well. */
+  background-image: linear-gradient(
+    to left,
+    color-mix(in srgb, var(--muted-color) 28%, var(--page-bg)) 10px,
+    transparent 10px
+  );
+}
+.velu-docs-nav-scroll::-webkit-scrollbar {
+  inline-size: 10px;
+}
+.velu-docs-nav-scroll::-webkit-scrollbar-track {
+  background: color-mix(in srgb, var(--muted-color) 28%, var(--page-bg));
+  border-radius: 0;
+}
+.velu-docs-nav-scroll::-webkit-scrollbar-thumb {
+  background: var(--muted-color);
+  border-radius: 0;
+}
+.velu-docs-nav-scroll::-webkit-scrollbar-thumb:hover,
+.velu-docs-nav-scroll::-webkit-scrollbar-thumb:active {
+  background: var(--text-color);
+}
+
+/* Last-item breathing room lives on the nav content, not the scroller,
+   so the scrollbar track still runs edge-to-edge. */
+.velu-docs-nav-scroll > :last-child {
+  padding-block-end: var(--s1);
+}
+
 /* ── Center column ─────────────────────────────────────────────────── */
 /* Reserves the aside widths via margin so the article never slides
    under them. The end margin collapses to 0 while the chatbot is
@@ -293,6 +249,11 @@
    defined here (not inline) so the narrow + sidebar-closed @container
    rule below can override just the inline-start side. */
 .velu-docs-layout__main {
+  min-inline-size: 0;
+  /* Clip — not auto. `overflow-x: auto` makes <main> a scrollport, so
+     trackpad/wheel horizontal pans slide the article even when nothing
+     should scroll. Wide code/tables keep their own overflow-x: auto. */
+  overflow-x: clip;
   padding-block-start: var(--s3);
   padding-inline: var(--s4);
 }
@@ -307,6 +268,17 @@
   margin-inline: auto;
 }
 
+/* Site footer sits beside the left rail and shares the centre column's
+   horizontal margins (sidebar + right TOC reserve). That way the
+   footer's margin:auto content shares the same optical center as the
+   article — a pseudo-center that accounts for the left column instead
+   of the full viewport. */
+.velu-docs-layout > [data-velu-footer] {
+  margin-inline-start: var(--velu-sidebar-width);
+  margin-inline-end: var(--velu-aside-right-width);
+  transition: margin-inline-start 0.2s ease, margin-inline-end 0.2s ease;
+}
+
 /* Inner sidebar content (the <Sidebar> nav root, direct child of the
    left aside) cross-fades during the collapse animation. Hidden when
    the layout's `data-sidebar-open='false'` flag is set — see the
@@ -538,6 +510,9 @@
   .velu-docs-layout__center {
     margin-inline-end: 0;
   }
+  .velu-docs-layout > [data-velu-footer] {
+    margin-inline-end: 0;
+  }
   .velu-docs-layout__sidebar-toggle {
     display: inline-flex;
   }
@@ -549,15 +524,10 @@
   .velu-docs-layout__aside--left {
     border-inline-end: var(--border-width) solid var(--surface-color);
     padding-inline-start: var(--s2);
-    /* The divider IS this aside's right edge, so it can only reach as far
-       down as the box does. The base rule lifts the box above the footer
-       (inset-block-end) to keep nav content clear of it — but that also
-       cuts the divider short. Here (where the divider shows) span the box
-       to the bottom instead and push the *content* up with matching
-       padding, so the line runs to the footer while the nav still clears
-       it. The footer's own z-index covers the line where they overlap. */
-    inset-block-end: 0;
-    padding-block-end: var(--velu-aside-bottom, var(--s4));
+  }
+  /* Footer tracks the sidebar / rail the same way the centre column does. */
+  .velu-docs-layout[data-sidebar-open='false'] > [data-velu-footer] {
+    margin-inline-start: var(--velu-rail-width);
   }
   /* Sidebar closed → shrink the aside's `inline-size` from 240px to
      the rail width. The aside stays in the DOM and keeps its own
@@ -630,6 +600,11 @@
   .velu-docs-layout[data-sidebar-open='false'] .velu-docs-layout__center {
     margin-inline-start: 0;
   }
+  .velu-docs-layout > [data-velu-footer],
+  .velu-docs-layout[data-sidebar-open='false'] > [data-velu-footer] {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
   .velu-docs-layout__aside--left {
     /* Anchor to the right edge instead of the left — override the
        base `inset-inline-start: 0` from .velu-docs-layout__aside--left
@@ -827,6 +802,9 @@
 .velu-docs-layout[data-page-mode='frame'] .velu-docs-layout__center {
   margin-inline-end: 0;
 }
+.velu-docs-layout[data-page-mode='frame'] > [data-velu-footer] {
+  margin-inline-end: 0;
+}
 
 /* Custom / center / assistant: no sidebar, no TOC. */
 .velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__aside,
@@ -839,6 +817,13 @@
 .velu-docs-layout[data-page-mode='assistant'] .velu-docs-layout__center {
   margin-inline: 0;
 }
+.velu-docs-layout[data-page-mode='custom'] > [data-velu-footer],
+.velu-docs-layout[data-page-mode='center'] > [data-velu-footer],
+.velu-docs-layout[data-page-mode='assistant'] > [data-velu-footer],
+.velu-docs-layout[data-not-found='true'] > [data-velu-footer] {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
 .velu-docs-layout[data-page-mode='custom'] .velu-docs-layout__sidebar-toggle,
 .velu-docs-layout[data-page-mode='center'] .velu-docs-layout__sidebar-toggle,
 .velu-docs-layout[data-page-mode='assistant'] .velu-docs-layout__sidebar-toggle,

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

@@ -10,9 +10,8 @@
      resolves to #f2f3f4 in light / #323334 in dark). */
   border-block-start: var(--border-width) solid var(--surface-color);
   color: var(--text-color);
-  /* Opaque so the footer visually eclipses the fixed sidebar / TOC
-     when the page scrolls into it (DocsPage gives the footer a higher
-     z-index than the asides). */
+/* Opaque so the footer sits cleanly under content + TOC while the
+   fixed left rail runs full height beside it. */
   background: var(--page-bg);
 }
 

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

@@ -10,6 +10,10 @@
   position: sticky;
   inset-block-start: 0;
   z-index: 30;
+  /* Stay within the viewport even if a child wants to be wider —
+     page-level h-scroll would slide this sticky bar sideways. */
+  max-inline-size: 100%;
+  overflow-x: clip;
   /* 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). */
@@ -73,6 +77,7 @@
 }
 .velu-header__col--brand {
   justify-self: start;
+  min-inline-size: 0;
 }
 .velu-header__col--center {
   justify-self: center;
@@ -80,6 +85,7 @@
 }
 .velu-header__col--actions {
   justify-self: end;
+  min-inline-size: 0;
 }
 
 /* Brand */

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

@@ -48,3 +48,195 @@
 .velu-pagenav__card:hover .velu-pagenav__dir {
   color: var(--accent-color);
 }
+
+/* Aalam / Maple pagination tray — featured destination card + optional
+   compact Previous. Scoped via .velu-pagenav--aalam so default/Thulir
+   cards stay untouched. */
+.velu-pagenav--aalam {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  margin-block: 2.5rem;
+  padding: 4px;
+  border-radius: 16px;
+  /* Maple: bg-gray-50/80 */
+  background: rgb(249 250 251 / 0.8);
+  font-size: 14px;
+  line-height: 20px;
+  text-decoration: none;
+}
+
+[data-theme='dark'] .velu-pagenav--aalam {
+  /* Maple: dark:bg-white/[0.03] */
+  background: rgb(255 255 255 / 0.03);
+}
+
+.velu-pagenav--aalam a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.velu-pagenav__compact {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 0 24px 0 12px;
+  color: var(--muted-color);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+.velu-pagenav__compact svg {
+  flex: none;
+  /* Maple: text-gray-300 / dark:text-gray-700 */
+  color: #d1d5db;
+  transition: color 0.12s ease;
+}
+
+[data-theme='dark'] .velu-pagenav__compact svg {
+  color: #374151;
+}
+
+.velu-pagenav__compact:hover span {
+  color: var(--thulir-heading, var(--text-color));
+}
+
+.velu-pagenav__compact:hover svg {
+  /* Maple: group-hover:text-gray-600 / dark:group-hover:text-gray-400 */
+  color: #4b5563;
+}
+
+[data-theme='dark'] .velu-pagenav__compact:hover svg {
+  color: #9ca3af;
+}
+
+.velu-pagenav__featured {
+  display: block;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.velu-pagenav__featured-inner {
+  display: flex;
+  align-items: center;
+  height: 64px;
+  border-radius: 12px;
+  background: var(--page-bg);
+  transition: box-shadow 0.12s ease;
+}
+
+.velu-pagenav__featured:hover .velu-pagenav__featured-inner {
+  /* Maple: hover:ring-1 hover:ring-gray-200 / dark:hover:ring-gray-800 */
+  box-shadow: 0 0 0 1px rgb(229 231 235);
+}
+
+[data-theme='dark'] .velu-pagenav__featured:hover .velu-pagenav__featured-inner {
+  box-shadow: 0 0 0 1px rgb(31 41 55);
+}
+
+.velu-pagenav__featured--next .velu-pagenav__featured-inner {
+  justify-content: flex-end;
+}
+
+.velu-pagenav__featured--prev .velu-pagenav__featured-inner {
+  justify-content: flex-start;
+}
+
+.velu-pagenav__meta {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  min-inline-size: 0;
+  padding-inline: 20px;
+}
+
+.velu-pagenav__featured--next .velu-pagenav__meta {
+  align-items: flex-end;
+  text-align: end;
+}
+
+.velu-pagenav__featured--prev .velu-pagenav__meta {
+  align-items: flex-start;
+  text-align: start;
+}
+
+.velu-pagenav--aalam .velu-pagenav__title {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  /* Maple: text-gray-800 / dark:text-gray-200 */
+  color: var(--thulir-heading, var(--text-color));
+}
+
+.velu-pagenav__desc {
+  display: none;
+  width: 100%;
+  max-inline-size: 18rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted-color);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
+
+@media (min-width: 1024px) {
+  .velu-pagenav__desc {
+    display: block;
+  }
+}
+
+.velu-pagenav__rule {
+  flex: none;
+  width: 1px;
+  height: 32px;
+  background: color-mix(in srgb, var(--muted-color) 14%, transparent);
+}
+
+[data-theme='dark'] .velu-pagenav__rule {
+  background: rgb(255 255 255 / 0.05);
+}
+
+.velu-pagenav--aalam .velu-pagenav__dir {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  color: var(--muted-color);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+.velu-pagenav__featured--next .velu-pagenav__dir {
+  padding: 0 12px 0 20px;
+}
+
+.velu-pagenav__featured--prev .velu-pagenav__dir {
+  padding: 0 20px 0 12px;
+}
+
+.velu-pagenav--aalam .velu-pagenav__dir svg {
+  flex: none;
+  color: #d1d5db;
+  transition: color 0.12s ease;
+}
+
+[data-theme='dark'] .velu-pagenav--aalam .velu-pagenav__dir svg {
+  color: #374151;
+}
+
+.velu-pagenav__featured:hover .velu-pagenav__dir span {
+  color: var(--thulir-heading, var(--text-color));
+}
+
+.velu-pagenav__featured:hover .velu-pagenav__dir svg {
+  color: #4b5563;
+}
+
+[data-theme='dark'] .velu-pagenav__featured:hover .velu-pagenav__dir svg {
+  color: #9ca3af;
+}