flowbite-svelte 0.44.10 → 0.44.12

package/src/routes/docs/components/skeleton.md

@@ -1,165 +0,0 @@
----
-layout: componentLayout
-title: Svelte Skeleton - Flowbite
-breadcrumb_title: Svelte Skeleton
-component_title: Skeleton
-dir: Components
-description: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video
-thumnailSize: w-40
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A } from '$lib'
-  
-  const components = 'CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder'
-</script>
-
-Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, images, videos, and more.
-
-## Setup
-
-```svelte example hideOutput
-<script>
-  import { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder } from 'flowbite-svelte';
-</script>
-```
-
-## Default skeleton
-
-```svelte example
-<script>
-  import { Skeleton } from 'flowbite-svelte';
-</script>
-
-<Skeleton size="sm" class="my-8" />
-<Skeleton size="md" class="my-8" />
-<Skeleton size="lg" class="my-8" />
-<Skeleton size="xl" class="my-8" />
-<Skeleton size="xxl" class="mt-8 mb-2.5" />
-```
-
-## Image placeholder
-
-```svelte example
-<script>
-  import { ImagePlaceholder } from 'flowbite-svelte';
-</script>
-
-<ImagePlaceholder />
-<ImagePlaceholder imgHeight={60} class="mt-8" />
-```
-
-## Video placeholder
-
-```svelte example
-<script>
-  import { VideoPlaceholder } from 'flowbite-svelte';
-</script>
-
-<VideoPlaceholder />
-<VideoPlaceholder size="md" class="mt-8" />
-<VideoPlaceholder size="lg" class="mt-8" />
-<VideoPlaceholder size="xl" class="mt-8" />
-<VideoPlaceholder size="xxl" class="mt-8" />
-```
-
-## Text placeholder
-
-```svelte example
-<script>
-  import { TextPlaceholder } from 'flowbite-svelte';
-</script>
-
-<TextPlaceholder />
-<TextPlaceholder size="md" class="mt-8" />
-<TextPlaceholder size="lg" class="mt-8" />
-<TextPlaceholder size="xl" class="mt-8" />
-<TextPlaceholder size="xxl" class="mt-8" />
-```
-
-## Card placeholder
-
-```svelte example
-<script>
-  import { CardPlaceholder } from 'flowbite-svelte';
-</script>
-
-<CardPlaceholder />
-<CardPlaceholder size="md" class="mt-8" />
-<CardPlaceholder size="lg" class="mt-8" />
-<CardPlaceholder size="xl" class="mt-8" />
-<CardPlaceholder size="xxl" class="mt-8" />
-```
-
-## Widget placeholder
-
-```svelte example
-<script>
-  import { WidgetPlaceholder } from 'flowbite-svelte';
-</script>
-
-<WidgetPlaceholder />
-```
-
-## List placeholder
-
-```svelte example
-<script>
-  import { ListPlaceholder } from 'flowbite-svelte';
-</script>
-
-<ListPlaceholder />
-```
-
-## Testimonial placeholder
-
-```svelte example
-<script>
-  import { TestimonialPlaceholder } from 'flowbite-svelte';
-</script>
-
-<TestimonialPlaceholder />
-```
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### CardPlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### ImagePlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### ListPlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### Skeleton styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### TestimonialPlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### TextPlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### VideoPlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-### WidgetPlaceholder styling
-
-- Use the `class` prop to overwrite `divClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Skeleton](https://flowbite.com/docs/components/sidebar/)

package/src/routes/docs/components/speed-dial.md

@@ -1,523 +0,0 @@
----
-layout: componentLayout
-title: Svelte Speed Dial - Flowbite
-breadcrumb_title: Svelte Speed Dial
-component_title: Speed Dial
-dir: Components
-description: The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element.
-thumnailSize: w-64
----
-
-<script>
-  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
-  import { P, A, Alert } from '$lib'  
-
-  const components = 'SpeedDial, SpeedDialButton'
-</script>
-
-Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.
-
-## Default speed dial
-
-To initialize a speed dial component you need to wrap the trigger element and the list of items inside an element and use the data-dial-init data attribute on it.
-
-<Alert>
-
-**Note!** Default class for speed dial is `fixed right-6 bottom-6`. However for the sake of the examples below `fixed` must be changed to `absolute`, therefore you can notice `defaultClass="absolute right-6 left-6"` at every example.
-
-</Alert>
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Download">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-```
-
-## Colors
-
-The Speed Dial components accommodate a variety of Button component properties, including color options (blue, dark, alternative, light, green, red, yellow, primary, and purple), gradient, shadow, and outline styles. For further information, please refer to **[the Button component](https://flowbite-svelte.com/components/button)** documentation.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial color="primary" defaultClass="absolute left-6 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="purple" defaultClass="absolute left-24 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="light" defaultClass="absolute left-44 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="dark" defaultClass="absolute left-64 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial color="red" defaultClass="absolute right-6 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="green" defaultClass="absolute right-24 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="yellow" defaultClass="absolute right-44 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="blue" defaultClass="absolute right-64 bottom-6">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial color="purpleToBlue" gradient defaultClass="absolute left-6 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="cyanToBlue" gradient defaultClass="absolute left-24 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="greenToBlue" gradient defaultClass="absolute left-44 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="purpleToPink" gradient defaultClass="absolute left-64 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial color="green" outline defaultClass="absolute right-6 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="red" outline defaultClass="absolute right-24 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="blue" outline defaultClass="absolute right-44 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="purple" outline defaultClass="absolute right-64 bottom-36">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial color="blue" gradient defaultClass="absolute left-6 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="green" gradient defaultClass="absolute left-24 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="cyan" gradient defaultClass="absolute left-44 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial color="teal" gradient defaultClass="absolute left-64 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial shadow="blue" gradient color="blue" defaultClass="absolute right-6 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial shadow="green" gradient color="green" defaultClass="absolute right-24 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial shadow="purple" gradient color="purple" defaultClass="absolute right-44 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-<SpeedDial shadow="pink" gradient color="pink" defaultClass="absolute right-64 bottom-64">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-```
-
-## Square speed dial
-
-Use this example to make the trigger button’s style square instead of a full circle. As `SpeedDialButton` is an instance of `Button` we use the `pill` property to achevie the effect.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6" pill={false}>
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Download">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-```
-
-## Text inside button
-
-This example can be used to show the descriptive text inside the button instead of a tooltip.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Save">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6" pill={false} tooltip="none">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Save">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-```
-
-## Text outside button
-
-Use this example to show the text of each button outside of the speed dial as an alternative style.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" textOutside>
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Save">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6" pill={false} tooltip="none" textOutside>
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Save">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-```
-
-## Dropdown menu
-
-This example can be used to show a list of menu items instead of buttons when activating the speed dial.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, Listgroup, ListgroupItem } from 'flowbite-svelte';
-  import { DotsHorizontalOutline, ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" placement="top-end">
-  <DotsHorizontalOutline slot="icon" class="w-8 h-8" />
-  <Listgroup class="divide-none" active>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <ShareNodesSolid class="w-3.5 h-3.5" />
-      Share
-    </ListgroupItem>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <PrintSolid class="w-3.5 h-3.5" />
-      Print
-    </ListgroupItem>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <DownloadSolid class="w-3.5 h-3.5" />
-      Save
-    </ListgroupItem>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <FileCopySolid class="w-3.5 h-3.5" />
-      Copy
-    </ListgroupItem>
-  </Listgroup>
-</SpeedDial>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6" tooltip="none" pill={false} placement="top-end">
-  <DotsHorizontalOutline slot="icon" class="w-8 h-8" />
-  <Listgroup class="divide-none" active>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <ShareNodesSolid class="w-3.5 h-3.5" />
-      Share
-    </ListgroupItem>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <PrintSolid class="w-3.5 h-3.5" />
-      Print
-    </ListgroupItem>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <DownloadSolid class="w-3.5 h-3.5" />
-      Save
-    </ListgroupItem>
-    <ListgroupItem class="flex gap-2 md:px-5">
-      <FileCopySolid class="w-3.5 h-3.5" />
-      Copy
-    </ListgroupItem>
-  </Listgroup>
-</SpeedDial>
-```
-
-## Alternative menu
-
-This example can be used to show an alternative style when showing a list of menu items.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, Listgroup, ListgroupItem } from 'flowbite-svelte';
-  import { PenSolid, ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" placement="top-end">
-  <PenSolid slot="icon" class="w-8 h-8" />
-  <Listgroup active>
-    <ListgroupItem class="flex">
-      <ShareNodesSolid class="mr-2 w-5 h-5" />
-      Share
-    </ListgroupItem>
-    <ListgroupItem class="flex">
-      <PrintSolid class="mr-2 w-5 h-5" />
-      Print
-    </ListgroupItem>
-    <ListgroupItem class="flex">
-      <DownloadSolid class="mr-2 w-5 h-5" />
-      Save
-    </ListgroupItem>
-    <ListgroupItem class="flex">
-      <FileCopySolid class="mr-2 w-5 h-5" />
-      Copy
-    </ListgroupItem>
-  </Listgroup>
-</SpeedDial>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6" tooltip="none" pill={false} placement="top-end">
-  <Listgroup active>
-    <ListgroupItem class="flex">
-      <ShareNodesSolid class="mr-2 w-5 h-5" />
-      Share
-    </ListgroupItem>
-    <ListgroupItem class="flex">
-      <PrintSolid class="mr-2 w-5 h-5" />
-      Print
-    </ListgroupItem>
-    <ListgroupItem class="flex">
-      <DownloadSolid class="mr-2 w-5 h-5" />
-      Save
-    </ListgroupItem>
-    <ListgroupItem class="flex">
-      <FileCopySolid class="mr-2 w-5 h-5" />
-      Copy
-    </ListgroupItem>
-  </Listgroup>
-</SpeedDial>
-```
-
-## Alignment - Position
-
-Align the speed dial menu items by using property `placement="top|right|left|bottom"`.
-
-Control the main button position using the flexbox utility classes from Tailwind CSS through property `defaultClass`.
-
-```svelte example class="relative h-[400px]"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-  const placements = [
-    ['left-2 top-2', 'right', 'bottom'],
-    ['right-6 top-2', 'bottom', 'left'],
-    ['right-6 bottom-6', 'left', 'top'],
-    ['left-2 bottom-6', 'top', 'right']
-  ];
-</script>
-
-{#each placements as [position, placement, tooltip]}
-  <SpeedDial defaultClass="absolute {position}" {placement}>
-    <SpeedDialButton name="Share" {tooltip}>
-      <ShareNodesSolid class="w-5 h-5" />
-    </SpeedDialButton>
-    <SpeedDialButton name="Print" {tooltip}>
-      <PrintSolid class="w-5 h-5" />
-    </SpeedDialButton>
-    <SpeedDialButton name="Download" {tooltip}>
-      <DownloadSolid class="w-5 h-5" />
-    </SpeedDialButton>
-    <SpeedDialButton name="Copy" {tooltip}>
-      <FileCopySolid class="w-5 h-5" />
-    </SpeedDialButton>
-  </SpeedDial>
-{/each}
-```
-
-## Triggering
-
-Use the `trigger="click|hover"` attribute of the speed dial component to set which type of action should activate the speed dial: click or hover.
-
-The default trigger type is hover for each speed dial component.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  import { ShareNodesSolid, PrintSolid, DownloadSolid, FileCopySolid } from 'flowbite-svelte-icons';
-</script>
-
-<SpeedDial defaultClass="absolute left-2 bottom-6" trigger="hover" tooltip="right">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Download">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-
-<SpeedDial defaultClass="absolute right-6 bottom-6" trigger="click">
-  <SpeedDialButton name="Share">
-    <ShareNodesSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Print">
-    <PrintSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Download">
-    <DownloadSolid class="w-5 h-5" />
-  </SpeedDialButton>
-  <SpeedDialButton name="Copy">
-    <FileCopySolid class="w-5 h-5" />
-  </SpeedDialButton>
-</SpeedDial>
-```
-
-## Control open state
-
-Use the `open` property to control the state of the popup menu.
-
-```svelte example class="relative h-96"
-<script>
-  import { SpeedDial, SpeedDialButton } from 'flowbite-svelte';
-  let open = false;
-
-  const close = () => {
-    open = false;
-  };
-</script>
-
-<SpeedDial bind:open defaultClass="absolute right-6 bottom-6">
-  <SpeedDialButton name="Share" on:click={close}>Share</SpeedDialButton>
-  <SpeedDialButton name="Print" on:click={close}>Print</SpeedDialButton>
-</SpeedDial>
-```
-
-The default trigger type is hover for each speed dial component.
-
-## Component data
-
-The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
-
-### SpeedDial styling
-
-- Use the `class` prop to overwrite `defaultClass`.
-
-### SpeedDialButton styling
-
-- Use the `class` prop to overwrite `btnDefaultClass`.
-
-<CompoAttributesViewer {components}/>
-
-## References
-
-- [Flowbite Speed Dial](https://flowbite.com/docs/components/speed-dial/)