flowbite-svelte 0.15.36 → 0.15.37

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.15.37](https://github.com/themesberg/flowbite-svelte/compare/v0.15.36...v0.15.37) (2022-05-18)
+
+
+### Bug Fixes
+
+* add buttonClass to AccordionItem ([8387244](https://github.com/themesberg/flowbite-svelte/commit/83872440ebb872843a0f016f7fb576d156295b96))
+
 ### [0.15.36](https://github.com/themesberg/flowbite-svelte/compare/v0.15.35...v0.15.36) (2022-05-17)
 
 

package/accordions/AccordionItem.svelte

@@ -2,7 +2,6 @@
 import { onMount } from 'svelte';
 import { ChevronDownSolid, ChevronUpSolid } from 'svelte-heros';
 export let id = '';
-export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
 export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
 export let isOpen = false;
 export let color = false;
@@ -15,21 +14,25 @@ onMount(() => {
         isOpen = true;
     }
 });
+export let btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
+$: btnClass;
+export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800  hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
 const handleToggle = (id) => {
     isOpen = !isOpen;
-    if (color && isOpen) {
-        btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:ring-blue-200 dark:focus:ring-blue-800  hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
-    }
-    else {
-        btnClass = 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800';
-    }
 };
+let buttonClass;
+$: if (color && isOpen) {
+    buttonClass = btnClass + colorClass;
+}
+else {
+    buttonClass = btnClass;
+}
 export let iconSize = 24;
 export let iconClass = 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300';
 </script>
 
 <h2 aria-expanded={isOpen}>
-	<button on:click={() => handleToggle(id)} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class="{btnClass} {$$props.class ? $$props.class : ''}">
+	<button on:click={() => handleToggle(id)} type="button" class:rounded-t-xl={id === '1'} class:border-t-0={id !== '1'} class="{buttonClass} {$$props.class ? $$props.class : ''}">
 		<slot name="header" />
 		{#if isOpen}
 			<svelte:component this={icons.up} size={iconSize} class="mr-2 {iconClass}" />

package/accordions/AccordionItem.svelte.d.ts

@@ -4,11 +4,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         id?: string;
-        btnClass?: string;
         slotClass?: string;
         isOpen?: boolean;
         color?: boolean;
         icons?: AccordionIconType;
+        btnClass?: string;
+        colorClass?: string;
         iconSize?: number;
         iconClass?: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.15.36",
+  "version": "0.15.37",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {