@stainless-api/docs-ui 0.1.0-beta.53 → 0.1.0-beta.54

package/dist/{sdk-BBe_u8ZX.d.ts → sdk-CpRaFmFQ.d.ts}

@@ -1,6 +1,6 @@
-import { t as DocsLanguage } from "./routing-BcWYAHJp.js";
+import { t as DocsLanguage } from "./routing-CUnVDpU-.js";
 import * as React$1 from "react";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime55 from "react/jsx-runtime";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/components/sdk.d.ts
@@ -33,7 +33,7 @@ declare function SDKChildren({
   paths,
   expand,
   depth
-}: SDKChildrenProps): react_jsx_runtime41.JSX.Element;
+}: SDKChildrenProps): react_jsx_runtime55.JSX.Element;
 type SDKDeclarationProps = {
   path: string;
   expand?: boolean;
@@ -43,26 +43,26 @@ declare function SDKDeclaration({
   path,
   expand,
   depth
-}: SDKDeclarationProps): react_jsx_runtime41.JSX.Element;
+}: SDKDeclarationProps): react_jsx_runtime55.JSX.Element;
 type SDKConstraintsProps = {
   constraints?: Record<string, any>;
 };
 declare function SDKConstraints({
   constraints
-}: SDKConstraintsProps): react_jsx_runtime41.JSX.Element | undefined;
+}: SDKConstraintsProps): react_jsx_runtime55.JSX.Element | undefined;
 type SDKIconProps = {
   language: SDKJSON.SnippetLanguage;
   size?: number;
 };
 declare function SDKIcon({
   language
-}: SDKIconProps): react_jsx_runtime41.JSX.Element | null;
+}: SDKIconProps): react_jsx_runtime55.JSX.Element | null;
 type SDKRequestTitleProps = {
   snippetLanguage: SDKJSON.SnippetLanguage;
 };
 declare function SDKRequestTitle({
   snippetLanguage
-}: SDKRequestTitleProps): react_jsx_runtime41.JSX.Element;
+}: SDKRequestTitleProps): react_jsx_runtime55.JSX.Element;
 type SDKExampleProps = {
   method: SDKJSON.Method;
   transformRequestSnippet?: TransformRequestSnippetFn;
@@ -70,27 +70,27 @@ type SDKExampleProps = {
 declare function SDKExample({
   method,
   transformRequestSnippet
-}: SDKExampleProps): react_jsx_runtime41.JSX.Element;
+}: SDKExampleProps): react_jsx_runtime55.JSX.Element;
 type SDKMethodProps = {
   method: SDKJSON.Method;
   transformRequestSnippet?: TransformRequestSnippetFn;
 };
 declare function SDKMethodHeader({
   method
-}: SDKMethodProps): react_jsx_runtime41.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime55.JSX.Element;
 declare function SDKMethodInfo({
   method
-}: SDKMethodProps): react_jsx_runtime41.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime55.JSX.Element;
 declare function SDKMethod({
   method,
   transformRequestSnippet
-}: SDKMethodProps): react_jsx_runtime41.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime55.JSX.Element;
 type SDKModelProps = {
   model: SDKJSON.Model;
 };
 declare function SDKModel({
   model
-}: SDKModelProps): react_jsx_runtime41.JSX.Element | null;
+}: SDKModelProps): react_jsx_runtime55.JSX.Element | null;
 type SDKReferenceProps = {
   stainlessPath: string;
   children?: React$1.ReactNode;
@@ -98,7 +98,7 @@ type SDKReferenceProps = {
 declare function SDKReference({
   stainlessPath,
   children
-}: SDKReferenceProps): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime41.JSX.Element | null | undefined;
+}: SDKReferenceProps): string | number | bigint | boolean | react_jsx_runtime55.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
 type SDKLanguageBlockProps = {
   language: DocsLanguage;
   version: string;
@@ -113,6 +113,6 @@ declare function SDKLanguageBlock({
   version,
   install,
   links
-}: SDKLanguageBlockProps): react_jsx_runtime41.JSX.Element;
+}: SDKLanguageBlockProps): react_jsx_runtime55.JSX.Element;
 //#endregion
 export { TransformRequestSnippetFn as C, SDKSnippetLanguagesType as S, useReferenceNesting as T, SDKModelProps as _, SDKChildren as a, SDKRequestTitleProps as b, SDKDeclaration as c, SDKLanguageBlock as d, SDKMethod as f, SDKModel as g, SDKMethodProps as h, ReferenceNestingContextType as i, SDKExample as l, SDKMethodInfo as m, PropertyModelContextType as n, SDKConstraints as o, SDKMethodHeader as p, ReferenceNestingContext as r, SDKConstraintsProps as s, PropertyModelContext as t, SDKIcon as u, SDKReference as v, usePropertyModel as w, SDKSnippetLanguages as x, SDKRequestTitle as y };

