flowbite-svelte 1.13.1 → 1.13.2

package/dist/buttons/Button.svelte

@@ -20,7 +20,11 @@
   let btnCls = $derived(base({ class: clsx(outline && outline_(), shadow && shadow_(), theme?.base, className) }));
 </script>
 
-{#if restProps.href === undefined}
+{#if restProps.href !== undefined}
+  <a {...restProps} class={btnCls}>
+    {@render children?.()}
+  </a>
+{:else if tag === "button"}
   <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
     {#if loading}
@@ -30,10 +34,6 @@
       </svg>
     {/if}
   </button>
-{:else if restProps.href}
-  <a {...restProps} class={btnCls} role="button">
-    {@render children?.()}
-  </a>
 {:else}
   <svelte:element this={tag} {...restProps} class={btnCls}>
     {@render children?.()}

package/dist/drawer/Drawer.svelte

@@ -6,7 +6,7 @@
   import { sineIn } from "svelte/easing";
   import { fly } from "svelte/transition";
   import { drawer } from ".";
-  import { setContext } from "svelte";
+  import { setContext, tick } from "svelte";
 
   let { children, open = $bindable(false), hidden = $bindable(), modal, offset, width, dismissable = offset ? false : undefined, placement = "left", class: className, transitionParams, transition = fly, outsideclose, activateClickOutside, ...restProps }: DrawerProps = $props();
 
@@ -53,7 +53,15 @@
 
   function init(node: HTMLDialogElement) {
     // set initial offset, later it will be switched on/off by onintrostart
-    if (offset) node.style[placement] = offset;
+    if (offset) {
+      node.style[placement] = offset;
+      tick().then(() => {
+        // few borwsers give focus when dialog is open even in non-modal version
+        // to prevent that we set dialog to inert during creation and remove it
+        // as soon as ready
+        node.inert = false;
+      });
+    }
   }
 
   function onintrostart(ev: CustomEvent & { currentTarget: HTMLDialogElement }) {
@@ -82,7 +90,7 @@
 </Dialog>
 
 {#if offset && !open}
-  <Dialog {@attach init} open modal={false} {dismissable} {outsideclose} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <Dialog {@attach init} open modal={false} {dismissable} {outsideclose} inert {...restProps} class={base({ class: clsx(theme?.base, className) })}>
     {@render children?.()}
   </Dialog>
 {/if}

package/dist/drawer/theme.js

@@ -68,15 +68,15 @@ export const drawerhead = tv({
 });
 export const drawerhandle = tv({
     slots: {
-        base: "p-4 absolute flex select-none cursor-grab active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 dark:focus-visible:ring-offset-gray-800",
+        base: "p-4 absolute flex select-none cursor-grab active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-300 dark:focus-visible:ring-gray-500",
         handle: "absolute rounded-lg bg-gray-300 dark:bg-gray-600"
     },
     variants: {
         placement: {
-            left: { base: "inset-y-0 right-0 touch-pan-y", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
-            right: { base: "inset-y-0 left-0 touch-pan-y", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
-            top: { base: "inset-x-0 bottom-0 touch-pan-x", handle: "w-8 h-1 left-1/2 -translate-x-1/2" },
-            bottom: { base: "inset-x-0 top-0 touch-pan-x", handle: "w-8 h-1 left-1/2 -translate-x-1/2" }
+            left: { base: "inset-y-0 right-0 touch-pan-x", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
+            right: { base: "inset-y-0 left-0 touch-pan-x", handle: "w-1 h-8 top-1/2 -translate-y-1/2" },
+            top: { base: "inset-x-0 bottom-0 touch-pan-y", handle: "w-8 h-1 left-1/2 -translate-x-1/2" },
+            bottom: { base: "inset-x-0 top-0 touch-pan-y", handle: "w-8 h-1 left-1/2 -translate-x-1/2" }
         }
     }
 });

package/dist/forms/radio/RadioButton.svelte

@@ -8,17 +8,12 @@
 
   const theme = getTheme("radioButton");
 
-  let inputEl: HTMLInputElement;
   let isChecked = $derived(value == group);
   let base = $derived(radioButton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));
-
-  function clickHandler() {
-    inputEl?.click(); // manually trigger the click on the hidden input
-  }
 </script>
 
-<Button tag="label" onclick={clickHandler} {pill} {outline} {size} {color} {shadow} class={base}>
-  <input bind:this={inputEl} type="radio" class="sr-only" {value} bind:group {...restProps} />
+<Button tag="label" {pill} {outline} {size} {color} {shadow} class={base}>
+  <input type="radio" class="sr-only" {value} bind:group {...restProps} />
   {@render children?.()}
 </Button>
 

package/dist/speed-dial/SpeedDialButton.svelte

@@ -22,15 +22,10 @@
 
   const theme = getTheme("speedDialButton");
 
-  let { base, span } = $derived(speedDialButton({ textOutside }));
-  let spanCls = $derived(tooltip === "none" ? span({ class: clsx(theme?.span, styling.span) }) : "sr-only");
-
-  // Add flex-col when tooltip is shown
-  let buttonCls = $derived(
-    base({
-      class: clsx(theme?.base, className, tooltip !== "none" && "flex-col")
-    })
-  );
+  let { base, span } = $derived(speedDialButton({ textOutside, noTooltip: tooltip === "none" }));
+  let spanCls = $derived(tooltip === "none" || textOutside ? span({ class: clsx(theme?.span, styling.span) }) : "sr-only");
+
+  let buttonCls = $derived(base({ class: clsx(theme?.base, className) }));
 </script>
 
 <Button {pill} {color} {...restProps} class={buttonCls}>

package/dist/speed-dial/theme.d.ts

@@ -31,6 +31,10 @@ export declare const speedDial: import("tailwind-variants").TVReturnType<{
     popper: string;
 }, undefined, unknown, unknown, undefined>>;
 export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
+    noTooltip: {
+        false: {};
+        true: {};
+    };
     textOutside: {
         true: {
             base: string;
@@ -41,6 +45,10 @@ export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     base: string;
     span: string;
 }, undefined, {
+    noTooltip: {
+        false: {};
+        true: {};
+    };
     textOutside: {
         true: {
             base: string;
@@ -51,6 +59,10 @@ export declare const speedDialButton: import("tailwind-variants").TVReturnType<{
     base: string;
     span: string;
 }, import("tailwind-variants").TVReturnType<{
+    noTooltip: {
+        false: {};
+        true: {};
+    };
     textOutside: {
         true: {
             base: string;

package/dist/speed-dial/theme.js

@@ -17,9 +17,13 @@ export const speedDial = tv({
 export const speedDialButton = tv({
     slots: {
         base: "w-[52px] h-[52px] shadow-xs p-0",
-        span: "block mb-px text-xs font-medium"
+        span: "mb-px text-xs font-medium"
     },
     variants: {
+        noTooltip: {
+            false: {},
+            true: {}
+        },
         textOutside: {
             true: {
                 base: "relative",
@@ -27,5 +31,6 @@ export const speedDialButton = tv({
             }
         }
     },
+    compoundVariants: [{ noTooltip: true, textOutside: false, class: { base: "flex flex-col" } }],
     defaultVariants: {}
 });

package/dist/typography/hr/theme.d.ts

@@ -5,7 +5,7 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     withChildren: {
         true: {
             base: string;
-            container: string;
+            div: string;
         };
     };
 }, {
@@ -16,7 +16,7 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     withChildren: {
         true: {
             base: string;
-            container: string;
+            div: string;
         };
     };
 }, {
@@ -27,7 +27,7 @@ export declare const hr: import("tailwind-variants").TVReturnType<{
     withChildren: {
         true: {
             base: string;
-            container: string;
+            div: string;
         };
     };
 }, {

package/dist/typography/hr/theme.js

@@ -9,7 +9,7 @@ export const hr = tv({
         withChildren: {
             true: {
                 base: "w-full",
-                container: "relative"
+                div: "relative"
             }
         }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -41,7 +41,7 @@
     "eslint-plugin-svelte": "^3.11.0",
     "flowbite-svelte-admin-dashboard": "^1.1.1",
     "flowbite-svelte-blocks": "^2.1.0",
-    "flowbite-svelte-icons": "^2.3.0",
+    "flowbite-svelte-icons": "^3.0.0",
     "flowbite-svelte-illustrations": "^1.0.5",
     "flowbite-typography": "^1.0.5",
     "globals": "^16.3.0",