flowbite-svelte 1.10.2 → 1.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/dist/forms/input-field/Input.svelte +3 -3
  2. package/dist/modal/Modal.svelte +9 -4
  3. package/dist/sidebar/Sidebar.svelte +61 -17
  4. package/dist/sidebar/Sidebar.svelte.d.ts +1 -0
  5. package/dist/sidebar/SidebarBrand.svelte +1 -1
  6. package/dist/sidebar/SidebarBrand.svelte.d.ts +1 -1
  7. package/dist/sidebar/SidebarButton.svelte +1 -1
  8. package/dist/sidebar/SidebarButton.svelte.d.ts +1 -1
  9. package/dist/sidebar/SidebarCta.svelte +1 -1
  10. package/dist/sidebar/SidebarCta.svelte.d.ts +1 -1
  11. package/dist/sidebar/SidebarDropdownWrapper.svelte +1 -1
  12. package/dist/sidebar/SidebarDropdownWrapper.svelte.d.ts +1 -1
  13. package/dist/sidebar/SidebarGroup.svelte +1 -1
  14. package/dist/sidebar/SidebarGroup.svelte.d.ts +1 -1
  15. package/dist/sidebar/SidebarItem.svelte +1 -1
  16. package/dist/sidebar/SidebarItem.svelte.d.ts +1 -1
  17. package/dist/sidebar/theme.d.ts +18 -6
  18. package/dist/sidebar/theme.js +45 -6
  19. package/dist/skeleton/CardPlaceholder.svelte +1 -1
  20. package/dist/skeleton/CardPlaceholder.svelte.d.ts +1 -1
  21. package/dist/skeleton/ImagePlaceholder.svelte +1 -1
  22. package/dist/skeleton/ImagePlaceholder.svelte.d.ts +1 -1
  23. package/dist/skeleton/ListPlaceholder.svelte +1 -1
  24. package/dist/skeleton/ListPlaceholder.svelte.d.ts +1 -1
  25. package/dist/skeleton/Skeleton.svelte +1 -1
  26. package/dist/skeleton/Skeleton.svelte.d.ts +1 -1
  27. package/dist/skeleton/TestimonialPlaceholder.svelte +1 -1
  28. package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts +1 -1
  29. package/dist/skeleton/TextPlaceholder.svelte +1 -1
  30. package/dist/skeleton/TextPlaceholder.svelte.d.ts +1 -1
  31. package/dist/skeleton/VideoPlaceholder.svelte +1 -1
  32. package/dist/skeleton/VideoPlaceholder.svelte.d.ts +1 -1
  33. package/dist/skeleton/WidgetPlaceholder.svelte +1 -1
  34. package/dist/skeleton/WidgetPlaceholder.svelte.d.ts +1 -1
  35. package/dist/speed-dial/SpeedDial.svelte +1 -1
  36. package/dist/speed-dial/SpeedDial.svelte.d.ts +1 -1
  37. package/dist/speed-dial/SpeedDialButton.svelte +1 -1
  38. package/dist/speed-dial/SpeedDialButton.svelte.d.ts +1 -1
  39. package/dist/speed-dial/SpeedDialTrigger.svelte +1 -1
  40. package/dist/speed-dial/SpeedDialTrigger.svelte.d.ts +1 -1
  41. package/dist/spinner/Spinner.svelte +1 -1
  42. package/dist/spinner/Spinner.svelte.d.ts +1 -1
  43. package/dist/stepindicator/StepIndicator.svelte +1 -1
  44. package/dist/stepindicator/StepIndicator.svelte.d.ts +1 -1
  45. package/dist/stepper/BreadcrumbStepper.svelte +1 -1
  46. package/dist/stepper/BreadcrumbStepper.svelte.d.ts +1 -1
  47. package/dist/stepper/DetailedStepper.svelte +1 -1
  48. package/dist/stepper/DetailedStepper.svelte.d.ts +1 -1
  49. package/dist/stepper/ProgressStepper.svelte +1 -1
  50. package/dist/stepper/ProgressStepper.svelte.d.ts +1 -1
  51. package/dist/stepper/Stepper.svelte +1 -1
  52. package/dist/stepper/Stepper.svelte.d.ts +1 -1
  53. package/dist/stepper/TimelineStepper.svelte +1 -1
  54. package/dist/stepper/TimelineStepper.svelte.d.ts +1 -1
  55. package/dist/stepper/VerticalStepper.svelte +1 -1
  56. package/dist/stepper/VerticalStepper.svelte.d.ts +1 -1
  57. package/dist/table/Table.svelte +1 -1
  58. package/dist/table/Table.svelte.d.ts +1 -1
  59. package/dist/table/TableBody.svelte +1 -1
  60. package/dist/table/TableBody.svelte.d.ts +1 -1
  61. package/dist/table/TableBodyCell.svelte +1 -1
  62. package/dist/table/TableBodyCell.svelte.d.ts +1 -1
  63. package/dist/table/TableBodyRow.svelte +1 -1
  64. package/dist/table/TableBodyRow.svelte.d.ts +1 -1
  65. package/dist/table/TableHead.svelte +1 -1
  66. package/dist/table/TableHead.svelte.d.ts +1 -1
  67. package/dist/table/TableHeadCell.svelte +1 -1
  68. package/dist/table/TableHeadCell.svelte.d.ts +1 -1
  69. package/dist/table/TableSearch.svelte +1 -1
  70. package/dist/table/TableSearch.svelte.d.ts +1 -1
  71. package/dist/tabs/TabItem.svelte +1 -1
  72. package/dist/tabs/TabItem.svelte.d.ts +1 -1
  73. package/dist/tabs/Tabs.svelte +1 -1
  74. package/dist/tabs/Tabs.svelte.d.ts +1 -1
  75. package/dist/timeline/Activity.svelte +1 -1
  76. package/dist/timeline/Activity.svelte.d.ts +1 -1
  77. package/dist/timeline/ActivityItem.svelte +1 -1
  78. package/dist/timeline/ActivityItem.svelte.d.ts +1 -1
  79. package/dist/timeline/Group.svelte +1 -1
  80. package/dist/timeline/Group.svelte.d.ts +1 -1
  81. package/dist/timeline/GroupItem.svelte +1 -1
  82. package/dist/timeline/GroupItem.svelte.d.ts +1 -1
  83. package/dist/timeline/Timeline.svelte +1 -1
  84. package/dist/timeline/Timeline.svelte.d.ts +1 -1
  85. package/dist/timeline/TimelineItem.svelte +1 -1
  86. package/dist/timeline/TimelineItem.svelte.d.ts +1 -1
  87. package/dist/toast/Toast.svelte +1 -1
  88. package/dist/toast/Toast.svelte.d.ts +1 -1
  89. package/dist/tooltip/Tooltip.svelte +1 -1
  90. package/dist/tooltip/Tooltip.svelte.d.ts +1 -1
  91. package/dist/types.d.ts +1 -0
  92. package/dist/typography/anchor/A.svelte +1 -1
  93. package/dist/typography/anchor/A.svelte.d.ts +1 -1
  94. package/dist/typography/blockquote/Blockquote.svelte +1 -1
  95. package/dist/typography/blockquote/Blockquote.svelte.d.ts +1 -1
  96. package/dist/typography/descriptionlist/DescriptionList.svelte +1 -1
  97. package/dist/typography/descriptionlist/DescriptionList.svelte.d.ts +1 -1
  98. package/dist/typography/heading/Heading.svelte +1 -1
  99. package/dist/typography/heading/Heading.svelte.d.ts +1 -1
  100. package/dist/typography/hr/Hr.svelte +1 -1
  101. package/dist/typography/hr/Hr.svelte.d.ts +1 -1
  102. package/dist/typography/img/EnhancedImg.svelte +1 -1
  103. package/dist/typography/img/EnhancedImg.svelte.d.ts +1 -1
  104. package/dist/typography/img/Img.svelte +1 -1
  105. package/dist/typography/img/Img.svelte.d.ts +1 -1
  106. package/dist/typography/layout/Layout.svelte +1 -1
  107. package/dist/typography/layout/Layout.svelte.d.ts +1 -1
  108. package/dist/typography/list/Li.svelte +1 -1
  109. package/dist/typography/list/Li.svelte.d.ts +1 -1
  110. package/dist/typography/list/List.svelte +1 -1
  111. package/dist/typography/list/List.svelte.d.ts +1 -1
  112. package/dist/typography/mark/Mark.svelte +1 -1
  113. package/dist/typography/mark/Mark.svelte.d.ts +1 -1
  114. package/dist/typography/paragraph/P.svelte +1 -1
  115. package/dist/typography/paragraph/P.svelte.d.ts +1 -1
  116. package/dist/typography/secondary/Secondary.svelte +1 -1
  117. package/dist/typography/secondary/Secondary.svelte.d.ts +1 -1
  118. package/dist/typography/span/Span.svelte +1 -1
  119. package/dist/typography/span/Span.svelte.d.ts +1 -1
  120. package/dist/utils/Arrow.svelte +1 -1
  121. package/dist/utils/Arrow.svelte.d.ts +1 -1
  122. package/dist/utils/Popper.svelte +1 -1
  123. package/dist/utils/Popper.svelte.d.ts +1 -1
  124. package/dist/video/Video.svelte +1 -1
  125. package/dist/video/Video.svelte.d.ts +1 -1
  126. package/package.json +1 -1
