@stainless-api/ui-primitives 0.1.0-beta.5 → 0.1.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @stainless-api/ui-primitives
 
+## 0.1.0-beta.6
+
+### Minor Changes
+
+- f664b4d: Creating design system css variables, markdown styles, and typography improvements
+
+### Patch Changes
+
+- 34cbd12: verify publishing
+
 ## 0.1.0-beta.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.6",
   "publishConfig": {
     "access": "public"
   },
@@ -10,11 +10,6 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./scripts": {
-      "types": "./src/scripts/index.ts",
-      "import": "./src/scripts/index.ts",
-      "require": "./src/scripts/index.ts"
-    },
     "./styles.css": "./src/styles.css"
   },
   "types": "./src/index.ts",

package/src/components/callout.css

@@ -1,4 +1,4 @@
-@layer stl-ui {
+@layer stl-ui.components {
   .stl-ui-callout {
     --stl-ui-callout-background-color: var(--stl-ui-muted-background);
     --stl-ui-callout-border-color: var(--stl-ui-border);

package/src/components/details.css

@@ -11,115 +11,113 @@
   }
 }
 
-@layer stl-ui {
-  @layer typography {
-    .stl-ui-prose {
-      details {
-        --stl-ui-details-padding: 12px;
-        --stl-ui-details-content-padding-bottom: 4px;
-        --stl-ui-details-marker-size: 1em;
-        --stl-ui-details-marker-margin: calc((1lh - var(--stl-ui-details-marker-size)) / 2);
-        --stl-ui-details-row-gap: 8px;
-        --stl-ui-details-summary-column-gap: 8px;
-        --stl-ui-details-border-radius: var(--stl-ui-layout-border-radius);
-        /* left inset to make content line up with summary content (after chevron) */
-        --stl-ui--internal--details-padding-start: calc(
-          var(--stl-ui-details-padding)
-          + var(--stl-ui-details-marker-size)
-          + var(--stl-ui-details-marker-margin) * 2
-          + var(--stl-ui-details-summary-column-gap)
-        );
-
-        background-color: var(--stl-ui-card-background);
-        border: 1px solid var(--stl-ui-border);
-        border-radius: var(--stl-ui-details-border-radius);
-        font-size: var(--stl-ui-typography-text-body);
-
+@layer stl-ui.components {
+  .stl-ui-prose {
+    details {
+      --stl-ui-details-padding: 12px;
+      --stl-ui-details-content-padding-bottom: 4px;
+      --stl-ui-details-marker-size: 1em;
+      --stl-ui-details-marker-margin: calc((1lh - var(--stl-ui-details-marker-size)) / 2);
+      --stl-ui-details-row-gap: 8px;
+      --stl-ui-details-summary-column-gap: 8px;
+      --stl-ui-details-border-radius: var(--stl-ui-layout-border-radius);
+      /* left inset to make content line up with summary content (after chevron) */
+      --stl-ui--internal--details-padding-start: calc(
+        var(--stl-ui-details-padding)
+        + var(--stl-ui-details-marker-size)
+        + var(--stl-ui-details-marker-margin) * 2
+        + var(--stl-ui-details-summary-column-gap)
+      );
+
+      background-color: var(--stl-ui-card-background);
+      border: 1px solid var(--stl-ui-border);
+      border-radius: var(--stl-ui-details-border-radius);
+      font-size: var(--stl-ui-typography-text-body);
+
+      padding: var(--stl-ui-details-padding);
+      /* indent content to line up with left edge of summary content */
+      padding-inline-start: var(--stl-ui--internal--details-padding-start);
+
+      summary {
+        display: block;
+        list-style: none;
+
+        /* summary extends to the edges of the element in order to increase click target */
         padding: var(--stl-ui-details-padding);
-        /* indent content to line up with left edge of summary content */
         padding-inline-start: var(--stl-ui--internal--details-padding-start);
+        margin: calc(-1 * var(--stl-ui-details-padding));
+        margin-inline-start: calc(-1 * var(--stl-ui--internal--details-padding-start));
 
-        summary {
-          display: block;
-          list-style: none;
+        cursor: pointer;
+        font-weight: 500;
 
-          /* summary extends to the edges of the element in order to increase click target */
-          padding: var(--stl-ui-details-padding);
-          padding-inline-start: var(--stl-ui--internal--details-padding-start);
-          margin: calc(-1 * var(--stl-ui-details-padding));
-          margin-inline-start: calc(-1 * var(--stl-ui--internal--details-padding-start));
+        border-radius: var(--stl-ui-details-border-radius);
 
-          cursor: pointer;
-          font-weight: 500;
+        &::before {
+          content: '';
+          width: var(--stl-ui-details-marker-size);
+          height: var(--stl-ui-details-marker-size);
+          margin: var(--stl-ui-details-marker-margin);
+          background-color: currentColor;
+          display: block;
+          position: absolute;
+          --stl-ui-details--internal--marker-width: calc(var(--stl-ui-details-marker-size) + var(--stl-ui-details-marker-margin) * 2);
+          --stl-ui-details--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-details--internal--marker-width) - var(--stl-ui-details-summary-column-gap)));
+          transform: var(--stl-ui-details--internal--summary-marker-transform);
 
-          border-radius: var(--stl-ui-details-border-radius);
+          --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
+          mask-image: var(--lucide-chevron-right);
+          mask-size: contain;
+          mask-repeat: no-repeat;
 
-          &::before {
-            content: '';
-            width: var(--stl-ui-details-marker-size);
-            height: var(--stl-ui-details-marker-size);
-            margin: var(--stl-ui-details-marker-margin);
-            background-color: currentColor;
-            display: block;
-            position: absolute;
-            --stl-ui-details--internal--marker-width: calc(var(--stl-ui-details-marker-size) + var(--stl-ui-details-marker-margin) * 2);
-            --stl-ui-details--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-details--internal--marker-width) - var(--stl-ui-details-summary-column-gap)));
-            transform: var(--stl-ui-details--internal--summary-marker-transform);
-
-            --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
-            mask-image: var(--lucide-chevron-right);
-            mask-size: contain;
-            mask-repeat: no-repeat;
-
-            transition: transform 0.1s ease-out;
-          }
+          transition: transform 0.1s ease-out;
+        }
 
-          & > :first-child {
-            margin-top: 0;
-          }
+        & > :first-child {
+          margin-top: 0;
         }
+      }
 
-        &[open] {
-          padding-bottom: calc(var(--stl-ui-details-padding) + var(--stl-ui-details-content-padding-bottom));
+      &[open] {
+        padding-bottom: calc(var(--stl-ui-details-padding) + var(--stl-ui-details-content-padding-bottom));
 
-          summary {
-            /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
-            --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-details-padding), var(--stl-ui-details-row-gap));
-            padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
-            margin-bottom: calc(var(--stl-ui-details-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+        summary {
+          /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
+          --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-details-padding), var(--stl-ui-details-row-gap));
+          padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
+          margin-bottom: calc(var(--stl-ui-details-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
 
-            &::before {
-              transform: var(--stl-ui-details--internal--summary-marker-transform) rotate(90deg);
-            }
+          &::before {
+            transform: var(--stl-ui-details--internal--summary-marker-transform) rotate(90deg);
           }
         }
+      }
 
-        summary + * {
-          margin-top: 0;
-        }
+      summary + * {
+        margin-top: 0;
       }
     }
+  }
 
-    .stl-ui-details-group {
-      & > details:has(+ details) {
+  .stl-ui-details-group {
+    & > details:has(+ details) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      summary {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        summary {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
       }
-      & > details + details {
-        margin-top: 0;
-        border-top: 0;
+    }
+    & > details + details {
+      margin-top: 0;
+      border-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      summary {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        summary {
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
       }
     }
   }

package/src/index.ts

@@ -1,4 +1,3 @@
 export * from './components/Button';
-export * from './components/DropdownButton';
 export * from './components/Callout';
 export * from './components/DetailsGroup';

package/src/styles/starlight-compat.css

@@ -1,8 +1,7 @@
-@layer stl-ui {
+@layer stl-ui.starlight-compat {
   :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 */
@@ -11,6 +10,9 @@
   }
 
   :root {
+    --sl-font: var(--stl-ui-typography-font);
+    --sl-font-mono: var(--stl-ui-typography-font-mono);
+
     /* Layout and Typography */
     --sl-text-h1: var(--stl-ui-typography-text-h1);
     --sl-text-h2: var(--stl-ui-typography-text-h2);
@@ -71,18 +73,43 @@
 
   /* Starlight Compatibility */
   .stl-ui-prose {
-    .sl-anchor-link svg {
-      margin-top: 4px;
+    :is(h1, h2, h3, h4, h5) code {
+      font-size: 0.9em;
+      font-weight: inherit;
     }
-
-    h2 code {
+    /* 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;
+    }
+    .sl-heading-wrapper.level-h2 {
+      font-size: var(--stl-ui-typography-text-h2);
+      letter-spacing: -0.03em;
+      margin-top: 48px;
+    }
+    .sl-heading-wrapper.level-h3 {
+      font-size: var(--stl-ui-typography-text-h3);
+      letter-spacing: -0.02em;
+      margin-top: 40px;
+    }
+    .sl-heading-wrapper.level-h4 {
       font-size: var(--stl-ui-typography-text-h4);
-      line-height: 120%;
+      letter-spacing: -0.02em;
+      margin-top: 32px;
     }
-
-    h3 code {
+    .sl-heading-wrapper.level-h5 {
       font-size: var(--stl-ui-typography-text-h5);
-      line-height: 120%;
+      letter-spacing: -0.02em;
+      margin-top: 24px;
+    }
+    .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;
     }
 
     /* Tab component */

package/src/styles/typography.css

@@ -53,10 +53,6 @@
       line-height: var(--stl-ui-typography-line-height);
       letter-spacing: -0.01em;
 
-      * {
-        margin: 0;
-      }
-
       p {
         margin-top: 16px;
       }

package/src/styles.css

@@ -6,6 +6,5 @@
 @import './styles/starlight-compat.css';
 
 @import './components/button.css';
-@import './components/dropdown-button.css';
 @import './components/callout.css';
 @import './components/details.css';

package/src/components/DropdownButton.tsx

@@ -1,98 +0,0 @@
-import { ChevronsUpDown, ExternalLink } from 'lucide-react';
-
-export function DropdownButtonPrimaryActionText({ children }: { children?: React.ReactNode }) {
-  return <span data-part="primary-action-text">{children}</span>;
-}
-
-export function DropdownButtonPrimaryAction({ children }: { children?: React.ReactNode }) {
-  return (
-    <button
-      type="button"
-      data-part="primary-action"
-      className="stl-ui-dropdown-button__button stl-ui-dropdown-button--action"
-    >
-      {children}
-    </button>
-  );
-}
-
-export function DropdownButtonTrigger() {
-  return (
-    <button
-      className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
-      aria-haspopup="listbox"
-      aria-expanded="false"
-      data-part="trigger"
-    >
-      <ChevronsUpDown size={16} />
-    </button>
-  );
-}
-
-export function DropdownButtonMenu({ children }: { children?: React.ReactNode }) {
-  return (
-    <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
-      {children}
-    </div>
-  );
-}
-
-export function DropdownButtonItemIcon({ children }: { children?: React.ReactNode }) {
-  return (
-    <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
-      {children}
-    </div>
-  );
-}
-
-export function DropdownButtonItemText({ children }: { children?: React.ReactNode }) {
-  return (
-    <span className="stl-ui-dropdown-button__menu-item-text" data-part="item-text">
-      {children}
-    </span>
-  );
-}
-
-export function DropdownButtonItemTextSubtle({ children }: { children?: React.ReactNode }) {
-  return (
-    <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
-      {children}
-    </span>
-  );
-}
-
-export function DropdownButtonItem({
-  children,
-  value,
-  isExternalLink,
-}: {
-  children?: React.ReactNode;
-  value: string;
-  isExternalLink?: boolean;
-}) {
-  return (
-    <div className="stl-ui-dropdown-button__menu-item" data-part="item" data-value={value}>
-      <div className="stl-ui-dropdown-button__menu-item-content">{children}</div>
-      {isExternalLink && (
-        <div
-          className="stl-ui-dropdown-button__menu-item-external-link-icon"
-          data-part="item-external-link-icon"
-        >
-          <ExternalLink size={16} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function DropdownButtonDivider() {
-  return <div className="stl-ui-dropdown-button__divider" data-part="divider" />;
-}
-
-export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
-  return (
-    <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
-      {children}
-    </div>
-  );
-}

package/src/components/dropdown-button.css

@@ -1,162 +0,0 @@
-@layer stl-ui {
-  .stl-ui-dropdown-button {
-    --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
-    --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
-    --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
-    --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
-    --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
-
-    --stl-ui-dropdown-button-height: 32px;
-    --stl-ui-dropdown-button-padding: 8px 10px;
-    --stl-ui-dropdown-button-line-height: 100%;
-    --stl-ui-dropdown-button-font-weight: 500;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    background-color: var(--stl-ui-dropdown-button-background-color);
-    border: 1px solid var(--stl-ui-dropdown-button-border-color);
-    border-radius: var(--stl-ui-dropdown-button-border-radius);
-    color: var(--stl-ui-dropdown-button-color);
-    gap: 0;
-    font-size: var(--stl-ui-dropdown-button-font-size);
-  }
-
-  .stl-ui-dropdown-button__button {
-    border: none;
-    background: none;
-    height: var(--stl-ui-dropdown-button-height);
-    padding: var(--stl-ui-dropdown-button-padding);
-    line-height: var(--stl-ui-dropdown-button-line-height);
-    font-weight: var(--stl-ui-dropdown-button-font-weight);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-      border-color: var(--stl-ui-border-emphasis);
-    }
-  }
-
-  .stl-ui-dropdown-button--action {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    &:hover {
-      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-      border-color: var(--stl-ui-border-emphasis);
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-    }
-  }
-
-  .stl-ui-dropdown-button__trigger {
-    border-left: 1px solid var(--stl-ui-border);
-    border-radius: 0;
-
-    &:hover {
-      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-      border-color: var(--stl-ui-border-emphasis);
-    }
-  }
-
-  .stl-ui-dropdown-button__menu {
-    --stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
-    --stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
-    --stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
-    --stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
-
-    background-color: var(--stl-ui-dropdown-button__menu-background-color);
-    border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
-    box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
-    border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
-
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 4px;
-    z-index: 1000;
-    min-width: 100%;
-    padding: 4px;
-    display: none;
-
-    &[data-state='open'] {
-      display: block;
-    }
-  }
-
-  .stl-ui-dropdown-button__menu-item {
-    /* border-radius, height, and lineheight */
-    --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
-    --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
-    --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
-    --stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
-      from var(--stl-ui-foreground) l c h / 0.05
-    );
-
-    border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
-    height: var(--stl-ui-dropdown-button__menu-item-height);
-    line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
-
-    padding: 8px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-
-    &:hover {
-      background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
-    }
-
-    .stl-ui-dropdown-button__menu-item-content {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .stl-ui-dropdown-button__menu-item-text {
-      white-space: nowrap;
-    }
-
-    .stl-ui-dropdown-button__menu-item-text-subtle {
-      --stl-ui-dropdown-button__menu-item-text-subtle-color: var(--stl-ui-foreground-muted);
-      color: var(--stl-ui-dropdown-button__menu-item-text-subtle-color);
-    }
-
-    .stl-ui-dropdown-button__menu-item-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .stl-ui-dropdown-button__menu-item-external-link-icon {
-      --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
-        from var(--stl-ui-foreground) l c h / 0.25
-      );
-      margin-left: 8px;
-      svg {
-        color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
-      }
-    }
-  }
-
-  .stl-ui-dropdown-button__divider {
-    --stl-ui-dropdown-button__divider-height: 1px;
-    --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
-
-    height: var(--stl-ui-dropdown-button__divider-height);
-    background-color: var(--stl-ui-dropdown-button__divider-color);
-
-    margin: 4px 0;
-    width: calc(100% + 8px);
-    transform: translateX(-4px);
-  }
-}

package/src/scripts/dropdown-button.ts

@@ -1,55 +0,0 @@
-export function initDropdownButton({
-  dropdownId,
-  onSelect,
-  onPrimaryAction,
-}: {
-  dropdownId: string;
-  onSelect: (value: string) => void;
-  onPrimaryAction: (primaryActionElement: Element) => void;
-}) {
-  const dropdown = document.getElementById(dropdownId);
-  if (!dropdown) return;
-
-  const trigger = dropdown.querySelector('[data-part="trigger"]') as HTMLButtonElement | null;
-  const menu = dropdown.querySelector('[data-part="menu"]') as HTMLElement | null;
-  const primaryAction = dropdown.querySelector('[data-part="primary-action"]');
-
-  if (!trigger || !menu || !primaryAction) return;
-
-  let isOpen = false;
-
-  function toggleDropdown() {
-    if (!trigger || !menu) return;
-    isOpen = !isOpen;
-    menu.dataset.state = isOpen ? 'open' : 'closed';
-    trigger.setAttribute('aria-expanded', String(isOpen));
-  }
-
-  trigger.addEventListener('click', toggleDropdown);
-
-  document.addEventListener('click', (event) => {
-    if (!isOpen) return;
-    if (!dropdown.contains(event.target as Node)) {
-      toggleDropdown();
-    }
-
-    if (primaryAction && primaryAction.contains(event.target as Node)) {
-      toggleDropdown();
-    }
-  });
-
-  const items = dropdown.querySelectorAll('[data-part="item"]');
-  items.forEach((item) => {
-    item.addEventListener('click', () => {
-      const value = item.getAttribute('data-value');
-      if (value) {
-        onSelect(value);
-      }
-      toggleDropdown();
-    });
-  });
-
-  primaryAction.addEventListener('click', () => {
-    onPrimaryAction(primaryAction);
-  });
-}

package/src/scripts/index.ts

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