package/dist/{sdk-BKdaidz1.js → sdk-DEoUlY8I.js}

@@ -2,7 +2,7 @@ import { a as useLanguage, l as useSpec, n as useContentPanelLayout, r as useDec
 import { n as useNavigation } from "./navigation-C5TN0SgC.js";
 import { n as useLanguageComponents } from "./contexts-CLpvBI91.js";
 import { t as useComponents } from "./use-components-DBx5LZk0.js";
-import { t as style_default } from "./style-gnVEeXFj.js";
+import { t as style_default } from "./style-cJZFOvnF.js";
 import { c as getLanguageSnippet, t as LanguageNames } from "./routing-Dl0FprK1.js";
 import { a as KotlinIcon, c as RubyIcon, i as JavaIcon, l as TerraformIcon, n as CurlIcon, o as PowershellIcon, r as GoIcon, s as PythonIcon, t as CSharpIcon, u as TypescriptIcon } from "./icons-Ckod9aod.js";
 import * as React$1 from "react";

package/dist/{sidebar-BaDPwqdV.d.ts → sidebar-CgBa9Ckc.d.ts}

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime75 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/components/sidebar.d.ts
@@ -12,25 +12,25 @@ declare function SidebarExpander({
   open,
   summary,
   children
-}: SidebarExpanderProps): react_jsx_runtime75.JSX.Element;
+}: SidebarExpanderProps): react_jsx_runtime18.JSX.Element;
 type SidebarMethodProps = {
   method: SDKJSON.Method;
 };
 declare function SidebarMethod({
   method
-}: SidebarMethodProps): react_jsx_runtime75.JSX.Element;
+}: SidebarMethodProps): react_jsx_runtime18.JSX.Element;
 type SidebarResourceProps = {
   resource: SDKJSON.Resource;
 };
 declare function SidebarResource({
   resource
-}: SidebarResourceProps): react_jsx_runtime75.JSX.Element;
+}: SidebarResourceProps): react_jsx_runtime18.JSX.Element;
 type SidebarProps = {
   resources: SDKJSON.Resource[];
   selectedPath?: string;
 };
 declare function Sidebar({
   resources
-}: SidebarProps): react_jsx_runtime75.JSX.Element;
+}: SidebarProps): react_jsx_runtime18.JSX.Element;
 //#endregion
 export { SidebarProps as a, SidebarMethodProps as i, SidebarExpander as n, SidebarResource as o, SidebarMethod as r, SidebarResourceProps as s, Sidebar as t };

package/dist/{sidebar-sPFdjATU.d.ts → sidebar-DImBt9YH.d.ts}

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime53 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/components/sidebar.d.ts
@@ -12,25 +12,25 @@ declare function SidebarExpander({
   open,
   summary,
   children
-}: SidebarExpanderProps): react_jsx_runtime53.JSX.Element;
+}: SidebarExpanderProps): react_jsx_runtime43.JSX.Element;
 type SidebarMethodProps = {
   method: SDKJSON.Method;
 };
 declare function SidebarMethod({
   method
-}: SidebarMethodProps): react_jsx_runtime53.JSX.Element;
+}: SidebarMethodProps): react_jsx_runtime43.JSX.Element;
 type SidebarResourceProps = {
   resource: SDKJSON.Resource;
 };
 declare function SidebarResource({
   resource
-}: SidebarResourceProps): react_jsx_runtime53.JSX.Element;
+}: SidebarResourceProps): react_jsx_runtime43.JSX.Element;
 type SidebarProps = {
   resources: SDKJSON.Resource[];
   selectedPath?: string;
 };
 declare function Sidebar({
   resources
-}: SidebarProps): react_jsx_runtime53.JSX.Element;
+}: SidebarProps): react_jsx_runtime43.JSX.Element;
 //#endregion
 export { SidebarProps as a, SidebarMethodProps as i, SidebarExpander as n, SidebarResource as o, SidebarMethod as r, SidebarResourceProps as s, Sidebar as t };

package/dist/{sidebar-BWDZQSmn.js → sidebar-D_cK7JN_.js}

@@ -1,7 +1,7 @@
 import { n as useNavigation } from "./navigation-C5TN0SgC.js";
 import { t as useComponents } from "./use-components-DBx5LZk0.js";
-import { t as style_default } from "./style-gnVEeXFj.js";
-import { o as MethodIconBadge } from "./method-qhstNvML.js";
+import { t as style_default } from "./style-cJZFOvnF.js";
+import { o as MethodIconBadge } from "./method-nEcioXL5.js";
 import { r as isResourceEmpty } from "./utils-C12Fme2N.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{snippets-DYnUt5eM.js → snippets-BiXJx1BL.js}

@@ -1,7 +1,7 @@
 import { a as useLanguage, c as useSnippet, r as useDeclaration } from "./docs-CXqi26jB.js";
 import { r as useHighlight } from "./markdown-CxdeWgjV.js";
 import { t as useComponents } from "./use-components-DBx5LZk0.js";
-import { t as style_default } from "./style-gnVEeXFj.js";
+import { t as style_default } from "./style-cJZFOvnF.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CircleAlertIcon, CopyIcon } from "lucide-react";

package/dist/{snippets-B0sKAjU-.d.ts → snippets-Cemr-6OZ.d.ts}

@@ -1,6 +1,6 @@
-import { C as TransformRequestSnippetFn } from "./sdk-BBe_u8ZX.js";
+import { C as TransformRequestSnippetFn } from "./sdk-BQEqCwI6.js";
 import * as React$1 from "react";
-import * as react_jsx_runtime57 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/components/snippets.d.ts
@@ -12,7 +12,7 @@ type SnippetCodeProps = {
 declare function SnippetCode({
   content,
   language
-}: SnippetCodeProps): react_jsx_runtime57.JSX.Element;
+}: SnippetCodeProps): react_jsx_runtime47.JSX.Element;
 type SnippetProps = {
   method: SDKJSON.Method;
   requestTitle?: React$1.ReactNode;
@@ -24,28 +24,28 @@ type SnippetContainerProps = {
 };
 declare function SnippetContainer({
   children
-}: SnippetContainerProps): react_jsx_runtime57.JSX.Element;
+}: SnippetContainerProps): react_jsx_runtime47.JSX.Element;
 type SnippetRequestContainerProps = {
   children?: React$1.ReactNode;
   signature?: string;
 };
 declare function SnippetRequestContainer({
   children
-}: SnippetRequestContainerProps): react_jsx_runtime57.JSX.Element;
+}: SnippetRequestContainerProps): react_jsx_runtime47.JSX.Element;
 declare function Snippet({
   requestTitle,
   method,
   transformRequestSnippet
-}: SnippetProps): react_jsx_runtime57.JSX.Element | null;
+}: SnippetProps): react_jsx_runtime47.JSX.Element | null;
 declare function SnippetButtons({
   content
 }: {
   content: string;
-}): react_jsx_runtime57.JSX.Element;
+}): react_jsx_runtime47.JSX.Element;
 declare function SnippetResponse({
   responses
 }: {
   responses: SDKJSON.Method['exampleResponses'];
-}): react_jsx_runtime57.JSX.Element | null;
+}): react_jsx_runtime47.JSX.Element | null;
 //#endregion
 export { SnippetContainer as a, SnippetRequestContainer as c, SnippetCodeProps as i, SnippetRequestContainerProps as l, SnippetButtons as n, SnippetContainerProps as o, SnippetCode as r, SnippetProps as s, Snippet as t, SnippetResponse as u };