@@ -92,10 +92,10 @@
92
92
  }
93
93
  });
94
94
 
95
- // Default event handlers
96
95
  function defaultHandleInput(event: Event) {
97
- // Reset backspace flag if user starts typing again
98
- if ((value as string).length > 0) {
96
+ // Ensure value is treated as a string to safely check its length
97
+ const currentValueAsString = String(value || "");
98
+ if (currentValueAsString.length > 0) {
99
99
  backspaceUsed = false;
100
100
  }
101
101
  updateSuggestions();
@@ -20,6 +20,10 @@
20
20
  const cancel = (dlg: HTMLDialogElement) => (typeof dlg.requestClose === "function" ? dlg.requestClose() : close());
21
21
 
22
22
  function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
23
+ if (ev.target !== ev.currentTarget) {
24
+ return; // ignore if not on dialog
25
+ }
26
+
23
27
  // this event gets called when user canceled the dialog:
24
28
  // pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
25
29
  oncancel?.(ev);
@@ -32,10 +36,11 @@
32
36
  function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
33
37
  const dlg: HTMLDialogElement = ev.currentTarget;
34
38
  if (outsideclose && ev.target === dlg) {
35
- cancel(dlg);
39
+ return cancel(dlg);
36
40
  }
41
+
37
42
  if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
38
- close(dlg);
43
+ return close(dlg);
39
44
  }
40
45
  }
