@clarify-labs/renderer 0.10.3 → 0.11.0

package/output/renderer.css

@@ -91,7 +91,6 @@
     --color-emerald-500: oklch(69.6% .17 162.48);
     --color-emerald-600: oklch(59.6% .145 163.225);
     --color-emerald-700: oklch(50.8% .118 165.612);
-    --color-emerald-800: oklch(43.2% .095 166.913);
     --color-emerald-900: oklch(37.8% .077 168.94);
     --color-sky-50: oklch(97.7% .013 236.62);
     --color-sky-100: oklch(95.1% .026 236.824);
@@ -138,6 +137,7 @@
     --container-3xl: 50rem;
     --container-4xl: 56rem;
     --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: .8125rem;
     --text-xs--line-height: 1.5rem;
     --text-sm: .875rem;
@@ -626,36 +626,9 @@
   }
 
   :root, .clarify-app {
-    --clarify-code-background: #020617;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-background: color-mix(in srgb, #020617 92%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
-    --clarify-code-surface: #0f172a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-surface: color-mix(in srgb, #0f172a 88%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
-    --clarify-code-header-background: #111827;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-header-background: color-mix(in srgb, #111827 86%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
+    --clarify-code-background: #18181b;
+    --clarify-code-surface: #202023;
+    --clarify-code-header-background: #242427;
     --clarify-code-border: #ffffff1a;
     --clarify-code-text: var(--color-zinc-100);
     --clarify-code-control-text: var(--color-zinc-300);
@@ -684,6 +657,13 @@
   }
 
   :root, .clarify-app {
+    --clarify-code-property: #0369a1;
+    --clarify-code-string: #047857;
+    --clarify-code-number: #a16207;
+    --clarify-code-success: #047857;
+    --clarify-code-danger: #be123c;
+    --clarify-code-danger-border: #fb718547;
+    --clarify-code-danger-background: #fb71851a;
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
     --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
@@ -810,7 +790,7 @@
     --clarify-ui-menu-line-height: 1.5rem;
     --clarify-ui-description-font-size: .75rem;
     --clarify-ui-description-line-height: 1.25rem;
-    --clarify-ui-tight-letter-spacing: -.01em;
+    --clarify-ui-tight-letter-spacing: 0;
     --clarify-ui-search-field-font-size: .9375rem;
     --clarify-ui-search-field-line-height: 1.5rem;
     --clarify-ui-navigation-section-font-size: var(--clarify-ui-menu-font-size);
@@ -942,37 +922,17 @@
   }
 
   .dark, .dark .clarify-app {
-    --clarify-code-background: #020617;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-background: color-mix(in srgb, #020617 94%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
-    --clarify-code-surface: #0f172a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-surface: color-mix(in srgb, #0f172a 92%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
-    --clarify-code-header-background: #111827;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-header-background: color-mix(in srgb, #111827 90%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
+    --clarify-code-background: #18181b;
+    --clarify-code-surface: #202023;
+    --clarify-code-header-background: #242427;
     --clarify-code-border: #ffffff1f;
+    --clarify-code-property: #7dd3fc;
+    --clarify-code-string: #6ee7b7;
+    --clarify-code-number: #fcd34d;
+    --clarify-code-success: #6ee7b7;
+    --clarify-code-danger: #fda4af;
+    --clarify-code-danger-border: #fb718559;
+    --clarify-code-danger-background: #fb71851f;
     --clarify-http-method-get-background: #00d2944d;
   }
 
@@ -1041,6 +1001,20 @@
     --clarify-http-method-default-text: var(--color-zinc-100);
   }
 
+  .clarify-api-response {
+    --clarify-code-background: var(--clarify-theme-tokens-colors-surface);
+    --clarify-code-surface: var(--clarify-theme-tokens-colors-surface);
+    --clarify-code-header-background: var(--clarify-ui-subtle-background);
+    --clarify-code-border: var(--clarify-theme-tokens-colors-border);
+    --clarify-code-text: var(--clarify-ui-text-strong);
+    --clarify-code-control-text: var(--clarify-ui-text);
+    --clarify-code-muted: var(--clarify-ui-text-soft);
+    --clarify-code-faint: var(--clarify-ui-text-faint);
+    --clarify-code-control-background: var(--clarify-ui-subtle-background);
+    --clarify-code-control-background-hover: var(--clarify-ui-hover-background);
+    --clarify-code-control-background-active: var(--clarify-ui-active-background);
+  }
+
   .clarify-ui-control {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-control-font-size);
