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

package/dist/styles.css

@@ -0,0 +1,1181 @@
+@layer stl-ui.tokens {
+  /* Scales - Default */
+  :root {
+    --stl-ui-gray-50: rgba(250, 250, 250, 1);
+    --stl-ui-gray-100: rgba(245, 245, 245, 1);
+    --stl-ui-gray-200: rgba(229, 229, 229, 1);
+    --stl-ui-gray-300: rgba(212, 212, 212, 1);
+    --stl-ui-gray-400: rgba(163, 163, 163, 1);
+    --stl-ui-gray-500: rgba(115, 115, 115, 1);
+    --stl-ui-gray-600: rgba(82, 82, 82, 1);
+    --stl-ui-gray-700: rgba(64, 64, 64, 1);
+    --stl-ui-gray-800: rgba(38, 38, 38, 1);
+    --stl-ui-gray-900: rgba(23, 23, 23, 1);
+    --stl-ui-gray-950: rgba(10, 10, 10, 1);
+    --stl-ui-accent-50: #eff6ffff;
+    --stl-ui-accent-100: #dbeafeff;
+    --stl-ui-accent-200: #bedbffff;
+    --stl-ui-accent-300: #8ec5ffff;
+    --stl-ui-accent-400: #51a2ffff;
+    --stl-ui-accent-500: #2b7fffff;
+    --stl-ui-accent-600: #155dfcff;
+    --stl-ui-accent-700: #1447e6ff;
+    --stl-ui-accent-800: #193cb8ff;
+    --stl-ui-accent-900: #132762ff;
+    --stl-ui-accent-950: #0b1128ff;
+    --stl-ui-red-50: rgba(252, 243, 243, 1);
+    --stl-ui-red-100: rgba(249, 227, 227, 1);
+    --stl-ui-red-200: rgba(246, 203, 203, 1);
+    --stl-ui-red-300: rgba(242, 166, 165, 1);
+    --stl-ui-red-400: rgba(235, 109, 108, 1);
+    --stl-ui-red-500: rgba(227, 64, 65, 1);
+    --stl-ui-red-600: rgba(208, 30, 34, 1);
+    --stl-ui-red-700: rgba(174, 25, 26, 1);
+    --stl-ui-red-800: rgba(143, 28, 27, 1);
+    --stl-ui-red-900: rgba(85, 24, 22, 1);
+    --stl-ui-red-950: rgba(43, 9, 8, 1);
+    --stl-ui-blue-50: rgba(239, 246, 255, 1);
+    --stl-ui-blue-100: rgba(219, 234, 254, 1);
+    --stl-ui-blue-200: rgba(190, 219, 255, 1);
+    --stl-ui-blue-300: rgba(142, 197, 255, 1);
+    --stl-ui-blue-400: rgba(81, 162, 255, 1);
+    --stl-ui-blue-500: rgba(43, 127, 255, 1);
+    --stl-ui-blue-600: rgba(21, 93, 252, 1);
+    --stl-ui-blue-700: rgba(20, 71, 230, 1);
+    --stl-ui-blue-800: rgba(25, 60, 184, 1);
+    --stl-ui-blue-900: rgba(19, 39, 98, 1);
+    --stl-ui-blue-950: rgba(11, 17, 40, 1);
+    --stl-ui-green-50: rgba(240, 253, 244, 1);
+    --stl-ui-green-100: rgba(220, 252, 231, 1);
+    --stl-ui-green-200: rgba(187, 247, 208, 1);
+    --stl-ui-green-300: rgba(134, 239, 172, 1);
+    --stl-ui-green-400: rgba(74, 222, 128, 1);
+    --stl-ui-green-500: rgba(34, 197, 94, 1);
+    --stl-ui-green-600: rgba(22, 163, 74, 1);
+    --stl-ui-green-700: rgba(21, 128, 61, 1);
+    --stl-ui-green-800: rgba(22, 101, 52, 1);
+    --stl-ui-green-900: rgba(15, 62, 33, 1);
+    --stl-ui-green-950: rgba(4, 32, 15, 1);
+    --stl-ui-orange-50: rgba(255, 247, 237, 1);
+    --stl-ui-orange-100: rgba(255, 237, 213, 1);
+    --stl-ui-orange-200: rgba(254, 215, 170, 1);
+    --stl-ui-orange-300: rgba(253, 186, 116, 1);
+    --stl-ui-orange-400: rgba(251, 146, 60, 1);
+    --stl-ui-orange-500: rgba(249, 115, 22, 1);
+    --stl-ui-orange-600: rgba(234, 88, 12, 1);
+    --stl-ui-orange-700: rgba(194, 65, 12, 1);
+    --stl-ui-orange-800: rgba(154, 52, 18, 1);
+    --stl-ui-orange-900: rgba(89, 32, 13, 1);
+    --stl-ui-orange-950: rgba(46, 14, 5, 1);
+    --stl-ui-purple-50: rgba(250, 245, 255, 1);
+    --stl-ui-purple-100: rgba(243, 232, 255, 1);
+    --stl-ui-purple-200: rgba(233, 213, 255, 1);
+    --stl-ui-purple-300: rgba(216, 180, 254, 1);
+    --stl-ui-purple-400: rgba(192, 132, 252, 1);
+    --stl-ui-purple-500: rgba(168, 85, 247, 1);
+    --stl-ui-purple-600: rgba(147, 51, 234, 1);
+    --stl-ui-purple-700: rgba(126, 34, 206, 1);
+    --stl-ui-purple-800: rgba(107, 33, 168, 1);
+    --stl-ui-purple-900: rgba(72, 23, 110, 1);
+    --stl-ui-purple-950: rgba(39, 5, 67, 1);
+    --stl-ui-cyan-50: rgba(236, 254, 255, 1);
+    --stl-ui-cyan-100: rgba(207, 250, 254, 1);
+    --stl-ui-cyan-200: rgba(165, 243, 252, 1);
+    --stl-ui-cyan-300: rgba(103, 232, 249, 1);
+    --stl-ui-cyan-400: rgba(34, 211, 238, 1);
+    --stl-ui-cyan-500: rgba(6, 182, 212, 1);
+    --stl-ui-cyan-600: rgba(8, 145, 178, 1);
+    --stl-ui-cyan-700: rgba(14, 116, 144, 1);
+    --stl-ui-cyan-800: rgba(21, 94, 117, 1);
+    --stl-ui-cyan-900: rgba(18, 62, 79, 1);
+    --stl-ui-cyan-950: rgba(5, 34, 46, 1);
+    --stl-ui-pink-50: rgba(253, 242, 248, 1);
+    --stl-ui-pink-100: rgba(252, 231, 243, 1);
+    --stl-ui-pink-200: rgba(251, 207, 232, 1);
+    --stl-ui-pink-300: rgba(249, 168, 212, 1);
+    --stl-ui-pink-400: rgba(244, 114, 182, 1);
+    --stl-ui-pink-500: rgba(236, 72, 153, 1);
+    --stl-ui-pink-600: rgba(219, 39, 119, 1);
+    --stl-ui-pink-700: rgba(190, 24, 93, 1);
+    --stl-ui-pink-800: rgba(157, 23, 77, 1);
+    --stl-ui-pink-900: rgba(103, 19, 53, 1);
+    --stl-ui-pink-950: rgba(56, 5, 25, 1);
+    --stl-ui-yellow-50: rgba(254, 252, 232, 1);
+    --stl-ui-yellow-100: rgba(254, 249, 195, 1);
+    --stl-ui-yellow-200: rgba(254, 240, 138, 1);
+    --stl-ui-yellow-300: rgba(253, 224, 71, 1);
+    --stl-ui-yellow-400: rgba(250, 204, 21, 1);
+    --stl-ui-yellow-500: rgba(234, 179, 8, 1);
+    --stl-ui-yellow-600: rgba(202, 138, 4, 1);
+    --stl-ui-yellow-700: rgba(161, 98, 7, 1);
+    --stl-ui-yellow-800: rgba(133, 77, 14, 1);
+    --stl-ui-yellow-900: rgba(88, 49, 14, 1);
+    --stl-ui-yellow-950: rgba(47, 23, 4, 1);
+
+    /* TODO support accent generation */
+    /* --stl-ui-accent-base: rgb(21, 93, 252);
+    --stl-ui-accent-50: color-mix(in oklch, white 95%, var(--stl-ui-accent-base));
+    --stl-ui-accent-100: color-mix(in oklch, white 85%, var(--stl-ui-accent-base));
+    --stl-ui-accent-200: color-mix(in oklch, white 70%, var(--stl-ui-accent-base));
+    --stl-ui-accent-300: color-mix(in oklch, white 55%, var(--stl-ui-accent-base));
+    --stl-ui-accent-400: color-mix(in oklch, white 40%, var(--stl-ui-accent-base));
+    --stl-ui-accent-500: color-mix(in oklch, white 25%, var(--stl-ui-accent-base));
+    --stl-ui-accent-600: var(--stl-ui-accent-base);
+    --stl-ui-accent-700: color-mix(in oklch, black 15%, var(--stl-ui-accent-base));
+    --stl-ui-accent-800: color-mix(in oklch, black 30%, var(--stl-ui-accent-base));
+    --stl-ui-accent-900: color-mix(in oklch, black 45%, var(--stl-ui-accent-base));
+    --stl-ui-accent-950: color-mix(in oklch, black 60%, var(--stl-ui-accent-base)); */
+  }
+}
+
+@layer stl-ui.tokens {
+  /* --stl-ui-swatch-es - 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);
+    --stl-ui-swatch-gray-gray-4: var(--stl-ui-gray-500);
+    --stl-ui-swatch-gray-gray-5: var(--stl-ui-gray-400);
+    --stl-ui-swatch-gray-gray-6: var(--stl-ui-gray-300);
+    --stl-ui-swatch-gray-gray-7: var(--stl-ui-gray-200);
+    --stl-ui-swatch-gray-gray-8: var(--stl-ui-gray-100);
+    --stl-ui-swatch-gray-gray-9: var(--stl-ui-gray-50);
+    --stl-ui-swatch-gray-black: var(--stl-ui-gray-950);
+    --stl-ui-swatch-gray-white: rgb(255, 255, 255);
+
+    --stl-ui-swatch-accent-base: var(--stl-ui-accent-600);
+    --stl-ui-swatch-accent-muted: var(--stl-ui-accent-200);
+    --stl-ui-swatch-accent-faint: var(--stl-ui-accent-50);
+    --stl-ui-swatch-red-base: var(--stl-ui-red-600);
+    --stl-ui-swatch-red-muted: var(--stl-ui-red-200);
+    --stl-ui-swatch-red-faint: var(--stl-ui-red-50);
+    --stl-ui-swatch-green-base: var(--stl-ui-green-600);
+    --stl-ui-swatch-green-muted: var(--stl-ui-green-200);
+    --stl-ui-swatch-green-faint: var(--stl-ui-green-50);
+    --stl-ui-swatch-blue-base: var(--stl-ui-blue-600);
+    --stl-ui-swatch-blue-muted: var(--stl-ui-blue-200);
+    --stl-ui-swatch-blue-faint: var(--stl-ui-blue-50);
+    --stl-ui-swatch-orange-base: var(--stl-ui-orange-600);
+    --stl-ui-swatch-orange-muted: var(--stl-ui-orange-200);
+    --stl-ui-swatch-orange-faint: var(--stl-ui-orange-50);
+    --stl-ui-swatch-purple-base: var(--stl-ui-purple-600);
+    --stl-ui-swatch-purple-muted: var(--stl-ui-purple-200);
+    --stl-ui-swatch-purple-faint: var(--stl-ui-purple-50);
+    --stl-ui-swatch-cyan-base: var(--stl-ui-cyan-600);
+    --stl-ui-swatch-cyan-muted: var(--stl-ui-cyan-200);
+    --stl-ui-swatch-cyan-faint: var(--stl-ui-cyan-50);
+    --stl-ui-swatch-pink-base: var(--stl-ui-pink-600);
+    --stl-ui-swatch-pink-muted: var(--stl-ui-pink-200);
+    --stl-ui-swatch-pink-faint: var(--stl-ui-pink-50);
+    --stl-ui-swatch-yellow-base: var(--stl-ui-yellow-600);
+    --stl-ui-swatch-yellow-muted: var(--stl-ui-yellow-200);
+    --stl-ui-swatch-yellow-faint: var(--stl-ui-yellow-50);
+  }
+
+  /* --stl-ui-swatch-es - Dark */
+  :root[data-theme='dark'] {
+    --stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-100);
+    --stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-200);
+    --stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-300);
+    --stl-ui-swatch-gray-gray-4: var(--stl-ui-gray-400);
+    --stl-ui-swatch-gray-gray-5: var(--stl-ui-gray-500);
+    --stl-ui-swatch-gray-gray-6: var(--stl-ui-gray-600);
+    --stl-ui-swatch-gray-gray-7: var(--stl-ui-gray-700);
+    --stl-ui-swatch-gray-gray-8: var(--stl-ui-gray-800);
+    --stl-ui-swatch-gray-gray-9: var(--stl-ui-gray-900);
+    --stl-ui-swatch-gray-black: var(--stl-ui-gray-950);
+    --stl-ui-swatch-gray-white: rgb(255, 255, 255);
+
+    --stl-ui-swatch-accent-base: var(--stl-ui-accent-500);
+    --stl-ui-swatch-accent-muted: var(--stl-ui-accent-900);
+    --stl-ui-swatch-accent-faint: var(--stl-ui-accent-950);
+    --stl-ui-swatch-red-base: var(--stl-ui-red-500);
+    --stl-ui-swatch-red-muted: var(--stl-ui-red-900);
+    --stl-ui-swatch-red-faint: var(--stl-ui-red-950);
+    --stl-ui-swatch-green-base: var(--stl-ui-green-500);
+    --stl-ui-swatch-green-muted: var(--stl-ui-green-900);
+    --stl-ui-swatch-green-faint: var(--stl-ui-green-950);
+    --stl-ui-swatch-blue-base: var(--stl-ui-blue-500);
+    --stl-ui-swatch-blue-muted: var(--stl-ui-blue-900);
+    --stl-ui-swatch-blue-faint: var(--stl-ui-blue-950);
+    --stl-ui-swatch-orange-base: var(--stl-ui-orange-500);
+    --stl-ui-swatch-orange-muted: var(--stl-ui-orange-900);
+    --stl-ui-swatch-orange-faint: var(--stl-ui-orange-950);
+    --stl-ui-swatch-purple-base: var(--stl-ui-purple-500);
+    --stl-ui-swatch-purple-muted: var(--stl-ui-purple-900);
+    --stl-ui-swatch-purple-faint: var(--stl-ui-purple-950);
+    --stl-ui-swatch-cyan-base: var(--stl-ui-cyan-500);
+    --stl-ui-swatch-cyan-muted: var(--stl-ui-cyan-900);
+    --stl-ui-swatch-cyan-faint: var(--stl-ui-cyan-950);
+    --stl-ui-swatch-pink-base: var(--stl-ui-pink-500);
+    --stl-ui-swatch-pink-muted: var(--stl-ui-pink-900);
+    --stl-ui-swatch-pink-faint: var(--stl-ui-pink-950);
+    --stl-ui-swatch-yellow-base: var(--stl-ui-yellow-500);
+    --stl-ui-swatch-yellow-muted: var(--stl-ui-yellow-900);
+    --stl-ui-swatch-yellow-faint: var(--stl-ui-yellow-950);
+  }
+}
+
+/* Typography - Stainless */
+@layer stl-ui.tokens {
+  :root {
+    --stl-ui-typography-font: 'Geist', system-ui, sans-serif;
+    --stl-ui-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
+    --stl-ui-typography-line-height: 1.5;
+    --stl-ui-typography-line-height-headings: 1.2;
+
+    --stl-ui-typography-text-body: var(--stl-ui-type-scale-text);
+    --stl-ui-typography-text-body-sm: var(--stl-ui-type-scale-text-sm);
+    --stl-ui-typography-text-body-xs: var(--stl-ui-type-scale-text-xs);
+
+    --stl-ui-typography-text-code: var(--stl-ui-type-scale-text-sm);
+    --stl-ui-typography-text-code-sm: var(--stl-ui-type-scale-text-xs);
+
+    --stl-ui-typography-text-h1: var(--stl-ui-type-scale-text-5xl);
+    --stl-ui-typography-text-h2: var(--stl-ui-type-scale-text-4xl);
+    --stl-ui-typography-text-h3: var(--stl-ui-type-scale-text-3xl);
+    --stl-ui-typography-text-h4: var(--stl-ui-type-scale-text-2xl);
+    --stl-ui-typography-text-h5: var(--stl-ui-type-scale-text-xl);
+
+    --stl-ui-type-scale-text-xs: 12px;
+    --stl-ui-type-scale-text-sm: 14px;
+    --stl-ui-type-scale-text: 16px;
+    --stl-ui-type-scale-text-lg: 18px;
+    --stl-ui-type-scale-text-xl: 20px;
+    --stl-ui-type-scale-text-2xl: 24px;
+    --stl-ui-type-scale-text-3xl: 29px;
+    --stl-ui-type-scale-text-4xl: 35px;
+    --stl-ui-type-scale-text-5xl: 42px;
+    --stl-ui-type-scale-text-6xl: 64px;
+  }
+}
+
+/* Prose exists in its own sub-layer for easy reverting */
+body {
+  font-family: var(--stl-ui-typography-font);
+  font-feature-settings:
+    'ss01' on,
+    'ss03' on,
+    'ss04' on,
+    'ss06' on,
+    'ss08' on;
+}
+
+.stl-ui-prose {
+  letter-spacing: -0.01em;
+  font-weight: 400;
+  line-height: var(--stl-ui-typography-line-height);
+  font-size: var(--stl-ui-typography-text-body);
+  color: var(--stl-ui-foreground-secondary);
+
+  :where(.stl-ui-not-prose) {
+    letter-spacing: initial;
+    font-weight: initial;
+    line-height: initial;
+    font-size: initial;
+    color: initial;
+  }
+
+  :where(p):not(.stl-ui-not-prose *) {
+    margin-top: 16px;
+  }
+
+  :where(p, li) {
+    &:not(.stl-ui-not-prose *) {
+      color: var(--stl-ui-foreground-secondary);
+    }
+  }
+
+  :where(strong):not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+  }
+
+  :where(aside):not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+  }
+
+  :is(h1, h2, h3, h4, h5, h6):not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+    font-weight: 500;
+    line-height: var(--stl-ui-typography-line-height-headings);
+  }
+
+  h1:not(.stl-ui-not-prose *) {
+    /* Heading 1/Medium */
+    font-size: var(--stl-ui-typography-text-h1);
+    letter-spacing: -0.03em;
+
+    margin-top: 64px;
+  }
+
+  h2:not(.stl-ui-not-prose *) {
+    /* Heading 2/Medium */
+    font-size: var(--stl-ui-typography-text-h2);
+    letter-spacing: -0.03em;
+
+    margin-top: 48px;
+  }
+
+  h3:not(.stl-ui-not-prose *) {
+    /* Heading 3/Medium */
+    font-size: var(--stl-ui-typography-text-h3);
+    letter-spacing: -0.02em;
+    margin-top: 40px;
+  }
+
+  h4:not(.stl-ui-not-prose *) {
+    /* Heading 4/Medium */
+    font-size: var(--stl-ui-typography-text-h4);
+    letter-spacing: -0.02em;
+    margin-top: 32px;
+  }
+
+  h5:not(.stl-ui-not-prose *) {
+    /* Heading 5/Medium */
+    font-size: var(--stl-ui-typography-text-h5);
+    letter-spacing: -0.02em;
+    margin-top: 24px;
+  }
+
+  li:not(.stl-ui-not-prose *) {
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p,
+    a {
+      &:first-child {
+        display: inline;
+      }
+    }
+  }
+
+  :where(ol, ul) {
+    &:not(.stl-ui-not-prose *) {
+      padding-left: 26px;
+    }
+  }
+
+  :where(ol, ul, aside, img, figure, details) {
+    &:not(.stl-ui-not-prose *) {
+      margin-top: 16px;
+    }
+  }
+
+  :where(:not(pre) > code):not(.stl-ui-not-prose *) {
+    color: var(--stl-ui-foreground);
+    font-feature-settings:
+      'ss01' on,
+      'ss03' on,
+      'ss04' on,
+      'ss06' on;
+
+    /* Code/Regular */
+    font-family: var(--stl-ui-typography-font-mono);
+    font-size: 0.9em;
+    font-weight: inherit;
+
+    padding: 0 0.2em;
+    background-color: oklch(from var(--stl-ui-foreground) l c h / 0.1);
+    border-radius: 0.2em;
+  }
+}
+
+@layer stl-ui.tokens {
+  /* Layout - Stainless */
+  :root {
+    --stl-ui-layout-border-radius-xs: 4px;
+    --stl-ui-layout-border-radius-sml: 8px;
+    --stl-ui-layout-border-radius: 12px;
+    --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;
+  }
+}
+
+@layer stl-ui.tokens {
+  /* Swatches - 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);
+    --stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
+    --stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
+    --stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
+    --stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
+    --stl-ui-border: var(--stl-ui-swatch-gray-gray-7);
+    --stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-8);
+    --stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-6);
+    --stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
+    --stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-white);
+    --stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
+    --stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
+    --stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
+    --stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
+    --stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
+    --stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
+    --stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
+    --stl-ui-overlay-background: #0000000d;
+  }
+
+  /* Swatches - Dark */
+  :root[data-theme='dark'] {
+    --stl-ui-background: var(--stl-ui-swatch-gray-black);
+    --stl-ui-card-background: var(--stl-ui-swatch-gray-gray-9);
+    --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-9);
+    --stl-ui-foreground: var(--stl-ui-swatch-gray-gray-1);
+    --stl-ui-foreground-secondary: var(--stl-ui-swatch-gray-gray-3);
+    --stl-ui-foreground-muted: var(--stl-ui-swatch-gray-gray-4);
+    --stl-ui-foreground-accent: var(--stl-ui-swatch-accent-base);
+    --stl-ui-border: var(--stl-ui-swatch-gray-gray-8);
+    --stl-ui-border-muted: var(--stl-ui-swatch-gray-gray-9);
+    --stl-ui-border-emphasis: var(--stl-ui-swatch-gray-gray-7);
+    --stl-ui-inverse-background: var(--stl-ui-swatch-gray-gray-1);
+    --stl-ui-inverse-foreground: var(--stl-ui-swatch-gray-black);
+    --stl-ui-accent-background: var(--stl-ui-swatch-accent-base);
+    --stl-ui-accent-foreground: var(--stl-ui-swatch-gray-white);
+    --stl-ui-accent-muted-background: var(--stl-ui-swatch-accent-faint);
+    --stl-ui-accent-muted-foreground: var(--stl-ui-swatch-accent-base);
+    --stl-ui-accent-border: var(--stl-ui-swatch-accent-muted);
+    --stl-ui-accent-border-muted: var(--stl-ui-swatch-accent-faint);
+    --stl-ui-accent-border-emphasis: var(--stl-ui-swatch-accent-base);
+    --stl-ui-overlay-background: #00000080;
+  }
+}
+
+: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);
+}
+
+/* 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);
+  }
+
+  .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;
+  }
+}
+
+/* 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 {
+      &:not(.stl-ui-not-prose *) {
+        padding-left: 0;
+      }
+    }
+
+    li:not(.stl-ui-not-prose *) {
+      margin-bottom: -2px;
+      &:not(:last-child) {
+        margin-bottom: -2px;
+      }
+
+      a:first-child {
+        display: flex;
+      }
+    }
+  }
+
+  /* Pagination Links */
+
+  .pagination-links {
+    a {
+      color: var(--stl-ui-foreground);
+    }
+  }
+
+  .starlight-aside {
+    svg {
+      margin-top: 0;
+    }
+  }
+}
+
+.stl-ui-button {
+  --stl-ui-button-color: var(--stl-ui-inverse-foreground);
+  --stl-ui-button-background-color: var(--stl-ui-inverse-background);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-inverse-background) 90%,
+    var(--stl-ui-background)
+  );
+
+  --stl-ui-button-border-color: transparent;
+  --stl-ui-button-border-color-hover: transparent;
+
+  --stl-ui-button-height: 32px;
+  --stl-ui-button-padding: 8px 10px;
+  --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
+  --stl-ui-button-line-height: 150%;
+  --stl-ui-button-font-weight: 500;
+  --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
+  --stl-ui-button-font-family: var(--stl-ui-typography-font);
+
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  height: var(--stl-ui-button-height);
+  padding: var(--stl-ui-button-padding);
+  border-radius: var(--stl-ui-button-border-radius);
+  line-height: var(--stl-ui-button-line-height);
+  font-weight: var(--stl-ui-button-font-weight);
+  font-size: var(--stl-ui-button-font-size);
+
+  border: 1px solid var(--stl-ui-button-border-color);
+  font-family: var(--stl-ui-button-font-family);
+
+  color: var(--stl-ui-button-color);
+  background-color: var(--stl-ui-button-background-color);
+
+  &:hover {
+    background-color: var(--stl-ui-button-background-color-hover);
+    border-color: var(--stl-ui-button-border-color-hover);
+  }
+}
+
+/* --- COLOR VARIANTS ---  */
+.stl-ui-button--accent {
+  --stl-ui-button-color: var(--stl-ui-accent-foreground);
+  --stl-ui-button-background-color: var(--stl-ui-accent-background);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-accent-background) 90%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
+
+.stl-ui-button--accent-muted {
+  --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
+  --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-accent-background) 10%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
+
+.stl-ui-button--muted {
+  --stl-ui-button-color: var(--stl-ui-foreground);
+  --stl-ui-button-background-color: var(--stl-ui-muted-background);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-foreground) 10%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
+
+.stl-ui-button--outline {
+  --stl-ui-button-color: var(--stl-ui-foreground);
+  --stl-ui-button-background-color: var(--stl-ui-card-background);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-foreground) 5%,
+    var(--stl-ui-inverse-foreground)
+  );
+  --stl-ui-button-border-color: var(--stl-ui-border);
+  --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
+}
+
+.stl-ui-button--ghost {
+  --stl-ui-button-color: var(--stl-ui-foreground);
+  --stl-ui-button-background-color: transparent;
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-foreground) 5%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
+
+.stl-ui-button--success {
+  --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
+  --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-swatch-green-base) 90%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
+
+.stl-ui-button--destructive {
+  --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
+  --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-swatch-red-base) 90%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
+
+/* --- SIZE VARIANTS ---  */
+.stl-ui-button--size-sm {
+  --stl-ui-button-height: 24px;
+  --stl-ui-button-padding: 0 6px;
+  --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
+  --stl-ui-button-line-height: 100%;
+  --stl-ui-button-font-weight: 500;
+  --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
+}
+
+.stl-ui-button--size-lg {
+  --stl-ui-button-height: 40px;
+  --stl-ui-button-padding: 8px 14px;
+  --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
+  --stl-ui-button-line-height: 150%;
+  --stl-ui-button-font-weight: 500;
+  --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
+}
+
+/* --- ICONS ---  */
+.stl-ui-button__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    margin-top: 0;
+  }
+}
+
+/* Left Icon */
+.stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
+  margin-left: -4px;
+  margin-right: 4px;
+}
+
+.stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
+  /* Right Icon */
+  margin-right: -4px;
+  margin-left: 4px;
+
+  /* Right & Left Icon */
+  &:first-child {
+    margin-left: -4px;
+    margin-right: 4px;
+  }
+}
+
+/* Only Icon */
+.stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
+    .stl-ui-button__icon:first-child
+  ) {
+  width: var(--stl-ui-button-height);
+
+  .stl-ui-button__icon {
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+}
+
+/* --- LINKS ---  */
+
+a.stl-ui-button {
+  text-decoration: none;
+  text-align: center;
+}
+
+.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 {
+    --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: 16px;
+
+    &: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 {
+      color: var(--stl-ui-foreground-muted);
+    }
+
+    strong {
+      color: var(--stl-ui-foreground);
+      font-weight: 500;
+    }
+
+    .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
+      );
+
+      svg {
+        color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
+      }
+    }
+  }
+
+  hr {
+    --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);
+    border: none;
+
+    margin: 4px 0;
+    width: calc(100% + 8px);
+    transform: translateX(-4px);
+  }
+}
+
+.stl-ui-callout {
+  --stl-ui-callout-background-color: var(--stl-ui-muted-background);
+  --stl-ui-callout-border-color: var(--stl-ui-border);
+  --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
+
+  border: 1px solid var(--stl-ui-callout-border-color);
+  background-color: var(--stl-ui-callout-background-color);
+  border-radius: var(--stl-ui-layout-border-radius);
+  padding: 12px;
+  line-height: var(--stl-ui-typography-line-height);
+  font-weight: 400;
+  font-size: var(--stl-ui-typography-text-body);
+
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.stl-ui-callout--info {
+  --stl-ui-callout-background-color: var(--stl-ui-muted-background);
+  --stl-ui-callout-border-color: var(--stl-ui-border);
+  --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
+}
+
+.stl-ui-callout--note {
+  --stl-ui-callout-background-color: var(--stl-ui-swatch-blue-faint);
+  --stl-ui-callout-border-color: var(--stl-ui-swatch-blue-muted);
+  --stl-ui-callout-accent-color: var(--stl-ui-swatch-blue-base);
+}
+
+.stl-ui-callout--tip {
+  --stl-ui-callout-background-color: var(--stl-ui-swatch-purple-faint);
+  --stl-ui-callout-border-color: var(--stl-ui-swatch-purple-muted);
+  --stl-ui-callout-accent-color: var(--stl-ui-swatch-purple-base);
+}
+
+.stl-ui-callout--success {
+  --stl-ui-callout-background-color: var(--stl-ui-swatch-green-faint);
+  --stl-ui-callout-border-color: var(--stl-ui-swatch-green-muted);
+  --stl-ui-callout-accent-color: var(--stl-ui-swatch-green-base);
+}
+
+.stl-ui-callout--warning {
+  --stl-ui-callout-background-color: var(--stl-ui-swatch-yellow-faint);
+  --stl-ui-callout-border-color: var(--stl-ui-swatch-yellow-muted);
+  --stl-ui-callout-accent-color: var(--stl-ui-swatch-yellow-base);
+}
+
+.stl-ui-callout--danger {
+  --stl-ui-callout-background-color: var(--stl-ui-swatch-red-faint);
+  --stl-ui-callout-border-color: var(--stl-ui-swatch-red-muted);
+  --stl-ui-callout-accent-color: var(--stl-ui-swatch-red-base);
+}
+
+.stl-ui-callout__icon {
+  color: var(--stl-ui-callout-accent-color);
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  margin: calc((1lh - 1em) / 2);
+}
+
+.stl-ui-callout__content {
+  flex: 1;
+  margin-top: 0;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+}
+
+/* revert starlight details styles */
+@layer starlight.content {
+  /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
+  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
+    details,
+    summary,
+    summary::before,
+    summary::marker {
+      all: revert-layer;
+    }
+  }
+}
+
+.stl-ui-accordion {
+  --stl-ui-accordion-padding: 12px;
+  --stl-ui-accordion-content-padding-bottom: 4px;
+  --stl-ui-accordion-marker-size: 1em;
+  --stl-ui-accordion-marker-margin: calc((1lh - var(--stl-ui-accordion-marker-size)) / 2);
+  --stl-ui-accordion-row-gap: 8px;
+  --stl-ui-accordion-summary-column-gap: 8px;
+  --stl-ui-accordion-border-radius: var(--stl-ui-layout-border-radius);
+  --stl-ui-accordion-hover-film-color: oklch(from var(--stl-ui-foreground) l c h / 0.03);
+  /* left inset to make content line up with summary content (after chevron) */
+  --stl-ui--internal--accordion-padding-start: calc(
+    var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-marker-size) +
+      var(--stl-ui-accordion-marker-margin) * 2 + var(--stl-ui-accordion-summary-column-gap)
+  );
+
+  background-color: var(--stl-ui-card-background);
+  border: 1px solid var(--stl-ui-border);
+  border-radius: var(--stl-ui-accordion-border-radius);
+  font-size: var(--stl-ui-typography-text-body);
+
+  padding: var(--stl-ui-accordion-padding);
+  /* indent content to line up with left edge of summary content */
+  padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
+
+  & > .stl-ui-accordion__summary {
+    display: block;
+    list-style: none;
+
+    /* summary extends to the edges of the element in order to increase click target */
+    padding: var(--stl-ui-accordion-padding);
+    padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
+    margin: calc(-1 * var(--stl-ui-accordion-padding));
+    margin-inline-start: calc(-1 * var(--stl-ui--internal--accordion-padding-start));
+
+    cursor: pointer;
+    font-weight: 500;
+
+    border-radius: var(--stl-ui-accordion-border-radius);
+
+    &::before {
+      content: '';
+      width: var(--stl-ui-accordion-marker-size);
+      height: var(--stl-ui-accordion-marker-size);
+      margin: var(--stl-ui-accordion-marker-margin);
+      background-color: currentColor;
+      display: block;
+      position: absolute;
+      --stl-ui-accordion--internal--marker-width: calc(
+        var(--stl-ui-accordion-marker-size) + var(--stl-ui-accordion-marker-margin) * 2
+      );
+      --stl-ui-accordion--internal--summary-marker-transform: translateX(
+        calc(
+          -1 * var(--stl-ui-accordion--internal--marker-width) - var(--stl-ui-accordion-summary-column-gap)
+        )
+      );
+      transform: var(--stl-ui-accordion--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;
+    }
+
+    & > :first-child {
+      margin-top: 0;
+    }
+  }
+
+  &[open] {
+    border-color: var(--stl-ui-border-emphasis);
+    padding-bottom: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-content-padding-bottom));
+
+    & > .stl-ui-accordion__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-accordion-padding),
+        var(--stl-ui-accordion-row-gap)
+      );
+      padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
+      margin-bottom: calc(var(--stl-ui-accordion-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+
+      &::before {
+        transform: var(--stl-ui-accordion--internal--summary-marker-transform) rotate(90deg);
+      }
+    }
+  }
+
+  &:has(> .stl-ui-accordion__summary:hover) {
+    background-image: linear-gradient(
+      to bottom,
+      var(--stl-ui-accordion-hover-film-color),
+      var(--stl-ui-accordion-hover-film-color)
+    );
+    border-color: var(--stl-ui-border-emphasis);
+  }
+
+  & > .stl-ui-accordion__summary + * {
+    margin-top: 0;
+  }
+}
+
+.stl-ui-accordion-group {
+  & > .stl-ui-accordion:has(+ .stl-ui-accordion) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    & > .stl-ui-accordion__summary {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  & > .stl-ui-accordion + .stl-ui-accordion {
+    margin-top: 0;
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    & > .stl-ui-accordion__summary {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  .stl-ui-accordion:not(:is([open], :hover)) + .stl-ui-accordion:is([open], :hover) {
+    border-top-width: 1px;
+    margin-top: -1px;
+  }
+}
+
+
+