41
46
 
@@ -83,7 +88,7 @@
83
88
  {#if title}
84
89
  <h3>{title}</h3>
85
90
  {#if dismissable && !permanent}
86
- <CloseButton type="submit" onclick={close_handler(form)} class={clsx(closeBtnClass)} />
91
+ <CloseButton type="submit" formnovalidate onclick={close_handler(form)} class={clsx(closeBtnClass)} />
87
92
  {/if}
88
93
  {:else if header}
89
94
  {@render header()}
@@ -99,7 +104,7 @@
99
104
  </div>
100
105
  {/if}
101
106
  {#if dismissable && !permanent && !title}
102
- <CloseButton type="submit" onclick={close_handler(form)} class={cn(closebutton({ class: clsx(closeBtnClass) }), (theme as ModalTheme)?.closebutton)} />
107
+ <CloseButton type="submit" formnovalidate onclick={close_handler(form)} class={cn(closebutton({ class: clsx(closeBtnClass) }), (theme as ModalTheme)?.closebutton)} />
103
108
  {/if}
104
109
  {/snippet}
105
110
 
@@ -9,7 +9,28 @@
9
9
  import { getTheme } from "../theme/themeUtils";
10
10
  import clsx from "clsx";
11
11
 
12
- let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", alwaysOpen = false, position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: SidebarProps = $props();
12
+ let {
13
+ children,
14
+ isOpen = false, // Controls the *overlay* state on small screens
15
+ closeSidebar,
16
+ isSingle = true,
17
+ breakpoint = "md", // e.g., 'md'
18
+ alwaysOpen = false, // When true, sidebar is always visible, no hamburger menu
19
+ position = "fixed",
20
+ activateClickOutside = true,
21
+ backdrop = true,
22
+ backdropClass,
23
+ transition = fly,
24
+ params,
25
+ divClass,
26
+ ariaLabel,
27
+ nonActiveClass,
28
+ activeClass,
29
+ activeUrl = "",
30
+ class: className,
31
+ disableBreakpoints = false, // Key prop for Drawer integration
32
+ ...restProps
33
+ }: SidebarProps = $props();
13
34
 
14
35
  const theme = getTheme("sidebar");
15
36
 
@@ -22,8 +43,15 @@
22
43
  };
23
44
 
24
45
  let innerWidth: number = $state(-1);
25
- // Modified to consider alwaysOpen prop
26
- let isLargeScreen = $derived(alwaysOpen || innerWidth >= breakpointValues[breakpoint]);
46
+ // This derived state is now primarily for trapFocus and transition,
47
+ // NOT for rendering the main sidebar element in standalone mode.
48
+ // It determines if the screen size *would* make it "large" if alwaysOpen were applied.
49
+ let isLargeScreen = $derived(innerWidth >= breakpointValues[breakpoint]);
50
+
51
+ // Determine if the sidebar should be "open" based on explicit isOpen or large screen AND alwaysOpen
52
+ // This state is what should drive the 'hidden' / 'block' classes for the sidebar itself,
53
+ // which will be passed to tailwind-variants.
54
+ let shouldBeOpen = $derived(isOpen || (alwaysOpen && isLargeScreen));
27
55
 
28
56
  const activeUrlStore = writable("");
29
57
  setContext("activeUrl", activeUrlStore);
@@ -31,7 +59,23 @@
31
59
  activeUrlStore.set(activeUrl);
32
60
  });
