flowbite-svelte 1.30.1 → 2.0.0-next.0

package/dist/accordion/Accordion.svelte

@@ -7,23 +7,20 @@
   import { createSingleSelectionContext } from "../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 = getTheme("accordion");
+  const theme = $derived(getTheme("accordion"));
 
   // Simple reactive state object
   const reactiveCtx: AccordionContextType = {
     get flush() {
       return flush;
     },
-    get activeClass() {
-      return activeClass;
-    },
-    get inactiveClass() {
-      return inactiveClass;
-    },
     get transitionType() {
       return transitionType;
+    },
+    get classes() {
+      return classes;
     }
   };
 
@@ -54,5 +51,6 @@
 @prop multiple = false
 @prop class: className
 @prop transitionType
+@prop classes
 @prop ...restProps
 -->

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

@@ -11,6 +11,7 @@ import type { AccordionProps } from "../types";
  * @prop multiple = false
  * @prop class: className
  * @prop transitionType
+ * @prop classes
  * @prop ...restProps
  */
 declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;

package/dist/accordion/AccordionItem.svelte

@@ -1,56 +1,32 @@
 <script lang="ts">
   import type { AccordionItemProps, ParamsType } from "..";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import { useSingleSelection } from "../utils/singleselection.svelte";
   import clsx from "clsx";
   import { getAccordionContext } from "../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
   const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true);
 
   // Theme context
-  const theme = getTheme("accordionItem");
+  const theme = $derived(getTheme("accordionItem"));
 
   // single selection
   const self = Symbol("accordion-item");
@@ -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>
@@ -113,19 +91,15 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L207)
+[AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L214)
 ## Props
 @prop children
 @prop header
 @prop arrowup
 @prop arrowdown
 @prop open = $bindable(false)
-@prop activeClass
-@prop inactiveClass
 @prop transitionType = slide
 @prop transitionParams
 @prop class: className
 @prop classes
-@prop headerClass
-@prop contentClass
 -->

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

@@ -2,21 +2,17 @@ import type { AccordionItemProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L207)
+ * [AccordionItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L214)
  * ## Props
  * @prop children
  * @prop header
  * @prop arrowup
  * @prop arrowdown
  * @prop open = $bindable(false)
- * @prop activeClass
- * @prop inactiveClass
  * @prop transitionType = slide
  * @prop transitionParams
  * @prop class: className
  * @prop classes
- * @prop headerClass
- * @prop contentClass
  */
 declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "open">;
 type AccordionItem = ReturnType<typeof AccordionItem>;

package/dist/accordion/theme.d.ts

@@ -2,42 +2,46 @@ import type { Classes } from "../theme/themeUtils";
 import { type VariantProps } from "tailwind-variants";
 export type AccordionVariants = VariantProps<typeof accordion>;
 export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
+/**
+ AccordionItemVariants:
+{
+  flush?: boolean;
+  open?: boolean;
+  classes?: {
+    button?: ClassValue;
+    contentWrapper?: ClassValue;
+    content?: ClassValue;
+    active?: ClassValue;
+    inactive?: ClassValue;
+  }
+}
+  */
 export declare const accordion: import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-    };
     flush: {
         true: string;
         false: string;
     };