package/dist/{snippets-BQgrub4H.d.ts → snippets-DCiTB0N4.d.ts}

@@ -1,6 +1,6 @@
-import { C as TransformRequestSnippetFn } from "./sdk-zkHxx2nq.js";
+import { C as TransformRequestSnippetFn } from "./sdk-CpRaFmFQ.js";
 import * as React$1 from "react";
-import * as react_jsx_runtime79 from "react/jsx-runtime";
+import * as react_jsx_runtime81 from "react/jsx-runtime";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/components/snippets.d.ts
@@ -12,7 +12,7 @@ type SnippetCodeProps = {
 declare function SnippetCode({
   content,
   language
-}: SnippetCodeProps): react_jsx_runtime79.JSX.Element;
+}: SnippetCodeProps): react_jsx_runtime81.JSX.Element;
 type SnippetProps = {
   method: SDKJSON.Method;
   requestTitle?: React$1.ReactNode;
@@ -24,28 +24,28 @@ type SnippetContainerProps = {
 };
 declare function SnippetContainer({
   children
-}: SnippetContainerProps): react_jsx_runtime79.JSX.Element;
+}: SnippetContainerProps): react_jsx_runtime81.JSX.Element;
 type SnippetRequestContainerProps = {
   children?: React$1.ReactNode;
   signature?: string;
 };
 declare function SnippetRequestContainer({
   children
-}: SnippetRequestContainerProps): react_jsx_runtime79.JSX.Element;
+}: SnippetRequestContainerProps): react_jsx_runtime81.JSX.Element;
 declare function Snippet({
   requestTitle,
   method,
   transformRequestSnippet
-}: SnippetProps): react_jsx_runtime79.JSX.Element | null;
+}: SnippetProps): react_jsx_runtime81.JSX.Element | null;
 declare function SnippetButtons({
   content
 }: {
   content: string;
-}): react_jsx_runtime79.JSX.Element;
+}): react_jsx_runtime81.JSX.Element;
 declare function SnippetResponse({
   responses
 }: {
   responses: SDKJSON.Method['exampleResponses'];
-}): react_jsx_runtime79.JSX.Element | null;
+}): react_jsx_runtime81.JSX.Element | null;
 //#endregion
 export { SnippetContainer as a, SnippetRequestContainer as c, SnippetCodeProps as i, SnippetRequestContainerProps as l, SnippetButtons as n, SnippetContainerProps as o, SnippetCode as r, SnippetProps as s, Snippet as t, SnippetResponse as u };

package/dist/spec.d.ts

@@ -1,4 +1,4 @@
-import { t as DocsLanguage } from "./routing-BcWYAHJp.js";
+import { t as DocsLanguage } from "./routing-CUnVDpU-.js";
 import * as SDKJSON from "@stainless/sdk-json";
 
 //#region src/spec.d.ts
