@stainless-api/docs-ui 0.1.0-beta.61 → 0.1.0-beta.63

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);
       }
     }
   }

package/dist/styles.css

@@ -1334,7 +1334,7 @@ a.stl-ui-button {
   line-height: 1.5;
   letter-spacing: -0.01em;
 
-  a {
+  a:not(.stl-ui-callout a) {
     color: inherit;
     cursor: pointer;
     text-decoration: none;
@@ -1647,6 +1647,12 @@ a.stl-ui-button {
   ol {
     list-style-type: decimal;
   }
+
+  hr {
+    margin-bottom: 16px;
+    border: none;
+    border-bottom: 1px solid var(--stl-color-border);
+  }
 }
 
 .stldocs-root .stldocs-input {
@@ -2792,80 +2798,250 @@ a.stl-ui-button {
 .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);
+    }
 
-      & > .stldocs-expander-content {
-        margin-left: 10px;
-        line-height: 150%;
+    &[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>');
+  }
+
+  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);
       }
     }
   }

package/dist/{typescript-D924WidI.js → typescript-DA7mcN1t.js}

@@ -1,8 +1,8 @@
 import { t as __exportAll } from "./chunk-BN_g-Awi.js";
-import { a as useLanguage, l as useSpec, r as useDeclaration } from "./docs-Di94viZV.js";
-import { n as useLanguageComponents } from "./contexts-CeV_L_Iy.js";
+import { i as useDeclaration, o as useLanguage, u as useSpec } from "./docs-6PYi1eEV.js";
+import { n as useLanguageComponents } from "./contexts-DMjqoc7S.js";
 import { t as useComponents } from "./use-components-BUz3GbO4.js";
-import { t as style_default } from "./style-LwfvXElj.js";
+import { t as style_default } from "./style-Bxr5gqcM.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 

package/dist/{utils-D01mAUfQ.js → utils-36jzmKxv.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./chunk-BN_g-Awi.js";
-import { f as parseStainlessPath } from "./routing-Ce0_tBW6.js";
+import { p as parseStainlessPath } from "./routing-CLgL--x1.js";
 
 //#region src/utils.ts
 var utils_exports = /* @__PURE__ */ __exportAll({

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import { f as Resource, h as Spec } from "./index-zNpvNvtN.js";
+import { g as Spec, p as Resource } from "./index-DuHyTVVD.js";
 
 //#region src/utils.d.ts
 declare namespace utils_d_exports {

package/dist/utils.js

@@ -1,3 +1,3 @@
-import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-D01mAUfQ.js";
+import { n as getResourceFromSpec, r as isResourceEmpty, t as flatResources } from "./utils-36jzmKxv.js";
 
 export { flatResources, getResourceFromSpec, isResourceEmpty };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.61",
+  "version": "0.1.0-beta.63",
   "publishConfig": {
     "access": "public"
   },