@@ -1773,10 +1747,6 @@
     top: calc(var(--spacing) * 14);
   }
 
-  .top-\[calc\(100\%\+0\.5rem\)\] {
-    top: calc(100% + .5rem);
-  }
-
   .top-full {
     top: 100%;
   }
@@ -1801,6 +1771,10 @@
     right: calc(var(--spacing) * 4);
   }
 
+  .right-auto {
+    right: auto;
+  }
+
   .-bottom-1 {
     bottom: calc(var(--spacing) * -1);
   }
@@ -1821,8 +1795,8 @@
     bottom: calc(var(--spacing) * 4);
   }
 
-  .bottom-\[calc\(100\%\+0\.5rem\)\] {
-    bottom: calc(100% + .5rem);
+  .bottom-auto {
+    bottom: auto;
   }
 
   .-left-3\.5 {
@@ -1861,6 +1835,10 @@
     z-index: 50;
   }
 
+  .z-60 {
+    z-index: 60;
+  }
+
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -1911,10 +1889,6 @@
     margin: 0;
   }
 
-  .-mx-2 {
-    margin-inline: calc(var(--spacing) * -2);
-  }
-
   .mx-0 {
     margin-inline: 0;
   }
@@ -2319,8 +2293,12 @@
     margin-top: calc(var(--spacing) * 8);
   }
 
-  .mt-16 {
-    margin-top: calc(var(--spacing) * 16);
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
   }
 
   .-mr-0\.5 {
@@ -2335,6 +2313,10 @@
     margin-right: calc(var(--spacing) * -2);
   }
 
+  .mr-1 {
+    margin-right: var(--spacing);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -2471,6 +2453,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -2491,6 +2478,11 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+
   .size-11 {
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
@@ -2553,10 +2545,18 @@
     height: calc(var(--spacing) * 14);
   }
 
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
+
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
 
+  .h-\[min\(46rem\,calc\(100dvh-1\.5rem\)\)\] {
+    height: min(46rem, 100dvh - 1.5rem);
+  }
+
   .h-auto {
     height: auto;
   }
@@ -2621,10 +2621,30 @@
     min-height: calc(var(--spacing) * 9);
   }
 
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
 
+  .min-h-44 {
+    min-height: calc(var(--spacing) * 44);
+  }
+
+  .min-h-56 {
+    min-height: calc(var(--spacing) * 56);
+  }
+
+  .min-h-72 {
+    min-height: calc(var(--spacing) * 72);
+  }
+
+  .min-h-96 {
+    min-height: calc(var(--spacing) * 96);
+  }
+
   .min-h-full {
     min-height: 100%;
   }
@@ -2637,10 +2657,6 @@
     width: 100% !important;
   }
 
-  .w-\(--clarify-schema-row-nested-width\) {
-    width: var(--clarify-schema-row-nested-width);
-  }
-
   .w-\(--clarify-theme-editor-width\) {
     width: var(--clarify-theme-editor-width);
   }
@@ -2669,6 +2685,10 @@
     width: 66.6667%;
   }
 
+  .w-2\/5 {
+    width: 40%;
+  }
+
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -2805,6 +2825,10 @@
     max-width: var(--container-6xl);
   }
 
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+
   .max-w-32 {
     max-width: calc(var(--spacing) * 32);
   }
@@ -2817,6 +2841,10 @@
     max-width: calc(var(--spacing) * 64);
   }
 
+  .max-w-80 {
+    max-width: calc(var(--spacing) * 80);
+  }
+
   .max-w-\[82\%\] {
     max-width: 82%;
   }
