@stainless-api/docs-ui 0.1.0-beta.60 → 0.1.0-beta.62

package/dist/{snippets-CocIZMn0.d.ts → snippets-CaCkByky.d.ts}

@@ -1,7 +1,7 @@
-import { l as Method } from "./index-Ct7H30x1.js";
-import { C as TransformRequestSnippetFn } from "./sdk-DdW_-RBy.js";
+import { u as Method } from "./index-DuHyTVVD.js";
+import { w as TransformRequestSnippetFn } from "./sdk-CoiDgyHc.js";
 import * as React$1 from "react";
-import * as react_jsx_runtime75 from "react/jsx-runtime";
+import * as react_jsx_runtime56 from "react/jsx-runtime";
 
 //#region src/components/snippets.d.ts
 type SnippetCodeProps = {
@@ -12,7 +12,7 @@ type SnippetCodeProps = {
 declare function SnippetCode({
   content,
   language
-}: SnippetCodeProps): react_jsx_runtime75.JSX.Element;
+}: SnippetCodeProps): react_jsx_runtime56.JSX.Element;
 type SnippetProps = {
   method: Method;
   requestTitle?: React$1.ReactNode;
@@ -25,29 +25,29 @@ type SnippetContainerProps = {
 };
 declare function SnippetContainer({
   children
-}: SnippetContainerProps): react_jsx_runtime75.JSX.Element;
+}: SnippetContainerProps): react_jsx_runtime56.JSX.Element;
 type SnippetRequestContainerProps = {
   children?: React$1.ReactNode;
   signature?: string;
 };
 declare function SnippetRequestContainer({
   children
-}: SnippetRequestContainerProps): react_jsx_runtime75.JSX.Element;
+}: SnippetRequestContainerProps): react_jsx_runtime56.JSX.Element;
 declare function Snippet({
   requestTitle,
   method,
   transformRequestSnippet
-}: SnippetProps): react_jsx_runtime75.JSX.Element | null;
+}: SnippetProps): react_jsx_runtime56.JSX.Element | null;
 declare function SnippetButtons({
   content
 }: {
   content: string;
-}): react_jsx_runtime75.JSX.Element;
+}): react_jsx_runtime56.JSX.Element;
 declare function SnippetFooter(): React$1.ReactNode;
 declare function SnippetResponse({
   responses
 }: {
   responses: Method['exampleResponses'];
-}): react_jsx_runtime75.JSX.Element | null;
+}): react_jsx_runtime56.JSX.Element | null;
 //#endregion
 export { SnippetContainer as a, SnippetProps as c, SnippetResponse as d, SnippetCodeProps as i, SnippetRequestContainer as l, SnippetButtons as n, SnippetContainerProps as o, SnippetCode as r, SnippetFooter as s, Snippet as t, SnippetRequestContainerProps as u };

package/dist/{snippets-D4VhtZIC.js → snippets-bh8lfniq.js}

@@ -1,7 +1,7 @@
-import { a as useLanguage, c as useSnippet, r as useDeclaration } from "./docs-Bw-eLYjA.js";
-import { r as useHighlight } from "./markdown-ZzVcn4kq.js";
-import { t as useComponents } from "./use-components-Dbin0y07.js";
-import { t as style_default } from "./style-TeAZuiHh.js";
+import { i as useDeclaration, l as useSnippet, o as useLanguage } from "./docs-6PYi1eEV.js";
+import { r as useHighlight } from "./markdown-DHjcD13O.js";
+import { t as useComponents } from "./use-components-BUz3GbO4.js";
+import { t as style_default } from "./style-Bxr5gqcM.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";

package/dist/spec.d.ts

@@ -1,5 +1,5 @@
-import { f as Resource, g as SpecLanguage, h as Spec, l as Method, r as DeclarationNode, u as Model } from "./index-Ct7H30x1.js";
-import { t as DocsLanguage } from "./routing-sjrF8U7O.js";
+import { _ as SpecLanguage, d as Model, g as Spec, i as DeclarationNode, p as Resource, u as Method } from "./index-DuHyTVVD.js";
+import { t as DocsLanguage } from "./routing-Wb-T6WOm.js";
 
 //#region src/spec.d.ts
 type SecurityScheme = Spec['security_schemes'][number];

