flowbite-svelte 0.46.17 → 0.46.19

package/dist/forms/MultiSelect.svelte

@@ -8,6 +8,7 @@ export let value = [];
 export let size = "md";
 export let dropdownClass = "";
 export let placeholder = "";
+export let disabled = false;
 $: selectItems = items.filter((x) => value.includes(x.value));
 let show = false;
 const sizes = {
@@ -15,7 +16,7 @@ const sizes = {
   md: "px-3 py-1 min-h-[2.7rem]",
   lg: "px-4 py-2 min-h-[3.2rem]"
 };
-const multiSelectClass = "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500 focus-visible:outline-none";
+const multiSelectClass = "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-none";
 let multiSelectDropdown;
 $: multiSelectDropdown = twMerge("absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full", dropdownClass);
 const itemsClass = "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600";
@@ -24,6 +25,8 @@ let activeIndex = null;
 $: activeItem = activeIndex !== null ? items[(activeIndex % items.length + items.length) % items.length] : null;
 const activeItemClass = "bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100";
 const selectOption = (select) => {
+  if (disabled) return;
+  if (select.disabled) return;
   if (value.includes(select.value)) {
     clearThisOption(select);
   } else if (!value.includes(select.value)) {
@@ -32,22 +35,26 @@ const selectOption = (select) => {
   }
 };
 const clearAll = (e) => {
+  if (disabled) return;
   e.stopPropagation();
   value = [];
   dispatcher("change");
 };
 const clearThisOption = (select) => {
+  if (disabled) return;
   if (value.includes(select.value)) {
     value = value.filter((o) => o !== select.value);
     dispatcher("change");
   }
 };
 function handleEscape() {
+  if (disabled) return;
   if (show) {
     show = false;
   }
 }
 function handleToggleActiveItem() {
+  if (disabled) return;
   if (!show) {
     show = true;
     activeIndex = 0;
@@ -56,6 +63,7 @@ function handleToggleActiveItem() {
   }
 }
 function handleArrowUpDown(offset) {
+  if (disabled) return;
   if (!show) {
     show = true;
     activeIndex = 0;
@@ -68,6 +76,7 @@ function handleArrowUpDown(offset) {
   }
 }
 function handleKeyDown(event) {
+  if (disabled) return;
   switch (event.key) {
     case "Escape":
       handleEscape();
@@ -92,12 +101,12 @@ function handleKeyDown(event) {
 
 <!-- Hidden select for form submission -->
 <select {...$$restProps} {value} hidden multiple on:input>
-  {#each items as { value, name }}
-    <option {value}>{name}</option>
+  {#each items as { value, name, disabled }}
+    <option {value} {disabled}>{name}</option>
   {/each}
 </select>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div on:click|self={() => (show = !show)} on:focusout={() => (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class)}>
+<div on:click={() => !disabled && (show = !show)} on:focusout={() => !disabled && (show = false)} on:keydown={handleKeyDown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, sizes[size], $$props.class, !disabled && "focus-within:ring-1 focus-within:border-primary-500 dark:focus-within:border-primary-500", disabled && "opacity-50 cursor-not-allowed")}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
@@ -105,7 +114,7 @@ function handleKeyDown(event) {
     {#if selectItems.length}
       {#each selectItems as item (item.name)}
         <slot {item} clear={() => clearThisOption(item)}>
-          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)}>
+          <Badge color="dark" large={size === 'lg'} dismissable params={{ duration: 100 }} on:close={() => clearThisOption(item)} class={disabled ? "pointer-events-none" : undefined} >
             {item.name}
           </Badge>
         </slot>
@@ -114,10 +123,10 @@ function handleKeyDown(event) {
   </span>
   <div class="flex ms-auto gap-2 items-center">
     {#if selectItems.length}
-      <CloseButton {size} on:click={clearAll} color="none" class="p-0 focus:ring-gray-400 dark:text-white" />
+      <CloseButton {size} on:click={clearAll} color="none" class={twMerge("p-0 focus:ring-gray-400 dark:text-white", disabled && "cursor-not-allowed")} disabled={disabled} />
     {/if}
     <div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
-    <svg on:click|self={() => (show = !show)} class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+    <svg class={twMerge("cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white", disabled && "cursor-not-allowed")} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
     </svg>
   </div>
@@ -126,7 +135,7 @@ function handleKeyDown(event) {
     <div on:click|stopPropagation role="presentation" class={multiSelectDropdown}>
       {#each items as item (item.name)}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass, activeItem === item && activeItemClass)}>
+        <div on:click={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectItems.includes(item) && itemsSelectClass, activeItem === item && activeItemClass, disabled && "pointer-events-none", item.disabled && "opacity-50 cursor-not-allowed")}>
           {item.name}
         </div>
       {/each}
@@ -143,4 +152,5 @@ function handleKeyDown(event) {
 @prop export let size: FormSizeType = 'md';
 @prop export let dropdownClass: string = '';
 @prop export let placeholder: string = '';
+@prop export let disabled: boolean = false;
 -->

package/dist/forms/MultiSelect.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         size?: FormSizeType | undefined;
         dropdownClass?: string | undefined;
         placeholder?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         input: Event;
@@ -34,6 +35,7 @@ export type MultiSelectSlots = typeof __propDef.slots;
  * @prop export let size: FormSizeType = 'md';
  * @prop export let dropdownClass: string = '';
  * @prop export let placeholder: string = '';
+ * @prop export let disabled: boolean = false;
  */
 export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }

package/dist/forms/Select.svelte

@@ -21,8 +21,8 @@ $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, size
     <option disabled selected={(value === undefined) ? true : undefined} value="">{placeholder}</option>
   {/if}
 
-  {#each items as { value: itemValue, name }}
-    <option value={itemValue} selected={(itemValue === value) ? true : undefined}>{name}</option>
+  {#each items as { value: itemValue, name, disabled }}
+    <option disabled={disabled} value={itemValue} selected={(itemValue === value) ? true : undefined}>{name}</option>
   {:else}
     <slot />
   {/each}

package/dist/forms/Toggle.svelte

@@ -39,9 +39,9 @@ $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? "dark
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
-@prop export let group: (string | number)[] = [];
-@prop export let value: string | number = '';
-@prop export let checked: boolean | undefined = undefined;
-@prop export let customSize: string = '';
+@prop export let size: NonNullable<$$Props['size']> = 'default';
+@prop export let group: $$Props['group'] = [];
+@prop export let value: $$Props['value'] = '';
+@prop export let checked: $$Props['checked'] = undefined;
+@prop export let customSize: $$Props['customSize'] = '';
 -->

package/dist/forms/Toggle.svelte.d.ts

@@ -1,12 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
+import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        size?: ("small" | "default" | "large" | "custom") | undefined;
-        group?: (string | number)[] | undefined;
-        value?: (string | number) | undefined;
-        checked?: boolean | undefined;
-        customSize?: string | undefined;
+        name?: string;
+        color?: FormColorType;
+        custom?: boolean;
+        inline?: boolean;
+        group?: string[];
+        choices?: import("../types").CheckboxItem[];
+        value?: string | number;
+        checked?: boolean;
+        spacing?: string;
+        groupLabelClass?: string;
+        groupInputClass?: string;
+        class?: string;
+        required?: boolean;
+    } & {
+        size?: "small" | "default" | "large" | "custom";
+        group?: string[];
+        value?: string | number;
+        checked?: boolean;
+        customSize?: string;
     };
     events: {
         click: MouseEvent;
@@ -25,11 +39,11 @@ export type ToggleSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let size: 'small' | 'default' | 'large' | 'custom' = 'default';
- * @prop export let group: (string | number)[] = [];
- * @prop export let value: string | number = '';
- * @prop export let checked: boolean | undefined = undefined;
- * @prop export let customSize: string = '';
+ * @prop export let size: NonNullable<$$Props['size']> = 'default';
+ * @prop export let group: $$Props['group'] = [];
+ * @prop export let value: $$Props['value'] = '';
+ * @prop export let checked: $$Props['checked'] = undefined;
+ * @prop export let customSize: $$Props['customSize'] = '';
  */
 export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }

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/sidebar/SidebarItem.svelte

@@ -1,5 +1,8 @@
 <script>import { getContext } from "svelte";
 import { twMerge } from "tailwind-merge";
+export let action = () => {
+};
+export let params = {};
 export let href = "";
 export let label = "";
 export let spanClass = "ms-3";
@@ -16,7 +19,7 @@ $: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass
 </script>
 
 <li>
-  <a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
+  <a {...$$restProps} {href} use:action={params} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
     <slot name="icon" />
     <span class={spanClass}>{label}</span>
     {#if $$slots.subtext}
@@ -29,6 +32,8 @@ $: aClass = twMerge(active ? activeClass ?? context.activeClass : nonActiveClass
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let action: Action<HTMLElement, any> = () => {};
+@prop export let params: any = {};
 @prop export let href: string = '';
 @prop export let label: string = '';
 @prop export let spanClass: string = 'ms-3';

package/dist/sidebar/SidebarItem.svelte.d.ts

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Action } from 'svelte/action';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        action?: Action<HTMLElement, any> | undefined;
+        params?: any;
         href?: string | undefined;
         label?: string | undefined;
         spanClass?: string | undefined;
@@ -32,6 +35,8 @@ export type SidebarItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let action: Action<HTMLElement, any> = () => {};
+ * @prop export let params: any = {};
  * @prop export let href: string = '';
  * @prop export let label: string = '';
  * @prop export let spanClass: string = 'ms-3';

package/dist/types.d.ts

@@ -46,6 +46,7 @@ export type ReviewType = {
 export type SelectOptionType<T> = {
     name: string | number;
     value: T;
+    disabled?: boolean;
 };
 export type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
 export interface ActivityType {

package/dist/typography/A.svelte

@@ -1,10 +1,13 @@
 <script>import { twMerge } from "tailwind-merge";
+export let action = () => {
+};
+export let params = {};
 export let href = "#";
 export let color = "text-primary-600 dark:text-primary-500";
 export let aClass = "inline-flex items-center hover:underline";
 </script>
 
-<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)} on:click>
+<a {...$$restProps} {href} use:action={params} class={twMerge(aClass, color, $$props.class)} on:click>
   <slot />
 </a>
 
@@ -12,6 +15,8 @@ export let aClass = "inline-flex items-center hover:underline";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let action: Action<HTMLElement, any> = () => {};
+@prop export let params: any = {};
 @prop export let href: string = '#';
 @prop export let color: string = 'text-primary-600 dark:text-primary-500';
 @prop export let aClass: string = 'inline-flex items-center hover:underline';

package/dist/typography/A.svelte.d.ts

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { Action } from 'svelte/action';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        action?: Action<HTMLElement, any> | undefined;
+        params?: any;
         href?: string | undefined;
         color?: string | undefined;
         aClass?: string | undefined;
@@ -21,6 +24,8 @@ export type ASlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
+ * @prop export let action: Action<HTMLElement, any> = () => {};
+ * @prop export let params: any = {};
  * @prop export let href: string = '#';
  * @prop export let color: string = 'text-primary-600 dark:text-primary-500';
  * @prop export let aClass: string = 'inline-flex items-center hover:underline';

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,42 +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);
-
-    let index = tabbable.indexOf(document.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.17",
+  "version": "0.46.19",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -12,12 +12,12 @@
   "homepage": "https://flowbite-svelte.com/",
   "license": "MIT",
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.8",
     "@docsearch/css": "^3.6.1",
     "@docsearch/js": "^3.6.1",
-    "@playwright/test": "^1.46.1",
-    "@sveltejs/adapter-vercel": "^5.4.3",
-    "@sveltejs/kit": "^2.5.25",
+    "@playwright/test": "^1.47.2",
+    "@sveltejs/adapter-vercel": "^5.4.4",
+    "@sveltejs/kit": "^2.5.28",
     "@sveltejs/package": "2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
@@ -25,31 +25,31 @@
     "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.23.1",
-    "eslint": "^9.9.1",
+    "eslint": "^9.11.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "flowbite-svelte": "^0.46.16",
+    "eslint-plugin-svelte": "^2.44.0",
+    "flowbite-svelte": "^0.46.19",
     "flowbite-svelte-blocks": "^1.1.3",
     "flowbite-svelte-icons": "^1.6.1",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "prism-themes": "^1.9.0",
-    "publint": "^0.2.10",
+    "publint": "^0.2.11",
     "svelte": "^4.2.19",
-    "svelte-check": "^4.0.0",
-    "svelte-lib-helpers": "^0.4.7",
+    "svelte-check": "^4.0.2",
+    "svelte-lib-helpers": "^0.4.8",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.2",
-    "svelte2tsx": "^0.7.17",
+    "svelte2tsx": "^0.7.19",
     "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.12",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "typescript-eslint": "8.4.0",
-    "vite": "^5.4.3",
+    "vite": "^5.4.7",
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
@@ -99,7 +99,7 @@
     "url": "https://github.com/themesberg/flowbite-svelte"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.10",
+    "@floating-ui/dom": "^1.6.11",
     "apexcharts": "^3.53.0",
     "flowbite": "^2.5.1",
     "tailwind-merge": "^2.5.2"
@@ -746,6 +746,7 @@
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint:format": "prettier --plugin-search-dir . --check .",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "test:integration": "playwright test",
@@ -754,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"
   }
 }