flowbite-svelte 1.0.0-next.1 → 1.0.0-next.10

package/{License → LICENSE}

@@ -18,4 +18,5 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
+

package/README.md

@@ -1,40 +1,473 @@
-# Flowbite Svelte
+# FLOWBITE-SVELTE
 
-Flowbite Svelte is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.
+[![npm version](https://badgen.net/npm/v/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![npm downloads](https://badgen.net/npm/dt/flowbite-svelte-next)](https://www.npmjs.com/package/flowbite-svelte-next) [![license](https://badgen.net/npm/license/flowbite-svelte-next)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE) [![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)
 
-- [Docs](https://preview.flowbite-svelte.com/)
+**⚠️ Flowbite Svelte is currently in early development and APIs and packages are likely to change quite often.**
+
+<p>
+    <a href="https://flowbite-svelte-next.com" >
+      <img alt="Flowbite Svelte UI components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte-next.png">
+    </a><br>
+    Build websites even faster with Svelte components on top of Tailwind CSS
+</p>
+
+[Flowbite Svelte](https://flowbite-svelte-next.com/) is an official Flowbite UI component library for Svelte. All interactivities are handled by Svelte.
+
+[Visualize this repo's codebase](https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=themesberg%2Fflowbite-svelte-next)
 
 ## Installation
 
-Install `svelte`, `tailwindcss`, and `flowbite-svelte`, update dependencies and install the latest:
-
-```sh
-npx sv create myapp // select to install tailwindcss
-cd myapp
-pnpm install
-pnpm run dev
-pnpm i -D flowbite-svelte@next
-```
-
-Add the following to tailwind.config.js:
-
-```js
-import type { Config } from 'tailwindcss';
-
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
-  darkMode: 'selector',
-  theme: {
-    extend: {
-      colors: {
-        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B' },
-        secondary: { "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc", "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1", "800": "#075985", "900": "#0c4a6e" },
-      }
-    }
-  },
-} as Config;
-```
+- [Getting started](https://flowbite-svelte-next.com/docs/pages/quickstart)
+- [Introduction](https://flowbite-svelte-next.com/docs/pages/introduction)
+- [Types](https://flowbite-svelte-next.com/docs/pages/typescript)
+- [How to contribute](https://flowbite-svelte-next.com/docs/pages/how-to-contribute)
+- [License](https://flowbite-svelte-next.com/docs/pages/license)
+
+## Documentation
+
+For full documentation, visit [flowbite-svelte-next.com](https://flowbite-svelte-next.com/).
+
+## Components
+
+<table>
+  <tr>
+    <td width="33.3333%">Alert</td>
+    <td width="33.3333%">Badge</td>
+    <td width="33.3333%">Breadcrumb</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/alert">
+            <img alt="Svelte Alerts" src="https://flowbite.s3.amazonaws.com/github/svelte/alerts.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/badge">
+            <img alt="Svelte Badge" src="https://flowbite.s3.amazonaws.com/github/svelte/badge.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/breadcrumb">
+            <img alt="Svelte Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/svelte/breadcrumbs.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Button</td>
+    <td width="33.3333%">Button group</td>
+    <td width="33.3333%">Card</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/buttons">
+            <img alt="Svelte Buttons" src="https://flowbite.s3.amazonaws.com/github/svelte/buttons.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/button-group">
+            <img alt="Svelte Button Group" src="https://flowbite.s3.amazonaws.com/github/svelte/button-group.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/card">
+            <img alt="Svelte Cards" src="https://flowbite.s3.amazonaws.com/github/svelte/cards.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Dropdown</td>
+    <td width="33.3333%">Forms</td>
+    <td width="33.3333%">List group</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/dropdown">
+            <img alt="Svelte Dropdown" src="https://flowbite.s3.amazonaws.com/github/svelte/dropdown.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/forms">
+            <img alt="Svelte Forms" src="https://flowbite.s3.amazonaws.com/github/svelte/forms.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/list-group">
+            <img alt="Svelte List group" src="https://flowbite.s3.amazonaws.com/github/svelte/list-group.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Typography</td>
+    <td width="33.3333%">Modal</td>
+    <td width="33.3333%">Tabs</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/typography">
+            <img alt="Svelte Typography" src="https://flowbite.s3.amazonaws.com/github/svelte/typography.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/modal">
+            <img alt="Svelte Modal" src="https://flowbite.s3.amazonaws.com/github/svelte/modal.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/tabs">
+            <img alt="Svelte Tabs" src="https://flowbite.s3.amazonaws.com/github/svelte/tabs.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Navbar</td>
+    <td width="33.3333%">Pagination</td>
+    <td width="33.3333%">Timeline</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/navbar">
+            <img alt="Svelte Navbar" src="https://flowbite.s3.amazonaws.com/github/svelte/navbar.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/pagination">
+            <img alt="Svelte Pagination" src="https://flowbite.s3.amazonaws.com/github/svelte/pagination.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/timeline">
+            <img alt="Svelte Timeline" src="https://flowbite.s3.amazonaws.com/github/svelte/timeline.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Progress bar</td>
+    <td width="33.3333%">Table</td>
+    <td width="33.3333%">Toast</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/progress">
+            <img alt="Svelte Progress Bar" src="https://flowbite.s3.amazonaws.com/github/svelte/progress.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/table">
+            <img alt="Svelte Tables" src="https://flowbite.s3.amazonaws.com/github/svelte/table.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/toast">
+            <img alt="Svelte Toast" src="https://flowbite.s3.amazonaws.com/github/svelte/toast.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Tooltip</td>
+    <td width="33.3333%">Datepicker</td>
+    <td width="33.3333%">Spinner</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/tooltip">
+            <img alt="Svelte Tooltips" src="https://flowbite.s3.amazonaws.com/github/svelte/tooltips.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/datepicker">
+            <img alt="Svelte Datepicker" src="https://flowbite.s3.amazonaws.com/github/svelte/datepicker.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/spinner">
+            <img alt="Svelte Spinner" src="https://flowbite.s3.amazonaws.com/github/svelte/spinner.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Footer</td>
+    <td width="33.3333%">Accordion</td>
+    <td width="33.3333%">Sidebar</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/footer">
+            <img alt="Svelte Footer" src="https://flowbite.s3.amazonaws.com/github/svelte/footer.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/accordion">
+            <img alt="Svelte Accordion" src="https://flowbite.s3.amazonaws.com/github/svelte/accordion.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/sidebar">
+            <img alt="Svelte Sidebar" src="https://flowbite.s3.amazonaws.com/github/svelte/sidebar.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Carousel</td>
+    <td width="33.3333%">Avatar</td>
+    <td width="33.3333%">Rating</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/carousel">
+            <img alt="Svelte Carousel" src="https://flowbite.s3.amazonaws.com/github/svelte/carousel.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/avatar">
+            <img alt="Svelte Avatar" src="https://flowbite.s3.amazonaws.com/github/svelte/avatar.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/rating">
+            <img alt="Svelte Rating" src="https://flowbite.s3.amazonaws.com/github/svelte/rating.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Input Field</td>
+    <td width="33.3333%">File Input</td>
+    <td width="33.3333%">Search Input</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/input-field">
+            <img alt="Svelte Input Field" src="https://flowbite.s3.amazonaws.com/github/svelte/input-field.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/file-input">
+            <img alt="Svelte File Input" src="https://flowbite.s3.amazonaws.com/github/svelte/file-input.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/search-input">
+            <img alt="Svelte Search Input" src="https://flowbite.s3.amazonaws.com/github/svelte/search-input.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Select</td>
+    <td width="33.3333%">Textarea</td>
+    <td width="33.3333%">Checkbox</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/select">
+            <img alt="Svelte Select" src="https://flowbite.s3.amazonaws.com/github/svelte/select.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/textarea">
+            <img alt="Svelte Textarea" src="https://flowbite.s3.amazonaws.com/github/svelte/textarea.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/checkbox">
+            <img alt="Svelte Checkbox" src="https://flowbite.s3.amazonaws.com/github/svelte/checkbox.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Radio</td>
+    <td width="33.3333%">Toggle</td>
+    <td width="33.3333%">Range Slider</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/radio">
+            <img alt="Svelte Radio" src="https://flowbite.s3.amazonaws.com/github/svelte/radio.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/toggle">
+            <img alt="Svelte Toggle" src="https://flowbite.s3.amazonaws.com/github/svelte/toggle.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/range">
+            <img alt="Svelte Range Slider" src="https://flowbite.s3.amazonaws.com/github/svelte/range-slider.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Floating Label</td>
+    <td width="33.3333%">Mega Menu</td>
+    <td width="33.3333%">Skeleton</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/forms/floating-label">
+            <img alt="Svelte Floating Label" src="https://flowbite.s3.amazonaws.com/github/svelte/floating-label.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/mega-menu">
+            <img alt="Svelte Mega Menu" src="https://flowbite.s3.amazonaws.com/github/svelte/mega-menu.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/skeleton">
+            <img alt="Svelte Skeleton" src="https://flowbite.s3.amazonaws.com/github/svelte/skeleton.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">KBD (keyboard)</td>
+    <td width="33.3333%">Drawer (offcanvas)</td>
+    <td width="33.3333%">Popover</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/kbd">
+            <img alt="Svelte KBD (Keyboard)" src="https://flowbite.s3.amazonaws.com/github/svelte/kbd.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/drawer">
+            <img alt="Svelte Drawer (offcanvas)" src="https://flowbite.s3.amazonaws.com/github/svelte/drawer.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/popover">
+            <img alt="Svelte Popover" src="https://flowbite.s3.amazonaws.com/github/svelte/popover.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Video</td>
+    <td width="33.3333%">Heading</td>
+    <td width="33.3333%">Paragraph</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/video">
+            <img alt="Svelte Video" src="https://flowbite.s3.amazonaws.com/github/svelte/video.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/heading">
+            <img alt="Svelte Heading" src="https://flowbite.s3.amazonaws.com/github/svelte/heading.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/paragraph">
+            <img alt="Svelte Paragraph" src="https://flowbite.s3.amazonaws.com/github/svelte/paragraph.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Blockquote</td>
+    <td width="33.3333%">Image</td>
+    <td width="33.3333%">List</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/blockquote">
+            <img alt="Svelte Blockquote" src="https://flowbite.s3.amazonaws.com/github/svelte/blockquote.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/image">
+            <img alt="Svelte Image" src="https://flowbite.s3.amazonaws.com/github/svelte/image.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/list">
+            <img alt="Svelte List" src="https://flowbite.s3.amazonaws.com/github/svelte/list.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Link</td>
+    <td width="33.3333%">Text</td>
+    <td width="33.3333%">Horizontal line (HR)</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/link">
+            <img alt="Svelte Link" src="https://flowbite.s3.amazonaws.com/github/svelte/link.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/text">
+            <img alt="Svelte Text" src="https://flowbite.s3.amazonaws.com/github/svelte/text.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/typography/hr">
+            <img alt="Svelte HR" src="https://flowbite.s3.amazonaws.com/github/svelte/hr.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Speed Dial</td>
+    <td width="33.3333%">Stepper(TBA)</td>
+    <td width="33.3333%">Indicators</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/speed-dial">
+            <img alt="Svelte Speed Dial" src="https://flowbite.s3.amazonaws.com/github/svelte/dial.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com">
+            <img alt="Svelte Stepper" src="https://flowbite.s3.amazonaws.com/github/svelte/stepper.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/indicators">
+            <img alt="Svelte Indicators" src="https://flowbite.s3.amazonaws.com/github/svelte/indicators.jpg">
+        </a>
+    </td>
+  </tr>
+  <tr>
+    <td width="33.3333%">Bottom Navigation</td>
+    <td width="33.3333%">Sticky Banner</td>
+    <td width="33.3333%">Gallery (Masonry)</td>
+  </tr>
+  <tr>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/bottom-navigation">
+            <img alt="Svelte Bottom Navigation Bar" src="https://flowbite.s3.amazonaws.com/github/svelte/bottom-bar.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/banner">
+            <img alt="Svelte Bottom Sticky Banner" src="https://flowbite.s3.amazonaws.com/github/svelte/banner.jpg">
+        </a>
+    </td>
+    <td width="33.3333%">
+        <a href="https://flowbite-svelte-next.com/docs/components/gallery">
+            <img alt="Svelte Image Gallery (Masonry)" src="https://flowbite.s3.amazonaws.com/github/svelte/gallery.jpg">
+        </a>
+    </td>
+  </tr>
+</table>
+
+## Community
+
+If you need help or just want to discuss about the library join the community on Github:
+
+⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite-svelte-next/discussions)
+
+For casual chatting with others using the library:
+
+💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
+
+## Contribute
+
+Please read [how to contribute](https://github.com/themesberg/flowbite-svelte-next/blob/main/CONTRIBUTING.md) if you'd like to be part of the Flowbite community of contributors.
+
+## Changelog
+
+View the full [changelog](https://github.com/themesberg/flowbite-svelte-next/blob/main/CHANGELOG.md) on this page.
 
 ## License
 
-MIT
+Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte-next.com/docs/pages/license).

package/dist/accordion/Accordion.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { setContext, getContext } from "svelte";
+  import { writable } from "svelte/store";
   import { type AccordionProps as Props, accordion } from "./";
+  import type { BaseThemes } from "../theme";
+  import clsx from "clsx";
 
-  let { children, flush, activeClass, inactiveClass, isSingle = true, class: className, ...restProps }: Props = $props();
+  let { children, flush, activeClass, inactiveClass, multiple = false, class: className, ...restProps }: Props = $props();
 
   // Get merged theme from context
-  const context = getContext<Record<string, object>>("themeConfig");
+  const context = getContext<BaseThemes>("themeConfig");
   // Use context theme if available, otherwise fallback to default
   const accordionTheme = context?.accordion || accordion;
 
@@ -13,12 +16,11 @@
     flush,
     activeClass,
     inactiveClass,
-    isSingle
+    selected: multiple ? undefined : writable()
   };
 
   setContext("ctx", ctx);
-
-  const base = $derived(accordionTheme({ flush, className }));
+  const base = $derived(accordionTheme({ flush, class: clsx(className) }));
 </script>
 
 <div {...restProps} class={base}>
@@ -27,12 +29,12 @@
 
 <!--
 @component
-[Go to docs](https://preview.flowbite-svelte.com/)
+[Go to docs](https://flowbite-svelte-next.com/)
 ## Props
 @props: children: any;
 @props:flush: any;
 @props:activeClass: any;
 @props:inactiveClass: any;
-@props:isSingle: any = true;
+@props:multiple: any = false;
 @props:class: string;
 -->

package/dist/accordion/Accordion.svelte.d.ts

@@ -1,12 +1,12 @@
 import { type AccordionProps as Props } from "./";
 /**
- * [Go to docs](https://preview.flowbite-svelte.com/)
+ * [Go to docs](https://flowbite-svelte-next.com/)
  * ## Props
  * @props: children: any;
  * @props:flush: any;
  * @props:activeClass: any;
  * @props:inactiveClass: any;
- * @props:isSingle: any = true;
+ * @props:multiple: any = false;
  * @props:class: string;
  */
 declare const Accordion: import("svelte").Component<Props, {}, "">;

package/dist/accordion/AccordionItem.svelte

@@ -3,27 +3,25 @@
   import { slide } from "svelte/transition";
   import { getContext } from "svelte";
   import { writable } from "svelte/store";
+
   import { type AccordionCtxType, type AccordionItemProps as Props, accordionitem } from ".";
   import type { ParamsType } from "../types";
+  import type { BaseThemes } from "../theme";
+  import clsx from "clsx";
 
-  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transition = slide, params, class: className }: Props = $props();
+  let { children, header, arrowup, arrowdown, open = $bindable(false), activeClass, inactiveClass, transitionType = slide, transitionParams, class: className }: Props = $props();
 
   // Theme context
-  const context = getContext<Record<string, object>>("themeConfig");
+  const context = getContext<BaseThemes>("themeConfig");
   // Use theme context if available, otherwise fallback to default
   const accordionitemTheme = context?.accordionitem || accordionitem;
 
   const ctx: AccordionCtxType = getContext("ctx") ?? {};
-  // selected type is writable in AccordionCtxType
-  if (!ctx.selected) {
-    ctx.selected = writable();
-  }
 
   // single selection
   const self = {};
-  const selected = ctx.isSingle ? ctx.selected : writable();
+  const selected = ctx.selected ?? writable();
 
-  // open && selected.set(self);
   if (open) selected.set(self);
 
   selected.subscribe((x) => (open = x === self));
@@ -32,7 +30,7 @@
 
   const { base, button, content, active, inactive } = $derived(accordionitemTheme({ flush: ctx.flush, open }));
 
-  let buttonClass = $derived(twMerge(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), className));
+  let buttonClass = $derived(twMerge(button(), open && !ctx.flush && (activeClass || ctx.activeClass || active()), !open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()), clsx(className)));
 </script>
 
 <h2 class={base()}>
@@ -58,7 +56,7 @@
   </button>
 </h2>
 {#if open}
-  <div transition:transition={params as ParamsType}>
+  <div transition:transitionType={transitionParams as ParamsType}>
     <div class={content()}>
       {@render children()}
     </div>
@@ -67,7 +65,7 @@
 
 <!--
 @component
-[Go to docs](https://preview.flowbite-svelte.com/)
+[Go to docs](https://flowbite-svelte-next.com/)
 ## Props
 @props: children: any;
 @props:header: any;
@@ -76,7 +74,7 @@
 @props:open: any = $bindable(false);
 @props:activeClass: any;
 @props:inactiveClass: any;
-@props:transition: any = slide;
-@props:params: any;
+@props:transitionType: any = slide;
+@props:transitionParams: any;
 @props:class: string;
 -->