@@ -2853,6 +2881,10 @@
     min-width: calc(var(--spacing) * 28);
   }
 
+  .min-w-96 {
+    min-width: calc(var(--spacing) * 96);
+  }
+
   .min-w-max {
     min-width: max-content;
   }
@@ -2869,6 +2901,10 @@
     flex: none;
   }
 
+  .shrink {
+    flex-shrink: 1;
+  }
+
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -2877,6 +2913,14 @@
     flex-grow: 1;
   }
 
+  .table-fixed {
+    table-layout: fixed;
+  }
+
+  .border-collapse {
+    border-collapse: collapse;
+  }
+
   .origin-top {
     transform-origin: top;
   }
@@ -2900,11 +2944,20 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .translate-y-0 {
     --tw-translate-y: 0;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-rotate-90 {
+    rotate: -90deg;
+  }
+
   .rotate-180 {
     rotate: 180deg;
   }
@@ -2954,6 +3007,14 @@
     resize: both;
   }
 
+  .resize-none {
+    resize: none;
+  }
+
+  .resize-y {
+    resize: vertical;
+  }
+
   .scroll-mt-24 {
     scroll-margin-top: calc(var(--spacing) * 24);
   }
@@ -2986,10 +3047,30 @@
     grid-template-columns: 1fr minmax(0, 2fr) 1fr;
   }
 
+  .grid-cols-\[2rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 2rem minmax(0, 1fr);
+  }
+
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .grid-cols-\[minmax\(5rem\,auto\)_1fr\] {
+    grid-template-columns: minmax(5rem, auto) 1fr;
+  }
+
+  .grid-rows-\[auto_minmax\(11rem\,1fr\)\] {
+    grid-template-rows: auto minmax(11rem, 1fr);
+  }
+
+  .grid-rows-\[minmax\(11rem\,1fr\)\] {
+    grid-template-rows: minmax(11rem, 1fr);
+  }
+
   .flex-col {
     flex-direction: column;
   }
@@ -3010,10 +3091,6 @@
     align-items: center;
   }
 
-  .items-end {
-    align-items: flex-end;
-  }
-
   .items-start {
     align-items: flex-start;
   }
@@ -3058,6 +3135,10 @@
     gap: calc(var(--spacing) * 2);
   }
 
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
+
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -3082,6 +3163,12 @@
     gap: 1px;
   }
 
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-3 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
@@ -3112,6 +3199,10 @@
     margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-1\.5 {
+    column-gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -3291,11 +3382,21 @@
     border-right-width: 1px;
   }
 
+  .\!border-b-0 {
+    border-bottom-style: var(--tw-border-style) !important;
+    border-bottom-width: 0 !important;
+  }
+
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
 
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -3315,6 +3416,10 @@
     border-color: var(--clarify-code-border);
   }
 
+  .border-\(--clarify-code-danger-border\) {
+    border-color: var(--clarify-code-danger-border);
+  }
+
   .border-\(--clarify-error-accent-text\) {
     border-color: var(--clarify-error-accent-text);
   }
@@ -3433,6 +3538,14 @@
     background-color: var(--clarify-code-control-background);
   }
 
+  .bg-\(--clarify-code-danger\) {
+    background-color: var(--clarify-code-danger);
+  }
+
+  .bg-\(--clarify-code-danger-background\) {
+    background-color: var(--clarify-code-danger-background);
+  }
+
   .bg-\(--clarify-code-faint\) {
     background-color: var(--clarify-code-faint);
   }
@@ -3441,6 +3554,10 @@
     background-color: var(--clarify-code-header-background);
   }
 
+  .bg-\(--clarify-code-success\) {
+    background-color: var(--clarify-code-success);
+  }
+
   .bg-\(--clarify-code-surface\) {
     background-color: var(--clarify-code-surface);
   }
@@ -3545,6 +3662,10 @@
     background-color: var(--clarify-ui-active-background);
   }
 
+  .bg-\(--clarify-ui-overlay-background\) {
+    background-color: var(--clarify-ui-overlay-background);
+  }
+
   .bg-\(--clarify-ui-subtle-background\) {
     background-color: var(--clarify-ui-subtle-background);
   }
