@stainless-api/docs-ui 0.1.0-beta.85 → 0.1.0-beta.86

package/dist/styles/search.css

@@ -1,229 +1,227 @@
 .stldocs-root .stldocs-search-form {
-  display: flex;
   flex-direction: column;
+  display: flex;
 
-  .stldocs-search-filter {
-    margin-top: 0.5rem;
+  & .stldocs-search-filter {
+    gap: .5rem;
+    margin-top: .5rem;
     display: flex;
-    gap: 0.5rem;
 
-    .stl-ui-button {
-      flex: 1 1 auto;
+    & .stl-ui-button {
+      flex: auto;
+      gap: .5em;
       padding: 0;
       display: flex;
-      gap: 0.5em;
 
-      .stldocs-search-filter-count {
-        font-size: 0.75rem;
+      & .stldocs-search-filter-count {
         background-color: var(--stldocs-color-selected);
+        font-variant-numeric: tabular-nums;
         border-radius: 100vmax;
-        padding: 0 0.35rem;
+        padding: 0 .35rem;
+        font-size: .75rem;
         line-height: 1.5;
-        font-variant-numeric: tabular-nums;
       }
 
-      svg {
-        flex: 0 0 auto;
+      & svg {
+        flex: none;
       }
     }
 
-    @media not (min-width: 50rem) {
-      svg {
+    @media (width < 50rem) {
+      & svg {
         display: block;
       }
-      .stldocs-search-filter-label,
-      .stldocs-search-filter-count {
+
+      & .stldocs-search-filter-label, & .stldocs-search-filter-count {
         display: none;
       }
     }
   }
 
-  .stldocs-search-result {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  & .stldocs-search-result {
     cursor: pointer;
-    margin: 0.5rem 0;
-    padding: 0.5rem 0.8rem;
+    flex-direction: column;
+    gap: .5rem;
+    margin: .5rem 0;
+    padding: .5rem .8rem;
+    display: flex;
 
-    mark {
+    & mark {
       color: var(--stl-color-foreground);
       background-color: var(--stl-color-text-selection-background);
       box-shadow: inset 0 -1px rgb(from var(--stl-color-text-selection-background) r g b / 1);
     }
 
-    &[data-stldocs-search-result='resource'] {
-      .stldocs-search-result-resource-info {
+    &[data-stldocs-search-result="resource"] {
+      & .stldocs-search-result-resource-info {
+        gap: .5rem;
         display: flex;
-        gap: 0.5rem;
 
-        .stldocs-search-result-resource-title {
+        & .stldocs-search-result-resource-title {
           font-weight: 600;
         }
 
-        .stldocs-search-result-resource-path {
+        & .stldocs-search-result-resource-path {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
-          overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          overflow: hidden;
         }
       }
     }
 
-    &[data-stldocs-search-result='http_method'] {
-      h3.stldocs-method-title {
+    &[data-stldocs-search-result="http_method"] {
+      & h3.stldocs-method-title {
         font-size: 1.2rem;
       }
 
-      .stldocs-method-header {
-        display: flex;
+      & .stldocs-method-header {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: .5rem;
+        display: flex;
 
-        .stldocs-method-signature {
+        & .stldocs-method-signature {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
           white-space: pre-wrap;
           word-break: break-word;
 
-          .stldocs-text-identifier {
+          & .stldocs-text-identifier {
             color: var(--stl-color-foreground);
           }
         }
 
-        .stldocs-method-route {
-          font-size: 0.8rem;
+        & .stldocs-method-route {
+          font-size: .8rem;
 
-          .stldocs-method-route-endpoint {
+          & .stldocs-method-route-endpoint {
             font-family: var(--stl-typography-font-mono);
             color: var(--stl-color-foreground-muted);
           }
         }
       }
 
-      .stldocs-method-description {
+      & .stldocs-method-description {
         color: var(--stl-color-foreground);
       }
     }
 
-    &[data-stldocs-search-result='property'] {
-      .stldocs-property-info {
-        display: flex;
+    &[data-stldocs-search-result="property"] {
+      & .stldocs-property-info {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: .5rem;
+        display: flex;
       }
 
-      .stldocs-property-header {
+      & .stldocs-property-header {
+        gap: .5rem;
         display: flex;
-        gap: 0.5rem;
 
-        .stldocs-property-name {
+        & .stldocs-property-name {
           font-family: var(--stl-typography-font-mono);
         }
 
-        .stldocs-property-typename {
+        & .stldocs-property-typename {
           color: var(--stl-color-foreground-muted);
         }
       }
 
-      .stldocs-property-description {
+      & .stldocs-property-description {
         color: var(--stl-color-foreground);
       }
     }
 
-    &[data-stldocs-search-result='model'] {
-      .stldocs-property-info {
-        display: flex;
+    &[data-stldocs-search-result="model"] {
+      & .stldocs-property-info {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: .5rem;
+        display: flex;
 
-        .stldocs-property-type {
+        & .stldocs-property-type {
           font-family: var(--stl-typography-font-mono);
           color: var(--stl-color-foreground);
         }
       }
     }
 
-    &[data-stldocs-search-result='guide'] {
-      .stldocs-search-result-guide-title {
+    &[data-stldocs-search-result="guide"] {
+      & .stldocs-search-result-guide-title {
         font-size: 1.2rem;
       }
 
-      .stldocs-search-result-guide-excerpt {
+      & .stldocs-search-result-guide-excerpt {
         color: var(--stl-color-foreground);
       }
 
-      .stldocs-search-breadcrumb-item {
+      & .stldocs-search-breadcrumb-item {
         text-transform: capitalize;
       }
     }
   }
 
-  .stldocs-search-breadcrumb {
-    display: flex;
-    gap: 0.5rem;
-    font-size: 0.8rem;
-    overflow: hidden;
+  & .stldocs-search-breadcrumb {
     text-overflow: ellipsis;
     white-space: nowrap;
+    gap: .5rem;
+    font-size: .8rem;
+    display: flex;
+    overflow: hidden;
 
-    .stldocs-search-breadcrumb-item {
+    & .stldocs-search-breadcrumb-item {
       color: var(--stl-color-foreground-muted);
     }
 
-    .stldocs-icon {
+    & .stldocs-icon {
       margin-top: auto;
       margin-bottom: auto;
     }
   }
 
-  .stldocs-search-disabled-state-container {
-    margin: auto;
+  & .stldocs-search-disabled-state-container {
     text-align: center;
+    margin: auto;
   }
 }
 
 .stldocs-root .stldocs-search-modal {
   height: calc(100svh - var(--sl-nav-height));
-  width: 100%;
-  overflow: hidden;
-  display: none;
-  padding: 1rem 1rem 0;
-  inset: 0;
   background-color: var(--stl-color-background);
+  width: 100%;
   color: var(--stl-color-foreground);
-  gap: 0.5rem;
   border: none;
+  gap: .5rem;
+  padding: 1rem 1rem 0;
+  display: none;
+  inset: 0;
+  overflow: hidden;
 
-  &:popover-open,
-  &[data-stldocs-modal-open='true'] {
-    display: flex;
+  &:popover-open, &[data-stldocs-modal-open="true"] {
+    top: var(--sl-nav-height);
     flex-direction: column;
+    display: flex;
     position: fixed;
-    top: var(--sl-nav-height);
   }
 
-  .stldocs-search-form {
-    height: 100%;
+  & .stldocs-search-form {
     width: 100%;
+    height: 100%;
 
-    .stldocs-listview {
-      margin: 0.8rem 0 0;
+    & .stldocs-listview {
       height: 100%;
+      margin: .8rem 0 0;
       padding-bottom: 1rem;
     }
   }
 
-  .stldocs-search-modal-close-button {
-    display: flex;
+  & .stldocs-search-modal-close-button {
     justify-content: flex-end;
+    display: flex;
   }
 
   &::backdrop {
     background-color: var(--stldocs-color-backdrop-overlay);
-    -webkit-backdrop-filter: blur(0.25rem);
-    backdrop-filter: blur(0.25rem);
+    backdrop-filter: blur(.25rem);
     top: var(--sl-nav-height);
   }
 }
@@ -234,24 +232,22 @@
   }
 }
 
-@media (min-width: 50rem) {
+@media (width >= 50rem) {
   .stldocs-root {
-    .stldocs-search-modal {
-      height: 100%;
+    & .stldocs-search-modal {
+      border: 1px solid var(--stl-color-border);
+      border-radius: calc(var(--stl-ui-layout-border-radius-sml) + .9rem);
       width: 1024px;
       max-width: calc(100% - 4rem);
+      height: 100%;
       max-height: 80vh;
       margin: 3rem auto;
-      border: 1px solid var(--stl-color-border);
-      /* nest with input that has --stl-ui-layout-border-radius-sml */
-      border-radius: calc(var(--stl-ui-layout-border-radius-sml) + 0.9rem);
 
-      .stldocs-search-modal-close-button {
+      & .stldocs-search-modal-close-button {
         display: none;
       }
 
-      &:popover-open,
-      &[data-stldocs-modal-open='true'] {
+      &:popover-open, &[data-stldocs-modal-open="true"] {
         top: 0;
       }
 
@@ -261,4 +257,3 @@
     }
   }
 }
-

package/dist/styles/sidebar.css

@@ -1,103 +1,89 @@
 :root {
-  --stldocs-sidebar-item-padding-inline: 0.75rem;
-  --stldocs-sidebar-item-padding-block: 0.375rem;
-  --stldocs-sidebar-indent: 0.75rem;
+  --stldocs-sidebar-item-padding-inline: .75rem;
+  --stldocs-sidebar-item-padding-block: .375rem;
+  --stldocs-sidebar-indent: .75rem;
 }
 
 .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;
+  background-color: #0000;
 
-  ul,
-  summary {
+  & ul, & summary {
     list-style-type: none;
   }
 
-  .stldocs-expander-summary,
-  .stldocs-sidebar-entry-group > a {
+  & .stldocs-expander-summary, & .stldocs-sidebar-entry-group > a {
     font-weight: 500;
   }
 
-  .stldocs-expander-summary {
-    display: flex;
-    align-items: center;
+  & .stldocs-expander-summary {
     user-select: none;
+    align-items: center;
+    display: flex;
 
-    .stldocs-expander-summary-icon {
-      margin-left: 4px;
-      opacity: 0.65;
-      transition:
-        opacity 0.1s ease-out,
-        transform 0.1s ease-out;
+    & .stldocs-expander-summary-icon {
+      opacity: .65;
       border-radius: 4px;
+      margin-left: 4px;
+      transition: opacity .1s ease-out, transform .1s ease-out;
 
       &:hover {
         background-color: var(--stl-color-background-hover);
       }
     }
 
-    span[aria-hidden='true'] {
+    & span[aria-hidden="true"] {
       opacity: 0;
     }
   }
 
-  .stldocs-sidebar-entry-group {
+  & .stldocs-sidebar-entry-group {
     position: relative;
 
-    /* Anchor is positioned over the <details>. */
-    > a {
+    & > a {
+      padding-block: var(--stldocs-sidebar-item-padding-block);
+      padding-inline: var(--stldocs-sidebar-item-padding-inline);
       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 {
+  & .stldocs-sidebar-expander[open] > .stldocs-expander-summary .stldocs-expander-summary-icon {
     opacity: 1;
     transform: rotate(90deg);
   }
 
-  /* Explicitly prevent collapsed groups from painting.
-     Browsers should not be computing styles/layout on collapsed <details> non-summary children, but Safari still seems to.
-     Applying display: none lowers rendering cost for trees with many items (eg. the CF API which has ~2k+ items)
-     In Arena's testing using dev server, Safari paint time for a CF page went from 10-14 seconds to ~3 seconds.
-  */
-  .stldocs-sidebar-expander:not([open]) > .stldocs-sidebar-list {
+  & .stldocs-sidebar-expander:not([open]) > .stldocs-sidebar-list {
     display: none;
   }
 
-  /* List items. */
-  .stldocs-sidebar-entry,
-  .stldocs-expander-summary {
-    margin: 0;
+  & .stldocs-sidebar-entry, & .stldocs-expander-summary {
     border-radius: 8px;
+    margin: 0;
   }
 
-  .stldocs-expander-summary,
-  .stldocs-sidebar-entry-link a {
+  & .stldocs-expander-summary, & .stldocs-sidebar-entry-link a {
     padding: var(--stldocs-sidebar-item-padding-block) var(--stldocs-sidebar-item-padding-inline);
   }
 
-  summary.stldocs-expander-summary,
-  .stldocs-sidebar-entry-link a {
+  & summary.stldocs-expander-summary, & .stldocs-sidebar-entry-link a {
     cursor: pointer;
   }
 
-  .stldocs-sidebar-entry-link a:hover {
+  & .stldocs-sidebar-entry-link a:hover {
     color: var(--stl-color-foreground);
   }
 
-  .stldocs-sidebar-entry-link a {
+  & .stldocs-sidebar-entry-link a {
     color: var(--stl-color-foreground-reduced);
     font-weight: 400;
-    display: flex;
     text-decoration: none;
-    span {
+    display: flex;
+
+    & span {
       font-weight: inherit;
     }
 
@@ -105,57 +91,47 @@
       text-decoration: underline;
       text-decoration-color: var(--stl-color-foreground-reduced);
     }
-    &[aria-current='page'] {
-      font-weight: 500;
+
+    &[aria-current="page"] {
       color: var(--stl-color-foreground);
+      font-weight: 500;
     }
   }
 
-  /* 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 {
+  & .stldocs-sidebar-entry-group:has( > a) .stldocs-expander-summary > span {
     pointer-events: none;
   }
 
-  .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,
-  summary.stldocs-expander-summary:hover {
+  & .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, & summary.stldocs-expander-summary:hover {
     background-color: var(--stl-color-background-hover);
   }
 
-  /* Nested list items have flat left edge. */
-  .stldocs-sidebar-list .stldocs-sidebar-list :is(.stldocs-expander-summary, .stldocs-sidebar-entry) {
+  & .stldocs-sidebar-list .stldocs-sidebar-list :is(.stldocs-expander-summary, .stldocs-sidebar-entry) {
     border-start-start-radius: 0;
     border-end-start-radius: 0;
   }
 
-  .stldocs-sidebar-list {
+  & .stldocs-sidebar-list {
     padding: 0;
   }
 
-  .stldocs-sidebar-list .stldocs-sidebar-list .stldocs-sidebar-entry {
+  & .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);
 
-    > a[aria-current='page'] {
+    & > a[aria-current="page"] {
       border-inline-start: 2px solid var(--stl-color-accent-border-strong);
       margin-left: -1px;
     }
   }
 
-  /* Icon positioning within links/groups. */
-  .stldocs-sidebar-entry-link > a,
-  .stldocs-sidebar-entry-group > a,
-  .stldocs-sidebar-entry-group .stldocs-expander-summary > span {
-    display: flex;
+  & .stldocs-sidebar-entry-link > a, & .stldocs-sidebar-entry-group > a, & .stldocs-sidebar-entry-group .stldocs-expander-summary > span {
     align-items: center;
     gap: 8px;
+    display: flex;
   }
 
-  /* Hover/active states for HTTP badges. */
-  a[aria-current='page'] .stl-ui-badge--http {
+  & a[aria-current="page"] .stl-ui-badge--http {
     &.stl-ui-badge--http-get {
       background-color: var(--stl-color-green-inverse-background);
       color: var(--stl-color-green-inverse-foreground);
@@ -166,8 +142,7 @@
       color: var(--stl-color-blue-inverse-foreground);
     }
 
-    &.stl-ui-badge--http-patch,
-    &.stl-ui-badge--http-put {
+    &.stl-ui-badge--http-patch, &.stl-ui-badge--http-put {
       background-color: var(--stl-color-orange-inverse-background);
       color: var(--stl-color-orange-inverse-foreground);
     }
@@ -178,7 +153,7 @@
     }
   }
 
-  a:hover:not([aria-current='page']) .stl-ui-badge--http {
+  & a:hover:not([aria-current="page"]) .stl-ui-badge--http {
     &.stl-ui-badge--http-get {
       background-color: var(--stl-color-green-muted-background-hover);
     }
@@ -187,8 +162,7 @@
       background-color: var(--stl-color-blue-muted-background-hover);
     }
 
-    &.stl-ui-badge--http-patch,
-    &.stl-ui-badge--http-put {
+    &.stl-ui-badge--http-patch, &.stl-ui-badge--http-put {
       background-color: var(--stl-color-orange-muted-background-hover);
     }
 
@@ -197,4 +171,3 @@
     }
   }
 }
-

package/dist/styles/variables.css

@@ -1,12 +1,10 @@
 :root {
   --stldocs-color-selected: var(--stl-color-muted-background);
   --stldocs-color-bg-inline-code: var(--stl-color-muted-background);
-
   --stldocs-content-width: 720px;
   --stldocs-content-padding: 16px;
   --stldocs-content-padding-inline: var(--stldocs-content-padding);
   --stldocs-content-padding-block: var(--stldocs-content-padding);
-
   --stldocs-color-http-get-bg: var(--stl-color-green-muted-background);
   --stldocs-color-http-get: var(--stl-color-green-foreground);
   --stldocs-color-http-put-bg: var(--stl-color-orange-muted-background);
@@ -15,15 +13,12 @@
   --stldocs-color-http-post: var(--stl-color-blue-foreground);
   --stldocs-color-http-delete-bg: var(--stl-color-red-muted-background);
   --stldocs-color-http-delete: var(--stl-color-red-foreground);
-
   --stldocs-syntax-color-green: var(--stl-color-green-foreground);
   --stldocs-syntax-color-orange: var(--stl-color-orange-foreground);
   --stldocs-syntax-color-purple: var(--stl-color-purple-foreground);
   --stldocs-syntax-color-blue: var(--stl-color-blue-foreground);
-
   --stldocs-expander-margin-shift: 24px;
   --stldocs-expander-right-margin: 8px;
   --stldocs-title-padding-y: 2.5rem;
   --stldocs-color-backdrop-overlay: var(--stl-color-muted-background);
 }
-