From b63ca301153b8aec531cb2ce164912b236df0bf9 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 12:20:36 -0400
Subject: [PATCH 01/13] Initial migration to Tailwind 4 (and
 layerstack/svelte-ux @next)

---
 packages/layerchart/package.json              |  13 +-
 packages/layerchart/postcss.config.cjs        |   4 +-
 .../src/lib/components/Highlight.svelte       |   2 +-
 .../src/lib/components/Legend.svelte          |   2 +-
 .../lib/components/TransformControls.svelte   |   2 +-
 .../src/lib/components/tooltip/Tooltip.svelte |   2 +-
 .../tooltip/TooltipSeparator.svelte           |   2 +-
 .../layerchart/src/lib/docs/Blockquote.svelte |   2 +-
 packages/layerchart/src/lib/docs/Code.svelte  |   4 +-
 .../layerchart/src/lib/docs/GeoDebug.svelte   |   4 +-
 .../layerchart/src/lib/docs/Preview.svelte    |   4 +-
 .../src/lib/docs/TransformDebug.svelte        |   2 +-
 .../src/lib/docs/ViewSourceButton.svelte      |   2 +-
 .../layerchart/src/routes/+layout.server.ts   |   5 +-
 packages/layerchart/src/routes/+layout.svelte |   4 +-
 packages/layerchart/src/routes/+page.md       |   2 +-
 packages/layerchart/src/routes/app.css        |  30 +-
 .../src/routes/changelog/+page.svelte         |   2 +-
 .../layerchart/src/routes/docs/+layout.svelte |   6 +-
 .../routes/docs/components/Arc/+page.svelte   |   4 +-
 .../routes/docs/components/Area/+page.svelte  |   8 +-
 .../docs/components/AreaChart/+page.svelte    |  72 +-
 .../routes/docs/components/Axis/+page.svelte  |  62 +-
 .../docs/components/BarChart/+page.svelte     |  84 +-
 .../docs/components/BrushContext/+page.svelte |  26 +-
 .../docs/components/Calendar/+page.svelte     |   6 +-
 .../docs/components/Circle/+page.svelte       |   2 +-
 .../routes/docs/components/Frame/+page.svelte |  12 +-
 .../routes/docs/components/Grid/+page.svelte  |  28 +-
 .../routes/docs/components/Group/+page.svelte |   2 +-
 .../routes/docs/components/Hull/+page.svelte  |   2 +-
 .../docs/components/Legend/+page.svelte       |   4 +-
 .../routes/docs/components/Line/+page.svelte  |   2 +-
 .../docs/components/LineChart/+page.svelte    |  68 +-
 .../components/LinearGradient/+page.svelte    |   6 +-
 .../docs/components/Marker/+page.svelte       |  16 +-
 .../docs/components/MotionPath/+page.svelte   |   6 +-
 .../docs/components/Pattern/+page.svelte      |  10 +-
 .../routes/docs/components/Pie/+page.svelte   |  40 +-
 .../docs/components/PieChart/+page.svelte     |  60 +-
 .../routes/docs/components/Point/+page.svelte |   2 +-
 .../components/RadialGradient/+page.svelte    |   8 +-
 .../routes/docs/components/Rect/+page.svelte  |   2 +-
 .../routes/docs/components/Rule/+page.svelte  |  12 +-
 .../docs/components/ScatterChart/+page.svelte |  36 +-
 .../docs/components/Spline/+page.svelte       |  18 +-
 .../docs/components/Tooltip/+page.svelte      |  46 +-
 .../components/TransformContext/+page.svelte  |   6 +-
 .../docs/components/Voronoi/+page.svelte      |   4 +-
 .../docs/examples/AnimatedGlobe/+page.svelte  |   2 +-
 .../routes/docs/examples/Area/+page.svelte    |  46 +-
 .../routes/docs/examples/Bars/+page.svelte    |  60 +-
 .../docs/examples/Beeswarm/+page.svelte       |   2 +-
 .../docs/examples/BubbleMap/+page.svelte      |   4 +-
 .../docs/examples/Candlestick/+page.svelte    |   2 +-
 .../docs/examples/Choropleth/+page.svelte     |   4 +-
 .../examples/CollisionDetection/+page.svelte  |   2 +-
 .../routes/docs/examples/Columns/+page.svelte |  64 +-
 .../docs/examples/Compound/+page.svelte       |   4 +-
 .../routes/docs/examples/Dagre/+page.svelte   |  10 +-
 .../routes/docs/examples/DotPlot/+page.svelte |   4 +-
 .../docs/examples/DualAxis/+page.svelte       |   4 +-
 .../examples/ForceDisjointGraph/+page.svelte  |   2 +-
 .../docs/examples/ForceDrag/+page.svelte      |   2 +-
 .../docs/examples/ForceGraph/+page.svelte     |   2 +-
 .../docs/examples/ForceGroup/+page.svelte     |   2 +-
 .../docs/examples/ForceLattice/+page.svelte   |   2 +-
 .../docs/examples/ForceText/+page.svelte      |   2 +-
 .../docs/examples/ForceTree/+page.svelte      |   2 +-
 .../docs/examples/Histogram/+page.svelte      |  10 +-
 .../routes/docs/examples/Line/+page.svelte    |  20 +-
 .../docs/examples/Oscilloscope/+page.svelte   |   4 +-
 .../routes/docs/examples/Pack/+page.svelte    |   4 +-
 .../docs/examples/Partition/+page.svelte      |  12 +-
 .../docs/examples/PunchCard/+page.svelte      |   2 +-
 .../docs/examples/RadialLine/+page.svelte     |   6 +-
 .../routes/docs/examples/Sankey/+page.svelte  |  10 +-
 .../routes/docs/examples/Scatter/+page.svelte |   8 +-
 .../docs/examples/Sunburst/+page.svelte       |   4 +-
 .../docs/examples/Threshold/+page.svelte      |   6 +-
 .../routes/docs/examples/Tree/+page.svelte    |   4 +-
 .../routes/docs/examples/Treemap/+page.svelte |  12 +-
 .../performance/dimension_arrays/+page.svelte |   4 +-
 .../dimension_arrays_processed/+page.svelte   |   4 +-
 .../performance/series_arrays/+page.svelte    |   4 +-
 .../docs/performance/wide_data/+page.svelte   |   4 +-
 .../wide_data_processed/+page.svelte          |   4 +-
 .../src/routes/docs/utils/pivot/+page.svelte  |   8 +-
 .../src/routes/getting-started/+page.svelte   |   2 +-
 packages/layerchart/tailwind.config.cjs       |  67 --
 pnpm-lock.yaml                                | 821 ++++++++----------
 91 files changed, 921 insertions(+), 1069 deletions(-)
 delete mode 100644 packages/layerchart/tailwind.config.cjs

diff --git a/packages/layerchart/package.json b/packages/layerchart/package.json
index 30527027a..812771053 100644
--- a/packages/layerchart/package.json
+++ b/packages/layerchart/package.json
@@ -27,6 +27,7 @@
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
@@ -66,9 +67,9 @@
     "svelte": "5.20.4",
     "svelte-check": "^4.1.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "^1.0.0",
+    "svelte-ux": "2.0.0-next.1",
     "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.12",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.8.1",