@@ -3901,6 +4022,10 @@
     padding-inline: calc(var(--spacing) * 3);
   }
 
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -3913,10 +4038,6 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
-  .py-0 {
-    padding-block: 0;
-  }
-
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -3945,6 +4066,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -3989,6 +4114,10 @@
     padding-top: calc(var(--spacing) * 26);
   }
 
+  .pr-1 {
+    padding-right: var(--spacing);
+  }
+
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -4037,6 +4166,10 @@
     padding-left: calc(var(--spacing) * 2.5);
   }
 
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -4057,10 +4190,6 @@
     text-align: left;
   }
 
-  .text-right {
-    text-align: right;
-  }
-
   .align-baseline {
     vertical-align: baseline;
   }
@@ -4069,6 +4198,10 @@
     vertical-align: middle;
   }
 
+  .align-top {
+    vertical-align: top;
+  }
+
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -4220,6 +4353,10 @@
     overflow-wrap: break-word;
   }
 
+  .break-all {
+    word-break: break-all;
+  }
+
   .whitespace-normal {
     white-space: normal;
   }
@@ -4240,6 +4377,10 @@
     color: var(--clarify-code-control-text);
   }
 
+  .text-\(--clarify-code-danger\) {
+    color: var(--clarify-code-danger);
+  }
+
   .text-\(--clarify-code-faint\) {
     color: var(--clarify-code-faint);
   }
@@ -4248,6 +4389,22 @@
     color: var(--clarify-code-muted);
   }
 
+  .text-\(--clarify-code-number\) {
+    color: var(--clarify-code-number);
+  }
+
+  .text-\(--clarify-code-property\) {
+    color: var(--clarify-code-property);
+  }
+
+  .text-\(--clarify-code-string\) {
+    color: var(--clarify-code-string);
+  }
+
+  .text-\(--clarify-code-success\) {
+    color: var(--clarify-code-success);
+  }
+
   .text-\(--clarify-code-text\) {
     color: var(--clarify-code-text);
   }
@@ -4352,10 +4509,6 @@
     color: var(--color-emerald-700);
   }
 
-  .text-emerald-800 {
-    color: var(--color-emerald-800);
-  }
-
   .text-emerald-900 {
     color: var(--color-emerald-900);
   }
@@ -4448,6 +4601,10 @@
     text-decoration-line: underline;
   }
 
+  .accent-\(--clarify-theme-tokens-colors-primary\) {
+    accent-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -4456,6 +4613,10 @@
     opacity: .35;
   }
 
+  .opacity-45 {
+    opacity: .45;
+  }
+
   .opacity-80 {
     opacity: .8;
   }
@@ -4678,6 +4839,10 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .filter {
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -4783,6 +4948,66 @@
     --anchor-gap: calc(var(--spacing) * 2);
   }
 
+  .\[--clarify-theme-tokens-radius-lg\:6px\] {
+    --clarify-theme-tokens-radius-lg: 6px;
+  }
+
+  .\[--clarify-theme-tokens-radius-md\:4px\] {
+    --clarify-theme-tokens-radius-md: 4px;
+  }
+
+  .\[--clarify-theme-tokens-radius-sm\:2px\] {
+    --clarify-theme-tokens-radius-sm: 2px;
+  }
+
+  .\[--clarify-theme-tokens-radius-xl\:8px\] {
+    --clarify-theme-tokens-radius-xl: 8px;
+  }
+
+  .\[--clarify-ui-accent-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_10\%\,transparent\)\] {
+    --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-accent-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_10\%\,transparent\)\] {
+      --clarify-ui-accent-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 10%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-accent-border\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_22\%\,transparent\)\] {
+    --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-accent-border\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_22\%\,transparent\)\] {
+      --clarify-ui-accent-border: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 22%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-accent-text\:var\(--clarify-theme-tokens-colors-foreground\)\] {
+    --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .\[--clarify-ui-active-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_12\%\,transparent\)\] {
+    --clarify-ui-active-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-active-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_12\%\,transparent\)\] {
+      --clarify-ui-active-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 12%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-subtle-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\] {
+    --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-subtle-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\] {
+      --clarify-ui-subtle-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 5%,transparent);
+    }
+  }
+
   .\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\] {
     --tw-prose-links-hover: var(--clarify-ui-accent-text);
   }
