@stainless-api/ui-primitives 0.1.0-beta.2 → 0.1.0-beta.21

package/src/scripts/dropdown.ts

@@ -0,0 +1,193 @@
+export function initDropdown({
+  root,
+  onSelect,
+  initialValue,
+}: {
+  root?: Element | null;
+  onSelect?: (value: string) => void;
+  initialValue?: string;
+}) {
+  if (!root) {
+    console.error('Dropdown root element not found');
+    return;
+  }
+  const trigger = root.querySelector<HTMLElement>('[data-part="trigger"]');
+  const menu = root.querySelector<HTMLElement>('[data-part="menu"]');
+
+  if (!trigger) {
+    console.error('Dropdown trigger not found');
+    return;
+  }
+
+  if (!menu) {
+    console.error('Dropdown menu not found');
+    return;
+  }
+
+  const selectedSlot = trigger.querySelector('[data-part="trigger-selected"]');
+
+  const items = Array.from(menu.querySelectorAll<HTMLElement>('[data-part="item"]'));
+
+  function open() {
+    if (!trigger || !menu || !root) return;
+    root.setAttribute('aria-expanded', 'true');
+    menu.dataset.state = 'open';
+    menu.removeAttribute('aria-hidden');
+
+    // Determine if menu should open above or below
+    const triggerRect = trigger.getBoundingClientRect();
+    const menuHeight = menu.offsetHeight;
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    menu.classList.remove('stl-ui-dropdown-menu--above', 'stl-ui-dropdown-menu--below');
+
+    if (spaceBelow < menuHeight && spaceAbove > spaceBelow) {
+      menu.classList.add('stl-ui-dropdown-menu--above');
+    } else {
+      menu.classList.add('stl-ui-dropdown-menu--below');
+    }
+  }
+
+  function close() {
+    if (!trigger || !menu || !root) return;
+    root.setAttribute('aria-expanded', 'false');
+    menu.dataset.state = 'closed';
+    menu.setAttribute('aria-hidden', 'true');
+  }
+
+  function renderSelectedFromItem(item: Element) {
+    // If there is no selected slot, do nothing. This allows for dropdowns without a selected display.
+    if (!selectedSlot) {
+      return;
+    }
+    const tmpl = item.querySelector<HTMLTemplateElement>('template[data-part="selected-template"]');
+
+    if (!tmpl) {
+      console.error('Dropdown item template not found');
+      return;
+    }
+
+    selectedSlot.innerHTML = '';
+    selectedSlot.appendChild(tmpl.content.cloneNode(true));
+    selectedSlot.removeAttribute('data-placeholder');
+  }
+
+  function selectItem(item: Element) {
+    if (!trigger) {
+      console.error('Dropdown trigger not found');
+      return;
+    }
+    items.forEach((i) => i.setAttribute('aria-selected', String(i === item)));
+    trigger.dataset.value = item.getAttribute('data-value') || '';
+    renderSelectedFromItem(item);
+  }
+
+  function handleItemSelection(e: MouseEvent | KeyboardEvent) {
+    const item = (e.target as Element).closest('[data-part="item"]');
+    if (!item) {
+      console.error('Dropdown item not found');
+      return;
+    }
+    if (!trigger) {
+      console.error('Dropdown trigger not found');
+      return;
+    }
+
+    selectItem(item);
+    onSelect?.(item.getAttribute('data-value') || '');
+    close();
+    trigger.focus();
+  }
+
+  function handleTriggerClick() {
+    if (!root) return false;
+    const isOpen = root.getAttribute('aria-expanded') === 'true';
+    if (isOpen) {
+      close();
+      return false;
+    } else {
+      open();
+      return true;
+    }
+  }
+
+  // Initialize selected item
+  const initial =
+    (initialValue
+      ? items.find((i) => i.getAttribute('data-value') === initialValue)
+      : items.find((i) => i.getAttribute('aria-selected') === 'true')) ?? items[0];
+
+  if (initial) selectItem(initial);
+
+  // add event listeners
+  trigger.addEventListener('click', () => {
+    handleTriggerClick();
+  });
+
+  // When using the keyboard to open the dropdown, we focus the first item
+  trigger.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    const didOpen = handleTriggerClick();
+    if (didOpen) {
+      items[0]?.focus();
+    }
+  });
+
+  menu.addEventListener('click', (e) => {
+    handleItemSelection(e);
+  });
+
+  document.addEventListener('keydown', (e) => {
+    const isOpen = root.getAttribute('aria-expanded') === 'true';
+    if (!isOpen) return;
+
+    if (e.key === 'Escape') {
+      close();
+      trigger.focus();
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const activeElement = document.activeElement;
+
+      // if the active item is the button itself, focus the first item
+      if (activeElement === trigger) {
+        items[0]?.focus();
+        return;
+      }
+      let nextSibling = activeElement?.nextElementSibling;
+      while (nextSibling && nextSibling.tagName.toLowerCase() === 'hr') {
+        nextSibling = nextSibling.nextElementSibling;
+      }
+      if (nextSibling instanceof HTMLElement && items.includes(nextSibling)) {
+        nextSibling.focus();
+      }
+      return;
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const activeElement = document.activeElement;
+      // if the active item is the button itself, focus the last item
+      if (activeElement === trigger) {
+        items[items.length - 1]?.focus();
+        return;
+      }
+      let prevSibling = activeElement?.previousElementSibling;
+      while (prevSibling && prevSibling.tagName.toLowerCase() === 'hr') {
+        prevSibling = prevSibling.previousElementSibling;
+      }
+      if (prevSibling instanceof HTMLElement && items.includes(prevSibling)) {
+        prevSibling.focus();
+      }
+      return;
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!root.contains(e.target as Element)) close();
+  });
+}

