flowbite-svelte 0.46.17 → 0.46.18

package/README.md

@@ -468,7 +468,6 @@ Please read [how to contribute](https://github.com/themesberg/flowbite-svelte/bl
 
 View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md) on this page.
 
-
 ## License
 
 Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).

package/dist/forms/Helper.svelte

@@ -5,7 +5,7 @@ const colorClasses = {
   gray: "text-gray-900 dark:text-gray-300",
   green: "text-green-700 dark:text-green-500",
   red: "text-red-700 dark:text-red-500",
-  disabled: "text-gray-400 dark:text-gray-500"
+  disabled: "text-gray-400 dark:text-gray-500 grayscale contrast-50"
 };
 </script>
 

package/dist/forms/Label.svelte

@@ -7,7 +7,7 @@ const colorClasses = {
   gray: "text-gray-900 dark:text-gray-300",
   green: "text-green-700 dark:text-green-500",
   red: "text-red-700 dark:text-red-500",
-  disabled: "text-gray-400 dark:text-gray-500"
+  disabled: "text-gray-400 dark:text-gray-500 grayscale contrast-50"
 };
 $: {
   const control = node?.control;

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"} >
             {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/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/utils/focusTrap.js

@@ -22,7 +22,9 @@ export default function focusTrap(node) {
 
     const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter((el) => el.hidden !== true);
 
-    let index = tabbable.indexOf(document.activeElement ?? node);
+    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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.46.17",
+  "version": "0.46.18",
   "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.18",
     "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",