fix: update for version 2

.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
+

clear-cache.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Stop the dev server if running
+echo "Clearing build caches..."
+
+# Remove .svelte-kit directory
+rm -rf .svelte-kit
+
+# Remove node_modules/.vite cache
+rm -rf node_modules/.vite
+
+echo "Caches cleared! Now restart your dev server with: pnpm dev"

package.json

@@ -2,7 +2,6 @@
   "name": "flowbite-svelte",
   "version": "1.31.0",
   "description": "Flowbite components for Svelte",
-  "main": "dist/index.js",
   "author": {
     "name": "Shinichi Okada",
     "email": "connect@codewithshin.com",
@@ -25,10 +24,12 @@
     "format": "prettier --write .",
     "test:e2e": "playwright test",
     "test:unit": "vitest",
+    "test:unit-t": "vitest run -t",
     "gen:exports": "svelte-lib-helpers exports",
     "gen:docspropvalue": "svelte-lib-helpers docspropvalue themesberg/flowbite-svelte",
     "gen:component-data-prop-value": "svelte-lib-helpers component-data-prop-value themesberg/flowbite-svelte",
     "copy:packagejson": "svelte-lib-helpers package",
+    "sync:exports": "./scripts/sync-plugin-utilities-export.sh",
     "lib-helpers": "pnpm gen:component-data-prop-value && pnpm gen:docspropvalue && pnpm format && pnpm package && pnpm gen:exports && pnpm copy:packagejson && pnpm llm",
     "llm": "svelte-doc-llm && ./scripts/update-llms.sh",
     "ch": "npx changeset",
@@ -53,7 +54,7 @@
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.2.9",
+    "@testing-library/svelte": "^5.2.10",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.7.2",
     "@vitest/browser": "^4.0.16",
@@ -87,7 +88,7 @@
     "satori-html": "^0.3.2",
     "super-sitemap": "^1.0.5",
     "svelte": "^5.46.0",
-    "svelte-check": "^4.3.4",
+    "svelte-check": "^4.3.5",
     "svelte-doc-llm": "^0.8.0",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.5.0",
@@ -155,7 +156,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "esm-env": "^1.2.2",
-    "flowbite": "^3.1.2",
+    "flowbite": "^4.0.1",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2"
   },
@@ -915,4 +916,4 @@
     },
     "./package.json": "./package.json"
   }
-}
+}

scripts/sync-plugin-utilities-export.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+set -e
+
+FILE="package.json"
+
+# 1. Remove existing "./plugin-utilities" export block (if any)
+sed -i '' '/"\.\/plugin-utilities": {/,/^[[:space:]]*},/d' "$FILE" 2>/dev/null \
+|| sed -i '/"\.\/plugin-utilities": {/,/^[[:space:]]*},/d' "$FILE"
+
+# 2. Insert the correct block before "./package.json"
+sed -i '' '/"\.\/package\.json": "\.\/package\.json"/i\
+  "./plugin-utilities": {\
+    "types": "./dist/plugin-utilities.d.ts",\
+    "import": "./dist/plugin-utilities.js",\
+    "default": "./dist/plugin-utilities.js"\
+  },\
+' "$FILE" 2>/dev/null \
+|| sed -i '/"\.\/package\.json": "\.\/package\.json"/i\
+  "./plugin-utilities": {\
+    "types": "./dist/plugin-utilities.d.ts",\
+    "import": "./dist/plugin-utilities.js",\
+    "default": "./dist/plugin-utilities.js"\
+  },\
+' "$FILE"

src/app.css

@@ -1,18 +1,29 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
+/* MINIMAL THEME
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+*/
+
+/* ENTERPRISE THEME
+@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+*/
+
+/* PLAYFUL THEME
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
+*/
+
 @import "tailwindcss";
