@veluai/velu 0.2.25 → 0.2.28

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

@@ -1,208 +1,208 @@
-/* Auto-generated OpenAPI reference page. Composes existing API components; this
-   only adds the page-level rhythm, the response tabs, and the playground's
-   live-response panel + body input. All tokens — light/dark via [data-theme]. */
-
-.velu-api-page__title {
-  font-size: var(--f-h1);
-  font-weight: var(--weight-bold);
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-  margin: 0 0 var(--s1);
-}
-.velu-api-page__lede {
-  color: var(--muted-color);
-  margin: 0 0 var(--s2);
-}
-.velu-api-page__tryit {
-  margin-block: var(--s2);
-}
-.velu-api-page__section {
-  margin-block-start: var(--s3);
-}
-.velu-api-page__section > h2 {
-  font-size: var(--f-h3);
-  font-weight: var(--weight-semibold);
-  margin: 0 0 var(--s1);
-}
-.velu-api-page__enum {
-  margin-block-start: var(--s-3);
-  color: var(--muted-color);
-  font-size: var(--f-h6);
-}
-.velu-api-page__enum code {
-  margin-inline-end: var(--s-4);
-}
-
-/* ── Response sections (doc body) ──────────────────────────────────────── */
-/* One default-open accordion per status; the summary shows a status pill +
-   the content-type. */
-.velu-api-resp__head {
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--s0);
-}
-/* Plain status code — no pill chrome, no per-status color, regular weight. */
-.velu-api-resp__status {
-  font-family: var(--font-mono);
-}
-.velu-api-resp__ctype {
-  color: var(--muted-color);
-  font-family: var(--font-mono);
-  font-size: var(--f-h6);
-}
-.velu-api-resp__desc {
-  color: var(--muted-color);
-  margin: 0 0 var(--s1);
-}
-
-/* ── Playground live-response panel (ApiClient aside) ──────────────────── */
-/* A Body / Header tabbed card reusing the CodeGroup tab chrome
-   (.velu-code-block__*): Body shows a status-colored callout + the response
-   body; Header shows the response headers as a fixed-height scrollable table. */
-.velu-api-resp-panel__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s1);
-  padding: var(--s1);
-  background: var(--page-bg);
-}
-.velu-api-resp-panel__status {
-  /* The Callout owns its color; keep the weight regular. */
-  font-size: var(--f-h6);
-}
-
-/* Body + Header tabs — fixed height, vertically scrollable, so a long
-   response never makes the panel grow unbounded. */
-.velu-api-resp-headers__scroll,
-.velu-api-resp-body__scroll {
-  max-block-size: 15rem;
-  overflow-y: auto;
-}
-/* The CodeBlock owns its own border/radius; let it fill the scroll box. */
-.velu-api-resp-body__scroll > .velu-code-block {
-  border: 0;
-  border-radius: 0;
-}
-
-/* Response headers table — flush rows with hairline dividers. */
-.velu-api-resp-headers {
-  inline-size: 100%;
-  border-collapse: collapse;
-  font-size: var(--f-h6);
-}
-.velu-api-resp-headers tr + tr td {
-  border-block-start: var(--border-width) solid var(--border-color);
-}
-.velu-api-resp-headers td {
-  padding: var(--s-2) var(--s-1);
-  vertical-align: top;
-  word-break: break-word;
-}
-.velu-api-resp-headers__key {
-  color: var(--muted-color);
-  font-family: var(--font-mono);
-  white-space: nowrap;
-  padding-inline-end: var(--s1) !important;
-}
-.velu-api-resp-headers__val {
-  font-family: var(--font-mono);
-  inline-size: 100%;
-}
-
-/* Editable JSON body in the playground. */
-.velu-api-body-input {
-  inline-size: 100%;
-  resize: vertical;
-  padding: var(--s0);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: var(--page-bg);
-  color: var(--text-color);
-  font-family: var(--font-mono);
-  font-size: var(--f-h6);
-  line-height: 1.5;
-}
-
-/* ── Right-rail samples ────────────────────────────────────────────────── */
-/* A TOC needs only ~280px, but the request/response code samples were being
-   cropped in that width. On API pages widen the right rail — both the aside
-   width AND the centre column's right margin read this one var, so they stay
-   in sync. (At < 1024px the @container query hides the rail + zeroes the
-   margin, so this wider value never affects narrow layouts.) */
-.velu-docs-layout[data-api='true'] {
-  --velu-aside-right-width: 28rem; /* 448px */
-}
-
-.velu-api-samples {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s2);
-}
-
-/* Breathing room inside each sample group — the code panels were reading
-   as cramped against the rail edge. */
-.velu-api-samples > * {
-  margin: 0;
-}
-.velu-api-samples :is(pre, code) {
-  font-size: var(--f-h6);
-  line-height: 1.6;
-}
-
-/* ── Try-It playground modal ───────────────────────────────────────────── */
-/* The playground renders above the page on a dimmed, blurred backdrop
-   rather than inline. */
-.velu-api-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 80;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: clamp(var(--s1), 6vh, var(--s5)) var(--s2);
-  overflow-y: auto;
-  background: color-mix(in srgb, var(--page-bg) 35%, rgba(0, 0, 0, 0.55));
-  backdrop-filter: blur(6px) saturate(1.1);
-  -webkit-backdrop-filter: blur(6px) saturate(1.1);
-  animation: velu-api-modal-in 140ms ease-out;
-}
-.velu-api-modal__panel {
-  inline-size: 100%;
-  max-inline-size: 64rem;
-  border-radius: var(--radius-md);
-  box-shadow:
-    0 24px 64px -16px rgba(0, 0, 0, 0.45),
-    0 8px 24px -12px rgba(0, 0, 0, 0.35);
-  animation: velu-api-modal-rise 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-@keyframes velu-api-modal-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes velu-api-modal-rise {
-  from { opacity: 0; transform: translateY(8px) scale(0.99); }
-  to { opacity: 1; transform: none; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .velu-api-modal,
-  .velu-api-modal__panel {
-    animation: none;
-  }
-}
-
-/* Compact method pill in the sidebar (replaces the icon for API endpoints). */
-.velu-sidebar__method {
-  flex: none;
-  font-family: var(--font-mono);
-  font-size: 0.6rem;
-  font-weight: var(--weight-bold);
-  letter-spacing: 0.03em;
-  padding: 0.18em 0.36em;
-  border-radius: var(--radius-xs, 4px);
-  text-transform: uppercase;
-}
-.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: color-mix(in srgb, var(--get-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: color-mix(in srgb, var(--post-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: color-mix(in srgb, var(--put-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: color-mix(in srgb, var(--patch-pill-color) 14%, transparent); }
-.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: color-mix(in srgb, var(--delete-pill-color) 14%, transparent); }
+/* Auto-generated OpenAPI reference page. Composes existing API components; this
+   only adds the page-level rhythm, the response tabs, and the playground's
+   live-response panel + body input. All tokens — light/dark via [data-theme]. */
+
+.velu-api-page__title {
+  font-size: var(--f-h1);
+  font-weight: var(--weight-bold);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  margin: 0 0 var(--s1);
+}
+.velu-api-page__lede {
+  color: var(--muted-color);
+  margin: 0 0 var(--s2);
+}
+.velu-api-page__tryit {
+  margin-block: var(--s2);
+}
+.velu-api-page__section {
+  margin-block-start: var(--s3);
+}
+.velu-api-page__section > h2 {
+  font-size: var(--f-h3);
+  font-weight: var(--weight-semibold);
+  margin: 0 0 var(--s1);
+}
+.velu-api-page__enum {
+  margin-block-start: var(--s-3);
+  color: var(--muted-color);
+  font-size: var(--f-h6);
+}
+.velu-api-page__enum code {
+  margin-inline-end: var(--s-4);
+}
+
+/* ── Response sections (doc body) ──────────────────────────────────────── */
+/* One default-open accordion per status; the summary shows a status pill +
+   the content-type. */
+.velu-api-resp__head {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--s0);
+}
+/* Plain status code — no pill chrome, no per-status color, regular weight. */
+.velu-api-resp__status {
+  font-family: var(--font-mono);
+}
+.velu-api-resp__ctype {
+  color: var(--muted-color);
+  font-family: var(--font-mono);
+  font-size: var(--f-h6);
+}
+.velu-api-resp__desc {
+  color: var(--muted-color);
+  margin: 0 0 var(--s1);
+}
+
+/* ── Playground live-response panel (ApiClient aside) ──────────────────── */
+/* A Body / Header tabbed card reusing the CodeGroup tab chrome
+   (.velu-code-block__*): Body shows a status-colored callout + the response
+   body; Header shows the response headers as a fixed-height scrollable table. */
+.velu-api-resp-panel__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+  padding: var(--s1);
+  background: var(--page-bg);
+}
+.velu-api-resp-panel__status {
+  /* The Callout owns its color; keep the weight regular. */
+  font-size: var(--f-h6);
+}
+
+/* Body + Header tabs — fixed height, vertically scrollable, so a long
+   response never makes the panel grow unbounded. */
+.velu-api-resp-headers__scroll,
+.velu-api-resp-body__scroll {
+  max-block-size: 15rem;
+  overflow-y: auto;
+}
+/* The CodeBlock owns its own border/radius; let it fill the scroll box. */
+.velu-api-resp-body__scroll > .velu-code-block {
+  border: 0;
+  border-radius: 0;
+}
+
+/* Response headers table — flush rows with hairline dividers. */
+.velu-api-resp-headers {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--f-h6);
+}
+.velu-api-resp-headers tr + tr td {
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+.velu-api-resp-headers td {
+  padding: var(--s-2) var(--s-1);
+  vertical-align: top;
+  word-break: break-word;
+}
+.velu-api-resp-headers__key {
+  color: var(--muted-color);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  padding-inline-end: var(--s1) !important;
+}
+.velu-api-resp-headers__val {
+  font-family: var(--font-mono);
+  inline-size: 100%;
+}
+
+/* Editable JSON body in the playground. */
+.velu-api-body-input {
+  inline-size: 100%;
+  resize: vertical;
+  padding: var(--s0);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background: var(--page-bg);
+  color: var(--text-color);
+  font-family: var(--font-mono);
+  font-size: var(--f-h6);
+  line-height: 1.5;
+}
+
+/* ── Right-rail samples ────────────────────────────────────────────────── */
+/* A TOC needs only ~280px, but the request/response code samples were being
+   cropped in that width. On API pages widen the right rail — both the aside
+   width AND the centre column's right margin read this one var, so they stay
+   in sync. (At < 1024px the @container query hides the rail + zeroes the
+   margin, so this wider value never affects narrow layouts.) */
+.velu-docs-layout[data-api='true'] {
+  --velu-aside-right-width: 28rem; /* 448px */
+}
+
+.velu-api-samples {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s2);
+}
+
+/* Breathing room inside each sample group — the code panels were reading
+   as cramped against the rail edge. */
+.velu-api-samples > * {
+  margin: 0;
+}
+.velu-api-samples :is(pre, code) {
+  font-size: var(--f-h6);
+  line-height: 1.6;
+}
+
+/* ── Try-It playground modal ───────────────────────────────────────────── */
+/* The playground renders above the page on a dimmed, blurred backdrop
+   rather than inline. */
+.velu-api-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: clamp(var(--s1), 6vh, var(--s5)) var(--s2);
+  overflow-y: auto;
+  background: color-mix(in srgb, var(--page-bg) 35%, rgba(0, 0, 0, 0.55));
+  backdrop-filter: blur(6px) saturate(1.1);
+  -webkit-backdrop-filter: blur(6px) saturate(1.1);
+  animation: velu-api-modal-in 140ms ease-out;
+}
+.velu-api-modal__panel {
+  inline-size: 100%;
+  max-inline-size: 64rem;
+  border-radius: var(--radius-md);
+  box-shadow:
+    0 24px 64px -16px rgba(0, 0, 0, 0.45),
+    0 8px 24px -12px rgba(0, 0, 0, 0.35);
+  animation: velu-api-modal-rise 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes velu-api-modal-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes velu-api-modal-rise {
+  from { opacity: 0; transform: translateY(8px) scale(0.99); }
+  to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .velu-api-modal,
+  .velu-api-modal__panel {
+    animation: none;
+  }
+}
+
+/* Compact method pill in the sidebar (replaces the icon for API endpoints). */
+.velu-sidebar__method {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: var(--weight-bold);
+  letter-spacing: 0.03em;
+  padding: 0.18em 0.36em;
+  border-radius: var(--radius-xs, 4px);
+  text-transform: uppercase;
+}
+.velu-sidebar__method.velu-method-badge--get { color: var(--get-pill-color); background: color-mix(in srgb, var(--get-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--post { color: var(--post-pill-color); background: color-mix(in srgb, var(--post-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--put { color: var(--put-pill-color); background: color-mix(in srgb, var(--put-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--patch { color: var(--patch-pill-color); background: color-mix(in srgb, var(--patch-pill-color) 14%, transparent); }
+.velu-sidebar__method.velu-method-badge--delete { color: var(--delete-pill-color); background: color-mix(in srgb, var(--delete-pill-color) 14%, transparent); }