33
61
 
34
- const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop, alwaysOpen }));
62
+ // Pass shouldBeOpen to sidebar utility for `isOpen` variant and other relevant styling.
63
+ // Pass alwaysOpen directly to sidebar utility for the `alwaysOpen` variant.
64
+ const {
65
+ base,
66
+ active,
67
+ nonactive,
68
+ div,
69
+ backdrop: backdropCls
70
+ } = $derived(
71
+ sidebar({
72
+ isOpen: shouldBeOpen, // Now dynamically drives the tv `isOpen` variant
73
+ breakpoint: alwaysOpen ? undefined : breakpoint, // Apply breakpoint variant ONLY if not alwaysOpen
74
+ position,
75
+ backdrop: backdrop && !disableBreakpoints, // Backdrop for standalone sidebar
76
+ alwaysOpen // Pass alwaysOpen directly
77
+ })
78
+ );
35
79
 
36
80
  let sidebarCtx: SidebarCtxType = {
37
81
  get closeSidebar() {
@@ -46,11 +90,11 @@
46
90
  isSingle
47
91
  };
48
92
 
93
+ // Transition parameters for the fly effect when opening/closing
49
94
  let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
50
95
 
51
96
  setContext("sidebarContext", sidebarCtx);
52
97
 
53
- // Handler for Escape key
54
98
  const handleEscape = () => {
55
99
  closeSidebar?.();
56
100
  };
@@ -58,19 +102,18 @@
58
102
 
59
103
  <svelte:window bind:innerWidth />
60
104
 
61
- {#if isOpen || isLargeScreen}
62
- {#if isOpen && !alwaysOpen}
63
- {#if backdrop && activateClickOutside}
64
- <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)} onclick={closeSidebar}></div>
65
- {:else if backdrop && !activateClickOutside}
66
- <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)}></div>
67
- {:else if !backdrop && activateClickOutside}
68
- <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeSidebar}></div>
69
- {:else if !backdrop && !activateClickOutside}
70
- <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
71
- {/if}
105
+ {#if !disableBreakpoints}
106
+ <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={isOpen && !alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
107
+ <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
108
+ {@render children()}
109
+ </div>
110
+ </aside>
111
+
112
+ {#if isOpen && !alwaysOpen && backdrop}
113
+ <div role="presentation" class={cn(backdropCls(), clsx(backdropClass), (theme as SidebarTheme)?.backdrop)} onclick={activateClickOutside ? closeSidebar : undefined}></div>
72
114
  {/if}
73
- <aside use:trapFocus={!isLargeScreen && isOpen && !alwaysOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={!alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
115
+ {:else}
116
+ <aside use:trapFocus={isOpen ? { onEscape: closeSidebar ? handleEscape : undefined } : null} transition:transition={isOpen && !alwaysOpen ? transitionParams : undefined} {...restProps} class={cn(base(), clsx(clsx(className)), (theme as SidebarTheme)?.base)} aria-label={ariaLabel}>
74
117
  <div class={cn(div(), clsx(divClass), (theme as SidebarTheme)?.base)}>
75
118
  {@render children()}
76
119
  </div>
@@ -101,5 +144,6 @@
101
144
  @prop activeClass
102
145
  @prop activeUrl = ""
103
146
  @prop class: className
147
+ @prop disableBreakpoints = false
104
148
  @prop ...restProps
105
149
  -->
@@ -22,6 +22,7 @@ import { type SidebarProps } from "..";
22
22
  * @prop activeClass
23
23
  * @prop activeUrl = ""
24
24
  * @prop class: className
25
+ * @prop disableBreakpoints = false
25
26
  * @prop ...restProps
26
27
  */
27
28
  declare const Sidebar: import("svelte").Component<SidebarProps, {}, "">;
@@ -25,7 +25,7 @@
25
25
  @component
26
26
  [Go to docs](https://flowbite-svelte.com/)
27
27
  ## Type
28
- [SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1383)
28
+ [SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1384)
29
29
  ## Props
30
30
  @prop children
31
31
  @prop site
@@ -2,7 +2,7 @@ import type { SidebarBrandProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1383)
5
+ * [SidebarBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1384)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop site
@@ -23,7 +23,7 @@
23
23
  @component
24
24
  [Go to docs](https://flowbite-svelte.com/)
25
25
  ## Type
26
- [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1366)
26
+ [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1367)
27
27
  ## Props
28
28
  @prop breakpoint = "md"
29
29
  @prop class: className
@@ -2,7 +2,7 @@ import type { SidebarButtonProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1366)
5
+ * [SidebarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1367)
6
6
  * ## Props
7
7
  * @prop breakpoint = "md"
8
8
  * @prop class: className
@@ -26,7 +26,7 @@
26
26
  @component
27
27
  [Go to docs](https://flowbite-svelte.com/)
28
28
  ## Type
29
- [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
29
+ [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1371)
30
30
  ## Props
31
31
  @prop children
32
32
  @prop icon
@@ -2,7 +2,7 @@ import type { SidebarCtaProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1370)
5
+ * [SidebarCtaProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1371)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop icon
@@ -85,7 +85,7 @@
85
85
  @component
86
86
  [Go to docs](https://flowbite-svelte.com/)
87
87
  ## Type
88
- [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1389)
88
+ [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1390)
89
89
  ## Props
90
90
  @prop children
91
91
  @prop arrowup
@@ -2,7 +2,7 @@ import type { SidebarDropdownWrapperProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1389)
5
+ * [SidebarDropdownWrapperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1390)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop arrowup
@@ -13,7 +13,7 @@
13
13
  @component
14
14
  [Go to docs](https://flowbite-svelte.com/)
15
15
  ## Type
16
- [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1406)
16
+ [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1407)
17
17
  ## Props
18
18
  @prop children
19
19
  @prop class: className = "space-y-2"
@@ -2,7 +2,7 @@ import type { SidebarGroupProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1406)
5
+ * [SidebarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1407)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop class: className = "space-y-2"
@@ -38,7 +38,7 @@
38
38
  @component
39
39
  [Go to docs](https://flowbite-svelte.com/)
40
40
  ## Type
41
- [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1412)
41
+ [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1413)
42
42
  ## Props
43
43
  @prop icon
44
44
  @prop subtext
@@ -2,7 +2,7 @@ import { type SidebarItemProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1412)
5
+ * [SidebarItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1413)
6
6
  * ## Props
7
7
  * @prop icon
8
8
  * @prop subtext
@@ -13,8 +13,12 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
13
13
  };
14
14
  };
15
15
  isOpen: {
16
- true: string;
17
- false: string;
16
+ true: {
17
+ base: string;
18
+ };
19
+ false: {
20
+ base: string;
21
+ };
18
22
  };
19
23
  breakpoint: {
20
24
  sm: {
@@ -62,8 +66,12 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
62
66
  };
63
67
  };
64
68
  isOpen: {
65
- true: string;
66
- false: string;
69
+ true: {
70
+ base: string;
71
+ };
72
+ false: {
73
+ base: string;
74
+ };
67
75
  };
68
76
  breakpoint: {
69
77
  sm: {
@@ -111,8 +119,12 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
111
119
  };
112
120
  };
113
121
  isOpen: {
114
- true: string;
115
- false: string;
122
+ true: {
123
+ base: string;
124
+ };
125
+ false: {
126
+ base: string;
127
+ };
116
128
  };
117
129
  breakpoint: {
118
130
  sm: {
@@ -1,3 +1,4 @@
1
+ // theme.ts
1
2
  import { tv } from "tailwind-variants";
2
3
  export const sidebar = tv({
3
4
  slots: {
@@ -13,9 +14,10 @@ export const sidebar = tv({
13
14
  absolute: { base: "absolute" },
14
15
  static: { base: "static" }
15
16
  },
17
+ // Reintroducing isOpen, but this will only apply when isLargeScreen AND alwaysOpen is false
16
18
  isOpen: {
17
- true: "block",
18
- false: "hidden"
19
+ true: { base: "block" }, // When explicitly open (hamburger menu clicked)
20
+ false: { base: "hidden" } // When explicitly closed
19
21
  },
20
22
  breakpoint: {
21
23
  sm: { base: "sm:block" },
@@ -25,21 +27,58 @@ export const sidebar = tv({
25
27
  "2xl": { base: "2xl:block" }
26
28
  },
27
29
  alwaysOpen: {
28
- true: { base: "block" } // Always display the sidebar when alwaysOpen is true
30
+ true: { base: "block" } // This variant will ensure it's always block regardless of breakpoints
29
31
  },
30
32
  backdrop: {
31
33
  true: { backdrop: "bg-gray-900 opacity-75" }
32
34
  }
33
35
  },
34
36
  compoundVariants: [
35
- // When alwaysOpen is true, override the breakpoint display classes
37
+ // Rule for responsive display when NOT alwaysOpen
38
+ {
39
+ alwaysOpen: false, // Only apply these if the sidebar is NOT always open
40
+ breakpoint: "sm",
41
+ class: { base: "sm:block" }
42
+ },
43
+ {
44
+ alwaysOpen: false,
45
+ breakpoint: "md",
46
+ class: { base: "md:block" }
47
+ },
48
+ {
49
+ alwaysOpen: false,
50
+ breakpoint: "lg",
51
+ class: { base: "lg:block" }
52
+ },
53
+ {
54
+ alwaysOpen: false,
55
+ breakpoint: "xl",
56
+ class: { base: "xl:block" }
57
+ },
58
+ {
59
+ alwaysOpen: false,
60
+ breakpoint: "2xl",
61
+ class: { base: "2xl:block" }
62
+ },
63
+ // Override: When alwaysOpen is true, it should always be visible, ignoring `isOpen` and `breakpoint`
36
64
  {
37
65
  alwaysOpen: true,
38
66
  class: {
39
- base: "!block"
67
+ base: "!block" // Force block display
68
+ }
69
+ },
70
+ // Another compound variant to hide it below the breakpoint if not alwaysOpen and not explicitly open
71
+ {
72
+ alwaysOpen: false,
73
+ isOpen: false, // If it's not always open AND not explicitly open (via hamburger)
74
+ class: {
75
+ base: "hidden" // Hide it by default. Breakpoint rules will override this for larger screens.
40
76
  }
41
77
  }
42
- ]
78
+ ],
79
+ defaultVariants: {
80
+ isOpen: false // Default to closed on small screens if not specified
81
+ }
43
82
  });
44
83
  export const sidebarButton = tv({
45
84
  base: "inline-flex items-center p-0 mt-0 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
@@ -36,7 +36,7 @@
36
36
  @component
37
37
  [Go to docs](https://flowbite-svelte.com/)
38
38
  ## Type
39
- [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1424)
39
+ [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1425)
40
40
  ## Props
41
41
  @prop size = "sm"
42
42
  @prop class: className
@@ -2,7 +2,7 @@ import type { CardPlaceholderProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1424)
5
+ * [CardPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1425)
6
6
  * ## Props
7
7
  * @prop size = "sm"
8
8
  * @prop class: className
@@ -41,7 +41,7 @@
41
41
  @component
42
42
  [Go to docs](https://flowbite-svelte.com/)
43
43
  ## Type
44
- [ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1428)
44
+ [ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1429)
45
45
  ## Props
46
46
  @prop size = "md"
47
47
  @prop rounded
@@ -2,7 +2,7 @@ import type { ImagePlaceholderProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1428)
5
+ * [ImagePlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1429)
6
6
  * ## Props
7
7
  * @prop size = "md"
8
8
  * @prop rounded
@@ -32,7 +32,7 @@
32
32
  @component
33
33
  [Go to docs](https://flowbite-svelte.com/)
34
34
  ## Type
35
- [ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1434)
35
+ [ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1435)
36
36
  ## Props
37
37
  @prop itemNumber = 5
38
38
  @prop size = "md"
@@ -2,7 +2,7 @@ import type { ListPlaceholderProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1434)
5
+ * [ListPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1435)
6
6
  * ## Props
7
7
  * @prop itemNumber = 5
8
8
  * @prop size = "md"
@@ -27,7 +27,7 @@
27
27
  @component
28
28
  [Go to docs](https://flowbite-svelte.com/)
29
29
  ## Type
30
- [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1440)
30
+ [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1441)
31
31
  ## Props
32
32
  @prop size = "sm"
33
33
  @prop class: className
@@ -2,7 +2,7 @@ import type { SkeletonProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1440)
5
+ * [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1441)
6
6
  * ## Props
7
7
  * @prop size = "sm"
8
8
  * @prop class: className
@@ -29,7 +29,7 @@
29
29
  @component
30
30
  [Go to docs](https://flowbite-svelte.com/)
31
31
  ## Type
32
- [TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1444)
32
+ [TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1445)
33
33
  ## Props
34
34
  @prop class: className
35
35
  @prop ...restProps
@@ -2,7 +2,7 @@ import { type TestimonialPlaceholderProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1444)
5
+ * [TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1445)
6
6
  * ## Props
7
7
  * @prop class: className
8
8
  * @prop ...restProps
@@ -54,7 +54,7 @@
54
54
  @component
55
55
  [Go to docs](https://flowbite-svelte.com/)
56
56
  ## Type
57
- [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1446)
57
+ [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1447)
58
58
  ## Props
59
59
  @prop size = "sm"
60
60
  @prop class: className
@@ -2,7 +2,7 @@ import type { TextPlaceholderProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1446)
5
+ * [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1447)
6
6
  * ## Props
7
7
  * @prop size = "sm"
8
8
  * @prop class: className
@@ -23,7 +23,7 @@
23
23
  @component
24
24
  [Go to docs](https://flowbite-svelte.com/)
25
25
  ## Type
26
- [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1450)
26
+ [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1451)
27
27
  ## Props
28
28
  @prop size = "sm"
29
29
  @prop class: className
@@ -2,7 +2,7 @@ import type { VideoPlaceholderProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1450)
5
+ * [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1451)
6
6
  * ## Props
7
7
  * @prop size = "sm"
8
8
  * @prop class: className
@@ -31,7 +31,7 @@
31
31
  @component
32
32
  [Go to docs](https://flowbite-svelte.com/)
33
33
  ## Type
34
- [WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1454)
34
+ [WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1455)
35
35
  ## Props
36
36
  @prop class: className
37
37
  -->
@@ -2,7 +2,7 @@ import { type WidgetPlaceholderProps } from "..";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1454)
5
+ * [WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1455)
6
6
  * ## Props
7
7
  * @prop class: className
8
8
  */
@@ -28,7 +28,7 @@
28
28
  @component
29
29
  [Go to docs](https://flowbite-svelte.com/)
30
30
  ## Type
31
- [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1486)
31
+ [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1487)
32
32
  ## Props
33
33
  @prop children
34
34
  @prop popperClass
@@ -2,7 +2,7 @@ import type { SpeedDialProps } from "../types";
2
2
  /**
3
3
  * [Go to docs](https://flowbite-svelte.com/)
4
4
  * ## Type
5
- * [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1486)
5
+ * [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1487)
6
6
  * ## Props
7
7
  * @prop children
8
8
  * @prop popperClass
@@ -29,7 +29,7 @@
29
29
  @component
30
30
  [Go to docs](https://flowbite-svelte.com/)
31
31
  ## Type
32
- [SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1500)
32
+ [SpeedDialButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1501)
33
33
  ## Props
34
34
  @prop children
35
35
  @prop name = ""