@stainless-api/docs 0.1.0-beta.1 → 0.1.0-beta.11

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 (56) hide show
  1. package/CHANGELOG.md +80 -0
  2. package/components/variables.css +0 -27
  3. package/package.json +6 -5
  4. package/plugin/components/SnippetCode.tsx +6 -3
  5. package/plugin/components/search/SearchAlgolia.astro +0 -7
  6. package/plugin/globalJs/navigation.ts +0 -1
  7. package/plugin/helpers/getPageLoadEvent.ts +1 -1
  8. package/plugin/index.ts +19 -0
  9. package/plugin/loadPluginConfig.ts +8 -0
  10. package/plugin/react/Routing.tsx +4 -3
  11. package/plugin/replaceSidebarPlaceholderMiddleware.ts +4 -0
  12. package/plugin/routes/Docs.astro +0 -8
  13. package/plugin/routes/Overview.astro +1 -8
  14. package/stl-docs/components/APIReferenceAIDropdown.tsx +40 -68
  15. package/stl-docs/components/Header.astro +1 -1
  16. package/stl-docs/components/ThemeSelect.astro +2 -0
  17. package/stl-docs/components/content-panel/ContentPanel.astro +11 -14
  18. package/stl-docs/components/content-panel/ProseAIDropdown.tsx +8 -17
  19. package/stl-docs/components/headers/DefaultHeader.astro +1 -1
  20. package/stl-docs/components/headers/HeaderLinks.astro +1 -1
  21. package/stl-docs/components/headers/StackedHeader.astro +2 -2
  22. package/stl-docs/components/icons/chat-gpt.tsx +17 -0
  23. package/stl-docs/components/icons/claude.tsx +10 -0
  24. package/stl-docs/components/icons/markdown.tsx +10 -0
  25. package/stl-docs/components/mintlify-compat/Accordion.astro +7 -38
  26. package/stl-docs/components/mintlify-compat/AccordionGroup.astro +9 -23
  27. package/stl-docs/components/mintlify-compat/Columns.astro +40 -42
  28. package/stl-docs/components/mintlify-compat/Frame.astro +16 -18
  29. package/stl-docs/components/mintlify-compat/Step.astro +30 -32
  30. package/stl-docs/components/mintlify-compat/Steps.astro +8 -10
  31. package/stl-docs/components/mintlify-compat/callouts/Callout.astro +10 -3
  32. package/stl-docs/components/mintlify-compat/callouts/Check.astro +7 -3
  33. package/stl-docs/components/mintlify-compat/callouts/Danger.astro +7 -3
  34. package/stl-docs/components/mintlify-compat/callouts/Info.astro +7 -3
  35. package/stl-docs/components/mintlify-compat/callouts/Note.astro +7 -3
  36. package/stl-docs/components/mintlify-compat/callouts/Tip.astro +7 -3
  37. package/stl-docs/components/mintlify-compat/callouts/Warning.astro +7 -3
  38. package/stl-docs/components/mintlify-compat/card.css +33 -35
  39. package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro +0 -1
  40. package/stl-docs/components/nav-tabs/buildNavLinks.ts +3 -3
  41. package/stl-docs/components/{Sidebar.astro → sidebars/BaseSidebar.astro} +2 -3
  42. package/stl-docs/components/sidebars/SDKSelectSidebar.astro +8 -0
  43. package/stl-docs/index.ts +17 -4
  44. package/stl-docs/loadStlDocsConfig.ts +3 -2
  45. package/stl-docs/tabsMiddleware.ts +2 -2
  46. package/styles/code.css +119 -126
  47. package/styles/links.css +37 -39
  48. package/styles/overrides.css +55 -57
  49. package/styles/page.css +53 -51
  50. package/styles/sdk_select.css +6 -7
  51. package/styles/search.css +65 -67
  52. package/styles/sidebar.css +194 -128
  53. package/styles/toc.css +37 -33
  54. package/theme.css +9 -1
  55. package/tsconfig.json +1 -1
  56. package/virtual-module.d.ts +3 -1