+@import "flowbite/src/themes/default";
+/* @import "flowbite/src/themes/minimal"; */
+/* @import "flowbite/src/themes/enterprise"; */
+/* @import "flowbite/src/themes/playful"; */
+/* @import "flowbite/src/themes/mono"; */
 
 @plugin "flowbite/plugin";
+@plugin "./lib/plugin-utilities";
 @plugin "flowbite-typography";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
-@source "../node_modules/simple-datatables/dist";
-@source "../node_modules/@flowbite-svelte-plugins/datatable/dist";
-@source "../node_modules/@flowbite-svelte-plugins/chart/dist";
-@source "../node_modules/@flowbite-svelte-plugins/texteditor/dist";
-@source "../node_modules/flowbite-svelte-icons/dist";
-@source "../node_modules/flowbite-svelte-blocks/dist";
-@source "../node_modules/flowbite-svelte-admin-dashboard/dist";
-
 .datatable-pagination .datatable-active a,
 .datatable-pagination .datatable-active a:focus,
 .datatable-pagination .datatable-active a:hover,
@@ -30,6 +41,13 @@
 @theme {
   --z-index-100: 100;
 
+  /* Border widths */
+  --border-width-0: 0px;
+  --border-width: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
   --color-primary-50: #fff5f2;
   --color-primary-100: #fff1ee;
   --color-primary-200: #ffe4de;
@@ -51,16 +69,24 @@
   --color-secondary-700: #0369a1;
   --color-secondary-800: #075985;
   --color-secondary-900: #0c4a6e;
-}
 
-/*
-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.
+  /* Uncomment following lines to override Flowbite brand colors with primary colors */
+  /* --color-brand-softer: var(--color-primary-50);
+  --color-brand-soft: var(--color-primary-100);
+  --color-brand: var(--color-primary-700);
+  --color-brand-medium: var(--color-primary-200);
+  --color-brand-strong: var(--color-primary-800); */
+
+  /* Uncomment following lines to override brand foreground (text) colors */
+  /* --color-fg-brand-subtle: var(--color-primary-200);
+  --color-fg-brand: var(--color-primary-700);
+  --color-fg-brand-strong: var(--color-primary-900); */
+
+  /* Uncomment following lines to override brand border colors */
+  /* --color-brand-subtle: var(--color-primary-200);
+  --color-brand-light: var(--color-primary-600); */
+}
 
-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,
@@ -73,6 +99,22 @@ color utility to any element that depends on these defaults.
   [role="button"] {
     cursor: pointer;
   }
+
+  /* Uncomment following lines to override brand colors in dark mode */
+  /* .dark {
+    --color-brand-softer: var(--color-primary-900);
+    --color-brand-soft: var(--color-primary-800);
+    --color-brand: var(--color-primary-600);
+    --color-brand-medium: var(--color-primary-800);
+    --color-brand-strong: var(--color-primary-700);
+
+    --color-fg-brand-subtle: var(--color-primary-200);
+    --color-fg-brand: var(--color-primary-500);
+    --color-fg-brand-strong: var(--color-primary-400);
+
+    --color-brand-subtle: var(--color-primary-800);
+    --color-brand-light: var(--color-primary-600);
+  } */
 }
 
 @import "../static/styles/docs.css";

src/lib/accordion/Accordion.svelte

@@ -7,7 +7,7 @@
   import { createSingleSelectionContext } from "$lib/utils/singleselection.svelte";
   import { untrack } from "svelte";
 
-  let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props();
+  let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, classes, ...restProps }: AccordionProps = $props();
 
   const theme = $derived(getTheme("accordion"));
 
@@ -16,14 +16,11 @@
     get flush() {
       return flush;
     },
-    get activeClass() {
-      return activeClass;
-    },
-    get inactiveClass() {
-      return inactiveClass;
-    },
     get transitionType() {
       return transitionType;
+    },
+    get classes() {
+      return classes;
     }
   };
 

src/lib/accordion/AccordionItem.svelte

