flowbite-svelte 1.2.3 → 1.2.5

package/dist/drawer/Drawer.svelte

@@ -5,6 +5,7 @@
   import { drawer } from ".";
   import type { DrawerProps } from "../types";
   import clsx from "clsx";
+  import { trapFocus } from "../utils/actions.svelte";
 
   let { children, hidden = $bindable(), closeDrawer = () => (hidden = true), activateClickOutside = true, position, width, backdrop = true, backdropClass, placement = "left", class: className, transitionParams, transitionType = fly, ...restProps }: DrawerProps = $props();
 
@@ -26,11 +27,11 @@
   let transition_params = $derived(Object.assign({}, { x, y, duration: 200, easing: sineIn }));
 </script>
 
-<svelte:window onkeydown={hidden ? undefined : (ev: KeyboardEvent) => ev.key === "Escape" && (hidden = true)} bind:innerWidth bind:innerHeight />
+<svelte:window bind:innerWidth bind:innerHeight />
 
 {#if !hidden}
   <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={activateClickOutside ? closeDrawer : undefined}></div>
-  <div {...restProps} class={base({ class: clsx(className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
+  <div use:trapFocus={{ onEscape: closeDrawer }} {...restProps} class={base({ class: clsx(className) })} transition:transitionType={transitionParams ? transitionParams : (transition_params as ParamsType)} tabindex="-1">
     {@render children?.()}
   </div>
 {/if}

package/dist/forms/{checkbox-button → checkbox}/CheckboxButton.svelte

@@ -2,7 +2,7 @@
   import Button from "../../buttons/Button.svelte";
   import clsx from "clsx";
   import type { CheckboxButtonProps } from "../../types";
-  import { checkButton } from "./theme";
+  import { checkboxbutton } from "./theme";
 
   let { children, class: className, group = $bindable([]), value, checked, inline, pill, outline, size, color, shadow, ...restProps }: CheckboxButtonProps = $props();
 
@@ -43,7 +43,7 @@
     }
   }
 
-  let buttonClass: string = $derived(checkButton({ inline, checked, class: clsx(className) }));
+  let buttonClass: string = $derived(checkboxbutton({ inline, checked, class: clsx(className) }));
 </script>
 
 <Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>

package/dist/forms/checkbox/index.d.ts

@@ -1,3 +1,3 @@
-import Checkbox from "./Checkbox.svelte";
-import { checkbox } from "./theme";
-export { Checkbox, checkbox };
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as ChecboxButton } from "./CheckboxButton.svelte";
+export { checkbox, checkboxbutton } from "./theme";

package/dist/forms/checkbox/index.js

@@ -1,3 +1,3 @@
-import Checkbox from "./Checkbox.svelte";
-import { checkbox } from "./theme";
-export { Checkbox, checkbox };
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as ChecboxButton } from "./CheckboxButton.svelte";
+export { checkbox, checkboxbutton } from "./theme";

package/dist/forms/checkbox/theme.d.ts

@@ -287,3 +287,28 @@ export declare const checkbox: import("tailwind-variants").TVReturnType<{
     base: string;
     div: string;
 }, undefined, unknown, unknown, undefined>>;
+export declare const checkboxbutton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, "", {
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    checked: {
+        true: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/forms/checkbox/theme.js

@@ -96,3 +96,18 @@ export const checkbox = tv({
         disabled: false
     }
 });
+export const checkboxbutton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        },
+        checked: {
+            true: "outline-4 outline-green-500"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});

package/dist/forms/{radio-button → radio}/RadioButton.svelte

@@ -1,14 +1,13 @@
 <script lang="ts" generics="T">
   import { Button, type RadioButtonProps } from "../..";
   import { twMerge } from "tailwind-merge";
-  import clsx from "clsx";
-  import { radioButton } from ".";
+  import { radiobutton } from ".";
 
   let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
 
   let inputEl: HTMLInputElement;
   let isChecked = $derived(value == group);
-  let base = $derived(twMerge(radioButton({ inline }), isChecked && checkedClass, className));
+  let base = $derived(twMerge(radiobutton({ inline }), isChecked && checkedClass, className));
 
   function clickHandler() {
     inputEl?.click(); // manually trigger the click on the hidden input

package/dist/forms/radio/index.d.ts

@@ -1,3 +1,3 @@
-import Radio from "./Radio.svelte";
-import { radio } from "./theme";
-export { Radio, radio };
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioButton } from "./RadioButton.svelte";
+export { radio, radiobutton } from "./theme";

