@stainless-api/docs 0.1.0-beta.6 → 0.1.0-beta.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/CHANGELOG.md +486 -0
  2. package/README.md +1 -1
  3. package/eslint-suppressions.json +52 -0
  4. package/locals.d.ts +16 -0
  5. package/package.json +45 -40
  6. package/plugin/assets/languages/csharp.svg +1 -0
  7. package/plugin/buildAlgoliaIndex.ts +32 -7
  8. package/plugin/cms/server.ts +130 -58
  9. package/plugin/cms/sidebar-builder.ts +7 -26
  10. package/plugin/cms/worker.ts +83 -5
  11. package/plugin/components/MethodDescription.tsx +54 -0
  12. package/plugin/components/SDKSelect.astro +7 -87
  13. package/plugin/components/SnippetCode.tsx +53 -8
  14. package/plugin/components/search/SearchAlgolia.astro +14 -26
  15. package/plugin/components/search/SearchIsland.tsx +38 -24
  16. package/plugin/create-playground.shim.tsx +3 -0
  17. package/plugin/generateAPIReferenceLink.ts +2 -2
  18. package/plugin/globalJs/ai-dropdown-options.ts +235 -0
  19. package/plugin/globalJs/code-snippets.ts +15 -8
  20. package/plugin/globalJs/copy.ts +81 -16
  21. package/plugin/globalJs/method-descriptions.ts +33 -0
  22. package/plugin/globalJs/navigation.ts +7 -4
  23. package/plugin/index.ts +179 -35
  24. package/plugin/languages.ts +5 -2
  25. package/plugin/loadPluginConfig.ts +121 -32
  26. package/plugin/middlewareBuilder/stainlessMiddleware.d.ts +1 -1
  27. package/plugin/react/Routing.tsx +208 -104
  28. package/plugin/referencePlaceholderUtils.ts +1 -1
  29. package/plugin/replaceSidebarPlaceholderMiddleware.ts +5 -1
  30. package/plugin/routes/Docs.astro +61 -83
  31. package/plugin/routes/Overview.astro +10 -16
  32. package/plugin/routes/markdown.ts +7 -7
  33. package/plugin/vendor/preview.worker.docs.js +19768 -17702
  34. package/plugin/vendor/templates/go.md +1 -1
  35. package/plugin/vendor/templates/python.md +1 -1
  36. package/resolveSrcFile.ts +10 -0
  37. package/scripts/vendor_deps.ts +5 -5
  38. package/shared/getSharedLogger.ts +15 -0
  39. package/shared/terminalUtils.ts +3 -0
  40. package/src/content.config.ts +9 -0
  41. package/stl-docs/components/AIDropdown.tsx +63 -0
  42. package/stl-docs/components/AiChatIsland.tsx +10 -0
  43. package/stl-docs/components/{content-panel/ContentBreadcrumbs.tsx → ContentBreadcrumbs.tsx} +10 -18
  44. package/stl-docs/components/Head.astro +16 -0
  45. package/stl-docs/components/Header.astro +6 -8
  46. package/stl-docs/components/PageFrame.astro +14 -0
  47. package/stl-docs/components/PageTitle.astro +82 -0
  48. package/stl-docs/components/TableOfContents.astro +34 -0
  49. package/stl-docs/components/ThemeSelect.astro +118 -136
  50. package/stl-docs/components/content-panel/ContentPanel.astro +16 -25
  51. package/stl-docs/components/headers/SplashMobileMenuToggle.astro +17 -1
  52. package/stl-docs/components/headers/StackedHeader.astro +29 -24
  53. package/stl-docs/components/icons/chat-gpt.tsx +17 -0
  54. package/stl-docs/components/icons/claude.tsx +10 -0
  55. package/stl-docs/components/icons/cursor.tsx +10 -0
  56. package/stl-docs/components/icons/gemini.tsx +19 -0
  57. package/stl-docs/components/icons/markdown.tsx +10 -0
  58. package/stl-docs/components/index.ts +1 -0
  59. package/stl-docs/components/mintlify-compat/Accordion.astro +7 -5
  60. package/stl-docs/components/mintlify-compat/AccordionGroup.astro +7 -3
  61. package/stl-docs/components/mintlify-compat/Columns.astro +40 -42
  62. package/stl-docs/components/mintlify-compat/Frame.astro +16 -18
  63. package/stl-docs/components/mintlify-compat/Step.astro +30 -32
  64. package/stl-docs/components/mintlify-compat/Steps.astro +8 -10
  65. package/stl-docs/components/mintlify-compat/callouts/Callout.astro +1 -1
  66. package/stl-docs/components/mintlify-compat/callouts/Check.astro +1 -1
  67. package/stl-docs/components/mintlify-compat/callouts/Danger.astro +1 -1
  68. package/stl-docs/components/mintlify-compat/callouts/Info.astro +1 -1
  69. package/stl-docs/components/mintlify-compat/callouts/Note.astro +1 -1
  70. package/stl-docs/components/mintlify-compat/callouts/Tip.astro +1 -1
  71. package/stl-docs/components/mintlify-compat/callouts/Warning.astro +1 -1
  72. package/stl-docs/components/mintlify-compat/card.css +33 -35
  73. package/stl-docs/components/nav-tabs/NavDropdown.astro +31 -70
  74. package/stl-docs/components/nav-tabs/NavTabs.astro +78 -80
  75. package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro +15 -8
  76. package/stl-docs/components/nav-tabs/buildNavLinks.ts +3 -2
  77. package/stl-docs/components/pagination/HomeLink.astro +10 -0
  78. package/stl-docs/components/pagination/Pagination.astro +175 -0
  79. package/stl-docs/components/pagination/PaginationLinkEmphasized.astro +22 -0
  80. package/stl-docs/components/pagination/PaginationLinkQuiet.astro +13 -0
  81. package/stl-docs/components/pagination/util.ts +71 -0
  82. package/stl-docs/components/scripts.ts +1 -0
  83. package/stl-docs/disableCalloutSyntax.ts +36 -0
  84. package/stl-docs/index.ts +130 -48
  85. package/stl-docs/loadStlDocsConfig.ts +44 -4
  86. package/stl-docs/proseMarkdown/proseMarkdownIntegration.ts +64 -0
  87. package/stl-docs/proseMarkdown/proseMarkdownMiddleware.ts +34 -0
  88. package/stl-docs/proseMarkdown/toMarkdown.ts +158 -0
  89. package/stl-docs/proseSearchIndexing.ts +113 -0
  90. package/stl-docs/tabsMiddleware.ts +11 -3
  91. package/styles/code.css +108 -140
  92. package/styles/fonts.css +32 -17
  93. package/styles/links.css +11 -48
  94. package/styles/method-descriptions.css +36 -0
  95. package/styles/overrides.css +48 -60
  96. package/styles/page.css +92 -52
  97. package/styles/sdk_select.css +9 -7
  98. package/styles/search.css +58 -69
  99. package/styles/sidebar.css +211 -131
  100. package/styles/{variables.css → sl-variables.css} +3 -2
  101. package/styles/stldocs-variables.css +6 -0
  102. package/styles/toc.css +41 -34
  103. package/theme.css +10 -10
  104. package/tsconfig.json +2 -5
  105. package/virtual-module.d.ts +23 -3
  106. package/components/variables.css +0 -135
  107. /package/{plugin/assets → assets}/fonts/geist/OFL.txt +0 -0
  108. /package/{plugin/assets → assets}/fonts/geist/geist-italic-latin-ext.woff2 +0 -0
  109. /package/{plugin/assets → assets}/fonts/geist/geist-italic-latin.woff2 +0 -0
  110. /package/{plugin/assets → assets}/fonts/geist/geist-latin-ext.woff2 +0 -0
  111. /package/{plugin/assets → assets}/fonts/geist/geist-latin.woff2 +0 -0
  112. /package/{plugin/assets → assets}/fonts/geist/geist-mono-italic-latin-ext.woff2 +0 -0
  113. /package/{plugin/assets → assets}/fonts/geist/geist-mono-italic-latin.woff2 +0 -0
  114. /package/{plugin/assets → assets}/fonts/geist/geist-mono-latin-ext.woff2 +0 -0
  115. /package/{plugin/assets → assets}/fonts/geist/geist-mono-latin.woff2 +0 -0
