{#each colors as colorOption}
- {colorOption}
+ {colorOption}
{/each}
diff --git a/src/routes/builder/input-field/+page.svelte b/src/routes/builder/input-field/+page.svelte
index 620dcc9215..cf0bb732c4 100644
--- a/src/routes/builder/input-field/+page.svelte
+++ b/src/routes/builder/input-field/+page.svelte
@@ -1,6 +1,5 @@
+
+
+ {#each fgBrand as token}
+
{token}
+ {/each}
+
+
+
+ {#each shikiFgBrand as token}
+
{token}
+ {/each}
+
+
+
+
+ {#each textVariables as textVariable}
+
{textVariable} - The quick brown fox jumps over the lazy dog.
+ {/each}
+
+
+
+
+ {#each borderRadiusVariables as borderRadiusVariable}
+
{borderRadiusVariable} - The quick brown fox jumps over the lazy dog.
+ {/each}
+
+
+
+ {#each colors as color}
+
+
{color}
+
+ {#each borders as borderSize}
+
+ {color}
+
+ {/each}
+
+
+
+ {/each}
+
diff --git a/src/routes/docs-examples/components/accordion/AdvancedClasses.svelte b/src/routes/docs-examples/components/accordion/AdvancedClasses.svelte
new file mode 100644
index 0000000000..ea3084271d
--- /dev/null
+++ b/src/routes/docs-examples/components/accordion/AdvancedClasses.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+ {#snippet header()}Open to See Purple Styling{/snippet}
+ This item is open, showing the purple active state with custom button font and content styling.
+
+
+ {#snippet header()}Closed Item (Inactive State){/snippet}
+ When closed, items use the inactive gray styling.
+
+
diff --git a/src/routes/docs-examples/components/accordion/Color.svelte b/src/routes/docs-examples/components/accordion/Color.svelte
index c34341613b..644c87c4a5 100644
--- a/src/routes/docs-examples/components/accordion/Color.svelte
+++ b/src/routes/docs-examples/components/accordion/Color.svelte
@@ -2,16 +2,24 @@
import { AccordionItem, Accordion } from "flowbite-svelte";
+
- {#snippet header()}Header 2-1{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
+ {#snippet header()}Uses Accordion classes{/snippet}
+ This item uses the active/inactive classes defined in the parent Accordion.
-
- {#snippet header()}Header 2-2{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
+
+ {#snippet header()}Custom item classes{/snippet}
+ This item overrides the parent classes with its own green theme.
diff --git a/src/routes/docs-examples/components/accordion/Icon.svelte b/src/routes/docs-examples/components/accordion/Icon.svelte
index cf209ed8d2..d1f1159e69 100644
--- a/src/routes/docs-examples/components/accordion/Icon.svelte
+++ b/src/routes/docs-examples/components/accordion/Icon.svelte
@@ -11,7 +11,6 @@
My Header 1
{/snippet}
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo...
Check out this guide to learn how to get started
and start websites even faster with components on top of Tailwind CSS.
diff --git a/src/routes/docs-examples/components/accordion/MultipleMode2.svelte b/src/routes/docs-examples/components/accordion/MultipleMode2.svelte
index fd4a2effb0..ddbdb37d45 100644
--- a/src/routes/docs-examples/components/accordion/MultipleMode2.svelte
+++ b/src/routes/docs-examples/components/accordion/MultipleMode2.svelte
@@ -11,17 +11,11 @@
{#snippet header()}My Header 1{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
-
- Check out this guide to learn how to get started
- and start developing websites even faster with components on top of Tailwind CSS.
-
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab ...
{#snippet header()}My Header 2{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
- Learn more about these technologies:
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit ...
{#snippet header()}My Header 3{/snippet}
diff --git a/src/routes/docs-examples/components/accordion/Nesting.svelte b/src/routes/docs-examples/components/accordion/Nesting.svelte
index 1767d83de0..b7e62aa5c2 100644
--- a/src/routes/docs-examples/components/accordion/Nesting.svelte
+++ b/src/routes/docs-examples/components/accordion/Nesting.svelte
@@ -1,4 +1,5 @@
@@ -8,32 +9,16 @@
{#snippet header()}My Header 1{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
-
- Check out this guide to learn how to get started
- and start developing websites even faster with components on top of Tailwind CSS.
-
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit ...
{#snippet header()}My Header 2{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
- Learn more about these technologies:
-
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit ...
{#snippet header()}My Header 2{/snippet}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...
- Learn more about these technologies:
-
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit ...
diff --git a/src/routes/docs-examples/components/accordion/[slug]/+page.svelte b/src/routes/docs-examples/components/accordion/[slug]/+page.svelte
new file mode 100644
index 0000000000..a285fdbfb4
--- /dev/null
+++ b/src/routes/docs-examples/components/accordion/[slug]/+page.svelte
@@ -0,0 +1,8 @@
+
+
+
diff --git a/src/routes/docs-examples/components/accordion/[slug]/+page.ts b/src/routes/docs-examples/components/accordion/[slug]/+page.ts
new file mode 100644
index 0000000000..1dd11f4e2a
--- /dev/null
+++ b/src/routes/docs-examples/components/accordion/[slug]/+page.ts
@@ -0,0 +1,15 @@
+import type { PageLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+
+export const load: PageLoad = async ({ params }) => {
+ try {
+ const post = await import(`../${params.slug}.svelte`);
+ const content = post.default;
+
+ return {
+ content
+ };
+ } catch (err) {
+ throw error(404, `Accordion example "${params.slug}" not found`);
+ }
+};
diff --git a/src/routes/docs-examples/components/accordion/index.ts b/src/routes/docs-examples/components/accordion/index.ts
index 0e2ab9e822..8c9986795f 100644
--- a/src/routes/docs-examples/components/accordion/index.ts
+++ b/src/routes/docs-examples/components/accordion/index.ts
@@ -1,5 +1,6 @@
export { default as Default } from "./Default.svelte";
export { default as Color } from "./Color.svelte";
+export { default as AdvancedClasses } from "./AdvancedClasses.svelte";
export { default as Flush } from "./Flush.svelte";
export { default as ArrowStyle } from "./ArrowStyle.svelte";
export { default as Icon } from "./Icon.svelte";
@@ -10,6 +11,7 @@ export { default as TransitionNone } from "./TransitionNone.svelte";
export { default as Nesting } from "./Nesting.svelte";
export { default as Open } from "./Open.svelte";
export { default as OpenMultiple } from "./OpenMultiple.svelte";
+export { default as Snapshot } from "./Snapshot.svelte";
export { default as BpBasic } from "./BpBasic.svelte";
export { default as BpObject } from "./BpObject.svelte";
export { default as BpAdvanced } from "./BpAdvanced.svelte";
diff --git a/src/routes/docs-examples/components/alert/AdditionalContent.svelte b/src/routes/docs-examples/components/alert/AdditionalContent.svelte
index 48b6a3e87e..5c59e14b68 100644
--- a/src/routes/docs-examples/components/alert/AdditionalContent.svelte
+++ b/src/routes/docs-examples/components/alert/AdditionalContent.svelte
@@ -3,29 +3,23 @@
import { InfoCircleSolid, EyeSolid } from "flowbite-svelte-icons";
-
-
-
- This is a info alert
-
-
- More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
-
-
-
-
+
+
+
+
+ This is an info alert
+
+ More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+
-
+
- This is a info alert
+ This is a success alert
- More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
+ More info about this success alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
-
-
-
-
+
diff --git a/src/routes/docs-examples/components/alert/AlertWithList.svelte b/src/routes/docs-examples/components/alert/AlertWithList.svelte
index 778b429355..c580e695d6 100644
--- a/src/routes/docs-examples/components/alert/AlertWithList.svelte
+++ b/src/routes/docs-examples/components/alert/AlertWithList.svelte
@@ -3,7 +3,7 @@
import { InfoCircleSolid } from "flowbite-svelte-icons";
-
+
{#snippet icon()}
Info
@@ -16,7 +16,7 @@
Inclusion of at least one special character, e.g., ! @ # ?
-
+
{#snippet icon()}
Info
diff --git a/src/routes/docs-examples/components/alert/BorderAccent.svelte b/src/routes/docs-examples/components/alert/BorderAccent.svelte
index e0be7a64eb..201c2e36cb 100644
--- a/src/routes/docs-examples/components/alert/BorderAccent.svelte
+++ b/src/routes/docs-examples/components/alert/BorderAccent.svelte
@@ -3,27 +3,27 @@
import { InfoCircleSolid } from "flowbite-svelte-icons";
-
+
{#snippet icon()}{/snippet}
Info alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Danger alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Success alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Warning alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Dark alert!
Change a few things up and try submitting again.
diff --git a/src/routes/docs-examples/components/alert/Bordered.svelte b/src/routes/docs-examples/components/alert/Bordered.svelte
index c638b814f5..aba58970f6 100644
--- a/src/routes/docs-examples/components/alert/Bordered.svelte
+++ b/src/routes/docs-examples/components/alert/Bordered.svelte
@@ -3,32 +3,27 @@
import { InfoCircleSolid } from "flowbite-svelte-icons";
-
- {#snippet icon()}{/snippet}
- Default alert!
- Change a few things up and try submitting again.
-
-
+
{#snippet icon()}{/snippet}
Info alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Danger alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Success alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Warning alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Dark alert!
Change a few things up and try submitting again.
diff --git a/src/routes/docs-examples/components/alert/CustomColor.svelte b/src/routes/docs-examples/components/alert/CustomColor.svelte
index d30bdfd12f..a0096c6642 100644
--- a/src/routes/docs-examples/components/alert/CustomColor.svelte
+++ b/src/routes/docs-examples/components/alert/CustomColor.svelte
@@ -1,5 +1,35 @@
-Your content
+
+Simple custom colored alert
+
+
+
+ {#snippet icon()}{/snippet}
+ Custom purple alert!
+ With icon and custom styling.
+
+
+
+
+ {#snippet icon()}{/snippet}
+ Custom teal alert!
+ With border styling.
+
+
+
+
+ {#snippet icon()}{/snippet}
+ Custom dismissable!
+ Use color="none" and closeColor="none" for full control.
+
+
+
+
+ {#snippet icon()}{/snippet}
+ Custom alert with danger close button!
+ Mix custom colors with predefined closeColor.
+
diff --git a/src/routes/docs-examples/components/alert/Default.svelte b/src/routes/docs-examples/components/alert/Default.svelte
index 95385bce3c..a99fcedf4b 100644
--- a/src/routes/docs-examples/components/alert/Default.svelte
+++ b/src/routes/docs-examples/components/alert/Default.svelte
@@ -2,27 +2,23 @@
import { Alert } from "flowbite-svelte";
-
- Default alert!
- Change a few things up and try submitting again.
-
-
+
Info alert!
Change a few things up and try submitting again.
-
+
Danger alert!
Change a few things up and try submitting again.
-
+
Success alert!
Change a few things up and try submitting again.
-
+
Warning alert!
Change a few things up and try submitting again.
-
+
Dark alert!
Change a few things up and try submitting again.
diff --git a/src/routes/docs-examples/components/alert/Dismissable.svelte b/src/routes/docs-examples/components/alert/Dismissable.svelte
index a3eb7fd5f2..b6195f3154 100644
--- a/src/routes/docs-examples/components/alert/Dismissable.svelte
+++ b/src/routes/docs-examples/components/alert/Dismissable.svelte
@@ -4,35 +4,29 @@
import { fly } from "svelte/transition";
-
- {#snippet icon()}{/snippet}
- A simple default alert with an
- example link
- . Give it a click if you like.
-
-
+
{#snippet icon()}{/snippet}
A simple info alert with an
example link
. Give it a click if you like.
-
+
{#snippet icon()}{/snippet}
- A simple info alert with an
+ A simple danger alert with an
example link
. Give it a click if you like.
-
+
{#snippet icon()}{/snippet}
- A simple info alert with an
+ A simple success alert with an
example link
. Give it a click if you like.
-
+
{#snippet icon()}{/snippet}
An alert with non default animation - fly away.
-
+
{#snippet icon()}{/snippet}
- An alert with the custom dismissal button. slot
+ An alert with the custom dismissal button.
diff --git a/src/routes/docs-examples/components/alert/Event.svelte b/src/routes/docs-examples/components/alert/Event.svelte
index fdb88e2953..d430d98d97 100644
--- a/src/routes/docs-examples/components/alert/Event.svelte
+++ b/src/routes/docs-examples/components/alert/Event.svelte
@@ -1,10 +1,23 @@
-Close me
+{#if alertStatus}
+
+ Info alert!
+ You can close this alert by clicking the close button.
+
+{:else}
+
+
+
+{/if}
diff --git a/src/routes/docs-examples/components/alert/Icon.svelte b/src/routes/docs-examples/components/alert/Icon.svelte
index 043708ade6..38192c4ac1 100644
--- a/src/routes/docs-examples/components/alert/Icon.svelte
+++ b/src/routes/docs-examples/components/alert/Icon.svelte
@@ -3,32 +3,27 @@
import { InfoCircleSolid } from "flowbite-svelte-icons";
-
- {#snippet icon()}{/snippet}
- Default alert!
- Change a few things up and try submitting again.
-
-
+
{#snippet icon()}{/snippet}
Info alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Danger alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Success alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Warning alert!
Change a few things up and try submitting again.
-
+
{#snippet icon()}{/snippet}
Dark alert!
Change a few things up and try submitting again.
diff --git a/src/routes/docs-examples/components/avatar/AvatarText.svelte b/src/routes/docs-examples/components/avatar/AvatarText.svelte
index 0b8c9b086a..0c11f01f54 100644
--- a/src/routes/docs-examples/components/avatar/AvatarText.svelte
+++ b/src/routes/docs-examples/components/avatar/AvatarText.svelte
@@ -3,7 +3,7 @@
-
+
Jese Leos
Joined in August 2014
diff --git a/src/routes/docs-examples/components/avatar/AvatarWithTooltip.svelte b/src/routes/docs-examples/components/avatar/AvatarWithTooltip.svelte
index 993f246dc5..e8c4c51ff8 100644
--- a/src/routes/docs-examples/components/avatar/AvatarWithTooltip.svelte
+++ b/src/routes/docs-examples/components/avatar/AvatarWithTooltip.svelte
@@ -2,9 +2,9 @@
import { Avatar, Tooltip } from "flowbite-svelte";
-
+
Jese Leos
-
+
Robert Gouth
-
+
Bonnie Green
diff --git a/src/routes/docs-examples/components/avatar/Bordered.svelte b/src/routes/docs-examples/components/avatar/Bordered.svelte
index 1b64c259f9..e0d11a3704 100644
--- a/src/routes/docs-examples/components/avatar/Bordered.svelte
+++ b/src/routes/docs-examples/components/avatar/Bordered.svelte
@@ -2,5 +2,5 @@
import { Avatar } from "flowbite-svelte";
-
-
+
+
diff --git a/src/routes/docs-examples/components/avatar/CustomDot.svelte b/src/routes/docs-examples/components/avatar/CustomDot.svelte
index 40573cc59f..1d8c5446ff 100644
--- a/src/routes/docs-examples/components/avatar/CustomDot.svelte
+++ b/src/routes/docs-examples/components/avatar/CustomDot.svelte
@@ -3,9 +3,9 @@
import { BugOutline } from "flowbite-svelte-icons";
-
+
{#snippet indicator()}
-
+
{/snippet}
diff --git a/src/routes/docs-examples/components/avatar/Default.svelte b/src/routes/docs-examples/components/avatar/Default.svelte
index ee4b49674a..38851e85cd 100644
--- a/src/routes/docs-examples/components/avatar/Default.svelte
+++ b/src/routes/docs-examples/components/avatar/Default.svelte
@@ -3,6 +3,6 @@
diff --git a/src/routes/docs-examples/components/avatar/DotIndicator.svelte b/src/routes/docs-examples/components/avatar/DotIndicator.svelte
index 4a824da94c..ce71aaa2a3 100644
--- a/src/routes/docs-examples/components/avatar/DotIndicator.svelte
+++ b/src/routes/docs-examples/components/avatar/DotIndicator.svelte
@@ -2,9 +2,9 @@
import { Avatar } from "flowbite-svelte";
-
-
-
-
+
+
+
+
diff --git a/src/routes/docs-examples/components/avatar/Sizes.svelte b/src/routes/docs-examples/components/avatar/Sizes.svelte
index 24038af9a2..67fa15ce2b 100644
--- a/src/routes/docs-examples/components/avatar/Sizes.svelte
+++ b/src/routes/docs-examples/components/avatar/Sizes.svelte
@@ -3,10 +3,10 @@
diff --git a/src/routes/docs-examples/components/avatar/Stacked.svelte b/src/routes/docs-examples/components/avatar/Stacked.svelte
index d39569eb61..839db0bccf 100644
--- a/src/routes/docs-examples/components/avatar/Stacked.svelte
+++ b/src/routes/docs-examples/components/avatar/Stacked.svelte
@@ -3,14 +3,14 @@
diff --git a/src/routes/docs-examples/components/avatar/UserDropdown.svelte b/src/routes/docs-examples/components/avatar/UserDropdown.svelte
index a31621be81..1b2353d3aa 100644
--- a/src/routes/docs-examples/components/avatar/UserDropdown.svelte
+++ b/src/routes/docs-examples/components/avatar/UserDropdown.svelte
@@ -2,7 +2,7 @@
import { Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownGroup } from "flowbite-svelte";
-
+
Bonnie Green
diff --git a/src/routes/docs-examples/components/badge/BadgeLocalStorage.svelte b/src/routes/docs-examples/components/badge/BadgeLocalStorage.svelte
index 0c15b5b7b8..1a1bbd358b 100644
--- a/src/routes/docs-examples/components/badge/BadgeLocalStorage.svelte
+++ b/src/routes/docs-examples/components/badge/BadgeLocalStorage.svelte
@@ -38,5 +38,5 @@
{/if}
{#if badgeVisible}
- Example badge (click × to dismiss)
+ Example badge (click × to dismiss)
{/if}
diff --git a/src/routes/docs-examples/components/badge/Bordered.svelte b/src/routes/docs-examples/components/badge/Bordered.svelte
index 06745206f7..3657071dd4 100644
--- a/src/routes/docs-examples/components/badge/Bordered.svelte
+++ b/src/routes/docs-examples/components/badge/Bordered.svelte
@@ -2,11 +2,23 @@
import { Badge } from "flowbite-svelte";
-Default
-Gray
-Red
-Green
-Yellow
-Indigo
-Purple
-Pink
+
+ Brand
+ Alternative
+ Gray
+ Danger
+ Success
+ Warning
+ Purple
+ Pink
+
+
+ Brand
+ Alternative
+ Gray
+ Danger
+ Success
+ Warning
+ Purple
+ Pink
+
diff --git a/src/routes/docs-examples/components/badge/Default.svelte b/src/routes/docs-examples/components/badge/Default.svelte
index 8764e1f6d1..51e356eec6 100644
--- a/src/routes/docs-examples/components/badge/Default.svelte
+++ b/src/routes/docs-examples/components/badge/Default.svelte
@@ -2,11 +2,11 @@
import { Badge } from "flowbite-svelte";
-Default
+Brand
+Alternative
Gray
-Red
-Green
-Yellow
-Indigo
+Danger
+Success
+Warning
Purple
Pink
diff --git a/src/routes/docs-examples/components/badge/Dismissable.svelte b/src/routes/docs-examples/components/badge/Dismissable.svelte
index 82dc4b248c..3333708d62 100644
--- a/src/routes/docs-examples/components/badge/Dismissable.svelte
+++ b/src/routes/docs-examples/components/badge/Dismissable.svelte
@@ -2,11 +2,11 @@
import { Badge } from "flowbite-svelte";
-Default
-Gray
-Red
-Green
-Yellow
-Indigo
-Purple
-Pink
+Brand
+Alternative
+Gray
+Danger
+Success
+Warning
+Purple
+Pink
diff --git a/src/routes/docs-examples/components/badge/Dismissable2.svelte b/src/routes/docs-examples/components/badge/Dismissable2.svelte
index 007af14f33..4202286d26 100644
--- a/src/routes/docs-examples/components/badge/Dismissable2.svelte
+++ b/src/routes/docs-examples/components/badge/Dismissable2.svelte
@@ -3,7 +3,7 @@
import { CloseCircleSolid } from "flowbite-svelte-icons";
-
+
Default
{#snippet icon()}