package/dist/forms/radio/index.js

@@ -1,3 +1,3 @@
-import Radio from "./Radio.svelte";
-import { radio } from "./theme";
-export { Radio, radio };
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioButton } from "./RadioButton.svelte";
+export { radio, radiobutton } from "./theme";

package/dist/forms/radio/theme.d.ts

@@ -271,3 +271,19 @@ export declare const radio: import("tailwind-variants").TVReturnType<{
     input: string;
     label: string;
 }, undefined, unknown, unknown, undefined>>;
+export declare const radiobutton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", {
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/forms/radio/theme.js

@@ -81,3 +81,15 @@ export const radio = tv({
         color: "primary"
     }
 });
+export const radiobutton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export * from "./badge";
 export * from "./banner";
 export * from "./bottom-navigation";
 export * from "./breadcrumb";
-export * from "./buttongroup";
+export * from "./button-group";
 export * from "./buttons";
 export * from "./card";
 export * from "./carousel";
@@ -42,17 +42,15 @@ export * from "./tooltip";
 export * from "./utils";
 export * from "./video";
 export * from "./forms/checkbox";
-export * from "./forms/checkbox-button";
 export * from "./forms/dropzone";
 export * from "./forms/fileupload";
-export * from "./forms/floating-label-input";
+export * from "./forms/floating-label";
 export * from "./forms/helper";
 export * from "./forms/input";
 export * from "./forms/input-addon";
 export * from "./forms/label";
 export * from "./forms/select";
 export * from "./forms/radio";
-export * from "./forms/radio-button";
 export * from "./forms/range";
 export * from "./forms/search";
 export * from "./forms/tags";

package/dist/index.js

@@ -6,7 +6,7 @@ export * from "./badge";
 export * from "./banner";
 export * from "./bottom-navigation";
 export * from "./breadcrumb";
-export * from "./buttongroup";
+export * from "./button-group";
 export * from "./buttons";
 export * from "./card";
 export * from "./carousel";
@@ -43,17 +43,15 @@ export * from "./utils";
 export * from "./video";
 // forms
 export * from "./forms/checkbox";
-export * from "./forms/checkbox-button";
 export * from "./forms/dropzone";
 export * from "./forms/fileupload";
-export * from "./forms/floating-label-input";
+export * from "./forms/floating-label";
 export * from "./forms/helper";
 export * from "./forms/input";
 export * from "./forms/input-addon";
 export * from "./forms/label";
 export * from "./forms/select";
 export * from "./forms/radio";
-export * from "./forms/radio-button";
 export * from "./forms/range";
 export * from "./forms/search";
 export * from "./forms/tags";

package/dist/modal/Modal.svelte

@@ -6,8 +6,7 @@
   import { fade } from "svelte/transition";
   import { modal as modalTheme } from ".";
   import type { ModalProps } from "../types";
-
-  // TODO: missing focus trap
+  import { trapFocus } from "../utils/actions.svelte";
 
   let { children, oncancel, onclose, modal = true, autoclose = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
 
@@ -25,13 +24,13 @@
   };
 
   function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
-    // this event get called when user press ESC key
+    // this event gets called when user presses ESC key
+    // We'll handle ESC via the trapFocus action instead
     if (ev.currentTarget instanceof HTMLDialogElement) {
-      oncancel?.(ev); // propagate the event to the user
-      // if user cancels the event we don't close the modal
-      if (ev.defaultPrevented || permanent) return;
+      // Stop the default ESC handling from dialog element
+      // as we're handling it in our trapFocus action
       ev.preventDefault();
-      closeModal();
+      oncancel?.(ev); // propagate the event to the user
     }
   }
 
@@ -53,10 +52,20 @@
       open = true;
     }
   });
