flowbite-svelte 0.46.15 → 0.46.17

package/dist/tabs/TabItem.svelte

@@ -6,6 +6,7 @@ export let title = "Tab title";
 export let activeClasses = void 0;
 export let inactiveClasses = void 0;
 export let defaultClass = "inline-block text-sm font-medium text-center disabled:cursor-not-allowed";
+export let divClass = "";
 const ctx = getContext("ctx") ?? {};
 const selected = ctx.selected ?? writable();
 function init(node) {
@@ -33,7 +34,7 @@ $: buttonClass = twMerge(
 
   {#if open}
     <div class="hidden tab_content_placeholder">
-      <div use:init>
+      <div use:init class={divClass}>
         <slot />
       </div>
     </div>
@@ -49,4 +50,5 @@ $: buttonClass = twMerge(
 @prop export let activeClasses: string | undefined = undefined;
 @prop export let inactiveClasses: string | undefined = undefined;
 @prop export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+@prop export let divClass: string = '';
 -->

package/dist/tabs/TabItem.svelte.d.ts

@@ -2,11 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        open?: boolean;
-        title?: string;
+        open?: boolean | undefined;
+        title?: string | undefined;
         activeClasses?: string | undefined;
         inactiveClasses?: string | undefined;
-        defaultClass?: string;
+        defaultClass?: string | undefined;
+        divClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -38,6 +39,7 @@ export type TabItemSlots = typeof __propDef.slots;
  * @prop export let activeClasses: string | undefined = undefined;
  * @prop export let inactiveClasses: string | undefined = undefined;
  * @prop export let defaultClass: string = 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed';
+ * @prop export let divClass: string = '';
  */
 export default class TabItem extends SvelteComponentTyped<TabItemProps, TabItemEvents, TabItemSlots> {
 }

package/dist/tabs/Tabs.svelte.d.ts

@@ -8,12 +8,12 @@ export interface TabCtxType {
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tabStyle?: "full" | "pill" | "underline" | "none";
-        defaultClass?: string;
-        contentClass?: string;
-        divider?: boolean;
-        activeClasses?: string;
-        inactiveClasses?: string;
+        tabStyle?: ("full" | "pill" | "underline" | "none") | undefined;
+        defaultClass?: string | undefined;
+        contentClass?: string | undefined;
+        divider?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        olClass?: string;
+        olClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,14 +4,14 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         activities: ActivityType[];
-        liClass?: string;
-        spanClass?: string;
-        imgClass?: string;
-        outerDivClass?: string;
-        innerDivClass?: string;
-        timeClass?: string;
-        titleClass?: string;
-        textClass?: string;
+        liClass?: string | undefined;
+        spanClass?: string | undefined;
+        imgClass?: string | undefined;
+        outerDivClass?: string | undefined;
+        innerDivClass?: string | undefined;
+        timeClass?: string | undefined;
+        titleClass?: string | undefined;
+        textClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,10 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
-        timeClass?: string;
+        divClass?: string | undefined;
+        timeClass?: string | undefined;
         date: Date | string;
-        olClass?: string;
+        olClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/timeline/GroupItem.svelte

@@ -5,6 +5,7 @@ export let imgClass = "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0";
 export let divClass = "text-gray-600 dark:text-gray-400";
 export let titleClass = "text-base font-normal";
 export let spanClass = "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400";
+export let isPrivacy = true;
 let aCls = twMerge(aClass, $$props.classA);
 let imgCls = twMerge(imgClass, $$props.classImg);
 let divCls = twMerge(divClass, $$props.classDiv);
@@ -23,6 +24,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
         {#if comment}
           <div class="text-sm font-normal">{comment}</div>
         {/if}
+        {#if isPrivacy}
         <span class={spanCls}>
           {#if isPrivate}
             <svg class="me-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -37,6 +39,7 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
             Public
           {/if}
         </span>
+        {/if}
       </div>
     </a>
   </li>
@@ -52,4 +55,5 @@ let spanCls = twMerge(spanClass, $$props.classSpan);
 @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
 @prop export let titleClass: string = 'text-base font-normal';
 @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+@prop export let isPrivacy: boolean = true;
 -->

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

@@ -4,11 +4,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         timelines: GroupTimelineType[];
-        aClass?: string;
-        imgClass?: string;
-        divClass?: string;
-        titleClass?: string;
-        spanClass?: string;
+        aClass?: string | undefined;
+        imgClass?: string | undefined;
+        divClass?: string | undefined;
+        titleClass?: string | undefined;
+        spanClass?: string | undefined;
+        isPrivacy?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -27,6 +28,7 @@ export type GroupItemSlots = typeof __propDef.slots;
  * @prop export let divClass: string = 'text-gray-600 dark:text-gray-400';
  * @prop export let titleClass: string = 'text-base font-normal';
  * @prop export let spanClass: string = 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400';
+ * @prop export let isPrivacy: boolean = true;
  */
 export default class GroupItem extends SvelteComponentTyped<GroupItemProps, GroupItemEvents, GroupItemSlots> {
 }

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        order?: "default" | "vertical" | "horizontal" | "activity" | "group";
+        order?: ("default" | "vertical" | "horizontal" | "activity" | "group") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        title?: string;
-        date?: string;
-        svgClass?: string;
+        title?: string | undefined;
+        date?: string | undefined;
+        svgClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/toast/Toast.svelte

@@ -39,7 +39,8 @@ const colors = {
   pink: "text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200",
   none: ""
 };
-let iconClass = twMerge(
+let iconClass;
+$: iconClass = twMerge(
   "inline-flex items-center justify-center shrink-0 rounded-lg",
   colors[color],
   defaultIconClass

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

@@ -4,16 +4,16 @@ import type { ColorVariant, ToastPositionType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        dismissable?: boolean;
-        color?: ColorVariant;
-        position?: ToastPositionType;
-        divClass?: string;
-        defaultIconClass?: string;
-        contentClass?: string;
-        align?: boolean;
-        transition?: (node: HTMLElement, params: any) => TransitionConfig;
-        params?: {};
-        toastStatus?: boolean;
+        dismissable?: boolean | undefined;
+        color?: ColorVariant | undefined;
+        position?: ToastPositionType | undefined;
+        divClass?: string | undefined;
+        defaultIconClass?: string | undefined;
+        contentClass?: string | undefined;
+        align?: boolean | undefined;
+        transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
+        params?: {} | undefined;
+        toastStatus?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

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

@@ -3,10 +3,10 @@ import type { ToolbarButtonType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: ToolbarButtonType;
+        color?: ToolbarButtonType | undefined;
         name?: string | undefined;
         ariaLabel?: string | undefined;
-        size?: "xs" | "sm" | "md" | "lg";
+        size?: ("xs" | "sm" | "md" | "lg") | undefined;
         href?: string | undefined;
     };
     events: {

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
+        divClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        href?: string;
-        color?: string;
-        aClass?: string;
+        href?: string | undefined;
+        color?: string | undefined;
+        aClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -3,14 +3,14 @@ import type { BlockQuoteType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        border?: boolean;
-        italic?: boolean;
-        borderClass?: string;
-        bgClass?: string;
-        bg?: boolean;
-        baseClass?: string;
-        alignment?: "left" | "center" | "right";
-        size?: BlockQuoteType;
+        border?: boolean | undefined;
+        italic?: boolean | undefined;
+        borderClass?: string | undefined;
+        bgClass?: string | undefined;
+        bg?: boolean | undefined;
+        baseClass?: string | undefined;
+        alignment?: ("left" | "center" | "right") | undefined;
+        size?: BlockQuoteType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         tag: "dt" | "dd";
-        dtClass?: string;
-        ddClass?: string;
+        dtClass?: string | undefined;
+        ddClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-        color?: string;
-        customSize?: string;
+        tag?: ("h1" | "h2" | "h3" | "h4" | "h5" | "h6") | undefined;
+        color?: string | undefined;
+        customSize?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        icon?: boolean;
-        divClass?: string;
-        hrClass?: string;
-        iconDivClass?: string;
-        textSpanClass?: string;
-        innerDivClass?: string;
+        icon?: boolean | undefined;
+        divClass?: string | undefined;
+        hrClass?: string | undefined;
+        iconDivClass?: string | undefined;
+        textSpanClass?: string | undefined;
+        innerDivClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -5,13 +5,13 @@ declare const __propDef: {
         caption?: string | undefined;
         src?: string | undefined;
         srcset?: string | undefined;
-        size?: string;
-        alignment?: string;
-        imgClass?: string;
-        figClass?: string;
-        alt?: string;
-        effect?: string;
-        captionClass?: string;
+        size?: string | undefined;
+        alignment?: string | undefined;
+        imgClass?: string | undefined;
+        figClass?: string | undefined;
+        alt?: string | undefined;
+        effect?: string | undefined;
+        captionClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        divClass?: string;
-        cols?: string;
+        divClass?: string | undefined;
+        cols?: string | undefined;
         gap: number;
     };
     events: {

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        icon?: boolean;
-        liClass?: string;
+        icon?: boolean | undefined;
+        liClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: "ul" | "ol" | "dl";
+        tag?: ("ul" | "ol" | "dl") | undefined;
         list?: "disc" | "none" | "decimal" | undefined;
-        position?: "inside" | "outside";
+        position?: ("inside" | "outside") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: string;
-        bgColor?: string;
-        markClass?: string;
+        color?: string | undefined;
+        bgColor?: string | undefined;
+        markClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,18 +3,18 @@ import type { PsizeType, PweightType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: string;
-        height?: "normal" | "relaxed" | "loose";
-        align?: "left" | "center" | "right";
-        justify?: boolean;
-        italic?: boolean;
-        firstupper?: boolean;
-        upperClass?: string;
+        color?: string | undefined;
+        height?: ("normal" | "relaxed" | "loose") | undefined;
+        align?: ("left" | "center" | "right") | undefined;
+        justify?: boolean | undefined;
+        italic?: boolean | undefined;
+        firstupper?: boolean | undefined;
+        upperClass?: string | undefined;
         opacity?: number | undefined;
-        whitespace?: "normal" | "nowrap" | "pre" | "preline" | "prewrap";
-        size?: PsizeType;
+        whitespace?: ("normal" | "nowrap" | "pre" | "preline" | "prewrap") | undefined;
+        size?: PsizeType | undefined;
         space?: "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | undefined;
-        weight?: PweightType;
+        weight?: PweightType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: string;
-        secondaryClass?: string;
+        color?: string | undefined;
+        secondaryClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,15 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        italic?: boolean;
-        underline?: boolean;
-        linethrough?: boolean;
-        uppercase?: boolean;
-        gradient?: boolean;
-        highlight?: boolean;
-        highlightClass?: string;
-        decorationClass?: string;
-        gradientClass?: string;
+        italic?: boolean | undefined;
+        underline?: boolean | undefined;
+        linethrough?: boolean | undefined;
+        uppercase?: boolean | undefined;
+        gradient?: boolean | undefined;
+        highlight?: boolean | undefined;
+        highlightClass?: string | undefined;
+        decorationClass?: string | undefined;
+        gradientClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        name?: string;
+        name?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/utils/Popper.svelte

@@ -14,6 +14,8 @@ export let open = false;
 export let yOnly = false;
 export let middlewares = [dom.flip(), dom.shift()];
 const dispatch = createEventDispatcher();
+let focusable;
+$: focusable = trigger === "focus";
 let clickable;
 $: clickable = trigger === "click";
 let hoverable;
@@ -25,29 +27,28 @@ let floatingEl;
 let arrowEl;
 let contentEl;
 let triggerEls = [];
-let _blocked = false;
-const block = () => (_blocked = true, setTimeout(() => _blocked = false, 250));
 const showHandler = (ev) => {
   if (referenceEl === void 0) console.error("trigger undefined");
   if (!reference && triggerEls.includes(ev.target) && referenceEl !== ev.target) {
     referenceEl = ev.target;
-    block();
+    if (open) return;
   }
-  if (clickable && ev.type === "focusin" && !open) block();
-  open = clickable && ev.type === "click" && !_blocked ? !open : true;
+  open = ev.type === "click" ? !open : true;
 };
 const hasHover = (el) => el.matches(":hover");
 const hasFocus = (el) => el.contains(document.activeElement);
-const px = (n) => n != null ? `${n}px` : "";
+const px = (n) => n ? `${n}px` : "";
 const hideHandler = (ev) => {
-  if (activeContent) {
+  if (activeContent && hoverable) {
+    const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
     setTimeout(() => {
-      const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
-      if (ev.type === "mouseleave" && elements.some(hasHover)) return;
-      if (ev.type === "focusout" && elements.some(hasFocus)) return;
-      open = false;
+      if (ev.type === "mouseleave" && !elements.some(hasHover)) {
+        open = false;
+      }
     }, 100);
-  } else open = false;
+  } else {
+    open = false;
+  }
 };
 let arrowSide;
 const oppositeSideMap = {
@@ -85,8 +86,8 @@ function init(node, _referenceEl) {
 }
 onMount(() => {
   const events = [
-    ["focusin", showHandler, true],
-    ["focusout", hideHandler, true],
+    ["focusin", showHandler, focusable],
+    ["focusout", hideHandler, focusable],
     ["click", showHandler, clickable],
     ["mouseenter", showHandler, hoverable],
     ["mouseleave", hideHandler, hoverable]
@@ -105,13 +106,13 @@ onMount(() => {
     if (referenceEl === document.body) {
       console.error(`Popup reference not found: '${reference}'`);
     } else {
-      referenceEl.addEventListener("focusout", hideHandler);
+      if (focusable) referenceEl.addEventListener("focusout", hideHandler);
       if (hoverable) referenceEl.addEventListener("mouseleave", hideHandler);
     }
   } else {
     referenceEl = triggerEls[0];
   }
-  document.addEventListener("click", closeOnClickOutside);
+  if (clickable) document.addEventListener("click", closeOnClickOutside);
   return () => {
     triggerEls.forEach((element) => {
       if (element) {
@@ -152,7 +153,7 @@ function initArrow(node) {
 {/if}
 
 {#if referenceEl}
-  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent, showHandler)} on:focusout={optional(activeContent, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
+  <Frame use={init} options={referenceEl} bind:open role="tooltip" tabindex={activeContent ? -1 : undefined} on:focusin={optional(activeContent && focusable, showHandler)} on:focusout={optional(activeContent && focusable, hideHandler)} on:mouseenter={optional(activeContent && hoverable, showHandler)} on:mouseleave={optional(activeContent && hoverable, hideHandler)} {...$$restProps}>
     <slot></slot>
     {#if arrow}<div use:initArrow class={arrowClass}></div>{/if}
   </Frame>

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

@@ -3,9 +3,9 @@ import type { Action } from 'svelte/action';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: string;
+        tag?: string | undefined;
         show: boolean;
-        use?: Action<HTMLElement, any>;
+        use?: Action<HTMLElement, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/video/Video.svelte.d.ts

@@ -3,10 +3,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         src: string;
-        type?: string;
-        trackSrc?: string;
-        srclang?: string;
-        label?: string;
+        type?: string | undefined;
+        trackSrc?: string | undefined;
+        srclang?: string | undefined;
+        label?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;