package/src/scripts/index.ts

@@ -1 +1,2 @@
 export * from './dropdown-button';
+export * from './dropdown';

package/src/styles/layout.css

@@ -1,4 +1,4 @@
-@layer stl-ui {
+@layer stl-ui.tokens {
   /* Layout - Stainless */
   :root {
     --stl-ui-layout-border-radius-xs: 4px;
@@ -7,5 +7,7 @@
     --stl-ui-layout-border-radius-med: 16px;
     --stl-ui-layout-border-radius-max: 9999px;
     --stl-ui-left-content-indent: 24px;
+
+    --stl-ui-page-padding-inline: 20px;
   }
 }

package/src/styles/scales.css

@@ -1,4 +1,4 @@
-@layer stl-ui {
+@layer stl-ui.tokens {
   /* Scales - Default */
   :root {
     --stl-ui-gray-50: rgba(250, 250, 250, 1);

package/src/styles/starlight-compat.css

@@ -1,125 +1,156 @@
-@layer stl-ui {
-  :root {
-    --stl-ui-button-border-radius: 8px;
-    --stl-ui-text-body: 14px;
-    --stl-ui-font-family: 'Geist', system-ui, sans-serif;
-    --stl-ui-button-size: 2rem;
-
-    /* Brand colors */
-    --stl-ui-color-text-brand: var(--stl-ui-color-text-invert);
-    --stl-ui-color-brand: var(--stl-ui-color-accent);
-  }
+:root {
+  /* Layout and Typography */
+  --sl-font: var(--stl-ui-typography-font);
+  --sl-font-mono: var(--stl-ui-typography-font-mono);
+  --sl-line-height: var(--stl-ui-typography-line-height);
+
+  /* Headings */
+  --sl-text-h1: var(--stl-ui-typography-text-h1);
+  --sl-text-h2: var(--stl-ui-typography-text-h2);
+  --sl-text-h3: var(--stl-ui-typography-text-h3);
+  --sl-text-h4: var(--stl-ui-typography-text-h4);
+  --sl-text-h5: var(--stl-ui-typography-text-h5);
+
+  /* Colors */
+  --sl-color-bg: var(--stl-ui-background);
+  --sl-color-bg-sidebar: var(--stl-ui-background);
+  --sl-color-bg-ui: var(--stl-ui-card-background);
+  --sl-color-bg-nav: var(--stl-ui-background);
+  --sl-color-bg-inline-code: var(--stl-ui-muted-background);
+  --sl-color-bg-accent: var(--stl-ui-accent-background);
+
+  --sl-color-text: var(--stl-ui-foreground);
+  --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
+  --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
+  --sl-color-text-accent: var(--stl-ui-foreground-accent);
+  --sl-color-hairline: var(--stl-ui-border);
+  --sl-color-hairline-light: var(--stl-ui-border-muted);
+  --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
+  --sl-color-text-invert: var(--stl-ui-inverse-foreground);
+
+  /* Primary colors */
+  --sl-color-red-low: var(--stl-ui-swatch-red-faint);
+  --sl-color-red: var(--stl-ui-swatch-red-base);
+  --sl-color-red-high: var(--stl-ui-swatch-red-base);
+
+  --sl-color-green-low: var(--stl-ui-swatch-green-faint);
+  --sl-color-green: var(--stl-ui-swatch-green-base);
+  --sl-color-green-high: var(--stl-ui-swatch-green-base);
+
+  --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
+  --sl-color-blue: var(--stl-ui-swatch-blue-base);
+  --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
+
+  --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
+  --sl-color-orange: var(--stl-ui-swatch-orange-base);
+  --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
+
+  --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
+  --sl-color-purple: var(--stl-ui-swatch-purple-base);
+  --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
+
+  --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
+  --sl-color-teal: var(--stl-ui-swatch-teal-base);
+  --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
+
+  --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
+  --sl-color-magenta: var(--stl-ui-swatch-pink-base);
+  --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
+
+  --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
+  --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
+  --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
+}
 
-  :root {
-    /* Layout and Typography */
-    --sl-text-h1: var(--stl-ui-typography-text-h1);
-    --sl-text-h2: var(--stl-ui-typography-text-h2);
-    --sl-text-h3: var(--stl-ui-typography-text-h3);
-    --sl-text-h4: var(--stl-ui-typography-text-h4);
-    --sl-text-h4: var(--stl-ui-typography-text-h5);
-
-    /* Colors */
-    --sl-color-bg: var(--stl-ui-background);
-    --sl-color-bg-sidebar: var(--stl-ui-background);
-    --sl-color-bg-ui: var(--stl-ui-card-background);
-    --sl-color-bg-nav: var(--stl-ui-background);
-    --sl-color-bg-inline-code: var(--stl-ui-muted-background);
-    --sl-color-bg-accent: var(--stl-ui-accent-background);
-
-    --sl-color-text: var(--stl-ui-foreground);
-    --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
-    --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
-    --sl-color-text-accent: var(--stl-ui-foreground-accent);
-    --sl-color-hairline: var(--stl-ui-border);
-    --sl-color-hairline-light: var(--stl-ui-border-muted);
-    --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
-    --sl-color-text-invert: var(--stl-ui-inverse-foreground);
-
-    /* Primary colors */
-    --sl-color-red-low: var(--stl-ui-swatch-red-faint);
-    --sl-color-red: var(--stl-ui-swatch-red-base);
-    --sl-color-red-high: var(--stl-ui-swatch-red-base);
-
-    --sl-color-green-low: var(--stl-ui-swatch-green-faint);
-    --sl-color-green: var(--stl-ui-swatch-green-base);
-    --sl-color-green-high: var(--stl-ui-swatch-green-base);
-
-    --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
-    --sl-color-blue: var(--stl-ui-swatch-blue-base);
-    --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
-
-    --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
-    --sl-color-orange: var(--stl-ui-swatch-orange-base);
-    --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
-
-    --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
-    --sl-color-purple: var(--stl-ui-swatch-purple-base);
-    --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
-
-    --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
-    --sl-color-teal: var(--stl-ui-swatch-teal-base);
-    --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
-
-    --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
-    --sl-color-magenta: var(--stl-ui-swatch-pink-base);
-    --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
-
-    --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
-    --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
-    --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
+/* Starlight Compatibility */
+.stl-ui-prose {
+  /* TODO: Disable starlight headingLinks and replace with our own */
+  /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
+  .sl-heading-wrapper.level-h1 {
+    font-size: var(--stl-ui-typography-text-h1);
+    letter-spacing: -0.03em;
+    margin-top: 64px;
+    line-height: var(--stl-ui-typography-line-height-headings);
+  }
+  .sl-heading-wrapper.level-h2 {
+    font-size: var(--stl-ui-typography-text-h2);
+    letter-spacing: -0.03em;
+    margin-top: 48px;
+    line-height: var(--stl-ui-typography-line-height-headings);
   }
 
-  /* Starlight Compatibility */
-  .stl-ui-prose {
-    .sl-anchor-link svg {
-      margin-top: 4px;
-    }
-
-    h2 code {
-      font-size: var(--stl-ui-typography-text-h4);
-      line-height: 120%;
-    }
-
-    h3 code {
-      font-size: var(--stl-ui-typography-text-h5);
-      line-height: 120%;
-    }
-
-    /* Tab component */
-    starlight-tabs {
-      a {
-        text-decoration: none;
-        line-height: unset;
-        color: var(--stl-ui-foreground);
+  .sl-heading-wrapper.level-h3 {
+    font-size: var(--stl-ui-typography-text-h3);
+    letter-spacing: -0.02em;
+    margin-top: 40px;
+    line-height: var(--stl-ui-typography-line-height-headings);
+  }
+  .sl-heading-wrapper.level-h4 {
+    font-size: var(--stl-ui-typography-text-h4);
+    letter-spacing: -0.02em;
+    margin-top: 32px;
+    line-height: var(--stl-ui-typography-line-height-headings);
+  }
+  .sl-heading-wrapper.level-h5 {
+    font-size: var(--stl-ui-typography-text-h5);
+    letter-spacing: -0.02em;
+    margin-top: 24px;
+    line-height: var(--stl-ui-typography-line-height-headings);
+  }
+  .sl-heading-wrapper {
+    --sl-anchor-icon-size: 0.8em;
+  }
+  /* TODO: replace with an icon that matches Stainless branding */
+  .sl-anchor-link svg {
+    margin-top: 0;
+  }
+}
 
-        &[aria-selected='true'] {
-          color: var(--stl-ui-foreground-accent);
-        }
+/* TODO: remove these */
+.stl-ui-prose {
+  /* Tab component */
+  starlight-tabs {
+    a {
+      text-decoration: none;
+      line-height: unset;
+      color: var(--stl-ui-foreground);
+
+      &[aria-selected='true'] {
+        color: var(--stl-ui-foreground-accent);
+        font-weight: normal;
       }
+    }
 
-      ol,
-      ul {
+    ol,
+    ul {
+      &:not(.stl-ui-not-prose *) {
         padding-left: 0;
       }
+    }
 
-      li {
+    li:not(.stl-ui-not-prose *) {
+      margin-bottom: -2px;
+      &:not(:last-child) {
         margin-bottom: -2px;
-        &:not(:last-child) {
-          margin-bottom: -2px;
-        }
+      }
 
-        a:first-child {
-          display: flex;
-        }
+      a:first-child {
+        display: flex;
       }
     }
+  }
 
-    /* Pagination Links */
+  /* Pagination Links */
 
-    .pagination-links {
-      a {
-        color: var(--stl-ui-foreground);
-      }
+  .pagination-links {
+    a {
+      color: var(--stl-ui-foreground);
+    }
+  }
+
+  .starlight-aside {
+    svg {
+      margin-top: 0;
     }
   }
 }

package/src/styles/swatches.css

@@ -1,6 +1,6 @@
-@layer stl-ui {
+@layer stl-ui.tokens {
   /* --stl-ui-swatch-es - Light */
-  :root[data-theme='light'] {
+  :root {
     --stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-800);
     --stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-700);
     --stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-600);

package/src/styles/theme.css

@@ -1,6 +1,6 @@
-@layer stl-ui {
+@layer stl-ui.tokens {
   /* Swatches - Light */
-  :root[data-theme='light'] {
+  :root {
     --stl-ui-background: var(--stl-ui-swatch-gray-white);
     --stl-ui-card-background: var(--stl-ui-swatch-gray-white);
     --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-8);