flowbite-svelte 0.47.4 → 0.48.1

package/dist/table/Table.svelte

@@ -80,7 +80,7 @@ setContext("sorter", writable(null));
 @prop export let striped: $$Props['striped'] = false;
 @prop export let hoverable: $$Props['hoverable'] = false;
 @prop export let noborder: $$Props['noborder'] = false;
-@prop export let shadow: $$Props['shadow'] = false;
+@prop export let shadow: $$Props['shadow-sm'] = false;
 @prop export let color: NonNullable<$$Props['color']> = 'default';
 @prop export let customeColor: $$Props['customeColor'] = '';
 @prop export let items: $$Props['items'] = [];

package/dist/table/Table.svelte.d.ts

@@ -41,7 +41,7 @@ export type TableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
  * @prop export let striped: $$Props['striped'] = false;
  * @prop export let hoverable: $$Props['hoverable'] = false;
  * @prop export let noborder: $$Props['noborder'] = false;
- * @prop export let shadow: $$Props['shadow'] = false;
+ * @prop export let shadow: $$Props['shadow-sm'] = false;
  * @prop export let color: NonNullable<$$Props['color']> = 'default';
  * @prop export let customeColor: $$Props['customeColor'] = '';
  * @prop export let items: $$Props['items'] = [];

package/dist/table/TableBodyRow.svelte

@@ -20,12 +20,12 @@ const hoverColors = {
   custom: ""
 };
 const stripColors = {
-  default: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700",
-  blue: "odd:bg-blue-800 even:bg-blue-700 odd:dark:bg-blue-800 even:dark:bg-blue-700",
-  green: "odd:bg-green-800 even:bg-green-700 odd:dark:bg-green-800 even:dark:bg-green-700",
-  red: "odd:bg-red-800 even:bg-red-700 odd:dark:bg-red-800 even:dark:bg-red-700",
-  yellow: "odd:bg-yellow-800 even:bg-yellow-700 odd:dark:bg-yellow-800 even:dark:bg-yellow-700",
-  purple: "odd:bg-purple-800 even:bg-purple-700 odd:dark:bg-purple-800 even:dark:bg-purple-700",
+  default: "odd:bg-white even:bg-gray-50 dark:odd:bg-gray-800 dark:even:bg-gray-700",
+  blue: "odd:bg-blue-800 even:bg-blue-700 dark:odd:bg-blue-800 dark:even:bg-blue-700",
+  green: "odd:bg-green-800 even:bg-green-700 dark:odd:bg-green-800 dark:even:bg-green-700",
+  red: "odd:bg-red-800 even:bg-red-700 dark:odd:bg-red-800 dark:even:bg-red-700",
+  yellow: "odd:bg-yellow-800 even:bg-yellow-700 dark:odd:bg-yellow-800 dark:even:bg-yellow-700",
+  purple: "odd:bg-purple-800 even:bg-purple-700 dark:odd:bg-purple-800 dark:even:bg-purple-700",
   custom: ""
 };
 let trClass;

package/dist/tabs/Tabs.svelte

