techniq · techniq · Mar 3, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 11, 2025
diff --git a/.changeset/clear-regions-listen.md b/.changeset/clear-regions-listen.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(MultiSelect): Fix reactivity scope for filteredSelectedOptions and filteredUnselectedOptions. Issue #594
diff --git a/.changeset/cuddly-coins-tease.md b/.changeset/cuddly-coins-tease.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(Duration): Update Duration component to new `@layerstack/utils` `Duration` class
diff --git a/.changeset/dirty-pets-switch.md b/.changeset/dirty-pets-switch.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(Drawer): Fix display of action buttons
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/four-bears-join.md b/.changeset/four-bears-join.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix: Update deps include @layerstack/utils with improved format
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/loose-baths-make.md b/.changeset/loose-baths-make.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Update dependencies
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/open-hats-arrive.md b/.changeset/open-hats-arrive.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(DateRangeField): Include year when displaying month selection
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,21 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "svelte-ux": "1.0.0"
+  },
+  "changesets": [
+    "clear-regions-listen",
+    "cuddly-coins-tease",
+    "fair-bugs-carry",
+    "four-bears-join",
+    "green-maps-bathe",
+    "loose-baths-make",
+    "major-turkeys-ask",
+    "nice-onions-sell",
+    "open-hats-arrive",
+    "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/package.json b/package.json
@@ -17,11 +17,11 @@
     "up-deps": "pnpm update -r -i --latest"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.8",
+    "@changesets/cli": "^2.29.4",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "rimraf": "6.0.1",
-    "wrangler": "^4.14.4"
+    "wrangler": "^4.18.0"
   },
   "packageManager": "[email protected]"
 }
diff --git a/packages/svelte-ux/CHANGELOG.md b/packages/svelte-ux/CHANGELOG.md
@@ -1,5 +1,63 @@
 # svelte-ux
 
+## 2.0.0-next.6
+
+### Patch Changes
+
+- fix(MultiSelect): Fix reactivity scope for filteredSelectedOptions and filteredUnselectedOptions. Issue #594 ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+- fix: Update deps including @layerstack/utils with improved format ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+- fix(DateRangeField): Include year when displaying month selection ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+## 2.0.0-next.5
+
+### Patch Changes
+
+- fix(Duration): Update Duration component to new `@layerstack/utils` `Duration` class ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+- Update dependencies ([#571](https://github.com/techniq/svelte-ux/pull/571))
+
+## 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.6
 
 ### Patch Changes

diff --git a/packages/svelte-ux/package.json b/packages/svelte-ux/package.json
@@ -4,9 +4,9 @@
   "author": "Sean Lynch <[email protected]>",
   "license": "MIT",
   "repository": "techniq/svelte-ux",
-  "version": "1.0.6",
+  "version": "2.0.0-next.6",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --port 3001",
     "build": "vite build",
     "preview": "vite preview",
     "package": "svelte-package",
@@ -19,46 +19,45 @@
     "prepare": "svelte-kit sync"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.8",
+    "@changesets/cli": "^2.29.4",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@sveltejs/adapter-cloudflare": "^7.0.3",
-    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/culori": "^2.1.1",
+    "@tailwindcss/vite": "^4.1.8",
+    "@types/culori": "^4.0.0",
     "@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.1.4",
     "marked": "^15.0.7",
     "mdsvex": "^0.12.3",
-    "posthog-js": "^1.223.4",
-    "prettier": "^3.5.2",
-    "prettier-plugin-svelte": "^3.3.3",
+    "posthog-js": "^1.248.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "5.20.4",
-    "svelte-check": "^4.1.4",
-    "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.17",
+    "svelte": "5.33.10",
+    "svelte-check": "^4.2.1",
+    "svelte2tsx": "^0.7.39",
+    "tailwindcss": "^4.1.8",
     "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.1.4"
   },
   "type": "module",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
     "@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.6",
+    "@layerstack/svelte-stores": "1.0.2-next.6",
+    "@layerstack/svelte-table": "1.0.1-next.6",
+    "@layerstack/tailwind": "2.0.0-next.8",
+    "@layerstack/utils": "2.0.0-next.6",
     "@mdi/js": "^7.4.47",
     "culori": "^4.0.1",
     "d3-array": "^3.2.4",
@@ -69,9 +68,9 @@
     "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"
+    "zod": "^3.25.41"
   },
   "peerDependencies": {
     "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"

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
   )}