package/dist/spec.js

@@ -1,5 +1,5 @@
-import { n as Languages } from "./routing-Fzn1XfX_.js";
-import { r as isResourceEmpty } from "./utils-BoRmEFRn.js";
+import { n as Languages } from "./routing-D6595ovf.js";
+import { r as isResourceEmpty } from "./utils-BpKHeVMe.js";
 
 //#region src/spec.ts
 const defaultTransforms = {
@@ -90,15 +90,15 @@ function generateSpecForResource(spec, name, lang, transforms) {
 		security_schemes: spec.security_schemes?.map((scheme) => transforms.securityScheme(scheme)),
 		decls: { [lang]: mapEntries({
 			input: spec.decls[lang] ?? {},
-			filter: (name$1) => name$1.startsWith(resource.stainlessPath) || name$1.startsWith("(resource) $shared"),
+			filter: (name) => name.startsWith(resource.stainlessPath) || name.startsWith("(resource) $shared"),
 			fn: (decl) => transforms.declaration(decl, lang)
 		}) },
 		snippets: mapEntries({
 			input: spec.snippets,
-			filter: (name$1) => name$1.startsWith(lang),
+			filter: (name) => name.startsWith(lang),
 			fn: (snippets) => mapEntries({
 				input: snippets,
-				filter: (name$1) => name$1.startsWith(resource.stainlessPath),
+				filter: (name) => name.startsWith(resource.stainlessPath),
 				fn: (snippet) => transforms.snippet(snippet, lang)
 			}) ?? {}
 		})

package/dist/stl-sidebar-BQvhLYPO.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime27 from "react/jsx-runtime";
+
+//#region src/components/stl-sidebar.d.ts
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * Custom element defined by Starlight's <SidebarPersister>.
+       */
+      'sl-sidebar-restore': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+interface StlSidebarLink {
+  type: 'link';
+  label: string;
+  isCurrent?: boolean;
+  attrs: Record<string, unknown>;
+  href?: string;
+  stainlessPath?: string;
+}
+interface StlSidebarGroup {
+  type: 'group';
+  label: string;
+  entries: Array<StlSidebarLink | StlSidebarGroup>;
+  collapsed: boolean;
+  isCurrent?: boolean;
+  href?: string;
+  stainlessPath?: string;
+}
+type StlSidebarEntry = StlSidebarLink | StlSidebarGroup;
+type StlSidebarProps = {
+  entries: StlSidebarEntry[];
+  /**
+   * If set, add <sl-sidebar-restore> custom elements (as defined by Starlight's SidebarPersister)
+   * which are used to save/restore sidebar state.
+   */
+  withStarlightRestoration?: boolean;
+};
+declare function StlSidebar({
+  entries,
+  withStarlightRestoration
+}: StlSidebarProps): react_jsx_runtime27.JSX.Element;
+//#endregion
+export { StlSidebarProps as a, StlSidebarLink as i, StlSidebarEntry as n, StlSidebarGroup as r, StlSidebar as t };

package/dist/stl-sidebar-BSx0HI2z.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime62 from "react/jsx-runtime";
+
+//#region src/components/stl-sidebar.d.ts
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * Custom element defined by Starlight's <SidebarPersister>.
+       */
+      'sl-sidebar-restore': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+interface StlSidebarLink {
+  type: 'link';
+  label: string;
+  isCurrent?: boolean;
+  attrs: Record<string, unknown>;
+  href?: string;
+  stainlessPath?: string;
+}
+interface StlSidebarGroup {
+  type: 'group';
+  label: string;
+  entries: Array<StlSidebarLink | StlSidebarGroup>;
+  collapsed: boolean;
+  isCurrent?: boolean;
+  href?: string;
+  stainlessPath?: string;
+}
+type StlSidebarEntry = StlSidebarLink | StlSidebarGroup;
+type StlSidebarProps = {
+  entries: StlSidebarEntry[];
+  /**
+   * If set, add <sl-sidebar-restore> custom elements (as defined by Starlight's SidebarPersister)
+   * which are used to save/restore sidebar state.
+   */
+  withStarlightRestoration?: boolean;
+};
+declare function StlSidebar({
+  entries,
+  withStarlightRestoration
+}: StlSidebarProps): react_jsx_runtime62.JSX.Element;
+//#endregion
+export { StlSidebarProps as a, StlSidebarLink as i, StlSidebarEntry as n, StlSidebarGroup as r, StlSidebar as t };

package/dist/stl-sidebar-DdxZx2KK.js

@@ -0,0 +1,82 @@
+import { t as useComponents } from "./use-components-BUz3GbO4.js";
+import { t as style_default } from "./style-Bxr5gqcM.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { ChevronRight } from "lucide-react";
+
+//#region src/components/stl-sidebar.tsx
+function StlSidebarSublist({ entries, entryToIndex }) {
+	const Docs = useComponents();
+	return /* @__PURE__ */ jsx("ul", {
+		className: style_default.SidebarList,
+		children: entries.map((entry, index) => {
+			const restorePointIndex = entryToIndex?.get(entry);
+			const hasLink = !!(entry.href || entry.stainlessPath);
+			return /* @__PURE__ */ jsx("li", {
+				className: clsx(style_default.SidebarEntry, entry.type === "link" ? style_default.SidebarEntryLink : style_default.SidebarEntryGroup),
+				children: entry.type === "link" ? /* @__PURE__ */ jsx(Docs.Link, {
+					href: entry.href,
+					stainlessPath: entry.stainlessPath,
+					"aria-current": entry.isCurrent ? "page" : void 0,
+					...entry.attrs,
+					children: entry.label
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [hasLink && /* @__PURE__ */ jsx(Docs.Link, {
+					href: entry.href,
+					stainlessPath: entry.stainlessPath,
+					"aria-current": entry.isCurrent ? "page" : void 0,
+					children: entry.label
+				}), /* @__PURE__ */ jsxs("details", {
+					className: style_default.SidebarExpander,
+					open: flattenStlSidebar(entry.entries).some((i) => i.isCurrent) || !entry.collapsed,
+					children: [
+						/* @__PURE__ */ jsxs("summary", {
+							className: style_default.ExpanderSummary,
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": hasLink ? "true" : void 0,
+								children: entry.label
+							}), entry.entries.length > 0 && /* @__PURE__ */ jsx(ChevronRight, {
+								size: 16,
+								strokeWidth: 1,
+								className: `${style_default.Icon} ${style_default.ExpanderSummaryIcon}`
+							})]
+						}),
+						restorePointIndex !== void 0 && /* @__PURE__ */ jsx("sl-sidebar-restore", { "data-index": restorePointIndex }),
+						entry.entries.length > 0 && /* @__PURE__ */ jsx(StlSidebarSublist, {
+							entries: entry.entries,
+							entryToIndex
+						})
+					]
+				})] })
+			}, index);
+		})
+	});
+}
+function StlSidebar({ entries, withStarlightRestoration }) {
+	const entryToIndex = withStarlightRestoration ? computeEntryToIndex(entries) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: `${style_default.Root} ${style_default.Sidebar}`,
+		children: /* @__PURE__ */ jsx(StlSidebarSublist, {
+			entries,
+			entryToIndex
+		})
+	});
+}
+function computeEntryToIndex(allEntries) {
+	const entryToIndex = /* @__PURE__ */ new Map();
+	let currentIndex = 0;
+	function addEntries(entries) {
+		for (const entry of entries) if (entry.type === "group") {
+			entryToIndex.set(entry, currentIndex);
+			currentIndex++;
+			addEntries(entry.entries);
+		}
+	}
+	addEntries(allEntries);
+	return entryToIndex;
+}
+function flattenStlSidebar(sidebar) {
+	return sidebar.flatMap((entry) => entry.type === "group" ? flattenStlSidebar(entry.entries) : entry);
+}
+
+//#endregion
+export { StlSidebar as t };