@@ -10,13 +10,13 @@ export let divider = true;
 export let activeClasses = "p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500";
 export let inactiveClasses = "p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300";
 const styledActiveClasses = {
-  full: "p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white",
+  full: "p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:bg-gray-700 dark:text-white",
   pill: "py-3 px-4 text-white bg-primary-600 rounded-lg",
   underline: "p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500",
   none: ""
 };
 const styledInactiveClasses = {
-  full: "p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700",
+  full: "p-4 w-full group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700",
   pill: "py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white",
   underline: "p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400",
   none: ""

package/dist/timeline/ActivityItem.svelte

@@ -3,7 +3,7 @@ export let activities = [];
 export let liClass = "mb-10 ms-6";
 export let spanClass = "flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900";
 export let imgClass = "rounded-full shadow-lg";
-export let outerDivClass = "p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600";
+export let outerDivClass = "p-4 bg-white rounded-lg border border-gray-200 shadow-xs dark:bg-gray-700 dark:border-gray-600";
 export let innerDivClass = "justify-between items-center mb-3 sm:flex";
 export let timeClass = "mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0";
 export let titleClass = "text-sm font-normal text-gray-500 lex dark:text-gray-300";
@@ -55,7 +55,7 @@ let textCls = twMerge(textClass, classText);
 @prop export let liClass: $$Props['liClass'] = 'mb-10 ms-6';
 @prop export let spanClass: $$Props['spanClass'] = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
 @prop export let imgClass: $$Props['imgClass'] = 'rounded-full shadow-lg';
-@prop export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
+@prop export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-xs dark:bg-gray-700 dark:border-gray-600';
 @prop export let innerDivClass: $$Props['innerDivClass'] = 'justify-between items-center mb-3 sm:flex';
 @prop export let timeClass: $$Props['timeClass'] = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
 @prop export let titleClass: $$Props['titleClass'] = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';

package/dist/timeline/ActivityItem.svelte.d.ts

@@ -35,7 +35,7 @@ export type ActivityItemSlots = typeof __propDef.slots;
  * @prop export let liClass: $$Props['liClass'] = 'mb-10 ms-6';
  * @prop export let spanClass: $$Props['spanClass'] = 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900';
  * @prop export let imgClass: $$Props['imgClass'] = 'rounded-full shadow-lg';
- * @prop export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600';
+ * @prop export let outerDivClass: $$Props['outerDivClass'] = 'p-4 bg-white rounded-lg border border-gray-200 shadow-xs dark:bg-gray-700 dark:border-gray-600';
  * @prop export let innerDivClass: $$Props['innerDivClass'] = 'justify-between items-center mb-3 sm:flex';
  * @prop export let timeClass: $$Props['timeClass'] = 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0';
  * @prop export let titleClass: $$Props['titleClass'] = 'text-sm font-normal text-gray-500 lex dark:text-gray-300';

package/dist/toast/Toast.svelte

@@ -5,7 +5,7 @@ import { CloseButton } from "..";
 export let dismissable = true;
 export let color = "primary";
 export let position = "none";
-export let divClass = "w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3";
+export let divClass = "w-full max-w-xs p-4 text-gray-500 bg-white shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3";
 export let defaultIconClass = "w-8 h-8";
 export let contentClass = "w-full text-sm font-normal";
 export let align = true;
@@ -86,7 +86,7 @@ const clsBtnExtraClass = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:t
 @prop export let dismissable: $$Props['dismissable'] = true;
 @prop export let color: NonNullable<$$Props['color']> = 'primary';
 @prop export let position: NonNullable<$$Props['position']> = 'none';
-@prop export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
+@prop export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3';
 @prop export let defaultIconClass: $$Props['defaultIconClass'] = 'w-8 h-8';
 @prop export let contentClass: $$Props['contentClass'] = 'w-full text-sm font-normal';
 @prop export let align: $$Props['align'] = true;

package/dist/toast/Toast.svelte.d.ts

@@ -34,7 +34,7 @@ export type ToastSlots = typeof __propDef.slots;
  * @prop export let dismissable: $$Props['dismissable'] = true;
  * @prop export let color: NonNullable<$$Props['color']> = 'primary';
  * @prop export let position: NonNullable<$$Props['position']> = 'none';
- * @prop export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
+ * @prop export let divClass: $$Props['divClass'] = 'w-full max-w-xs p-4 text-gray-500 bg-white shadow-sm dark:text-gray-400 dark:bg-gray-800 gap-3';
  * @prop export let defaultIconClass: $$Props['defaultIconClass'] = 'w-8 h-8';
  * @prop export let contentClass: $$Props['contentClass'] = 'w-full text-sm font-normal';
  * @prop export let align: $$Props['align'] = true;

package/dist/toolbar/ToolbarButton.svelte

@@ -20,13 +20,13 @@ const colors = {
   default: "focus:ring-gray-400 hover:bg-gray-100"
 };
 const sizing = {
-  xs: "m-0.5 rounded-sm focus:ring-1 p-0.5",
-  sm: "m-0.5 rounded focus:ring-1 p-0.5",
+  xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
+  sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
   md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
   lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
 };
 let buttonClass;
-$: buttonClass = twMerge("focus:outline-none whitespace-normal", sizing[size], colors[color], color === "default" && (background ? "dark:hover:bg-gray-600" : "dark:hover:bg-gray-700"), $$props.class);
+$: buttonClass = twMerge("focus:outline-hidden whitespace-normal", sizing[size], colors[color], color === "default" && (background ? "dark:hover:bg-gray-600" : "dark:hover:bg-gray-700"), $$props.class);
 const svgSizes = {
   xs: "w-3 h-3",
   sm: "w-3.5 h-3.5",

package/dist/toolbar/ToolbarGroup.svelte

@@ -1,6 +1,6 @@
 <script>import { twMerge } from "tailwind-merge";
 import { getContext } from "svelte";
-export let divClass = "flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0";
+export let divClass = "flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 sm:first:ps-0 sm:last:pe-0";
 const options = getContext("toolbar");
 if (options) $options = true;
 </script>
@@ -13,5 +13,5 @@ if (options) $options = true;
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0';
+@prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 sm:first:ps-0 sm:last:pe-0';
 -->

package/dist/toolbar/ToolbarGroup.svelte.d.ts

@@ -17,7 +17,7 @@ export type ToolbarGroupSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 first:sm:ps-0 last:sm:pe-0';
+ * @prop export let divClass: string = 'flex items-center space-x-1 rtl:space-x-reverse sm:pe-4 sm:ps-4 sm:first:ps-0 sm:last:pe-0';
  */
 export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
 }

package/dist/types.d.ts

@@ -45,7 +45,7 @@ export type SelectOptionType<T> = {
     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 type TransitionTypes = 'fade' | 'fly' | 'slide' | 'blur-sm' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur';
 export interface ActivityType {
     title: HTMLElement | string;
     date: Date | string;

package/dist/typography/Mark.svelte

@@ -1,7 +1,7 @@
 <script>import { twMerge } from "tailwind-merge";
 export let color = "text-white dark:bg-blue-500";
 export let bgColor = "bg-blue-600";
-export let markClass = "px-2 rounded";
+export let markClass = "px-2 rounded-sm";
 </script>
 
 <mark {...$$restProps} class={twMerge(markClass, bgColor, color, $$props.class)}>
@@ -14,5 +14,5 @@ export let markClass = "px-2 rounded";
 ## Props
 @prop export let color: $$Props['color'] = 'text-white dark:bg-blue-500';
 @prop export let bgColor: $$Props['bgColor'] = 'bg-blue-600';
-@prop export let markClass: $$Props['markClass'] = 'px-2 rounded';
+@prop export let markClass: $$Props['markClass'] = 'px-2 rounded-sm';
 -->

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

@@ -21,7 +21,7 @@ export type MarkSlots = typeof __propDef.slots;
  * ## Props
  * @prop export let color: $$Props['color'] = 'text-white dark:bg-blue-500';
  * @prop export let bgColor: $$Props['bgColor'] = 'bg-blue-600';
- * @prop export let markClass: $$Props['markClass'] = 'px-2 rounded';
+ * @prop export let markClass: $$Props['markClass'] = 'px-2 rounded-sm';
  */
 export default class Mark extends SvelteComponentTyped<MarkProps, MarkEvents, MarkSlots> {
 }

package/dist/typography/Span.svelte

@@ -7,7 +7,7 @@ export let gradient = false;
 export let highlight = false;
 export let highlightClass = "text-blue-600 dark:text-blue-500";
 export let decorationClass = "decoration-2 decoration-blue-400 dark:decoration-blue-600";
-export let gradientClass = "text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400";
+export let gradientClass = "text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400";
 let underlineClass = twMerge("underline", decorationClass);
 let classSpan = twMerge(italic && "italic", underline && underlineClass, linethrough && "line-through", uppercase && "uppercase", gradient ? gradientClass : "font-semibold text-gray-900 dark:text-white", highlight && highlightClass, $$props.class);
 </script>
@@ -28,5 +28,5 @@ let classSpan = twMerge(italic && "italic", underline && underlineClass, linethr
 @prop export let highlight: $$Props['highlight'] = false;
 @prop export let highlightClass: $$Props['highlightClass'] = 'text-blue-600 dark:text-blue-500';
 @prop export let decorationClass: $$Props['decorationClass'] = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
-@prop export let gradientClass: $$Props['gradientClass'] = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+@prop export let gradientClass: $$Props['gradientClass'] = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
 -->

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

@@ -33,7 +33,7 @@ export type SpanSlots = typeof __propDef.slots;
  * @prop export let highlight: $$Props['highlight'] = false;
  * @prop export let highlightClass: $$Props['highlightClass'] = 'text-blue-600 dark:text-blue-500';
  * @prop export let decorationClass: $$Props['decorationClass'] = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
- * @prop export let gradientClass: $$Props['gradientClass'] = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+ * @prop export let gradientClass: $$Props['gradientClass'] = 'text-transparent bg-clip-text bg-linear-to-r to-emerald-600 from-sky-400';
  */
 export default class Span extends SvelteComponentTyped<SpanProps, SpanEvents, SpanSlots> {
 }

package/dist/utils/backdrop.js

@@ -1,6 +1,6 @@
 import { createEventDispatcher } from 'svelte';
 export let open = false;
-const backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+const backdropClasses = 'bg-gray-900 bg-black/50 dark:bg-black/80 fixed inset-0 z-40';
 export let placement;
 export const init = (node, _open) => {
     getPlacementClasses().map((c) => node.classList.add(c));

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.47.4",
+  "version": "0.48.1",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
+  "packageManager": "pnpm@8.15.4",
   "author": {
     "name": "Shinichi Okada",
     "email": "connect@codewithshin.com",
@@ -13,43 +14,43 @@
   "license": "MIT",
   "devDependencies": {
     "@changesets/cli": "2.27.10",
-    "@docsearch/css": "^3.6.2",
-    "@docsearch/js": "^3.6.2",
-    "@playwright/test": "^1.48.2",
-    "@sveltejs/adapter-vercel": "^5.4.6",
-    "@sveltejs/kit": "^2.7.3",
+    "@docsearch/css": "^3.9.0",
+    "@docsearch/js": "^3.9.0",
+    "@playwright/test": "1.50.1",
+    "@sveltejs/adapter-vercel": "^5.6.2",
+    "@sveltejs/kit": "^2.17.2",
     "@sveltejs/package": "2.3.7",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
+    "@tailwindcss/postcss": "^4.0.7",
     "@types/eslint": "^9.6.1",
-    "autoprefixer": "^10.4.20",
     "dayjs": "^1.11.13",
     "esbuild": "0.24.0",
-    "eslint": "^9.13.0",
+    "eslint": "^9.20.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.0",
+    "eslint-plugin-svelte": "^2.46.1",
     "flowbite-svelte-icons": "^1.6.2",
-    "globals": "^15.11.0",
+    "globals": "^15.15.0",
     "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.1",
+    "prettier-plugin-svelte": "^3.3.3",
     "prism-themes": "^1.9.0",
     "publint": "^0.2.12",
     "svelte": "^4.2.19",
-    "svelte-check": "^4.0.5",
+    "svelte-check": "^4.1.4",
     "svelte-lib-helpers": "^0.4.16",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.3",
-    "svelte2tsx": "^0.7.22",
+    "svelte2tsx": "^0.7.34",
     "tailwind-merge": "^1.13.1",
-    "tailwindcss": "^3.4.14",
-    "tslib": "^2.8.0",
-    "typescript": "^5.6.3",
+    "tailwindcss": "^4.0.7",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3",
     "typescript-eslint": "8.16.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.4"
+    "vite": "^5.4.14",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
     "svelte": "^3.55.1 || ^4.0.0 || ^5.0.0"
@@ -98,10 +99,10 @@
     "url": "git+https://github.com/themesberg/flowbite-svelte.git"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.11",
+    "@floating-ui/dom": "^1.6.13",
     "apexcharts": "^3.54.1",
-    "flowbite": "^2.5.2",
-    "tailwind-merge": "^2.5.4"
+    "flowbite": "^3.1.2",
+    "tailwind-merge": "^3.0.1"
   },
   "files": [
     "dist",