@@ -36,13 +36,13 @@ declare function generateNavigation(resource: Partial<SDKJSON.Resource>): {
 declare function generateSpecForResource(spec: SDKJSON.Spec, name: string, lang: DocsLanguage, transforms: SpecTransforms): Partial<SDKJSON.Spec>;
 declare function transform(spec: SDKJSON.Spec, transforms: SpecTransforms): {
   name: string;
-  lang: "node" | "go" | "python" | "terraform" | "http" | "typescript" | "ruby" | "java" | "kotlin" | "csharp" | "php";
+  lang: "http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin" | "csharp" | "php";
   spec: Partial<SDKJSON.Spec>;
 }[];
 declare function split(spec: SDKJSON.Spec, transforms?: SpecTransforms): {
   resources: ReturnType<typeof transform>;
   navigation: {
-    languages: ("node" | "go" | "python" | "terraform" | "http" | "typescript" | "ruby" | "java" | "kotlin")[] | undefined;
+    languages: ("http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin")[] | undefined;
     resources: {
       [k: string]: {
         title: string | undefined;

package/dist/{style-gnVEeXFj.js → style-cJZFOvnF.js}

@@ -20,6 +20,7 @@ var style_default = {
 	TooltipHost: "stldocs-tooltip-host",
 	TooltipContent: "stldocs-tooltip-content",
 	Input: "stldocs-input",
+	InputDisabled: "stldocs-input-disabled",
 	InputTextField: "stldocs-input-textfield",
 	MaskedInputWrapper: "stldocs-masked-input-wrapper",
 	MaskedInputDisplay: "stldocs-masked-input-display",
@@ -151,6 +152,8 @@ var style_default = {
 	SearchResultResourcePath: "stldocs-search-result-resource-path",
 	SearchResultGuideTitle: "stldocs-search-result-guide-title",
 	SearchResultGuideExcerpt: "stldocs-search-result-guide-excerpt",
+	SearchDisabledStateContainer: "stldocs-search-disabled-state-container",
+	SearchModalCloseButton: "stldocs-search-modal-close-button",
 	LanguageBlock: "stldocs-language-block",
 	LanguageBlockContent: "stldocs-language-block-content",
 	LanguageBlockContentIcon: "stldocs-language-block-content-icon",

package/dist/style.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
   readonly TooltipHost: "stldocs-tooltip-host";
   readonly TooltipContent: "stldocs-tooltip-content";
   readonly Input: "stldocs-input";
+  readonly InputDisabled: "stldocs-input-disabled";
   readonly InputTextField: "stldocs-input-textfield";
   readonly MaskedInputWrapper: "stldocs-masked-input-wrapper";
   readonly MaskedInputDisplay: "stldocs-masked-input-display";
@@ -151,6 +152,8 @@ declare const _default: {
   readonly SearchResultResourcePath: "stldocs-search-result-resource-path";
   readonly SearchResultGuideTitle: "stldocs-search-result-guide-title";
   readonly SearchResultGuideExcerpt: "stldocs-search-result-guide-excerpt";
+  readonly SearchDisabledStateContainer: "stldocs-search-disabled-state-container";
+  readonly SearchModalCloseButton: "stldocs-search-modal-close-button";
   readonly LanguageBlock: "stldocs-language-block";
   readonly LanguageBlockContent: "stldocs-language-block-content";
   readonly LanguageBlockContentIcon: "stldocs-language-block-content-icon";

package/dist/style.js

@@ -1,3 +1,3 @@
-import { t as style_default } from "./style-gnVEeXFj.js";
+import { t as style_default } from "./style-cJZFOvnF.js";
 
 export { style_default as default };

package/dist/styles/primitives.css

@@ -228,6 +228,7 @@
   p {
     display: block;
     margin: 0 0 1em;
+    line-height: 150%;
 
     &:last-child {
       margin: 0;
@@ -255,21 +256,24 @@
 .stldocs-root .stldocs-input {
   border: 1px solid var(--stl-color-border);
   background: var(--stl-color-background);
-  border-radius: 0.3rem;
+  border-radius: var(--stl-ui-layout-border-radius-sml);
   display: flex;
-  gap: 0.5rem;
 
   &:focus-within {
     border-color: var(--stl-color-accent);
   }
 
+  &.stldocs-input-disabled {
+    opacity: 0.5;
+  }
+
   input,
   .stldocs-masked-input-display {
     flex-grow: 1;
     border: none;
     background-color: transparent;
     margin: 0.5rem;
-    font-size: 0.85rem;
+    font-size: 1rem;
     letter-spacing: initial;
     white-space: pre;
     contain: content;
@@ -290,8 +294,7 @@
   }
 
   .stldocs-icon {
-    margin-top: auto;
-    margin-bottom: auto;
+    margin: auto 0.25rem auto 0.75rem;
   }
 }
 
@@ -318,7 +321,9 @@
   }
 
   [data-stldocs-listview-selected='true'] > :first-child {
-    background-color: var(--stldocs-color-selected);
+    background:
+      linear-gradient(var(--stl-color-ui-background-hover), var(--stl-color-ui-background-hover)),
+      linear-gradient(var(--stl-color-ui-background), var(--stl-color-ui-background));
     border-radius: 0.5rem;
   }
 }

package/dist/styles/search.css

@@ -7,32 +7,8 @@
     display: flex;
     gap: 1rem;
 
-    .stldocs-togglebutton {
-      display: flex;
+    .stl-ui-button {
       flex-grow: 1;
-      gap: 0.5rem;
-      border-radius: 8px;
-      padding: 0.4em 0.8em;
-      line-height: 1.5;
-      justify-content: center;
-      font-size: 0.9rem;
-      cursor: pointer;
-      background-color: transparent;
-      border: 1px solid var(--stl-color-border);
-
-      &:hover,
-      &[data-stldocs-toggle-selected='true'] {
-        background-color: var(--stldocs-color-selected);
-
-        .stldocs-search-filter-count {
-          color: var(--stl-color-inverse-foreground);
-          background-color: var(--stl-color-foreground);
-        }
-      }
-
-      .stldocs-icon {
-        margin: auto 0;
-      }
 
       .stldocs-search-filter-count {
         font-size: 0.75rem;
@@ -71,6 +47,9 @@
         .stldocs-search-result-resource-path {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
     }
@@ -177,6 +156,9 @@
     display: flex;
     gap: 0.5rem;
     font-size: 0.8rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     .stldocs-search-breadcrumb-item {
       color: var(--stl-color-foreground-muted);
@@ -187,31 +169,36 @@
       margin-bottom: auto;
     }
   }
+
+  .stldocs-search-disabled-state-container {
+    margin: auto;
+    text-align: center;
+  }
 }
 
 .stldocs-root .stldocs-search-modal {
-  height: 100%;
+  height: calc(100svh - var(--sl-nav-height));
   width: 100%;
   overflow: hidden;
-  margin: 3rem auto;
   display: none;
   padding: 1rem;
   inset: 0;
-  max-width: 1024px;
-  max-height: 80vh;
   background-color: var(--stl-color-background);
   color: var(--stl-color-foreground);
-  border: 1px solid var(--stl-color-border);
-  border-radius: 8px;
+  gap: 0.5rem;
+  border: none;
 
   &:popover-open,
   &[data-stldocs-modal-open='true'] {
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: fixed;
+    top: var(--sl-nav-height);
   }
 
   .stldocs-search-form {
     height: 100%;
+    width: 100%;
 
     .stldocs-listview {
       margin: 0.8rem 0;
@@ -219,10 +206,16 @@
     }
   }
 
+  .stldocs-search-modal-close-button {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   &::backdrop {
     background-color: var(--stldocs-color-backdrop-overlay);
     -webkit-backdrop-filter: blur(0.25rem);
     backdrop-filter: blur(0.25rem);
+    top: var(--sl-nav-height);
   }
 }
 
@@ -232,6 +225,32 @@
   }
 }
 
+@media (min-width: 50rem) {
+  .stldocs-root {
+    .stldocs-search-modal {
+      height: 100%;
+      max-width: 1024px;
+      max-height: 80vh;
+      margin: 3rem auto;
+      border: 1px solid var(--stl-color-border);
+      border-radius: var(--stl-ui-layout-border-radius-sml);
+
+      .stldocs-search-modal-close-button {
+        display: none;
+      }
+
+      &:popover-open,
+      &[data-stldocs-modal-open='true'] {
+        top: 0;
+      }
+
+      &::backdrop {
+        top: 0;
+      }
+    }
+  }
+}
+
 @media (max-width: 50rem) {
   .stldocs-root .stldocs-search-modal {
     .stldocs-search-filter-label,