@@ -81,10 +82,10 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "^1.0.0",
-    "@layerstack/svelte-stores": "^1.0.0",
-    "@layerstack/tailwind": "^1.0.0",
-    "@layerstack/utils": "^1.0.0",
+    "@layerstack/svelte-actions": "1.0.1-next.0",
+    "@layerstack/svelte-stores": "1.0.2-next.0",
+    "@layerstack/tailwind": "2.0.0-next.1",
+    "@layerstack/utils": "1.1.0-next.0",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
diff --git a/packages/layerchart/postcss.config.cjs b/packages/layerchart/postcss.config.cjs
index cdbe50f3a..e5640725a 100644
--- a/packages/layerchart/postcss.config.cjs
+++ b/packages/layerchart/postcss.config.cjs
@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/layerchart/src/lib/components/Highlight.svelte b/packages/layerchart/src/lib/components/Highlight.svelte
index 299c37940..256bd9f92 100644
--- a/packages/layerchart/src/lib/components/Highlight.svelte
+++ b/packages/layerchart/src/lib/components/Highlight.svelte
@@ -412,7 +412,7 @@
           strokeWidth={6}
           {...typeof points === 'object' ? points : null}
           class={cls(
-            'stroke-white [paint-order:stroke] drop-shadow',
+            'stroke-white [paint-order:stroke] drop-shadow-sm',
             !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
diff --git a/packages/layerchart/src/lib/components/Legend.svelte b/packages/layerchart/src/lib/components/Legend.svelte
index 4b00be0bd..7dd36be60 100644
--- a/packages/layerchart/src/lib/components/Legend.svelte
+++ b/packages/layerchart/src/lib/components/Legend.svelte
@@ -140,7 +140,7 @@
   {...$$restProps}
   class={cls(
     'inline-block',
-    'z-[1]', // stack above tooltip context layers (band rects, voronoi, ...)
+    'z-1', // stack above tooltip context layers (band rects, voronoi, ...)
     placement && [
       'absolute',
       {
diff --git a/packages/layerchart/src/lib/components/TransformControls.svelte b/packages/layerchart/src/lib/components/TransformControls.svelte
index 05951d0d2..1304bb352 100644
--- a/packages/layerchart/src/lib/components/TransformControls.svelte
+++ b/packages/layerchart/src/lib/components/TransformControls.svelte
@@ -66,7 +66,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={cls(
-    'bg-surface-300/50 border rounded-full m-1 backdrop-blur z-10 flex',
+    'bg-surface-300/50 border rounded-full m-1 backdrop-blur-sm z-10 flex',
     orientation === 'vertical' && 'flex-col',
     {
       'top-left': 'absolute top-0 left-0',
diff --git a/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte b/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
index 14a97f08a..3d825d222 100644
--- a/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
+++ b/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
@@ -216,7 +216,7 @@
   >
     <div
       class={cls(
-        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded elevation-1'],
+        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded-sm elevation-1'],
         {
           default: [
             'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte
index 8ce53f18f..c7111edf0 100644
--- a/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte
+++ b/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte
@@ -2,4 +2,4 @@
   import { cls } from '@layerstack/tailwind';
 </script>
 
-<div class={cls('rounded bg-surface-content/20 my-1 col-span-full h-px', $$props.class)}></div>
+<div class={cls('rounded-sm bg-surface-content/20 my-1 col-span-full h-px', $$props.class)}></div>
diff --git a/packages/layerchart/src/lib/docs/Blockquote.svelte b/packages/layerchart/src/lib/docs/Blockquote.svelte
index adde7486c..3e163219f 100644
--- a/packages/layerchart/src/lib/docs/Blockquote.svelte
+++ b/packages/layerchart/src/lib/docs/Blockquote.svelte
@@ -6,7 +6,7 @@
 
 <div
   class={cls(
-    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded flex items-center gap-2 text-sm',
+    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >
diff --git a/packages/layerchart/src/lib/docs/Code.svelte b/packages/layerchart/src/lib/docs/Code.svelte
index c843968f9..5e01aa594 100644
--- a/packages/layerchart/src/lib/docs/Code.svelte
+++ b/packages/layerchart/src/lib/docs/Code.svelte
@@ -17,11 +17,11 @@
   } = {};
 </script>
 
-<div class={cls('Code', 'rounded', classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded-sm', classes.root, $$props.class)}>
   {#if source}
     <div class="relative">
       <pre
-        class={cls('language-{language} rounded', classes.pre)}
+        class={cls('language-{language} rounded-sm', classes.pre)}
         style="margin: 0; white-space: normal;">
           <code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
       </pre>
diff --git a/packages/layerchart/src/lib/docs/GeoDebug.svelte b/packages/layerchart/src/lib/docs/GeoDebug.svelte
index 829831a09..a47fea57a 100644
--- a/packages/layerchart/src/lib/docs/GeoDebug.svelte
+++ b/packages/layerchart/src/lib/docs/GeoDebug.svelte
@@ -12,7 +12,7 @@
   let showCenter = false;
 </script>
 
-<div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
+<div class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}>
   <div class="grid gap-2 text-xs">
     <div><span class="opacity-50">scale:</span> {format($geo.scale(), 'decimal')}</div>
 
@@ -48,6 +48,6 @@
 
 {#if showCenter}
   <div
-    class="absolute w-2 h-2 bg-danger/80 rounded-full z-[1] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+    class="absolute w-2 h-2 bg-danger/80 rounded-full z-1 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
   ></div>
 {/if}
diff --git a/packages/layerchart/src/lib/docs/Preview.svelte b/packages/layerchart/src/lib/docs/Preview.svelte
index bbc71baab..ff3cd7408 100644
--- a/packages/layerchart/src/lib/docs/Preview.svelte
+++ b/packages/layerchart/src/lib/docs/Preview.svelte
@@ -41,7 +41,7 @@
   }
 </script>
 
-<div class={cls('Preview border rounded bg-surface-100', $$props.class)}>
+<div class={cls('Preview border rounded-sm bg-surface-100', $$props.class)}>
   <div class="p-4">
     <slot />
   </div>
@@ -70,7 +70,7 @@
     <Dialog
       {open}
       on:close={toggleOff}
-      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto_1fr_auto]"
     >
       <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">
diff --git a/packages/layerchart/src/lib/docs/TransformDebug.svelte b/packages/layerchart/src/lib/docs/TransformDebug.svelte
index 7c1d85301..5497c679e 100644
--- a/packages/layerchart/src/lib/docs/TransformDebug.svelte
+++ b/packages/layerchart/src/lib/docs/TransformDebug.svelte
@@ -8,7 +8,7 @@
   const { translate, scale } = transform;
 </script>
 
-<div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
+<div class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}>
   <div class="grid gap-2 text-xs">
     <div><span class="opacity-50">scale:</span> {format($scale, 'decimal')}</div>
 
diff --git a/packages/layerchart/src/lib/docs/ViewSourceButton.svelte b/packages/layerchart/src/lib/docs/ViewSourceButton.svelte
index 3190a93c3..5c20c17ff 100644
--- a/packages/layerchart/src/lib/docs/ViewSourceButton.svelte
+++ b/packages/layerchart/src/lib/docs/ViewSourceButton.svelte
@@ -17,7 +17,7 @@
     <Dialog
       {open}
       on:close={toggleOff}
-      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto_1fr_auto]"
     >
       <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">
diff --git a/packages/layerchart/src/routes/+layout.server.ts b/packages/layerchart/src/routes/+layout.server.ts
index 8fc6e96e9..af7a19da4 100644
--- a/packages/layerchart/src/routes/+layout.server.ts
+++ b/packages/layerchart/src/routes/+layout.server.ts
@@ -1,11 +1,10 @@
 import { getThemeNames } from '@layerstack/tailwind';
+import themeCss from '@layerstack/tailwind/themes/all.css?raw';
 // import { env } from '$env/dynamic/private';
 
-import themes from '../../themes.json' with { type: 'json' };
-
 export async function load() {
   return {
-    themes: getThemeNames(themes),
+    themes: getThemeNames(themeCss),
     // pr_id: env.VERCEL_GIT_PULL_REQUEST_ID, // TODO: Re-add once SvelteKit updated to `2.3.2+` - https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%402.3.2
   };
 }
diff --git a/packages/layerchart/src/routes/+layout.svelte b/packages/layerchart/src/routes/+layout.svelte
index 2d8e401d5..bee730c2b 100644
--- a/packages/layerchart/src/routes/+layout.svelte
+++ b/packages/layerchart/src/routes/+layout.svelte
@@ -38,13 +38,13 @@
       },
       AppBar: {
         classes:
-          'bg-primary text-primary-content shadow-md [text-shadow:1px_1px_2px_theme(colors.primary-700)]',
+          'bg-primary text-primary-content shadow-md [text-shadow:1px_1px_2px_var(--color-primary-700)]',
       },
       NavItem: {
         classes: {
           root: 'text-sm text-surface-content/70 pl-6 py-2 hover:bg-surface-100/70 relative',
           active:
-            'text-primary bg-surface-100 font-medium before:absolute before:bg-primary before:rounded-full before:w-1 before:h-2/3 before:left-[6px] shadow z-10',
+            'text-primary bg-surface-100 font-medium before:absolute before:bg-primary before:rounded-full before:w-1 before:h-2/3 before:left-[6px] shadow-sm z-10',
         },
       },
     },
diff --git a/packages/layerchart/src/routes/+page.md b/packages/layerchart/src/routes/+page.md
index 67009a187..50521147d 100644
--- a/packages/layerchart/src/routes/+page.md
+++ b/packages/layerchart/src/routes/+page.md
@@ -1,4 +1,4 @@
-<div class="prose max-w-none bg-surface-100 p-3 px-5 m-2 rounded shadow-lg border">
+<div class="prose max-w-none bg-surface-100 p-3 px-5 m-2 rounded-sm shadow-lg border">
 
 <h1>Welcome to LayerChart</h1>
 
diff --git a/packages/layerchart/src/routes/app.css b/packages/layerchart/src/routes/app.css
index 163841047..13f4a0b59 100644
--- a/packages/layerchart/src/routes/app.css
+++ b/packages/layerchart/src/routes/app.css
@@ -1,6 +1,30 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@import '@layerstack/tailwind/theme.css';
+@import '@layerstack/tailwind/themes/all.css';
+@import '@layerstack/tailwind/utils.css';
+
+@source '../../node_modules/svelte-ux/dist';
+@plugin '@tailwindcss/typography';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);
+    outline-color: color-mix(in oklab, var(--color-surface-content) 20%, transparent);
+  }
+}
 
 html {
   @apply bg-surface-200 accent-primary;
diff --git a/packages/layerchart/src/routes/changelog/+page.svelte b/packages/layerchart/src/routes/changelog/+page.svelte
index 6d4e2c2c5..19e0748ea 100644
--- a/packages/layerchart/src/routes/changelog/+page.svelte
+++ b/packages/layerchart/src/routes/changelog/+page.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="grid grid-cols-[1fr_auto] gap-6 pt-2 pb-4">
-  <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded shadow-lg border overflow-auto">
+  <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded-sm shadow-lg border overflow-auto">
     {@html marked.parse(sanitize(data.changelog))}
   </div>
 
diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte
index 1423090ce..397a01c2c 100644
--- a/packages/layerchart/src/routes/docs/+layout.svelte
+++ b/packages/layerchart/src/routes/docs/+layout.svelte
@@ -74,7 +74,7 @@
 </script>
 
 <div
-  class="[@media(min-height:900px)]:sticky top-[var(--headerHeight)] z-[60] bg-surface-200/90 backdrop-blur px-5 py-4 [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)calc(100%-4px),rgba(0,0,0,0))]"
+  class="[@media(min-height:900px)]:sticky top-[var(--headerHeight)] z-60 bg-surface-200/90 backdrop-blur-sm px-5 py-4 [mask-image:linear-gradient(to_bottom,rgba(0,0,0,1)calc(100%-4px),rgba(0,0,0,0))]"
 >
   {#if title}
     <div>
@@ -95,7 +95,7 @@
       {#if status}
         <span
           class={cls(
-            'text-sm  px-2 rounded',
+            'text-sm  px-2 rounded-sm',
             status === 'beta' && 'bg-yellow-500/20 text-yellow-800',
             status === 'deprecated' && 'bg-red-500/20 text-red-900'
           )}
@@ -251,7 +251,7 @@
 
     {#if showTableOfContents && $xlScreen}
       <div
-        class="w-[224px] sticky top-[calc(var(--headerHeight)+10px)] pr-2 max-h-[calc(100dvh-64px)] overflow-auto z-[60]"
+        class="w-[224px] sticky top-[calc(var(--headerHeight)+10px)] pr-2 max-h-[calc(100dvh-64px)] overflow-auto z-60"
       >
         <div class="text-xs uppercase leading-8 tracking-widest text-surface-content/50">
           On this page
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
index 8bf532f80..a23a2d453 100644
--- a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -50,7 +50,7 @@
 </div>
 
 <Preview>
-  <div class="h-[200px] p-4 border rounded">
+  <div class="h-[200px] p-4 border rounded-sm">
     <Chart>
       <Svg center>
         {#key spring}
@@ -113,7 +113,7 @@
 {/if} -->
 
   <Preview>
-    <div class="h-[200px] p-4 border rounded">
+    <div class="h-[200px] p-4 border rounded-sm">
       <Chart>
         <Svg center>
           <LinearGradient
diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
index fb874c551..2f19c9f04 100644
--- a/packages/layerchart/src/routes/docs/components/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -41,7 +41,7 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px,auto,auto,1fr] gap-2">
+  <div class="grid grid-cols-[100px_auto_auto_1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
@@ -60,7 +60,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
       <Svg>
         <Axis placement="left" grid rule />
@@ -100,7 +100,7 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px,auto,auto,1fr] gap-2">
+  <div class="grid grid-cols-[100px_auto_auto_1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
@@ -112,7 +112,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
       <Svg>
         <Axis placement="left" grid rule />
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index 163c49906..6d7a9edd3 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -139,14 +139,14 @@
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" {renderContext} {debug} />
   </div>
 </Preview>
 
 <h2>Gradient</h2>
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="marks">
         <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
@@ -164,7 +164,7 @@
     negative: 'hsl(var(--color-danger))',
   }}
 
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={negativeDateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="marks" let:yScale let:height let:padding>
         {@const thresholdValue = 0}
@@ -212,7 +212,7 @@
 <h2>Curve</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={dateSeriesData}
       x="date"
@@ -227,7 +227,7 @@
 <h2>Series</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -251,7 +251,7 @@
 <h2>Series (separate data)</h2>
 
 <Preview data={multiSeriesDataByFruit}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       x="date"
       y="value"
@@ -281,7 +281,7 @@
 <h2>Series (point click)</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -303,7 +303,7 @@
 <h2>Series (voronoi tooltip with highlight)</h2>
 
 <Preview data={multiSeriesDataByFruit}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       x="date"
       y="value"
@@ -362,7 +362,7 @@
 <h2>Stack series</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -387,7 +387,7 @@
 <h2>Stack series (expand)</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -412,7 +412,7 @@
 <h2>Stack series (diverging)</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -437,7 +437,7 @@
 <h2>Stack series with gradient</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -475,7 +475,7 @@
 <h2>Labels</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" labels brush {renderContext} {debug} />
   </div>
 </Preview>
@@ -483,7 +483,7 @@
 <h2>Points</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" points {renderContext} {debug} />
   </div>
 </Preview>
@@ -491,7 +491,7 @@
 <h2>Radial</h2>
 
 <Preview data={data.sfoTemperatures}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <AreaChart
       data={data.sfoTemperatures}
       x="date"
@@ -532,7 +532,7 @@
 <h2>Funnel</h2>
 
 <Preview data={funnelSegments}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <AreaChart
       data={interpolateData(funnelSegments, { x: 'index', y: 'value' })}
       x="index"
@@ -588,7 +588,7 @@
 <h2>Null gaps</h2>
 
 <Preview data={dateSeriesDataWithNulls}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesDataWithNulls} x="date" y="value" points {renderContext} {debug} />
   </div>
 </Preview>
@@ -615,7 +615,7 @@
 <h2>Single axis (x)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" axis="x" {renderContext} {debug} />
   </div>
 </Preview>
@@ -623,7 +623,7 @@
 <h2>Single axis (y)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" axis="y" {renderContext} {debug} />
   </div>
 </Preview>
@@ -631,7 +631,7 @@
 <h2>Legend</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -657,7 +657,7 @@
 <h2>Legend (placement)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -683,7 +683,7 @@
 <h2>Legend (custom labels)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -711,7 +711,7 @@
 <h2>Tooltip click</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={dateSeriesData}
       x="date"
@@ -729,7 +729,7 @@
 <h2>Markers</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={dateSeriesData}
       x="date"
@@ -757,7 +757,7 @@
             cx={xScale(p.date)}
             cy={yScale(p.value)}
             r={4}
-            class="fill-primary stroke-[4] stroke-primary/50"
+            class="fill-primary stroke-4 stroke-primary/50"
           />
         {/each}
       </svelte:fragment>
@@ -788,7 +788,7 @@
 <h2>Custom tooltip</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="tooltip" let:x let:y let:height let:padding>
         <Tooltip.Root
@@ -796,7 +796,7 @@
           y="data"
           anchor="right"
           contained={false}
-          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded-sm whitespace-nowrap"
           let:data
         >
           {y(data)}
@@ -806,7 +806,7 @@
           x="data"
           y={height}
           anchor="top"
-          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded-sm whitespace-nowrap"
           contained={false}
           let:data
         >
@@ -820,7 +820,7 @@
 <h2>Locking and clickable tooltip</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -885,7 +885,7 @@
 <h2>Fixed tooltip below chart with hide delay</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={multiSeriesData}
       x="date"
@@ -935,7 +935,7 @@
       [hover chart]
     {/if}
   </div>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={denseDateSeriesData}
       x="date"
@@ -962,7 +962,7 @@
     {/if}
   </div>
 
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -996,7 +996,7 @@
 
 <h2>Brushing</h2>
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       data={data.appleStock}
       x="date"
@@ -1022,7 +1022,7 @@
 
 <Preview data={{ denseDateSeriesData, denseDateSeriesData2 }}>
   <div class="grid grid-cols-md gap-3">
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <AreaChart
         data={denseDateSeriesData}
         x="date"
@@ -1038,7 +1038,7 @@
       />
     </div>
 
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <AreaChart
         data={denseDateSeriesData2}
         x="date"
@@ -1059,7 +1059,7 @@
 <h2>Custom chart</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" let:x let:y {renderContext} {debug}>
       <Svg>
         <Axis placement="left" grid rule />
diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
index 61315ede4..d7d9fe940 100644
--- a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
@@ -26,7 +26,7 @@
 <h2>left / bottom placement</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -47,7 +47,7 @@
 <h2>top / right placement</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -68,7 +68,7 @@
 <h2>rule (left/bottom placement)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -89,7 +89,7 @@
 <h2>rule (top/right placement)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -110,7 +110,7 @@
 <h2>grid</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -131,7 +131,7 @@
 <h2>dashed grid lines</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -152,7 +152,7 @@
 <h2>multiple axis grids with single rule</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -175,7 +175,7 @@
 <h2>multiple axis grids and rules</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -199,7 +199,7 @@
 <h2>multiple axis grids and rules (separate grid)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -221,7 +221,7 @@
 <h2>Arrow markers</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -242,7 +242,7 @@
 <h2>tick label styling</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -271,7 +271,7 @@
 <h2>rotated tick labels and styling</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -300,7 +300,7 @@
 <h2>Remove ticks hashes</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -321,7 +321,7 @@
 <h2>show only first/last ticks with alignment</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -351,7 +351,7 @@
 <h2>integer-only ticks</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -377,7 +377,7 @@
 <h2>explicit ticks</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -398,7 +398,7 @@
 <h2>Inject tick value</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -419,7 +419,7 @@
 <h2>tick count</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -440,7 +440,7 @@
 <h2>tick count (responsive)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -461,7 +461,7 @@
 <h2>tick time interval</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -482,7 +482,7 @@
 <h2>remove default tick count</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -503,7 +503,7 @@
 <h2>label next to hash</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -530,7 +530,7 @@
 <h2>Hide `0` tick via ticks</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -551,7 +551,7 @@
 <h2>Hide `0` tick via format</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -572,7 +572,7 @@
 <h2>Override axis ticks with custom scale</h2>
 
 <Preview data={largeData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={largeData}
       x="date"
@@ -606,7 +606,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -645,7 +645,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -684,7 +684,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -725,7 +725,7 @@
 <h2>radial rule</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, 100]} radial>
       <Svg center>
         <Axis placement="radius" rule />
@@ -738,7 +738,7 @@
 <h2>radial grid</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, 100]} radial>
       <Svg center>
         <Axis placement="radius" grid />
@@ -751,7 +751,7 @@
 <h2>Log scale</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
index a14aa194e..3bac1fec1 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -72,7 +72,7 @@
 <h2>Vertical (default)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" {renderContext} {debug} />
   </div>
 </Preview>
@@ -80,7 +80,7 @@
 <h2>Horizontal</h2>
 
 <Preview data={horizontalDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={horizontalDateSeriesData}
       x="value"
@@ -95,7 +95,7 @@
 <h2>Color (Bars class)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -110,7 +110,7 @@
 <h2>Color using scale</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -125,7 +125,7 @@
 <h2>Color per value</h2>
 
 <Preview data={longData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={longData.filter((d) => d.year === 2019)}
       x="fruit"
@@ -149,7 +149,7 @@
 <h2>Color threshold</h2>
 
 <Preview data={negativeData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={negativeData}
       x="date"
@@ -167,7 +167,7 @@
 <h2>Gradient</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="marks" let:series let:getBarsProps>
         {#each series as s, i (s.key)}
@@ -188,7 +188,7 @@
 <h2>Remove rounding</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -203,7 +203,7 @@
 <h2>Highlight below marks</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -222,7 +222,7 @@
 <h2>Series</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -243,7 +243,7 @@
 <h2>Series (horizontal)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       y="date"
@@ -261,7 +261,7 @@
 <h2>Series data</h2>
 
 <Preview data={{ dateSeriesData, dateSeriesBaselineData }}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       x="date"
       y="value"
@@ -287,7 +287,7 @@
 <h2>Series (diverging)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -312,7 +312,7 @@
 
 <Preview data={data.worldPopulationDemographics}>
   {@const totalPopulation = sum(data.worldPopulationDemographics, (d) => d.male + d.female)}
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <BarChart
       data={data.worldPopulationDemographics}
       y="age"
@@ -367,7 +367,7 @@
 
 <Preview data={data.worldPopulationDemographics}>
   {@const totalPopulation = sum(data.worldPopulationDemographics, (d) => d.male + d.female)}
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <BarChart
       data={data.worldPopulationDemographics}
       y="age"
@@ -420,7 +420,7 @@
 <h2>Group series</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -456,7 +456,7 @@
 <h2>Group series (horizontal)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       orientation="horizontal"
@@ -493,7 +493,7 @@
 <h2>Group series (bar click)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -536,7 +536,7 @@
 <h2>Group series (series / long data)</h2>
 
 <Preview data={dataByFruit}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       x="year"
       y="value"
@@ -575,7 +575,7 @@
 <h2>Stack series</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -611,7 +611,7 @@
 <h2>Stack series (horizontal)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       orientation="horizontal"
@@ -648,7 +648,7 @@
 <h2>Stack series (padded)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -686,7 +686,7 @@
 <h2>Stack series (expand)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -721,7 +721,7 @@
 <h2>Stack series (diverging)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -764,7 +764,7 @@
 <h2>Stack series (series data / long data)</h2>
 
 <Preview data={dataByFruit}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       x="year"
       y="value"
@@ -802,7 +802,7 @@
 <h2>Legend (group series)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -839,7 +839,7 @@
 <h2>Legend (stack series)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -876,7 +876,7 @@
 <h2>Legend (placement)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -913,7 +913,7 @@
 <h2>Legend (custom labels)</h2>
 
 <Preview data={wideData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={wideData}
       x="year"
@@ -953,7 +953,7 @@
 <h2>Labels</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" labels {renderContext} {debug} />
   </div>
 </Preview>
@@ -961,7 +961,7 @@
 <h2>Labels (inside placement)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -976,7 +976,7 @@
 <h2>Axis labels inside bars</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="value"
@@ -1005,7 +1005,7 @@
 <h2>Axis labels inside bars (using Labels)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="value"
@@ -1083,7 +1083,7 @@
 <h2>Single axis (x)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" axis="x" {renderContext} {debug} />
   </div>
 </Preview>
@@ -1091,7 +1091,7 @@
 <h2>Single axis (y)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" axis="y" {renderContext} {debug} />
   </div>
 </Preview>
@@ -1099,7 +1099,7 @@
 <h2>Override axis ticks with custom scale</h2>
 
 <Preview data={largeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={largeDateSeriesData}
       x="date"
@@ -1114,7 +1114,7 @@
 <h2>Both axis grid</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" grid={{ x: true }} {renderContext} {debug} />
   </div>
 </Preview>
@@ -1122,7 +1122,7 @@
 <h2>Both axis grid (align between)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -1137,7 +1137,7 @@
 <h2>Scale override</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <!-- TODO: Not sure why explicit ticks are needed here but not http://layerchart.com/docs/components/Axis#log_scale  -->
     <BarChart
       data={dateSeriesData}
@@ -1155,7 +1155,7 @@
 <h2>Tooltip click</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeriesData}
       x="date"
@@ -1173,7 +1173,7 @@
 <h2>Custom tooltip</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="tooltip" let:x let:y>
         <Tooltip.Root let:data>
@@ -1190,7 +1190,7 @@
 <h2>Custom chart</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart data={dateSeriesData} x="date" y="value" let:x let:y>
       <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
         <Axis
diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
index f103fb3fd..2e9670aa5 100644
--- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
@@ -223,7 +223,7 @@
 <h2>Integrated brush (x-axis)</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
+  <div class="border rounded-sm p-4 grid gap-1">
     <State initial={[null, null]} let:value={xDomain} let:set>
       <div class="h-[300px]">
         <Chart
@@ -260,7 +260,7 @@
 <h2>Integrated brush (y-axis)</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
+  <div class="border rounded-sm p-4 grid gap-1">
     <State initial={[0, null]} let:value={yDomain} let:set>
       <div class="h-[300px]">
         <Chart
@@ -297,7 +297,7 @@
 <h2>Integrated brush (both axis / area)</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
+  <div class="border rounded-sm p-4 grid gap-1">
     <State initial={{ xDomain: [null, null], yDomain: [0, null] }} let:value let:set>
       <div class="h-[300px]">
         <Chart
@@ -339,7 +339,7 @@
 <h2>Separate chart (clip data)</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
+  <div class="border rounded-sm p-4 grid gap-1">
     <State initial={[null, null]} let:value={xDomain} let:set>
       <div class="h-[300px]">
         <Chart
@@ -389,7 +389,7 @@
 <h2>Separate chart (clip data: y-axis)</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid grid-cols-[40px,1fr] gap-2">
+  <div class="border rounded-sm p-4 grid grid-cols-[40px_1fr] gap-2">
     <State initial={[0, null]} let:value={yDomain} let:set>
       <div>
         <Chart
@@ -439,7 +439,7 @@
 <h2>Separate chart (filter data)</h2>
 
 <Preview {data}>
-  <div class="border rounded p-4 grid gap-1">
+  <div class="border rounded-sm p-4 grid gap-1">
     <State initial={[null, null]} let:value={xDomain} let:set>
       <div class="h-[300px]">
         <Chart
@@ -505,7 +505,7 @@
 
   <div class="grid grid-cols-2 gap-4">
     {#each seriesData as data, i}
-      <div class="border rounded p-4 grid gap-1" style:--chart-color={colorScale(String(i))}>
+      <div class="border rounded-sm p-4 grid gap-1" style:--chart-color={colorScale(String(i))}>
         <div class="h-[100px]">
           <Chart
             {data}
@@ -570,7 +570,7 @@
 <h2>Tooltip interop</h2>
 
 <Preview data={data.appleStock}>
-  <div class="border rounded p-4 grid gap-1">
+  <div class="border rounded-sm p-4 grid gap-1">
     <State initial={[null, null]} let:value={xDomain} let:set>
       <div class="h-[300px]">
         <Chart
@@ -608,7 +608,7 @@
             xOffset={4}
             anchor="bottom"
             variant="none"
-            class="text-sm font-semibold text-primary leading-3 bg-surface-100/80 backdrop-blur-sm px-2 py-1 rounded"
+            class="text-sm font-semibold text-primary leading-3 bg-surface-100/80 backdrop-blur-xs px-2 py-1 rounded-sm"
             let:data
           >
             {format(data.value, 'currency')}
@@ -620,7 +620,7 @@
             yOffset={2}
             anchor="top"
             variant="none"
-            class="text-sm font-semibold bg-primary text-primary-content leading-3 px-2 py-1 rounded whitespace-nowrap"
+            class="text-sm font-semibold bg-primary text-primary-content leading-3 px-2 py-1 rounded-sm whitespace-nowrap"
             let:data
           >
             {format(data.date, PeriodType.Day)}
@@ -635,7 +635,7 @@
 
 <Preview data={randomData}>
   <State initial={{ xDomain: [null, null], yDomain: [null, null] }} let:value let:set>
-    <div class="h-[400px] p-4 border rounded">
+    <div class="h-[400px] p-4 border rounded-sm">
       <Chart
         data={randomData}
         x="x"
@@ -690,7 +690,7 @@
 <Preview data={randomData}>
   <State initial={{ xDomain: [null, null], yDomain: [null, null] }} let:value let:set>
     <div class="relative">
-      <div class="h-[400px] p-4 border rounded">
+      <div class="h-[400px] p-4 border rounded-sm">
         <Chart
           data={randomData}
           x="x"
@@ -723,7 +723,7 @@
         </Chart>
       </div>
 
-      <div class="absolute top-0 right-0 w-[25%] h-[25%] border rounded bg-surface-100">
+      <div class="absolute top-0 right-0 w-[25%] h-[25%] border rounded-sm bg-surface-100">
         <Chart
           data={randomData}
           x="x"
diff --git a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
index 94078a249..526b36188 100644
--- a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
@@ -28,7 +28,7 @@
 <h2>Responsive cell size (default)</h2>
 
 <Preview {data}>
-  <div class="h-[200px] p-4 border rounded">
+  <div class="h-[200px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -63,7 +63,7 @@
 <h2>Fixed cell size</h2>
 
 <Preview {data}>
-  <div class="h-[200px] p-4 border rounded overflow-hidden">
+  <div class="h-[200px] p-4 border rounded-sm overflow-hidden">
     <Chart
       {data}
       x="date"
@@ -98,7 +98,7 @@
 <h2>Multiple Years</h2>
 
 <Preview {data}>
-  <div class="h-[716px] p-4 border rounded overflow-hidden">
+  <div class="h-[716px] p-4 border rounded-sm overflow-hidden">
     <Chart
       {data}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
index 3727dc172..2880b5a6b 100644
--- a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
@@ -6,7 +6,7 @@
 <h1>Examples</h1>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
       <Svg>
         <Axis placement="bottom" rule />
diff --git a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
index c27bf05b3..e9525f6fe 100644
--- a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
@@ -8,7 +8,7 @@
 <h2>Basic</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       x="x"
@@ -30,7 +30,7 @@
 <h2>full</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       x="x"
@@ -52,7 +52,7 @@
 <h2>border</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       x="x"
@@ -74,7 +74,7 @@
 <h2>gradient background</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       x="x"
@@ -98,7 +98,7 @@
 <h2>Canvas</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       x="x"
@@ -120,7 +120,7 @@
 <h2>Canvas gradient background</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       x="x"
diff --git a/packages/layerchart/src/routes/docs/components/Grid/+page.svelte b/packages/layerchart/src/routes/docs/components/Grid/+page.svelte
index d0a9b3e30..9502b3e0c 100644
--- a/packages/layerchart/src/routes/docs/components/Grid/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Grid/+page.svelte
@@ -16,7 +16,7 @@
 <h2>Both axis</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -35,7 +35,7 @@
 <h2>Single axis (x)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -54,7 +54,7 @@
 <h2>Single axis (y)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -73,7 +73,7 @@
 <h2>Dashed lines</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -92,7 +92,7 @@
 <h2>Band scale (align center / default)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -116,7 +116,7 @@
 <h2>Band scale (align between)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -140,7 +140,7 @@
 <h2>Radial</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, 100]} radial>
       <Svg center>
         <Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y />
@@ -152,7 +152,7 @@
 <h2>Radial (linear)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, 100]} radial>
       <Svg center>
         <Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y radialY="linear" />
@@ -164,7 +164,7 @@
 <h2>Integer-only ticks</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -189,7 +189,7 @@
 <h2>Explicit ticks</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -209,7 +209,7 @@
 <h2>Inject tick value</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -229,7 +229,7 @@
 <h2>Tick count</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -249,7 +249,7 @@
 <h2>Tick count (responsive)</h2>
 
 <Preview {data}>
-  <div class="h-[100px] p-4 border rounded">
+  <div class="h-[100px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -269,7 +269,7 @@
 <h2>Remove default tick count</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/components/Group/+page.svelte b/packages/layerchart/src/routes/docs/components/Group/+page.svelte
index 0cf1119cf..ae93df010 100644
--- a/packages/layerchart/src/routes/docs/components/Group/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Group/+page.svelte
@@ -6,7 +6,7 @@
 <h1>Examples</h1>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
       <Svg>
         <Axis placement="bottom" rule />
diff --git a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
index a198835d1..1c0c3884d 100644
--- a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
@@ -32,7 +32,7 @@
 <h2>Scatter</h2>
 
 <Preview data={data.groupData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={data.groupData}
       x="x"
diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
index 33d6e0ef0..728268535 100644
--- a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
@@ -281,7 +281,7 @@
       )}
       title="Age (years)"
       variant="swatches"
-      classes={{ swatch: 'rounded' }}
+      classes={{ swatch: 'rounded-sm' }}
     />
   </div>
 </Preview>
@@ -312,7 +312,7 @@
     tickFontSize={12}
     tickFormat={(value) => value + '°'}
     classes={{
-      root: 'border px-3 py-2 bg-surface-200 rounded',
+      root: 'border px-3 py-2 bg-surface-200 rounded-sm',
       title: 'text-lg text-center',
       label: 'fill-surface-content/50',
       tick: 'stroke-surface-100',
diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.svelte b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
index b15bc1373..8e321a347 100644
--- a/packages/layerchart/src/routes/docs/components/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
@@ -7,7 +7,7 @@
 <h1>Examples</h1>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
       <Svg>
         <Axis placement="bottom" rule />
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index 7bc2c429d..2310e3f6d 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -101,7 +101,7 @@
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" {renderContext} {debug} />
   </div>
 </Preview>
@@ -109,7 +109,7 @@
 <h2>Override color</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={dateSeriesData}
       x="date"
@@ -123,7 +123,7 @@
 <h2>Curve</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={dateSeriesData}
       x="date"
@@ -138,7 +138,7 @@
 <h2>Series</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={multiSeriesData}
       x="date"
@@ -156,7 +156,7 @@
 <h2>Series (separate data)</h2>
 
 <Preview data={multiSeriesDataByFruit}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       x="date"
       y="value"
@@ -186,7 +186,7 @@
 <h2>Series (voronoi tooltip with highlight)</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={multiSeriesFlatData}
       x="date"
@@ -234,7 +234,7 @@
 <h2>Series (point click)</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={multiSeriesData}
       x="date"
@@ -256,7 +256,7 @@
 <h2>Series (custom highlight point)</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={multiSeriesData}
       x="date"
@@ -275,7 +275,7 @@
 <h2>Series (labels on point hover)</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={multiSeriesData}
       x="date"
@@ -301,7 +301,7 @@
 <h2>Labels</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={dateSeriesData}
       x="date"
@@ -316,7 +316,7 @@
 <h2>Points</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" points {renderContext} {debug} />
   </div>
 </Preview>
@@ -324,7 +324,7 @@
 <h2>Labels with Points</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={dateSeriesData}
       x="date"
@@ -340,7 +340,7 @@
 <h2>Labels within points</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={dateSeriesData}
       x="date"
@@ -361,7 +361,7 @@
 <h2>Radar (linear grid)</h2>
 
 <Preview data={pitchData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={pitchData}
       x="name"
@@ -401,7 +401,7 @@
 <h2>Radar (rounded grid)</h2>
 
 <Preview data={pitchData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={pitchData}
       x="name"
@@ -439,7 +439,7 @@
 <h2>Radar with series data</h2>
 
 <Preview data={budgetData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={budgetData}
       x="name"
@@ -486,7 +486,7 @@
 <h2>Gradient encoding</h2>
 
 <Preview data={data.dailyTemperature}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={data.dailyTemperature}
       x="date"
@@ -527,7 +527,7 @@
 <h2>Gradient threshold</h2>
 
 <Preview data={data.dailyTemperature}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={data.dailyTemperature}
       x="date"
@@ -557,7 +557,7 @@
 <h2>Large series</h2>
 
 <Preview data={data.dailyTemperatures}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <LineChart
       x="date"
       y="value"
@@ -591,7 +591,7 @@
 <h2>Large radial series</h2>
 
 <Preview data={data.dailyTemperatures}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <LineChart
       x="date"
       y="value"
@@ -632,7 +632,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <Preview data={dynamicData}>
   <div
-    class="h-[300px] p-4 border rounded"
+    class="h-[300px] p-4 border rounded-sm"
     on:mousemove={(e) => {
       const x = e.clientX;
       const y = e.clientY;
@@ -670,7 +670,7 @@
 <h2>Null gaps</h2>
 
 <Preview data={dateSeriesDataWithNulls}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesDataWithNulls} x="date" y="value" points {renderContext} {debug} />
   </div>
 </Preview>
@@ -678,7 +678,7 @@
 <h2>Null with dashed lines</h2>
 
 <Preview data={dateSeriesDataWithNulls}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesDataWithNulls} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="belowMarks" let:series>
         {#each series as s}
@@ -714,7 +714,7 @@
 <h2>Single axis (x)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" axis="x" {renderContext} {debug} />
   </div>
 </Preview>
@@ -722,7 +722,7 @@
 <h2>Single axis (y)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" axis="y" {renderContext} {debug} />
   </div>
 </Preview>
@@ -730,7 +730,7 @@
 <h2>Legend</h2>
 
 <Preview data={multiSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={multiSeriesData}
       x="date"
@@ -749,7 +749,7 @@
 <h2>Tooltip click</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={dateSeriesData}
       x="date"
@@ -767,7 +767,7 @@
 <h2>Custom tooltip</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="tooltip" let:x let:y let:height let:padding>
         <Tooltip.Root
@@ -775,7 +775,7 @@
           y="data"
           anchor="right"
           contained={false}
-          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded-sm whitespace-nowrap"
           let:data
         >
           {y(data)}
@@ -785,7 +785,7 @@
           x="data"
           y={height}
           anchor="top"
-          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded-sm whitespace-nowrap"
           contained={false}
           let:data
         >
@@ -799,7 +799,7 @@
 <h2>Simple annotations</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="aboveContext" let:xScale let:height let:tooltip>
         <Svg>
@@ -853,7 +853,7 @@
 <h2>Brushing</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart
       data={data.appleStock}
       x="date"
@@ -871,7 +871,7 @@
 
 <h2>Brush with series point events</h2>
 
-<div class="h-[300px] p-4 border rounded">
+<div class="h-[300px] p-4 border rounded-sm">
   <LineChart
     data={multiSeriesData}
     x="date"
@@ -893,7 +893,7 @@
 <h2>Custom chart</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <LineChart data={dateSeriesData} x="date" y="value" let:x let:y {renderContext} {debug}>
       <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
         <Axis placement="left" grid rule />
diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
index 8db5482ca..b13e1ed84 100644
--- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
@@ -8,7 +8,7 @@
 <h2>Direction with custom colors</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <LinearGradient id="gradient-1" stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']} />
@@ -40,7 +40,7 @@
 <h2>Tailwind colors</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <LinearGradient id="tw-1" class="from-pink-500 to-yellow-500" vertical />
@@ -63,7 +63,7 @@
 <h2>units <small>`objectBoundingBox` (default) vs `userSpaceOnUse`</small></h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <LinearGradient class="from-green-500 to-blue-500" units="objectBoundingBox" let:gradient>
diff --git a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
index 0e24e2741..6f8c5deb3 100644
--- a/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Marker/+page.svelte
@@ -59,7 +59,7 @@
   <div class="grid gap-2">
     {#each markerTypes as marker}
       <div>{marker}</div>
-      <div class="h-[100px] p-4 border rounded">
+      <div class="h-[100px] p-4 border rounded-sm">
         <Chart {data} x="x" y="y">
           <Svg>
             <Spline
@@ -101,7 +101,7 @@
   <div class="grid gap-2">
     {#each markerTypes as marker}
       <div>{marker}</div>
-      <div class="h-[100px] p-4 border rounded">
+      <div class="h-[100px] p-4 border rounded-sm">
         <Chart {data} x="x" y="y">
           <Svg>
             <Spline
@@ -121,7 +121,7 @@
 
 <h2>Line</h2>
 
-<div class="grid grid-cols-[60px,60px] gap-2 mb-2">
+<div class="grid grid-cols-[60px_60px] gap-2 mb-2">
   <Field label="Start" let:id>
     <Switch bind:checked={markerStart} {id} size="md" />
   </Field>
@@ -134,7 +134,7 @@
   <div class="grid gap-2">
     {#each markerTypes as marker}
       <div>{marker}</div>
-      <div class="h-[35px] p-4 border rounded">
+      <div class="h-[35px] p-4 border rounded-sm">
         <Chart {data} x="x" y="y" let:width>
           <Svg>
             <Line
@@ -158,7 +158,7 @@
 
 <Preview {data}>
   <div class="grid gap-2">
-    <div class="h-[200px] p-4 border rounded">
+    <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
         <Svg>
           <Spline
@@ -183,7 +183,7 @@
 <Preview {data}>
   <div class="grid gap-2">
     <div>default (auto)</div>
-    <div class="h-[200px] p-4 border rounded">
+    <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
         <Svg>
           <Spline
@@ -196,7 +196,7 @@
     </div>
 
     <div>0</div>
-    <div class="h-[200px] p-4 border rounded">
+    <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
         <Svg>
           <Spline
@@ -209,7 +209,7 @@
     </div>
 
     <div>90</div>
-    <div class="h-[200px] p-4 border rounded">
+    <div class="h-[200px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y">
         <Svg>
           <Spline
diff --git a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
index ef178f4a4..d2860316c 100644
--- a/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/MotionPath/+page.svelte
@@ -42,7 +42,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -72,7 +72,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -115,7 +115,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
diff --git a/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte b/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte
index 8aad5d60f..f99299696 100644
--- a/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pattern/+page.svelte
@@ -8,7 +8,7 @@
 <h2>Lines</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <Pattern id="line-pattern-1" width={4} height={4}>
@@ -50,7 +50,7 @@
 <h2>Circles</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <Pattern id="circle-pattern-1" width={4} height={4}>
@@ -98,7 +98,7 @@
 <h2>With Fill color</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <Pattern id="fill-pattern-1" width={4} height={4}>
@@ -152,7 +152,7 @@
 <h2>With LinearGradient</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <LinearGradient id="gradient-1" stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']} />
@@ -230,7 +230,7 @@
 <h2>LinearGradient as Pattern</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <LinearGradient id="gradient-1" stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']} />
diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
index bf1ae67a8..61b984600 100644
--- a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
@@ -37,7 +37,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie />
@@ -49,7 +49,7 @@
 <h2>Disable sorting</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie sort={null} />
@@ -61,7 +61,7 @@
 <h2>Partial range (Chart xRange)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" xRange={[-90, 90]} c="date" cRange={keyColors}>
       <Svg center>
         <Pie />
@@ -73,7 +73,7 @@
 <h2>Partial range (range prop)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie range={[-90, 90]} />
@@ -85,7 +85,7 @@
 <h2>Pad angle</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie padAngle={0.05} />
@@ -97,7 +97,7 @@
 <h2>Pad angle</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={100} padAngle={0.03} />
@@ -111,7 +111,7 @@
 <h3>If value >= 1, value will be treated as discrete</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={100} />
@@ -123,7 +123,7 @@
 <h3>If value >= 0 and less than 1, value will be treated as a percentage of outerRadius</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={0.9} />
@@ -135,7 +135,7 @@
 <h3>If value less than 0, value will be treated as a offset of outerRadius</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={-30} />
@@ -147,7 +147,7 @@
 <h2>Outer radius</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie outerRadius={100} />
@@ -159,7 +159,7 @@
 <h2>Multiple (data prop)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie innerRadius={100} {data} />
@@ -178,7 +178,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded resize overflow-auto">
+    <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
       <Chart {data} x="value" c="date" cRange={keyColors}>
         <Svg center>
           {#if show}
@@ -193,7 +193,7 @@
 <h2>Offset</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie offset={4} />
@@ -205,7 +205,7 @@
 <h2>default slot / render each `Arc`</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie let:arcs>
@@ -227,7 +227,7 @@
 <h2>Centroid labels</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date">
       <Svg center>
         <Pie let:arcs>
@@ -269,7 +269,7 @@
 <h2>Tooltip</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:tooltip>
       <Svg center>
         <Pie {tooltip} />
@@ -293,7 +293,7 @@
 <h2>Tooltip with Arcs (slot)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:tooltip>
       <Svg center>
         <Pie let:arcs>
@@ -354,7 +354,7 @@
 <h3>left</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:height>
       <Svg>
         <Group x={height / 2} center="y">
@@ -368,7 +368,7 @@
 <h3>center</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors}>
       <Svg center>
         <Pie />
@@ -380,7 +380,7 @@
 <h3>right</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <Chart {data} x="value" c="date" cRange={keyColors} let:width let:height>
       <Svg>
         <Group x={width - height / 2} center="y">
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
index 3d592fa76..f1fca1950 100644
--- a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -52,7 +52,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {data} key="fruit" value="value" {renderContext} {debug} />
   </div>
 </Preview>
@@ -60,7 +60,7 @@
 <h2>ontooltipclick</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -78,7 +78,7 @@
 <h2>Outer radius (fixed)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {data} key="fruit" value="value" outerRadius={100} {renderContext} {debug} />
   </div>
 </Preview>
@@ -86,7 +86,7 @@
 <h2>Outer radius (offset)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {data} key="fruit" value="value" outerRadius={-20} {renderContext} {debug} />
   </div>
 </Preview>
@@ -94,7 +94,7 @@
 <h2>Donut (innerRadius)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -111,7 +111,7 @@
 <h2>Donut with inner text</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -145,7 +145,7 @@
 <h2>Arc (range)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] border rounded resize overflow-auto">
+  <div class="h-[300px] border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -165,7 +165,7 @@
 <h2>Single value</h2>
 
 <Preview data={[{ key: 'Example', value: 70 }]}>
-  <div class="h-[200px] p-4 border rounded resize overflow-auto">
+  <div class="h-[200px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       data={[{ key: 'Example', value: 70 }]}
       key="key"
@@ -183,7 +183,7 @@
 <h2>Single value gradient with text</h2>
 
 <Preview {data}>
-  <div class="h-[160px] p-4 border rounded resize overflow-auto">
+  <div class="h-[160px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {renderContext} {debug}>
       <svelte:fragment slot="marks">
         <LinearGradient class="from-secondary to-primary" let:gradient>
@@ -217,7 +217,7 @@
 <h2>Single value (arc) with custom color</h2>
 
 <Preview data={[{ key: 'Example', value: 70 }]}>
-  <div class="h-[120px] p-4 border rounded resize overflow-auto">
+  <div class="h-[120px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       data={[{ key: 'Example', value: 70 }]}
       key="key"
@@ -240,7 +240,7 @@
 <h2>Series data</h2>
 
 <Preview data={dataByYear}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="fruit"
       value="value"
@@ -258,7 +258,7 @@
 <h2>Series data (individual tracks)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="fruit"
       value="value"
@@ -275,7 +275,7 @@
 <h2>Series data (arc)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="fruit"
       value="value"
@@ -294,7 +294,7 @@
 <h2>Series data (track color)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="fruit"
       value="value"
@@ -316,7 +316,7 @@
 <h2>Series data (individual tracks, max value, and color)</h2>
 
 <Preview data={exerciseData}>
-  <div class="h-[200px] p-4 border rounded resize overflow-auto">
+  <div class="h-[200px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="key"
       value="value"
@@ -340,7 +340,7 @@
 <h2>Series props</h2>
 
 <Preview data={dataByYear}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="fruit"
       value="value"
@@ -357,7 +357,7 @@
 <h2>Series data (arc click)</h2>
 
 <Preview data={dataByYear}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       key="fruit"
       value="value"
@@ -379,7 +379,7 @@
 <h2>Inner component props (Arc class)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -394,7 +394,7 @@
 <h2>Legend</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {data} key="fruit" value="value" legend {renderContext} {debug} />
   </div>
 </Preview>
@@ -402,7 +402,7 @@
 <h2>Legend (placement with orientation)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -417,7 +417,7 @@
 <h2>Legend (custom label)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -444,7 +444,7 @@
 <h2>Customize colors (CSS variables)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -464,7 +464,7 @@
 <h2>Customize colors (scheme)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {data} key="fruit" value="value" cRange={schemeTableau10} {renderContext} {debug} />
   </div>
 </Preview>
@@ -472,7 +472,7 @@
 <h2>Customize colors (interpolator)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -487,7 +487,7 @@
 <h2>Customize colors (data prop)</h2>
 
 <Preview data={dataWithColor}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart data={dataWithColor} key="fruit" value="value" c="color" {renderContext} {debug} />
   </div>
 </Preview>
@@ -495,7 +495,7 @@
 <h2>Legend with padding</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -511,7 +511,7 @@
 <h2>Placement (left)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -527,7 +527,7 @@
 <h2>Placement (right)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -543,7 +543,7 @@
 <h2>Custom placement</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart
       {data}
       key="fruit"
@@ -560,7 +560,7 @@
 <!-- <h2>Centroid labels</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded resize overflow-auto">
+  <div class="h-[300px] p-4 border rounded-sm resize overflow-auto">
     <PieChart {data} key="fruit" value="value" keys="centroid" {renderContext} {debug} />
   </div>
 </Preview> -->
diff --git a/packages/layerchart/src/routes/docs/components/Point/+page.svelte b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
index 2a8781308..54b99aecc 100644
--- a/packages/layerchart/src/routes/docs/components/Point/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
@@ -8,7 +8,7 @@
 <h1>Examples</h1>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x={(d) => d.x}
diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
index 23ab5919d..ddf0c3c90 100644
--- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
@@ -10,7 +10,7 @@
 <h2>Focal location and radius with custom colors</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']} let:gradient>
@@ -37,7 +37,7 @@
 <h2>Tailwind colors</h2>
 
 <Preview>
-  <div class="h-[334px] p-4 border rounded">
+  <div class="h-[334px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <RadialGradient id="tw-1" class="from-pink-500 to-yellow-500" />
@@ -60,7 +60,7 @@
 <h2>spreadMethod</h2>
 
 <Preview>
-  <div class="h-[252px] p-4 border rounded">
+  <div class="h-[252px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <RadialGradient class="from-green-500 to-blue-500" r="30%" spreadMethod="pad" let:gradient>
@@ -92,7 +92,7 @@
 <h2>units <small>`objectBoundingBox` (default) vs `userSpaceOnUse`</small></h2>
 
 <Preview>
-  <div class="h-[252px] p-4 border rounded">
+  <div class="h-[252px] p-4 border rounded-sm">
     <Chart>
       <Svg>
         <RadialGradient class="from-green-500 to-blue-500" units="objectBoundingBox" let:gradient>
diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
index dbc62960a..4d24b0a1e 100644
--- a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
@@ -6,7 +6,7 @@
 <h1>Examples</h1>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }}>
       <Svg>
         <Axis placement="bottom" rule />
diff --git a/packages/layerchart/src/routes/docs/components/Rule/+page.svelte b/packages/layerchart/src/routes/docs/components/Rule/+page.svelte
index b6cffb912..7294f1204 100644
--- a/packages/layerchart/src/routes/docs/components/Rule/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Rule/+page.svelte
@@ -11,7 +11,7 @@
 <h2>x and y baselines</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       xDomain={[0, 100]}
       yDomain={[0, 100]}
@@ -29,7 +29,7 @@
 <h2>top right x and y baselines</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       xDomain={[0, 100]}
       yDomain={[0, 100]}
@@ -47,7 +47,7 @@
 <h2>x baseline with negative values</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       xDomain={[-20, 100]}
       yDomain={[0, 100]}
@@ -65,7 +65,7 @@
 <h2>x annotation</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       xDomain={[0, 100]}
       yDomain={[0, 100]}
@@ -83,7 +83,7 @@
 <h2>y baseline with negative values</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={[]}
       xDomain={[0, 100]}
@@ -102,7 +102,7 @@
 <h2>y annotation</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       xDomain={[0, 100]}
       yDomain={[0, 100]}
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
index 645756b0e..10aeb39d5 100644
--- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -55,7 +55,7 @@
 <h2>Basic</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart data={spiralData} x="x" y="y" {renderContext} {debug} />
   </div>
 </Preview>
@@ -63,7 +63,7 @@
 <h2>Domain padding</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       data={spiralData}
       x="x"
@@ -79,7 +79,7 @@
 <h2>Radius via rScale</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       data={spiralData}
       x="x"
@@ -97,7 +97,7 @@
 <h2>0 baseline/domain</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       data={spiralData}
       x="x"
@@ -113,7 +113,7 @@
 <h2>Series</h2>
 
 <Preview data={penguinDataBySpecies}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       x="flipper_length_mm"
       y="bill_length_mm"
@@ -137,7 +137,7 @@
 <h2>Series with radius</h2>
 
 <Preview data={penguinDataBySpecies}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       x="flipper_length_mm"
       y="bill_length_mm"
@@ -163,7 +163,7 @@
 <h2>Labels</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart data={spiralData} x="x" y="y" labels={{ offset: 10 }} {renderContext} {debug} />
   </div>
 </Preview>
@@ -171,7 +171,7 @@
 <h2>Legend</h2>
 
 <Preview data={penguinDataBySpecies}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       x="flipper_length_mm"
       y="bill_length_mm"
@@ -196,7 +196,7 @@
 <h2>Legend (show/hide series with tweening)</h2>
 
 <Preview data={pengiunSeries}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       x="flipper_length_mm"
       y="bill_length_mm"
@@ -218,7 +218,7 @@
 <h2>Legend (custom labels)</h2>
 
 <Preview data={penguinDataBySpecies}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       x="flipper_length_mm"
       y="bill_length_mm"
@@ -244,7 +244,7 @@
 <h2>Single axis (x)</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart data={spiralData} x="x" y="y" axis="x" {renderContext} {debug} />
   </div>
 </Preview>
@@ -252,7 +252,7 @@
 <h2>Single axis (y)</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart data={spiralData} x="x" y="y" axis="y" {renderContext} {debug} />
   </div>
 </Preview>
@@ -283,7 +283,7 @@
 <h2>Tooltip click</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       data={spiralData}
       x="x"
@@ -301,7 +301,7 @@
 <h2>Custom tooltip</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart data={spiralData} x="x" y="y" {renderContext} {debug}>
       <svelte:fragment slot="tooltip" let:x let:y let:padding let:height>
         <Tooltip.Root
@@ -309,7 +309,7 @@
           y="data"
           anchor="right"
           contained={false}
-          class="text-[10px] font-semibold text-primary bg-surface-100 mr-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mr-[2px] px-1 py-[2px] border border-primary rounded-sm whitespace-nowrap"
           let:data
         >
           {format(y(data), 'integer')}
@@ -319,7 +319,7 @@
           x="data"
           y={height}
           anchor="top"
-          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[1px] px-2 py-[1px] border border-primary rounded whitespace-nowrap"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[1px] px-2 py-[1px] border border-primary rounded-sm whitespace-nowrap"
           contained={false}
           let:data
         >
@@ -333,7 +333,7 @@
 <h2>Brushing</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart
       data={spiralData}
       x="x"
@@ -353,7 +353,7 @@
 <h2>Custom chart</h2>
 
 <Preview data={spiralData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <ScatterChart data={spiralData} x="x" y="y" let:x let:y {renderContext} {debug}>
       <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
         <Axis placement="left" grid rule />
diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
index 90f48faff..0e6a0138f 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -42,7 +42,7 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px,auto,auto,1fr] gap-2">
+  <div class="grid grid-cols-[100px_auto_auto_1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
@@ -65,7 +65,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart {data} x="x" y="y" yNice padding={{ left: 24, bottom: 24, top: 4, right: 8 }}>
       <svelte:component this={Context}>
         <Axis placement="left" grid rule />
@@ -103,7 +103,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -130,7 +130,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -157,7 +157,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -189,7 +189,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -219,7 +219,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 48, bottom: 24, right: 48 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -256,7 +256,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
@@ -285,7 +285,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
         <Svg>
           <Axis placement="left" grid rule />
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
index 6ce0efd25..fe54851dd 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -134,7 +134,7 @@
 <h2>Basic</h2>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -168,7 +168,7 @@
 <h2>Custom content</h2>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -197,7 +197,7 @@
 <h2>color swatch</h2>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -231,7 +231,7 @@
 <h2>color swatch using theme</h2>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -265,7 +265,7 @@
 <h2>invert variant</h2>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -302,7 +302,7 @@
 <h3>Default (mouse position with offset)</h3>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -336,7 +336,7 @@
 <h3>Data snapping</h3>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -370,7 +370,7 @@
 <h3>Multiple tooltips with fixed single axis</h3>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -399,7 +399,7 @@
         y="data"
         anchor="right"
         contained={false}
-        class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded-sm whitespace-nowrap"
         let:data
       >
         {data.value}
@@ -409,7 +409,7 @@
         x="data"
         y={height + padding.top + 2}
         anchor="top"
-        class="text-[10px] font-semibold text-primary bg-surface-100 px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 px-2 py-[2px] border border-primary rounded-sm whitespace-nowrap"
         let:data
       >
         {formatDate(data.date, PeriodType.Day)}
@@ -421,7 +421,7 @@
 <h3>Multiple tooltips with fixed single axis (scaleBand)</h3>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -451,7 +451,7 @@
         yOffset={2}
         anchor="bottom"
         contained={false}
-        class="text-[10px] font-semibold text-primary bg-surface-100 px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 px-2 py-[2px] border border-primary rounded-sm whitespace-nowrap"
         let:data
       >
         {data.value}
@@ -462,7 +462,7 @@
         y={height + padding.top + 2}
         anchor="top"
         contained={false}
-        class="text-[10px] font-semibold text-primary bg-surface-100 px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 px-2 py-[2px] border border-primary rounded-sm whitespace-nowrap"
         let:data
       >
         {formatDate(data.date, PeriodType.Day)}
@@ -517,7 +517,7 @@
 </div>
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -568,7 +568,7 @@
     {/if}
   </div>
 
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -609,7 +609,7 @@
 
 <TooltipControls bind:settings={charts.area} />
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -659,7 +659,7 @@
 
 <TooltipControls bind:settings={charts.areaStack} />
 <Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackData}
       flatData={flatten(stackData)}
@@ -726,7 +726,7 @@
 
 <TooltipControls bind:settings={charts.dateTime} />
 <Preview data={timeSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={timeSeries}
       x="startDate"
@@ -773,7 +773,7 @@
 <TooltipControls bind:settings={charts.duration} />
 
 <Preview data={timeSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={timeSeries}
       x={['startDate', 'endDate']}
@@ -824,7 +824,7 @@
 <TooltipControls bind:settings={charts.multiDuration} />
 
 <Preview data={overlapTimeSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={overlapTimeSeries}
       x={['startDate', 'endDate']}
@@ -876,7 +876,7 @@
 <TooltipControls bind:settings={charts.bars} />
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -930,7 +930,7 @@
 <TooltipControls bind:settings={charts.multiBars} />
 
 <Preview data={dateSeries}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeries}
       x="date"
@@ -990,7 +990,7 @@
 <TooltipControls bind:settings={charts.scatter} />
 
 <Preview data={spiralData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={spiralData}
       x="x"
diff --git a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
index b197c84e5..2183b37cb 100644
--- a/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/TransformContext/+page.svelte
@@ -42,7 +42,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[500px] aspect-square p-4 border rounded relative overflow-hidden">
+  <div class="h-[500px] aspect-square p-4 border rounded-sm relative overflow-hidden">
     <Chart
       {data}
       x="x"
@@ -79,7 +79,7 @@
 <h2>Pan/Zoom SVG image</h2>
 
 <Preview>
-  <div class="h-[500px] p-4 border rounded relative overflow-hidden">
+  <div class="h-[500px] p-4 border rounded-sm relative overflow-hidden">
     <Chart
       transform={{
         mode: 'canvas',
@@ -102,7 +102,7 @@
 <h2>Pan/Zoom HTML image</h2>
 
 <Preview>
-  <div class="h-[500px] p-4 border rounded relative overflow-hidden">
+  <div class="h-[500px] p-4 border rounded-sm relative overflow-hidden">
     <Chart
       transform={{
         mode: 'canvas',
diff --git a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
index e6fe2e89e..1677d8cb0 100644
--- a/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Voronoi/+page.svelte
@@ -18,7 +18,7 @@
 <h2>Svg</h2>
 
 <Preview {data}>
-  <div class="h-[400px] p-4 border rounded relative" on:pointermove={onPointerMove}>
+  <div class="h-[400px] p-4 border rounded-sm relative" on:pointermove={onPointerMove}>
     <Chart {data} x="x" y="y" let:xScale let:yScale>
       <Svg>
         <ChartClipPath>
@@ -39,7 +39,7 @@
 <h2>Canvas</h2>
 
 <Preview {data}>
-  <div class="h-[400px] p-4 border rounded relative" on:pointermove={onPointerMove}>
+  <div class="h-[400px] p-4 border rounded-sm relative" on:pointermove={onPointerMove}>
     <Chart {data} x="x" y="y" let:xScale let:yScale>
       <Canvas>
         <ChartClipPath>
diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
index b25339803..2ce068011 100644
--- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
@@ -102,7 +102,7 @@
 </div>
 
 <Preview data={countries}>
-  <div class="h-[600px] grid grid-cols-[224px,1fr] relative">
+  <div class="h-[600px] grid grid-cols-[224px_1fr] relative">
     <div class="absolute top-0 right-0 z-10 flex items-center gap-3">
       {#if isPlaying && selectedFeature}
         <span class="text-sm px-2 py-1 font-semibold text-primary bg-primary/5 rounded-full">
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index fa26ca30a..eef236cda 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -69,7 +69,7 @@
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -95,7 +95,7 @@
 <h2>With Tooltip and Highlight</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -129,7 +129,7 @@
 <h2>With Labels</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -156,7 +156,7 @@
 <h2>Explicit axis ticks (min/max)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -187,7 +187,7 @@
 <h2>Gradient</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -215,7 +215,7 @@
 <h2>Gradient (separate stroke)</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -245,7 +245,7 @@
 <h2>Multiple series</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesFlatData}
       x="date"
@@ -300,7 +300,7 @@
 <h2>Multiple series (using overrides)</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesData}
       x="date"
@@ -362,7 +362,7 @@
 <h2>Multiple series (highlight on hover)</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesFlatData}
       x="date"
@@ -421,7 +421,7 @@
 <h2>Multiple series with labels</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesFlatData}
       x="date"
@@ -464,7 +464,7 @@
 <h2>Stack</h2>
 
 <Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackData}
       flatData={flatten(stackData)}
@@ -518,7 +518,7 @@
 <h2>Stack with gradient</h2>
 
 <Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackData}
       flatData={flatten(stackData)}
@@ -574,7 +574,7 @@
   </div>
 
   <Preview data={dateSeriesData}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         data={dateSeriesData}
         x="date"
@@ -613,7 +613,7 @@
   </div>
 
   <Preview data={dateSeriesData}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         data={dateSeriesData}
         x="date"
@@ -653,7 +653,7 @@
   </div>
 
   <Preview data={dateSeriesData}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         data={dateSeriesData}
         x="date"
@@ -692,7 +692,7 @@
 <h2>Threshold with RectClipPath</h2>
 
 <Preview data={negativeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeDateSeriesData}
       x="date"
@@ -723,7 +723,7 @@
 <h2>Threshold with RectClipPath (over/under)</h2>
 
 <Preview data={negativeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeDateSeriesData}
       x="date"
@@ -754,7 +754,7 @@
 <h2>Highlight color based on value using color scale</h2>
 
 <Preview data={negativeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeDateSeriesData}
       x="date"
@@ -797,7 +797,7 @@
 <h2>Highlight color based on value using tooltip slot prop</h2>
 
 <Preview data={negativeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeDateSeriesData}
       x="date"
@@ -844,7 +844,7 @@
 <h2>Threshold with LinearGradient</h2>
 
 <Preview data={negativeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeDateSeriesData}
       x="date"
@@ -882,7 +882,7 @@
 <h2>Threshold with LinearGradient (over/under)</h2>
 
 <Preview data={negativeDateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeDateSeriesData}
       x="date"
@@ -925,7 +925,7 @@
 <h2>Clipped area on Tooltip</h2>
 
 <Preview data={data.appleStock}>
-  <div class="h-[300px] border rounded">
+  <div class="h-[300px] border rounded-sm">
     <Chart
       data={data.appleStock}
       x="date"
@@ -970,7 +970,7 @@
         y={height + padding.top + 2}
         anchor="top"
         variant="none"
-        class="text-sm font-semibold bg-primary text-primary-content leading-3 px-2 py-1 rounded whitespace-nowrap"
+        class="text-sm font-semibold bg-primary text-primary-content leading-3 px-2 py-1 rounded-sm whitespace-nowrap"
         let:data
       >
         {format(data.date, PeriodType.Day)}
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
index 627925925..7f8624c02 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -109,7 +109,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -135,7 +135,7 @@
 <h2>Rounded (right-only)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -161,7 +161,7 @@
 <h2>Tooltip and Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -197,7 +197,7 @@
 <h2>Tooltip and Bar Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded group">
+  <div class="h-[300px] p-4 border rounded-sm group">
     <Chart
       {data}
       x="value"
@@ -233,7 +233,7 @@
 <h2>Tooltip and Clipped Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded group">
+  <div class="h-[300px] p-4 border rounded-sm group">
     <Chart
       {data}
       x="value"
@@ -275,7 +275,7 @@
 <h2>Calculated value domain (positive)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={createDateSeries({ count: 10, min: 50, max: 100 })}
       x="value"
@@ -300,7 +300,7 @@
 <h2>Calculated value domain (negative)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={createDateSeries({ count: 10, min: -100, max: -50 })}
       x="value"
@@ -325,7 +325,7 @@
 <h2>Outside Labels (default)</h2>
 
 <Preview data={negativeData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeData}
       x="value"
@@ -353,7 +353,7 @@
 <h2>Inside Labels</h2>
 
 <Preview data={negativeData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeData}
       x="value"
@@ -380,7 +380,7 @@
 <h2>Limit ticks (count)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -407,7 +407,7 @@
 <h2>Limit ticks (second scale)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -434,7 +434,7 @@
 <h2>Gradient</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -462,7 +462,7 @@
 <h2>Customize individual styles</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -496,7 +496,7 @@
 <h2>Highlight individual bar</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -530,7 +530,7 @@
 <h2>Highlight individual bar (line)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -561,7 +561,7 @@
 <h2>Average annotation Rule</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -599,7 +599,7 @@
 <h2>with grid on top</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -625,7 +625,7 @@
 <h2>with grid on top (mix-blend)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
@@ -651,7 +651,7 @@
 <h2>Multiple (overlapping)</h2>
 
 <Preview {data}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <Chart
       {data}
       x={['value', 'baseline']}
@@ -689,7 +689,7 @@
 <h2>Multiple (diverging)</h2>
 
 <Preview {data}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <Chart
       {data}
       x={['value', (d) => -d.baseline]}
@@ -702,7 +702,7 @@
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
-        <Bars x="value" rounded="right" strokeWidth={1} class="fill-primary" />
+        <Bars x="value" rounded-sm="right" strokeWidth={1} class="fill-primary" />
         <Bars x={(d) => -d.baseline} rounded="left" strokeWidth={1} class="fill-secondary" />
         <Rule x={0} />
 
@@ -731,7 +731,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         {data}
         x="value"
@@ -776,7 +776,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         {data}
         x="value"
@@ -817,7 +817,7 @@
 <h2>Grouped</h2>
 
 <Preview data={groupedData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <Chart
       data={groupedData}
       x="value"
@@ -874,7 +874,7 @@
 <h2>Stacked</h2>
 
 <Preview data={stackedData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackedData}
       x="values"
@@ -927,7 +927,7 @@
 <h2>Stacked (Percent)</h2>
 
 <Preview data={stackedPercentData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackedPercentData}
       x="values"
@@ -980,7 +980,7 @@
 <h2>Grouped and Stacked</h2>
 
 <Preview data={groupedStackedData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={groupedStackedData}
       x="values"
@@ -1047,7 +1047,7 @@
 </div>
 
 <Preview data={transitionData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <!-- Always use stackedData for extents for consistent scale -->
     <Chart
       data={transitionData}
@@ -1133,7 +1133,7 @@
 </div>
 
 <Preview data={transitionData}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <!-- Always use stackedData for extents for consistent scale -->
     <Chart
       data={transitionData}
@@ -1203,7 +1203,7 @@
 <h2>Click handler</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="value"
diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
index d23fb3a1a..47a0bf0d6 100644
--- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
@@ -19,7 +19,7 @@
 <h1>Examples</h1>
 
 <Preview data={data.usSenators}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={data.usSenators}
       x={(d) => d.date_of_birth.getFullYear()}
diff --git a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
index ac40e2f45..8276b39fb 100644
--- a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
@@ -117,7 +117,7 @@
         scale={colorScale}
         title="Est. Percent under 18"
         placement="top-left"
-        class="bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
+        class="bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
       />
 
       <Tooltip.Root let:data>
@@ -208,7 +208,7 @@
         scale={colorScale}
         title="Est. Percent under 18"
         placement="top-left"
-        class="bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
+        class="bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
       />
 
       <Tooltip.Root let:data>
diff --git a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
index 53ddeb669..a03514e50 100644
--- a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
@@ -15,7 +15,7 @@
 
 <!-- TODO: Should use xScale={scaleTime()} once `<Bar>` / createDimensionGetter() supports it -->
 <Preview data={data.appleTicker}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={data.appleTicker}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
index ee8d2a8bc..6f809948d 100644
--- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
@@ -91,7 +91,7 @@
         scale={colorScale}
         title="Population"
         tickFormat={(d) => format(d, 'metric', { maximumSignificantDigits: 2 })}
-        class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
+        class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
       />
 
       <Tooltip.Root let:data>
@@ -171,7 +171,7 @@
         title="Population"
         tickFormat={(d) => format(d, 'metric', { maximumSignificantDigits: 2 })}
         placement="top-left"
-        class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
+        class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-xs rounded-sm m-1"
       />
 
       <Tooltip.Root let:data>
diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
index 43a77dd16..c8276ef39 100644
--- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
@@ -29,7 +29,7 @@
 <h1>Examples</h1>
 
 <Preview data={randomData}>
-  <div class="h-[600px] p-4 border rounded overflow-hidden">
+  <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart data={randomData} let:width let:height>
       <Svg>
         <ForceSimulation
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
index d2adba4fe..5af3e0b9e 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -108,7 +108,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -134,7 +134,7 @@
 <h2>Rounded (top-only)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -160,7 +160,7 @@
 <h2>Tooltip and Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -196,7 +196,7 @@
 <h2>Tooltip and Bar Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded group">
+  <div class="h-[300px] p-4 border rounded-sm group">
     <Chart
       {data}
       x="date"
@@ -232,7 +232,7 @@
 <h2>Tooltip and Clipped Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded group">
+  <div class="h-[300px] p-4 border rounded-sm group">
     <Chart
       {data}
       x="date"
@@ -274,7 +274,7 @@
 <h2>Calculated value domain (positive)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={createDateSeries({ count: 30, min: 50, max: 100 })}
       x="date"
@@ -299,7 +299,7 @@
 <h2>Calculated value domain (negative)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={createDateSeries({ count: 30, min: -100, max: -50 })}
       x="date"
@@ -324,7 +324,7 @@
 <h2>Outside Labels (default)</h2>
 
 <Preview data={negativeData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeData}
       x="date"
@@ -353,7 +353,7 @@
 <h2>Inside Labels</h2>
 
 <Preview data={negativeData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={negativeData}
       x="date"
@@ -381,7 +381,7 @@
 <h2>Limit ticks (count)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -408,7 +408,7 @@
 <h2>Limit ticks (second scale)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -435,7 +435,7 @@
 <h2>Gradient</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -468,7 +468,7 @@
 <h2>Customize individual styles</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -502,7 +502,7 @@
 <h2>Highlight individual bar</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -536,7 +536,7 @@
 <h2>Highlight individual bar (line)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -567,7 +567,7 @@
 <h2>Average annotation Rule</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -606,7 +606,7 @@
 <h2>with grid on top</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -632,7 +632,7 @@
 <h2>with grid on top (mix-blend)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -658,7 +658,7 @@
 <h2>Multiple (overlapping)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -696,7 +696,7 @@
 <h2>Multiple (diverging)</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -709,7 +709,7 @@
       <Svg>
         <Axis placement="left" grid rule format={(d) => format(Math.abs(d), 'integer')} />
         <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
-        <Bars y="value" rounded="top" strokeWidth={1} class="fill-primary" />
+        <Bars y="value" rounded-sm="top" strokeWidth={1} class="fill-primary" />
         <Bars y={(d) => -d.baseline} rounded="bottom" strokeWidth={1} class="fill-secondary" />
         <Rule y={0} />
         <Highlight area />
@@ -737,7 +737,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         {data}
         x="date"
@@ -782,7 +782,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         {data}
         x="date"
@@ -827,7 +827,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         {data}
         x="date"
@@ -875,7 +875,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <Chart
         {data}
         x="date"
@@ -917,7 +917,7 @@
 <h2>Grouped</h2>
 
 <Preview data={groupedData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={groupedData}
       x="year"
@@ -974,7 +974,7 @@
 <h2>Stacked</h2>
 
 <Preview data={stackedData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackedData}
       x="year"
@@ -1027,7 +1027,7 @@
 <h2>Stacked (Percent)</h2>
 
 <Preview data={stackedPercentData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={stackedPercentData}
       x="year"
@@ -1080,7 +1080,7 @@
 <h2>Grouped and Stacked</h2>
 
 <Preview data={groupedStackedData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={groupedStackedData}
       x="year"
@@ -1147,7 +1147,7 @@
 </div>
 
 <Preview data={transitionData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={transitionData}
       x="year"
@@ -1232,7 +1232,7 @@
 </div>
 
 <Preview data={transitionData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={transitionData}
       x="year"
@@ -1301,7 +1301,7 @@
 <h2>Click handler</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
index aef309d23..aff45a5ed 100644
--- a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
@@ -21,7 +21,7 @@
 <h2>Common scale</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={dateSeries}
       x="date"
@@ -56,7 +56,7 @@
 <h2>Stacked Charts</h2>
 
 <Preview {data}>
-  <div class="h-[300px] grid grid-stack p-4 border rounded">
+  <div class="h-[300px] grid grid-stack p-4 border rounded-sm">
     <!-- First cahrt (bar), with different domain scale for volume -->
     <BarChart
       data={data.appleTicker}
diff --git a/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte b/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte
index cfbe91d4e..7a4827c42 100644
--- a/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Dagre/+page.svelte
@@ -110,7 +110,7 @@
 
   <Preview data={selectedGraph}>
     <div class="flex gap-2">
-      <div class="flex-1 h-[700px] p-4 border rounded overflow-hidden">
+      <div class="flex-1 h-[700px] p-4 border rounded-sm overflow-hidden">
         <Chart
           data={selectedGraph}
           transform={{
@@ -190,7 +190,7 @@
 
   <Preview data={data.basic}>
     <div class="flex gap-2">
-      <div class="flex-1 h-[500px] p-4 border rounded overflow-hidden">
+      <div class="flex-1 h-[500px] p-4 border rounded-sm overflow-hidden">
         <Chart
           data={data.basic}
           transform={{
@@ -272,7 +272,7 @@
 
   <Preview data={data.tcpState}>
     <div class="flex gap-2">
-      <div class="flex-1 h-[700px] p-4 border rounded overflow-hidden">
+      <div class="flex-1 h-[700px] p-4 border rounded-sm overflow-hidden">
         <Chart
           data={data.tcpState}
           transform={{
@@ -379,7 +379,7 @@
 
   <Preview data={data.softwareUserFlow}>
     <div class="flex gap-2">
-      <div class="flex-1 h-[700px] p-4 border rounded overflow-hidden">
+      <div class="flex-1 h-[700px] p-4 border rounded-sm overflow-hidden">
         <Chart
           data={data.softwareUserFlow}
           transform={{
@@ -485,7 +485,7 @@
 
   <Preview data={data.cluster}>
     <div class="flex gap-2">
-      <div class="flex-1 h-[500px] p-4 border rounded overflow-hidden">
+      <div class="flex-1 h-[500px] p-4 border rounded-sm overflow-hidden">
         <Chart
           data={data.cluster}
           transform={{
diff --git a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
index d3ae71c6e..6ddadd987 100644
--- a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
@@ -32,7 +32,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x={['startDate', 'endDate']}
@@ -76,7 +76,7 @@
 <h2>Colors</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x={['startDate', 'endDate']}
diff --git a/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte b/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte
index a6663a7cf..a8fcc6b84 100644
--- a/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte
@@ -15,7 +15,7 @@
 <h2>Single chart with remapping scale</h2>
 
 <Preview data={chartData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <!-- Remap efficiency to its equivalent value in sales - https://observablehq.com/@observablehq/plot-dual-axis -->
     <Chart
       data={chartData}
@@ -70,7 +70,7 @@
 <h2>Stacked Charts</h2>
 
 <Preview data={chartData}>
-  <div class="h-[300px] grid grid-stack p-4 border rounded">
+  <div class="h-[300px] grid grid-stack p-4 border rounded-sm">
     <!-- Sales chart-->
     <Chart
       data={chartData}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
index b488e5ad9..178e9e13e 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
@@ -24,7 +24,7 @@
 <h1>Examples</h1>
 
 <Preview data={data.miserables}>
-  <div class="h-[680px] p-4 border rounded">
+  <div class="h-[680px] p-4 border rounded-sm">
     <Chart data={nodes}>
       <Svg center>
         <ForceSimulation
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte
index 9ce2faaec..c9f104478 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceDrag/+page.svelte
@@ -50,7 +50,7 @@
 </Field>
 
 <Preview data={nodes}>
-  <div class="h-[600px] p-4 border rounded overflow-hidden">
+  <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart data={nodes} let:width let:height let:tooltip>
       <Svg>
         <ForceSimulation
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
index 19438c883..4b109f793 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
@@ -244,7 +244,7 @@
   </div>
 </div>
 <Preview data={data.miserables}>
-  <div class="h-[600px] p-4 border rounded overflow-hidden">
+  <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart data={nodes} let:width let:height let:tooltip>
       <Svg>
         <ForceSimulation
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
index 71ccdd8bb..bbc6b7dd6 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
@@ -44,7 +44,7 @@
 </div>
 
 <Preview data={dots}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dots}
       x="category"
diff --git a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
index 5bf98a343..658da65c8 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
@@ -23,7 +23,7 @@
 <h1>Examples</h1>
 
 <Preview data={nodes}>
-  <div class="h-[800px] p-4 border rounded overflow-hidden">
+  <div class="h-[800px] p-4 border rounded-sm overflow-hidden">
     <Chart data={nodes}>
       <Svg center>
         <ForceSimulation
diff --git a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
index e6e3dc4fb..387c19a71 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
@@ -81,7 +81,7 @@
 </div>
 
 <Preview {data}>
-  <div class="h-[500px] p-4 border rounded overflow-hidden">
+  <div class="h-[500px] p-4 border rounded-sm overflow-hidden">
     <Chart
       x="x"
       xDomain={[0, 1]}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
index 3ea86427e..632c214df 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
@@ -22,7 +22,7 @@
 <h1>Examples</h1>
 
 <Preview data={nodes}>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={nodes} let:tooltip>
       <Svg center>
         <ForceSimulation
diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
index e9e7752eb..1dd201ced 100644
--- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
@@ -54,7 +54,7 @@
 <h2>Vertical</h2>
 
 <Preview data={olympiansBins}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={olympiansBins}
       x="x0"
@@ -89,7 +89,7 @@
 <h2>Horizontal</h2>
 
 <Preview data={olympiansBins}>
-  <div class="p-4 border rounded" style:height="{16 + 24 + olympiansBins.length * 20}px">
+  <div class="p-4 border rounded-sm" style:height="{16 + 24 + olympiansBins.length * 20}px">
     <BarChart
       data={olympiansBins}
       x="length"
@@ -182,7 +182,7 @@
 <h2>Random distribution</h2>
 
 <Preview data={randomBins}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <BarChart
       data={randomBins}
       x="x0"
@@ -231,7 +231,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <BarChart
         {data}
         x="x0"
@@ -302,7 +302,7 @@
   </div>
 
   <Preview {data}>
-    <div class="h-[300px] p-4 border rounded">
+    <div class="h-[300px] p-4 border rounded-sm">
       <BarChart
         {data}
         x="x0"
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index d5a3187a6..c0fa18990 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -62,7 +62,7 @@
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -88,7 +88,7 @@
 <h2>Canvas</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -116,7 +116,7 @@
 <h2>With Tooltip and Highlight</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -151,7 +151,7 @@
 <h2>With Labels</h2>
 
 <Preview data={dateSeriesData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={dateSeriesData}
       x="date"
@@ -178,7 +178,7 @@
 <h2>Gradient encoding</h2>
 
 <Preview data={temperatureData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={temperatureData}
       x="date"
@@ -216,7 +216,7 @@
 <h2>Gradient threshold</h2>
 
 <Preview data={temperatureData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={temperatureData}
       x="date"
@@ -255,7 +255,7 @@
 <h2>Multiple series</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesFlatData}
       x="date"
@@ -310,7 +310,7 @@
 <h2>Multiple series (using overrides)</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={Array.from({ length: 90 }).map((_, i) => ({
         x: i,
@@ -351,7 +351,7 @@
 <h2>Multiple series (highlight on hover)</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesFlatData}
       x="date"
@@ -409,7 +409,7 @@
 <h2>Multiple series with labels</h2>
 
 <Preview data={multiSeriesFlatData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={multiSeriesFlatData}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
index 9945fca1f..4166b6665 100644
--- a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
@@ -70,7 +70,7 @@
 <h2>Time</h2>
 
 <Preview>
-  <div class="h-[100px] p-4 border rounded">
+  <div class="h-[100px] p-4 border rounded-sm">
     <LineChart
       data={timeData}
       x="key"
@@ -87,7 +87,7 @@
 <h2>Frequency</h2>
 
 <Preview>
-  <div class="h-[150px] p-4 border rounded">
+  <div class="h-[150px] p-4 border rounded-sm">
     <BarChart
       data={frequencyData}
       x="key"
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
index 95603369a..a37dafb34 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
@@ -81,14 +81,14 @@
 
 <Preview data={complexHierarchy}>
   <Breadcrumb items={selected?.ancestors().reverse() ?? []}>
-    <Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded">
+    <Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded-sm">
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
         <div class="text-xs text-surface-content/50">{format(item.value ?? 0, 'integer')}</div>
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[600px] p-4 border rounded overflow-hidden">
+  <div class="h-[600px] p-4 border rounded-sm overflow-hidden">
     <Chart
       data={complexHierarchy}
       transform={{
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
index f7ebc1544..28752307b 100644
--- a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
@@ -138,7 +138,7 @@
       let:item
       on:click={() => (selectedHorizontal = item)}
       base
-      class="px-2 py-1 rounded"
+      class="px-2 py-1 rounded-sm"
     >
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
@@ -146,7 +146,7 @@
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={horizontalHierarchy} let:width>
       <Svg>
         <Bounds
@@ -224,7 +224,7 @@
       let:item
       on:click={() => (selectedVertical = item)}
       base
-      class="px-2 py-1 rounded"
+      class="px-2 py-1 rounded-sm"
     >
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
@@ -232,7 +232,7 @@
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={verticalHierarchy} let:height>
       <Svg>
         <Bounds
@@ -316,7 +316,7 @@
       let:item
       on:click={() => (selectedCarNode = item)}
       base
-      class="px-2 py-1 rounded"
+      class="px-2 py-1 rounded-sm"
     >
       <div class="text-left">
         <div class="text-sm">{item.data[0] ?? 'Overall'}</div>
@@ -324,7 +324,7 @@
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={groupedHierarchy}>
       <Svg>
         <Bounds
diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
index 347c6918b..23b4799ef 100644
--- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
@@ -19,7 +19,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <ScatterChart
       {data}
       x={(d) => getWeek(d.date)}
diff --git a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
index 9e237ef88..289aba346 100644
--- a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
@@ -40,7 +40,7 @@
 </div>
 
 <Preview data={pitchData}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       data={pitchData}
       x="name"
@@ -68,7 +68,7 @@
 <h2>Line with Areas</h2>
 
 <Preview data={data.sfoTemperatures}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <Chart
       data={data.sfoTemperatures}
       x="date"
@@ -106,7 +106,7 @@
 <h2>Multi-year Lines</h2>
 
 <Preview data={data.dailyTemperatures}>
-  <div class="h-[500px] p-4 border rounded">
+  <div class="h-[500px] p-4 border rounded-sm">
     <Chart
       data={data.dailyTemperatures}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
index fc640e299..ac74c3399 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
@@ -75,7 +75,7 @@
 <h2>Simple</h2>
 
 <Preview data={data.simple}>
-  <div class="h-[400px] p-4 border rounded">
+  <div class="h-[400px] p-4 border rounded-sm">
     <Chart data={data.simple}>
       <Svg>
         <Sankey nodeId={(d) => d.id} let:links let:nodes>
@@ -105,7 +105,7 @@
 <h2>Tooltip</h2>
 
 <Preview data={structuredClone(data.greenhouse)}>
-  <div class="h-[800px] p-4 border rounded">
+  <div class="h-[800px] p-4 border rounded-sm">
     <Chart data={structuredClone(data.greenhouse)} let:tooltip>
       <Svg>
         <Sankey nodeId={(d) => d.name} nodeWidth={8} let:links let:nodes>
@@ -186,7 +186,7 @@
 <h2>Node select</h2>
 
 <Preview data={selectedNode ? graphFromNode(selectedNode) : data.greenhouse}>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={selectedNode ? graphFromNode(selectedNode) : data.greenhouse}>
       <Svg>
         <Sankey nodeId={(d) => d.name} nodeWidth={8} let:links let:nodes>
@@ -238,7 +238,7 @@
 <SankeyControls bind:nodeAlign bind:nodeColorBy bind:linkColorBy bind:nodePadding bind:nodeWidth />
 
 <Preview data={data.complex}>
-  <div class="h-[800px] p-4 border rounded">
+  <div class="h-[800px] p-4 border rounded-sm">
     <Chart data={data.complex} padding={{ right: 164 }} let:tooltip>
       <Svg>
         <Sankey
@@ -361,7 +361,7 @@
 <SankeyControls bind:nodeAlign bind:nodeColorBy bind:linkColorBy bind:nodePadding bind:nodeWidth />
 
 <Preview data={hierarchyGraph}>
-  <div class="h-[2000px] p-4 border rounded">
+  <div class="h-[2000px] p-4 border rounded-sm">
     <Chart data={hierarchyGraph} padding={{ right: 100 }}>
       <Svg>
         <Sankey
diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
index 70d27248f..451b160cc 100644
--- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
@@ -21,7 +21,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -47,7 +47,7 @@
 <h2>With Tooltip and Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -82,7 +82,7 @@
 <h2>With Labels</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
@@ -111,7 +111,7 @@
 <h3>red (0-49), yellow (50-89), green (90+)</h3>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <Chart
       {data}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
index b6fc5d31c..6a72c04f9 100644
--- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
@@ -64,14 +64,14 @@
 
 <Preview data={complexHierarchy}>
   <Breadcrumb items={selected?.ancestors().reverse() ?? []}>
-    <Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded">
+    <Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded-sm">
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
         <div class="text-xs text-surface-content/50">{format(item.value ?? 0, 'integer')}</div>
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={complexHierarchy} let:tooltip>
       <Svg center>
         <Bounds
diff --git a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
index 53b59531b..9123cf939 100644
--- a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
@@ -26,7 +26,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       {data}
       x="date"
@@ -53,7 +53,7 @@
 <h2>With Tooltip and Highlight</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       {data}
       x="date"
@@ -93,7 +93,7 @@
 <h2>With Labels</h2>
 
 <Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart
       {data}
       x="date"
diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
index b0ebe1890..b5cb5d87e 100644
--- a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
@@ -88,7 +88,7 @@
 <h2>Basic</h2>
 
 <Preview data={complexDataHierarchy}>
-  <div class="h-[800px] p-4 border rounded overflow-hidden relative">
+  <div class="h-[800px] p-4 border rounded-sm overflow-hidden relative">
     <Chart
       data={complexDataHierarchy}
       padding={{ top: 24, left: nodeWidth / 2, right: nodeWidth / 2 }}
@@ -166,7 +166,7 @@
 <h2>Html nodes</h2>
 
 <Preview data={complexDataHierarchy}>
-  <div class="h-[800px] p-4 border rounded overflow-hidden relative">
+  <div class="h-[800px] p-4 border rounded-sm overflow-hidden relative">
     <Chart
       data={complexDataHierarchy}
       padding={{ top: 24, left: nodeWidth / 2, right: nodeWidth / 2 }}
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index 9faade119..0c845f574 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -150,7 +150,7 @@
       let:item
       on:click={() => (selectedNested = item)}
       base
-      class="px-2 py-1 rounded"
+      class="px-2 py-1 rounded-sm"
     >
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
@@ -158,7 +158,7 @@
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[800px] p-4 border rounded">
+  <div class="h-[800px] p-4 border rounded-sm">
     <Chart data={complexDataHierarchy.copy()} let:tooltip>
       <Svg>
         <Bounds
@@ -297,7 +297,7 @@
       let:item
       on:click={() => (selectedCarNode = item)}
       base
-      class="px-2 py-1 rounded"
+      class="px-2 py-1 rounded-sm"
     >
       <div class="text-left">
         <div class="text-sm">{item.data[0] ?? 'Overall'}</div>
@@ -305,7 +305,7 @@
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[800px] p-4 border rounded">
+  <div class="h-[800px] p-4 border rounded-sm">
     <Chart data={groupedHierarchy}>
       <Svg>
         <Treemap
@@ -415,7 +415,7 @@
       let:item
       on:click={() => (selectedZoomable = item)}
       base
-      class="px-2 py-1 rounded"
+      class="px-2 py-1 rounded-sm"
     >
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
@@ -423,7 +423,7 @@
       </div>
     </Button>
   </Breadcrumb>
-  <div class="h-[600px] p-4 border rounded">
+  <div class="h-[600px] p-4 border rounded-sm">
     <Chart data={complexDataHierarchy.copy()}>
       <Svg>
         <Bounds
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
index af3de4fb8..df9926fed 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
@@ -47,7 +47,7 @@
     {#key chartProps}
       {#if example === 'single'}
         <Preview data={[data.chartData.date[0], data.chartData.cpu[0]]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={zip(data.chartData.date, data.chartData.cpu)}
               x={(d) => d[0]}
@@ -68,7 +68,7 @@
             tcp: data.chartData.tcp[0],
           }}
         >
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               x={(d) => d[0]}
               y={(d) => d[1]}
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
index 0f331b6fc..8dfae93a8 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
@@ -53,7 +53,7 @@
     {#key chartProps}
       {#if example === 'single'}
         <Preview data={chartData.cpu[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={chartData.cpu}
               x={(d) => d[0]}
@@ -67,7 +67,7 @@
         </Preview>
       {:else if example === 'series'}
         <Preview data={{ cpu: chartData.cpu[0], ram: chartData.ram[0], tcp: chartData.tcp[0] }}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               x={(d) => d[0]}
               y={(d) => d[1]}
diff --git a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
index 540aefcab..e65455c8e 100644
--- a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
@@ -46,7 +46,7 @@
     {#key chartProps}
       {#if example === 'single'}
         <Preview data={data.chartData.cpu[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={data.chartData.cpu}
               x="x"
@@ -60,7 +60,7 @@
         </Preview>
       {:else if example === 'series'}
         <Preview data={data.chartData.cpu[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               x="x"
               y="y"
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
index b5b1bae25..1f0f0bf5a 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
@@ -46,7 +46,7 @@
     {#key chartProps}
       {#if example === 'single'}
         <Preview data={data.chartData[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={data.chartData}
               x="epoch"
@@ -60,7 +60,7 @@
         </Preview>
       {:else if example === 'series'}
         <Preview data={data.chartData[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={data.chartData}
               x="epoch"
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
index c1c553ea2..ef3dc48dc 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
@@ -57,7 +57,7 @@
     {#key chartProps}
       {#if example === 'single'}
         <Preview data={chartData[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={chartData}
               x="date"
@@ -71,7 +71,7 @@
         </Preview>
       {:else if example === 'series'}
         <Preview data={chartData[0]}>
-          <div class="h-[500px] p-4 border rounded">
+          <div class="h-[500px] p-4 border rounded-sm">
             <LineChart
               data={chartData}
               x="date"
diff --git a/packages/layerchart/src/routes/docs/utils/pivot/+page.svelte b/packages/layerchart/src/routes/docs/utils/pivot/+page.svelte
index af6761251..20b399d60 100644
--- a/packages/layerchart/src/routes/docs/utils/pivot/+page.svelte
+++ b/packages/layerchart/src/routes/docs/utils/pivot/+page.svelte
@@ -15,13 +15,13 @@
 
 <h2>Before</h2>
 
-<Json value={wideData} class="rounded" />
+<Json value={wideData} class="rounded-sm" />
 
 <h2>After</h2>
 
 <Json
   value={pivotLonger(wideData, ['apples', 'bananas', 'cherries', 'grapes'], 'fruit', 'value')}
-  class="rounded"
+  class="rounded-sm"
 />
 
 <h1>pivotWider</h1>
@@ -30,8 +30,8 @@
 
 <h2>Before</h2>
 
-<Json value={longData} class="rounded" />
+<Json value={longData} class="rounded-sm" />
 
 <h2>After</h2>
 
-<Json value={pivotWider(longData, 'year', 'fruit', 'value')} class="rounded" />
+<Json value={pivotWider(longData, 'year', 'fruit', 'value')} class="rounded-sm" />
diff --git a/packages/layerchart/src/routes/getting-started/+page.svelte b/packages/layerchart/src/routes/getting-started/+page.svelte
index c40bedaec..258b4f359 100644
--- a/packages/layerchart/src/routes/getting-started/+page.svelte
+++ b/packages/layerchart/src/routes/getting-started/+page.svelte
@@ -7,7 +7,7 @@
   let selectedTab = 'svelte-ux';
 </script>
 
-<div class="prose max-w-none bg-surface-100 rounded border p-4 mt-4 m-2">
+<div class="prose max-w-none bg-surface-100 rounded-sm border p-4 mt-4 m-2">
   <h1>Getting started</h1>
 
   <h2>Installation</h2>
diff --git a/packages/layerchart/tailwind.config.cjs b/packages/layerchart/tailwind.config.cjs
deleted file mode 100644
index 5c0d2de88..000000000
--- a/packages/layerchart/tailwind.config.cjs
+++ /dev/null
@@ -1,67 +0,0 @@
-const colors = require('tailwindcss/colors');
-const plugin = require('tailwindcss/plugin');
-
-const layerstack = require('@layerstack/tailwind/plugin');
-
-module.exports = {
-  content: ['./src/**/*.{html,svelte,md}', './node_modules/svelte-ux/**/*.{svelte,js,md}'],
-  ux: {
-    themes: require('./themes.json'),
-    // themes: {
-    //   light: {
-    //     primary: colors['blue']['500'],
-    //     'primary-content': 'white',
-    //     secondary: colors['cyan']['300'],
-    //     'surface-100': 'white',
-    //     'surface-200': colors['gray']['100'],
-    //     'surface-300': colors['gray']['300'],
-    //     'surface-content': colors['gray']['900'],
-    //   },
-    // },
-  },
-  theme: {
-    extend: {
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            // Reduce font size
-            h1: {
-              fontSize: theme('fontSize.2xl')[0],
-              fontWeight: theme('fontWeight.extrabold'),
-            },
-            h2: {
-              fontSize: theme('fontSize.xl')[0],
-              fontWeight: theme('fontWeight.bold'),
-              marginTop: theme('spacing.3'),
-            },
-            h3: {
-              fontSize: theme('fontSize.lg')[0],
-              fontWeight: theme('fontWeight.semibold'),
-            },
-          },
-        },
-      }),
-    },
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-    layerstack,
-    plugin(function ({ addComponents }) {
-      // Consider moving to tailwind plugin
-      addComponents({
-        '.grid-cols-xs': {
-          '@apply grid-cols-[repeat(auto-fill,minmax(200px,1fr))]': {},
-        },
-        '.grid-cols-sm': {
-          '@apply grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]': {},
-        },
-        '.grid-cols-md': {
-          '@apply grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(400px,1fr))]': {},
-        },
-        '.grid-cols-lg': {
-          '@apply grid-cols-1 md:grid-cols-[repeat(auto-fill,minmax(600px,1fr))]': {},
-        },
-      });
-    }),
-  ],
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a53799990..ab494446b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,17 +27,17 @@ importers:
         specifier: ^1.1.4
         version: 1.1.4
       '@layerstack/svelte-actions':
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: 1.0.1-next.0
+        version: 1.0.1-next.0
       '@layerstack/svelte-stores':
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: 1.0.2-next.0
+        version: 1.0.2-next.0
       '@layerstack/tailwind':
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: 2.0.0-next.1
+        version: 2.0.0-next.1
       '@layerstack/utils':
-        specifier: ^1.0.0
-        version: 1.0.0
+        specifier: 1.1.0-next.0
+        version: 1.1.0-next.0
       d3-array:
         specifier: ^3.2.4
         version: 3.2.4
@@ -122,22 +122,25 @@ importers:
         version: 3.0.5(rollup@2.79.2)
       '@sveltejs/adapter-cloudflare':
         specifier: ^4.9.0
-        version: 4.9.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(wrangler@3.110.0(@cloudflare/workers-types@4.20250224.0))
+        version: 4.9.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(wrangler@3.110.0(@cloudflare/workers-types@4.20250224.0))
       '@sveltejs/kit':
         specifier: ^2.17.3
-        version: 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+        version: 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       '@sveltejs/package':
         specifier: ^2.3.10
         version: 2.3.10(svelte@5.20.4)(typescript@5.7.3)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
-        version: 5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+        version: 5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.2.0
         version: 1.2.0
+      '@tailwindcss/postcss':
+        specifier: ^4.0.12
+        version: 4.0.12
       '@tailwindcss/typography':
         specifier: ^0.5.16
-        version: 0.5.16(tailwindcss@3.4.16)
+        version: 0.5.16(tailwindcss@4.0.12)
       '@types/d3-array':
         specifier: ^3.2.1
         version: 3.2.1
@@ -209,7 +212,7 @@ importers:
         version: 1.0.5
       autoprefixer:
         specifier: ^10.4.20
-        version: 10.4.20(postcss@8.4.49)
+        version: 10.4.20(postcss@8.5.3)
       marked:
         specifier: ^15.0.7
         version: 15.0.7
@@ -250,14 +253,14 @@ importers:
         specifier: ^2.2.0
         version: 2.2.0(svelte@5.20.4)
       svelte-ux:
-        specifier: ^1.0.0
-        version: 1.0.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@5.20.4)
+        specifier: 2.0.0-next.1
+        version: 2.0.0-next.1(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0))(postcss@8.5.3)(svelte@5.20.4)
       svelte2tsx:
         specifier: ^0.7.34
         version: 0.7.34(svelte@5.20.4)(typescript@5.7.3)
       tailwindcss:
-        specifier: ^3.4.16
-        version: 3.4.16
+        specifier: ^4.0.12
+        version: 4.0.12
       topojson-simplify:
         specifier: ^3.0.3
         version: 3.0.3
@@ -275,10 +278,10 @@ importers:
         version: 3.0.1
       vite:
         specifier: ^6.2.0
-        version: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+        version: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
       vitest:
         specifier: ^3.0.7
-        version: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+        version: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
 
 packages:
 
@@ -995,20 +998,20 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
-  '@layerstack/svelte-actions@1.0.0':
-    resolution: {integrity: sha512-cnVxMbcc+xYta9hwHnLja4a7bR7cfX/QW9jDY4ZCI8RIt+3lKNRE+u2XzWoGp4Qsx7A0/nGUIiLWpDBgO1ihsQ==}
+  '@layerstack/svelte-actions@1.0.1-next.0':
+    resolution: {integrity: sha512-5wbVZCvjDmHQACcYrUQbhT6FI9aCQX+zl6tidZbnYBCqd0TV2ORk7NebCc9G8uQCiLSGYLelfVLRuvQLsWzDzw==}
 
-  '@layerstack/svelte-stores@1.0.0':
-    resolution: {integrity: sha512-SPH6mjEtHLRBMFYrGUNpGsNsCAGRClYZ9nGQHa1OZdLgziBys/5+7Z3tpJ0K6kODR1ZM1bv16P9n1IfRyEjzpg==}
+  '@layerstack/svelte-stores@1.0.2-next.0':
+    resolution: {integrity: sha512-YynMtI8AkReKw10ZzzG9jr7a9usKEHZR8SFvDDxV+D/bZS0iWE0/fxfRZN6FE44qcsEZ68gfEfEGKvEHjH/8aA==}
 
-  '@layerstack/svelte-table@1.0.0':
-    resolution: {integrity: sha512-Q3nZYYpuGF45gmiGmBQ6NiIY5ip6nTJZR4Xx16A2I9Wkr9qEWMj4wC/HIRmNTMLOIc82EkDnDoJs2GQscKEh8Q==}
+  '@layerstack/svelte-table@1.0.1-next.0':
+    resolution: {integrity: sha512-ykoibfHRfMz7LPXy8+xOvF8p793wvh7mcPwaS+QxphG3j5oGqMAkRNyP/UUubZnmPS/ye5T9Xp5IB1hBaWNrPw==}
 
-  '@layerstack/tailwind@1.0.0':
-    resolution: {integrity: sha512-xV2M6KRNBmbhV9XAvTHiw/BJSTIh5eby+Hj1iXXkMr88fObZHn4s1G2BILEDbdwjZl6Ivu1Du0gO9Vz3lzflUA==}
+  '@layerstack/tailwind@2.0.0-next.1':
+    resolution: {integrity: sha512-gaO8RNvJCeqdQvZfeWnkqKKbT9CdOFxAOnqvM9pDF1IHymNOMbAjh82RB3RwRF6RHSGbITvxuqb2TmJcMY+gOw==}
 
-  '@layerstack/utils@1.0.0':
-    resolution: {integrity: sha512-kIH8lo4MEzPGtdxQRacy8RsSVhMQwe62ckuev62xQDE5QcUJ4wB9EMaRWaQK8CfEOpUERGPgkMPMbMqPhdp0gw==}
+  '@layerstack/utils@1.1.0-next.0':
+    resolution: {integrity: sha512-xDUHUhI8CALTYvpTlJ9P0Eo8qKIoga9w1px6GFY7aSccKjLStOFjdCFCyLe0L/EUHDODpcP1o8Vl/HaBiHP6hg==}
 
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -1210,6 +1213,82 @@ packages:
     resolution: {integrity: sha512-08eKiDAjj4zLug1taXSIJ0kGL5cawjVCyJkBb6EWSg5fEPX6L+Wtr0CH2If4j5KYylz85iaZiFlUItvgJvll5g==}
     engines: {node: ^14.13.1 || ^16.0.0 || >=18}
 
+  '@tailwindcss/node@4.0.12':
+    resolution: {integrity: sha512-a6J11K1Ztdln9OrGfoM75/hChYPcHYGNYimqciMrvKXRmmPaS8XZTHhdvb5a3glz4Kd4ZxE1MnuFE2c0fGGmtg==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.12':
+    resolution: {integrity: sha512-dAXCaemu3mHLXcA5GwGlQynX8n7tTdvn5i1zAxRvZ5iC9fWLl5bGnjZnzrQqT7ttxCvRwdVf3IHUnMVdDBO/kQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.12':
+    resolution: {integrity: sha512-vPNI+TpJQ7sizselDXIJdYkx9Cu6JBdtmRWujw9pVIxW8uz3O2PjgGGzL/7A0sXI8XDjSyRChrUnEW9rQygmJQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.12':
+    resolution: {integrity: sha512-RL/9jM41Fdq4Efr35C5wgLx98BirnrfwuD+zgMFK6Ir68HeOSqBhW9jsEeC7Y/JcGyPd3MEoJVIU4fAb7YLg7A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.12':
+    resolution: {integrity: sha512-7WzWiax+LguJcMEimY0Q4sBLlFXu1tYxVka3+G2M9KmU/3m84J3jAIV4KZWnockbHsbb2XgrEjtlJKVwHQCoRA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.12':
+    resolution: {integrity: sha512-X9LRC7jjE1QlfIaBbXjY0PGeQP87lz5mEfLSVs2J1yRc9PSg1tEPS9NBqY4BU9v5toZgJgzKeaNltORyTs22TQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.12':
+    resolution: {integrity: sha512-i24IFNq2402zfDdoWKypXz0ZNS2G4NKaA82tgBlE2OhHIE+4mg2JDb5wVfyP6R+MCm5grgXvurcIcKWvo44QiQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.12':
+    resolution: {integrity: sha512-LmOdshJBfAGIBG0DdBWhI0n5LTMurnGGJCHcsm9F//ISfsHtCnnYIKgYQui5oOz1SUCkqsMGfkAzWyNKZqbGNw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.12':
+    resolution: {integrity: sha512-OSK667qZRH30ep8RiHbZDQfqkXjnzKxdn0oRwWzgCO8CoTxV+MvIkd0BWdQbYtYuM1wrakARV/Hwp0eA/qzdbw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.12':
+    resolution: {integrity: sha512-uylhWq6OWQ8krV8Jk+v0H/3AZKJW6xYMgNMyNnUbbYXWi7hIVdxRKNUB5UvrlC3RxtgsK5EAV2i1CWTRsNcAnA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.12':
+    resolution: {integrity: sha512-XDLnhMoXZEEOir1LK43/gHHwK84V1GlV8+pAncUAIN2wloeD+nNciI9WRIY/BeFTqES22DhTIGoilSO39xDb2g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.12':
+    resolution: {integrity: sha512-I/BbjCLpKDQucvtn6rFuYLst1nfFwSMYyPzkx/095RE+tuzk5+fwXuzQh7T3fIBTcbn82qH/sFka7yPGA50tLw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.12':
+    resolution: {integrity: sha512-DWb+myvJB9xJwelwT9GHaMc1qJj6MDXRDR0CS+T8IdkejAtu8ctJAgV4r1drQJLPeS7mNwq2UHW2GWrudTf63A==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.12':
+    resolution: {integrity: sha512-r59Sdr8djCW4dL3kvc4aWU8PHdUAVM3O3te2nbYzXsWwKLlHPCuUoZAc9FafXb/YyNDZOMI7sTbKTKFmwOrMjw==}
+
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
@@ -1389,16 +1468,6 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -1438,10 +1507,6 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   blake3-wasm@2.1.5:
     resolution: {integrity: sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g==}
 
@@ -1465,10 +1530,6 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   caniuse-lite@1.0.30001651:
     resolution: {integrity: sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==}
 
@@ -1483,10 +1544,6 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
@@ -1519,10 +1576,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -1719,16 +1772,10 @@ packages:
   devalue@5.1.1:
     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   dotenv@16.4.5:
     resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
     engines: {node: '>=12'}
@@ -1745,6 +1792,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -1813,10 +1864,6 @@ packages:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
 
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
-    engines: {node: '>=8.6.0'}
-
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -1879,17 +1926,9 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-
   glob@11.0.0:
     resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
     engines: {node: 20 || >=22}
@@ -1944,18 +1983,10 @@ packages:
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
   is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
 
-  is-core-module@2.16.0:
-    resolution: {integrity: sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==}
-    engines: {node: '>= 0.4'}
-
   is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
@@ -1993,17 +2024,10 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
-
   jackspeak@4.0.1:
     resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==}
     engines: {node: 20 || >=22}
 
-  jiti@1.21.6:
-    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
-    hasBin: true
-
   jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
@@ -2025,13 +2049,74 @@ packages:
       svelte: 3 - 5 || >=5.0.0-next.120
       typescript: ^5.0.2
 
+  lightningcss-darwin-arm64@1.29.2:
+    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.2:
+    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.2:
+    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.2:
+    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.2:
+    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -2060,9 +2145,6 @@ packages:
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-
   lru-cache@11.0.0:
     resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
     engines: {node: 20 || >=22}
@@ -2108,10 +2190,6 @@ packages:
     resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
     engines: {node: 20 || >=22}
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -2138,9 +2216,6 @@ packages:
     resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
     hasBin: true
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2161,22 +2236,10 @@ packages:
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
   normalize-range@0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   ohash@1.1.4:
     resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
 
@@ -2210,9 +2273,6 @@ packages:
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-
   package-manager-detector@0.2.9:
     resolution: {integrity: sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==}
 
@@ -2230,10 +2290,6 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-
   path-scurry@2.0.0:
     resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
     engines: {node: 20 || >=22}
@@ -2275,45 +2331,13 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -2332,27 +2356,13 @@ packages:
       yaml:
         optional: true
 
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.49:
-    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2400,17 +2410,10 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   readdirp@4.1.1:
     resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==}
     engines: {node: '>= 14.18.0'}
@@ -2438,10 +2441,6 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@1.22.9:
-    resolution: {integrity: sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==}
-    hasBin: true
-
   reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -2600,11 +2599,6 @@ packages:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -2663,8 +2657,8 @@ packages:
       typescript:
         optional: true
 
-  svelte-ux@1.0.0:
-    resolution: {integrity: sha512-9ANwk4C3L1dTYT2bx2AkXlq7eXcclGp/Myvo4CkcZNrG1GOItIemkYU5MHkAg3BT+D4jSPsWBiup2j1Hq4FAfA==}
+  svelte-ux@2.0.0-next.1:
+    resolution: {integrity: sha512-HRB0L0ZZ/6Eqr5MVk6T7I/PrrG3KmHupaK/GCSDVsShe/kShJrD+9+qpCJ61M6WY7tl8DmI5OuxM+scIwYvY5w==}
     peerDependencies:
       svelte: ^3.56.0 || ^4.0.0 || ^5.0.0
 
@@ -2682,13 +2676,15 @@ packages:
     resolution: {integrity: sha512-2Mo/AfObaw9zuD0u1JJ7sOVzRCGcpETEyDkLbtkcctWpCMCIyT0iz83xD8JT29SR7O4SgswuPRIDYReYF/607A==}
     engines: {node: '>=18'}
 
-  tailwind-merge@2.6.0:
-    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+  tailwind-merge@3.0.2:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
 
-  tailwindcss@3.4.16:
-    resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.12:
+    resolution: {integrity: sha512-bT0hJo91FtncsAMSsMzUkoo/iEU0Xs5xgFgVC9XmdM9bw5MhZuQFjPNl6wxAE0SiQF/YTZJa+PndGWYSDtuxAg==}
+
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
 
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
@@ -2698,13 +2694,6 @@ packages:
     resolution: {integrity: sha512-hJnc6Qg3dWoOMkqP53F0dzRIgtmsAge09kxUIqGrEUS4qr5rWLckGYaQAVr+opBrIMRErGgy6f5aPnyPpyGRfg==}
     deprecated: no longer maintained
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -2754,9 +2743,6 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2951,11 +2937,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  yaml@2.6.1:
-    resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yaml@2.7.0:
     resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
     engines: {node: '>= 14'}
@@ -3521,46 +3502,44 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@layerstack/svelte-actions@1.0.0':
+  '@layerstack/svelte-actions@1.0.1-next.0':
     dependencies:
       '@floating-ui/dom': 1.6.13
-      '@layerstack/utils': 1.0.0
+      '@layerstack/utils': 1.1.0-next.0
       d3-array: 3.2.4
       d3-scale: 4.0.2
       date-fns: 4.1.0
       lodash-es: 4.17.21
 
-  '@layerstack/svelte-stores@1.0.0':
+  '@layerstack/svelte-stores@1.0.2-next.0':
     dependencies:
-      '@layerstack/utils': 1.0.0
+      '@layerstack/utils': 1.1.0-next.0
       d3-array: 3.2.4
       date-fns: 4.1.0
       immer: 10.1.1
       lodash-es: 4.17.21
       zod: 3.24.2
 
-  '@layerstack/svelte-table@1.0.0':
+  '@layerstack/svelte-table@1.0.1-next.0':
     dependencies:
-      '@layerstack/svelte-actions': 1.0.0
-      '@layerstack/utils': 1.0.0
+      '@layerstack/svelte-actions': 1.0.1-next.0
+      '@layerstack/utils': 1.1.0-next.0
       d3-array: 3.2.4
       date-fns: 4.1.0
       lodash-es: 4.17.21
 
-  '@layerstack/tailwind@1.0.0':
+  '@layerstack/tailwind@2.0.0-next.1':
     dependencies:
-      '@layerstack/utils': 1.0.0
+      '@layerstack/utils': 1.1.0-next.0
       clsx: 2.1.1
       culori: 4.0.1
       d3-array: 3.2.4
       date-fns: 4.1.0
       lodash-es: 4.17.21
-      tailwind-merge: 2.6.0
-      tailwindcss: 3.4.16
-    transitivePeerDependencies:
-      - ts-node
+      tailwind-merge: 3.0.2
+      tailwindcss: 4.0.12
 
-  '@layerstack/utils@1.0.0':
+  '@layerstack/utils@1.1.0-next.0':
     dependencies:
       d3-array: 3.2.4
       date-fns: 4.1.0
@@ -3700,17 +3679,17 @@ snapshots:
 
   '@rrweb/types@2.0.0-alpha.18': {}
 
-  '@sveltejs/adapter-cloudflare@4.9.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(wrangler@3.110.0(@cloudflare/workers-types@4.20250224.0))':
+  '@sveltejs/adapter-cloudflare@4.9.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(wrangler@3.110.0(@cloudflare/workers-types@4.20250224.0))':
     dependencies:
       '@cloudflare/workers-types': 4.20250204.0
-      '@sveltejs/kit': 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+      '@sveltejs/kit': 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       esbuild: 0.24.2
       worktop: 0.8.0-next.18
       wrangler: 3.110.0(@cloudflare/workers-types@4.20250224.0)
 
-  '@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))':
+  '@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3723,7 +3702,7 @@ snapshots:
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
       svelte: 5.20.4
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
 
   '@sveltejs/package@2.3.10(svelte@5.20.4)(typescript@5.7.3)':
     dependencies:
@@ -3736,25 +3715,25 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       debug: 4.4.0
       svelte: 5.20.4
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)))(svelte@5.20.4)(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
       svelte: 5.20.4
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
-      vitefu: 1.0.5(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
+      vitefu: 1.0.5(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -3765,13 +3744,75 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.16)':
+  '@tailwindcss/node@4.0.12':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.12
+
+  '@tailwindcss/oxide-android-arm64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.12':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.12':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.12
+      '@tailwindcss/oxide-darwin-arm64': 4.0.12
+      '@tailwindcss/oxide-darwin-x64': 4.0.12
+      '@tailwindcss/oxide-freebsd-x64': 4.0.12
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.12
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.12
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.12
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.12
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.12
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.12
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.12
+
+  '@tailwindcss/postcss@4.0.12':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.12
+      '@tailwindcss/oxide': 4.0.12
+      lightningcss: 1.29.2
+      postcss: 8.5.3
+      tailwindcss: 4.0.12
+
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.12)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.16
+      tailwindcss: 4.0.12
 
   '@types/cookie@0.6.0': {}
 
@@ -3887,13 +3928,13 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))':
+  '@vitest/mocker@3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.7
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
 
   '@vitest/pretty-format@3.0.7':
     dependencies:
@@ -3940,15 +3981,6 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  any-promise@1.3.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
-  arg@5.0.2: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -3965,14 +3997,14 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  autoprefixer@10.4.20(postcss@8.4.49):
+  autoprefixer@10.4.20(postcss@8.5.3):
     dependencies:
       browserslist: 4.23.3
       caniuse-lite: 1.0.30001651
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.1
-      postcss: 8.4.49
+      postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
   axobject-query@4.1.0: {}
@@ -3983,8 +4015,6 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
-  binary-extensions@2.3.0: {}
-
   blake3-wasm@2.1.5: {}
 
   brace-expansion@2.0.1:
@@ -4006,8 +4036,6 @@ snapshots:
 
   cac@6.7.14: {}
 
-  camelcase-css@2.0.1: {}
-
   caniuse-lite@1.0.30001651: {}
 
   chai@5.2.0:
@@ -4022,18 +4050,6 @@ snapshots:
 
   check-error@2.1.1: {}
 
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.1
@@ -4070,8 +4086,6 @@ snapshots:
 
   commander@2.20.3: {}
 
-  commander@4.1.1: {}
-
   commander@7.2.0: {}
 
   comment-parser@1.4.1: {}
@@ -4235,19 +4249,14 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
-  detect-libc@2.0.3:
-    optional: true
+  detect-libc@2.0.3: {}
 
   devalue@5.1.1: {}
 
-  didyoumean@1.2.2: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   dotenv@16.4.5: {}
 
   eastasianwidth@0.2.0: {}
@@ -4258,6 +4267,11 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  enhanced-resolve@5.18.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -4380,14 +4394,6 @@ snapshots:
       iconv-lite: 0.4.24
       tmp: 0.0.33
 
-  fast-glob@3.3.2:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4454,21 +4460,8 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob-to-regexp@0.4.1: {}
 
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.0
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
-
   glob@11.0.0:
     dependencies:
       foreground-child: 3.3.0
@@ -4524,18 +4517,10 @@ snapshots:
   is-arrayish@0.3.2:
     optional: true
 
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
   is-builtin-module@3.2.1:
     dependencies:
       builtin-modules: 3.3.0
 
-  is-core-module@2.16.0:
-    dependencies:
-      hasown: 2.0.2
-
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
@@ -4564,22 +4549,13 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
   jackspeak@4.0.1:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@1.21.6: {}
-
-  jiti@2.4.2:
-    optional: true
+  jiti@2.4.2: {}
 
   js-yaml@3.14.1:
     dependencies:
@@ -4601,9 +4577,53 @@ snapshots:
       svelte: 5.20.4
       typescript: 5.7.3
 
-  lilconfig@3.1.3: {}
+  lightningcss-darwin-arm64@1.29.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    optional: true
+
+  lightningcss@1.29.2:
+    dependencies:
+      detect-libc: 2.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.2
+      lightningcss-darwin-x64: 1.29.2
+      lightningcss-freebsd-x64: 1.29.2
+      lightningcss-linux-arm-gnueabihf: 1.29.2
+      lightningcss-linux-arm64-gnu: 1.29.2
+      lightningcss-linux-arm64-musl: 1.29.2
+      lightningcss-linux-x64-gnu: 1.29.2
+      lightningcss-linux-x64-musl: 1.29.2
+      lightningcss-win32-arm64-msvc: 1.29.2
+      lightningcss-win32-x64-msvc: 1.29.2
 
-  lines-and-columns@1.2.4: {}
+  lilconfig@3.1.3:
+    optional: true
 
   locate-character@3.0.0: {}
 
@@ -4627,8 +4647,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  lru-cache@10.4.3: {}
-
   lru-cache@11.0.0: {}
 
   magic-string@0.25.9:
@@ -4681,10 +4699,6 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimatch@9.0.5:
-    dependencies:
-      brace-expansion: 2.0.1
-
   minipass@7.1.2: {}
 
   mlly@1.7.4:
@@ -4704,12 +4718,6 @@ snapshots:
 
   mustache@4.2.0: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoid@3.3.8: {}
 
   no-case@3.0.4:
@@ -4723,14 +4731,8 @@ snapshots:
 
   node-releases@2.0.18: {}
 
-  normalize-path@3.0.0: {}
-
   normalize-range@0.1.2: {}
 
-  object-assign@4.1.1: {}
-
-  object-hash@3.0.0: {}
-
   ohash@1.1.4: {}
 
   os-tmpdir@1.0.2: {}
@@ -4755,8 +4757,6 @@ snapshots:
 
   package-json-from-dist@1.0.0: {}
 
-  package-json-from-dist@1.0.1: {}
-
   package-manager-detector@0.2.9: {}
 
   pascal-case@3.1.2:
@@ -4770,11 +4770,6 @@ snapshots:
 
   path-parse@1.0.7: {}
 
-  path-scurry@1.11.1:
-    dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-
   path-scurry@2.0.0:
     dependencies:
       lru-cache: 11.0.0
@@ -4809,69 +4804,30 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pify@2.3.0: {}
-
   pify@4.0.1: {}
 
-  pirates@4.0.6: {}
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
       mlly: 1.7.4
       pathe: 2.0.3
 
-  postcss-import@15.1.0(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.9
-
-  postcss-js@4.0.1(postcss@8.4.49):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.49
-
-  postcss-load-config@4.0.2(postcss@8.4.49):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.6.1
-    optionalDependencies:
-      postcss: 8.4.49
-
-  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.4.2
-      postcss: 8.4.49
+      postcss: 8.5.3
       yaml: 2.7.0
     optional: true
 
-  postcss-nested@6.2.0(postcss@8.4.49):
-    dependencies:
-      postcss: 8.4.49
-      postcss-selector-parser: 6.1.2
-
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.49:
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.3:
     dependencies:
       nanoid: 3.3.8
@@ -4909,10 +4865,6 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -4920,10 +4872,6 @@ snapshots:
       pify: 4.0.1
       strip-bom: 3.0.0
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   readdirp@4.1.1: {}
 
   regenerator-runtime@0.14.1: {}
@@ -4948,12 +4896,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@1.22.9:
-    dependencies:
-      is-core-module: 2.16.0
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   reusify@1.0.4: {}
 
   rimraf@6.0.1:
@@ -5142,19 +5084,9 @@ snapshots:
 
   strip-bom@4.0.0: {}
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  sveld@0.22.1(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49):
+  sveld@0.22.1(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0))(postcss@8.5.3):
     dependencies:
       '@rollup/plugin-node-resolve': 13.3.0(rollup@2.79.2)
       acorn: 8.14.0
@@ -5163,7 +5095,7 @@ snapshots:
       rollup: 2.79.2
       rollup-plugin-svelte: 7.2.2(rollup@2.79.2)(svelte@4.2.19)
       svelte: 4.2.19
-      svelte-preprocess: 6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@4.2.19)(typescript@5.7.3)
+      svelte-preprocess: 6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0))(postcss@8.5.3)(svelte@4.2.19)(typescript@5.7.3)
       tinyglobby: 0.2.12
       typescript: 5.7.3
     transitivePeerDependencies:
@@ -5193,23 +5125,23 @@ snapshots:
     dependencies:
       svelte: 5.20.4
 
-  svelte-preprocess@6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@4.2.19)(typescript@5.7.3):
+  svelte-preprocess@6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0))(postcss@8.5.3)(svelte@4.2.19)(typescript@5.7.3):
     dependencies:
       svelte: 4.2.19
     optionalDependencies:
-      postcss: 8.4.49
-      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0)
+      postcss: 8.5.3
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0)
       typescript: 5.7.3
 
-  svelte-ux@1.0.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@5.20.4):
+  svelte-ux@2.0.0-next.1(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0))(postcss@8.5.3)(svelte@5.20.4):
     dependencies:
       '@floating-ui/dom': 1.6.13
       '@fortawesome/fontawesome-common-types': 6.7.2
-      '@layerstack/svelte-actions': 1.0.0
-      '@layerstack/svelte-stores': 1.0.0
-      '@layerstack/svelte-table': 1.0.0
-      '@layerstack/tailwind': 1.0.0
-      '@layerstack/utils': 1.0.0
+      '@layerstack/svelte-actions': 1.0.1-next.0
+      '@layerstack/svelte-stores': 1.0.2-next.0
+      '@layerstack/svelte-table': 1.0.1-next.0
+      '@layerstack/tailwind': 2.0.0-next.1
+      '@layerstack/utils': 1.1.0-next.0
       '@mdi/js': 7.4.47
       culori: 4.0.1
       d3-array: 3.2.4
@@ -5221,7 +5153,7 @@ snapshots:
       prism-svelte: 0.5.0
       prism-themes: 1.9.0
       prismjs: 1.29.0
-      sveld: 0.22.1(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)
+      sveld: 0.22.1(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0))(postcss@8.5.3)
       svelte: 5.20.4
       zod: 3.24.2
     transitivePeerDependencies:
@@ -5234,7 +5166,6 @@ snapshots:
       - sass
       - stylus
       - sugarss
-      - ts-node
 
   svelte2tsx@0.7.34(svelte@5.20.4)(typescript@5.7.3):
     dependencies:
@@ -5277,47 +5208,16 @@ snapshots:
       magic-string: 0.30.17
       zimmerframe: 1.1.2
 
-  tailwind-merge@2.6.0: {}
+  tailwind-merge@3.0.2: {}
 
-  tailwindcss@3.4.16:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.6
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.4.49
-      postcss-import: 15.1.0(postcss@8.4.49)
-      postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)
-      postcss-nested: 6.2.0(postcss@8.4.49)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.9
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.12: {}
+
+  tapable@2.2.1: {}
 
   term-size@2.2.1: {}
 
   text-encoding@0.6.4: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -5356,8 +5256,6 @@ snapshots:
 
   tr46@0.0.3: {}
 
-  ts-interface-checker@0.1.13: {}
-
   tslib@2.8.1: {}
 
   typescript@5.7.3: {}
@@ -5416,13 +5314,13 @@ snapshots:
       '@types/unist': 2.0.11
       unist-util-stringify-position: 2.0.3
 
-  vite-node@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0):
+  vite-node@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 2.0.3
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -5437,7 +5335,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0):
+  vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.0
       postcss: 8.5.3
@@ -5446,16 +5344,17 @@ snapshots:
       '@types/node': 22.13.5
       fsevents: 2.3.3
       jiti: 2.4.2
+      lightningcss: 1.29.2
       yaml: 2.7.0
 
-  vitefu@1.0.5(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)):
+  vitefu@1.0.5(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)):
     optionalDependencies:
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
 
-  vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0):
+  vitest@3.0.7(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0))
+      '@vitest/mocker': 3.0.7(vite@6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0))
       '@vitest/pretty-format': 3.0.7
       '@vitest/runner': 3.0.7
       '@vitest/snapshot': 3.0.7
@@ -5471,8 +5370,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(yaml@2.7.0)
+      vite: 6.2.0(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.13.5)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.13.5
@@ -5554,8 +5453,6 @@ snapshots:
 
   ws@8.18.0: {}
 
-  yaml@2.6.1: {}
-
   yaml@2.7.0:
     optional: true
 

From 53044261d010abe5fe3aa04044bb25e26ef0dc57 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 12:21:07 -0400
Subject: [PATCH 02/13] Format project

---
 packages/layerchart/src/lib/docs/GeoDebug.svelte          | 4 +++-
 packages/layerchart/src/lib/docs/TransformDebug.svelte    | 4 +++-
 packages/layerchart/src/routes/changelog/+page.svelte     | 4 +++-
 .../layerchart/src/routes/docs/examples/Pack/+page.svelte | 8 +++++++-
 .../src/routes/docs/examples/Sunburst/+page.svelte        | 8 +++++++-
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/layerchart/src/lib/docs/GeoDebug.svelte b/packages/layerchart/src/lib/docs/GeoDebug.svelte
index a47fea57a..b6659232b 100644
--- a/packages/layerchart/src/lib/docs/GeoDebug.svelte
+++ b/packages/layerchart/src/lib/docs/GeoDebug.svelte
@@ -12,7 +12,9 @@
   let showCenter = false;
 </script>
 
-<div class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}>
+<div
+  class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}
+>
   <div class="grid gap-2 text-xs">
     <div><span class="opacity-50">scale:</span> {format($geo.scale(), 'decimal')}</div>
 
diff --git a/packages/layerchart/src/lib/docs/TransformDebug.svelte b/packages/layerchart/src/lib/docs/TransformDebug.svelte
index 5497c679e..002b956fc 100644
--- a/packages/layerchart/src/lib/docs/TransformDebug.svelte
+++ b/packages/layerchart/src/lib/docs/TransformDebug.svelte
@@ -8,7 +8,9 @@
   const { translate, scale } = transform;
 </script>
 
-<div class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}>
+<div
+  class={cls('bg-surface-300/50 rounded-sm m-1 backdrop-blur-sm p-2 tabular-nums', $$props.class)}
+>
   <div class="grid gap-2 text-xs">
     <div><span class="opacity-50">scale:</span> {format($scale, 'decimal')}</div>
 
diff --git a/packages/layerchart/src/routes/changelog/+page.svelte b/packages/layerchart/src/routes/changelog/+page.svelte
index 19e0748ea..b1ed15473 100644
--- a/packages/layerchart/src/routes/changelog/+page.svelte
+++ b/packages/layerchart/src/routes/changelog/+page.svelte
@@ -10,7 +10,9 @@
 </script>
 
 <div class="grid grid-cols-[1fr_auto] gap-6 pt-2 pb-4">
-  <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded-sm shadow-lg border overflow-auto">
+  <div
+    class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded-sm shadow-lg border overflow-auto"
+  >
     {@html marked.parse(sanitize(data.changelog))}
   </div>
 
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
index a37dafb34..dc988e258 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
@@ -81,7 +81,13 @@
 
 <Preview data={complexHierarchy}>
   <Breadcrumb items={selected?.ancestors().reverse() ?? []}>
-    <Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded-sm">
+    <Button
+      slot="item"
+      let:item
+      on:click={() => (selected = item)}
+      base
+      class="px-2 py-1 rounded-sm"
+    >
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
         <div class="text-xs text-surface-content/50">{format(item.value ?? 0, 'integer')}</div>
diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
index 6a72c04f9..2774fea6b 100644
--- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
@@ -64,7 +64,13 @@
 
 <Preview data={complexHierarchy}>
   <Breadcrumb items={selected?.ancestors().reverse() ?? []}>
-    <Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded-sm">
+    <Button
+      slot="item"
+      let:item
+      on:click={() => (selected = item)}
+      base
+      class="px-2 py-1 rounded-sm"
+    >
       <div class="text-left">
         <div class="text-sm">{item.data.name}</div>
         <div class="text-xs text-surface-content/50">{format(item.value ?? 0, 'integer')}</div>

From 615d8afe26800a00debc6c61d564c30016c002f9 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 12:33:54 -0400
Subject: [PATCH 03/13] Update all the non-transparent CSS variables to remove
 the hard coded `hsl()` (as variable now includes the color function)

---
 .../lib/components/charts/AreaChart.svelte    |   2 +-
 .../src/lib/components/charts/BarChart.svelte |   2 +-
 .../lib/components/charts/LineChart.svelte    |   2 +-
 .../src/lib/components/charts/PieChart.svelte |  14 +-
 .../lib/components/charts/ScatterChart.svelte |   2 +-
 packages/layerchart/src/lib/utils/canvas.ts   |   2 +-
 .../docs/components/AreaChart/+page.svelte    |  82 +++++-----
 .../docs/components/BarChart/+page.svelte     | 148 +++++++++---------
 .../docs/components/Calendar/+page.svelte     |  24 +--
 .../routes/docs/components/Hull/+page.svelte  |   6 +-
 .../docs/components/Legend/+page.svelte       |  12 +-
 .../docs/components/LineChart/+page.svelte    |  66 ++++----
 .../routes/docs/components/Pie/+page.svelte   |   8 +-
 .../docs/components/PieChart/+page.svelte     |  18 +--
 .../docs/components/ScatterChart/+page.svelte |  30 +---
 .../docs/components/Tooltip/+page.svelte      |   4 +-
 .../routes/docs/examples/Area/+page.svelte    |  22 +--
 .../routes/docs/examples/Bars/+page.svelte    |   8 +-
 .../docs/examples/Beeswarm/+page.svelte       |   2 +-
 .../examples/CollisionDetection/+page.svelte  |   6 +-
 .../routes/docs/examples/Columns/+page.svelte |   8 +-
 .../docs/examples/Compound/+page.svelte       |   8 +-
 .../routes/docs/examples/DotPlot/+page.svelte |   8 +-
 .../docs/examples/ForceGroup/+page.svelte     |   6 +-
 .../routes/docs/examples/Line/+page.svelte    |  10 +-
 .../docs/examples/Partition/+page.svelte      |   8 +-
 .../routes/docs/examples/Scatter/+page.svelte |   6 +-
 .../routes/docs/examples/Treemap/+page.svelte |   8 +-
 .../performance/dimension_arrays/+page.svelte |   6 +-
 .../dimension_arrays_processed/+page.svelte   |   6 +-
 .../performance/series_arrays/+page.svelte    |   6 +-
 .../docs/performance/wide_data/+page.svelte   |   6 +-
 .../wide_data_processed/+page.svelte          |   6 +-
 33 files changed, 256 insertions(+), 296 deletions(-)

diff --git a/packages/layerchart/src/lib/components/charts/AreaChart.svelte b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
index 01b92a749..62a0077c8 100644
--- a/packages/layerchart/src/lib/components/charts/AreaChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
@@ -68,7 +68,7 @@
     data?: TData[];
     color?: string;
     props?: Partial<ComponentProps<Area>>;
-  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  }[] = [{ key: 'default', value: y, color: 'var(--color-primary)' }];
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   /** Determine how to layout series.  Overlap (default) or stack */
diff --git a/packages/layerchart/src/lib/components/charts/BarChart.svelte b/packages/layerchart/src/lib/components/charts/BarChart.svelte
index 5764efc89..d1bbf2c3f 100644
--- a/packages/layerchart/src/lib/components/charts/BarChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/BarChart.svelte
@@ -314,7 +314,7 @@
   {y1Domain}
   {y1Range}
   c={isVertical ? y : x}
-  cRange={['hsl(var(--color-primary))']}
+  cRange={['var(--color-primary)']}
   padding={defaultChartPadding(axis, legend)}
   {...$$restProps}
   tooltip={$$props.tooltip === false
diff --git a/packages/layerchart/src/lib/components/charts/LineChart.svelte b/packages/layerchart/src/lib/components/charts/LineChart.svelte
index 2f0aac4d9..5b1ae9b13 100644
--- a/packages/layerchart/src/lib/components/charts/LineChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/LineChart.svelte
@@ -64,7 +64,7 @@
     data?: TData[];
     color?: string;
     props?: Partial<ComponentProps<Spline>>;
-  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+  }[] = [{ key: 'default', value: y, color: 'var(--color-primary)' }];
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
index 5300ee260..8dd764f34 100644
--- a/packages/layerchart/src/lib/components/charts/PieChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -70,7 +70,7 @@
     maxValue?: number;
     color?: string;
     props?: Partial<ComponentProps<Arc>>;
-  }[] = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+  }[] = [{ key: 'default', value: value /*, color: 'var(--color-primary)'*/ }];
 
   export let legend: ComponentProps<Legend> | boolean = false;
 
@@ -183,12 +183,12 @@
     : c !== key
       ? chartData.map((d) => cAccessor(d))
       : [
-          'hsl(var(--color-primary))',
-          'hsl(var(--color-secondary))',
-          'hsl(var(--color-info))',
-          'hsl(var(--color-success))',
-          'hsl(var(--color-warning))',
-          'hsl(var(--color-danger))',
+          'var(--color-primary)',
+          'var(--color-secondary)',
+          'var(--color-info)',
+          'var(--color-success)',
+          'var(--color-warning)',
+          'var(--color-danger)',
         ]}
   padding={{ bottom: legend === true ? 32 : 0 }}
   {...$$restProps}
diff --git a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
index e54d17ab1..c9f15831f 100644
--- a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
@@ -55,7 +55,7 @@
     data: TData[];
     color?: string;
     props?: Partial<ComponentProps<Points>>;
-  }[] = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
+  }[] = [{ key: 'default', data: chartDataArray(data), color: 'var(--color-primary)' }];
   $: isDefaultSeries = series.length === 1 && series[0].key === 'default';
 
   export let axis: ComponentProps<Axis> | 'x' | 'y' | boolean = true;
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index ed79eb815..983c0991d 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -18,7 +18,7 @@ export type ComputedStylesOptions = {
 };
 
 /**
- * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: hsl(var(--color-primary))` => `stroke: rgb(...)` )
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
 export function getComputedStyles(
   canvas: HTMLCanvasElement,
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index 6d7a9edd3..e613cf3aa 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -160,8 +160,8 @@
 <h2>Threshold Gradient</h2>
 <Preview data={dateSeriesData}>
   {@const colors = {
-    positive: 'hsl(var(--color-success))',
-    negative: 'hsl(var(--color-danger))',
+    positive: 'var(--color-success)',
+    negative: 'var(--color-danger)',
   }}
 
   <div class="h-[300px] p-4 border rounded-sm">
@@ -232,14 +232,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       {renderContext}
@@ -259,17 +259,17 @@
         {
           key: 'apples',
           data: multiSeriesDataByFruit.get('apples'),
-          color: 'hsl(var(--color-danger))',
+          color: 'var(--color-danger)',
         },
         {
           key: 'bananas',
           data: multiSeriesDataByFruit.get('bananas'),
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
           data: multiSeriesDataByFruit.get('oranges'),
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       {renderContext}
@@ -286,9 +286,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       onpointclick={(e, detail) => {
         console.log(e, detail);
@@ -311,17 +311,17 @@
         {
           key: 'apples',
           data: multiSeriesDataByFruit.get('apples'),
-          color: 'hsl(var(--color-danger))',
+          color: 'var(--color-danger)',
         },
         {
           key: 'bananas',
           data: multiSeriesDataByFruit.get('bananas'),
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
           data: multiSeriesDataByFruit.get('oranges'),
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       tooltip={{ mode: 'voronoi' }}
@@ -367,14 +367,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stack"
@@ -392,14 +392,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stackExpand"
@@ -417,14 +417,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', value: (d) => -d.apples, color: 'hsl(var(--color-danger))' },
+        { key: 'apples', value: (d) => -d.apples, color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stackDiverging"
@@ -442,14 +442,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stack"
@@ -636,14 +636,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stack"
@@ -662,14 +662,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stack"
@@ -688,16 +688,16 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', label: 'Apples 🍎 ', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', label: 'Apples 🍎 ', color: 'var(--color-danger)' },
         {
           key: 'bananas',
           label: 'Bananas 🍌',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
           label: 'Oranges 🍊',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       seriesLayout="stack"
@@ -825,14 +825,14 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       {renderContext}
@@ -890,9 +890,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       {renderContext}
       {debug}
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
index 3bac1fec1..c5c898fd9 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -115,7 +115,7 @@
       data={dateSeriesData}
       x="date"
       y="value"
-      cRange={['hsl(var(--color-secondary))']}
+      cRange={['var(--color-secondary)']}
       {renderContext}
       {debug}
     />
@@ -132,10 +132,10 @@
       y="value"
       c="fruit"
       cRange={[
-        'hsl(var(--color-danger))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-success))',
-        'hsl(var(--color-info))',
+        'var(--color-danger)',
+        'var(--color-warning)',
+        'var(--color-success)',
+        'var(--color-info)',
       ]}
       props={{
         yAxis: { format: 'metric' },
@@ -157,7 +157,7 @@
       c="value"
       cScale={scaleThreshold()}
       cDomain={[0]}
-      cRange={['hsl(var(--color-danger))', 'hsl(var(--color-success))']}
+      cRange={['var(--color-danger)', 'var(--color-success)']}
       {renderContext}
       {debug}
     />
@@ -230,7 +230,7 @@
         { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
         {
           key: 'value',
-          color: 'hsl(var(--color-primary))',
+          color: 'var(--color-primary)',
           props: { insets: { x: 8 } },
         },
       ]}
@@ -250,7 +250,7 @@
       orientation="horizontal"
       series={[
         { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
-        { key: 'value', color: 'hsl(var(--color-primary))', props: { insets: { y: 4 } } },
+        { key: 'value', color: 'var(--color-primary)', props: { insets: { y: 4 } } },
       ]}
       {renderContext}
       {debug}
@@ -274,7 +274,7 @@
         {
           key: 'value',
           data: dateSeriesData,
-          color: 'hsl(var(--color-primary))',
+          color: 'var(--color-primary)',
           props: { insets: { x: 8 } },
         },
       ]}
@@ -294,12 +294,12 @@
       series={[
         {
           key: 'value',
-          color: 'hsl(var(--color-primary))',
+          color: 'var(--color-primary)',
         },
         {
           key: 'baseline',
           value: (d) => -d.baseline,
-          color: 'hsl(var(--color-secondary))',
+          color: 'var(--color-secondary)',
         },
       ]}
       {renderContext}
@@ -326,11 +326,11 @@
         {
           key: 'male',
           value: (d) => -d.male,
-          color: 'hsl(var(--color-primary))',
+          color: 'var(--color-primary)',
         },
         {
           key: 'female',
-          color: 'hsl(var(--color-secondary))',
+          color: 'var(--color-secondary)',
         },
       ]}
       {renderContext}
@@ -381,12 +381,12 @@
         {
           key: 'male',
           value: (d) => -d.male / totalPopulation,
-          color: 'hsl(var(--color-primary))',
+          color: 'var(--color-primary)',
         },
         {
           key: 'female',
           value: (d) => d.female / totalPopulation,
-          color: 'hsl(var(--color-secondary))',
+          color: 'var(--color-secondary)',
         },
       ]}
       {renderContext}
@@ -425,18 +425,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -462,18 +462,18 @@
       orientation="horizontal"
       y="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -498,18 +498,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -541,21 +541,21 @@
       x="year"
       y="value"
       series={[
-        { key: 'apples', data: dataByFruit.get('apples'), color: 'hsl(var(--color-danger))' },
+        { key: 'apples', data: dataByFruit.get('apples'), color: 'var(--color-danger)' },
         {
           key: 'bananas',
           data: dataByFruit.get('bananas'),
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
           data: dataByFruit.get('cherries'),
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
           data: dataByFruit.get('grapes'),
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -580,18 +580,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stack"
@@ -617,18 +617,18 @@
       orientation="horizontal"
       y="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stack"
@@ -653,18 +653,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stack"
@@ -691,18 +691,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stackExpand"
@@ -729,20 +729,20 @@
         {
           key: 'apples',
           value: (d) => -d.apples,
-          color: 'hsl(var(--color-danger))',
+          color: 'var(--color-danger)',
           props: { rounded: 'bottom' },
         },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stackDiverging"
@@ -769,21 +769,21 @@
       x="year"
       y="value"
       series={[
-        { key: 'apples', data: dataByFruit.get('apples'), color: 'hsl(var(--color-danger))' },
+        { key: 'apples', data: dataByFruit.get('apples'), color: 'var(--color-danger)' },
         {
           key: 'bananas',
           data: dataByFruit.get('bananas'),
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
           data: dataByFruit.get('cherries'),
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
           data: dataByFruit.get('grapes'),
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stack"
@@ -807,18 +807,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -844,18 +844,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="stack"
@@ -881,18 +881,18 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', color: 'var(--color-danger)' },
         {
           key: 'bananas',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -918,21 +918,21 @@
       data={wideData}
       x="year"
       series={[
-        { key: 'apples', label: 'Apples 🍎', color: 'hsl(var(--color-danger))' },
+        { key: 'apples', label: 'Apples 🍎', color: 'var(--color-danger)' },
         {
           key: 'bananas',
           label: 'Bananas 🍌',
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
         {
           key: 'cherries',
           label: 'Cherries 🍒',
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'grapes',
           label: 'Grapes 🍇',
-          color: 'hsl(var(--color-info))',
+          color: 'var(--color-info)',
         },
       ]}
       seriesLayout="group"
@@ -1052,11 +1052,7 @@
       c="value"
       cScale={scaleThreshold()}
       cDomain={[10, 50]}
-      cRange={[
-        'hsl(var(--color-danger))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-success))',
-      ]}
+      cRange={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']}
       axis="x"
       bandPadding={0.1}
       props={{
diff --git a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
index 526b36188..7979d058a 100644
--- a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
@@ -36,10 +36,10 @@
       cScale={scaleThreshold().unknown('transparent')}
       cDomain={[25, 50, 75]}
       cRange={[
-        'hsl(var(--color-primary-100))',
-        'hsl(var(--color-primary-300))',
-        'hsl(var(--color-primary-500))',
-        'hsl(var(--color-primary-700))',
+        'var(--color-primary-100)',
+        'var(--color-primary-300)',
+        'var(--color-primary-500)',
+        'var(--color-primary-700)',
       ]}
       let:tooltip
     >
@@ -71,10 +71,10 @@
       cScale={scaleThreshold().unknown('transparent')}
       cDomain={[25, 50, 75]}
       cRange={[
-        'hsl(var(--color-primary-100))',
-        'hsl(var(--color-primary-300))',
-        'hsl(var(--color-primary-500))',
-        'hsl(var(--color-primary-700))',
+        'var(--color-primary-100)',
+        'var(--color-primary-300)',
+        'var(--color-primary-500)',
+        'var(--color-primary-700)',
       ]}
       let:tooltip
     >
@@ -106,10 +106,10 @@
       cScale={scaleThreshold().unknown('transparent')}
       cDomain={[25, 50, 75]}
       cRange={[
-        'hsl(var(--color-primary-100))',
-        'hsl(var(--color-primary-300))',
-        'hsl(var(--color-primary-500))',
-        'hsl(var(--color-primary-700))',
+        'var(--color-primary-100)',
+        'var(--color-primary-300)',
+        'var(--color-primary-500)',
+        'var(--color-primary-700)',
       ]}
       padding={{ left: 20 }}
       let:tooltip
diff --git a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
index 1c0c3884d..6deda7ac4 100644
--- a/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Hull/+page.svelte
@@ -17,9 +17,9 @@
   const states = feature(data.us.geojson, data.us.geojson.objects.states);
 
   const groupColor = scaleOrdinal([
-    'hsl(var(--color-info))',
-    'hsl(var(--color-warning))',
-    'hsl(var(--color-danger))',
+    'var(--color-info)',
+    'var(--color-warning)',
+    'var(--color-danger)',
   ]);
 </script>
 
diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
index 728268535..66f53f5e3 100644
--- a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
@@ -232,11 +232,7 @@
       data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
       c="name"
       cScale={scaleOrdinal()}
-      cRange={[
-        'hsl(var(--color-success))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-danger))',
-      ]}
+      cRange={['var(--color-success)', 'var(--color-warning)', 'var(--color-danger)']}
     >
       <Legend title="I am Legend" />
     </Chart>
@@ -251,11 +247,7 @@
       data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
       c="name"
       cScale={scaleOrdinal()}
-      cRange={[
-        'hsl(var(--color-success))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-danger))',
-      ]}
+      cRange={['var(--color-success)', 'var(--color-warning)', 'var(--color-danger)']}
     >
       <Legend title="top-left" placement="top-left" variant="swatches" />
       <Legend title="top" placement="top" variant="swatches" />
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index 2310e3f6d..dcc006c04 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -113,7 +113,7 @@
     <LineChart
       data={dateSeriesData}
       x="date"
-      series={[{ key: 'value', color: 'hsl(var(--color-secondary))' }]}
+      series={[{ key: 'value', color: 'var(--color-secondary)' }]}
       {renderContext}
       {debug}
     />
@@ -143,9 +143,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       {renderContext}
       {debug}
@@ -164,17 +164,17 @@
         {
           key: 'apples',
           data: multiSeriesDataByFruit.get('apples'),
-          color: 'hsl(var(--color-danger))',
+          color: 'var(--color-danger)',
         },
         {
           key: 'bananas',
           data: multiSeriesDataByFruit.get('bananas'),
-          color: 'hsl(var(--color-success))',
+          color: 'var(--color-success)',
         },
         {
           key: 'oranges',
           data: multiSeriesDataByFruit.get('oranges'),
-          color: 'hsl(var(--color-warning))',
+          color: 'var(--color-warning)',
         },
       ]}
       {renderContext}
@@ -192,9 +192,9 @@
       x="date"
       y="value"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       tooltip={{ mode: 'voronoi' }}
       {renderContext}
@@ -239,9 +239,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       onpointclick={(e, detail) => {
         console.log(e, detail);
@@ -261,9 +261,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       props={{ highlight: { points: { r: 8, strokeWidth: 4 } } }}
       {renderContext}
@@ -280,9 +280,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', color: 'var(--color-danger)' },
+        { key: 'bananas', color: 'var(--color-success)' },
+        { key: 'oranges', color: 'var(--color-warning)' },
       ]}
       {renderContext}
       {debug}
@@ -449,12 +449,12 @@
       series={[
         {
           key: 'budget',
-          color: 'hsl(var(--color-secondary))',
+          color: 'var(--color-secondary)',
           props: { class: 'fill-secondary/50' },
         },
         {
           key: 'actual',
-          color: 'hsl(var(--color-primary))',
+          color: 'var(--color-primary)',
           props: { class: 'fill-primary/50' },
         },
       ]}
@@ -540,8 +540,8 @@
         {@const thresholdOffset = yScale(50) / (height + padding.bottom)}
         <LinearGradient
           stops={[
-            [thresholdOffset, 'hsl(var(--color-danger))'],
-            [thresholdOffset, 'hsl(var(--color-info))'],
+            [thresholdOffset, 'var(--color-danger)'],
+            [thresholdOffset, 'var(--color-info)'],
           ]}
           units="userSpaceOnUse"
           vertical
@@ -574,10 +574,10 @@
           data,
           color:
             year === 2024
-              ? 'hsl(var(--color-primary))'
+              ? 'var(--color-primary)'
               : year === 2023
                 ? 'hsl(var(--color-primary) / 50%)'
-                : 'hsl(var(--color-surface-content))',
+                : 'var(--color-surface-content)',
           props: { opacity: [2023, 2024].includes(year) ? 1 : 0.1 },
         };
       })}
@@ -613,10 +613,10 @@
           data,
           color:
             year === 2024
-              ? 'hsl(var(--color-primary))'
+              ? 'var(--color-primary)'
               : year === 2023
                 ? 'hsl(var(--color-primary) / 50%)'
-                : 'hsl(var(--color-surface-content))',
+                : 'var(--color-surface-content)',
           props: { opacity: [2023, 2024].includes(year) ? 1 : 0.1 },
         };
       })}
@@ -735,9 +735,9 @@
       data={multiSeriesData}
       x="date"
       series={[
-        { key: 'apples', label: 'Apples', color: 'hsl(var(--color-danger))' },
-        { key: 'bananas', label: 'Bananas', color: 'hsl(var(--color-success))' },
-        { key: 'oranges', label: 'Oranges', color: 'hsl(var(--color-warning))' },
+        { key: 'apples', label: 'Apples', color: 'var(--color-danger)' },
+        { key: 'bananas', label: 'Bananas', color: 'var(--color-success)' },
+        { key: 'oranges', label: 'Oranges', color: 'var(--color-warning)' },
       ]}
       legend
       {renderContext}
@@ -876,9 +876,9 @@
     data={multiSeriesData}
     x="date"
     series={[
-      { key: 'apples', color: 'hsl(var(--color-danger))' },
-      { key: 'bananas', color: 'hsl(var(--color-success))' },
-      { key: 'oranges', color: 'hsl(var(--color-warning))' },
+      { key: 'apples', color: 'var(--color-danger)' },
+      { key: 'bananas', color: 'var(--color-success)' },
+      { key: 'oranges', color: 'var(--color-warning)' },
     ]}
     onpointclick={(e, detail) => {
       console.log(e, detail);
diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
index 61b984600..d1c22d29e 100644
--- a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
@@ -18,10 +18,10 @@
 
   const colorKeys = [...new Set(data.map((d) => d.date))];
   const keyColors = [
-    'hsl(var(--color-info))',
-    'hsl(var(--color-success))',
-    'hsl(var(--color-warning))',
-    'hsl(var(--color-danger))',
+    'var(--color-info)',
+    'var(--color-success)',
+    'var(--color-warning)',
+    'var(--color-danger)',
   ];
 
   const keyClasses = [
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
index f1fca1950..b7c6906be 100644
--- a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -16,10 +16,10 @@
       return {
         ...d,
         color: [
-          'hsl(var(--color-danger))',
-          'hsl(var(--color-warning))',
-          'hsl(var(--color-success))',
-          'hsl(var(--color-info))',
+          'var(--color-danger)',
+          'var(--color-warning)',
+          'var(--color-success)',
+          'var(--color-info)',
         ][i],
       };
     }) ?? [];
@@ -227,7 +227,7 @@
       outerRadius={80}
       innerRadius={-20}
       cornerRadius={10}
-      cRange={['hsl(var(--color-success))']}
+      cRange={['var(--color-success)']}
       props={{
         group: { y: 45 },
       }}
@@ -450,10 +450,10 @@
       key="fruit"
       value="value"
       cRange={[
-        'hsl(var(--color-success))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-danger))',
-        'hsl(var(--color-info))',
+        'var(--color-success)',
+        'var(--color-warning)',
+        'var(--color-danger)',
+        'var(--color-info)',
       ]}
       {renderContext}
       {debug}
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
index 10aeb39d5..315d42e16 100644
--- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -25,11 +25,7 @@
     return {
       key: species,
       data,
-      color: [
-        'hsl(var(--color-primary))',
-        'hsl(var(--color-secondary))',
-        'hsl(var(--color-success))',
-      ][i],
+      color: ['var(--color-primary)', 'var(--color-secondary)', 'var(--color-success)'][i],
     };
   });
 
@@ -121,11 +117,7 @@
         return {
           key: species,
           data,
-          color: [
-            'hsl(var(--color-primary))',
-            'hsl(var(--color-secondary))',
-            'hsl(var(--color-success))',
-          ][i],
+          color: ['var(--color-primary)', 'var(--color-secondary)', 'var(--color-success)'][i],
         };
       })}
       {renderContext}
@@ -147,11 +139,7 @@
         return {
           key: species,
           data,
-          color: [
-            'hsl(var(--color-primary))',
-            'hsl(var(--color-secondary))',
-            'hsl(var(--color-success))',
-          ][i],
+          color: ['var(--color-primary)', 'var(--color-secondary)', 'var(--color-success)'][i],
         };
       })}
       {renderContext}
@@ -179,11 +167,7 @@
         return {
           key: species,
           data,
-          color: [
-            'hsl(var(--color-primary))',
-            'hsl(var(--color-secondary))',
-            'hsl(var(--color-success))',
-          ][i],
+          color: ['var(--color-primary)', 'var(--color-secondary)', 'var(--color-success)'][i],
         };
       })}
       legend
@@ -227,11 +211,7 @@
           key: species,
           label: species + ' 🐧',
           data,
-          color: [
-            'hsl(var(--color-primary))',
-            'hsl(var(--color-secondary))',
-            'hsl(var(--color-success))',
-          ][i],
+          color: ['var(--color-primary)', 'var(--color-secondary)', 'var(--color-success)'][i],
         };
       })}
       legend
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
index fe54851dd..c7a9214d3 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -255,7 +255,7 @@
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
         <Tooltip.List>
-          <Tooltip.Item label="value" value={data.value} color="hsl(var(--color-primary))" />
+          <Tooltip.Item label="value" value={data.value} color="var(--color-primary)" />
         </Tooltip.List>
       </Tooltip.Root>
     </Chart>
@@ -670,7 +670,7 @@
       c="key"
       cScale={scaleOrdinal()}
       cDomain={keys}
-      cRange={['hsl(var(--color-info))', 'hsl(var(--color-success))', 'hsl(var(--color-warning))']}
+      cRange={['var(--color-info)', 'var(--color-success)', 'var(--color-warning)']}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{
         mode: charts.areaStack.mode,
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index eef236cda..bea8f2b89 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -54,9 +54,9 @@
   const dataByFruit = flatGroup(multiSeriesFlatData, (d) => d.fruit);
 
   const fruitColors = {
-    apples: 'hsl(var(--color-danger))',
-    bananas: 'hsl(var(--color-success))',
-    oranges: 'hsl(var(--color-info))',
+    apples: 'var(--color-danger)',
+    bananas: 'var(--color-success)',
+    oranges: 'var(--color-info)',
   };
 </script>
 
@@ -536,9 +536,9 @@
           rule
         />
         {@const primaryColors = [
-          'hsl(var(--color-danger-500))',
-          'hsl(var(--color-success-500))',
-          'hsl(var(--color-info-500))',
+          'var(--color-danger)',
+          'var(--color-success)',
+          'var(--color-info)',
         ]}
         {@const secondaryColors = [
           'hsl(var(--color-danger-500) / 10%)',
@@ -766,7 +766,7 @@
       c={(d) => (d.value < 0 ? 'under' : 'over')}
       cScale={scaleOrdinal()}
       cDomain={['over', 'under']}
-      cRange={['hsl(var(--color-success))', 'hsl(var(--color-danger))']}
+      cRange={['var(--color-success)', 'var(--color-danger)']}
       let:width
       let:height
       let:yScale
@@ -865,8 +865,8 @@
         <Rule y={0} />
         <LinearGradient
           stops={[
-            [thresholdOffset, 'hsl(var(--color-success))'],
-            [thresholdOffset, 'hsl(var(--color-danger))'],
+            [thresholdOffset, 'var(--color-success)'],
+            [thresholdOffset, 'var(--color-danger)'],
           ]}
           units="userSpaceOnUse"
           vertical
@@ -903,8 +903,8 @@
         <Rule y={0} />
         <LinearGradient
           stops={[
-            [thresholdOffset, 'hsl(var(--color-success))'],
-            [thresholdOffset, 'hsl(var(--color-danger))'],
+            [thresholdOffset, 'var(--color-success)'],
+            [thresholdOffset, 'var(--color-danger)'],
           ]}
           units="userSpaceOnUse"
           vertical
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
index 7f8624c02..5e8f7e4b6 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -59,10 +59,10 @@
 
   const colorKeys = [...new Set(longData.map((x) => x.fruit))];
   const keyColors = [
-    'hsl(var(--color-info))',
-    'hsl(var(--color-success))',
-    'hsl(var(--color-warning))',
-    'hsl(var(--color-danger))',
+    'var(--color-info)',
+    'var(--color-success)',
+    'var(--color-warning)',
+    'var(--color-danger)',
   ];
 
   let transitionChartMode = 'group';
diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
index 47a0bf0d6..3dc55abaf 100644
--- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
@@ -9,7 +9,7 @@
 
   export let data;
 
-  const genderColor = scaleOrdinal(['hsl(var(--color-info))', 'hsl(var(--color-warning))']);
+  const genderColor = scaleOrdinal(['var(--color-info)', 'var(--color-warning)']);
 
   const xForce = forceX().strength(0.95);
   const yForce = forceY().strength(0.075);
diff --git a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
index c8276ef39..49b1dd051 100644
--- a/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/CollisionDetection/+page.svelte
@@ -13,9 +13,9 @@
   const randomData = Array.from({ length: 200 }, (_, i) => ({ r: r(), group: i && (i % n) + 1 }));
 
   const groupColor = scaleOrdinal([
-    'hsl(var(--color-info))',
-    'hsl(var(--color-warning))',
-    'hsl(var(--color-danger))',
+    'var(--color-info)',
+    'var(--color-warning)',
+    'var(--color-danger)',
   ]);
 
   const xForce = forceX().strength(0.01);
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
index 5af3e0b9e..6e34819fc 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -58,10 +58,10 @@
 
   const colorKeys = [...new Set(longData.map((x) => x.fruit))];
   const keyColors = [
-    'hsl(var(--color-info))',
-    'hsl(var(--color-success))',
-    'hsl(var(--color-warning))',
-    'hsl(var(--color-danger))',
+    'var(--color-info)',
+    'var(--color-success)',
+    'var(--color-warning)',
+    'var(--color-danger)',
   ];
 
   let transitionChartMode = 'group';
diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
index aff45a5ed..bd54ead71 100644
--- a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
@@ -40,12 +40,8 @@
             {formatDate(data.date, PeriodType.Day)}
           </Tooltip.Header>
           <Tooltip.List>
-            <Tooltip.Item
-              label="baseline"
-              value={data.baseline}
-              color="hsl(var(--color-primary))"
-            />
-            <Tooltip.Item label="value" value={data.value} color="hsl(var(--color-secondary))" />
+            <Tooltip.Item label="baseline" value={data.baseline} color="var(--color-primary)" />
+            <Tooltip.Item label="value" value={data.value} color="var(--color-secondary)" />
           </Tooltip.List>
         </Tooltip.Root>
       </svelte:fragment>
diff --git a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
index 6ddadd987..11efac4dd 100644
--- a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
@@ -84,10 +84,10 @@
       y="name"
       c="name"
       cRange={[
-        'hsl(var(--color-danger))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-success))',
-        'hsl(var(--color-info))',
+        'var(--color-danger)',
+        'var(--color-warning)',
+        'var(--color-success)',
+        'var(--color-info)',
       ]}
       yScale={scaleBand()}
       padding={{ left: 36, bottom: 36 }}
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
index bbc6b7dd6..1b6e47121 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceGroup/+page.svelte
@@ -10,9 +10,9 @@
   import dots from './dots.json' with { type: 'json' };
 
   const categoryColor = scaleOrdinal([
-    'hsl(var(--color-info))',
-    'hsl(var(--color-warning))',
-    'hsl(var(--color-danger))',
+    'var(--color-info)',
+    'var(--color-warning)',
+    'var(--color-danger)',
   ]);
 
   let groupBy = true;
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index c0fa18990..b35bff40b 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -42,9 +42,9 @@
   const dataByFruit = flatGroup(multiSeriesFlatData, (d) => d.fruit);
 
   const fruitColors = {
-    apples: 'hsl(var(--color-info))',
-    bananas: 'hsl(var(--color-success))',
-    oranges: 'hsl(var(--color-warning))',
+    apples: 'var(--color-info)',
+    bananas: 'var(--color-success)',
+    oranges: 'var(--color-warning)',
   };
 
   const temperatureColor = scaleSequential(
@@ -238,8 +238,8 @@
         />
         <LinearGradient
           stops={[
-            [thresholdOffset, 'hsl(var(--color-info))'],
-            [thresholdOffset, 'hsl(var(--color-danger))'],
+            [thresholdOffset, 'var(--color-info)'],
+            [thresholdOffset, 'var(--color-danger)'],
           ]}
           units="userSpaceOnUse"
           vertical
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
index 28752307b..59a059696 100644
--- a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
@@ -87,7 +87,7 @@
   function getNodeColor(node: HierarchyNode<any>, colorBy: string) {
     switch (colorBy) {
       case 'children':
-        return node.children ? 'hsl(var(--color-primary))' : 'hsl(var(--color-primary-600))';
+        return node.children ? 'var(--color-primary)' : 'var(--color-primary-600)';
       case 'depth':
         return sequentialColor(node.depth).toString();
       case 'parent':
@@ -179,7 +179,7 @@
                         width={nodeWidth}
                         height={nodeHeight}
                         stroke={colorBy === 'children'
-                          ? 'hsl(var(--color-primary-content))'
+                          ? 'var(--color-primary-content)'
                           : hsl(nodeColor).darker(1).toString()}
                         stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                         fill={nodeColor}
@@ -261,7 +261,7 @@
                         width={nodeWidth}
                         height={nodeHeight}
                         stroke={colorBy === 'children'
-                          ? 'hsl(var(--color-primary-content))'
+                          ? 'var(--color-primary-content)'
                           : hsl(nodeColor).darker(1).toString()}
                         stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                         fill={nodeColor}
@@ -352,7 +352,7 @@
                       width={nodeWidth}
                       height={nodeHeight}
                       stroke={colorBy === 'children'
-                        ? 'hsl(var(--color-primary-content))'
+                        ? 'var(--color-primary-content)'
                         : hsl(nodeColor).darker(1).toString()}
                       stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                       fill={nodeColor}
diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
index 451b160cc..32519d5cd 100644
--- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
@@ -122,11 +122,7 @@
       c="value"
       cScale={scaleThreshold()}
       cDomain={[50, 90]}
-      cRange={[
-        'hsl(var(--color-danger))',
-        'hsl(var(--color-warning))',
-        'hsl(var(--color-success))',
-      ]}
+      cRange={['var(--color-danger)', 'var(--color-warning)', 'var(--color-success)']}
       padding={{ left: 16, bottom: 24 }}
     >
       <Svg>
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index 0c845f574..76c2da208 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -90,7 +90,7 @@
   function getNodeColor(node: HierarchyNode<any>, colorBy: string) {
     switch (colorBy) {
       case 'children':
-        return node.children ? 'hsl(var(--color-primary-500))' : 'hsl(var(--color-primary-400))';
+        return node.children ? 'var(--color-primary-500)' : 'var(--color-primary-400)';
       case 'depth':
         return sequentialColor(node.depth).toString();
       case 'parent':
@@ -195,7 +195,7 @@
                       width={nodeWidth}
                       height={nodeHeight}
                       stroke={colorBy === 'children'
-                        ? 'hsl(var(--color-primary-content))'
+                        ? 'var(--color-primary-content)'
                         : hsl(nodeColor).darker(1).toString()}
                       stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                       fill={nodeColor}
@@ -339,7 +339,7 @@
                   width={nodeWidth}
                   height={nodeHeight}
                   stroke={colorBy === 'children'
-                    ? 'hsl(var(--color-primary-content))'
+                    ? 'var(--color-primary-content)'
                     : hsl(nodeColor).darker(1).toString()}
                   stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                   fill={nodeColor}
@@ -450,7 +450,7 @@
                           width={nodeWidth}
                           height={nodeHeight}
                           stroke={colorBy === 'children'
-                            ? 'hsl(var(--color-primary-content))'
+                            ? 'var(--color-primary-content)'
                             : hsl(nodeColor).darker(1).toString()}
                           stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                           fill={nodeColor}
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
index df9926fed..86960f3db 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays/+page.svelte
@@ -76,17 +76,17 @@
                 {
                   key: 'cpu',
                   data: zip(data.chartData.date, data.chartData.cpu),
-                  color: 'hsl(var(--color-danger))',
+                  color: 'var(--color-danger)',
                 },
                 {
                   key: 'ram',
                   data: zip(data.chartData.date, data.chartData.ram),
-                  color: 'hsl(var(--color-warning))',
+                  color: 'var(--color-warning)',
                 },
                 {
                   key: 'tcp',
                   data: zip(data.chartData.date, data.chartData.tcp),
-                  color: 'hsl(var(--color-success))',
+                  color: 'var(--color-success)',
                 },
               ]}
               props={chartProps}
diff --git a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
index 8dfae93a8..2cc61ee83 100644
--- a/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/dimension_arrays_processed/+page.svelte
@@ -75,17 +75,17 @@
                 {
                   key: 'cpu',
                   data: chartData.cpu,
-                  color: 'hsl(var(--color-danger))',
+                  color: 'var(--color-danger)',
                 },
                 {
                   key: 'ram',
                   data: chartData.ram,
-                  color: 'hsl(var(--color-warning))',
+                  color: 'var(--color-warning)',
                 },
                 {
                   key: 'tcp',
                   data: chartData.tcp,
-                  color: 'hsl(var(--color-success))',
+                  color: 'var(--color-success)',
                 },
               ]}
               props={chartProps}
diff --git a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
index e65455c8e..932d8d29b 100644
--- a/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/series_arrays/+page.svelte
@@ -65,9 +65,9 @@
               x="x"
               y="y"
               series={[
-                { key: 'cpu', data: data.chartData.cpu, color: 'hsl(var(--color-danger))' },
-                { key: 'ram', data: data.chartData.ram, color: 'hsl(var(--color-warning))' },
-                { key: 'tcp', data: data.chartData.tcp, color: 'hsl(var(--color-success))' },
+                { key: 'cpu', data: data.chartData.cpu, color: 'var(--color-danger)' },
+                { key: 'ram', data: data.chartData.ram, color: 'var(--color-warning)' },
+                { key: 'tcp', data: data.chartData.tcp, color: 'var(--color-success)' },
               ]}
               props={chartProps}
               brush
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
index 1f0f0bf5a..f12bf5d22 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data/+page.svelte
@@ -65,13 +65,13 @@
               data={data.chartData}
               x="epoch"
               series={[
-                { key: 'cpu', value: (d) => 100 - d.idl, color: 'hsl(var(--color-danger))' },
+                { key: 'cpu', value: (d) => 100 - d.idl, color: 'var(--color-danger)' },
                 {
                   key: 'ram',
                   value: (d) => (100 * d.writ) / (d.writ + d.used),
-                  color: 'hsl(var(--color-warning))',
+                  color: 'var(--color-warning)',
                 },
-                { key: 'tcp', value: (d) => d.send, color: 'hsl(var(--color-success))' },
+                { key: 'tcp', value: (d) => d.send, color: 'var(--color-success)' },
               ]}
               props={chartProps}
               brush
diff --git a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
index ef3dc48dc..8128e0af2 100644
--- a/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
+++ b/packages/layerchart/src/routes/docs/performance/wide_data_processed/+page.svelte
@@ -76,12 +76,12 @@
               data={chartData}
               x="date"
               series={[
-                { key: 'cpu', color: 'hsl(var(--color-danger))' },
+                { key: 'cpu', color: 'var(--color-danger)' },
                 {
                   key: 'ram',
-                  color: 'hsl(var(--color-warning))',
+                  color: 'var(--color-warning)',
                 },
-                { key: 'tcp', color: 'hsl(var(--color-success))' },
+                { key: 'tcp', color: 'var(--color-success)' },
               ]}
               props={chartProps}
               brush

From b639b1b414be23462a395ebaf398bb9196a2d065 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 14:21:56 -0400
Subject: [PATCH 04/13] fix(LinearGradient): Handle `tw-gradient-[from|to]` no
 longer inheriting

---
 .../src/lib/components/LinearGradient.svelte   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/layerchart/src/lib/components/LinearGradient.svelte b/packages/layerchart/src/lib/components/LinearGradient.svelte
index 64882cffd..b37129e5c 100644
--- a/packages/layerchart/src/lib/components/LinearGradient.svelte
+++ b/packages/layerchart/src/lib/components/LinearGradient.svelte
@@ -29,6 +29,9 @@
   /** Define the coordinate system for attributes (i.e. gradientUnits) */
   export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
 
+  let className: string | undefined = undefined;
+  export { className as class };
+
   const { width, height, padding } = chartContext();
 
   const renderContext = getRenderContext();
@@ -42,13 +45,13 @@
       if (Array.isArray(stop)) {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop[1] },
-          classes: $$props.class,
+          classes: className,
         });
         return { offset: parsePercent(stop[0]), color: fill };
       } else {
         const { fill } = getComputedStyles(ctx.canvas, {
           styles: { fill: stop },
-          classes: $$props.class,
+          classes: className,
         });
         return { offset: i / (stops.length - 1), color: fill };
       }
@@ -68,8 +71,7 @@
   }
 
   $: if (renderContext === 'canvas') {
-    // Redraw when props changes (TODO: styles, class, etc)
-    x1 && y1 && x2 && y2 && stops;
+    x1 && y1 && x2 && y2 && stops && className;
     canvasContext.invalidate();
   }
 
@@ -103,9 +105,13 @@
         {#if stops}
           {#each stops as stop, i}
             {#if Array.isArray(stop)}
-              <stop offset={stop[0]} stop-color={stop[1]} />
+              <stop offset={stop[0]} stop-color={stop[1]} class={className} />
             {:else}
-              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+              <stop
+                offset="{i * (100 / (stops.length - 1))}%"
+                stop-color={stop}
+                class={className}
+              />
             {/if}
           {/each}
         {/if}

From e78e58f05911617262852eae9c6242f89a745d84 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 14:22:08 -0400
Subject: [PATCH 05/13] Cleanup

---
 packages/layerchart/src/routes/app.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/layerchart/src/routes/app.css b/packages/layerchart/src/routes/app.css
index 13f4a0b59..cfbc45f96 100644
--- a/packages/layerchart/src/routes/app.css
+++ b/packages/layerchart/src/routes/app.css
@@ -28,9 +28,6 @@
 
 html {
   @apply bg-surface-200 accent-primary;
-  /* background-image:
-      radial-gradient(at 0% 0%, hsl(var(--color-secondary) / 0.33) 0px, transparent 50%),
-      radial-gradient(at 98% 1%, hsl(var(--color-primary) / 0.33) 0px, transparent 50%); */
 }
 
 nav h1 {

From 383b8263d98d561e2ffadb6c73ba4ce0af234581 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 14:50:21 -0400
Subject: [PATCH 06/13] fix(Spline): Pass `fillOpacity` prop (instead of
 `fill-opacity`) to support Canvas

---
 .changeset/witty-clocks-divide.md                |  5 +++++
 .../layerchart/src/lib/components/Arc.svelte     |  2 +-
 .../layerchart/src/lib/components/Bar.svelte     | 16 +++++++---------
 .../layerchart/src/lib/components/Spline.svelte  |  6 ++++--
 .../src/lib/components/charts/PieChart.svelte    |  2 +-
 5 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/witty-clocks-divide.md

diff --git a/.changeset/witty-clocks-divide.md b/.changeset/witty-clocks-divide.md
new file mode 100644
index 000000000..272e56390
--- /dev/null
+++ b/.changeset/witty-clocks-divide.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Spline): Pass `fillOpacity` prop (instead of `fill-opacity`) to support Canvas
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
index 8374c784a..86c517d14 100644
--- a/packages/layerchart/src/lib/components/Arc.svelte
+++ b/packages/layerchart/src/lib/components/Arc.svelte
@@ -221,7 +221,7 @@
   pathData={arc()}
   transform="translate({xOffset}, {yOffset})"
   {fill}
-  fill-opacity={fillOpacity}
+  {fillOpacity}
   {stroke}
   stroke-width={strokeWidth}
   class={className}
diff --git a/packages/layerchart/src/lib/components/Bar.svelte b/packages/layerchart/src/lib/components/Bar.svelte
index 8b765bc85..05b2b2b78 100644
--- a/packages/layerchart/src/lib/components/Bar.svelte
+++ b/packages/layerchart/src/lib/components/Bar.svelte
@@ -5,8 +5,6 @@
   import Rect from './Rect.svelte';
   import Spline from './Spline.svelte';
 
-  import { getRenderContext } from './Chart.svelte';
-  import { getCanvasContext } from './layout/Canvas.svelte';
   import { createDimensionGetter, type Insets } from '../utils/rect.js';
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -37,6 +35,7 @@
   export let y1: Accessor = undefined;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke = 'black';
   export let strokeWidth = 0;
   export let radius = 0;
@@ -113,19 +112,17 @@
       z`
     .split('\n')
     .join('');
-
-  const renderContext = getRenderContext();
-  const canvasContext = getCanvasContext();
 </script>
 
 {#if _rounded === 'all' || _rounded === 'none' || radius === 0}
   <Rect
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
     rx={_rounded === 'none' ? 0 : radius}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}
@@ -138,10 +135,11 @@
   <Spline
     {pathData}
     {fill}
-    {spring}
-    {tweened}
+    {fillOpacity}
     {stroke}
     {strokeWidth}
+    {spring}
+    {tweened}
     {onclick}
     {onpointerenter}
     {onpointermove}
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
index c18d6fb8a..12116c549 100644
--- a/packages/layerchart/src/lib/components/Spline.svelte
+++ b/packages/layerchart/src/lib/components/Spline.svelte
@@ -67,6 +67,7 @@
   export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
   export let opacity: number | undefined = undefined;
@@ -192,7 +193,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, stroke, strokeWidth, opacity },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -204,7 +205,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    $tweened_d && fillKey && strokeKey && strokeWidth && className;
+    $tweened_d && fillKey && fillOpacity && strokeKey && strokeWidth && className;
     canvasContext.invalidate();
   }
 
@@ -274,6 +275,7 @@
       {...$$restProps}
       class={cls('path-line', !fill && 'fill-none', !stroke && 'stroke-surface-content', className)}
       {fill}
+      fill-opacity={fillOpacity}
       {stroke}
       stroke-width={strokeWidth}
       {opacity}
diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
index 8dd764f34..921726d2d 100644
--- a/packages/layerchart/src/lib/components/charts/PieChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -258,7 +258,7 @@
                 {cornerRadius}
                 {padAngle}
                 fill={s.color ?? cScale?.(c(d))}
-                track={{ fill: s.color ?? cScale?.(c(d)), 'fill-opacity': 0.1 }}
+                track={{ fill: s.color ?? cScale?.(c(d)), fillOpacity: 0.1 }}
                 {tooltip}
                 data={d}
                 onclick={(e) => {

From d484dfc292777df6a46e8b2903817f56f311ebc3 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 16:43:08 -0400
Subject: [PATCH 07/13] Update semi-transparent CSS variable usage to use
 `opacity`, `fillOpacity` or `color-mix()` depending on the usage

---
 .../docs/components/AreaChart/+page.svelte    | 18 ++++----
 .../docs/components/BarChart/+page.svelte     |  7 +--
 .../docs/components/BrushContext/+page.svelte | 17 +++----
 .../docs/components/LineChart/+page.svelte    | 31 +++++--------
 .../docs/components/PieChart/+page.svelte     |  2 +-
 .../routes/docs/examples/Area/+page.svelte    | 44 +++++++++++--------
 .../routes/docs/examples/Line/+page.svelte    | 35 ++++++++-------
 7 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index e613cf3aa..e980f3a8e 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -26,6 +26,7 @@
   import type { DomainType } from '$lib/utils/scales.js';
   import Blockquote from 'layerchart/docs/Blockquote.svelte';
   import type { ComponentProps } from 'svelte';
+  import { cls } from '@layerstack/tailwind';
 
   export let data;
 
@@ -330,12 +331,11 @@
     >
       <svelte:fragment slot="marks" let:series let:tooltip>
         {#each series as s}
-          {@const color =
-            tooltip.data == null || tooltip.data.fruit === s.key
-              ? s.color
-              : 'hsl(var(--color-surface-content) / 20%)'}
+          {@const activeSeries = tooltip.data == null || tooltip.data.fruit === s.key}
 
-          <Area data={s.data} line={{ stroke: color }} fill={color} fillOpacity={0.3} />
+          <g class={cls(!activeSeries && 'opacity-20 saturate-0')}>
+            <Area data={s.data} line={{ stroke: s.color }} fill={s.color} fillOpacity={0.3} />
+          </g>
         {/each}
       </svelte:fragment>
 
@@ -510,13 +510,15 @@
           key: 'min_max',
           label: 'min/max',
           value: ['min', 'max'],
-          color: 'hsl(var(--color-primary) / 20%)',
+          color: 'var(--color-primary)',
+          props: { opacity: 0.2, line: { opacity: 0.2 } },
         },
         {
           key: 'minmin_maxmax',
           label: 'minmin/maxmax',
           value: ['minmin', 'maxmax'],
-          color: 'hsl(var(--color-primary) / 20%)',
+          color: 'var(--color-primary)',
+          props: { opacity: 0.2, line: { opacity: 0.2 } },
         },
       ]}
       {renderContext}
@@ -569,7 +571,7 @@
           {/each}
         </LinearGradient>
 
-        {#each funnelSegments as s}
+        {#each funnelSegments.slice(0, -1) as s}
           <Text
             value={s.value + '%'}
             x={xScale(x(s)) + segmentWidth / 2}
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
index c5c898fd9..70448ad59 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -227,7 +227,7 @@
       data={dateSeriesData}
       x="date"
       series={[
-        { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
+        { key: 'baseline', color: 'var(--color-surface-content)', props: { fillOpacity: 0.2 } },
         {
           key: 'value',
           color: 'var(--color-primary)',
@@ -249,7 +249,7 @@
       y="date"
       orientation="horizontal"
       series={[
-        { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
+        { key: 'baseline', color: 'var(--color-surface-content)', props: { fillOpacity: 0.2 } },
         { key: 'value', color: 'var(--color-primary)', props: { insets: { y: 4 } } },
       ]}
       {renderContext}
@@ -269,7 +269,8 @@
         {
           key: 'baseline',
           data: dateSeriesBaselineData,
-          color: 'hsl(var(--color-surface-content) / 20%)',
+          color: 'var(--color-surface-content)',
+          props: { fillOpacity: 0.2 },
         },
         {
           key: 'value',
diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
index 2e9670aa5..3581c8ac3 100644
--- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
@@ -525,14 +525,11 @@
               <Rule y={0} />
               <ChartClipPath>
                 <LinearGradient
-                  class="from-[hsl(var(--chart-color)/50%)] to-transparent"
+                  class="from-[color-mix(in_lch,var(--chart-color)_50%,_transparent)] to-transparent"
                   vertical
                   let:gradient
                 >
-                  <Area
-                    line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }}
-                    fill={gradient}
-                  />
+                  <Area line={{ class: 'stroke-2 stroke-(--chart-color)' }} fill={gradient} />
                 </LinearGradient>
               </ChartClipPath>
             </Svg>
@@ -555,8 +552,8 @@
           >
             <Svg>
               <Area
-                line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }}
-                class="fill-[hsl(var(--chart-color)/20%)]"
+                line={{ class: 'stroke-2 stroke-(--chart-color)' }}
+                class="fill-(--chart-color) opacity-20"
               />
               <!-- <Brush bind:xDomain mode="separated" /> -->
             </Svg>
@@ -776,11 +773,11 @@
 
 <style>
   :global(.striped-background) {
-    outline: 1px solid hsl(var(--color-secondary) / 50%);
+    outline: 1px solid color-mix(in lch, var(--color-secondary) 50%, transparent);
     background: repeating-linear-gradient(
       135deg,
-      hsl(var(--color-secondary) / 30%) 0 1px,
-      hsl(var(--color-secondary) / 10%) 0 6px
+      color-mix(in lch, var(--color-secondary) 30%, transparent) 0 1px,
+      color-mix(in lch, var(--color-secondary) 10%, transparent) 0 6px
     );
   }
 </style>
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index dcc006c04..8c6bf2a21 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -22,6 +22,7 @@
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
   import { interpolateTurbo } from 'd3-scale-chromatic';
+  import { cls } from '@layerstack/tailwind';
 
   export let data;
 
@@ -203,11 +204,13 @@
     >
       <svelte:fragment slot="marks" let:series let:tooltip>
         {#each series as s}
-          {@const color =
-            tooltip.data == null || tooltip.data.fruit === s.key
-              ? s.color
-              : 'hsl(var(--color-surface-content) / 20%)'}
-          <Spline data={multiSeriesData} y={s.key} stroke={color} />
+          {@const active = tooltip.data == null || tooltip.data.fruit === s.key}
+          <Spline
+            data={multiSeriesData}
+            y={s.key}
+            stroke={s.color}
+            class={cls(!active && 'opacity-20 saturate-0')}
+          />
         {/each}
       </svelte:fragment>
 
@@ -572,13 +575,8 @@
         return {
           key: year,
           data,
-          color:
-            year === 2024
-              ? 'var(--color-primary)'
-              : year === 2023
-                ? 'hsl(var(--color-primary) / 50%)'
-                : 'var(--color-surface-content)',
-          props: { opacity: [2023, 2024].includes(year) ? 1 : 0.1 },
+          color: year >= 2023 ? 'var(--color-primary)' : 'var(--color-surface-content)',
+          props: { opacity: year === 2024 ? 1 : year === 2023 ? 0.5 : 0.1 },
         };
       })}
       tooltip={{ mode: 'manual' }}
@@ -611,13 +609,8 @@
         return {
           key: year,
           data,
-          color:
-            year === 2024
-              ? 'var(--color-primary)'
-              : year === 2023
-                ? 'hsl(var(--color-primary) / 50%)'
-                : 'var(--color-surface-content)',
-          props: { opacity: [2023, 2024].includes(year) ? 1 : 0.1 },
+          color: year >= 2023 ? 'var(--color-primary)' : 'var(--color-surface-content)',
+          props: { opacity: year === 2024 ? 1 : year === 2023 ? 0.5 : 0.1 },
         };
       })}
       tooltip={{ mode: 'manual' }}
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
index b7c6906be..d5c2f948b 100644
--- a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -301,7 +301,7 @@
       series={data?.map((d) => ({ key: d.fruit, data: [d] }))}
       props={{
         arc: {
-          track: { fill: 'hsl(var(--color-surface-content) / 10%)' },
+          track: { fill: 'var(--color-surface-content)', fillOpacity: 0.1 },
         },
       }}
       outerRadius={-25}
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index bea8f2b89..02afb95a4 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -26,6 +26,7 @@
   } from 'layerchart';
   import { Field, Switch, Toggle } from 'svelte-ux';
   import { format, PeriodType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
@@ -387,24 +388,29 @@
           rule
         />
         {#each dataByFruit as [fruit, data]}
-          {@const color =
-            tooltip.data == null || tooltip.data.fruit === fruit
-              ? cScale?.(fruit)
-              : 'hsl(var(--color-surface-content) / 20%)'}
-          <Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />
-          <Point d={data[data.length - 1]} let:x let:y>
-            <circle cx={x} cy={y} r={4} fill={color} />
-            <Text
-              {x}
-              {y}
-              value={fruit}
-              verticalAnchor="middle"
-              dx={6}
-              dy={-2}
-              class="text-xs"
+          {@const active = tooltip.data == null || tooltip.data.fruit === fruit}
+          {@const color = cScale?.(fruit)}
+          <g class={cls(!active && 'opacity-20 saturate-0')}>
+            <Area
+              {data}
               fill={color}
+              fillOpacity={0.3}
+              line={{ class: 'stroke-2', stroke: color }}
             />
-          </Point>
+            <Point d={data[data.length - 1]} let:x let:y>
+              <circle cx={x} cy={y} r={4} fill={color} />
+              <Text
+                {x}
+                {y}
+                value={fruit}
+                verticalAnchor="middle"
+                dx={6}
+                dy={-2}
+                class="text-xs"
+                fill={color}
+              />
+            </Point>
+          </g>
         {/each}
         <Highlight points lines />
       </Svg>
@@ -541,9 +547,9 @@
           'var(--color-info)',
         ]}
         {@const secondaryColors = [
-          'hsl(var(--color-danger-500) / 10%)',
-          'hsl(var(--color-success-500) / 10%)',
-          'hsl(var(--color-info-500) / 10%)',
+          'color-mix(in lch, var(--color-danger) 10%, transparent)',
+          'color-mix(in lch, var(--color-success) 10%, transparent)',
+          'color-mix(in lch, var(--color-info) 10%, transparent)',
         ]}
 
         {#each chartDataArray(stackData) as seriesData, index}
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index b35bff40b..ee0022b52 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -4,6 +4,7 @@
   import { interpolateTurbo } from 'd3-scale-chromatic';
   import { format } from 'date-fns';
   import { formatDate, PeriodType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
   import {
     Axis,
@@ -376,23 +377,23 @@
           rule
         />
         {#each dataByFruit as [fruit, data]}
-          {@const color =
-            tooltip.data == null || tooltip.data.fruit === fruit
-              ? cScale?.(fruit)
-              : 'hsl(var(--color-surface-content) / 20%)'}
-          <Spline {data} class="stroke-2" stroke={color}>
-            <svelte:fragment slot="end">
-              <circle r={4} fill={color} />
-              <Text
-                value={fruit}
-                verticalAnchor="middle"
-                dx={6}
-                dy={-2}
-                class="text-xs"
-                fill={color}
-              />
-            </svelte:fragment>
-          </Spline>
+          {@const active = tooltip.data == null || tooltip.data.fruit === fruit}
+          {@const color = cScale?.(fruit)}
+          <g class={cls(!active && 'opacity-20 saturate-0')}>
+            <Spline {data} class="stroke-2" stroke={color}>
+              <svelte:fragment slot="end">
+                <circle r={4} fill={color} />
+                <Text
+                  value={fruit}
+                  verticalAnchor="middle"
+                  dx={6}
+                  dy={-2}
+                  class="text-xs"
+                  fill={color}
+                />
+              </svelte:fragment>
+            </Spline>
+          </g>
         {/each}
         <Highlight points lines />
       </Svg>

From 4dfee87f106201f89f319a651e90077153bd8fe4 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 11 Mar 2025 16:46:32 -0400
Subject: [PATCH 08/13] Add changeset

---
 .changeset/pink-showers-hunt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/pink-showers-hunt.md

diff --git a/.changeset/pink-showers-hunt.md b/.changeset/pink-showers-hunt.md
new file mode 100644
index 000000000..694666ef6
--- /dev/null
+++ b/.changeset/pink-showers-hunt.md
@@ -0,0 +1,5 @@
+---
+'layerchart': major
+---
+
+Tailwind 4 support

From 82bff433714493284646494147a7c17c88f1cf89 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 12 Mar 2025 10:55:53 -0400
Subject: [PATCH 09/13] Use `1%` instead of `0%` opacity for gradient examples
 to workaround gray gradient issue due to TW4's use of `color-mix()`

details: https://bsky.app/profile/techniq.dev/post/3lk6qr6e5b22t
---
 .../routes/docs/components/AreaChart/+page.svelte  |  2 +-
 .../docs/components/BrushContext/+page.svelte      | 14 +++++++-------
 .../src/routes/docs/examples/Area/+page.svelte     |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index e980f3a8e..a1a65e2cb 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -150,7 +150,7 @@
   <div class="h-[300px] p-4 border rounded-sm">
     <AreaChart data={dateSeriesData} x="date" y="value" {renderContext} {debug}>
       <svelte:fragment slot="marks">
-        <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+        <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
           <Area line={{ class: 'stroke-primary' }} fill={gradient} />
         </LinearGradient>
       </svelte:fragment>
diff --git a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
index 3581c8ac3..6f815651b 100644
--- a/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BrushContext/+page.svelte
@@ -246,7 +246,7 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+              <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
                 <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
@@ -283,7 +283,7 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+              <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
                 <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
@@ -325,7 +325,7 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+              <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
                 <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
@@ -355,7 +355,7 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+              <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
                 <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
@@ -425,7 +425,7 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+              <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
                 <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
@@ -459,7 +459,7 @@
           <Svg>
             <Axis placement="left" grid rule tweened={{ duration: 200 }} />
             <Axis placement="bottom" rule />
-            <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+            <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
               <Area
                 line={{ class: 'stroke-2 stroke-primary' }}
                 fill={gradient}
@@ -593,7 +593,7 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+              <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
                 <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index 02afb95a4..c3ca69a83 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -205,7 +205,7 @@
           format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+        <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
           <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
         </LinearGradient>
       </Svg>
@@ -233,8 +233,8 @@
           format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <LinearGradient class="from-secondary/0 to-secondary" let:gradient={strokeGradient}>
-          <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient={fillGradient}>
+        <LinearGradient class="from-secondary/1 to-secondary" let:gradient={strokeGradient}>
+          <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient={fillGradient}>
             <Area line={{ stroke: strokeGradient, class: 'stroke-2' }} fill={fillGradient} />
           </LinearGradient>
         </LinearGradient>
@@ -947,7 +947,7 @@
       let:tooltip
     >
       <Svg>
-        <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+        <LinearGradient class="from-primary/50 to-primary/1" vertical let:gradient>
           <Area line={{ class: 'stroke-2 stroke-primary opacity-20' }} fill={gradient} />
           <RectClipPath x={0} y={0} width={tooltip.data ? tooltip.x : width} {height} spring>
             <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />

From 3f43c09c97b7b83aed62837ae339019da22edbd0 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 12 Mar 2025 11:37:13 -0400
Subject: [PATCH 10/13] Refine getting started

---
 .../src/routes/getting-started/+page.svelte   | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/packages/layerchart/src/routes/getting-started/+page.svelte b/packages/layerchart/src/routes/getting-started/+page.svelte
index 258b4f359..53ba8b97f 100644
--- a/packages/layerchart/src/routes/getting-started/+page.svelte
+++ b/packages/layerchart/src/routes/getting-started/+page.svelte
@@ -4,7 +4,7 @@
   import Code from '$lib/docs/Code.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
 
-  let selectedTab = 'svelte-ux';
+  let selectedTab = 'standalone';
 </script>
 
 <div class="prose max-w-none bg-surface-100 rounded-sm border p-4 mt-4 m-2">
@@ -16,8 +16,8 @@
     variant="underline"
     classes={{ options: 'justify-start h-10 mb-3' }}
   >
-    <ToggleOption value="svelte-ux">with Svelte UX</ToggleOption>
     <ToggleOption value="standalone">Standalone</ToggleOption>
+    <ToggleOption value="svelte-ux">with Svelte UX</ToggleOption>
   </ToggleGroup>
 
   <div class="grid gap-3">
@@ -32,23 +32,24 @@
     {:else if selectedTab === 'standalone'}
       <div>
         <h2>Setup project</h2>
-        Use can use LayerChart with your existing project, such as
-        <a href="https://www.skeleton.dev/" target="_blank">Skeleton</a>,
-        <a href="https://www.shadcn-svelte.com/" target="_blank">shadcn-svelte</a>, or
-        <a href="https://daisyui.com/" target="_blank">Daisy UI</a>, although we are still
-        evaluating the best integration approach and would love your feedback (<a
-          href="https://discord.gg/697JhMPD3t"
-          target="_blank">Discord</a
-        >
-        or <a href="https://github.com/techniq/layerchart/pulls" target="_blank">pull requests</a>).
 
         <p>
-          You can also create a new Tailwind project following their
-          <a href="https://tailwindcss.com/docs/guides/sveltekit" target="_blank">guide</a>
-          or use
-          <a href="https://github.com/svelte-add/tailwindcss" target="_blank">svelte-add</a>.
+          To get started with a new project, use <a
+            href="https://svelte.dev/docs/cli/sv-create"
+            target="_blank">npx sv create</a
+          >, or add Tailwind to an existing project using
+          <a href="https://svelte.dev/docs/cli/sv-add" target="_blank">npx sv add tailwindcss</a>.
+          See also the official Tailwind
+          <a href="https://tailwindcss.com/docs/guides/sveltekit" target="_blank">guide</a>.
         </p>
 
+        You can use LayerChart with your existing project, such as
+        <a href="https://www.skeleton.dev/" target="_blank">Skeleton</a>,
+        <a href="https://www.shadcn-svelte.com/" target="_blank">shadcn-svelte</a>, or
+        <a href="https://daisyui.com/" target="_blank">Daisy UI</a>. See
+        <a href="https://github.com/techniq/layerchart/issues/160" target="_blank">here</a>
+        for ways to map colors to various framework palettes.
+
         <Blockquote>
           <div>
             Ongoing investigation to support non-Tailwind projects is being investigated, including
@@ -84,17 +85,14 @@
     </div>
   </Blockquote>
 
-  <div>Update LayerChart components to <code>tailwind.config.cjs</code> content</div>
-  <Code
-    source={`module.exports = {
-  content: [
-    './src/**/*.{html,svelte}', 
-    './node_modules/svelte-ux/**/*.{svelte,js}',
-    './node_modules/layerchart/**/*.{svelte,js}' // <--- Add this
-  ],
-};`}
-    language="js"
-  />
+  <div>
+    Add LayerChart directory as a source to your <code>app.css</code> to be scanned by
+    <a
+      href="https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources"
+      target="_blank">Tailwind</a
+    >
+  </div>
+  <Code source={`@source '../../node_modules/layerchart/dist';`} language="js" />
 
   <h2>Usage</h2>
 

From 8f6a0d88aa077603ca298179a34c7ea91223e3c4 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 12 Mar 2025 11:51:47 -0400
Subject: [PATCH 11/13] Restore prose heading styling (size/bold/margin)

---
 packages/layerchart/src/routes/app.css               | 12 ++++++++++++
 .../src/routes/getting-started/+page.svelte          |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/layerchart/src/routes/app.css b/packages/layerchart/src/routes/app.css
index cfbc45f96..bd3b0f7f6 100644
--- a/packages/layerchart/src/routes/app.css
+++ b/packages/layerchart/src/routes/app.css
@@ -38,6 +38,18 @@ nav h2 {
   @apply pt-4 pb-2 pl-4 text-xs text-surface-content font-bold;
 }
 
+.prose {
+  h1 {
+    @apply text-2xl font-extrabold;
+  }
+  h2 {
+    @apply text-xl font-bold mt-3;
+  }
+  h3 {
+    @apply text-lg font-semibold;
+  }
+}
+
 main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) {
   scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
 }
diff --git a/packages/layerchart/src/routes/getting-started/+page.svelte b/packages/layerchart/src/routes/getting-started/+page.svelte
index 53ba8b97f..38f041631 100644
--- a/packages/layerchart/src/routes/getting-started/+page.svelte
+++ b/packages/layerchart/src/routes/getting-started/+page.svelte
@@ -92,7 +92,7 @@
       target="_blank">Tailwind</a
     >
   </div>
-  <Code source={`@source '../../node_modules/layerchart/dist';`} language="js" />
+  <Code source={`@source '../../node_modules/layerchart/dist';`} language="css" />
 
   <h2>Usage</h2>
 

From 18f60ca33aec83ce1d7d4e0515e33a65349d41dd Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 12 Mar 2025 12:37:31 -0400
Subject: [PATCH 12/13] fix: Support `opacity` prop/style when Canvas rendered
 for all primatives

---
 .changeset/polite-parts-learn.md              |  5 +++++
 .../layerchart/src/lib/components/Arc.svelte  |  2 ++
 .../layerchart/src/lib/components/Area.svelte |  6 ++++--
 .../layerchart/src/lib/components/Bar.svelte  |  3 +++
 .../layerchart/src/lib/components/Bars.svelte |  4 ++++
 .../src/lib/components/Circle.svelte          |  5 ++++-
 .../src/lib/components/GeoPath.svelte         |  6 ++++--
 .../layerchart/src/lib/components/Line.svelte |  5 ++++-
 .../src/lib/components/Points.svelte          |  2 ++
 .../layerchart/src/lib/components/Rect.svelte |  5 ++++-
 .../layerchart/src/lib/components/Text.svelte | 21 +++++++++++++++++--
 11 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/polite-parts-learn.md

diff --git a/.changeset/polite-parts-learn.md b/.changeset/polite-parts-learn.md
new file mode 100644
index 000000000..3a5b58f51
--- /dev/null
+++ b/.changeset/polite-parts-learn.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Support `opacity` prop/style when Canvas rendered for all primatives
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
index 86c517d14..000f45ecb 100644
--- a/packages/layerchart/src/lib/components/Arc.svelte
+++ b/packages/layerchart/src/lib/components/Arc.svelte
@@ -80,6 +80,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = 'none';
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -224,6 +225,7 @@
   {fillOpacity}
   {stroke}
   stroke-width={strokeWidth}
+  {opacity}
   class={className}
   {...$$restProps}
   {onclick}
diff --git a/packages/layerchart/src/lib/components/Area.svelte b/packages/layerchart/src/lib/components/Area.svelte
index 3defc551f..793e7b0b4 100644
--- a/packages/layerchart/src/lib/components/Area.svelte
+++ b/packages/layerchart/src/lib/components/Area.svelte
@@ -61,6 +61,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -166,7 +167,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -178,7 +179,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    fillKey && fillOpacity && strokeKey && strokeWidth && className;
+    fillKey && fillOpacity && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -228,6 +229,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     {...$$restProps}
     class={cls('path-area', className)}
     on:click={onclick}
diff --git a/packages/layerchart/src/lib/components/Bar.svelte b/packages/layerchart/src/lib/components/Bar.svelte
index 05b2b2b78..4a679351d 100644
--- a/packages/layerchart/src/lib/components/Bar.svelte
+++ b/packages/layerchart/src/lib/components/Bar.svelte
@@ -38,6 +38,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke = 'black';
   export let strokeWidth = 0;
+  export let opacity: number | undefined = undefined;
   export let radius = 0;
 
   /** Control which corners are rounded with radius.  Uses <path> instead of <rect> when not set to `all` */
@@ -120,6 +121,7 @@
     {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
     rx={_rounded === 'none' ? 0 : radius}
     {spring}
     {tweened}
@@ -138,6 +140,7 @@
     {fillOpacity}
     {stroke}
     {strokeWidth}
+    {opacity}
     {spring}
     {tweened}
     {onclick}
diff --git a/packages/layerchart/src/lib/components/Bars.svelte b/packages/layerchart/src/lib/components/Bars.svelte
index 681bdb1df..72dd7a9c7 100644
--- a/packages/layerchart/src/lib/components/Bars.svelte
+++ b/packages/layerchart/src/lib/components/Bars.svelte
@@ -38,6 +38,8 @@
   export let strokeWidth = 0;
   export let radius = 0;
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
   export let insets: Insets | undefined = undefined;
@@ -64,8 +66,10 @@
         {x1}
         {y1}
         fill={fill ?? ($config.c ? $cGet(d) : null)}
+        {fillOpacity}
         {stroke}
         {strokeWidth}
+        {opacity}
         {radius}
         {insets}
         {spring}
diff --git a/packages/layerchart/src/lib/components/Circle.svelte b/packages/layerchart/src/lib/components/Circle.svelte
index 681ebc003..057adf18e 100644
--- a/packages/layerchart/src/lib/components/Circle.svelte
+++ b/packages/layerchart/src/lib/components/Circle.svelte
@@ -26,6 +26,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -59,7 +60,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -78,6 +79,7 @@
       fillOpacity &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -114,6 +116,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index af59a0b98..f8e154251 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -24,6 +24,7 @@
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   /**
    * Tooltip context to setup pointer events to show tooltip for related data
@@ -87,7 +88,7 @@
         styleOverrides
           ? merge({ styles: { strokeWidth } }, styleOverrides)
           : {
-              styles: { fill, stroke, strokeWidth },
+              styles: { fill, stroke, strokeWidth, opacity },
               classes: className,
             }
       );
@@ -100,7 +101,7 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when geojson, projection, or class change
-    geojson && _projection && fillKey && strokeKey && strokeWidth && className;
+    geojson && _projection && fillKey && strokeKey && strokeWidth && opacity && className;
     canvasContext.invalidate();
   }
 
@@ -153,6 +154,7 @@
       {fill}
       {stroke}
       stroke-width={strokeWidth}
+      {opacity}
       on:click={_onClick}
       on:pointerenter={_onPointerEnter}
       on:pointermove={_onPointerMove}
diff --git a/packages/layerchart/src/lib/components/Line.svelte b/packages/layerchart/src/lib/components/Line.svelte
index b6ab0baa3..73d94f183 100644
--- a/packages/layerchart/src/lib/components/Line.svelte
+++ b/packages/layerchart/src/lib/components/Line.svelte
@@ -28,6 +28,7 @@
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -79,7 +80,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, stroke, strokeWidth },
+            styles: { fill, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -98,6 +99,7 @@
       fillKey &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -133,6 +135,7 @@
     {fill}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
     class={cls(stroke === undefined && 'stroke-surface-content', className)}
diff --git a/packages/layerchart/src/lib/components/Points.svelte b/packages/layerchart/src/lib/components/Points.svelte
index 0df38600a..afdb23e2a 100644
--- a/packages/layerchart/src/lib/components/Points.svelte
+++ b/packages/layerchart/src/lib/components/Points.svelte
@@ -50,6 +50,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -188,6 +189,7 @@
       {fillOpacity}
       {stroke}
       {strokeWidth}
+      {opacity}
       class={className}
       {...$$restProps}
     />
diff --git a/packages/layerchart/src/lib/components/Rect.svelte b/packages/layerchart/src/lib/components/Rect.svelte
index b951dfa61..46f4eecf4 100644
--- a/packages/layerchart/src/lib/components/Rect.svelte
+++ b/packages/layerchart/src/lib/components/Rect.svelte
@@ -34,6 +34,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: ClassValue | undefined = undefined;
   export { className as class };
@@ -74,7 +75,7 @@
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
-            styles: { fill, fillOpacity, stroke, strokeWidth },
+            styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
             classes: className,
           }
     );
@@ -93,6 +94,7 @@
       fillKey &&
       strokeKey &&
       strokeWidth &&
+      opacity &&
       className;
     canvasContext.invalidate();
   }
@@ -133,6 +135,7 @@
     fill-opacity={fillOpacity}
     {stroke}
     stroke-width={strokeWidth}
+    {opacity}
     class={cls(fill == null && 'fill-surface-content', className)}
     {...$$restProps}
     on:click={onclick}
diff --git a/packages/layerchart/src/lib/components/Text.svelte b/packages/layerchart/src/lib/components/Text.svelte
index 2b718c153..465e10119 100644
--- a/packages/layerchart/src/lib/components/Text.svelte
+++ b/packages/layerchart/src/lib/components/Text.svelte
@@ -67,6 +67,7 @@
   export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
   export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
 
   let className: string | undefined = undefined;
   export { className as class };
@@ -202,7 +203,15 @@
         styleOverrides
           ? merge({ styles: { strokeWidth } }, styleOverrides)
           : {
-              styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
+              styles: {
+                fill,
+                fillOpacity,
+                stroke,
+                strokeWidth,
+                opacity,
+                paintOrder: 'stroke',
+                textAnchor,
+              },
               classes: cls(fill === undefined && 'fill-surface-content', className),
             }
       );
@@ -215,7 +224,14 @@
 
   $: if (renderContext === 'canvas') {
     // Redraw when props change
-    value && $tweened_x && $tweened_y && fillKey && strokeKey && strokeWidth && className;
+    value &&
+      $tweened_x &&
+      $tweened_y &&
+      fillKey &&
+      strokeKey &&
+      strokeWidth &&
+      opacity &&
+      className;
     canvasContext.invalidate();
   }
 
@@ -246,6 +262,7 @@
         fill-opacity={fillOpacity}
         {stroke}
         stroke-width={strokeWidth}
+        {opacity}
         class={cls(fill === undefined && 'fill-surface-content', className)}
       >
         {#each wordsByLines as line, index}

From 672e5c27db439e9f99185c4c938352e09deaf590 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 12 Mar 2025 12:43:53 -0400
Subject: [PATCH 13/13] docs(LineChart): Fix "Gradient threshold" highlight and
 tooltip color

---
 .../docs/components/LineChart/+page.svelte    | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index 8c6bf2a21..9035a5b6d 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -553,6 +553,29 @@
           <Spline stroke={gradient} />
         </LinearGradient>
       </svelte:fragment>
+
+      <svelte:fragment slot="highlight" let:tooltip let:y>
+        {#if tooltip.data}
+          <Highlight
+            lines
+            points={{ fill: y(tooltip.data) > 50 ? 'var(--color-danger)' : 'var(--color-info)' }}
+          />
+        {/if}
+      </svelte:fragment>
+
+      <svelte:fragment slot="tooltip" let:x let:y>
+        <Tooltip.Root let:data>
+          {@const value = y(data)}
+          <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+          <Tooltip.List>
+            <Tooltip.Item
+              label="value"
+              {value}
+              color={value > 50 ? 'var(--color-danger)' : 'var(--color-info)'}
+            />
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
     </LineChart>
   </div>
 </Preview>