@@ -4807,11 +5032,29 @@
     margin: 0;
   }
 
+  .group-open\:rotate-0:is(:where(.group):is([open], :popover-open, :open) *) {
+    rotate: 0deg;
+  }
+
+  .group-open\:border-b:is(:where(.group):is([open], :popover-open, :open) *) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .group-open\:border-\(--clarify-theme-tokens-colors-border\):is(:where(.group):is([open], :popover-open, :open) *) {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
   .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
     opacity: 1;
   }
 
   @media (hover: hover) {
+    .group-hover\:-translate-x-0\.5:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
     .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
       --tw-translate-x: calc(var(--spacing) * .5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4863,6 +5106,10 @@
     opacity: 1;
   }
 
+  .placeholder\:text-\(--clarify-code-faint\)::placeholder {
+    color: var(--clarify-code-faint);
+  }
+
   .placeholder\:text-\(--clarify-ui-text-faint\)::placeholder {
     color: var(--clarify-ui-text-faint);
   }
@@ -4888,10 +5135,38 @@
     margin-bottom: 0;
   }
 
+  .open\:grid:is([open], :popover-open, :open) {
+    display: grid;
+  }
+
+  .open\:min-h-55:is([open], :popover-open, :open) {
+    min-height: calc(var(--spacing) * 55);
+  }
+
+  .open\:shrink:is([open], :popover-open, :open) {
+    flex-shrink: 1;
+  }
+
+  .open\:grow:is([open], :popover-open, :open) {
+    flex-grow: 1;
+  }
+
+  .open\:basis-55:is([open], :popover-open, :open) {
+    flex-basis: calc(var(--spacing) * 55);
+  }
+
+  .open\:grid-rows-\[auto_minmax\(11rem\,1fr\)\]:is([open], :popover-open, :open) {
+    grid-template-rows: auto minmax(11rem, 1fr);
+  }
+
   .empty\:hidden:empty {
     display: none;
   }
 
+  .focus-within\:bg-\(--clarify-ui-hover-background\):focus-within {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -4914,8 +5189,8 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
-      border-color: var(--clarify-theme-tokens-colors-primary);
+    .hover\:border-\(--clarify-code-border\):hover {
+      border-color: var(--clarify-code-border);
     }
 
     .hover\:border-\(--clarify-ui-accent-border\):hover {
@@ -4926,14 +5201,8 @@
       border-color: var(--clarify-ui-text-faint);
     }
 
-    .hover\:border-white\/20:hover {
-      border-color: #fff3;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-white\/20:hover {
-        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-      }
+    .hover\:bg-\(--clarify-code-control-background\):hover {
+      background-color: var(--clarify-code-control-background);
     }
 
     .hover\:bg-\(--clarify-code-control-background-hover\):hover {
@@ -4944,6 +5213,10 @@
       background-color: var(--clarify-theme-tokens-colors-background);
     }
 
+    .hover\:bg-\(--clarify-theme-tokens-colors-foreground\):hover {
+      background-color: var(--clarify-theme-tokens-colors-foreground);
+    }
+
     .hover\:bg-\(--clarify-ui-accent-background\):hover {
       background-color: var(--clarify-ui-accent-background);
     }
@@ -4966,6 +5239,10 @@
       color: var(--clarify-code-text);
     }
 
+    .hover\:text-\(--clarify-theme-tokens-colors-background\):hover {
+      color: var(--clarify-theme-tokens-colors-background);
+    }
+
     .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
       color: var(--clarify-theme-tokens-colors-foreground);
     }
@@ -4974,10 +5251,6 @@
       color: var(--clarify-ui-text-strong);
     }
 
