@stainless-api/docs 0.1.0-beta.5 → 0.1.0-beta.50

package/styles/fonts.css

@@ -4,65 +4,80 @@
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url(../assets/fonts/geist/geist-latin.woff2) format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist';
   font-style: italic;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-italic-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url(../assets/fonts/geist/geist-italic-latin.woff2) format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist';
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url(../assets/fonts/geist/geist-latin-ext.woff2) format('woff2-variations');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
   font-family: 'Geist';
   font-style: italic;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-italic-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url(../assets/fonts/geist/geist-italic-latin-ext.woff2) format('woff2-variations');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-
 /* Geist Mono */
 @font-face {
   font-family: 'Geist Mono';
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-mono-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url(../assets/fonts/geist/geist-mono-latin.woff2) format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist Mono';
   font-style: italic;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-mono-italic-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  src: url(../assets/fonts/geist/geist-mono-italic-latin.woff2) format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist Mono';
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-mono-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url(../assets/fonts/geist/geist-mono-latin-ext.woff2) format('woff2-variations');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
   font-family: 'Geist Mono';
   font-style: italic;
   font-display: swap;
   font-weight: 100 900;
-  src: url(../plugin/assets/fonts/geist/geist-mono-italic-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  src: url(../assets/fonts/geist/geist-mono-italic-latin-ext.woff2) format('woff2-variations');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

package/styles/links.css

@@ -1,51 +1,14 @@
-@layer stainless {
-  .sl-link-card {
-    box-shadow: none;
-    border-radius: var(--sl-button-border-radius);
-    padding: 1.5rem;
-    margin-top: 16px;
-  }
+/* TODO: remove for real card component */
 
-  .sl-link-card:hover {
-    transition: 0.3s;
-    border: 1px solid var(--sl-color-accent-high);
-    background-color: var(--sl-color-accent-low);
-  }
-
-  .pagination-links {
-    margin-bottom: 2rem;
-
-    > a {
-      border-radius: var(--sl-button-border-radius);
-      border: 1px solid transparent;
-      box-shadow: none;
-      max-width: 90%;
-      text-decoration: none;
-
-      svg {
-        margin-top: 0;
-        transform: translateY(6px);
-      }
-    }
-
-    > a:hover {
-      transition: 0.3s;
-      border: 1px solid var(--sl-color-accent-high);
-      background-color: var(--sl-color-accent-low);
-      box-shadow: none;
-    }
-
-    /* if only one pagination direction */
-    > a:first-child:nth-last-child(1) {
-      max-width: 45%;
-    }
-
-    > a[rel='next'] {
-      margin-left: auto;
-    }
+.sl-link-card {
+  box-shadow: none;
+  border-radius: var(--sl-button-border-radius);
+  padding: 1.5rem;
+  margin-top: 16px;
+}
 
-    > a[rel='prev'] {
-      margin-right: auto;
-    }
-  }
+.sl-link-card:hover {
+  transition: 0.3s;
+  border: 1px solid var(--sl-color-accent-high);
+  background-color: var(--sl-color-accent-low);
 }

package/styles/method-descriptions.css

@@ -0,0 +1,36 @@
+.stldocs-root {
+  .stl-method-description-overflow-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* Minimum height to minimize layout shift */
+    min-height: 24px;
+  }
+  .stl-method-description {
+    .stldocs-method-description {
+      overflow: hidden;
+      max-height: 170px;
+      transition: max-height 0.3s ease;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 3rem;
+        background: linear-gradient(to bottom, transparent, var(--stl-color-background));
+        pointer-events: none;
+      }
+
+      &[data-collapsed='false'] {
+        max-height: none;
+      }
+
+      &[data-collapsed='false']::after {
+        display: none;
+      }
+    }
+  }
+}

package/styles/overrides.css

@@ -1,79 +1,71 @@
-@layer stainless {
-  html {
-    font-size: 16px;
-  }
+html {
+  font-size: 16px;
+}
 
-  .site-title {
-    color: var(--sl-color-white);
-    max-width: 144px;
+.site-title {
+  color: var(--stl-color-foreground);
 
-    img {
-      height: 32px;
-      width: auto;
-    }
+  img {
+    height: 32px;
+    width: auto;
   }
+}
 
-  /* Hide the text in the theme select dropdown */
-  starlight-theme-select select {
-    width: 0;
-    overflow: hidden;
-  }
+/* TODO: apply real button classes here */
+starlight-menu-button button {
+  box-shadow: none;
+  background-color: var(--stl-color-ui-background);
+  border: 1px solid var(--stl-color-border);
+  border-radius: var(--stl-ui-layout-border-radius-sml);
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  .custom-select-wrapper select,
-  .stldocs-button-secondary {
-    background-color: var(--sl-color-bg-ui);
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: var(--sl-button-border-radius);
+  &:hover {
+    background-color: var(--stl-color-ui-background-hover);
+  }
+}
 
+mobile-starlight-toc {
+  nav {
+    background-color: var(--stl-color-background);
+  }
+  .toggle {
+    background-color: var(--stl-color-ui-background);
+    border: 1px solid var(--stl-color-border);
+    border-radius: var(--stl-ui-layout-border-radius-sml);
     &:hover {
-      border-color: var(--sl-color-hairline-shade);
+      background-color: var(--stl-color-ui-background-hover);
+      border-color: var(--stl-color-border); /* unchanged */
     }
   }
-
-  .content-panel {
-    border-top: 0;
+  .dropdown {
+    background-color: var(--stl-color-background);
+    border-color: var(--stl-color-border-faint);
+  }
+  summary {
+    padding: 2rem 1rem;
+    border-color: var(--stl-color-border-faint);
+  }
+  a {
+    border-color: var(--stl-color-border-faint);
   }
+}
 
+@media (min-width: 50rem) {
   starlight-menu-button button {
-    box-shadow: none;
-    background-color: var(--sl-color-bg-ui);
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: var(--sl-button-border-radius);
-    height: var(--sl-button-size);
-    width: var(--sl-button-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      border-color: var(--sl-color-hairline-shade);
-    }
+    display: none;
   }
 
   mobile-starlight-toc {
     nav {
-      background-color: var(--sl-color-bg);
+      inset-inline-start: calc(var(--sl-content-inline-start, 0));
     }
 
     summary {
-      padding: 2rem 1rem;
-      border-bottom-color: var(--sl-color-hairline-light);
-    }
-  }
-
-  @media (min-width: 50rem) {
-    starlight-menu-button button {
-      display: none;
-    }
-
-    mobile-starlight-toc {
-      nav {
-        inset-inline-start: calc(var(--sl-content-inline-start, 0));
-      }
-
-      summary {
-        padding: 2rem 2rem;
-      }
+      padding: 2rem 2rem;
     }
   }
 }

package/styles/page.css

@@ -1,76 +1,107 @@
-/* Styles for supporting a max-width layout */
-@layer stainless {
-  .page {
-    position: relative;
-    max-width: var(--sl-page-max-width);
-    margin: 0 auto;
-
-    .sidebar-pane {
-      left: auto;
-    }
+.page,
+.page > header .header,
+.page > header .stl-secondary-nav-tabs {
+  max-width: var(--sl-page-max-width);
+  margin: 0 auto;
 
-    > header {
-      .stl-secondary-nav-tabs,
-      .header {
-        max-width: var(--sl-page-max-width);
-        margin: 0 auto;
-      }
-    }
+  @media (min-width: 50rem) {
+    padding-inline: var(--stl-ui-page-padding-inline);
+  }
+}
 
-    .right-sidebar {
-      border-inline-start: unset;
-    }
+.page {
+  position: relative;
+  max-width: var(--sl-page-max-width);
 
-    .mobile-preferences {
-      margin-top: 1rem;
-    }
+  .right-sidebar {
+    border-inline-start: unset;
   }
 
-  @media (min-width: 50rem) {
-    .page {
-      padding-left: var(--sl-sidebar-pad-x);
-      padding-right: var(--sl-sidebar-pad-x);
-
-      > header {
-        .header,
-        .stl-secondary-nav-tabs {
-          padding: 0 1.5rem;
-        }
-      }
-    }
+  .mobile-preferences {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 
-    .header,
-    .header {
-      padding-inline-start: 0;
-      padding-inline-end: 0;
-    }
+:root {
+  --sl-mobile-toc-height: 4rem;
+}
 
-    mobile-starlight-toc nav {
-      inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
-    }
-    .sidebar-content {
-      padding-left: 0;
-    }
+@media (min-width: 50rem) {
+  .page .sidebar-pane {
+    left: unset;
+  }
+  /* on desktop, adjust sidebar so that its _text content_ aligns with the page left edge.
+   * padding (visible on hover) bleeds out beyond the page left edge, covered by --stl-ui-page-padding-inline */
+  .sidebar-pane {
+    margin-inline-start: calc(-1 * (var(--sl-sidebar-pad-x) + var(--stl-sidebar-item-padding-inline)));
   }
 
-  .stl-content-breadcrumbs {
-    .stldocs-breadcrumbs {
-      padding-left: 0;
-    }
+  .header,
+  .header {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
   }
 
-  .stl-page-nav-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem 1rem 0;
-    flex-wrap: wrap;
+  mobile-starlight-toc nav {
+    inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
   }
 }
 
-@media (min-width: 50em) {
+.stl-content-breadcrumbs {
+  .stldocs-breadcrumbs {
+    padding-left: 0;
+  }
+}
+
+.stl-page-nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0 0 0;
+  flex-wrap: wrap;
+}
+
+.stl-page-nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0 0 0;
+  flex-wrap: wrap;
+}
+
+.stldocs-root .stl-page-nav-container {
+  padding: 1rem 0 0 var(--stldocs-content-padding);
+}
+
+@media (min-width: 50rem) {
   :root[data-has-sidebar] {
-    --sl-content-inline-start: calc(var(--sl-sidebar-width) + 1rem);
+    --sl-content-inline-start: calc(var(--sl-sidebar-width) + 2rem);
+  }
+
+  .stldocs-root .stl-page-nav-container {
+    padding: 1rem 0 0 0;
+  }
+}
+
+@media (min-width: 72rem) {
+  :root {
+    --sl-mobile-toc-height: 0rem;
+  }
+}
+
+.content-panel footer {
+  /* Don’t render empty footer meta, which results in extra margin getting applied on behalf of the flex gap.
+   * Instead, move its margin to its parent. */
+  margin-top: 3rem;
+  .meta {
+    margin-top: 0;
+    &:empty,
+    &:not(:has(> *)) {
+      display: none;
+    }
   }
 }

package/styles/sdk_select.css

@@ -1,11 +1,13 @@
-@layer stainless {
-  .stl-sdk-select-dropdown-menu {
-    min-width: 200px;
-  }
+.stl-sdk-select {
+  .stl-ui-dropdown {
+    width: 100%;
 
-  .stl-sdk-select {
-    .stldocs-icon.http path {
-      fill: var(--stldocs-color-text);
+    .stl-ui-dropdown__button {
+      width: 100%;
+      justify-content: space-between;
     }
   }
+  .stldocs-icon.http path {
+    fill: var(--stl-color-foreground);
+  }
 }

package/styles/search.css

@@ -1,84 +1,73 @@
-@layer stainless {
-  /* Search input styles for Astro and Algolia */
-  site-search {
-    display: contents;
-
-    > astro-island > div {
-      position: absolute;
-    }
-
-    > button {
-      padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
-      min-width: unset;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0;
-      width: var(--sl-button-size);
-      justify-content: center;
-      background-color: var(--sl-color-bg-ui);
-      border: 1px solid var(--sl-color-hairline);
-      border-radius: var(--sl-button-border-radius);
-      height: var(--sl-button-size);
+/* Search input styles for Astro and Algolia */
+site-search {
+  display: contents;
 
-      &:hover {
-        border-color: var(--sl-color-hairline-shade);
-      }
-
-      span {
-        font-size: var(--sl-text-sm);
-        color: var(--sl-color-text-secondary);
-        line-height: 150%;
-        padding-left: var(--sl-button-icon-offset);
-        padding-right: var(--sl-button-icon-offset);
-      }
+  > astro-island > div {
+    position: absolute;
+  }
 
-      > svg {
-        width: var(--sl-text-sm);
-        height: var(--sl-text-sm);
-      }
+  > button {
+    padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
+    min-width: unset;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0;
+    width: var(--sl-button-size);
+    justify-content: center;
+    background-color: var(--stl-color-ui-background);
+    border: 1px solid var(--stl-color-border);
+    border-radius: var(--sl-button-border-radius);
+    height: var(--sl-button-size);
 
-      &.stldocs-button {
-        padding: 0;
-      }
+    &:hover {
+      background: var(--stl-color-ui-background-hover);
     }
 
-    button > kbd {
-      border-radius: 0.25rem;
-      font-size: var(--sl-text-2xs);
-      gap: 0.25em;
-      padding-inline: 0.375rem;
-      background-color: var(--sl-color-gray-6);
-      margin-right: -0.3rem;
+    span {
+      font-size: var(--stl-typography-scale-sm);
+      color: var(--stl-color-foreground-reduced);
+      line-height: 150%;
+      padding-left: var(--sl-button-icon-offset);
+      padding-right: var(--sl-button-icon-offset);
     }
 
-    kbd {
-      font-family: var(--__sl-font);
-      color: var(--sl-color-text);
+    > svg {
+      width: var(--stl-typography-scale-sm);
+      height: var(--stl-typography-scale-sm);
     }
   }
 
-  @media (min-width: 50rem) {
-    site-search {
-      > button {
-        border-radius: var(--sl-button-border-radius);
-        padding-inline-start: var(--sl-button-padding-x);
-        padding-inline-end: var(--sl-button-padding-x);
-        width: 100%;
-        max-width: 30rem;
-        justify-content: start;
+  button > kbd {
+    border-radius: 0.25rem;
+    font-size: var(--stl-typography-scale-xs);
+    gap: 0.25em;
+    padding-inline: 0.375rem;
+    background-color: var(--stl-color-muted-background);
+    margin-right: -0.3rem;
+  }
 
-        &.stldocs-button {
-          padding-inline-start: var(--sl-button-padding-x);
-          padding-inline-end: var(--sl-button-padding-x);
-        }
+  kbd {
+    font-family: var(--__sl-font);
+    color: var(--stl-color-foreground-reduced);
+  }
+}
 
-        > :last-child {
-          margin-inline-start: auto;
-        }
-        > svg {
-          margin-left: calc(-1 * var(--sl-button-icon-offset));
-        }
+@media (min-width: 50rem) {
+  site-search {
+    > button {
+      border-radius: var(--sl-button-border-radius);
+      padding-inline-start: var(--sl-button-padding-x);
+      padding-inline-end: var(--sl-button-padding-x);
+      width: 100%;
+      max-width: 30rem;
+      justify-content: start;
+
+      > :last-child {
+        margin-inline-start: auto;
+      }
+      > svg {
+        margin-left: calc(-1 * var(--sl-button-icon-offset));
       }
     }
   }