-}, undefined, "w-full", {
-    color: {
-        primary: string;
-        secondary: string;
-    };
+}, undefined, "rounded-base border border-default overflow-hidden", {
     flush: {
         true: string;
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-    };
     flush: {
         true: string;
         false: string;
     };
-}, undefined, "w-full", unknown, unknown, undefined>>;
+}, undefined, "rounded-base border border-default overflow-hidden", unknown, unknown, undefined>>;
 export declare const accordionItem: import("tailwind-variants").TVReturnType<{
     flush: {
         true: {
             button: string;
+            contentWrapper: string;
             content: string;
         };
         false: {
             button: string;
+            contentWrapper: string;
             content: string;
         };
     };
@@ -48,6 +52,7 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    contentWrapper: string;
     content: string;
     active: string;
     inactive: string;
@@ -55,10 +60,12 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
     flush: {
         true: {
             button: string;
+            contentWrapper: string;
             content: string;
         };
         false: {
             button: string;
+            contentWrapper: string;
             content: string;
         };
     };
@@ -69,6 +76,7 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    contentWrapper: string;
     content: string;
     active: string;
     inactive: string;
@@ -76,10 +84,12 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
     flush: {
         true: {
             button: string;
+            contentWrapper: string;
             content: string;
         };
         false: {
             button: string;
+            contentWrapper: string;
             content: string;
         };
     };
@@ -90,6 +100,7 @@ export declare const accordionItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     button: string;
+    contentWrapper: string;
     content: string;
     active: string;
     inactive: string;

package/dist/accordion/theme.js

@@ -1,34 +1,47 @@
 import { tv } from "tailwind-variants";
+/**
+ AccordionItemVariants:
+{
+  flush?: boolean;
+  open?: boolean;
+  classes?: {
+    button?: ClassValue;
+    contentWrapper?: ClassValue;
+    content?: ClassValue;
+    active?: ClassValue;
+    inactive?: ClassValue;
+  }
+}
+  */
 export const accordion = tv({
-    base: "w-full",
+    base: "rounded-base border border-default overflow-hidden",
     variants: {
-        color: {
-            primary: "text-primary-500 dark:text-primary-400",
-            secondary: "text-secondary-500 dark:text-secondary-400"
-        },
         flush: {
-            true: "",
-            false: "border border-gray-200 dark:border-gray-700 rounded-t-xl"
+            true: "border-0",
+            false: "shadow-xs"
         }
     }
 });
 export const accordionItem = tv({
     slots: {
         base: "group",
-        button: "flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b",
-        content: "border-b border-gray-200 dark:border-gray-700",
-        active: "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800",
-        inactive: "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+        button: "flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body group-first:rounded-t-base border border-t-0 border-x-0 border-b-default gap-3",
+        contentWrapper: "",
+        content: "p-4 md:p-5 group-last:border group-last:border-t-default group-last:border-x-0",
+        active: "",
+        inactive: ""
     },
     variants: {
         flush: {
             true: {
-                button: "py-5",
-                content: "py-5"
+                button: "border-0 border-b border-default",
+                contentWrapper: "",
+                content: "py-5 border-b border-default text-body"
             },
             false: {
-                button: "p-5 border-s border-e group-first:border-t",
-                content: "p-5 border-s border-e"
+                button: "rounded-t-base hover:text-heading hover:bg-neutral-secondary-medium",
+                contentWrapper: "border border-s-0 border-e-0 border-t-0 border-b-default",
+                content: "p-4 md:p-5"
             }
         },
         open: {
@@ -41,14 +54,14 @@ export const accordionItem = tv({
             flush: true,
             open: true,
             class: {
-                button: "text-gray-900 dark:text-white"
+                button: "text-heading"
             }
         },
         {
             flush: true,
             open: false,
             class: {
-                button: "text-gray-500 dark:text-gray-400"
+                button: "text-body"
             }
         }
     ],

package/dist/alert/Alert.svelte

@@ -12,22 +12,27 @@
     icon,
     alertStatus = $bindable(true),
     closeIcon: CloseIcon,
-    color = "primary",
+    color = "brand",
+    closeColor,
     rounded = true,
     border,
     class: className,
     dismissable,
     transition = fade,
     params,
+    listContent,
+    borderAccent,
     ...restProps
   }: AlertProps = $props();
 
   // Theme context
-  const theme = getTheme("alert");
+  const theme = $derived(getTheme("alert"));
 
   let divCls = $derived(
     alert({
       color,
+      listContent,
+      borderAccent,
       rounded,
       border,
       icon: !!icon,
@@ -63,11 +68,11 @@
 
     {#if dismissable}
       {#if CloseIcon}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" color={closeColor ?? color} ariaLabel="Remove alert">
           <CloseIcon />
         </CloseButton>
       {:else}
-        <CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
+        <CloseButton class="-my-1.5 ms-auto -me-1.5" color={closeColor ?? color} ariaLabel="Remove alert" />
       {/if}
     {/if}
   </div>
@@ -77,18 +82,21 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L221)
+[AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L224)
 ## Props
 @prop children
 @prop icon
 @prop alertStatus = $bindable(true)
 @prop closeIcon: CloseIcon
-@prop color = "primary"
+@prop color = "brand"
+@prop closeColor
 @prop rounded = true
 @prop border
 @prop class: className
 @prop dismissable
 @prop transition = fade
 @prop params
+@prop listContent
+@prop borderAccent
 @prop ...restProps
 -->

package/dist/alert/Alert.svelte.d.ts

@@ -2,19 +2,22 @@ import { type AlertProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L221)
+ * [AlertProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L224)
  * ## Props
  * @prop children
  * @prop icon
  * @prop alertStatus = $bindable(true)
  * @prop closeIcon: CloseIcon
- * @prop color = "primary"
+ * @prop color = "brand"
+ * @prop closeColor
  * @prop rounded = true
  * @prop border
  * @prop class: className
  * @prop dismissable
  * @prop transition = fade
  * @prop params
+ * @prop listContent
+ * @prop borderAccent
  * @prop ...restProps
  */
 declare const Alert: import("svelte").Component<AlertProps, {}, "alertStatus">;

package/dist/alert/theme.d.ts

@@ -2,6 +2,12 @@ import { type VariantProps } from "tailwind-variants";
 export type AlertVariants = VariantProps<typeof alert>;
 export declare const alert: import("tailwind-variants").TVReturnType<{
     color: {
+        brand: string;
+        danger: string;
+        success: string;
+        warning: string;
+        dark: string;
+        none: string;
         primary: string;
         secondary: string;
         gray: string;
@@ -23,6 +29,12 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    listContent: {
+        true: string;
+    };
+    borderAccent: {
+        true: string;
+    };
     rounded: {
         true: string;
     };
@@ -35,8 +47,14 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
     dismissable: {
         true: string;
     };
-}, undefined, "p-4 gap-3 text-sm", {
+}, undefined, "flex items-start sm:items-center p-4 gap-3 text-sm", {
     color: {
+        brand: string;
+        danger: string;
+        success: string;
+        warning: string;
+        dark: string;
+        none: string;
         primary: string;
         secondary: string;
         gray: string;
@@ -58,6 +76,12 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    listContent: {
+        true: string;
+    };
+    borderAccent: {
+        true: string;
+    };
     rounded: {
         true: string;
     };
@@ -72,6 +96,12 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     color: {
+        brand: string;
+        danger: string;
+        success: string;
+        warning: string;
+        dark: string;
+        none: string;
         primary: string;
         secondary: string;
         gray: string;
@@ -93,6 +123,12 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
         pink: string;
         rose: string;
     };
+    listContent: {
+        true: string;
+    };
+    borderAccent: {
+        true: string;
+    };
     rounded: {
         true: string;
     };
@@ -105,4 +141,4 @@ export declare const alert: import("tailwind-variants").TVReturnType<{
     dismissable: {
         true: string;
     };
-}, undefined, "p-4 gap-3 text-sm", unknown, unknown, undefined>>;
+}, undefined, "flex items-start sm:items-center p-4 gap-3 text-sm", unknown, unknown, undefined>>;