flowbite-svelte 2.0.0-next.0 → 2.0.0-next.2

package/dist/timeline/Timeline.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TimelineProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1893)
+ * [TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1774)
  * ## Props
  * @prop children
  * @prop order = "default"

package/dist/timeline/TimelineItem.svelte

@@ -1,59 +1,19 @@
 <script lang="ts">
-  import { getContext, untrack } from "svelte";
+  import { getContext } from "svelte";
   import { timelineItem, type TimelineVariants } from "./theme";
   import type { TimelineItemProps, DateFormat } from "../types";
   import clsx from "clsx";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
 
-  let {
-    children,
-    orientationSlot,
-    title,
-    date,
-    dateFormat = "month-year",
-    color = "primary",
-    isLast = false,
-    svgClass,
-    liClass,
-    defaultDivClass,
-    divClass,
-    timeClass,
-    h3Class,
-    connectorClass,
-    datePrefix,
-    class: className,
-    classes,
-    ...restProps
-  }: TimelineItemProps = $props();
+  let { children, orientationSlot, title, date, dateFormat = "month-year", color = "primary", isLast = false, datePrefix, class: className, classes, ...restProps }: TimelineItemProps = $props();
 
-  warnThemeDeprecation(
-    "TimelineItem",
-    untrack(() => ({ svgClass, liClass, divClass, timeClass, h3Class, connectorClass })),
-    {
-      liClass: "class",
-      svgClass: "svg",
-      divClass: "div",
-      timeClass: "time",
-      h3Class: "h3",
-      connectorClass: "connector"
-    }
-  );
-
-  const styling = $derived({
-    svg: svgClass,
-    div: divClass,
-    time: timeClass,
-    h3: h3Class,
-    connector: connectorClass
-  });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("timelineItem"));
   let order = getContext<TimelineVariants["order"]>("order");
 
   const { base, div, defaultDiv, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
 
-  const defaultDivCls = $derived(defaultDivClass ? defaultDivClass : defaultDiv());
-
   function formatDisplayDate(dateStr: string, format: DateFormat) {
     const date = new Date(dateStr);
     if (isNaN(date.getTime())) return dateStr;
@@ -83,18 +43,18 @@
   }
 </script>
 
-<li {...restProps} class={base({ class: clsx(theme?.base, className ?? liClass) })}>
+<li {...restProps} class={base({ class: clsx(theme?.base, className) })}>
   <!-- Individual connector line for vertical/activity layouts -->
   {#if !isLast && (order === "vertical" || order === "activity")}
-    <div class={connector({ class: clsx(theme?.connector, styling.connector) })} aria-hidden="true"></div>
+    <div class={connector({ class: clsx(theme?.connector, styling?.connector) })} aria-hidden="true"></div>
   {/if}
 
   {#if order !== "default"}
     {#if orientationSlot && (order === "vertical" || order === "horizontal")}
       {@render orientationSlot()}
     {:else}
-      <div class={div({ class: clsx(theme?.div, styling.div) })}>
-        <svg aria-hidden="true" class={svg({ class: clsx(theme?.svg, styling.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <div class={div({ class: clsx(theme?.div, styling?.div) })}>
+        <svg aria-hidden="true" class={svg({ class: clsx(theme?.svg, styling?.svg) })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path
             fill-rule="evenodd"
             d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
@@ -104,22 +64,22 @@
       </div>
     {/if}
   {:else if date}
-    <div class={defaultDivCls} aria-hidden="true"></div>
-    <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
+    <div class={defaultDiv({ class: clsx(theme?.defaultDiv, styling?.defaultDiv) })} aria-hidden="true"></div>
+    <time datetime={date} class={time({ class: clsx(theme?.time, styling?.time) })}>
       {datePrefix}
       {formatDisplayDate(date, dateFormat)}
     </time>
   {/if}
 
   {#if title}
-    <h3 class={h3({ class: clsx(theme?.h3, styling.h3) })}>
+    <h3 class={h3({ class: clsx(theme?.h3, styling?.h3) })}>
       {title}
     </h3>
   {/if}
 
   {#if order !== "default"}
     {#if date}
-      <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
+      <time datetime={date} class={time({ class: clsx(theme?.time, styling?.time) })}>
         {datePrefix}
         {formatDisplayDate(date, dateFormat)}
       </time>
@@ -133,7 +93,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1900)
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
 ## Props
 @prop children
 @prop orientationSlot
@@ -142,13 +102,6 @@
 @prop dateFormat = "month-year"
 @prop color = "primary"
 @prop isLast = false
-@prop svgClass
-@prop liClass
-@prop defaultDivClass
-@prop divClass
-@prop timeClass
-@prop h3Class
-@prop connectorClass
 @prop datePrefix
 @prop class: className
 @prop classes

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TimelineItemProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1900)
+ * [TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
  * ## Props
  * @prop children
  * @prop orientationSlot
@@ -11,13 +11,6 @@ import type { TimelineItemProps } from "../types";
  * @prop dateFormat = "month-year"
  * @prop color = "primary"
  * @prop isLast = false
- * @prop svgClass
- * @prop liClass
- * @prop defaultDivClass
- * @prop divClass
- * @prop timeClass
- * @prop h3Class
- * @prop connectorClass
  * @prop datePrefix
  * @prop class: className
  * @prop classes

package/dist/toast/Toast.svelte

@@ -4,9 +4,8 @@
   import { toast } from "./theme";
   import { fly } from "svelte/transition";
   import clsx from "clsx";
-  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getTheme } from "../theme/themeUtils";
   import { createDismissableContext } from "../utils/dismissable";
-  import { untrack } from "svelte";
 
   let {
     children,
@@ -15,8 +14,6 @@
     dismissable = true,
     color = "primary",
     position,
-    iconClass,
-    contentClass,
     align = true,
     params,
     transition = fly,
@@ -25,21 +22,7 @@
     ...restProps
   }: ToastProps = $props();
 
-  warnThemeDeprecation(
-    "Toast",
-    untrack(() => ({ iconClass, contentClass })),
-    {
-      iconClass: "icon",
-      contentClass: "content"
-    }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      icon: iconClass,
-      content: contentClass
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("toast"));
 
@@ -59,17 +42,17 @@
 {#if toastStatus}
   <div role="alert" bind:this={ref} transition:transition={params as ParamsType} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
     {#if icon}
-      <div class={iconVariants({ class: clsx(theme?.icon, styling.icon) })}>
+      <div class={iconVariants({ class: clsx(theme?.icon, styling?.icon) })}>
         {@render icon()}
       </div>
     {/if}
 
-    <div class={content({ class: clsx(theme?.content, styling.content) })}>
+    <div class={content({ class: clsx(theme?.content, styling?.content) })}>
       {@render children()}
     </div>
 
     {#if dismissable}
-      <CloseButton class={close({ class: clsx(theme?.close, classes?.close) })} ariaLabel="Remove toast" {color} />
+      <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} ariaLabel="Remove toast" {color} />
     {/if}
   </div>
 {/if}
@@ -78,7 +61,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1919)
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1793)
 ## Props
 @prop children
 @prop icon
@@ -86,8 +69,6 @@
 @prop dismissable = true
 @prop color = "primary"
 @prop position
-@prop iconClass
-@prop contentClass
 @prop align = true
 @prop params
 @prop transition = fly

package/dist/toast/Toast.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ToastProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1919)
+ * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1793)
  * ## Props
  * @prop children
  * @prop icon
@@ -10,8 +10,6 @@ import type { ToastProps } from "../types";
  * @prop dismissable = true
  * @prop color = "primary"
  * @prop position
- * @prop iconClass
- * @prop contentClass
  * @prop align = true
  * @prop params
  * @prop transition = fly

package/dist/toast/ToastContainer.svelte

@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1934)
+[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1806)
 ## Props
 @prop children
 @prop position = "top-right"

package/dist/toast/ToastContainer.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ToastContainerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1934)
+ * [ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1806)
  * ## Props
  * @prop children
  * @prop position = "top-right"

package/dist/toolbar/Toolbar.svelte

@@ -52,7 +52,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
+[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
 ## Props
 @prop children
 @prop end

package/dist/toolbar/Toolbar.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ToolbarProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1170)
+ * [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1115)
  * ## Props
  * @prop children
  * @prop end

package/dist/toolbar/ToolbarButton.svelte

@@ -4,7 +4,7 @@
   import clsx from "clsx";
   import { getTheme } from "../theme/themeUtils";
 
-  let { children, color, name, "aria-label": ariaLabel, size, class: className, ...restProps }: ToolbarButtonProps = $props();
+  let { children, color, name, "aria-label": ariaLabel, "aria-expanded": ariaExpanded, size, class: className, ...restProps }: ToolbarButtonProps = $props();
 
   const theme = $derived(getTheme("toolbarButton"));
 
@@ -19,12 +19,12 @@
 </script>
 
 {#if restProps.href === undefined}
-  <button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+  <button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name} aria-expanded={ariaExpanded}>
     {#if name}<span class="sr-only">{name}</span>{/if}
     {@render children?.()}
   </button>
 {:else}
-  <a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+  <a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name} aria-expanded={ariaExpanded}>
     {#if name}<span class="sr-only">{name}</span>{/if}
     {@render children?.()}
   </a>
@@ -34,12 +34,13 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1176)
+[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1121)
 ## Props
 @prop children
 @prop color
 @prop name
 @prop "aria-label": ariaLabel
+@prop "aria-expanded": ariaExpanded
 @prop size
 @prop class: className
 @prop ...restProps

package/dist/toolbar/ToolbarButton.svelte.d.ts

@@ -2,12 +2,13 @@ import type { ToolbarButtonProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1176)
+ * [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1121)
  * ## Props
  * @prop children
  * @prop color
  * @prop name
  * @prop "aria-label": ariaLabel
+ * @prop "aria-expanded": ariaExpanded
  * @prop size
  * @prop class: className
  * @prop ...restProps

package/dist/toolbar/ToolbarGroup.svelte

@@ -24,7 +24,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1174)
+[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1119)
 ## Props
 @prop children
 @prop spacing

package/dist/toolbar/ToolbarGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ToolbarGroupProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1174)
+ * [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1119)
  * ## Props
  * @prop children
  * @prop spacing

package/dist/toolbar/theme.js

@@ -128,7 +128,7 @@ export const toolbarButton = tv({
         size: {
             xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
             sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
-            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
+            md: "m-0.5 rounded-base focus:ring-2 p-1.5",
             lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
         },
         background: {

package/dist/tooltip/Tooltip.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1941)
+[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1813)
 ## Props
 @prop type = "dark"
 @prop color = undefined

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TooltipProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1941)
+ * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1813)
  * ## Props
  * @prop type = "dark"
  * @prop color = undefined