flowbite-svelte 2.0.0-next.5 → 2.0.0-next.6

package/dist/index.d.ts

@@ -65,7 +65,7 @@ export * from "./forms/timepicker";
 export * from "./forms/toggle";
 export * from "./typography/a";
 export * from "./typography/blockquote";
-export * from "./typography/descriptionlist";
+export * from "./typography/description-list/index.js";
 export * from "./typography/heading";
 export * from "./typography/hr";
 export * from "./typography/img";

package/dist/index.js

@@ -71,7 +71,7 @@ export * from "./forms/toggle";
 // typography
 export * from "./typography/a";
 export * from "./typography/blockquote";
-export * from "./typography/descriptionlist";
+export * from "./typography/description-list/index.js";
 export * from "./typography/heading";
 export * from "./typography/hr";
 export * from "./typography/img";

package/dist/tabs/Tabs.svelte

@@ -73,9 +73,73 @@
     registerTab: registerFn,
     unregisterTab: unregisterFn
   });
+
+  // Keyboard navigation handler for accessibility
+  function handleKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    if (target.getAttribute("role") !== "tab") return;
+
+    const tabs = Array.from(target.closest('[role="tablist"]')?.querySelectorAll('[role="tab"]') || []) as HTMLElement[];
+    const currentIndex = tabs.indexOf(target);
+
+    let nextIndex = currentIndex;
+    let attempts = 0; // Safety counter to prevent infinite loops
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % tabs.length;
+        // Skip disabled tabs
+        attempts = 0;
+        while (tabs[nextIndex]?.hasAttribute("disabled") && nextIndex !== currentIndex && attempts < tabs.length) {
+          nextIndex = (nextIndex + 1) % tabs.length;
+          attempts++;
+        }
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = currentIndex - 1 < 0 ? tabs.length - 1 : currentIndex - 1;
+        // Skip disabled tabs
+        attempts = 0;
+        while (tabs[nextIndex]?.hasAttribute("disabled") && nextIndex !== currentIndex && attempts < tabs.length) {
+          nextIndex = nextIndex - 1 < 0 ? tabs.length - 1 : nextIndex - 1;
+          attempts++;
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        // Find first non-disabled tab
+        attempts = 0;
+        while (tabs[nextIndex]?.hasAttribute("disabled") && nextIndex < tabs.length - 1 && attempts < tabs.length) {
+          nextIndex++;
+          attempts++;
+        }
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = tabs.length - 1;
+        // Find last non-disabled tab
+        attempts = 0;
+        while (tabs[nextIndex]?.hasAttribute("disabled") && nextIndex > 0 && attempts < tabs.length) {
+          nextIndex--;
+          attempts++;
+        }
+        break;
+      default:
+        return;
+    }
+
+    if (nextIndex !== currentIndex && tabs[nextIndex]) {
+      tabs[nextIndex].focus();
+      tabs[nextIndex].click(); // Activate the tab
+    }
+  }
 </script>
 
-<ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className) })} data-scope="tabs" data-part="base">
+<ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className) })} data-scope="tabs" data-part="base" onkeydown={handleKeydown}>
   {@render children()}
 </ul>
 {#if dividerBool}

package/dist/theme-provider/themes.d.ts

@@ -58,7 +58,7 @@ export { timepicker } from "../forms/timepicker";
 export { toggle } from "../forms/toggle";
 export { anchor } from "../typography/a";
 export { blockquote } from "../typography/blockquote";
-export { descriptionList } from "../typography/descriptionlist";
+export { descriptionList } from "../typography/description-list";
 export { heading } from "../typography/heading";
 export { hr } from "../typography/hr";
 export { img } from "../typography/img";

package/dist/theme-provider/themes.js

@@ -63,7 +63,7 @@ export { toggle } from "../forms/toggle";
 // typography
 export { anchor } from "../typography/a";
 export { blockquote } from "../typography/blockquote";
-export { descriptionList } from "../typography/descriptionlist";
+export { descriptionList } from "../typography/description-list";
 export { heading } from "../typography/heading";
 export { hr } from "../typography/hr";
 export { img } from "../typography/img";

package/dist/timeline/Group.svelte

@@ -15,6 +15,12 @@
 
 <div class={card({ class: clsx(theme?.card, className) })} data-scope="group" data-part="card">
   <time class={time({ class: clsx(theme?.time, styling?.time) })} data-part="time">{date}</time>
+  <!--
+  NOTE:
+  restProps (data-testid, aria-*, etc.)
+  are intentionally forwarded to the <ol>,
+  which is the public/semantic root of Group.
+-->
   <ol {...restProps} class={list({ class: clsx(theme?.list, styling?.list) })} data-part="list">
     {@render children()}
   </ol>

package/dist/timeline/GroupItem.svelte

@@ -14,6 +14,12 @@
 </script>
 
 {#each timelines as { name, src, alt, isPrivate, href, comment, id }, index (id ?? href ?? name ?? index)}
+  <!--
+  NOTE:
+  restProps (data-testid, aria-*, etc.)
+  are intentionally forwarded to the <li>,
+  which is the public/semantic root of GroupItem.
+-->
   <li class={base({ class: clsx(theme?.base, className) })} {...restProps} data-scope="group-item" data-part="base">
     <a {href} class={link({ class: clsx(theme?.link, styling?.link) })} data-part="link">
       <img class={img({ class: clsx(theme?.img, styling?.img) })} {src} {alt} data-part="img" />

package/dist/toast/theme.d.ts

@@ -17,6 +17,18 @@ export declare const toast: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
+        success: {
+            icon: string;
+            close: string;
+        };
+        warning: {
+            icon: string;
+            close: string;
+        };
+        danger: {
+            icon: string;
+            close: string;
+        };
         primary: {
             icon: string;
             close: string;
@@ -123,6 +135,18 @@ export declare const toast: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
+        success: {
+            icon: string;
+            close: string;
+        };
+        warning: {
+            icon: string;
+            close: string;
+        };
+        danger: {
+            icon: string;
+            close: string;
+        };
         primary: {
             icon: string;
             close: string;
@@ -229,6 +253,18 @@ export declare const toast: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
+        success: {
+            icon: string;
+            close: string;
+        };
+        warning: {
+            icon: string;
+            close: string;
+        };
+        danger: {
+            icon: string;
+            close: string;
+        };
         primary: {
             icon: string;
             close: string;

package/dist/toast/theme.js

@@ -14,7 +14,18 @@ export const toast = tv({
             "bottom-right": { base: "absolute bottom-5 end-5" }
         },
         color: {
-            // primary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            success: {
+                icon: "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200",
+                close: "text-green-500 dark:text-green-200 hover:text-green-600 dark:hover:text-green-500"
+            },
+            warning: {
+                icon: "text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200",
+                close: "text-yellow-500 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-500"
+            },
+            danger: {
+                icon: "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200",
+                close: "text-red-500 dark:text-red-200 hover:text-red-600 dark:hover:text-red-500"
+            },
             primary: {
                 icon: "text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200",
                 close: "text-primary-500 dark:text-primary-200 hover:text-primary-600 dark:hover:text-primary-500"

package/dist/types.d.ts

@@ -59,7 +59,7 @@ import type { ToggleVariants } from "./forms/toggle/theme";
 import type { PhoneInputVariants } from "./forms/phoneinput/theme";
 import type { AnchorVariants } from "./typography/a/theme";
 import type { BlockquoteVariants } from "./typography/blockquote/theme";
-import type { DescriptionListVariants } from "./typography/descriptionlist/theme";
+import type { DescriptionListVariants } from "./typography/description-list/theme";
 import type { HeadingVariants } from "./typography/heading/theme";
 import type { HrVariants } from "./typography/hr/theme";
 import type { ImgVariants } from "./typography/img/theme";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "2.0.0-next.5",
+  "version": "2.0.0-next.6",
   "description": "Flowbite components for Svelte",
   "author": {
     "name": "Shinichi Okada",