package/dist/{style-TeAZuiHh.js → style-Bxr5gqcM.js}

@@ -129,13 +129,13 @@ var style_default = {
 	Model: "stldocs-model",
 	Root: "stldocs-root",
 	Sidebar: "stldocs-sidebar",
-	SidebarResource: "stldocs-sidebar-resource",
-	SidebarResourceTitle: "stldocs-sidebar-resource-title",
-	SidebarMethod: "stldocs-sidebar-method",
-	SidebarItemTitle: "stldocs-sidebar-resource-title",
+	SidebarList: "stldocs-sidebar-list",
 	SidebarExpander: "stldocs-sidebar-expander",
 	SidebarExpanderSummary: "stldocs-sidebar-expander-summary",
 	SidebarExpanderContent: "stldocs-sidebar-expander-content",
+	SidebarEntry: "stldocs-sidebar-entry",
+	SidebarEntryLink: "stldocs-sidebar-entry-link",
+	SidebarEntryGroup: "stldocs-sidebar-entry-group",
 	SearchForm: "stldocs-search-form",
 	SearchModal: "stldocs-search-modal",
 	SearchFilter: "stldocs-search-filter",

package/dist/style.d.ts

@@ -129,13 +129,13 @@ declare const _default: {
   readonly Model: "stldocs-model";
   readonly Root: "stldocs-root";
   readonly Sidebar: "stldocs-sidebar";
-  readonly SidebarResource: "stldocs-sidebar-resource";
-  readonly SidebarResourceTitle: "stldocs-sidebar-resource-title";
-  readonly SidebarMethod: "stldocs-sidebar-method";
-  readonly SidebarItemTitle: "stldocs-sidebar-resource-title";
+  readonly SidebarList: "stldocs-sidebar-list";
   readonly SidebarExpander: "stldocs-sidebar-expander";
   readonly SidebarExpanderSummary: "stldocs-sidebar-expander-summary";
   readonly SidebarExpanderContent: "stldocs-sidebar-expander-content";
+  readonly SidebarEntry: "stldocs-sidebar-entry";
+  readonly SidebarEntryLink: "stldocs-sidebar-entry-link";
+  readonly SidebarEntryGroup: "stldocs-sidebar-entry-group";
   readonly SearchForm: "stldocs-search-form";
   readonly SearchModal: "stldocs-search-modal";
   readonly SearchFilter: "stldocs-search-filter";

package/dist/style.js

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

package/dist/styles/primitives.css

@@ -251,6 +251,12 @@
   ol {
     list-style-type: decimal;
   }
+
+  hr {
+    margin-bottom: 16px;
+    border: none;
+    border-bottom: 1px solid var(--stl-color-border);
+  }
 }
 
 .stldocs-root .stldocs-input {

package/dist/styles/resets.css

@@ -3,7 +3,7 @@
   line-height: 1.5;
   letter-spacing: -0.01em;
 
-  a {
+  a:not(.stl-ui-callout a) {
     color: inherit;
     cursor: pointer;
     text-decoration: none;

package/dist/styles/sidebar.css

@@ -1,80 +1,250 @@
 .stldocs-sidebar {
   font-family: var(--stl-typography-font);
   font-size: var(--stl-typography-scale-sm);
+  /* Remove background color from stldocs-root reset. */
+  background-color: transparent;
+  --stldocs-sidebar-item-padding-inline: 12px;
+  --stldocs-sidebar-item-padding-block: 6px;
+  --stldocs-sidebar-indent: 12px;
 
-  a {
-    text-decoration: none;
-    color: var(--stl-color-foreground-reduced);
+  ul,
+  summary {
+    list-style-type: none;
   }
 
-  .stldocs-sidebar-resource-title {
-    padding-bottom: 6px;
+  .stldocs-expander-summary,
+  .stldocs-sidebar-entry-group > a {
+    font-weight: 500;
   }
 
-  .stldocs-sidebar-resource,
-  .stldocs-sidebar-method {
-    padding: 6px;
+  .stldocs-expander-summary {
     display: flex;
-    gap: 0.5rem;
+    align-items: center;
+    user-select: none;
 
-    &[data-selected='true'] {
-      & > a,
-      & > details > summary > a {
-        color: var(--stl-color-foreground);
+    .stldocs-expander-summary-icon {
+      margin-left: 4px;
+      opacity: 0.65;
+      transition:
+        opacity 0.1s ease-out,
+        transform 0.1s ease-out;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: var(--stl-color-background-hover);
       }
     }
+
+    span[aria-hidden='true'] {
+      opacity: 0;
+    }
   }
 
-  .stldocs-sidebar-resource-title {
-    display: block;
+  .stldocs-sidebar-entry-group {
+    position: relative;
 
-    a {
-      color: var(--stl-color-foreground);
+    /* Anchor is positioned over the <details>. */
+    > a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      padding-block: var(--stldocs-sidebar-item-padding-block);
+      padding-inline: var(--stldocs-sidebar-item-padding-inline);
+    }
+  }
+
+  .stldocs-sidebar-expander[open] > .stldocs-expander-summary .stldocs-expander-summary-icon {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+
+  /* List items. */
+  .stldocs-sidebar-entry,
+  .stldocs-expander-summary {
+    margin: 0;
+    border-radius: 8px;
+  }
+
+  .stldocs-expander-summary,
+  .stldocs-sidebar-entry-link a {
+    cursor: pointer;
+    padding: var(--stldocs-sidebar-item-padding-block) var(--stldocs-sidebar-item-padding-inline);
+  }
+
+  .stldocs-sidebar-entry-link a:hover {
+    color: var(--stl-color-foreground);
+  }
+
+  .stldocs-sidebar-entry-link a {
+    color: var(--stl-color-foreground-reduced);
+    font-weight: 400;
+    display: flex;
+    text-decoration: none;
+    span {
+      font-weight: inherit;
+    }
+
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--stl-color-foreground-reduced);
+    }
+    &[aria-current='page'] {
       font-weight: 500;
+      color: var(--stl-color-foreground);
     }
   }
 
-  .stldocs-sidebar-expander {
-    .stldocs-expander-summary {
-      cursor: pointer;
-      display: flex;
+  /* When the sidebar entry has a link, disable pointer events on the <details> text
+  so that they pass through to the <a>. */
+  .stldocs-sidebar-entry-group:has(> a) .stldocs-expander-summary > span {
+    pointer-events: none;
+  }
 
-      & > .stldocs-expander-summary-icon {
-        transform: translateX(-0.5px) translateY(-0.5px);
-        margin-left: 8px;
+  .stldocs-sidebar-entry-link:has(> a:is(:hover, [aria-current='page'])),
+  .stldocs-sidebar-entry-group:has(> a:is(:hover, [aria-current='page']))
+    > .stldocs-sidebar-expander
+    > .stldocs-expander-summary,
+  .stldocs-expander-summary:hover {
+    background-color: var(--stl-color-background-hover);
+  }
 
-        & > .stldocs-icon {
-          vertical-align: middle;
-          color: var(--stl-color-foreground-muted);
-        }
+  /* Nested list items have flat left edge. */
+  .stldocs-sidebar-list .stldocs-sidebar-list :is(.stldocs-expander-summary, .stldocs-sidebar-entry) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
 
-        & > :last-child {
-          display: none;
-        }
+  .stldocs-sidebar-list {
+    padding: 0;
+  }
+
+  .stldocs-sidebar-list .stldocs-sidebar-list .stldocs-sidebar-entry {
+    border-inline-start: 1px solid var(--stl-color-border-faint);
+    margin-inline-start: var(--stldocs-sidebar-indent);
+    &:has(> a[aria-current='page']) {
+      border-inline-start: 2px solid var(--stl-color-accent-border-strong);
+      & > a {
+        margin-left: -1px;
       }
     }
+  }
 
-    &[open],
-    &[data-open='true'] {
-      & > .stldocs-expander-summary {
-        .stldocs-type-preview-content {
-          display: none;
-        }
+  /* Method & resource icons. */
 
-        & > .stldocs-expander-summary-icon {
-          & > :first-child {
-            display: none;
-          }
+  a[data-stldocs-method],
+  a[data-stldocs-resource] {
+    --stldocs-sidebar-icon-size-outer: 18px;
+    --stldocs-sidebar-icon-margin: 8px;
+  }
+  a[data-stldocs-method] {
+    --stldocs-sidebar-icon-size-inner: 16px;
+    --stldocs-sidebar-icon-color-inverse-background: var(--stldocs-sidebar-icon-color);
 
-          & > :last-child {
-            display: inline;
-          }
-        }
-      }
+    &[data-stldocs-method='get'] {
+      --stldocs-sidebar-icon-color: var(--stl-color-green-foreground);
+      --stldocs-sidebar-icon-color-border: var(--stl-color-green-border);
+      --stldocs-sidebar-icon-color-background: var(--stl-color-green-muted-background);
+      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-green-muted-background-hover);
+      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-green-inverse-background);
+      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-green-inverse-foreground);
+    }
+    &[data-stldocs-method='post'] {
+      --stldocs-sidebar-icon-color: var(--stl-color-blue-foreground);
+      --stldocs-sidebar-icon-color-border: var(--stl-color-blue-border);
+      --stldocs-sidebar-icon-color-background: var(--stl-color-blue-muted-background);
+      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-blue-muted-background-hover);
+      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-blue-inverse-background);
+      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-blue-inverse-foreground);
+    }
+    &[data-stldocs-method='patch'],
+    &[data-stldocs-method='put'] {
+      --stldocs-sidebar-icon-color: var(--stl-color-orange-foreground);
+      --stldocs-sidebar-icon-color-border: var(--stl-color-orange-border);
+      --stldocs-sidebar-icon-color-background: var(--stl-color-orange-muted-background);
+      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-orange-muted-background-hover);
+      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-orange-inverse-background);
+      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-orange-inverse-foreground);
+    }
+    &[data-stldocs-method='delete'] {
+      --stldocs-sidebar-icon-color: var(--stl-color-red-foreground);
+      --stldocs-sidebar-icon-color-border: var(--stl-color-red-border);
+      --stldocs-sidebar-icon-color-background: var(--stl-color-red-muted-background);
+      --stldocs-sidebar-icon-color-background-hover: var(--stl-color-red-muted-background-hover);
+      --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-red-inverse-background);
+      --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-red-inverse-foreground);
+    }
+
+    &[data-stldocs-method='get'] {
+      --stldocs-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>');
+    }
+    &[data-stldocs-method='post'],
+    &[data-stldocs-method='put'],
+    &[data-stldocs-method='patch'] {
+      --stldocs-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>');
+    }
+    &[data-stldocs-method='delete'] {
+      --stldocs-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>');
+    }
+  }
+
+  a[data-stldocs-resource] {
+    /* not yet implemented in markup */
+    --stldocs-sidebar-icon-color: var(--stl-color-foreground-muted);
+    --stldocs-sidebar-icon-color-border: var(--stl-color-border);
+    --stldocs-sidebar-icon-color-background: var(--stl-color-faint-background);
+    --stldocs-sidebar-icon-color-background-hover: var(--stl-color-faint-background-hover);
+    --stldocs-sidebar-icon-color-inverse-background: var(--stl-color-inverse-background);
+    --stldocs-sidebar-icon-color-inverse-foreground: var(--stl-color-inverse-foreground);
+
+    --stldocs-sidebar-icon-size-inner: 14px;
+    --stldocs-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>');
+  }
 
-      & > .stldocs-expander-content {
-        margin-left: 10px;
-        line-height: 150%;
+  a[data-stldocs-method],
+  a[data-stldocs-resource] {
+    display: flex;
+    gap: var(--stldocs-sidebar-icon-margin);
+    align-items: center;
+    position: relative;
+
+    &::before,
+    &::after {
+      content: '';
+      width: var(--stldocs-sidebar-icon-size-outer);
+      height: var(--stldocs-sidebar-icon-size-outer);
+      display: block;
+    }
+    &::before {
+      border-radius: 4px;
+      background-color: var(--stldocs-sidebar-icon-color-background);
+      flex: 0 0 auto;
+      border: 1px solid var(--stldocs-sidebar-icon-color-border, transparent);
+    }
+    /* yuck (we can clean this up once we are changing sidebar markup) */
+    &::after {
+      background-color: var(--stldocs-sidebar-icon-color);
+      mask-image: var(--stldocs-sidebar-icon-url);
+      mask-size: var(--stldocs-sidebar-icon-size-inner) var(--stldocs-sidebar-icon-size-inner);
+      mask-repeat: no-repeat;
+      mask-position: center;
+      position: absolute;
+      left: var(--stldocs-sidebar-item-padding-inline);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &:hover {
+      &::before {
+        background-color: var(--stldocs-sidebar-icon-color-background-hover);
+      }
+    }
+    &[aria-current='page'] {
+      &::before {
+        background-color: var(--stldocs-sidebar-icon-color-inverse-background);
+      }
+      &::after {
+        background-color: var(--stldocs-sidebar-icon-color-inverse-foreground);
       }
     }
   }