fix: update for version 2 (#1887)

* fix(accordion): update for version 2

* fix: coderabbitai fix

* fix(alert): color update, CloseButton update

* fix(alert): coderabbitai fix

* fix: add src/plugin-utilites

* fix: coderabbitai fix

* fix(badge): update

* fix: coderabbitai fix

* fix: add legacy colors to alert and badge

* fix(bottom-navigation): update

* fix(bottom-navigation): theme

* fix(breadcrumb): update and tests

* fix(button-group): tests

* fix(button): update theme and tests

* fix(image): update people image

* fix(image): update people image

* fix: coderabbitai fix

* fix(clipboard): examples update

* tests(clipboard): new tests

* tests(datepicker): test, add script/sync-plugin-utilities-export

* fix: add eslint-disable-next-line for any

* fix: initiate tailwindcss colors by adding src/routes/color-test/

* tests(device-mockups): add tests

* tests(dialog): unit tests

* fix(drawer): update

* fix: coderabbitai fix

* tests(drawer): drawer and dropdown

* tests(footer): add unit tests

* fix: coderabbitai fix

* fix: coderabbitai fix

* tests: button-toggle, checkbox, dropzone, fileupload

* fix: coderabbitai fix

* tests(floating-label): unit tests

* fix: coderabbitai fix

Author: shinokada

.coderabbit.yml

@@ -1,4 +1,8 @@
 reviews:
+  auto_review:
+    enabled: true
+    base_branches:
+      - ".*"
   tools:
     github-checks:
       timeout_ms: 300000

.prettierignore

@@ -6,6 +6,7 @@ samples/
 src/routes/md/
 src/routes/testdir
 *.html
-src/routes/utils/highlight
+**/utils/highlight/**
 /.vercel
 *.md
+

AGENTS.md

@@ -0,0 +1,110 @@
+# Theme Selector - Quick Start Guide
+
+## What's Ready Now ✅
+
+I've made the following changes to fix your theme selector:
+
+### 1. Core Files Updated
+- **`layout.css`**: Now loads base Flowbite styles; fonts loaded dynamically
+- **`+layout.svelte`**: Properly initializes theme from localStorage  
+- **`themeStore.svelte.ts`**: Fixed font URLs and theme loading logic
+
+### 2. Working Themes
+- **Default** ✅ (`default-runtime.css` created)
+- **Enterprise** ✅ (`enterprise-runtime.css` created)
+
+### 3. Themes Still Needing Conversion
+- **Minimal**: Need to create `minimal-runtime.css`
+- **Playful**: Need to create `playful-runtime.css`
+- **Mono**: Need to create `mono-runtime.css`
+
+## Quick Test (5 minutes)
+
+### 1. Test What's Working Now
+```bash
+npm run dev
+```
+
+Visit `/theme-test` and try switching between **Default** and **Enterprise** themes. You should see:
+- Colors change (blue → cyan for Enterprise)
+- Fonts change (Inter → STIX Two Text for Enterprise)
+- All components update instantly
+
+### 2. Complete the Setup
+
+**Option A: Manual (Fastest)**
+For each remaining theme file (`minimal.css`, `playful.css`, `mono.css`):
+
+1. Copy the file to a `-runtime.css` version
+2. Open it and replace `@theme {` with `:root {`
+3. Save the file
+
+**Option B: Automated**
+```bash
+node convertThemes.js
+```
+
+Then update `themeStore.svelte.ts` to use `-runtime.css` for the remaining themes.
+
+## Why This Fix Was Needed
+
+**The Problem**: Tailwind CSS v4's `@theme` directive is a compile-time feature. Your theme files are in `static/themes/` (not processed at build time), so when loaded dynamically, the `@theme` blocks don't work.
+
+**The Solution**: Convert `@theme {}` to `:root {}` so they work as standard CSS custom properties at runtime.
+
+## Notes
+
+### Google Sans Code Font Issue
+The `mono` theme uses "Google Sans Code", which isn't publicly available on Google Fonts (it's proprietary). You have two options:
+
+1. **Keep it**: The browser will fall back to system monospace fonts
+2. **Replace it**: Change to "Roboto Mono" or "JetBrains Mono" in both:
+   - `static/themes/mono.css` (and `mono-runtime.css`)
+   - `themeStore.svelte.ts`
+
+### How Dynamic Loading Works
+
+1. Base theme from Flowbite provides foundational CSS variables
+2. When you switch themes:
+   - Old theme CSS and fonts are removed
+   - New theme's font loads from Google Fonts
+   - New theme's CSS loads and overrides base variables
+   - Style recalculation is triggered
+3. Theme choice saved to localStorage for persistence
+
+## Troubleshooting
+
+### Theme doesn't change
+- Check browser console for CSS load errors
+- Verify the `-runtime.css` file exists in `static/themes/`
+- Check Network tab to see if CSS file is loading (200 status)
+
+### Fonts don't change
+- Verify font URL in `themeStore.svelte.ts` matches font in CSS file
+- Check Network tab for font file loads
+- Some fonts may take a moment to load
+
+### Colors look wrong
+- Make sure you're using the `-runtime.css` version
+- Check that `:root {` is used instead of `@theme {`
+- Clear browser cache and reload
+
+## Testing Checklist
+
+- [ ] Default theme loads on page load
+- [ ] Enterprise theme works when selected
+- [ ] Switch between Default and Enterprise multiple times
+- [ ] Reload page - theme persists from localStorage
+- [ ] Convert remaining themes (Minimal, Playful, Mono)
+- [ ] Test all 5 themes work correctly
+- [ ] Test theme switching in light and dark modes
+- [ ] Verify fonts load and change correctly
+
+## Next Steps
+
+Once all themes are converted and working:
+1. You can delete the original `.css` files (keep only `-runtime.css`)
+2. Remove the `convertThemes.js` script if you used it
+3. Update your README with theme switching info
+
+Need help? Check `THEME_SELECTOR_FIX.md` for detailed explanation!

QUICK_START.md

@@ -0,0 +1,116 @@
+# Theme Selector Fix - Summary
+
+## The Problem
+Your theme CSS files use Tailwind CSS v4's `@theme` directive, which is a **compile-time directive**. When these files are loaded dynamically at runtime from the `static/themes/` directory, the `@theme` blocks don't work because they're not being processed by Tailwind's compiler.
+
+## The Solution
+Convert all theme CSS files to use standard CSS `:root {}` blocks instead of `@theme {}` blocks. This allows them to work when loaded dynamically at runtime.
+
+## What I've Done
+
+### 1. Updated `layout.css`
+- Removed static font imports
+- Kept base Flowbite theme (`flowbite/src/themes/themes.css`) for foundational variables
+- Font loading is now handled dynamically by the theme store
+
+### 2. Updated `+layout.svelte`
+- Now loads the saved theme initially for better SSR/first render
+- Properly initializes the theme on mount
+
+### 3. Fixed `themeStore.svelte.ts`
+- Fixed font URLs to match actual fonts in theme CSS files
+- Improved theme loading logic to remove ALL existing theme links
+- Added better style recalculation after theme loads
+
+### 4. Created `enterprise-runtime.css`
+- This is the enterprise theme converted to use `:root {}` instead of `@theme {}`
+- Updated the themeStore to use this file for the enterprise theme
+
+## What You Need To Do
+
+### Option 1: Quick Manual Conversion (Recommended)
+For each theme file in `static/themes/`, create a `-runtime.css` version:
+
+1. Copy the file (e.g., `default.css` → `default-runtime.css`)
+2. Replace `@theme {` with `:root {`
+3. Save the file
+
+### Option 2: Use the Conversion Script
+I've created `convertThemes.js` in your project root:
+
+```bash
+node convertThemes.js
+```
+
+This will automatically create `-runtime.css` versions of all your theme files.
+
+### After Conversion
+Update `themeStore.svelte.ts` to use the `-runtime.css` files:
+
+```typescript
+const themes: Theme[] = [
+  {
+    id: "default",
+    name: "Default",
+    cssPath: "/themes/default-runtime.css",  // Add -runtime
+    fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap",
+    colors: ["bg-gray-100 dark:bg-gray-700", "bg-blue-50 dark:bg-blue-900", "bg-blue-200 dark:bg-blue-800", "bg-blue-700 dark:bg-blue-700"]
+  },
+  {
+    id: "minimal",
+    name: "Minimal",
+    cssPath: "/themes/minimal-runtime.css",  // Add -runtime
+    fontUrl: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap",
+    colors: ["bg-stone-50 dark:bg-stone-600", "bg-stone-100 dark:bg-stone-700", "bg-stone-300 dark:bg-stone-800", "bg-stone-900 dark:bg-stone-900"]
+  },
+  // Enterprise is already done!
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    cssPath: "/themes/enterprise-runtime.css",
+    fontUrl: "https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap",
+    colors: ["bg-zinc-100 dark:bg-zinc-700", "bg-cyan-50 dark:bg-cyan-900", "bg-cyan-100 dark:bg-cyan-800", "bg-cyan-700 dark:bg-cyan-700"]
+  },
+  {
+    id: "playful",
+    name: "Playful",
+    cssPath: "/themes/playful-runtime.css",  // Add -runtime
+    fontUrl: "https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap",
+    colors: ["bg-slate-100 dark:bg-slate-700", "bg-pink-50 dark:bg-pink-900", "bg-pink-100 dark:bg-pink-800", "bg-pink-700 dark:bg-pink-700"]
+  },
+  {
+    id: "mono",
+    name: "Mono",
+    cssPath: "/themes/mono-runtime.css",  // Add -runtime
+    fontUrl: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@300;400;500;600;700&display=swap",
+    colors: ["bg-neutral-100 dark:bg-neutral-700", "bg-indigo-50 dark:bg-indigo-900", "bg-indigo-100 dark:bg-indigo-800", "bg-indigo-700 dark:bg-indigo-700"]
+  }
+];
+```
+
+## Testing
+
+1. **Test Enterprise Theme First**: I've already converted this one, so switch to the Enterprise theme and see if colors/fonts change
+2. **Convert Other Themes**: Use one of the methods above to convert the remaining themes
+3. **Update themeStore**: Update all paths to use `-runtime.css` versions
+4. **Test All Themes**: Visit `/theme-test` and try switching between all themes
+
+## How It Works Now
+
+1. Base Flowbite theme is loaded from `layout.css` (provides foundational styles)
+2. When you select a theme, JavaScript:
+   - Removes any existing theme CSS links
+   - Loads the new theme's font from Google Fonts
+   - Loads the new theme's CSS variables (runtime version)
+   - Forces a style recalculation
+3. CSS variables from the runtime theme override the base theme
+4. Theme preference is saved to localStorage
+
+## Why This Works
+
+- CSS custom properties (variables) can be changed at runtime
+- Later-loaded stylesheets override earlier ones
+- The `-runtime.css` files use standard `:root {}` blocks that work at runtime
+- Font loading is dynamic and matches the theme
+
+The theme selector should now work perfectly! Let me know if you need help with the conversion or run into any issues.

THEME_SELECTOR_FIX.md

@@ -0,0 +1,90 @@
+# Troubleshooting TypeScript Errors
+
+## If you're seeing "validation does not exist in type FloatingLabelInputProps"
+
+This is a TypeScript caching issue. The types ARE correct in `src/lib/types.ts` (lines 772-786), but TypeScript/Svelte language server may need to reload.
+
+### Solutions (try in order):
+
+1. **Restart TypeScript Server in VS Code**
+   - Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
+   - Type: "TypeScript: Restart TS Server"
+   - Press Enter
+
+2. **Reload VS Code Window**
+   - Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
+   - Type: "Developer: Reload Window"
+   - Press Enter
+
+3. **Clear node_modules and reinstall**
+   ```bash
+   rm -rf node_modules
+   npm install
+   ```
+
+4. **Clear Svelte language server cache**
+   ```bash
+   rm -rf ~/.vscode/extensions/svelte.svelte-vscode-*/
+   ```
+
+5. **Build the project**
+   ```bash
+   npm run build
+   ```
+
+## What was changed?
+
+### FloatingLabelInputProps (in `src/lib/types.ts`)
+**Removed:**
+- `color?: FloatingLabelInputVaratiants["color"]`
+
+**Added:**
+- `validation?: FloatingLabelInputVaratiants["validation"]` - New semantic validation states (none, success, error)
+- `disabled?: FloatingLabelInputVaratiants["disabled"]` - Explicit disabled state
+- `withIcon?: FloatingLabelInputVaratiants["withIcon"]` - Icon support flag
+
+### Theme changes (in `src/lib/forms/floating-label/theme.ts`)
+**Removed:**
+- All individual color variants (primary, red, green, blue, etc.)
+
+**Added:**
+- `validation` variant with three semantic states:
+  - `none` - Default state
+  - `success` - Success state with green colors
+  - `error` - Error state with red colors
+- `disabled` variant for proper disabled styling
+- `withIcon` variant for icon alignment
+
+### Component changes (in `FloatingLabelInput.svelte`)
+**Updated props:**
+```typescript
+// OLD
+color = "brand"
+
+// NEW
+validation = "none"
+disabled = false
+withIcon = false
+```
+
+## Usage Examples
+
+```svelte
+<!-- Default -->
+<FloatingLabelInput>Label</FloatingLabelInput>
+
+<!-- Success -->
+<FloatingLabelInput validation="success">Success Label</FloatingLabelInput>
+
+<!-- Error -->
+<FloatingLabelInput validation="error">Error Label</FloatingLabelInput>
+
+<!-- Disabled -->
+<FloatingLabelInput disabled={true}>Disabled Label</FloatingLabelInput>
+
+<!-- With icon -->
+<FloatingLabelInput withIcon={true}>
+  <EnvelopeOutline class="w-4 h-4 me-1.5" />
+  Email
+</FloatingLabelInput>
+```

TROUBLESHOOTING.md

@@ -0,0 +1,13 @@
+#!/bin/bash
+# Usage: Stop your dev server before running this script.
+# This script clears build caches and requires a dev server restart.
+
+echo "Clearing build caches..."
+
+# Remove .svelte-kit directory
+rm -rf .svelte-kit || echo "Warning: Failed to remove .svelte-kit"
+
+# Remove node_modules/.vite cache
+rm -rf node_modules/.vite || echo "Warning: Failed to remove node_modules/.vite"
+
+echo "Caches cleared! Now restart your dev server with: pnpm dev"