package/stl-docs/components/mintlify-compat/Columns.astro CHANGED
@@ -16,51 +16,49 @@ const { cols } = Astro.props;
16
16
  </div>
17
17
 
18
18
  <style>
19
- @layer stl-ui-mintlify-compat {
20
- .stl-ui-mintlify-compat-columns {
21
- display: grid;
22
- gap: 1rem;
23
- grid-template-columns: 1fr;
19
+ .stl-ui-mintlify-compat-columns {
20
+ display: grid;
21
+ gap: 1rem;
22
+ grid-template-columns: 1fr;
24
23
 
25
- > [data-stl-ui-element] {
26
- margin: 0;
27
- }
24
+ > [data-stl-ui-element] {
25
+ margin: 0;
28
26
  }
27
+ }
29
28
 
30
- @media (min-width: 50rem) {
31
- .stl-ui-mintlify-compat-columns--2 {
32
- grid-template-columns: repeat(2, minmax(0, 1fr));
33
- }
34
- .stl-ui-mintlify-compat-columns--3 {
35
- grid-template-columns: repeat(3, minmax(0, 1fr));
36
- }
37
- .stl-ui-mintlify-compat-columns--4 {
38
- grid-template-columns: repeat(4, minmax(0, 1fr));
39
- }
40
- .stl-ui-mintlify-compat-columns--5 {
41
- grid-template-columns: repeat(5, minmax(0, 1fr));
42
- }
43
- .stl-ui-mintlify-compat-columns--6 {
44
- grid-template-columns: repeat(6, minmax(0, 1fr));
45
- }
46
- .stl-ui-mintlify-compat-columns--7 {
47
- grid-template-columns: repeat(7, minmax(0, 1fr));
48
- }
49
- .stl-ui-mintlify-compat-columns--8 {
50
- grid-template-columns: repeat(8, minmax(0, 1fr));
51
- }
52
- .stl-ui-mintlify-compat-columns--9 {
53
- grid-template-columns: repeat(9, minmax(0, 1fr));
54
- }
55
- .stl-ui-mintlify-compat-columns--10 {
56
- grid-template-columns: repeat(10, minmax(0, 1fr));
57
- }
58
- .stl-ui-mintlify-compat-columns--11 {
59
- grid-template-columns: repeat(11, minmax(0, 1fr));
60
- }
61
- .stl-ui-mintlify-compat-columns--12 {
62
- grid-template-columns: repeat(12, minmax(0, 1fr));
63
- }
29
+ @media (min-width: 50rem) {
30
+ .stl-ui-mintlify-compat-columns--2 {
31
+ grid-template-columns: repeat(2, minmax(0, 1fr));
32
+ }
33
+ .stl-ui-mintlify-compat-columns--3 {
34
+ grid-template-columns: repeat(3, minmax(0, 1fr));
35
+ }
36
+ .stl-ui-mintlify-compat-columns--4 {
37
+ grid-template-columns: repeat(4, minmax(0, 1fr));
38
+ }
39
+ .stl-ui-mintlify-compat-columns--5 {
40
+ grid-template-columns: repeat(5, minmax(0, 1fr));
41
+ }
42
+ .stl-ui-mintlify-compat-columns--6 {
43
+ grid-template-columns: repeat(6, minmax(0, 1fr));
44
+ }
45
+ .stl-ui-mintlify-compat-columns--7 {
46
+ grid-template-columns: repeat(7, minmax(0, 1fr));
47
+ }
48
+ .stl-ui-mintlify-compat-columns--8 {
49
+ grid-template-columns: repeat(8, minmax(0, 1fr));
50
+ }
51
+ .stl-ui-mintlify-compat-columns--9 {
52
+ grid-template-columns: repeat(9, minmax(0, 1fr));
53
+ }
54
+ .stl-ui-mintlify-compat-columns--10 {
55
+ grid-template-columns: repeat(10, minmax(0, 1fr));
56
+ }
57
+ .stl-ui-mintlify-compat-columns--11 {
58
+ grid-template-columns: repeat(11, minmax(0, 1fr));
59
+ }
60
+ .stl-ui-mintlify-compat-columns--12 {
61
+ grid-template-columns: repeat(12, minmax(0, 1fr));
64
62
  }
65
63
  }
66
64
  </style>
package/stl-docs/components/mintlify-compat/Frame.astro CHANGED
@@ -12,26 +12,24 @@ const { caption } = Astro.props;
12
12
  </div>
13
13
 
14
14
  <style>
15
- @layer stl-ui-mintlify-compat {
16
- .stl-ui-mintlify-compat-frame {
17
- padding: 6px;
18
- border-radius: 10px;
19
- background-color: var(--sl-color-gray-7);
20
- border: 1px solid var(--sl-color-gray-6);
15
+ .stl-ui-mintlify-compat-frame {
16
+ padding: 6px;
17
+ border-radius: 10px;
18
+ background-color: var(--stl-color-ui-background);
19
+ border: 1px solid var(--stl-color-border);
21
20
 
22
- .stl-ui-mintlify-compat-frame-content {
23
- border-radius: 8px;
24
- overflow: hidden;
25
- }
21
+ .stl-ui-mintlify-compat-frame-content {
22
+ border-radius: 8px;
23
+ overflow: hidden;
24
+ }
26
25
 
27
- .stl-ui-mintlify-compat-frame-caption {
28
- text-align: center;
29
- padding-top: 12px;
30
- padding-bottom: 6px;
31
- font-size: var(--sl-text-body);
32
- color: var(--sl-color-gray-3);
33
- line-height: 100%;
34
- }
26
+ .stl-ui-mintlify-compat-frame-caption {
27
+ text-align: center;
28
+ padding-top: 12px;
29
+ padding-bottom: 6px;
30
+ font-size: var(--stl-typography-scale-base);
31
+ color: var(--stl-color-foreground-reduced);
32
+ line-height: 100%;
35
33
  }
36
34
  }
37
35
  </style>
package/stl-docs/components/mintlify-compat/Step.astro CHANGED
@@ -15,44 +15,42 @@ const { title } = Astro.props;
15
15
  </li>
16
16
 
17
17
  <style>
18
- @layer stl-ui-mintlify-compat {
19
- .stl-ui-mintlify-compat-step {
20
- display: flex;
18
+ .stl-ui-mintlify-compat-step {
19
+ display: flex;
21
20
 
22
- &:not(:first-child) {
23
- margin-top: 1rem;
24
- }
21
+ &:not(:first-child) {
22
+ margin-top: 1rem;
25
23
  }
24
+ }
25
+
26
+ .stl-ui-mintlify-compat-step-step-number {
27
+ margin-right: 1rem;
28
+ display: flex;
29
+ align-items: top;
30
+ justify-content: center;
31
+ margin-top: 4px;
26
32
 
27
- .stl-ui-mintlify-compat-step-step-number {
28
- margin-right: 1rem;
33
+ &::before {
34
+ counter-increment: ui-steps;
35
+ content: counter(ui-steps);
36
+ border-radius: 50%;
37
+ height: 1.5rem;
38
+ width: 1.5rem;
39
+ font-size: 0.8rem;
40
+ color: var(--stl-color-foreground);
41
+ font-weight: 600;
42
+ background-color: var(--stl-color-faint-background);
29
43
  display: flex;
30
- align-items: top;
44
+ align-items: center;
31
45
  justify-content: center;
32
- margin-top: 4px;
33
-
34
- &::before {
35
- counter-increment: ui-steps;
36
- content: counter(ui-steps);
37
- border-radius: 50%;
38
- height: 1.5rem;
39
- width: 1.5rem;
40
- font-size: 0.8rem;
41
- color: var(--sl-color-text);
42
- font-weight: 600;
43
- background-color: var(--sl-color-gray-5);
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
- }
48
46
  }
47
+ }
49
48
 
50
- .stl-ui-mintlify-compat-step-title {
51
- font-weight: 600;
52
- color: var(--sl-color-text);
53
- }
54
- .stl-ui-mintlify-compat-step-content {
55
- margin-top: 0.5rem;
56
- }
49
+ .stl-ui-mintlify-compat-step-title {
50
+ font-weight: 600;
51
+ color: var(--stl-color-foreground);
52
+ }
53
+ .stl-ui-mintlify-compat-step-content {
54
+ margin-top: 0.5rem;
57
55
  }
58
56
  </style>
package/stl-docs/components/mintlify-compat/Steps.astro CHANGED
@@ -1,17 +1,15 @@
1
1
  <ol class="stl-ui-mintlify-compat-steps"><slot /></ol>
2
2
 
3
3
  <style>
4
- @layer stl-ui-mintlify-compat {
5
- .stl-ui-mintlify-compat-steps {
6
- counter-reset: ui-steps;
7
- list-style: none;
8
- margin: 0;
9
- padding: 0;
10
- margin-top: 1rem;
4
+ .stl-ui-mintlify-compat-steps {
5
+ counter-reset: ui-steps;
6
+ list-style: none;
7
+ margin: 0;
8
+ padding: 0;
9
+ margin-top: 1rem;
11
10
 
12
- * {
13
- margin: 0;
14
- }
11
+ * {
12
+ margin: 0;
15
13
  }
16
14
  }
17
15
  </style>
package/stl-docs/components/mintlify-compat/callouts/Callout.astro CHANGED
@@ -3,7 +3,7 @@ import { Callout as StainlessCallout, type CalloutVariant } from '@stainless-api
3
3
 
4
4
  export interface Props {
5
5
  variant?: CalloutVariant;
6
- children: unknown;
6
+ children: astroHTML.JSX.Children;
7
7
  }
8
8
 
9
9
  const { variant } = Astro.props;
package/stl-docs/components/mintlify-compat/callouts/Check.astro CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Callout } from '@stainless-api/ui-primitives';
3
3
 
4
4
  export interface Props {
5
- children: unknown;
5
+ children: astroHTML.JSX.Children;
6
6
  }
7
7
  ---
8
8
 
package/stl-docs/components/mintlify-compat/callouts/Danger.astro CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Callout } from '@stainless-api/ui-primitives';
3
3
 
4
4
  export interface Props {
5
- children: unknown;
5
+ children: astroHTML.JSX.Children;
6
6
  }
7
7
  ---
8
8
 
package/stl-docs/components/mintlify-compat/callouts/Info.astro CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Callout } from '@stainless-api/ui-primitives';
3
3
 
4
4
  export interface Props {
5
- children: unknown;
5
+ children: astroHTML.JSX.Children;
6
6
  }
7
7
  ---
8
8
 
package/stl-docs/components/mintlify-compat/callouts/Note.astro CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Callout } from '@stainless-api/ui-primitives';
3
3
 
4
4
  export interface Props {
5
- children: unknown;
5
+ children: astroHTML.JSX.Children;
6
6
  }
7
7
  ---
8
8
 
package/stl-docs/components/mintlify-compat/callouts/Tip.astro CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Callout } from '@stainless-api/ui-primitives';
3
3
 
4
4
  export interface Props {
5
- children: unknown;
5
+ children: astroHTML.JSX.Children;
6
6
  }
7
7
  ---
8
8
 
package/stl-docs/components/mintlify-compat/callouts/Warning.astro CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Callout } from '@stainless-api/ui-primitives';
3
3
 
4
4
  export interface Props {
5
- children: unknown;
5
+ children: astroHTML.JSX.Children;
6
6
  }
7
7
  ---
8
8
 
package/stl-docs/components/mintlify-compat/card.css CHANGED
@@ -1,44 +1,42 @@
1
- @layer stl-ui-mintlify-compat {
2
- .stl-ui-mintlify-compat-card {
3
- border-radius: 12px;
4
- padding: 16px;
5
- font-size: var(--sl-text-body);
6
- display: flex;
7
- gap: 8px;
8
- border: 1px solid var(--sl-color-hairline);
9
- flex-direction: column;
1
+ .stl-ui-mintlify-compat-card {
2
+ border-radius: 12px;
3
+ padding: 16px;
4
+ font-size: var(--stl-typography-scale-base);
5
+ display: flex;
6
+ gap: 8px;
7
+ border: 1px solid var(--stl-color-border);
8
+ flex-direction: column;
10
9
 
11
- .stl-ui-mintlify-compat-card-icon svg {
12
- color: var(--sl-color-accent);
13
- }
10
+ .stl-ui-mintlify-compat-card-icon svg {
11
+ color: var(--sl-color-accent);
12
+ }
14
13
 
15
- .stl-ui-mintlify-compat-card-title {
16
- font-weight: 600;
17
- font-size: 1.125rem;
18
- display: flex;
19
- align-items: center;
20
- gap: 8px;
21
- margin-top: 8px;
22
- }
14
+ .stl-ui-mintlify-compat-card-title {
15
+ font-weight: 600;
16
+ font-size: 1.125rem;
17
+ display: flex;
18
+ align-items: center;
19
+ gap: 8px;
20
+ margin-top: 8px;
21
+ }
23
22
 
24
- .stl-ui-mintlify-compat-card-content {
25
- margin-top: 0;
26
- color: var(--sl-color-text-secondary);
27
- }
23
+ .stl-ui-mintlify-compat-card-content {
24
+ margin-top: 0;
25
+ color: var(--stl-color-foreground-reduced);
28
26
  }
27
+ }
29
28
 
30
- a.stl-ui-mintlify-compat-card {
31
- text-decoration: none;
32
- color: var(--sl-color-text-secondary);
29
+ a.stl-ui-mintlify-compat-card {
30
+ text-decoration: none;
31
+ color: var(--stl-color-foreground-reduced);
33
32
 
34
- &:hover {
35
- border-color: var(--sl-color-accent);
36
- }
33
+ &:hover {
34
+ border-color: var(--sl-color-accent);
37
35
  }
36
+ }
38
37
 
39
- .stl-ui-mintlify-compat-card-group {
40
- display: grid;
41
- gap: 1rem;
42
- grid-template-columns: repeat(2, minmax(0, 1fr));
43
- }
38
+ .stl-ui-mintlify-compat-card-group {
39
+ display: grid;
40
+ gap: 1rem;
41
+ grid-template-columns: repeat(2, minmax(0, 1fr));
44
42
  }
package/stl-docs/components/nav-tabs/NavDropdown.astro CHANGED
@@ -1,76 +1,52 @@
1
1
  ---
2
- import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@stainless-api/docs-ui/src/components/dropdown';
3
- import { Icon } from '@astrojs/starlight/components';
2
+ import { Dropdown } from '@stainless-api/docs/components';
4
3
  import { buildNavLinks } from './buildNavLinks';
5
-
6
- export interface Props {
7
- useHamburgerIcon?: boolean;
8
- }
9
-
10
- const { useHamburgerIcon = false } = Astro.props as Props;
11
- const BUTTON_ID = 'nav-dropdown-button';
4
+ import { ChevronsUpDownIcon } from 'lucide-react';
12
5
 
13
6
  const navLinks = buildNavLinks(Astro.locals.starlightRoute);
14
7
 
15
- const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]).label;
8
+ const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]!).label;
16
9
  ---
17
10
 
18
- <div class="stldocs-root nav-dropdown-root">
19
- <Dropdown id="nav-dropdown">
20
- <DropdownTrigger
21
- className={`dropdown-toggle stldocs-button-tertiary nav-dropdown-button`}
22
- type="button"
23
- id={BUTTON_ID}
24
- aria-expanded="false"
25
- withChevron={!useHamburgerIcon}
26
- isIcon
27
- >
28
- {useHamburgerIcon ? <Icon name="bars" size="16px" /> : buttonText}
29
- </DropdownTrigger>
30
- <DropdownMenu className="dropdown-menu" position="below" aria-labelledby={BUTTON_ID}>
31
- {
32
- navLinks.map((item) => (
33
- <DropdownItem key={item.link} href={item.link} className="dropdown-item">
34
- {item.label}
35
- </DropdownItem>
36
- ))
37
- }
38
- </DropdownMenu>
39
- </Dropdown>
40
- </div>
11
+ <Dropdown id="nav-dropdown" className="nav-dropdown-root">
12
+ <Dropdown.Trigger>
13
+ <Dropdown.TriggerSelectedItem>{buttonText}</Dropdown.TriggerSelectedItem>
14
+ <Dropdown.TriggerIcon>
15
+ <ChevronsUpDownIcon size={16} />
16
+ </Dropdown.TriggerIcon>
17
+ </Dropdown.Trigger>
18
+ <Dropdown.Menu className="dropdown-menu">
19
+ {
20
+ navLinks.map((item) => (
21
+ <Dropdown.MenuItem
22
+ key={item.link}
23
+ href={item.link}
24
+ className="dropdown-item"
25
+ value={item.label}
26
+ isSelected={item.label === buttonText}
27
+ >
28
+ {item.label}
29
+ <Dropdown.MenuItemTemplate>{item.label}</Dropdown.MenuItemTemplate>
30
+ </Dropdown.MenuItem>
31
+ ))
32
+ }
33
+ </Dropdown.Menu>
34
+ </Dropdown>
41
35
 
42
36
  <script>
43
- import { initDropdown } from '@stainless-api/docs-ui/src/components/scripts/dropdown';
37
+ import { initDropdown } from '@stainless-api/docs/components/scripts';
44
38
  import { getPageLoadEvent } from '../../../plugin/helpers/getPageLoadEvent';
45
39
 
46
40
  document.addEventListener(getPageLoadEvent(), () => {
47
41
  initDropdown({
48
- dropdownId: 'nav-dropdown',
49
- isFixed: true,
42
+ root: document.getElementById('nav-dropdown'),
50
43
  });
51
44
  });
52
45
  </script>
53
- <style is:global>
54
- .nav-dropdown-root .dropdown-menu.stldocs-dropdown-menu {
55
- display: none;
56
- position: fixed;
57
- z-index: 1000;
58
- width: 200px;
59
- margin: 0.125rem 0 0;
60
- font-size: 1rem;
61
- text-align: left;
62
- list-style: none;
63
- background-clip: padding-box;
64
- }
65
-
66
- .nav-dropdown-root .dropdown-menu.open {
67
- display: block;
68
- }
69
- </style>
70
46
 
71
47
  <style>
72
48
  :root {
73
- --menu-font-size: calc(var(--sl-text-body) * 0.9);
49
+ --menu-font-size: calc(var(--stl-typography-scale-base) * 0.9);
74
50
  }
75
51
 
76
52
  .dropdown {
@@ -78,24 +54,9 @@ const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]).label;
78
54
  }
79
55
 
80
56
  .dropdown-item {
81
- clear: both;
82
- color: var(--sl-color-text);
57
+ color: inherit;
83
58
  text-align: inherit;
84
59
  text-decoration: none;
85
60
  white-space: nowrap;
86
61
  }
87
-
88
- .dropdown-item:focus {
89
- color: #1e2125;
90
- background-color: #e9ecef;
91
- }
92
-
93
- .nav-dropdown-root {
94
- background-color: var(--sl-color-bg-nav);
95
- }
96
-
97
- .nav-dropdown-button {
98
- color: var(--sl-color-text);
99
- font-weight: 500;
100
- }
101
62
  </style>