@veluai/velu 0.2.13 → 0.2.15

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

@@ -1,635 +1,635 @@
-/* API documentation components — MethodBadge / ApiPath / TryItBar /
-   ApiClient. All values are tokens; light/dark via [data-theme].
-   Method colors come from --<method>-pill-color / -stroke-color /
-   -cta-color in base.css. */
-
-/* ── MethodBadge ────────────────────────────────────────────────────────── */
-/* 2px block / 8px inline padding — the pill hugs its label tightly so it
-   reads as a token, not a button. */
-.velu-method-badge {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 2px;
-  padding-inline: var(--s-3);
-  background: var(--method-pill, var(--surface-color));
-  border: var(--border-width) solid
-    var(--method-stroke, var(--border-color));
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  font-weight: var(--weight-medium);
-  /* Label stays in the theme's primary text color regardless of method
-     so the pill reads cleanly against any tint. */
-  color: var(--text-color);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.velu-method-badge--get {
-  --method-pill: var(--get-pill-color);
-  --method-stroke: var(--get-pill-stroke-color);
-  --method-cta: var(--get-cta-color);
-}
-.velu-method-badge--post {
-  --method-pill: var(--post-pill-color);
-  --method-stroke: var(--post-pill-stroke-color);
-  --method-cta: var(--post-cta-color);
-}
-.velu-method-badge--put {
-  --method-pill: var(--put-pill-color);
-  --method-stroke: var(--put-pill-stroke-color);
-  --method-cta: var(--put-cta-color);
-}
-.velu-method-badge--patch {
-  --method-pill: var(--patch-pill-color);
-  --method-stroke: var(--patch-pill-stroke-color);
-  --method-cta: var(--patch-cta-color);
-}
-.velu-method-badge--delete {
-  --method-pill: var(--delete-pill-color);
-  --method-stroke: var(--delete-pill-stroke-color);
-  --method-cta: var(--delete-cta-color);
-}
-
-/* ── ApiPath ───────────────────────────────────────────────────────────── */
-/* Layout (inline-flex + wrap + gap) is provided by <Cluster>; this rule
-   only owns typography. min-inline-size:0 lets ApiPath shrink below
-   its content's min-content width so its own internal Cluster wrap
-   actually kicks in (default flex min-width is auto = content). */
-.velu-api-path {
-  min-inline-size: 0;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--text-color);
-}
-/* Hardcoded chunks stay together at the segment boundary but can
-   break mid-text when there's no other choice (very narrow container)
-   so they never overflow horizontally. */
-.velu-api-path__segment {
-  overflow-wrap: anywhere;
-}
-.velu-api-path__param {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 2px;
-  padding-inline: var(--s-3);
-  background: var(--method-pill, var(--surface-color));
-  border: var(--border-width) solid
-    var(--method-stroke, var(--border-color));
-  border-radius: var(--radius-sm);
-  color: var(--text-color);
-}
-.velu-api-path__param--get {
-  --method-pill: var(--get-pill-color);
-  --method-stroke: var(--get-pill-stroke-color);
-  --method-cta: var(--get-cta-color);
-}
-.velu-api-path__param--post {
-  --method-pill: var(--post-pill-color);
-  --method-stroke: var(--post-pill-stroke-color);
-  --method-cta: var(--post-cta-color);
-}
-.velu-api-path__param--put {
-  --method-pill: var(--put-pill-color);
-  --method-stroke: var(--put-pill-stroke-color);
-  --method-cta: var(--put-cta-color);
-}
-.velu-api-path__param--patch {
-  --method-pill: var(--patch-pill-color);
-  --method-stroke: var(--patch-pill-stroke-color);
-  --method-cta: var(--patch-cta-color);
-}
-.velu-api-path__param--delete {
-  --method-pill: var(--delete-pill-color);
-  --method-stroke: var(--delete-pill-stroke-color);
-  --method-cta: var(--delete-cta-color);
-}
-
-/* ── TryItBar ──────────────────────────────────────────────────────────── */
-/* Radius chain — the Try It BUTTON is the fixed basis (--radius-sm):
-     button  --radius-sm                 (8px)   ← basis, never changes
-     outer   calc(--radius-sm + --s-3)    (16px)  = button + --s-3
-     inner   --radius-sm                  (8px)   = outer  - --s-3
-     pill    --radius-sm                  (8px)   ← keeps its own corner
-   outer↔button and outer↔inner are strictly concentric (one --s-3 step
-   apart). The pill keeps --radius-sm so it stays visibly rounded — a
-   strict pill↔inner concentric would force it to 0 (8 - 8).
-
-   Layout (flex-wrap + gap + justify/align) is provided by <Cluster>;
-   this rule only owns the chrome (padding / border / radius / bg).
-
-   --try-it-row-min: the inner row's minimum width (see __row below).
-   ch-based so it scales with the monospace endpoint text; override
-   per-instance if a longer/shorter endpoint needs a different floor. */
-.velu-try-it {
-  --try-it-row-min: 24ch;
-  padding: var(--s-3);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: calc(var(--radius-sm) + var(--s-3));
-  background: var(--page-bg);
-}
-/* Inner bordered row — flex, items aligned to the top so the copy
-   button stays pinned up even when the endpoint group wraps onto
-   multiple lines.
-   min-inline-size gives the row a real floor (--try-it-row-min, capped
-   at 100% so it never overflows a tiny container). Once row + Try It
-   button can't both fit, the outer Cluster wraps the button to the
-   next line — without the floor the row would just shrink forever and
-   the button would never drop. */
-.velu-try-it__row {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--s-1);
-  padding: var(--s-3);
-  border: var(--border-width) solid var(--border-color);
-  /* = outer (calc(--radius-sm + --s-3)) - --s-3 padding = --radius-sm */
-  border-radius: var(--radius-sm);
-  flex: 1;
-  min-inline-size: min(var(--try-it-row-min, 24ch), 100%);
-  background: var(--page-bg);
-}
-/* Method pill + path — wraps internally (Cluster), fills the row minus
-   the copy button. */
-.velu-try-it__endpoint {
-  flex: 1;
-  min-inline-size: 0;
-}
-.velu-try-it__copy {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.75em;
-  block-size: 1.75em;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  color: var(--muted-color);
-  cursor: pointer;
-  /* Non-shrinking; pinned to the top of the row so it stays on the
-     first line when the endpoint group wraps below. */
-  flex: none;
-  align-self: flex-start;
-}
-.velu-try-it__copy:hover {
-  color: var(--text-color);
-}
-.velu-try-it__cta {
-  position: relative;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding-block: var(--s-3);
-  padding-inline: var(--s0);
-  background: var(--method-cta, var(--accent-color));
-  border: 0;
-  /* The fixed basis of the concentric chain — never changes. */
-  border-radius: var(--radius-sm);
-  color: #fff;
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  line-height: var(--lh-h6);
-  cursor: pointer;
-}
-.velu-try-it__cta:hover {
-  background: color-mix(in srgb, var(--method-cta, var(--accent-color)) 88%, #000);
-}
-.velu-try-it__cta:disabled {
-  cursor: default;
-}
-
-/* Label (text + chevron) and the loading spinner are two stacked layers
-   that swap with a vertical slide: when loading, the label slides DOWN and
-   out the bottom while the spinner slides IN from the top. overflow:hidden
-   on the button clips the off-screen states. The label stays in normal flow
-   so it fixes the button's width; the spinner overlays it. */
-.velu-try-it__cta-label {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-2);
-  transition: transform 0.22s ease, opacity 0.18s ease;
-}
-.velu-try-it__cta-spinner {
-  position: absolute;
-  inset: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(-110%);
-  opacity: 0;
-  transition: transform 0.22s ease, opacity 0.18s ease;
-}
-.velu-try-it__cta[data-loading='true'] .velu-try-it__cta-label {
-  transform: translateY(120%);
-  opacity: 0;
-}
-.velu-try-it__cta[data-loading='true'] .velu-try-it__cta-spinner {
-  transform: translateY(0);
-  opacity: 1;
-}
-.velu-try-it__cta-spinner svg {
-  animation: velu-cta-spin 0.7s linear infinite;
-}
-@keyframes velu-cta-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .velu-try-it__cta-label,
-  .velu-try-it__cta-spinner {
-    transition-duration: 0.01ms;
-  }
-  .velu-try-it__cta-spinner svg {
-    animation-duration: 1.4s;
-  }
-}
-.velu-try-it--get   { --method-cta: var(--get-cta-color); }
-.velu-try-it--post  { --method-cta: var(--post-cta-color); }
-.velu-try-it--put   { --method-cta: var(--put-cta-color); }
-.velu-try-it--patch { --method-cta: var(--patch-cta-color); }
-.velu-try-it--delete{ --method-cta: var(--delete-cta-color); }
-
-/* ── ApiClient ─────────────────────────────────────────────────────────── */
-/* max-inline-size: 100% + min-inline-size: 0 keep the client contained
-   when it's a flex/grid child (e.g. rendered inside a production
-   modal) — without min-inline-size:0 a flex item's default
-   `min-width: auto` lets wide content bleed past the container. */
-.velu-api-client {
-  position: relative;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  background: var(--page-bg);
-  overflow: hidden;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  /* Own query container so the body grid reflows to the client's width
-     (it lives in a modal, outside the docs layout container). */
-  container: api-client / inline-size;
-}
-
-/* Modal close button — sits in its own row at the top of the client,
-   X aligned to the inline-end. */
-.velu-api-client__close-row {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--s-3) var(--s-3) 0;
-}
-.velu-api-client__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1.75em;
-  block-size: 1.75em;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--muted-color);
-  cursor: pointer;
-}
-.velu-api-client__close:hover {
-  color: var(--text-color);
-  background: var(--surface-color);
-}
-
-/* base.css applies a global `* { max-width: var(--measure) }` (66ch
-   text-measure cap). Inside ApiClient that would pin the non-excluded
-   structural elements — <details>, <table>, <h3>, <p>, <summary> — to
-   66ch, making the whole client look fixed-width even in a wide modal.
-   Reset it: every element here manages its own width via flex +
-   wrapping, so the client fills whatever container it's given. */
-.velu-api-client * {
-  max-inline-size: none;
-}
-
-/* Head row: operation dropdown + TryItBar. Layout (flex-wrap + gap +
-   align) is provided by <Cluster>; this rule only owns the padding
-   that insets both children from the ApiClient frame. */
-.velu-api-client__head {
-  padding: var(--s-3);
-}
-
-/* Operation dropdown — same shape as TryItBar's inner row so the two
-   read as a matched pair. flex: none → hugs its text (natural width
-   AND natural height; the Cluster's align: flex-start keeps it from
-   stretching to the taller TryItBar's height). */
-.velu-api-client__op {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  padding: var(--s-3);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  background: var(--page-bg);
-  color: var(--text-color);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  flex: none;
-}
-/* The clickable trigger when the operation is switchable — a bare button
-   that keeps the same layout as the static row. */
-.velu-api-client__op-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-2);
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-}
-.velu-api-client__op-label {
-  font-weight: var(--weight-medium);
-}
-.velu-api-client__op-chevron {
-  display: inline-flex;
-  align-items: center;
-  color: var(--muted-color);
-  transition: transform 0.15s ease;
-}
-.velu-api-client__op-btn[aria-expanded='true'] .velu-api-client__op-chevron {
-  transform: rotate(180deg);
-}
-
-/* Operation switcher menu — lists every operation in the tab. */
-.velu-api-client__op-menu {
-  position: absolute;
-  inset-block-start: calc(100% + var(--s-3));
-  inset-inline-start: 0;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin: 0;
-  padding: var(--s-3);
-  list-style: none;
-  min-inline-size: 16rem;
-  max-block-size: 18rem;
-  overflow-y: auto;
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4);
-}
-.velu-api-client__op-item {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  inline-size: 100%;
-  padding: var(--s-3) var(--s-2);
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--text-color);
-  font: inherit;
-  font-size: var(--f-h6);
-  text-align: start;
-  cursor: pointer;
-}
-.velu-api-client__op-item:hover,
-.velu-api-client__op-item--active {
-  background: var(--surface-color);
-}
-.velu-api-client__op-item-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Inside ApiClient the outer frame already supplies the box — strip
-   the TryItBar's own outer border / radius / padding (the head's
-   padding wraps both children). flex: 1 fills the head beside the
-   natural-width dropdown; the min-width floor makes Cluster wrap the
-   bar below the dropdown once it can't keep that width. */
-.velu-api-client__bar {
-  flex: 1;
-  min-inline-size: min(var(--try-it-row-min, 24ch), 100%);
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  background: transparent;
-}
-
-/* Body grid with named areas so the three slots — form / live response /
-   code samples — can be placed AND reordered independently.
-   Wide (the client is its own query container, set on .velu-api-client):
-     form fills the left column; response sits top-right with the samples
-     below it. When there's no response yet, the samples take the whole right
-     column.
-   Narrow (single column): the live response moves ABOVE the form so a Send
-   result is visible without scrolling past the inputs; form then samples
-   follow. */
-.velu-api-client__body {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  grid-template-areas: 'form aside';
-  align-items: start;
-  gap: var(--s2);
-  padding: var(--s2);
-}
-.velu-api-client__body[data-has-response='true'] {
-  grid-template-areas:
-    'form response'
-    'form aside';
-}
-.velu-api-client__left {
-  grid-area: form;
-}
-.velu-api-client__response {
-  grid-area: response;
-}
-.velu-api-client__right {
-  grid-area: aside;
-}
-.velu-api-client__left,
-.velu-api-client__right,
-.velu-api-client__response {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s1);
-  min-inline-size: 0;
-}
-
-@container api-client (max-width: 40rem) {
-  .velu-api-client__body,
-  .velu-api-client__body[data-has-response='true'] {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      'form'
-      'aside';
-  }
-  .velu-api-client__body[data-has-response='true'] {
-    grid-template-areas:
-      'response'
-      'form'
-      'aside';
-  }
-}
-
-.velu-api-client__title {
-  margin: 0;
-  font-size: var(--f-h3);
-  line-height: var(--lh-h3);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-.velu-api-client__description {
-  margin: 0;
-  color: var(--text-color);
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-}
-
-/* ── ApiField (input-bearing field inside an Accordion section) ─────────── */
-/* flex-wrap pair: info column (label + description) and the control
-   column (input). Wraps to stacked on narrow widths — no media query. */
-.velu-api-field {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--s0);
-  align-items: flex-start;
-}
-.velu-api-field__info {
-  flex: 1 1 16ch;
-  min-inline-size: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-2);
-}
-.velu-api-field__name {
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h5);
-  line-height: var(--lh-h5);
-  font-weight: var(--weight-medium);
-  color: var(--accent-color);
-}
-/* Chip + required pill — same recipe as Field's, kept local so ApiField
-   doesn't depend on field.css. */
-.velu-api-field__chip {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 0;
-  padding-inline: var(--s-3);
-  background: var(--surface-color);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--muted-color);
-}
-.velu-api-field__required {
-  display: inline-flex;
-  align-items: center;
-  padding-block: 0;
-  padding-inline: var(--s-3);
-  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  color: var(--accent-color);
-}
-.velu-api-field__desc {
-  color: var(--text-color);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-}
-
-/* Control column — the actual <input>, optionally with a static prefix
-   (e.g. "Bearer"). The whole thing reads as one bordered field. */
-.velu-api-field__control {
-  flex: 1 1 16ch;
-  min-inline-size: 0;
-  display: flex;
-  align-items: center;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: var(--page-bg);
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-}
-.velu-api-field__control:focus-within {
-  border-color: var(--text-color);
-}
-.velu-api-field__prefix {
-  flex: none;
-  padding-inline: var(--s-2);
-  color: var(--muted-color);
-}
-.velu-api-field__input {
-  flex: 1;
-  min-inline-size: 0;
-  padding-block: var(--s-3);
-  padding-inline: var(--s-2);
-  background: transparent;
-  border: 0;
-  font: inherit;
-  color: var(--text-color);
-}
-.velu-api-field__input::placeholder {
-  color: var(--muted-color);
-}
-.velu-api-field__input:focus {
-  outline: none;
-}
-
-/* ── ApiSidebar ────────────────────────────────────────────────────────── */
-/* Vertical rhythm is the Stack primitive (set inline by ApiSidebar.jsx);
-   this block holds only the rail, group header, row layout, active
-   state, and icon sizing — same split as sidebar.css. */
-.velu-api-sidebar {
-  border-inline-start: var(--border-width) solid var(--border-color);
-  margin-inline-start: var(--s1);
-}
-
-.velu-api-sidebar__section {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  padding-inline: var(--s-3);
-  inline-size: fit-content;
-  font-weight: var(--weight-medium);
-  text-transform: uppercase;
-}
-
-.velu-api-sidebar__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Endpoint row — method pill + name. align-items: flex-start so the
-   pill stays on the first line when a long name wraps. */
-.velu-api-sidebar__item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--s-2);
-  padding-inline: var(--s0);
-  color: var(--text-color);
-  text-decoration: none;
-}
-.velu-api-sidebar__item--active {
-  color: var(--accent-color);
-  border-inline-start: 2px solid var(--accent-color);
-}
-.velu-api-sidebar__label {
-  font-size: var(--f-body);
-  line-height: var(--lh-h6);
-}
-
-.velu-api-sidebar__icon {
-  display: inline-flex;
-  flex: none;
-  inline-size: var(--f-body);
-  block-size: var(--f-body);
-}
-.velu-api-sidebar__icon svg {
-  inline-size: 100%;
-  block-size: 100%;
-}
+/* API documentation components — MethodBadge / ApiPath / TryItBar /
+   ApiClient. All values are tokens; light/dark via [data-theme].
+   Method colors come from --<method>-pill-color / -stroke-color /
+   -cta-color in base.css. */
+
+/* ── MethodBadge ────────────────────────────────────────────────────────── */
+/* 2px block / 8px inline padding — the pill hugs its label tightly so it
+   reads as a token, not a button. */
+.velu-method-badge {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 2px;
+  padding-inline: var(--s-3);
+  background: var(--method-pill, var(--surface-color));
+  border: var(--border-width) solid
+    var(--method-stroke, var(--border-color));
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  font-weight: var(--weight-medium);
+  /* Label stays in the theme's primary text color regardless of method
+     so the pill reads cleanly against any tint. */
+  color: var(--text-color);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.velu-method-badge--get {
+  --method-pill: var(--get-pill-color);
+  --method-stroke: var(--get-pill-stroke-color);
+  --method-cta: var(--get-cta-color);
+}
+.velu-method-badge--post {
+  --method-pill: var(--post-pill-color);
+  --method-stroke: var(--post-pill-stroke-color);
+  --method-cta: var(--post-cta-color);
+}
+.velu-method-badge--put {
+  --method-pill: var(--put-pill-color);
+  --method-stroke: var(--put-pill-stroke-color);
+  --method-cta: var(--put-cta-color);
+}
+.velu-method-badge--patch {
+  --method-pill: var(--patch-pill-color);
+  --method-stroke: var(--patch-pill-stroke-color);
+  --method-cta: var(--patch-cta-color);
+}
+.velu-method-badge--delete {
+  --method-pill: var(--delete-pill-color);
+  --method-stroke: var(--delete-pill-stroke-color);
+  --method-cta: var(--delete-cta-color);
+}
+
+/* ── ApiPath ───────────────────────────────────────────────────────────── */
+/* Layout (inline-flex + wrap + gap) is provided by <Cluster>; this rule
+   only owns typography. min-inline-size:0 lets ApiPath shrink below
+   its content's min-content width so its own internal Cluster wrap
+   actually kicks in (default flex min-width is auto = content). */
+.velu-api-path {
+  min-inline-size: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--text-color);
+}
+/* Hardcoded chunks stay together at the segment boundary but can
+   break mid-text when there's no other choice (very narrow container)
+   so they never overflow horizontally. */
+.velu-api-path__segment {
+  overflow-wrap: anywhere;
+}
+.velu-api-path__param {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 2px;
+  padding-inline: var(--s-3);
+  background: var(--method-pill, var(--surface-color));
+  border: var(--border-width) solid
+    var(--method-stroke, var(--border-color));
+  border-radius: var(--radius-sm);
+  color: var(--text-color);
+}
+.velu-api-path__param--get {
+  --method-pill: var(--get-pill-color);
+  --method-stroke: var(--get-pill-stroke-color);
+  --method-cta: var(--get-cta-color);
+}
+.velu-api-path__param--post {
+  --method-pill: var(--post-pill-color);
+  --method-stroke: var(--post-pill-stroke-color);
+  --method-cta: var(--post-cta-color);
+}
+.velu-api-path__param--put {
+  --method-pill: var(--put-pill-color);
+  --method-stroke: var(--put-pill-stroke-color);
+  --method-cta: var(--put-cta-color);
+}
+.velu-api-path__param--patch {
+  --method-pill: var(--patch-pill-color);
+  --method-stroke: var(--patch-pill-stroke-color);
+  --method-cta: var(--patch-cta-color);
+}
+.velu-api-path__param--delete {
+  --method-pill: var(--delete-pill-color);
+  --method-stroke: var(--delete-pill-stroke-color);
+  --method-cta: var(--delete-cta-color);
+}
+
+/* ── TryItBar ──────────────────────────────────────────────────────────── */
+/* Radius chain — the Try It BUTTON is the fixed basis (--radius-sm):
+     button  --radius-sm                 (8px)   ← basis, never changes
+     outer   calc(--radius-sm + --s-3)    (16px)  = button + --s-3
+     inner   --radius-sm                  (8px)   = outer  - --s-3
+     pill    --radius-sm                  (8px)   ← keeps its own corner
+   outer↔button and outer↔inner are strictly concentric (one --s-3 step
+   apart). The pill keeps --radius-sm so it stays visibly rounded — a
+   strict pill↔inner concentric would force it to 0 (8 - 8).
+
+   Layout (flex-wrap + gap + justify/align) is provided by <Cluster>;
+   this rule only owns the chrome (padding / border / radius / bg).
+
+   --try-it-row-min: the inner row's minimum width (see __row below).
+   ch-based so it scales with the monospace endpoint text; override
+   per-instance if a longer/shorter endpoint needs a different floor. */
+.velu-try-it {
+  --try-it-row-min: 24ch;
+  padding: var(--s-3);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: calc(var(--radius-sm) + var(--s-3));
+  background: var(--page-bg);
+}
+/* Inner bordered row — flex, items aligned to the top so the copy
+   button stays pinned up even when the endpoint group wraps onto
+   multiple lines.
+   min-inline-size gives the row a real floor (--try-it-row-min, capped
+   at 100% so it never overflows a tiny container). Once row + Try It
+   button can't both fit, the outer Cluster wraps the button to the
+   next line — without the floor the row would just shrink forever and
+   the button would never drop. */
+.velu-try-it__row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-1);
+  padding: var(--s-3);
+  border: var(--border-width) solid var(--border-color);
+  /* = outer (calc(--radius-sm + --s-3)) - --s-3 padding = --radius-sm */
+  border-radius: var(--radius-sm);
+  flex: 1;
+  min-inline-size: min(var(--try-it-row-min, 24ch), 100%);
+  background: var(--page-bg);
+}
+/* Method pill + path — wraps internally (Cluster), fills the row minus
+   the copy button. */
+.velu-try-it__endpoint {
+  flex: 1;
+  min-inline-size: 0;
+}
+.velu-try-it__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--muted-color);
+  cursor: pointer;
+  /* Non-shrinking; pinned to the top of the row so it stays on the
+     first line when the endpoint group wraps below. */
+  flex: none;
+  align-self: flex-start;
+}
+.velu-try-it__copy:hover {
+  color: var(--text-color);
+}
+.velu-try-it__cta {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--s-3);
+  padding-inline: var(--s0);
+  background: var(--method-cta, var(--accent-color));
+  border: 0;
+  /* The fixed basis of the concentric chain — never changes. */
+  border-radius: var(--radius-sm);
+  color: #fff;
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  line-height: var(--lh-h6);
+  cursor: pointer;
+}
+.velu-try-it__cta:hover {
+  background: color-mix(in srgb, var(--method-cta, var(--accent-color)) 88%, #000);
+}
+.velu-try-it__cta:disabled {
+  cursor: default;
+}
+
+/* Label (text + chevron) and the loading spinner are two stacked layers
+   that swap with a vertical slide: when loading, the label slides DOWN and
+   out the bottom while the spinner slides IN from the top. overflow:hidden
+   on the button clips the off-screen states. The label stays in normal flow
+   so it fixes the button's width; the spinner overlays it. */
+.velu-try-it__cta-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  transition: transform 0.22s ease, opacity 0.18s ease;
+}
+.velu-try-it__cta-spinner {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-110%);
+  opacity: 0;
+  transition: transform 0.22s ease, opacity 0.18s ease;
+}
+.velu-try-it__cta[data-loading='true'] .velu-try-it__cta-label {
+  transform: translateY(120%);
+  opacity: 0;
+}
+.velu-try-it__cta[data-loading='true'] .velu-try-it__cta-spinner {
+  transform: translateY(0);
+  opacity: 1;
+}
+.velu-try-it__cta-spinner svg {
+  animation: velu-cta-spin 0.7s linear infinite;
+}
+@keyframes velu-cta-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .velu-try-it__cta-label,
+  .velu-try-it__cta-spinner {
+    transition-duration: 0.01ms;
+  }
+  .velu-try-it__cta-spinner svg {
+    animation-duration: 1.4s;
+  }
+}
+.velu-try-it--get   { --method-cta: var(--get-cta-color); }
+.velu-try-it--post  { --method-cta: var(--post-cta-color); }
+.velu-try-it--put   { --method-cta: var(--put-cta-color); }
+.velu-try-it--patch { --method-cta: var(--patch-cta-color); }
+.velu-try-it--delete{ --method-cta: var(--delete-cta-color); }
+
+/* ── ApiClient ─────────────────────────────────────────────────────────── */
+/* max-inline-size: 100% + min-inline-size: 0 keep the client contained
+   when it's a flex/grid child (e.g. rendered inside a production
+   modal) — without min-inline-size:0 a flex item's default
+   `min-width: auto` lets wide content bleed past the container. */
+.velu-api-client {
+  position: relative;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--page-bg);
+  overflow: hidden;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  /* Own query container so the body grid reflows to the client's width
+     (it lives in a modal, outside the docs layout container). */
+  container: api-client / inline-size;
+}
+
+/* Modal close button — sits in its own row at the top of the client,
+   X aligned to the inline-end. */
+.velu-api-client__close-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--s-3) var(--s-3) 0;
+}
+.velu-api-client__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75em;
+  block-size: 1.75em;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--muted-color);
+  cursor: pointer;
+}
+.velu-api-client__close:hover {
+  color: var(--text-color);
+  background: var(--surface-color);
+}
+
+/* base.css applies a global `* { max-width: var(--measure) }` (66ch
+   text-measure cap). Inside ApiClient that would pin the non-excluded
+   structural elements — <details>, <table>, <h3>, <p>, <summary> — to
+   66ch, making the whole client look fixed-width even in a wide modal.
+   Reset it: every element here manages its own width via flex +
+   wrapping, so the client fills whatever container it's given. */
+.velu-api-client * {
+  max-inline-size: none;
+}
+
+/* Head row: operation dropdown + TryItBar. Layout (flex-wrap + gap +
+   align) is provided by <Cluster>; this rule only owns the padding
+   that insets both children from the ApiClient frame. */
+.velu-api-client__head {
+  padding: var(--s-3);
+}
+
+/* Operation dropdown — same shape as TryItBar's inner row so the two
+   read as a matched pair. flex: none → hugs its text (natural width
+   AND natural height; the Cluster's align: flex-start keeps it from
+   stretching to the taller TryItBar's height). */
+.velu-api-client__op {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-3);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--page-bg);
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  flex: none;
+}
+/* The clickable trigger when the operation is switchable — a bare button
+   that keeps the same layout as the static row. */
+.velu-api-client__op-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.velu-api-client__op-label {
+  font-weight: var(--weight-medium);
+}
+.velu-api-client__op-chevron {
+  display: inline-flex;
+  align-items: center;
+  color: var(--muted-color);
+  transition: transform 0.15s ease;
+}
+.velu-api-client__op-btn[aria-expanded='true'] .velu-api-client__op-chevron {
+  transform: rotate(180deg);
+}
+
+/* Operation switcher menu — lists every operation in the tab. */
+.velu-api-client__op-menu {
+  position: absolute;
+  inset-block-start: calc(100% + var(--s-3));
+  inset-inline-start: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: var(--s-3);
+  list-style: none;
+  min-inline-size: 16rem;
+  max-block-size: 18rem;
+  overflow-y: auto;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.4);
+}
+.velu-api-client__op-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  inline-size: 100%;
+  padding: var(--s-3) var(--s-2);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-color);
+  font: inherit;
+  font-size: var(--f-h6);
+  text-align: start;
+  cursor: pointer;
+}
+.velu-api-client__op-item:hover,
+.velu-api-client__op-item--active {
+  background: var(--surface-color);
+}
+.velu-api-client__op-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Inside ApiClient the outer frame already supplies the box — strip
+   the TryItBar's own outer border / radius / padding (the head's
+   padding wraps both children). flex: 1 fills the head beside the
+   natural-width dropdown; the min-width floor makes Cluster wrap the
+   bar below the dropdown once it can't keep that width. */
+.velu-api-client__bar {
+  flex: 1;
+  min-inline-size: min(var(--try-it-row-min, 24ch), 100%);
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+}
+
+/* Body grid with named areas so the three slots — form / live response /
+   code samples — can be placed AND reordered independently.
+   Wide (the client is its own query container, set on .velu-api-client):
+     form fills the left column; response sits top-right with the samples
+     below it. When there's no response yet, the samples take the whole right
+     column.
+   Narrow (single column): the live response moves ABOVE the form so a Send
+   result is visible without scrolling past the inputs; form then samples
+   follow. */
+.velu-api-client__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas: 'form aside';
+  align-items: start;
+  gap: var(--s2);
+  padding: var(--s2);
+}
+.velu-api-client__body[data-has-response='true'] {
+  grid-template-areas:
+    'form response'
+    'form aside';
+}
+.velu-api-client__left {
+  grid-area: form;
+}
+.velu-api-client__response {
+  grid-area: response;
+}
+.velu-api-client__right {
+  grid-area: aside;
+}
+.velu-api-client__left,
+.velu-api-client__right,
+.velu-api-client__response {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  min-inline-size: 0;
+}
+
+@container api-client (max-width: 40rem) {
+  .velu-api-client__body,
+  .velu-api-client__body[data-has-response='true'] {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'form'
+      'aside';
+  }
+  .velu-api-client__body[data-has-response='true'] {
+    grid-template-areas:
+      'response'
+      'form'
+      'aside';
+  }
+}
+
+.velu-api-client__title {
+  margin: 0;
+  font-size: var(--f-h3);
+  line-height: var(--lh-h3);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-api-client__description {
+  margin: 0;
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}
+
+/* ── ApiField (input-bearing field inside an Accordion section) ─────────── */
+/* flex-wrap pair: info column (label + description) and the control
+   column (input). Wraps to stacked on narrow widths — no media query. */
+.velu-api-field {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s0);
+  align-items: flex-start;
+}
+.velu-api-field__info {
+  flex: 1 1 16ch;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+.velu-api-field__name {
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h5);
+  line-height: var(--lh-h5);
+  font-weight: var(--weight-medium);
+  color: var(--accent-color);
+}
+/* Chip + required pill — same recipe as Field's, kept local so ApiField
+   doesn't depend on field.css. */
+.velu-api-field__chip {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--s-3);
+  background: var(--surface-color);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--muted-color);
+}
+.velu-api-field__required {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0;
+  padding-inline: var(--s-3);
+  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  color: var(--accent-color);
+}
+.velu-api-field__desc {
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+}
+
+/* Control column — the actual <input>, optionally with a static prefix
+   (e.g. "Bearer"). The whole thing reads as one bordered field. */
+.velu-api-field__control {
+  flex: 1 1 16ch;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--page-bg);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+}
+.velu-api-field__control:focus-within {
+  border-color: var(--text-color);
+}
+.velu-api-field__prefix {
+  flex: none;
+  padding-inline: var(--s-2);
+  color: var(--muted-color);
+}
+.velu-api-field__input {
+  flex: 1;
+  min-inline-size: 0;
+  padding-block: var(--s-3);
+  padding-inline: var(--s-2);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: var(--text-color);
+}
+.velu-api-field__input::placeholder {
+  color: var(--muted-color);
+}
+.velu-api-field__input:focus {
+  outline: none;
+}
+
+/* ── ApiSidebar ────────────────────────────────────────────────────────── */
+/* Vertical rhythm is the Stack primitive (set inline by ApiSidebar.jsx);
+   this block holds only the rail, group header, row layout, active
+   state, and icon sizing — same split as sidebar.css. */
+.velu-api-sidebar {
+  border-inline-start: var(--border-width) solid var(--border-color);
+  margin-inline-start: var(--s1);
+}
+
+.velu-api-sidebar__section {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding-inline: var(--s-3);
+  inline-size: fit-content;
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+}
+
+.velu-api-sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Endpoint row — method pill + name. align-items: flex-start so the
+   pill stays on the first line when a long name wraps. */
+.velu-api-sidebar__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-2);
+  padding-inline: var(--s0);
+  color: var(--text-color);
+  text-decoration: none;
+}
+.velu-api-sidebar__item--active {
+  color: var(--accent-color);
+  border-inline-start: 2px solid var(--accent-color);
+}
+.velu-api-sidebar__label {
+  font-size: var(--f-body);
+  line-height: var(--lh-h6);
+}
+
+.velu-api-sidebar__icon {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--f-body);
+  block-size: var(--f-body);
+}
+.velu-api-sidebar__icon svg {
+  inline-size: 100%;
+  block-size: 100%;
+}