+
+  // Handler for Escape key that respects component state
+  const handleEscape = () => {
+    if (!permanent) {
+      oncancel?.({ currentTarget: dlg } as any);
+      // If oncancel prevented default, we don't close
+      if (oncancel && event?.defaultPrevented) return;
+      closeModal();
+    }
+  };
 </script>
 
 {#if open}
-  <dialog bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
+  <dialog use:trapFocus={{ onEscape: handleEscape }} bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition={paramsOptions as ParamsType} onintrostart={() => (modal ? dlg?.showModal() : dlg?.show())} onoutroend={() => dlg?.close()}>
     {#if title || header}
       <div class={headerCls({ class: headerClass })}>
         {#if title}

package/dist/sidebar/Sidebar.svelte

@@ -6,6 +6,7 @@
   import { sidebar } from ".";
   import type { SidebarProps, SidebarCtxType } from "../types";
   import clsx from "clsx";
+  import { trapFocus } from "../utils/actions.svelte";
 
   let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: SidebarProps = $props();
 
@@ -20,11 +21,7 @@
   let innerWidth: number = $state(-1);
   let isLargeScreen = $derived(innerWidth >= breakpointValues[breakpoint]);
 
-  const initialPosition = position;
-
-  $effect(() => {
-    // position = isLargeScreen ? "static" : initialPosition;
-  });
+  // const initialPosition = position;
 
   const activeUrlStore = writable("");
   setContext("activeUrl", activeUrlStore);
@@ -50,6 +47,11 @@
   let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
 
   setContext("sidebarContext", sidebarCtx);
+
+  // Handler for Escape key
+  const handleEscape = () => {
+    closeSidebar?.();
+  };
 </script>
 
 <svelte:window bind:innerWidth />
@@ -66,7 +68,7 @@
       <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
     {/if}
   {/if}
-  <aside transition:transition={transitionParams} {...restProps} class={base({ class: clsx(className) })} aria-label={ariaLabel}>
+  <aside use:trapFocus={!isLargeScreen && isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={transitionParams} {...restProps} class={base({ class: clsx(className) })} aria-label={ariaLabel}>
     <div class={div({ class: divClass })}>
       {@render children()}
     </div>

package/dist/theme/index.d.ts

@@ -8684,7 +8684,7 @@ export declare const baseThemes: {
         input: string;
         label: string;
     }, undefined, unknown, unknown, undefined>>;
-    radioButton: import("tailwind-variants").TVReturnType<{
+    radiobutton: import("tailwind-variants").TVReturnType<{
         inline: {
             true: string;
             false: string;

package/dist/theme/index.js

@@ -1,4 +1,4 @@
-import { accordion, accordionitem, activity, activityitem, advancedrating, alert, anchor, android, avatar, badge, banner, blockquote, bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem, breadcrumb, button, buttonGroup, card, cardPlaceholder, checkbox, darkmode, defaultMockup, descriptionList, desktop, drawer, drawerhead, dropdown, dropdownHeader, dropdownDivider, dropdownItem, dropdownGroup, dropzone, fileupload, floatingLabelInput, footer, footerBrand, footerCopyright, footerIcon, footerLink, footerLinkGroup, gallery, gradientButton, group, groupitem, heading, helper, hr, imagePlaceholder, img, indicator, input, ios, kbd, label, laptop, layout, list, listGroup, listGroupItem, listPlaceholder, mark, megamenu, modal, navbar_li, navbar_ul, navbar, navbar_brand, navbar_hamburger, pagination, paginationItem, paragraph, popover, progressbar, radio, radioButton, range, rating, review, scorerating, search, secondary, select, sidebar, sidebarbutton, sidebarcta, sidebardropdownwrapper, sitebarbrand, skeleton, smartwatch, span, spinner, tabItem, table, tablebodycell, tablebodyrow, tablehead, tableheadcell, tablet, tabs, testimonialPlaceholder, textPlaceholder, textarea, timeline, timelineitem, toast, toggle, toolbar, toolbarButton, toolbarGroup, tooltip, videoPlaceholder, widgetPlaceholder } from "..";
+import { accordion, accordionitem, activity, activityitem, advancedrating, alert, anchor, android, avatar, badge, banner, blockquote, bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem, breadcrumb, button, buttonGroup, card, cardPlaceholder, checkbox, darkmode, defaultMockup, descriptionList, desktop, drawer, drawerhead, dropdown, dropdownHeader, dropdownDivider, dropdownItem, dropdownGroup, dropzone, fileupload, floatingLabelInput, footer, footerBrand, footerCopyright, footerIcon, footerLink, footerLinkGroup, gallery, gradientButton, group, groupitem, heading, helper, hr, imagePlaceholder, img, indicator, input, ios, kbd, label, laptop, layout, list, listGroup, listGroupItem, listPlaceholder, mark, megamenu, modal, navbar_li, navbar_ul, navbar, navbar_brand, navbar_hamburger, pagination, paginationItem, paragraph, popover, progressbar, radio, radiobutton, range, rating, review, scorerating, search, secondary, select, sidebar, sidebarbutton, sidebarcta, sidebardropdownwrapper, sitebarbrand, skeleton, smartwatch, span, spinner, tabItem, table, tablebodycell, tablebodyrow, tablehead, tableheadcell, tablet, tabs, testimonialPlaceholder, textPlaceholder, textarea, timeline, timelineitem, toast, toggle, toolbar, toolbarButton, toolbarGroup, tooltip, videoPlaceholder, widgetPlaceholder } from "..";
 export const baseThemes = {
     accordion,
     accordionitem,
@@ -96,7 +96,7 @@ export const baseThemes = {
     input,
     label,
     radio,
-    radioButton,
+    radiobutton,
     range,
     search,
     select,

package/dist/types.d.ts

@@ -14,7 +14,7 @@ import type Slide from "./carousel/Slide.svelte";
 import type { ApexOptions } from "apexcharts";
 import type { DrawerVariants } from "./drawer/theme";
 import type { FileuploadViariants } from "./forms/fileupload/theme";
-import type { FloatingLabelInputVaratiants } from "./forms/floating-label-input/theme";
+import type { FloatingLabelInputVaratiants } from "./forms/floating-label/theme";
 import type { HelperVariants } from "./forms/helper/theme";
 import type { InputVariants } from "./forms/input/theme";
 import type { LabelVariants } from "./forms/label/theme";

package/dist/utils/Popper.svelte

@@ -99,10 +99,11 @@
     if (ev.newState === "open") {
       autoUpdateDestroy = dom.autoUpdate(referenceElement ?? invoker, popover, updatePopoverPosition);
       popover.ownerDocument.addEventListener("click", closeOnClickOutside);
+      popover.ownerDocument.addEventListener("keydown", closeOnEscape); // ✅ Add this line
     } else {
-      // When closing the popover, we destroy the autoUpdate instance
       autoUpdateDestroy();
       popover.ownerDocument.removeEventListener("click", closeOnClickOutside);
+      popover.ownerDocument.removeEventListener("keydown", closeOnEscape); // ✅ Add this line
     }
   }
 
@@ -150,6 +151,12 @@
     });
   }
 
+  function closeOnEscape(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      isOpen = false;
+    }
+  }
+
   /**
    * Close the popper when clicking outside of it.
    * This is necessary to get around a bug in Safari where clicking outside of the open popper does not close it.

package/dist/utils/actions.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export declare function trapFocus(node: HTMLElement, options?: {
+    onEscape?: () => void;
+    isClosing?: boolean;
+} | null): {
+    update(newOptions?: {
+        onEscape?: () => void;
+        isClosing?: boolean;
+    } | null): void;
+    destroy(): void;
+};

package/dist/utils/actions.svelte.js

@@ -0,0 +1,114 @@
+/**
+ * Svelte action that traps focus within a DOM node and handles Escape key
+ * @param node - The DOM node to trap focus within
+ * @param options - Optional configuration object
+ * @returns An action object with destroy method
+ */
+export function trapFocus(node, options = {}) {
+    // If options is null, don't trap focus at all
+    if (options === null) {
+        return {
+            update(newOptions = {}) {
+                options = newOptions;
+            },
+            destroy() { }
+        };
+    }
+    const previous = document.activeElement;
+    // Track if we're currently closing via outside click
+    let isClosingViaOutsideClick = false;
+    // Create a flag to prevent re-focusing when focus is moved outside
+    let isFocusMovedOutside = false;
+    function focusable() {
+        return Array.from(node.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+    }
+    function handleKeydown(event) {
+        if (event.key === "Tab" && options !== null) {
+            const current = document.activeElement;
+            const elements = focusable();
+            const first = elements.at(0);
+            const last = elements.at(-1);
+            if (event.shiftKey && current === first) {
+                last?.focus();
+                event.preventDefault();
+            }
+            if (!event.shiftKey && current === last) {
+                first?.focus();
+                event.preventDefault();
+            }
+        }
+        else if (event.key === "Escape" && options !== null && options.onEscape) {
+            event.preventDefault();
+            // Mark as closing via escape to prevent focus restoration
+            isClosingViaOutsideClick = true;
+            options.onEscape();
+        }
+    }
+    // Handler for when focus moves outside the trapped area
+    function handleFocusOut(event) {
+        // If focus is moving outside our node and not to one of our triggers
+        if (!node.contains(event.relatedTarget) && event.relatedTarget !== previous) {
+            isFocusMovedOutside = true;
+        }
+    }
+    $effect(() => {
+        // Only add event listeners if options is not null
+        if (options !== null) {
+            // Check if we're currently in a closing state
+            isClosingViaOutsideClick = !!options.isClosing;
+            // Only auto-focus if not closing from outside click
+            if (!isClosingViaOutsideClick && !isFocusMovedOutside) {
+                const elements = focusable();
+                if (elements.length > 0) {
+                    elements[0].focus();
+                }
+            }
+            node.addEventListener("keydown", handleKeydown);
+            node.addEventListener("focusout", handleFocusOut);
+            return () => {
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+                // Only restore focus if not closing via outside click and focus hasn't moved outside
+                if (!isClosingViaOutsideClick && !isFocusMovedOutside && previous) {
+                    setTimeout(() => {
+                        previous.focus({ preventScroll: true });
+                    }, 0);
+                }
+            };
+        }
+    });
+    // Return the action object with destroy method
+    return {
+        update(newOptions = {}) {
+            // Update the closing state
+            if (newOptions && newOptions.isClosing !== undefined) {
+                isClosingViaOutsideClick = newOptions.isClosing;
+            }
+            options = newOptions;
+            // Clean up existing listeners if options becomes null
+            if (options === null) {
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+            }
+            else if (options !== null) {
+                // Add listener if it wasn't already there
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+                node.addEventListener("keydown", handleKeydown);
+                node.addEventListener("focusout", handleFocusOut);
+            }
+        },
+        destroy() {
+            if (options !== null) {
+                node.removeEventListener("keydown", handleKeydown);
+                node.removeEventListener("focusout", handleFocusOut);
+                // Only restore focus if not closing via outside click and focus hasn't moved outside
+                if (!isClosingViaOutsideClick && !isFocusMovedOutside && previous) {
+                    setTimeout(() => {
+                        previous.focus({ preventScroll: true });
+                    }, 0);
+                }
+            }
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -172,8 +172,8 @@
       "svelte": "./dist/breadcrumb/BreadcrumbItem.svelte"
     },
     "./ButtonGroup.svelte": {
-      "types": "./dist/buttongroup/ButtonGroup.svelte.d.ts",
-      "svelte": "./dist/buttongroup/ButtonGroup.svelte"
+      "types": "./dist/button-group/ButtonGroup.svelte.d.ts",
+      "svelte": "./dist/button-group/ButtonGroup.svelte"
     },
     "./Button.svelte": {
       "types": "./dist/buttons/Button.svelte.d.ts",
@@ -316,8 +316,8 @@
       "svelte": "./dist/forms/checkbox/Checkbox.svelte"
     },
     "./CheckboxButton.svelte": {
-      "types": "./dist/forms/checkbox-button/CheckboxButton.svelte.d.ts",
-      "svelte": "./dist/forms/checkbox-button/CheckboxButton.svelte"
+      "types": "./dist/forms/checkbox/CheckboxButton.svelte.d.ts",
+      "svelte": "./dist/forms/checkbox/CheckboxButton.svelte"
     },
     "./Dropzone.svelte": {
       "types": "./dist/forms/dropzone/Dropzone.svelte.d.ts",
@@ -328,8 +328,8 @@
       "svelte": "./dist/forms/fileupload/Fileupload.svelte"
     },
     "./FloatingLabelInput.svelte": {
-      "types": "./dist/forms/floating-label-input/FloatingLabelInput.svelte.d.ts",
-      "svelte": "./dist/forms/floating-label-input/FloatingLabelInput.svelte"
+      "types": "./dist/forms/floating-label/FloatingLabelInput.svelte.d.ts",
+      "svelte": "./dist/forms/floating-label/FloatingLabelInput.svelte"
     },
     "./Helper.svelte": {
       "types": "./dist/forms/helper/Helper.svelte.d.ts",
@@ -352,8 +352,8 @@
       "svelte": "./dist/forms/radio/Radio.svelte"
     },
     "./RadioButton.svelte": {
-      "types": "./dist/forms/radio-button/RadioButton.svelte.d.ts",
-      "svelte": "./dist/forms/radio-button/RadioButton.svelte"
+      "types": "./dist/forms/radio/RadioButton.svelte.d.ts",
+      "svelte": "./dist/forms/radio/RadioButton.svelte"
     },
     "./Range.svelte": {
       "types": "./dist/forms/range/Range.svelte.d.ts",

package/dist/forms/checkbox-button/index.d.ts

@@ -1,2 +0,0 @@
-import CheckboxButton from "./CheckboxButton.svelte";
-export { CheckboxButton };

package/dist/forms/checkbox-button/index.js

@@ -1,2 +0,0 @@
-import CheckboxButton from "./CheckboxButton.svelte";
-export { CheckboxButton };

package/dist/forms/checkbox-button/theme.d.ts

@@ -1,25 +0,0 @@
-export declare const checkButton: import("tailwind-variants").TVReturnType<{
-    inline: {
-        true: string;
-        false: string;
-    };
-    checked: {
-        true: string;
-    };
-}, undefined, "", {
-    inline: {
-        true: string;
-        false: string;
-    };
-    checked: {
-        true: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    inline: {
-        true: string;
-        false: string;
-    };
-    checked: {
-        true: string;
-    };
-}, undefined, "", unknown, unknown, undefined>>;

package/dist/forms/checkbox-button/theme.js

@@ -1,16 +0,0 @@
-import { tv } from "tailwind-variants";
-export const checkButton = tv({
-    base: "",
-    variants: {
-        inline: {
-            true: "inline-flex",
-            false: "flex"
-        },
-        checked: {
-            true: "outline-4 outline-green-500"
-        }
-    },
-    defaultVariants: {
-        inline: true
-    }
-});

package/dist/forms/radio-button/index.d.ts

@@ -1,3 +0,0 @@
-import RadioButton from "./RadioButton.svelte";
-import { radioButton } from "./theme";
-export { RadioButton, radioButton };

package/dist/forms/radio-button/index.js

@@ -1,3 +0,0 @@
-import RadioButton from "./RadioButton.svelte";
-import { radioButton } from "./theme";
-export { RadioButton, radioButton };

package/dist/forms/radio-button/theme.d.ts

@@ -1,16 +0,0 @@
-export declare const radioButton: import("tailwind-variants").TVReturnType<{
-    inline: {
-        true: string;
-        false: string;
-    };
-}, undefined, "", {
-    inline: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    inline: {
-        true: string;
-        false: string;
-    };
-}, undefined, "", unknown, unknown, undefined>>;

package/dist/forms/radio-button/theme.js

@@ -1,13 +0,0 @@
-import { tv } from "tailwind-variants";
-export const radioButton = tv({
-    base: "",
-    variants: {
-        inline: {
-            true: "inline-flex",
-            false: "flex"
-        }
-    },
-    defaultVariants: {
-        inline: true
-    }
-});

package/dist/utils/focusTrap.d.ts

@@ -1,4 +0,0 @@
-import type { Action } from "svelte/action";
-declare const focusTrap: Action<HTMLElement>;
-export default focusTrap;
-export declare function isFocusable(element: Element): boolean;

package/dist/utils/focusTrap.js

@@ -1,38 +0,0 @@
-//
-// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
-//
-const selectorTabbable = `
-  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
-  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
-  textarea:not([disabled]):not([tabindex='-1']),
-  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
-`;
-const focusTrap = (node) => {
-    const handleFocusTrap = (e) => {
-        const isTabPressed = e.key === "Tab" || e.keyCode === 9;
-        if (!isTabPressed) {
-            return;
-        }
-        const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter((el) => el instanceof HTMLElement && el.hidden !== true);
-        let index = tabbable.indexOf(node.ownerDocument.activeElement);
-        if (index === -1 && e.shiftKey) {
-            index = 0;
-        }
-        index += tabbable.length + (e.shiftKey ? -1 : 1);
-        index %= tabbable.length;
-        tabbable[index].focus();
-        e.preventDefault();
-    };
-    node.ownerDocument.addEventListener("keydown", handleFocusTrap, true);
-    return {
-        destroy() {
-            node.ownerDocument.removeEventListener("keydown", handleFocusTrap, true);
-        }
-    };
-};
-export default focusTrap;
-export function isFocusable(element) {
-    if (!element)
-        return false;
-    return element.matches(selectorTabbable);
-}