techniq · techniq · Mar 3, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 11, 2025
diff --git a/.changeset/fair-bugs-carry.md b/.changeset/fair-bugs-carry.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix: Use `next` releases for all `@layerstack/*` packages
diff --git a/.changeset/green-maps-bathe.md b/.changeset/green-maps-bathe.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+docs: Update @layerstack/tailwind to `2.0.0-next.1`, fixing styling of tailwind typography when deployed
diff --git a/.changeset/major-turkeys-ask.md b/.changeset/major-turkeys-ask.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(Menu): Support `bind:open` (underlying Popover)
diff --git a/.changeset/nice-onions-sell.md b/.changeset/nice-onions-sell.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+feat(DateRangeField): Add `quickPresets` support
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,16 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "svelte-ux": "1.0.0"
+  },
+  "changesets": [
+    "fair-bugs-carry",
+    "green-maps-bathe",
+    "major-turkeys-ask",
+    "nice-onions-sell",
+    "ready-planets-deny",
+    "wide-months-rescue",
+    "witty-spies-divide"
+  ]
+}
diff --git a/.changeset/ready-planets-deny.md b/.changeset/ready-planets-deny.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': major
+---
+
+Tailwind 4 support
diff --git a/.changeset/wide-months-rescue.md b/.changeset/wide-months-rescue.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(DateRange): Fix selection gradient
diff --git a/.changeset/witty-spies-divide.md b/.changeset/witty-spies-divide.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Switch from `@tailwindcss/postcss` to `@tailwindcss/vite`. Update all non-major packages
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ The projects aims to simplify building highly interactive and visual application
 
 The components are built using Tailwind with extensibility and customization in mind through the use of theming, variants, granular class overrides, and slots. A rich design token system is also currently in the works.
 
-See also the companion library [LayerChart](https://layerchart.com) for a large collection of composable chart components to build a wide range of visualizations.
+See also the companion library [LayerChart](https://layerchart.com) for a large collection of composable chart components to build a wide range of visualizations and [LayerStack](https://layerstack.dev) for a collection of svelte stores, actions, and general utilities.
 
 ## Contributing
 

diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md
@@ -1,5 +1,45 @@
 # svelte-ux
 
+## 2.0.0-next.4
+
+### Patch Changes
+
+- fix(Menu): Support `bind:open` (underlying Popover) ([#584](https://github.com/techniq/svelte-ux/pull/584))
+
+- feat(DateRangeField): Add `quickPresets` support ([#584](https://github.com/techniq/svelte-ux/pull/584))
+
+- fix(DateRange): Fix selection gradient ([#584](https://github.com/techniq/svelte-ux/pull/584))
+
+## 2.0.0-next.3
+
+### Patch Changes
+
+- fix(SelectField|MultiSelect): Unify and enhance search functionality, enabling new custom search capability in MultiSelect.
+
+## 2.0.0-next.2
+
+### Patch Changes
+
+- Switch from `@tailwindcss/postcss` to `@tailwindcss/vite`. Update all non-major packages
+
+## 2.0.0-next.1
+
+### Patch Changes
+
+- fix: Use `next` releases for all `@layerstack/*` packages ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+- docs: Update @layerstack/tailwind to `2.0.0-next.1`, fixing styling of tailwind typography when deployed ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+## 2.0.0-next.0
+
+### Major Changes
+
+- Tailwind 4 support ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+### Patch Changes
+
+- fix(Progress): Fix `TypeError: Failed to set the 'value' property on 'HTMLProgressElement': The provided double value is non-finite.` ([`6c2efa2`](https://github.com/techniq/svelte-ux/commit/6c2efa2d6d5b1a7ccf2b99c1826bc1232c51d2cc))
+
 ## 1.0.4
 
 ### Patch Changes

diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/svelte-ux",
-  "version": "1.0.4",
+  "version": "2.0.0-next.4",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -22,43 +22,42 @@
     "@changesets/cli": "^2.27.8",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@sveltejs/adapter-cloudflare": "^4.9.0",
-    "@sveltejs/kit": "^2.17.3",
+    "@sveltejs/kit": "^2.19.0",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.14",
     "@types/culori": "^2.1.1",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.5",
-    "@vitest/coverage-v8": "^3.0.7",
-    "autoprefixer": "^10.4.20",
-    "daisyui": "^4.12.24",
+    "@vitest/coverage-v8": "^3.0.8",
     "marked": "^15.0.7",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.223.4",
-    "prettier": "^3.5.2",
+    "posthog-js": "^1.230.4",
+    "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "rehype-slug": "^6.0.0",
-    "svelte": "5.20.4",
-    "svelte-check": "^4.1.4",
-    "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.17",
+    "svelte": "5.23.0",
+    "svelte-check": "^4.1.5",
+    "svelte2tsx": "^0.7.35",
+    "tailwindcss": "^4.0.14",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3",
+    "typescript": "^5.8.2",
     "unist-util-visit": "^5.0.0",
-    "vite": "^6.2.0",
-    "vitest": "^3.0.7"
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8"
   },
   "type": "module",
   "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.1",
-    "@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.2",
+    "@layerstack/utils": "1.1.0-next.0",
     "@mdi/js": "^7.4.47",
     "culori": "^4.0.1",
     "d3-array": "^3.2.4",
@@ -69,7 +68,7 @@
     "lodash-es": "^4.17.21",
     "prism-svelte": "^0.5.0",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "sveld": "^0.22.1",
     "zod": "^3.24.2"
   },

diff --git a/packages/svelte-ux/postcss.config.cjs b/packages/svelte-ux/postcss.config.cjs
diff --git a/packages/svelte-ux/src/docs/Blockquote.svelte b/packages/svelte-ux/src/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/svelte-ux/src/docs/ViewSourceButton.svelte b/packages/svelte-ux/src/docs/ViewSourceButton.svelte
@@ -20,9 +20,9 @@
     <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="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
           <div class="text-xs text-surface-content/50 truncate">{href}</div>

diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte
@@ -34,7 +34,7 @@
     headerPosition === 'full' || temporaryDrawer
       ? '[&>header]:w-full'
       : '[&>header]:w-[calc(100%-var(--drawerWidth))] [&>header]:left-[var(--drawerWidth)] [&>header]:duration-500',
-    '[&>main]:md:ml-[var(--drawerWidth)] [&>main]:mt-[var(--headerHeight)] [&>main]:transition-[margin] [&>main]:duration-500',
+    'md:[&>main]:ml-(--drawerWidth) [&>main]:mt-[var(--headerHeight)] [&>main]:transition-[margin] [&>main]:duration-500',
     /* Fix scrolling offset for headings (h1, ...) or other elements with an id set (`<a href="#id">`) */
     '[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
     settingsClasses.root,

diff --git a/packages/svelte-ux/src/lib/components/Avatar.svelte b/packages/svelte-ux/src/lib/components/Avatar.svelte
@@ -14,7 +14,7 @@
 <div
   class={cls(
     'Avatar',
-    'rounded-full inline-flex items-center justify-center flex-shrink-0',
+    'rounded-full inline-flex items-center justify-center shrink-0',
     {
       sm: 'w-6 h-6',
       md: 'w-10 h-10',

diff --git a/packages/svelte-ux/src/lib/components/Backdrop.svelte b/packages/svelte-ux/src/lib/components/Backdrop.svelte
@@ -19,7 +19,7 @@
   class={cls(
     'Backdrop',
     'fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-surface-content/50 dark:bg-surface-300/70',
-    blur && 'backdrop-blur-sm',
+    blur && 'backdrop-blur-xs',
     settingsClasses.root,
     className
   )}