-    .hover\:text-emerald-700:hover {
-      color: var(--color-emerald-700);
-    }
-
     .hover\:text-inherit:hover {
       color: inherit;
     }
@@ -4986,6 +5259,10 @@
       opacity: .8;
     }
 
+    .hover\:opacity-85:hover {
+      opacity: .85;
+    }
+
     .hover\:opacity-90:hover {
       opacity: .9;
     }
@@ -5026,6 +5303,10 @@
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
+  .focus\:bg-\(--clarify-ui-hover-background\):focus {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .focus\:text-\(--clarify-code-text\):focus {
     color: var(--clarify-code-text);
   }
@@ -5034,11 +5315,20 @@
     opacity: 1;
   }
 
+  .focus\:ring-0:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .focus\:ring-2:focus {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .focus\:ring-\(--clarify-theme-tokens-colors-primary\):focus {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .focus\:ring-\(--clarify-ui-accent-border\):focus {
     --tw-ring-color: var(--clarify-ui-accent-border);
   }
@@ -5048,11 +5338,27 @@
     outline-style: none;
   }
 
+  .focus\:ring-inset:focus {
+    --tw-ring-inset: inset;
+  }
+
+  .focus-visible\:bg-\(--clarify-ui-hover-background\):focus-visible {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
+  .focus-visible\:opacity-100:focus-visible {
+    opacity: 1;
+  }
+
   .focus-visible\:ring-2:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .focus-visible\:ring-\(--clarify-theme-tokens-colors-foreground\):focus-visible {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-foreground);
+  }
+
   .focus-visible\:ring-\(--clarify-theme-tokens-colors-primary\):focus-visible {
     --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
   }
@@ -5093,6 +5399,22 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:cursor-wait:disabled {
+    cursor: wait;
+  }
+
+  .disabled\:opacity-60:disabled {
+    opacity: .6;
+  }
+
+  .aria-invalid\:text-\(--clarify-error-accent-text\)[aria-invalid="true"] {
+    color: var(--clarify-error-accent-text);
+  }
+
   .data-closed\:-translate-x-full[data-closed] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5109,6 +5431,10 @@
     opacity: 0;
   }
 
+  .data-disabled\:cursor-not-allowed[data-disabled] {
+    cursor: not-allowed;
+  }
+
   .data-enter\:duration-100[data-enter] {
     --tw-duration: .1s;
     transition-duration: .1s;
@@ -5159,18 +5485,8 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-\(--clarify-ui-accent-border\)[data-open] {
-    border-color: var(--clarify-ui-accent-border);
-  }
-
-  .data-open\:border-white\/20[data-open] {
-    border-color: #fff3;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:border-white\/20[data-open] {
-      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-    }
+  .data-open\:border-\(--clarify-code-border\)[data-open] {
+    border-color: var(--clarify-code-border);
   }
 
   .data-open\:bg-\(--clarify-code-control-background-active\)[data-open] {
@@ -5227,6 +5543,14 @@
       right: calc(var(--spacing) * 3);
     }
 
+    .sm\:col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
+
     .sm\:mt-5 {
       margin-top: calc(var(--spacing) * 5);
     }
@@ -5243,6 +5567,10 @@
       display: inline;
     }
 
+    .sm\:h-\[min\(46rem\,calc\(100dvh-3rem\)\)\] {
+      height: min(46rem, 100dvh - 3rem);
+    }
+
     .sm\:w-auto {
       width: auto;
     }
@@ -5255,6 +5583,10 @@
       max-width: var(--clarify-server-url-max-width);
     }
 
+    .sm\:max-w-48 {
+      max-width: calc(var(--spacing) * 48);
+    }
+
     .sm\:max-w-xl {
       max-width: var(--container-xl);
     }
@@ -5263,10 +5595,6 @@
       min-width: calc(var(--spacing) * 16);
     }
 
-    .sm\:grid-cols-\(--clarify-openapi-control-grid\) {
-      grid-template-columns: var(--clarify-openapi-control-grid);
-    }
-
     .sm\:grid-cols-\(--clarify-openapi-variable-grid\) {
       grid-template-columns: var(--clarify-openapi-variable-grid);
     }
