flowbite-svelte 0.46.18 → 0.46.20

package/dist/list-group/Listgroup.svelte

@@ -28,7 +28,7 @@ $: groupClass = twMerge(defaultClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let items: T[] = [];
-@prop export let active: boolean = false;
-@prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+@prop export let items: NonNullable<$$Props['items']> = [];
+@prop export let active: $$Props['active'] = false;
+@prop export let defaultClass: $$Props['defaultClass'] = 'divide-y divide-gray-200 dark:divide-gray-600';
 -->

package/dist/list-group/Listgroup.svelte.d.ts

@@ -18,6 +18,7 @@ declare class __sveltets_Render<T extends ListGroupItemType | string> {
     } & {
         items?: T[] | undefined;
         active?: boolean;
+        defaultClass?: string;
     };
     events(): {
         click: CustomEvent<any>;
@@ -37,9 +38,9 @@ export type ListgroupSlots<T extends ListGroupItemType | string> = ReturnType<__
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let items: T[] = [];
- * @prop export let active: boolean = false;
- * @prop export let defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+ * @prop export let items: NonNullable<$$Props['items']> = [];
+ * @prop export let active: $$Props['active'] = false;
+ * @prop export let defaultClass: $$Props['defaultClass'] = 'divide-y divide-gray-200 dark:divide-gray-600';
  */
 export default class Listgroup<T extends ListGroupItemType | string> extends SvelteComponentTyped<ListgroupProps<T>, ListgroupEvents<T>, ListgroupSlots<T>> {
 }

package/dist/mega-menu/MegaMenu.svelte

@@ -29,8 +29,8 @@ $: ulCls = twMerge(ulClass, full && $$slots.extra ? "grid-cols-2" : "grid-cols-2
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let items: LinkTypeLike[] = [];
-@prop export let full: boolean = false;
-@prop export let open: boolean = false;
-@prop export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+@prop export let items: $$Props['items'] = [];
+@prop export let full: $$Props['full'] = false;
+@prop export let open: $$Props['open'] = false;
+@prop export let ulClass: $$Props['ulClass'] = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
 -->

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -27,10 +27,11 @@ declare const __propDef: {
         open?: boolean;
         yOnly?: boolean;
     } & {
-        items?: (LinkType & {
+        items: (LinkType & {
             [propName: string]: any;
         })[];
         full?: boolean;
+        open?: boolean;
         ulClass?: string;
     };
     events: {
@@ -54,10 +55,10 @@ export type MegaMenuSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let items: LinkTypeLike[] = [];
- * @prop export let full: boolean = false;
- * @prop export let open: boolean = false;
- * @prop export let ulClass: string = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
+ * @prop export let items: $$Props['items'] = [];
+ * @prop export let full: $$Props['full'] = false;
+ * @prop export let open: $$Props['open'] = false;
+ * @prop export let ulClass: $$Props['ulClass'] = 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max';
  */
 export default class MegaMenu extends SvelteComponentTyped<MegaMenuProps, MegaMenuEvents, MegaMenuSlots> {
 }

package/dist/rating/Rating.svelte

@@ -8,8 +8,8 @@ export let rating = 4;
 export let partialId = "partialStar" + generateId();
 export let icon = Star;
 export let count = false;
-export let iconFillColor;
-export let iconStrokeColor;
+export let iconFillColor = "";
+export let iconStrokeColor = "";
 const fullStarId = generateId();
 const grayStarId = generateId();
 $: fullStars = Math.floor(rating);
@@ -50,6 +50,6 @@ $: grayStars = total - (fullStars + Math.ceil(rateDiffence));
 @prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
 @prop export let icon: $$Props['icon'] = Star;
 @prop export let count: $$Props['count'] = false;
-@prop export let iconFillColor: $$Props['iconFillColor'];
-@prop export let iconStrokeColor: $$Props['iconStrokeColor'];
+@prop export let iconFillColor: $$Props['iconFillColor'] = '';
+@prop export let iconStrokeColor: $$Props['iconStrokeColor'] = '';
 -->

package/dist/rating/Rating.svelte.d.ts

@@ -10,8 +10,8 @@ declare const __propDef: {
         partialId?: string;
         icon?: ComponentType;
         count?: boolean;
-        iconFillColor?: string;
-        iconStrokeColor?: string;
+        iconFillColor?: string | undefined;
+        iconStrokeColor?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -34,8 +34,8 @@ export type RatingSlots = typeof __propDef.slots;
  * @prop export let partialId: $$Props['partialId'] = 'partialStar' + generateId();
  * @prop export let icon: $$Props['icon'] = Star;
  * @prop export let count: $$Props['count'] = false;
- * @prop export let iconFillColor: $$Props['iconFillColor'];
- * @prop export let iconStrokeColor: $$Props['iconStrokeColor'];
+ * @prop export let iconFillColor: $$Props['iconFillColor'] = '';
+ * @prop export let iconStrokeColor: $$Props['iconStrokeColor'] = '';
  */
 export default class Rating extends SvelteComponentTyped<RatingProps, RatingEvents, RatingSlots> {
 }

package/dist/typography/List.svelte

@@ -11,7 +11,7 @@ let positions = {
   inside: "list-inside",
   outside: "list-outside"
 };
-let classList = twMerge(lists[list ?? (tag === "ul" ? "disc" : "ol" ? "decimal" : "none")], positions[position], $$props.class);
+let classList = twMerge(lists[list ?? (tag === "ul" ? "disc" : tag === "ol" ? "decimal" : "none")], positions[position], $$props.class);
 </script>
 
 <svelte:element this={tag} {...$$restProps} class={classList}>

package/dist/utils/focusTrap.d.ts

@@ -1 +1,3 @@
-export default function focusTrap<Node extends HTMLElement>(node: Node, parameter?: any): void | import("svelte/action").ActionReturn<any, any>;
+import type { Action } from 'svelte/action';
+declare const focusTrap: Action<HTMLElement>;
+export default focusTrap;

package/dist/utils/focusTrap.js

@@ -1,44 +1,32 @@
 //
 // Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
 //
-
-// add all the elements inside modal which you want to make focusable
 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]
 `;
-
-/** @type {import('svelte/action').Action<HTMLElement, any>} */
-export default function focusTrap(node) {
-  /** @type {(e:KeyboardEvent)=>void} */
-  function handleFocusTrap(e) {
-    let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
-
-    if (!isTabPressed) {
-      return;
-    }
-
-    const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter((el) => el.hidden !== true);
-
-    const activeElement = document.activeElement && document.activeElement.shadowRoot ? document.activeElement.shadowRoot.activeElement : document.activeElement;
-
-    let index = tabbable.indexOf(activeElement ?? node);
-    if (index === -1 && e.shiftKey) index = 0;
-    index += tabbable.length + (e.shiftKey ? -1 : 1);
-    index %= tabbable.length;
-    /** @ts-ignore */
-    tabbable[index].focus();
-
-    e.preventDefault();
-  }
-
-  document.addEventListener('keydown', handleFocusTrap, true);
-
-  return {
-    destroy() {
-      document.removeEventListener('keydown', handleFocusTrap, 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(document.activeElement);
+        if (index === -1 && e.shiftKey)
+            index = 0;
+        index += tabbable.length + (e.shiftKey ? -1 : 1);
+        index %= tabbable.length;
+        tabbable[index].focus();
+        e.preventDefault();
+    };
+    document.addEventListener('keydown', handleFocusTrap, true);
+    return {
+        destroy() {
+            document.removeEventListener('keydown', handleFocusTrap, true);
+        }
+    };
+};
+export default focusTrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.18",
+  "version": "0.46.20",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -28,7 +28,7 @@
     "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.44.0",
-    "flowbite-svelte": "^0.46.18",
+    "flowbite-svelte": "^0.46.20",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.12.3",
@@ -755,7 +755,7 @@
     "gen:docs": "svelte-lib-helpers docs",
     "gen:compo-data": "svelte-lib-helpers compo-data",
     "copy:package": "svelte-lib-helpers package",
-    "lib-helpers": "npm run gen:docs && npm run gen:compo-data && npm run package && npm run gen:exports && npm run copy:package",
+    "lib-helpers": "npm run gen:docs && npm run gen:compo-data && npm run package && npm run gen:exports && npm run copy:package && npm run format",
     "package:publish": "standard-version && git push --follow-tags origin main && npm publish"
   }
 }