@veluai/velu 0.2.49 → 0.2.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.49",
+  "version": "0.2.50",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

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

@@ -34,7 +34,8 @@ import MethodBadge from './MethodBadge.jsx';
  *
  * @typedef {Object} ApiEndpoint
  * @property {string} method   HTTP method — drives the MethodBadge color
- * @property {string} label    endpoint display name
+ * @property {string} [label]  endpoint display name
+ * @property {string} [name]   alias for label (accepted for back-compat)
  * @property {string} [href]
  * @property {boolean} [active]
  *
@@ -56,7 +57,8 @@ function Icon({ icon }) {
 
 function Endpoint({ endpoint }) {
   const { activeHref, Link } = React.useContext(Ctx);
-  const { method, label, href = '#', active, icon } = endpoint;
+  const { method, label, name, href = '#', active, icon } = endpoint;
+  const title = label || name;
   const isActive = Boolean(
     active || (href != null && href === activeHref),
   );
@@ -74,7 +76,7 @@ function Endpoint({ endpoint }) {
         aria-current={isActive ? 'page' : undefined}
       >
         {method ? <MethodBadge method={method} /> : <Icon icon={icon} />}
-        <span className="velu-api-sidebar__label">{label}</span>
+        <span className="velu-api-sidebar__label">{title}</span>
       </Link>
     </li>
   );

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

@@ -611,12 +611,15 @@
   margin-block-start: var(--s2);
 }
 
-/* Endpoint row — method pill + name. */
+/* Endpoint row — method pill + name. Keep rows inside the scroll
+   content box so the active/hover tint never paints over the gutter. */
 .velu-api-sidebar__item {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 36px;
+  max-inline-size: 100%;
+  box-sizing: border-box;
   padding: 6px var(--s0);
   border-radius: 12px;
   color: var(--text-color);
@@ -637,7 +640,12 @@
   background: var(--method-cta);
 }
 .velu-api-sidebar__label {
+  flex: 1;
+  min-inline-size: 0;
   font: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Compact method pill — colored label on the method tint, not a filled

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

@@ -130,9 +130,12 @@
 .velu-docs-nav-scroll {
   flex: 1 1 auto;
   min-block-size: 0;
+  min-inline-size: 0;
   /* Always reserve the scrollbar gutter (see always-on track styles
      further below) instead of only appearing when content overflows. */
   overflow-y: scroll;
+  /* Keep active/hover row tints out of the scrollbar track. */
+  scrollbar-gutter: stable;
   /* Clear sticky section headings when scrolling the active item into view. */
   scroll-padding-block-start: 2.75rem;
 }

package/runtime/velu-ui/themes/nila.css

@@ -37,7 +37,7 @@
   [data-site-theme='nila'] .velu-docs-context:not(:has(.velu-docs-anchors)) { display: none !important; }
   [data-site-theme='nila'] .velu-header { height: 96px; }
   [data-site-theme='nila'] .velu-docs-layout__aside--left { left: 0; top: 96px; bottom: 0; width: 308px; padding: 16px 20px; border-right: 1px solid var(--border-color); }
-  [data-site-theme='nila'] .velu-sidebar { width: 268px; }
+  [data-site-theme='nila'] .velu-sidebar { width: 100%; max-inline-size: 100%; box-sizing: border-box; }
   [data-site-theme='nila'] .velu-docs-layout__center { margin-left: 308px; margin-right: 324px; }
   [data-site-theme='nila'] .velu-docs-layout__main { padding: 44px 32px 0; }
   [data-site-theme='nila'] .velu-docs-layout__article { max-inline-size: 632px; margin-inline: auto; }

package/runtime/velu-ui/themes/thulir.css

@@ -154,7 +154,7 @@
 [data-site-theme='thulir'] .velu-docs-nav-scroll::-webkit-scrollbar { display: none; }
 
 /* Navigation: 14/24 type, plain group labels, and a rounded active tint. */
-:is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-sidebar { margin: 0; width: 256px; }
+:is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-sidebar { margin: 0; width: 100%; max-inline-size: 100%; box-sizing: border-box; }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-sidebar__indicator { inset-inline-end: 0; border-radius: 12px; background: rgb(from var(--accent-color) r g b / 10%); }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-sidebar__indicator::before { display: none; }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) :is(.velu-sidebar__section,.velu-api-sidebar__section) {
@@ -177,7 +177,7 @@
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) :is(.velu-sidebar__item--active,.velu-api-sidebar__item--active) { color: var(--accent-color); font-weight: 600; border: 0; }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) :is(.velu-sidebar__list,.velu-api-sidebar__list) { gap: 0 !important; }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-sidebar > sidebar-group { gap: 0 !important; margin-bottom: 28px; }
-:is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-api-sidebar { margin: 0; border: 0; width: 256px; gap: 0 !important; }
+:is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-api-sidebar { margin: 0; border: 0; width: 100%; max-inline-size: 100%; box-sizing: border-box; gap: 0 !important; }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-api-sidebar__list + .velu-api-sidebar__section { margin-top: 28px; }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-api-sidebar__item--active { background: rgb(from var(--accent-color) r g b / 10%); }
 :is([data-site-theme='thulir'],[data-site-theme='aalam'],[data-site-theme='nila'],[data-site-theme='kadhir']) .velu-api-sidebar__item--active .velu-method-badge { color: #fff; background: var(--method-cta); }

package/src/runtime/App.jsx

@@ -111,8 +111,9 @@ function sectionToEndpoints(items) {
     else
       out.push({
         method: it.method,
-        name: it.label,
+        label: it.label,
         href: it.href,
+        icon: it.icon,
       });
   }
   return out;