fix: TimelineItem for default order

src/lib/timeline/Timeline.svelte

@@ -8,10 +8,8 @@
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
 
   const theme = $derived(getTheme("timeline"));
-
-  $effect(() => {
-    setContext<TimelineVariants["order"]>("order", order);
-  });
+  // svelte-ignore state_referenced_locally
+  setContext<TimelineVariants["order"]>("order", order);
   const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 
@@ -23,10 +21,10 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1953)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1811)
 ## Props
 @prop children
 @prop order = "default"
 @prop class: className
 @prop ...restProps
--->
+-->

src/lib/timeline/TimelineItem.svelte

@@ -1,3 +1,4 @@
+
 <script lang="ts">
   import { getContext, untrack } from "svelte";
   import { timelineItem, type TimelineVariants } from "./theme";
@@ -15,6 +16,7 @@
     isLast = false,
     svgClass,
     liClass,
+    defaultDivClass,
     divClass,
     timeClass,
     h3Class,
@@ -46,10 +48,13 @@
     connector: connectorClass
   });
 
+
   const theme = $derived(getTheme("timelineItem"));
   let order = getContext<TimelineVariants["order"]>("order");
 
-  const { base, div, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+  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);
@@ -101,6 +106,7 @@
       </div>
     {/if}
   {:else if date}
+    <div class={defaultDivCls} aria-hidden="true"></div>
     <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
       {datePrefix}
       {formatDisplayDate(date, dateFormat)}

src/lib/timeline/theme.ts

@@ -40,7 +40,7 @@ export const groupItem = tv({
     img: "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0",
     div: "text-gray-600 dark:text-gray-400",
     title: "text-base font-normal",
-    span: "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400",
+    span: "inline-flex items-center bg-gray-100 border border-gray-200 text-xs font-medium px-1.5 py-0.5 rounded",
     svg: "me-1 h-3 w-3"
   }
 });
@@ -109,6 +109,7 @@ export const timelineItem = tv({
   slots: {
     base: "relative",
     div: "",
+    defaultDiv: "absolute w-2 h-2 bg-gray-200 rounded-full mt-1.5 -start-5 border border-buffer",
     time: "",
     h3: "",
     svg: "w-4 h-4",

src/lib/types.ts

@@ -1964,6 +1964,7 @@ export interface TimelineItemProps extends TimelineItemVariants, HTMLLiAttribute
   date: string;
   svgClass?: string;
   liClass?: string;
+  defaultDivClass?: string;
   divClass?: string;
   timeClass?: string;
   h3Class?: string;

src/routes/docs-examples/components/timeline/Activity.svelte

@@ -2,20 +2,23 @@
   import { Activity, ActivityItem } from "flowbite-svelte";
   let activities = [
     {
+      id:'activity-1',
       title:
         'Bonnie moved <a href="/" class="font-semibold text-primary-600 dark:text-primary-500 hover:underline">Jese Leos</a> to <span class="bg-gray-100 text-gray-800 text-xs font-normal me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-600 dark:text-gray-300">Funny Group</span>',
       date: "just now",
       alt: "image alt here",
       src: "/images/profile-picture-2.webp"
     },
     {
+      id:'activity-2',
       title: "We don’t serve their kind here! What? Your droids. ",
       date: "2 hours ago",
       alt: "image alt here",
       src: "/images/profile-picture-2.webp",
       text: "The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. "
     },
     {
+      id:'activity-3',
       title: "They’ll have to wait outside. We don’t want them here. ",
       date: "1 day ago",
       alt: "image alt here",

src/routes/docs-examples/components/timeline/Grouped.svelte

@@ -2,6 +2,8 @@
   import { Group, GroupItem } from "flowbite-svelte";
   let groupTimelines = [
     {
+      id:'group-1',
+      name: '<span class="font-medium">Laura Romeros</span> likes <span class="font-medium">Bonnie Green\'s</span> post in <span class="font-medium"> How to start with Flowbite library</span>',
       title:
         '<span class="font-medium text-gray-900 dark:text-white">Jese Leos</span> likes <span class="font-medium text-gray-900 dark:text-white">Bonnie Green\'s</span> post in <span class="font-medium text-gray-900 dark:text-white"> How to start with Flowbite library</span>',
       src: "/images/profile-picture-1.webp",
@@ -11,6 +13,8 @@
       comment: '"I wanted to share a webinar zeroheight."'
     },
     {
+      id:'group-2',
+      name: '<span class="font-medium">Jese Leos</span> likes <span class="font-medium">Bonnie Green\'s</span> post in <span class="font-medium"> How to start with Flowbite library</span>',
       title: '<span class="font-medium text-gray-900 dark:text-white">Bonnie Green</span> react to <span class="font-medium text-gray-900 dark:text-white">Thomas Lean\'s</span> comment',
       src: "/images/profile-picture-2.webp",
       alt: "alt here",

src/routes/docs-examples/components/timeline/[slug]/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { PageProps } from "./$types";
+
+  let { data }: PageProps = $props();
+  let Content = $derived(data.content);
+</script>
+
+<Content />

src/routes/docs-examples/components/timeline/[slug]/+page.ts

@@ -0,0 +1,15 @@
+import type { PageLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+
+export const load: PageLoad = async ({ params }) => {
+  try {
+    const post = await import(`../${params.slug}.svelte`);
+    const content = post.default;
+
+    return {
+      content,
+    };
+  } catch (err) {
+    throw error(404, `Timeline example "${params.slug}" not found`);
+  }
+};