@veluai/velu 0.2.34 → 0.2.36

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

@@ -110,10 +110,11 @@ export default function ApiClient({
         align="flex-start"
         className="velu-api-client__head"
       >
-        <div className="velu-api-client__op" ref={opRef}>
+        <option-dropdown class="velu-api-client__op" ref={opRef}>
           {canSwitch ? (
             <button
               type="button"
+              id="endpoints-menu-trigger"
               className="velu-api-client__op-btn"
               onClick={() => setMenuOpen((v) => !v)}
               aria-haspopup="listbox"
@@ -166,7 +167,7 @@ export default function ApiClient({
               ))}
             </ul>
           )}
-        </div>
+        </option-dropdown>
         <TryItBar
           method={method}
           path={path}
@@ -183,6 +184,7 @@ export default function ApiClient({
           visible without scrolling past the inputs; the form and code samples
           follow. See api.css. */}
       <div
+        id="api-playground-input"
         className="velu-api-client__body"
         data-has-response={response != null ? 'true' : undefined}
       >

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

@@ -80,14 +80,14 @@ export default function ApiReferencePage({ operation, samples = [], apiOperation
 
       {/* Authorizations */}
       {operation.auth?.length > 0 && (
-        <section className="velu-api-page__section">
-          <h2>Authorizations</h2>
+        <api-section class="velu-api-page__section">
+          <h2 data-component="api-section-heading">Authorizations</h2>
           {operation.auth.map((a, i) => (
             <Field key={i} name={a.name} pre={a.prefix} type={a.type} required={a.required} post={a.in}>
               {a.description}
             </Field>
           ))}
-        </section>
+        </api-section>
       )}
 
       {/* Parameters, by location */}
@@ -95,37 +95,37 @@ export default function ApiReferencePage({ operation, samples = [], apiOperation
         const rows = operation.parameters?.[loc] || [];
         if (!rows.length) return null;
         return (
-          <section key={loc} className="velu-api-page__section">
-            <h2>{LOCATION_LABEL[loc]}</h2>
+          <api-section key={loc} class="velu-api-page__section">
+            <h2 data-component="api-section-heading">{LOCATION_LABEL[loc]}</h2>
             {rows.map((p, i) => (
               <Field key={i} name={p.name} type={p.type} required={p.required}>
                 {p.description}
                 {p.enum && <EnumHint values={p.enum} />}
               </Field>
             ))}
-          </section>
+          </api-section>
         );
       })}
 
       {/* Request body */}
       {operation.body?.fields?.length > 0 && (
-        <section className="velu-api-page__section">
-          <h2>Body</h2>
+        <api-section class="velu-api-page__section">
+          <h2 data-component="api-section-heading">Body</h2>
           {operation.body.fields.map((f, i) => (
             <Field key={i} name={f.name} type={f.type} required={f.required}>
               {f.description}
               {f.enum && <EnumHint values={f.enum} />}
             </Field>
           ))}
-        </section>
+        </api-section>
       )}
 
       {/* Responses */}
       {operation.responses?.length > 0 && (
-        <section className="velu-api-page__section">
-          <h2>Response</h2>
+        <api-section class="velu-api-page__section">
+          <h2 data-component="api-section-heading">Response</h2>
           <ResponseSections responses={operation.responses} />
-        </section>
+        </api-section>
       )}
 
       {/* Try-It playground — rendered as an overlay above the page, with a

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

@@ -14,7 +14,7 @@ export default function ApiSamples({ samples = [], responses = [] }) {
   return (
     <div className="velu-api-samples">
       {samples.length > 0 && (
-        <CodeGroup className="velu-api-samples__req">
+        <CodeGroup id="request-example" className="velu-api-samples__req">
           {samples.map((s) => (
             <CodeBlock key={s.key} title={s.label} language={s.language}>
               {s.code}
@@ -23,7 +23,7 @@ export default function ApiSamples({ samples = [], responses = [] }) {
         </CodeGroup>
       )}
       {withExample.length > 0 && (
-        <CodeGroup className="velu-api-samples__res">
+        <CodeGroup id="response-example" className="velu-api-samples__res">
           {withExample.map((r) => (
             <CodeBlock key={r.status} title={r.status} language="json">
               {JSON.stringify(r.example, null, 2)}

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

@@ -48,7 +48,7 @@ export default function AskBar({
   const isEmpty = value.trim().length === 0;
 
   return (
-    <div className={`velu-ask-bar ${className}`.trim()} {...rest}>
+    <chat-assistant-floating-input class={`velu-ask-bar ${className}`.trim()} {...rest}>
       <textarea
         className="velu-ask-bar__input"
         placeholder={placeholder}
@@ -59,6 +59,7 @@ export default function AskBar({
       />
       <button
         type="button"
+        data-component="chat-assistant-send-button"
         className="velu-ask-bar__send"
         onClick={submit}
         disabled={isEmpty}
@@ -66,6 +67,6 @@ export default function AskBar({
       >
         {resolveIcon('arrow-up', { size: '1em' })}
       </button>
-    </div>
+    </chat-assistant-floating-input>
   );
 }

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

@@ -73,42 +73,27 @@ export default function Callout({
   // (.lucide rule in base.css), not set per-icon.
   const iconNode = resolveIcon(icon ?? v.icon, { size: '1em' });
 
+  // Static styles live in callout.css so a project's custom CSS can override
+  // them with a plain `callout { ... }` element selector (inline styles would
+  // beat any stylesheet). Only the per-instance colours are inline, as custom
+  // properties the stylesheet reads.
   return (
-    <div
-      className={className}
+    <callout
+      className={`velu-callout ${className}`.trim()}
+      data-type={type}
       style={{
-        display: 'flow-root', // contains the floated icon, no clipping
-        padding: 'var(--s0) var(--s3)',
-        background: bgColor,
-        border: `var(--border-width) solid ${strokeColor}`,
-        borderRadius: 'var(--radius-sm)',
-        color: 'var(--text-color)',
-        fontSize: 'var(--f-body)',
-        lineHeight: 'var(--lh-body)',
+        '--velu-callout-bg': bgColor,
+        '--velu-callout-stroke': strokeColor,
         ...style,
       }}
       {...rest}
     >
       {iconNode && (
-        <span
-          aria-hidden="true"
-          style={{
-            float: 'left',
-            display: 'inline-flex',
-            alignItems: 'center',
-            // one line-box tall (body font-size × body line-height token) so
-            // the icon is centered on the FIRST line; text wraps beside it
-            // then flows back under it (no hanging indent).
-            blockSize: 'calc(var(--f-body) * var(--lh-body))',
-            marginInlineEnd: 'var(--s-1)',
-            color: strokeColor,
-            fontSize: 'var(--f-body)',
-          }}
-        >
+        <span className="velu-callout__icon" aria-hidden="true">
           {iconNode}
         </span>
       )}
       {children}
-    </div>
+    </callout>
   );
 }

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

@@ -49,13 +49,13 @@ export function Card({
     .join(' ');
 
   const iconEl = icon ? (
-    <span className="velu-card__icon" aria-hidden="true">
+    <span className="velu-card__icon" data-component-part="card-icon" aria-hidden="true">
       {resolveIcon(icon, { size: '1em' })}
     </span>
   ) : null;
 
   const ctaEl = cta ? (
-    <a className="velu-card__cta" href={cta.href}>
+    <a className="velu-card__cta" data-component-part="card-cta" href={cta.href}>
       {cta.label}
       <span className="velu-card__cta-icon" aria-hidden="true">
         {resolveIcon('chevron-right', { size: '1em' })}
@@ -64,21 +64,21 @@ export function Card({
   ) : null;
 
   const titleEl = title ? (
-    <div className="velu-card__title">{title}</div>
+    <div className="velu-card__title" data-component-part="card-title">{title}</div>
   ) : null;
   const textEl = children ? (
-    <div className="velu-card__text">{children}</div>
+    <div className="velu-card__text" data-component-part="card-content">{children}</div>
   ) : null;
 
   return (
-    <div className={cls} {...rest}>
+    <card className={cls} {...rest}>
       {img && (
-        <div className="velu-card__media">
+        <div className="velu-card__media" data-component-part="card-image">
           <img src={img} alt={imgAlt} loading="lazy" />
         </div>
       )}
 
-      <div className="velu-card__body">
+      <div className="velu-card__body" data-component-part="card-content-container">
         {horizontal ? (
           <>
             {iconEl}
@@ -97,7 +97,7 @@ export function Card({
           </>
         )}
       </div>
-    </div>
+    </card>
   );
 }
 
@@ -117,6 +117,7 @@ export function CardGroup({
 }) {
   return (
     <Switcher
+      as="card-group"
       className={`velu-card-group ${className}`.trim()}
       space={space}
       min={min}

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

@@ -45,9 +45,10 @@ export default function ChangelogFilters({ tags = [] }) {
   };
 
   return (
-    <div className="velu-changelog-filters">
+    <div id="changelog-filters" className="velu-changelog-filters">
       <div className="velu-changelog-filters__heading">Filters</div>
       <div
+        id="changelog-filters-content"
         className="velu-changelog-filters__list"
         role="group"
         aria-label="Filter updates by tag"

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

@@ -339,6 +339,7 @@ function renderStream(tokens, sources, onNavigate) {
 function ChatHeader({ onClose, onNew, onHistory, historyOpen }) {
   return (
     <Cluster
+      as="chat-assistant-sheet-header"
       space="var(--s-2)"
       justify="space-between"
       align="center"
@@ -461,7 +462,7 @@ function Welcome({ onPick, suggestions }) {
           >
             <Cluster space="var(--s-2)" align="center">
               {resolveIcon(s.icon, { size: '1em' })}
-              <span>{s.label}</span>
+              <starter-question-text>{s.label}</starter-question-text>
             </Cluster>
             {resolveIcon('arrow-right', { size: '1em' })}
           </button>
@@ -616,6 +617,8 @@ function Composer({ value, onChange, onSubmit, disabled }) {
       <div className="velu-chatbot__input-wrap">
         <textarea
           ref={taRef}
+          id="chat-assistant-textarea"
+          data-component="chat-assistant-input"
           className="velu-chatbot__input"
           placeholder="Ask anything about the docs…"
           rows={1}
@@ -625,6 +628,7 @@ function Composer({ value, onChange, onSubmit, disabled }) {
         />
         <button
           type="button"
+          data-component="chat-assistant-send-button"
           className={`velu-chatbot__send${active ? ' is-active' : ''}`}
           onClick={onSubmit}
           disabled={!active}
@@ -633,9 +637,9 @@ function Composer({ value, onChange, onSubmit, disabled }) {
           {resolveIcon('arrow-up', { size: '1em' })}
         </button>
       </div>
-      <div className="velu-chatbot__foot">
+      <chat-assistant-disclaimer-text class="velu-chatbot__foot">
         <kbd>Enter</kbd> to send · <kbd>⇧ Enter</kbd> for newline
-      </div>
+      </chat-assistant-disclaimer-text>
     </div>
   );
 }
@@ -910,6 +914,8 @@ export default function Chatbot({
 
   return (
     <aside
+      id="chat-assistant-sheet"
+      data-component="chat-assistant-sheet"
       className={cls}
       aria-hidden={!open}
       aria-label="Ask AI"
@@ -944,7 +950,7 @@ export default function Chatbot({
         />
       )}
 
-      <div className="velu-chatbot__body" ref={bodyRef}>
+      <chat-assistant-sheet-content class="velu-chatbot__body" ref={bodyRef}>
         {messages.length === 0 ? (
           <Welcome onPick={(t) => send(t)} suggestions={suggestions} />
         ) : (
@@ -968,7 +974,7 @@ export default function Chatbot({
             )}
           </Stack>
         )}
-      </div>
+      </chat-assistant-sheet-content>
 
       <Composer
         value={input}

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

@@ -90,9 +90,9 @@ function TabLabel({ icon, label }) {
   return (
     <>
       {icon != null && (
-        <span className="velu-code-block__tab-icon" aria-hidden="true">
+        <code-block-icon class="velu-code-block__tab-icon" aria-hidden="true">
           {typeof icon === 'string' ? resolveIcon(icon, { size: '1em' }) : icon}
-        </span>
+        </code-block-icon>
       )}
       <span className="velu-code-block__tab-label">{label}</span>
     </>
@@ -143,6 +143,7 @@ function CopyButton({ code }) {
       type="button"
       onClick={copy}
       className="velu-code-block__copy"
+      data-component="code-block-copy-button"
       aria-label={copied ? 'Copied' : 'Copy code'}
       title={copied ? 'Copied' : 'Copy'}
     >
@@ -242,7 +243,7 @@ export function CodeBlock({
   const label = filename || title;
   const tabIcon = pickIcon({ icon, withIcon, language });
   return (
-    <div className={cls} {...rest}>
+    <code-block class={cls} {...rest}>
       {label && (
         <div className="velu-code-block__header">
           <Tab active icon={tabIcon} label={label} />
@@ -254,7 +255,7 @@ export function CodeBlock({
         lineNumbers={lineNumbers}
         highlight={highlight}
       />
-    </div>
+    </code-block>
   );
 }
 CodeBlock.displayName = 'CodeBlock';
@@ -340,7 +341,7 @@ export function CodeGroup({
   }
 
   return (
-    <div className={cls} {...rest}>
+    <code-group class={cls} {...rest}>
       <div className="velu-code-block__header">
         {canLeft && (
           <button
@@ -391,7 +392,7 @@ export function CodeGroup({
         lineNumbers={lineNumbers}
         highlight={highlight}
       />
-    </div>
+    </code-group>
   );
 }
 

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

@@ -44,6 +44,7 @@ export default function Columns({
 }) {
   return (
     <Switcher
+      as="columns"
       className={`velu-columns ${className}`.trim()}
       space={space}
       min={min}

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

@@ -256,11 +256,11 @@ export default function ContextMenu({
       className="velu-context-bar"
       data-pagefind-ignore=""
     >
-      {eyebrow ? <span className="velu-context-bar__eyebrow">{eyebrow}</span> : <span />}
+      {eyebrow ? <eyebrow className="velu-context-bar__eyebrow">{eyebrow}</eyebrow> : <span />}
 
       <div className="velu-context-bar__actions">
       {items.length > 0 && (
-        <div ref={rootRef} className="velu-context-menu" data-open={open ? 'true' : 'false'}>
+        <div ref={rootRef} id="page-context-menu" className="velu-context-menu" data-open={open ? 'true' : 'false'}>
           <div className="velu-context-menu__split">
             <button
               type="button"
@@ -275,6 +275,7 @@ export default function ContextMenu({
             </button>
             <button
               type="button"
+              id="page-context-menu-button"
               className="velu-context-menu__toggle"
               aria-haspopup="menu"
               aria-expanded={open}

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

@@ -46,7 +46,7 @@ export default function Field({
 }) {
   const hasDefault = defaultValue !== undefined && defaultValue !== null;
   return (
-    <div className={`velu-field ${className}`.trim()} {...rest}>
+    <field className={`velu-field ${className}`.trim()} {...rest}>
       {/* Cluster handles the wrap-friendly inline row layout — chips +
           name + type + required + default + post — with a 16px gap and
           baseline alignment so the bold name doesn't shift vertically
@@ -76,6 +76,6 @@ export default function Field({
       {children != null && children !== false && (
         <div className="velu-field__body">{children}</div>
       )}
-    </div>
+    </field>
   );
 }

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

@@ -40,6 +40,7 @@ export default function Icon({
         src={icon}
         alt={ariaLabel || ''}
         className={classes}
+        data-component="icon"
         style={sharedStyle}
         aria-hidden={ariaLabel ? undefined : true}
         {...rest}

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

@@ -149,14 +149,14 @@ export default function Image({
 
   if (caption) {
     return (
-      <figure className={cls} {...rest}>
+      <figure className={cls} data-component={chrome === 'frame' ? 'frame' : undefined} {...rest}>
         {body}
         <figcaption className="velu-image__caption">{caption}</figcaption>
       </figure>
     );
   }
   return (
-    <div className={cls} {...rest}>
+    <div className={cls} data-component={chrome === 'frame' ? 'frame' : undefined} {...rest}>
       {body}
     </div>
   );

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

@@ -24,8 +24,8 @@ export default function MethodBadge({
   const safe = METHODS.includes(key) ? key : 'get';
   const cls = `velu-method-badge velu-method-badge--${safe} ${className}`.trim();
   return (
-    <span className={cls} {...rest}>
+    <method-pill class={cls} {...rest}>
       {String(method).toUpperCase()}
-    </span>
+    </method-pill>
   );
 }

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

@@ -30,9 +30,16 @@ export default function NavSelect({
   bare = false,
   linkComponent = 'a',
   className = '',
+  // Mintlify-compatible hooks: id prefix for the trigger/menu
+  // (e.g. 'localization-select' → #localization-select-trigger /
+  // #localization-select-content / #localization-select-item) and the
+  // data-component family ('nav-dropdown' → nav-dropdown-trigger, …).
+  idPrefix,
+  component = 'nav-dropdown',
   ...rest
 }) {
   const Link = linkComponent;
+  const hookId = (suffix) => (idPrefix ? `${idPrefix}-${suffix}` : undefined);
   const [open, setOpen] = React.useState(false);
   const rootRef = React.useRef(null);
 
@@ -61,6 +68,8 @@ export default function NavSelect({
     >
       <button
         type="button"
+        id={hookId('trigger')}
+        data-component={`${component}-trigger`}
         className="velu-nav-select__btn"
         aria-haspopup="menu"
         aria-expanded={open}
@@ -82,23 +91,32 @@ export default function NavSelect({
           focusable="false"
         />
       </button>
-      <ul className="velu-nav-select__menu" role="menu" aria-hidden={!open}>
+      <ul
+        id={hookId('content')}
+        data-component={`${component}-content`}
+        className="velu-nav-select__menu"
+        role="menu"
+        aria-hidden={!open}
+      >
         {options.map((o, i) => (
           <li key={o.href ?? i} role="none">
             <Link
               role="menuitem"
+              id={i === 0 ? hookId('item') : undefined}
+              data-component={`${component}-item`}
+              data-active={o.active ? 'true' : undefined}
               className={`velu-nav-select__item${o.active ? ' velu-nav-select__item--active' : ''}`}
               href={o.href}
               tabIndex={open ? 0 : -1}
               onClick={() => setOpen(false)}
             >
               {o.icon && (
-                <span className="velu-nav-select__item-icon" aria-hidden="true">
+                <nav-dropdown-item-icon class="velu-nav-select__item-icon" aria-hidden="true">
                   {resolveIcon(o.icon, { size: '1em' })}
-                </span>
+                </nav-dropdown-item-icon>
               )}
               {o.code && <span className="velu-nav-select__code">{o.code}</span>}
-              <span>{o.label}</span>
+              <nav-dropdown-item-title>{o.label}</nav-dropdown-item-title>
             </Link>
           </li>
         ))}

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

@@ -27,15 +27,15 @@ export default function NotFound({
 }) {
   const Link = linkComponent;
   return (
-    <section className="velu-404">
+    <not-found-container class="velu-404">
       <p className="velu-404__eyebrow">{eyebrow}</p>
-      <div className="velu-404__num" aria-hidden="true">
+      <not-found-status-code class="velu-404__num" aria-hidden="true">
         404
-      </div>
-      <h1 className="velu-404__title">{title}</h1>
-      <p className="velu-404__body">{body}</p>
+      </not-found-status-code>
+      <h1 className="velu-404__title" data-component="not-found-title">{title}</h1>
+      <p className="velu-404__body" data-component="not-found-description">{body}</p>
       <div className="velu-404__actions">
-        <Link className="velu-404__btn velu-404__btn--primary" href={homeHref}>
+        <Link className="velu-404__btn velu-404__btn--primary" data-component="not-found-recommended-page-link" href={homeHref}>
           <span className="velu-404__btn-ic" aria-hidden="true">
             {resolveIcon('house', { size: '1em' })}
           </span>
@@ -58,6 +58,6 @@ export default function NotFound({
           </button>
         )}
       </div>
-    </section>
+    </not-found-container>
   );
 }

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

@@ -110,16 +110,19 @@ export default function PageFeedback({
 
   return (
     <Stack
+      as="contextual-feedback-container"
       space="var(--s0)"
       className={`velu-feedback ${className}`.trim()}
       {...rest}
     >
-      <Cluster space="var(--s0)" align="center" className="velu-feedback__bar">
+      <Cluster as="feedback-toolbar" space="var(--s0)" align="center" className="velu-feedback__bar">
         <span className="velu-feedback__question">{question}</span>
 
         <Cluster space="var(--s-2)" align="center">
           <button
             type="button"
+            id="feedback-thumbs-up"
+            data-component="contextual-feedback-button"
             className={`velu-feedback__btn${
               vote === 'yes' ? ' velu-feedback__btn--chosen' : ''
             }`}
@@ -132,6 +135,8 @@ export default function PageFeedback({
           </button>
           <button
             type="button"
+            id="feedback-thumbs-down"
+            data-component="contextual-feedback-button"
             className={`velu-feedback__btn${
               vote === 'no' ? ' velu-feedback__btn--chosen' : ''
             }`}
@@ -151,8 +156,8 @@ export default function PageFeedback({
       </Cluster>
 
       {showForm && (
-        <Stack space="var(--s1)" className="velu-feedback__form">
-          <h3 className="velu-feedback__form-title">
+        <Stack as="contextual-feedback-form" id="feedback-form" space="var(--s1)" className="velu-feedback__form">
+          <h3 className="velu-feedback__form-title" data-component="contextual-feedback-form-title">
             How can we improve our product?
           </h3>
 
@@ -176,6 +181,8 @@ export default function PageFeedback({
           </Stack>
 
           <textarea
+            id="feedback-form-input"
+            data-component="contextual-feedback-input"
             className="velu-feedback__detail"
             placeholder="(optional) Could you share more about your experience?"
             value={detail}
@@ -186,6 +193,7 @@ export default function PageFeedback({
           <Cluster space="var(--s-1)">
             <button
               type="button"
+              id="feedback-form-cancel"
               className="velu-feedback__action velu-feedback__action--cancel"
               onClick={cancel}
             >
@@ -193,6 +201,8 @@ export default function PageFeedback({
             </button>
             <button
               type="button"
+              id="feedback-form-submit"
+              data-component="contextual-feedback-form-submit-button"
               className="velu-feedback__action velu-feedback__action--submit"
               onClick={submit}
             >