@stainless-api/docs-ui 0.1.0-beta.44 → 0.1.0-beta.46

package/dist/styles/main.css

@@ -250,7 +250,8 @@
     }
   }
 
-  .stldocs-property-description {
+  .stldocs-property-description,
+  .stldocs-property-title {
     font-size: var(--stl-typography-scale-sm);
     color: var(--stl-color-foreground-reduced);
 
@@ -541,7 +542,7 @@
   .stldocs-snippet {
     top: calc(var(--sl-nav-height) + 1rem);
     position: sticky;
-    z-index: 10;
+    z-index: 5;
     border-radius: 16px;
     background-color: transparent;
     padding: 0;
@@ -549,6 +550,8 @@
     font-family: var(--stl-typography-font-mono);
 
     .stldocs-snippet-request {
+      background-color: var(--stl-color-background);
+      --shiki-background: var(--stl-color-background);
       border: 1px solid var(--stl-color-border);
       border-radius: 12px;
       position: relative;
@@ -570,13 +573,15 @@
       padding: 0.5rem;
       padding-left: 1rem;
       gap: 0.5rem;
+      font-family: var(--stl-typography-font);
 
       .stldocs-snippet-request-title-method {
         flex-grow: 1;
         min-width: 0;
       }
 
-      > div {
+      .stldocs-snippet-request-title-method,
+      .stldocs-snippet-request-title-content {
         display: flex;
         gap: 0.5rem;
         align-items: center;
@@ -662,6 +667,8 @@
     line-height: 1.75;
     transition: height 240ms ease;
     will-change: height;
+    font-size: var(--stl-typography-text-code);
+    scrollbar-color: var(--stl-color-border) transparent;
 
     .shiki {
       padding: 1rem;
@@ -680,6 +687,7 @@
           opacity: 0.5;
           display: inline-flex;
           width: 1rem;
+          text-align: right;
         }
 
         &.ellipsis {
@@ -881,11 +889,6 @@
         background-color: var(--stl-color-faint-background);
         border: 1px solid var(--stl-color-border);
 
-        .stldocs-snippet-request {
-          background-color: var(--stl-color-background);
-          --shiki-background: var(--stl-color-background);
-        }
-
         .stldocs-snippet-response {
           display: block;
         }

package/dist/styles/primitives.css

@@ -254,27 +254,62 @@
 
 .stldocs-root .stldocs-input {
   border: 1px solid var(--stl-color-border);
+  background: var(--stl-color-background);
   border-radius: 0.3rem;
-  padding: 0.5rem;
   display: flex;
   gap: 0.5rem;
 
-  input {
+  &:focus-within {
+    border-color: var(--stl-color-accent);
+  }
+
+  input,
+  .stldocs-masked-input-display {
     flex-grow: 1;
     border: none;
     background-color: transparent;
+    margin: 0.5rem;
+    font-size: 0.85rem;
+    letter-spacing: initial;
+    white-space: pre;
+    contain: content;
+    padding: 0;
 
     &:focus {
       outline: none;
     }
   }
 
+  &:focus-within .stldocs-masked-input-display,
+  &:not(:focus-within) input {
+    opacity: 0;
+  }
+
+  .stldocs-masked-input-obscured {
+    -webkit-text-stroke: currentColor 0.2em;
+  }
+
   .stldocs-icon {
     margin-top: auto;
     margin-bottom: auto;
   }
 }
 
+.stldocs-root .stldocs-masked-input-wrapper {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  font-family: var(--stl-typography-font-mono);
+}
+
+.stldocs-root .stldocs-masked-input-display {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  pointer-events: none; /* so you can click through to the real input */
+}
+
 .stldocs-root .stldocs-listview {
   overflow-y: scroll;
 

package/dist/styles.css

@@ -318,27 +318,62 @@
 
 .stldocs-root .stldocs-input {
   border: 1px solid var(--stl-color-border);
+  background: var(--stl-color-background);
   border-radius: 0.3rem;
-  padding: 0.5rem;
   display: flex;
   gap: 0.5rem;
 
-  input {
+  &:focus-within {
+    border-color: var(--stl-color-accent);
+  }
+
+  input,
+  .stldocs-masked-input-display {
     flex-grow: 1;
     border: none;
     background-color: transparent;
+    margin: 0.5rem;
+    font-size: 0.85rem;
+    letter-spacing: initial;
+    white-space: pre;
+    contain: content;
+    padding: 0;
 
     &:focus {
       outline: none;
     }
   }
 
+  &:focus-within .stldocs-masked-input-display,
+  &:not(:focus-within) input {
+    opacity: 0;
+  }
+
+  .stldocs-masked-input-obscured {
+    -webkit-text-stroke: currentColor 0.2em;
+  }
+
   .stldocs-icon {
     margin-top: auto;
     margin-bottom: auto;
   }
 }
 
+.stldocs-root .stldocs-masked-input-wrapper {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  font-family: var(--stl-typography-font-mono);
+}
+
+.stldocs-root .stldocs-masked-input-display {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  pointer-events: none; /* so you can click through to the real input */
+}
+
 .stldocs-root .stldocs-listview {
   overflow-y: scroll;
 
@@ -707,7 +742,8 @@
     }
   }
 
-  .stldocs-property-description {
+  .stldocs-property-description,
+  .stldocs-property-title {
     font-size: var(--stl-typography-scale-sm);
     color: var(--stl-color-foreground-reduced);
 
@@ -998,7 +1034,7 @@
   .stldocs-snippet {
     top: calc(var(--sl-nav-height) + 1rem);
     position: sticky;
-    z-index: 10;
+    z-index: 5;
     border-radius: 16px;
     background-color: transparent;
     padding: 0;
@@ -1006,6 +1042,8 @@
     font-family: var(--stl-typography-font-mono);
 
     .stldocs-snippet-request {
+      background-color: var(--stl-color-background);
+      --shiki-background: var(--stl-color-background);
       border: 1px solid var(--stl-color-border);
       border-radius: 12px;
       position: relative;
@@ -1027,13 +1065,15 @@
       padding: 0.5rem;
       padding-left: 1rem;
       gap: 0.5rem;
+      font-family: var(--stl-typography-font);
 
       .stldocs-snippet-request-title-method {
         flex-grow: 1;
         min-width: 0;
       }
 
-      > div {
+      .stldocs-snippet-request-title-method,
+      .stldocs-snippet-request-title-content {
         display: flex;
         gap: 0.5rem;
         align-items: center;
@@ -1119,6 +1159,8 @@
     line-height: 1.75;
     transition: height 240ms ease;
     will-change: height;
+    font-size: var(--stl-typography-text-code);
+    scrollbar-color: var(--stl-color-border) transparent;
 
     .shiki {
       padding: 1rem;
@@ -1137,6 +1179,7 @@
           opacity: 0.5;
           display: inline-flex;
           width: 1rem;
+          text-align: right;
         }
 
         &.ellipsis {
@@ -1338,11 +1381,6 @@
         background-color: var(--stl-color-faint-background);
         border: 1px solid var(--stl-color-border);
 
-        .stldocs-snippet-request {
-          background-color: var(--stl-color-background);
-          --shiki-background: var(--stl-color-background);
-        }
-
         .stldocs-snippet-response {
           display: block;
         }

package/dist/{types-BSnSUlkN.d.ts → types-1rnoIVpZ.d.ts}

@@ -1,4 +1,4 @@
-import { t as DocsLanguage } from "./routing-DNN8R6bZ.js";
+import { t as DocsLanguage } from "./routing-Bcos-Z2q.js";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/search/types.d.ts

package/dist/{use-components-BHEwm0mE.js → use-components-DG6NAdUT.js}

@@ -1,4 +1,4 @@
-import { i as useComponents } from "./component-generics-D3ybuN5r.js";
+import { i as useComponents } from "./component-generics-4gg5TFK4.js";
 
 //#region src/contexts/use-components.tsx
 const useComponents$1 = () => useComponents();

package/dist/{utils-FnJ4tyuN.js → utils-CqR0JQ5q.js}

@@ -1,5 +1,5 @@
-import { t as __export } from "./chunk-Bf_Gc_jT.js";
-import { f as parseStainlessPath } from "./routing-qs2YNG9o.js";
+import { t as __export } from "./chunk-KfF3XP4c.js";
+import { f as parseStainlessPath } from "./routing-GrDalgAW.js";
 
 //#region src/utils.ts
 var utils_exports = /* @__PURE__ */ __export({

package/dist/{utils-C5oXAzyN.d.ts → utils-gEMvF6KH.d.ts}

@@ -1,5 +1,5 @@
-import { t as DocsLanguage } from "./routing-DNN8R6bZ.js";
-import { C as TransformRequestSnippetFn } from "./sdk-Rlr-Kw5_.js";
+import { t as DocsLanguage } from "./routing-Bcos-Z2q.js";
+import { C as TransformRequestSnippetFn } from "./sdk-CDNNOl31.js";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/markdown/utils.d.ts

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-D43p_yTd.js";
+import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-CI9byvCc.js";
 export { flatResources, getResourceFromSpec, isResourceEmpty };

package/dist/utils.js

@@ -1,4 +1,4 @@
-import "./routing-qs2YNG9o.js";
-import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-FnJ4tyuN.js";
+import "./routing-GrDalgAW.js";
+import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-CqR0JQ5q.js";
 
 export { flatResources, getResourceFromSpec, isResourceEmpty };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.44",
+  "version": "0.1.0-beta.46",
   "publishConfig": {
     "access": "public"
   },
@@ -20,11 +20,11 @@
     "fuse.js": "^7.1.0",
     "htmlparser2": "^10.0.0",
     "lucide-react": "^0.555.0",
-    "@stainless-api/ui-primitives": "0.1.0-beta.32"
+    "@stainless-api/ui-primitives": "0.1.0-beta.35"
   },
   "devDependencies": {
     "@types/node": "24.10.1",
-    "@types/react": "^19.2.7",
+    "@types/react": "19.2.7",
     "@types/react-dom": "^19.2.3",
     "dotenv": "17.2.3",
     "react": "^19.2.1",
@@ -32,7 +32,7 @@
     "tsdown": "^0.16.8",
     "typescript": "5.9.3",
     "@stainless/eslint-config": "0.1.0-beta.0",
-    "@stainless/sdk-json": "^0.1.0-beta.0"
+    "@stainless/sdk-json": "^0.1.0-beta.1"
   },
   "exports": {
     ".": {