@@ -5279,14 +5607,30 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
+    .sm\:grid-cols-\[2rem_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+      grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
 
+    .sm\:items-end {
+      align-items: flex-end;
+    }
+
     .sm\:items-start {
       align-items: flex-start;
     }
 
+    .sm\:items-stretch {
+      align-items: stretch;
+    }
+
     .sm\:justify-between {
       justify-content: space-between;
     }
@@ -5295,10 +5639,6 @@
       justify-content: flex-end;
     }
 
-    .sm\:justify-start {
-      justify-content: flex-start;
-    }
-
     .sm\:gap-2 {
       gap: calc(var(--spacing) * 2);
     }
@@ -5307,10 +5647,23 @@
       gap: calc(var(--spacing) * 4);
     }
 
+    .sm\:self-end {
+      align-self: flex-end;
+    }
+
+    .sm\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }
 
+    .sm\:p-6 {
+      padding: calc(var(--spacing) * 6);
+    }
+
     .sm\:p-8 {
       padding: calc(var(--spacing) * 8);
     }
@@ -5343,10 +5696,6 @@
       text-align: center;
     }
 
-    .sm\:text-left {
-      text-align: left;
-    }
-
     .sm\:text-2xl\/8 {
       font-size: var(--text-2xl);
       line-height: calc(var(--spacing) * 8);
@@ -5419,10 +5768,6 @@
       z-index: 50;
     }
 
-    .lg\:mt-24 {
-      margin-top: calc(var(--spacing) * 24);
-    }
-
     .lg\:block {
       display: block;
     }
@@ -5467,6 +5812,10 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[minmax\(0\,1\.12fr\)_minmax\(22rem\,0\.88fr\)\] {
+      grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
+    }
+
     .lg\:self-stretch {
       align-self: stretch;
     }
@@ -5475,6 +5824,16 @@
       overflow-y: auto;
     }
 
+    .lg\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
+    .lg\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+
     .lg\:bg-\(--clarify-theme-tokens-colors-background\) {
       background-color: var(--clarify-theme-tokens-colors-background);
     }
@@ -5565,6 +5924,24 @@
       justify-content: flex-end;
     }
 
+    .\@3xl\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
+    .\@3xl\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+
+    .\@3xl\:pr-8 {
+      padding-right: calc(var(--spacing) * 8);
+    }
+
+    .\@3xl\:pl-8 {
+      padding-left: calc(var(--spacing) * 8);
+    }
+
     .\@3xl\:text-right {
       text-align: right;
     }
@@ -5732,16 +6109,6 @@
     }
   }
 
-  .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-    background-color: #00d29426;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
-    }
-  }
-
   .dark\:bg-red-500\/10:where(.dark, .dark *) {
     background-color: #fb2c361a;
   }
@@ -6134,10 +6501,6 @@
       }
     }
 
-    .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
-      color: var(--color-emerald-200);
-    }
-
     .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
       opacity: .8;
     }
@@ -6203,6 +6566,40 @@
     display: none;
   }
 
+  .\[\&\>\[role\=tooltip\]\]\:w-80 > [role="tooltip"] {
+    width: calc(var(--spacing) * 80);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:max-w-\[min\(20rem\,calc\(100vw-2rem\)\)\] > [role="tooltip"] {
+    max-width: min(20rem, 100vw - 2rem);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:border > [role="tooltip"] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:border-\(--clarify-theme-tokens-colors-border\) > [role="tooltip"] {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:bg-\(--clarify-theme-tokens-colors-surface\) > [role="tooltip"] {
+    background-color: var(--clarify-theme-tokens-colors-surface);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:p-3 > [role="tooltip"] {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:text-\(--clarify-ui-text\) > [role="tooltip"] {
+    color: var(--clarify-ui-text);
+  }
+
+  .\[\&\>\[role\=tooltip\]\]\:shadow-xl > [role="tooltip"] {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   html :where(.\[html_\:where\(\&\>\*\)\]\:w-full > *) {
     width: 100%;
   }