@@ -1,49 +1,25 @@
 <script lang="ts">
   import type { AccordionItemProps, ParamsType } from "$lib";
-  import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
+  import { getTheme } from "$lib/theme/themeUtils";
   import { useSingleSelection } from "$lib/utils/singleselection.svelte";
   import clsx from "clsx";
   import { getAccordionContext } from "$lib/context";
   import { slide } from "svelte/transition";
   import { accordionItem } from "./theme";
-  import { untrack } from "svelte";
 
-  let {
-    children,
-    header,
-    arrowup,
-    arrowdown,
-    open = $bindable(false),
-    activeClass,
-    inactiveClass,
-    transitionType = slide,
-    transitionParams,
-    class: className,
-    classes,
-    headerClass,
-    contentClass
-  }: AccordionItemProps = $props();
-
-  warnThemeDeprecation(
-    "AccordionItem",
-    untrack(() => ({
-      headerClass,
-      contentClass,
-      activeClass,
-      inactiveClass
-    })),
-    {
-      headerClass: "button",
-      contentClass: "content",
-      activeClass: "active",
-      inactiveClass: "inactive"
-    }
-  );
-
-  let styling: typeof classes = $derived(classes ?? { button: headerClass, content: contentClass, active: activeClass, inactive: inactiveClass });
+  let { children, header, arrowup, arrowdown, open = $bindable(false), transitionType = slide, transitionParams, class: className, classes }: AccordionItemProps = $props();
 
   // Get context - it will be undefined if used outside Accordion
   const ctx = getAccordionContext();
+  // Merge context and local classes (local overrides context).
+  // Theme is applied in template via clsx with lowest priority.
+  const finalClasses = $derived({
+    button: classes?.button || ctx?.classes?.button,
+    contentWrapper: classes?.contentWrapper || ctx?.classes?.contentWrapper,
+    content: classes?.content || ctx?.classes?.content,
+    active: classes?.active || ctx?.classes?.active,
+    inactive: classes?.inactive || ctx?.classes?.inactive
+  });
 
   const ctxTransitionType = $derived(ctx?.transitionType ?? transitionType);
   // Check if transitionType is explicitly set to undefined in props
@@ -65,13 +41,15 @@
     open = !open;
   };
 
-  const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
+  const { base, button, contentWrapper, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open }));
+
+  let buttonClass = $derived(clsx(open && !ctx?.flush && (finalClasses.active || active()), !open && !ctx?.flush && (finalClasses.inactive || inactive())));
 
-  let buttonClass = $derived(clsx(open && !ctx?.flush && (styling.active || ctx?.activeClass || active()), !open && !ctx?.flush && (styling.inactive || ctx?.inactiveClass || inactive())));
+  let contentWrapperCls = $derived(clsx(contentWrapper(), open ? "block" : "hidden", finalClasses.contentWrapper));
 </script>
 
 <h2 class={base({ class: clsx(theme?.base, className) })}>
-  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, styling.button) })} aria-expanded={open}>
+  <button type="button" onclick={handleToggle} class={button({ class: clsx(buttonClass, theme?.button, finalClasses.button) })} aria-expanded={open}>
     {#if header}
       {@render header()}
       {#if open}
@@ -95,15 +73,15 @@
 
 {#if useTransition}
   {#if open && transitionType !== "none"}
-    <div transition:transitionType={transitionParams as ParamsType}>
-      <div class={content({ class: clsx(theme?.content, styling.content) })}>
+    <div class={contentWrapperCls} transition:transitionType={transitionParams as ParamsType}>
+      <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
         {@render children()}
       </div>
     </div>
   {/if}
 {:else}
-  <div class={open ? "block" : "hidden"}>
-    <div class={content({ class: clsx(theme?.content, styling.content) })}>
+  <div class={contentWrapperCls}>
+    <div class={content({ class: clsx(theme?.content, finalClasses.content) })}>
       {@render children()}
     </div>
   </div>