package/styles/page.css CHANGED
@@ -1,74 +1,76 @@
1
- /* Styles for supporting a max-width layout */
2
- @layer stainless {
3
- .page {
4
- position: relative;
5
- max-width: var(--sl-page-max-width);
6
- margin: 0 auto;
1
+ .page {
2
+ position: relative;
3
+ max-width: var(--sl-page-max-width);
4
+ margin: 0 auto;
7
5
 
8
- .sidebar-pane {
9
- left: auto;
10
- }
6
+ .sidebar-pane {
7
+ left: auto;
8
+ }
11
9
 
12
- > header {
13
- .stl-secondary-nav-tabs,
14
- .header {
15
- max-width: var(--sl-page-max-width);
16
- margin: 0 auto;
17
- }
10
+ > header {
11
+ .stl-secondary-nav-tabs,
12
+ .header {
13
+ max-width: var(--sl-page-max-width);
14
+ margin: 0 auto;
18
15
  }
16
+ }
19
17
 
20
- .right-sidebar {
21
- border-inline-start: unset;
22
- }
18
+ .right-sidebar {
19
+ border-inline-start: unset;
20
+ }
23
21
 
24
- .mobile-preferences {
25
- margin-top: 1rem;
26
- }
22
+ .mobile-preferences {
23
+ margin-top: 1rem;
27
24
  }
25
+ }
28
26
 
29
- @media (min-width: 50rem) {
30
- .page {
31
- padding-left: var(--sl-sidebar-pad-x);
32
- padding-right: var(--sl-sidebar-pad-x);
27
+ @media (min-width: 50rem) {
28
+ .page {
29
+ padding-left: var(--sl-sidebar-pad-x);
30
+ padding-right: var(--sl-sidebar-pad-x);
33
31
 
34
- > header {
35
- .header,
36
- .stl-secondary-nav-tabs {
37
- padding: 0 1.5rem;
38
- }
32
+ > header {
33
+ .header,
34
+ .stl-secondary-nav-tabs {
35
+ padding: 0 1.5rem;
39
36
  }
40
37
  }
41
38
 
42
- .header,
43
- .header {
44
- padding-inline-start: 0;
45
- padding-inline-end: 0;
39
+ > header {
40
+ .stl-secondary-nav-tabs {
41
+ padding-left: 0.55rem;
42
+ }
46
43
  }
44
+ }
47
45
 
48
- mobile-starlight-toc nav {
49
- inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
50
- }
51
- .sidebar-content {
52
- padding-left: 0;
53
- }
46
+ .header,
47
+ .header {
48
+ padding-inline-start: 0;
49
+ padding-inline-end: 0;
54
50
  }
55
51
 
56
- .stl-content-breadcrumbs {
57
- .stldocs-breadcrumbs {
58
- padding-left: 0;
59
- }
52
+ mobile-starlight-toc nav {
53
+ inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
54
+ }
55
+ .sidebar-content {
56
+ padding-left: 0;
60
57
  }
58
+ }
61
59
 
62
- .stl-page-nav-container {
63
- display: flex;
64
- align-items: center;
65
- justify-content: space-between;
66
- gap: 1rem;
67
- padding: 1rem 1rem 0;
68
- flex-wrap: wrap;
60
+ .stl-content-breadcrumbs {
61
+ .stldocs-breadcrumbs {
62
+ padding-left: 0;
69
63
  }
70
64
  }
71
65
 
66
+ .stl-page-nav-container {
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: space-between;
70
+ gap: 1rem;
71
+ padding: 1rem 0 0 1rem;
72
+ flex-wrap: wrap;
73
+ }
72
74
  @media (min-width: 50em) {
73
75
  :root[data-has-sidebar] {
74
76
  --sl-content-inline-start: calc(var(--sl-sidebar-width) + 1rem);
@@ -1,11 +1,10 @@
1
- @layer stainless {
2
- .stl-sdk-select-dropdown-menu {
1
+ .stldocs-root {
2
+ .stldocs-dropdown-menu.stl-sdk-select-dropdown-menu {
3
3
  min-width: 200px;
4
4
  }
5
-
6
- .stl-sdk-select {
7
- .stldocs-icon.http path {
8
- fill: var(--stldocs-color-text);
9
- }
5
+ }
6
+ .stl-sdk-select {
7
+ .stldocs-icon.http path {
8
+ fill: var(--stldocs-color-text);
10
9
  }
11
10
  }
package/styles/search.css CHANGED
@@ -1,84 +1,82 @@
1
- @layer stainless {
2
- /* Search input styles for Astro and Algolia */
3
- site-search {
4
- display: contents;
5
-
6
- > astro-island > div {
7
- position: absolute;
8
- }
9
-
10
- > button {
11
- padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
12
- min-width: unset;
13
- display: flex;
14
- align-items: center;
15
- gap: 0.5rem;
16
- padding: 0;
17
- width: var(--sl-button-size);
18
- justify-content: center;
19
- background-color: var(--sl-color-bg-ui);
20
- border: 1px solid var(--sl-color-hairline);
21
- border-radius: var(--sl-button-border-radius);
22
- height: var(--sl-button-size);
1
+ /* Search input styles for Astro and Algolia */
2
+ site-search {
3
+ display: contents;
23
4
 
24
- &:hover {
25
- border-color: var(--sl-color-hairline-shade);
26
- }
5
+ > astro-island > div {
6
+ position: absolute;
7
+ }
27
8
 
28
- span {
29
- font-size: var(--sl-text-sm);
30
- color: var(--sl-color-text-secondary);
31
- line-height: 150%;
32
- padding-left: var(--sl-button-icon-offset);
33
- padding-right: var(--sl-button-icon-offset);
34
- }
9
+ > button {
10
+ padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
11
+ min-width: unset;
12
+ display: flex;
13
+ align-items: center;
14
+ gap: 0.5rem;
15
+ padding: 0;
16
+ width: var(--sl-button-size);
17
+ justify-content: center;
18
+ background-color: var(--sl-color-bg-ui);
19
+ border: 1px solid var(--sl-color-hairline);
20
+ border-radius: var(--sl-button-border-radius);
21
+ height: var(--sl-button-size);
35
22
 
36
- > svg {
37
- width: var(--sl-text-sm);
38
- height: var(--sl-text-sm);
39
- }
23
+ &:hover {
24
+ border-color: var(--sl-color-hairline-shade);
25
+ }
40
26
 
41
- &.stldocs-button {
42
- padding: 0;
43
- }
27
+ span {
28
+ font-size: var(--sl-text-sm);
29
+ color: var(--sl-color-text-secondary);
30
+ line-height: 150%;
31
+ padding-left: var(--sl-button-icon-offset);
32
+ padding-right: var(--sl-button-icon-offset);
44
33
  }
45
34
 
46
- button > kbd {
47
- border-radius: 0.25rem;
48
- font-size: var(--sl-text-2xs);
49
- gap: 0.25em;
50
- padding-inline: 0.375rem;
51
- background-color: var(--sl-color-gray-6);
52
- margin-right: -0.3rem;
35
+ > svg {
36
+ width: var(--sl-text-sm);
37
+ height: var(--sl-text-sm);
53
38
  }
54
39
 
55
- kbd {
56
- font-family: var(--__sl-font);
57
- color: var(--sl-color-text);
40
+ &.stldocs-button {
41
+ padding: 0;
58
42
  }
59
43
  }
60
44
 
61
- @media (min-width: 50rem) {
62
- site-search {
63
- > button {
64
- border-radius: var(--sl-button-border-radius);
45
+ button > kbd {
46
+ border-radius: 0.25rem;
47
+ font-size: var(--sl-text-2xs);
48
+ gap: 0.25em;
49
+ padding-inline: 0.375rem;
50
+ background-color: var(--sl-color-gray-6);
51
+ margin-right: -0.3rem;
52
+ }
53
+
54
+ kbd {
55
+ font-family: var(--__sl-font);
56
+ color: var(--sl-color-text);
57
+ }
58
+ }
59
+
60
+ @media (min-width: 50rem) {
61
+ site-search {
62
+ > button {
63
+ border-radius: var(--sl-button-border-radius);
64
+ padding-inline-start: var(--sl-button-padding-x);
65
+ padding-inline-end: var(--sl-button-padding-x);
66
+ width: 100%;
67
+ max-width: 30rem;
68
+ justify-content: start;
69
+
70
+ &.stldocs-button {
65
71
  padding-inline-start: var(--sl-button-padding-x);
66
72
  padding-inline-end: var(--sl-button-padding-x);
67
- width: 100%;
68
- max-width: 30rem;
69
- justify-content: start;
70
-
71
- &.stldocs-button {
72
- padding-inline-start: var(--sl-button-padding-x);
73
- padding-inline-end: var(--sl-button-padding-x);
74
- }
73
+ }
75
74
 
76
- > :last-child {
77
- margin-inline-start: auto;
78
- }
79
- > svg {
80
- margin-left: calc(-1 * var(--sl-button-icon-offset));
81
- }
75
+ > :last-child {
76
+ margin-inline-start: auto;
77
+ }
78
+ > svg {
79
+ margin-left: calc(-1 * var(--sl-button-icon-offset));
82
80
  }
83
81
  }
84
82
  }
@@ -1,168 +1,234 @@
1
- @layer stainless {
2
- .sidebar-pane {
3
- border-inline-end: 1px solid var(--sl-color-hairline-light);
4
- background-color: var(--sl-color-bg);
5
- }
6
-
7
- .sidebar-content {
8
- li a[aria-current='page'] {
9
- background-color: unset;
10
- color: var(--sl-color-text-accent);
11
-
12
- span {
13
- font-weight: normal;
1
+ /* reset starlight styles */
2
+ @layer starlight.core {
3
+ .sidebar .sidebar-pane .sidebar-content {
4
+ * {
5
+ all: revert-layer;
6
+ &::before,
7
+ &::after {
8
+ all: revert-layer;
14
9
  }
15
10
  }
11
+ }
12
+ }
16
13
 
17
- li {
18
- margin-top: 0;
19
- }
20
-
21
- .group-label span,
22
- li a span {
23
- font-size: var(--sl-text-sm);
24
- line-height: 150%;
25
- }
14
+ .sidebar {
15
+ --stl-sidebar-item-padding-inline: 12px;
16
+ --stl-sidebar-item-padding-block: 6px;
17
+ --stl-sidebar-indent: 12px;
18
+ font-size: var(--stl-ui-type-scale-text-sm);
19
+ }
26
20
 
27
- summary {
28
- padding: 0.435rem var(--sl-sidebar-item-padding-inline);
29
- padding-right: 4px;
30
- }
21
+ .sidebar-pane {
22
+ border-inline-end: 1px solid var(--sl-color-hairline-light);
23
+ }
31
24
 
32
- .top-level > li:first-child > a,
33
- .top-level li:first-child details > summary {
34
- padding-top: 0;
35
- }
25
+ .sidebar-content {
26
+ ul,
27
+ summary {
28
+ list-style-type: none;
29
+ }
36
30
 
37
- li a {
38
- position: relative;
39
- padding: 0.435rem var(--sl-sidebar-item-padding-inline);
40
- }
31
+ /* collapsible sections */
32
+ details > summary {
33
+ display: flex;
34
+ align-items: center;
35
+ font-weight: 500;
41
36
 
42
- details > summary > svg {
43
- opacity: 0.5;
37
+ .caret {
38
+ margin-left: auto;
39
+ margin-right: -4px;
40
+ opacity: 0.65;
41
+ transition:
42
+ opacity 0.1s ease-out,
43
+ transform 0.1s ease-out;
44
44
  }
45
+ }
46
+ details[open] > summary .caret {
47
+ opacity: 1;
48
+ transform: rotate(90deg);
49
+ }
45
50
 
46
- details[open] > summary > svg {
47
- opacity: 1;
51
+ /* list items */
52
+ summary,
53
+ li {
54
+ margin: 0;
55
+ border-radius: 8px;
56
+ }
57
+ summary,
58
+ li a {
59
+ cursor: pointer;
60
+ padding: var(--stl-sidebar-item-padding-block) var(--stl-sidebar-item-padding-inline);
61
+ &:hover,
62
+ &[aria-current='page'] {
63
+ color: var(--stl-ui-foreground);
48
64
  }
49
-
50
- a.large span {
51
- font-weight: 400;
52
- color: var(--sl-color-gray-2);
53
-
54
- &:hover {
55
- color: var(--sl-color-white);
56
- }
65
+ }
66
+ li a {
67
+ color: var(--stl-ui-foreground-secondary);
68
+ font-weight: 400;
69
+ display: flex;
70
+ text-decoration: none;
71
+ span {
72
+ font-weight: inherit;
57
73
  }
58
74
 
59
- a.large[aria-current='page'] span {
60
- color: var(--sl-color-text-accent);
75
+ &:hover {
76
+ text-decoration: underline;
77
+ text-decoration-color: var(--stl-ui-foreground-secondary);
61
78
  }
62
-
63
- .stl-mobile-only-sidebar-item-last {
64
- border-bottom: 1px solid var(--sl-color-hairline-light);
65
- padding-bottom: 1rem;
66
- margin-bottom: 0.5rem;
79
+ &[aria-current='page'] {
80
+ font-weight: 500;
67
81
  }
68
82
  }
69
-
70
- .stl-sdk-select {
71
- .dropdown-toggle {
72
- width: 100%;
73
- }
83
+ li:has(> a:is(:hover, [aria-current='page'])),
84
+ summary:hover {
85
+ background-color: var(--stl-ui-muted-background);
74
86
  }
75
87
 
76
- [data-stldocs-method] {
77
- display: flex;
78
- gap: 0.6rem;
88
+ /* nested list items have flat left edge */
89
+ ul ul :is(summary, li) {
90
+ border-start-start-radius: 0;
91
+ border-end-start-radius: 0;
79
92
  }
80
-
81
- [data-stldocs-method]::before {
82
- content: '';
83
- min-width: 20px;
84
- height: 20px;
85
- border-radius: 4px;
86
- text-align: center;
87
- margin-top: 1px;
93
+ ul {
94
+ padding: 0;
88
95
  }
89
-
90
- [aria-current='page']::after {
91
- content: '';
92
- position: absolute;
93
- /* Shift left accounting for sidebar item padding - current item width. Sidebar border width is not a variable, it's always set to 1px */
94
- left: calc(-1 * var(--sl-sidebar-item-padding-inline) - 1px);
95
- top: 10%;
96
- height: 80%;
97
- width: 2px;
98
- background-color: var(--sl-color-text-accent);
96
+ ul ul li {
97
+ border-inline-start: 1px solid var(--stl-ui-border-muted);
98
+ margin-inline-start: var(--stl-sidebar-indent);
99
+ &:has(> a[aria-current='page']) {
100
+ border-inline-start: 2px solid var(--stl-ui-foreground-accent);
101
+ & > a {
102
+ margin-left: -1px;
103
+ }
104
+ }
99
105
  }
100
106
 
101
- .stl-mobile-only-sidebar-item[aria-current='page']::after {
102
- background-color: transparent;
103
- }
107
+ /* Method & resource icons */
104
108
 
105
- /* CSS is the only way to customize the Starlight sidebar, so the SVGs have to be here. */
109
+ a[data-stldocs-method],
110
+ a[data-stldocs-resource] {
111
+ --stl-ui-sidebar-icon-size-outer: 18px;
112
+ --stl-ui-sidebar-icon-margin: 8px;
113
+ }
114
+ a[data-stldocs-method] {
115
+ --stl-ui-sidebar-icon-size-inner: 16px;
116
+ --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-swatch-gray-white);
106
117
 
107
- :root[data-theme='dark'] {
108
- [data-stldocs-method='get']::before {
109
- background-color: var(--sl-color-green-low);
110
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(74, 194, 107)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
118
+ &[data-stldocs-method='get'] {
119
+ --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-green-base);
120
+ --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-green-faint);
121
+ --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-green-muted);
111
122
  }
112
-
113
- [data-stldocs-method='post']::before {
114
- background-color: var(--sl-color-blue-low);
115
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(84, 174, 255)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
123
+ &[data-stldocs-method='post'] {
124
+ --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-blue-base);
125
+ --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-blue-faint);
126
+ --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-blue-muted);
116
127
  }
117
-
118
- [data-stldocs-method='patch']::before,
119
- [data-stldocs-method='put']::before {
120
- background-color: var(--sl-color-orange-low);
121
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(251, 143, 68)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
128
+ &[data-stldocs-method='patch'],
129
+ &[data-stldocs-method='put'] {
130
+ --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-orange-base);
131
+ --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-orange-faint);
132
+ --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-orange-muted);
122
133
  }
123
-
124
- [data-stldocs-method='delete']::before {
125
- background-color: var(--sl-color-red-low);
126
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(248, 89, 92)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
134
+ &[data-stldocs-method='delete'] {
135
+ --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-red-base);
136
+ --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-red-faint);
137
+ --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-red-muted);
127
138
  }
128
- }
129
139
 
130
- :root[data-theme='light'] {
131
- [data-stldocs-method='get']::before {
132
- background-color: var(--sl-color-green-low);
133
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(31, 124, 58)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
140
+ &[data-stldocs-method='get'] {
141
+ --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
134
142
  }
135
-
136
- [data-stldocs-method='post']::before {
137
- background-color: var(--sl-color-blue-low);
138
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(9, 105, 218)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
143
+ &[data-stldocs-method='post'],
144
+ &[data-stldocs-method='put'],
145
+ &[data-stldocs-method='patch'] {
146
+ --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
139
147
  }
140
-
141
- [data-stldocs-method='patch']::before,
142
- [data-stldocs-method='put']::before {
143
- background-color: var(--sl-color-orange-low);
144
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(210, 86, 1)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
148
+ &[data-stldocs-method='delete'] {
149
+ --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
145
150
  }
151
+ }
146
152
 
147
- [data-stldocs-method='delete']::before {
148
- background-color: var(--sl-color-red-low);
149
- content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(207, 34, 46)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
150
- }
153
+ a[data-stldocs-resource] {
154
+ /* not yet implemented in markup */
155
+ --stl-ui-sidebar-icon-color: var(--stl-ui-foreground-muted);
156
+ --stl-ui-sidebar-icon-color-faint: var(--stl-ui-muted-background);
157
+ --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-inverse-foreground);
158
+ --stl-ui-sidebar-icon-size-inner: 14px;
159
+ --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>');
151
160
  }
152
161
 
153
- .stl-sidebar-header-links {
162
+ a[data-stldocs-method],
163
+ a[data-stldocs-resource] {
154
164
  display: flex;
155
- gap: 1rem;
156
- flex-direction: column-reverse;
165
+ gap: var(--stl-ui-sidebar-icon-margin);
166
+ align-items: center;
167
+ position: relative;
168
+
169
+ &::before,
170
+ &::after {
171
+ content: '';
172
+ width: var(--stl-ui-sidebar-icon-size-outer);
173
+ height: var(--stl-ui-sidebar-icon-size-outer);
174
+ display: block;
175
+ }
176
+ &::before {
177
+ border-radius: 4px;
178
+ background-color: var(--stl-ui-sidebar-icon-color-faint);
179
+ flex: 0 0 auto;
180
+ }
181
+ /* yuck (we can clean this up once we are changing sidebar markup) */
182
+ &::after {
183
+ background-color: var(--stl-ui-sidebar-icon-color);
184
+ mask-image: var(--stl-ui-sidebar-icon-url);
185
+ mask-size: var(--stl-ui-sidebar-icon-size-inner) var(--stl-ui-sidebar-icon-size-inner);
186
+ mask-repeat: no-repeat;
187
+ mask-position: center;
188
+ position: absolute;
189
+ left: var(--stl-sidebar-item-padding-inline);
190
+ top: 50%;
191
+ transform: translateY(-50%);
192
+ }
193
+
194
+ &:hover {
195
+ &::before {
196
+ background-color: var(--stl-ui-sidebar-icon-color-muted);
197
+ }
198
+ }
199
+ &[aria-current='page'] {
200
+ &::before {
201
+ background-color: var(--stl-ui-sidebar-icon-color);
202
+ }
203
+ &::after {
204
+ background-color: var(--stl-ui-sidebar-icon-color-inverse);
205
+ }
206
+ }
157
207
  }
208
+ }
158
209
 
159
- @media (min-width: 50rem) {
160
- .stl-mobile-only-sidebar-item {
161
- display: none;
162
- }
210
+ .sidebar-content .stl-mobile-only-sidebar-item-last {
211
+ margin-bottom: 2rem;
212
+ position: relative;
213
+ }
163
214
 
164
- .stl-sidebar-header-links {
165
- display: none;
166
- }
215
+ .stl-sdk-select .dropdown-toggle {
216
+ width: 100%;
217
+ }
218
+
219
+ .stl-sidebar-header-links {
220
+ display: flex;
221
+ gap: 1rem;
222
+ flex-direction: column-reverse;
223
+ }
224
+
225
+ @media (min-width: 50rem) {
226
+ .stl-mobile-only-sidebar-item,
227
+ li:has(> .stl-mobile-only-sidebar-item) {
228
+ display: none;
229
+ }
230
+
231
+ .stl-sidebar-header-links {
232
+ display: none;
167
233
  }
168
234
  }