flowbite-svelte 0.36.5 → 0.37.2

package/dist/indicators/Indicator.svelte

@@ -57,3 +57,34 @@ $: dotClass = classNames('flex-shrink-0', rounded ? 'rounded' : 'rounded-full',
 </script>
 
 <div class={dotClass}><slot /></div>
+
+<!--
+  @component
+  ## Features
+  [Go to Indicators](https://flowbite-svelte.com/docs/components/indicators)
+  - Setup
+  - Default indicator
+  - Legend indicator
+  - Indicator count
+  - Status indicator
+  - Badge indicator
+  - Stepper indicator
+  - Indicator position
+  ## Props
+  @prop color: IndicatorColorType = 'gray';
+  @prop rounded: boolean = false;
+  @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  @prop border: boolean = false;
+  @prop placement: IndicatorPlacementType = undefined;
+  @prop offset: boolean = true;
+  ## Example
+  ```
+  <script>
+    import { Indicator } from 'flowbite-svelte'
+  </script>
+  
+  <Indicator color="gray"/>
+  <Indicator color="dark"/>
+  <Indicator color="blue"/>
+  ```
+-->

package/dist/indicators/Indicator.svelte.d.ts

@@ -20,6 +20,35 @@ declare const __propDef: {
 export type IndicatorProps = typeof __propDef.props;
 export type IndicatorEvents = typeof __propDef.events;
 export type IndicatorSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Indicators](https://flowbite-svelte.com/docs/components/indicators)
+ * - Setup
+ * - Default indicator
+ * - Legend indicator
+ * - Indicator count
+ * - Status indicator
+ * - Badge indicator
+ * - Stepper indicator
+ * - Indicator position
+ * ## Props
+ * @prop color: IndicatorColorType = 'gray';
+ * @prop rounded: boolean = false;
+ * @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+ * @prop border: boolean = false;
+ * @prop placement: IndicatorPlacementType = undefined;
+ * @prop offset: boolean = true;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Indicator } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Indicator color="gray"/>
+ * <Indicator color="dark"/>
+ * <Indicator color="blue"/>
+ * ```
+ */
 export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
 }
 export {};

package/dist/indicators/Indicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAsF3E,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB;;;;;;;;;CAC1L,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAwF3E,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB;;;;;;;;;CAC1L,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/kbd/ArrowKeyDown.svelte

@@ -11,3 +11,11 @@ export let svgClass = 'w-4 h-4';
   viewBox="0 0 320 512"
   ><path
     d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyDown.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyDownProps = typeof __propDef.props;
 export type ArrowKeyDownEvents = typeof __propDef.events;
 export type ArrowKeyDownSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyDown extends SvelteComponentTyped<ArrowKeyDownProps, ArrowKeyDownEvents, ArrowKeyDownSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyDown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyDown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyDown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ArrowKeyDown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyDown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/kbd/ArrowKeyLeft.svelte

@@ -11,3 +11,11 @@ export let svgClass = 'w-4 h-4';
   viewBox="0 0 320 512"
   ><path
     d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyLeft.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyLeftProps = typeof __propDef.props;
 export type ArrowKeyLeftEvents = typeof __propDef.events;
 export type ArrowKeyLeftSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyLeft extends SvelteComponentTyped<ArrowKeyLeftProps, ArrowKeyLeftEvents, ArrowKeyLeftSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyLeft.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyLeft.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyLeft.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ArrowKeyLeft.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyLeft.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/kbd/ArrowKeyRight.svelte

@@ -11,3 +11,11 @@ export let svgClass = 'w-4 h-4';
   viewBox="0 0 320 512"
   ><path
     d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyRight.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyRightProps = typeof __propDef.props;
 export type ArrowKeyRightEvents = typeof __propDef.events;
 export type ArrowKeyRightSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyRight extends SvelteComponentTyped<ArrowKeyRightProps, ArrowKeyRightEvents, ArrowKeyRightSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyRight.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyRight.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyRight.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ArrowKeyRight.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyRight.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/kbd/ArrowKeyUp.svelte

@@ -11,3 +11,11 @@ export let svgClass = 'w-4 h-4';
   viewBox="0 0 320 512"
   ><path
     d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyUp.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyUpProps = typeof __propDef.props;
 export type ArrowKeyUpEvents = typeof __propDef.events;
 export type ArrowKeyUpSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyUp extends SvelteComponentTyped<ArrowKeyUpProps, ArrowKeyUpEvents, ArrowKeyUpSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyUp.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyUp.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyUp.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"ArrowKeyUp.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyUp.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/kbd/Kbd.svelte

@@ -5,3 +5,33 @@ export let kbdClass = 'text-xs font-semibold text-gray-800 bg-gray-100 border bo
 <kbd class={classNames(kbdClass, $$props.class)}>
   <slot />
 </kbd>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  - Setup
+  - Default KBD
+  - KBD inside text
+  - KBD inside table
+  - Arrow keys
+  - Letter keys
+  - Number keys
+  - Function keys
+  ## Props
+  @prop kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+  ## Example
+  ```
+  <script>
+    import { Kbd } from 'flowbite-svelte'
+  </script>
+
+  <Kbd class='px-2 py-1.5'>Shift</Kbd>
+  <Kbd class='px-2 py-1.5'>Ctrl</Kbd>
+  <Kbd class='px-2 py-1.5'>Tab</Kbd>
+  <Kbd class='px-2 py-1.5'>Caps Lock</Kbd>
+  <Kbd class='px-2 py-1.5'>Esc</Kbd>
+  <Kbd class='px-4 py-1.5'>Spacebar</Kbd>
+  <Kbd class='px-2 py-1.5'>Enter</Kbd>
+  ```
+-->

package/dist/kbd/Kbd.svelte.d.ts

@@ -14,6 +14,34 @@ declare const __propDef: {
 export type KbdProps = typeof __propDef.props;
 export type KbdEvents = typeof __propDef.events;
 export type KbdSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * - Setup
+ * - Default KBD
+ * - KBD inside text
+ * - KBD inside table
+ * - Arrow keys
+ * - Letter keys
+ * - Number keys
+ * - Function keys
+ * ## Props
+ * @prop kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Kbd } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Kbd class='px-2 py-1.5'>Shift</Kbd>
+ * <Kbd class='px-2 py-1.5'>Ctrl</Kbd>
+ * <Kbd class='px-2 py-1.5'>Tab</Kbd>
+ * <Kbd class='px-2 py-1.5'>Caps Lock</Kbd>
+ * <Kbd class='px-2 py-1.5'>Esc</Kbd>
+ * <Kbd class='px-4 py-1.5'>Spacebar</Kbd>
+ * <Kbd class='px-2 py-1.5'>Enter</Kbd>
+ * ```
+ */
 export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
 }
 export {};

package/dist/kbd/Kbd.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/Kbd.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}
+{"version":3,"file":"Kbd.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/Kbd.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}

package/dist/list-group/Listgroup.svelte

@@ -12,8 +12,33 @@ $: groupClass = classNames(defaultClass, $$props.class);
 
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
-    <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+    {#if typeof item === 'object'}
+      <ListgroupItem {active} {...item} {index} on:click><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {index} on:click><slot {item} {index} /></ListgroupItem>
+    {/if}
   {:else}
-    <slot />
+    <slot item={items[0]} />
   {/each}
 </Frame>
+
+<!--
+  @component
+  ## Features
+  [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+  ## Props
+  @prop items: ListGroupItemType[] = [];
+  @prop active: boolean = false;
+  @prop defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+  ## Example
+  ```
+  <script>
+    import { Listgroup } from 'flowbite-svelte'
+    let simpleList = ["Profile", "Settings", "Messages", "Download"]
+  </script>
+
+  <Listgroup items={simpleList} let:item class="w-48">
+    {item}
+  </Listgroup>
+  ```
+-->

package/dist/list-group/Listgroup.svelte.d.ts

@@ -243,7 +243,7 @@ declare const __propDef: {
         node?: HTMLElement | undefined;
         use?: import("svelte/action").Action<HTMLElement, any, Record<never, any>> | undefined;
         options?: object | undefined;
-        items?: ListGroupItemType[] | undefined;
+        items?: string[] | ListGroupItemType[] | undefined;
         active?: boolean | undefined;
     };
     events: {
@@ -252,12 +252,33 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            item: string | ListGroupItemType;
+        };
     };
 };
 export type ListgroupProps = typeof __propDef.props;
 export type ListgroupEvents = typeof __propDef.events;
 export type ListgroupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+ * ## Props
+ * @prop items: ListGroupItemType[] = [];
+ * @prop active: boolean = false;
+ * @prop defaultClass: string = 'divide-y divide-gray-200 dark:divide-gray-600';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Listgroup } from 'flowbite-svelte'
+ *   let simpleList = ["Profile", "Settings", "Messages", "Download"]
+ * </script>
+ *
+ * <Listgroup items={simpleList} let:item class="w-48">
+ *   {item}
+ * </Listgroup>
+ * ```
+ */
 export default class Listgroup extends SvelteComponentTyped<ListgroupProps, ListgroupEvents, ListgroupSlots> {
 }
 export {};

package/dist/list-group/Listgroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAqClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Listgroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/Listgroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AA2ClD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/list-group/ListgroupItem.svelte

@@ -4,17 +4,21 @@ export let active = getContext('active');
 export let current = false;
 export let disabled = false;
 export let href = '';
+export let currentClass = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+export let normalClass = '';
+export let disabledClass = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+export let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+export let hoverClass = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+export let itemDefaultClass = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
 const states = {
-    current: 'text-white bg-blue-700 dark:text-white dark:bg-gray-800',
-    normal: '',
-    disabled: 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400'
+    current: currentClass,
+    normal: normalClass,
+    disabled: disabledClass
 };
-let focusClass = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-gray-500 dark:focus:text-white';
-let hoverClass = 'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white';
 let state;
 $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
 let itemClass;
-$: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded-t-lg last:rounded-b-lg', states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+$: itemClass = classNames(itemDefaultClass, states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
 </script>
 
 {#if !active}
@@ -57,3 +61,31 @@ $: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded
     <slot item={$$props} />
   </button>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+  ## Props
+  @prop active: boolean = getContext('active');
+  @prop current: boolean = false;
+  @prop disabled: boolean = false;
+  @prop href: string = '';
+  @prop currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+  @prop normalClass: string = '';
+  export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+  @prop focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+  @prop hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+  @prop itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+-->

package/dist/list-group/ListgroupItem.svelte.d.ts

@@ -6,6 +6,12 @@ declare const __propDef: {
         current?: boolean | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
+        currentClass?: string | undefined;
+        normalClass?: string | undefined;
+        disabledClass?: string | undefined;
+        focusClass?: string | undefined;
+        hoverClass?: string | undefined;
+        itemDefaultClass?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -30,6 +36,32 @@ declare const __propDef: {
 export type ListgroupItemProps = typeof __propDef.props;
 export type ListgroupItemEvents = typeof __propDef.events;
 export type ListgroupItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to List Group](https://flowbite-svelte.com/docs/components/list-group)
+ * ## Props
+ * @prop active: boolean = getContext('active');
+ * @prop current: boolean = false;
+ * @prop disabled: boolean = false;
+ * @prop href: string = '';
+ * @prop currentClass: string = 'text-white bg-primary-700 dark:text-white dark:bg-gray-800';
+ * @prop normalClass: string = '';
+ * export let disabledClass: string = 'text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400';
+ * @prop focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
+ * @prop hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
+ * @prop itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ */
 export default class ListgroupItem extends SvelteComponentTyped<ListgroupItemProps, ListgroupItemEvents, ListgroupItemSlots> {
 }
 export {};

package/dist/list-group/ListgroupItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ListgroupItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/list-group/ListgroupItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/megamenu/MegaMenu.svelte

@@ -35,3 +35,56 @@ $: ulClass = classNames('grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto
     {#if full && $$slots.extra}<div class="md:w-1/3 mt-4 md:mt-0"><slot name="extra" /></div>{/if}
   </div>
 </Popper>
+
+<!--
+  @component
+  ## Feature
+  [Go to Mega Menu](https://flowbite-svelte.com/docs/components/mega-menu)
+  - Setup
+  - Default mega menu
+  - Mega menu with icons
+  - Full width dropdown
+  - Full width with CTA
+  - Full width with image
+  ## Props
+  @prop items: LinkTypeLike[] = [];
+  @prop full: boolean = false;
+  @prop open: boolean = false;  
+  ## Example
+  ```
+  <script>
+    import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, Chevron, MegaMenu } from 'flowbite-svelte'
+    let menu = [
+      {name: 'About us', href: '/about'},
+      {name: 'Blog', href: '/blog'},
+      {name: 'Contact us', href: '/contact'},
+      {name: 'Library', href: '/library'},
+      {name: 'Newsletter', href: '/news'},
+      {name: 'Support Center', href: '/support'},
+      {name: 'Resources', href: '/resource'},
+      {name: 'Playground', href: '/play'},
+      {name: 'Terms', href: '/terms'},
+      {name: 'Pro Version', href: '/pro'},
+      {name: 'License', href: '/license'},
+    ];
+  </script>
+  
+  <Navbar let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/">Home</NavLi>
+      <NavLi><Chevron aligned>Mega menu</Chevron></NavLi>
+      <MegaMenu items={menu} let:item>
+        <a href={item.href} class="hover:text-blue-600 dark:hover:text-blue-500">{item.name}</a>
+      </MegaMenu>
+      <NavLi href="/services">Services</NavLi>
+      <NavLi href="/services">Products</NavLi>
+      <NavLi href="/services">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  ```
+-->

package/dist/megamenu/MegaMenu.svelte.d.ts

@@ -22,6 +22,57 @@ declare const __propDef: {
 export type MegaMenuProps = typeof __propDef.props;
 export type MegaMenuEvents = typeof __propDef.events;
 export type MegaMenuSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Mega Menu](https://flowbite-svelte.com/docs/components/mega-menu)
+ * - Setup
+ * - Default mega menu
+ * - Mega menu with icons
+ * - Full width dropdown
+ * - Full width with CTA
+ * - Full width with image
+ * ## Props
+ * @prop items: LinkTypeLike[] = [];
+ * @prop full: boolean = false;
+ * @prop open: boolean = false;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Navbar, NavBrand, NavHamburger, NavUl, NavLi, Chevron, MegaMenu } from 'flowbite-svelte'
+ *   let menu = [
+ *     {name: 'About us', href: '/about'},
+ *     {name: 'Blog', href: '/blog'},
+ *     {name: 'Contact us', href: '/contact'},
+ *     {name: 'Library', href: '/library'},
+ *     {name: 'Newsletter', href: '/news'},
+ *     {name: 'Support Center', href: '/support'},
+ *     {name: 'Resources', href: '/resource'},
+ *     {name: 'Playground', href: '/play'},
+ *     {name: 'Terms', href: '/terms'},
+ *     {name: 'Pro Version', href: '/pro'},
+ *     {name: 'License', href: '/license'},
+ *   ];
+ * </script>
+ *
+ * <Navbar let:hidden let:toggle>
+ *   <NavBrand href="/">
+ *     <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
+ *     <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+ *   </NavBrand>
+ *   <NavHamburger on:click={toggle} />
+ *   <NavUl {hidden}>
+ *     <NavLi href="/">Home</NavLi>
+ *     <NavLi><Chevron aligned>Mega menu</Chevron></NavLi>
+ *     <MegaMenu items={menu} let:item>
+ *       <a href={item.href} class="hover:text-blue-600 dark:hover:text-blue-500">{item.name}</a>
+ *     </MegaMenu>
+ *     <NavLi href="/services">Services</NavLi>
+ *     <NavLi href="/services">Products</NavLi>
+ *     <NavLi href="/services">Contact</NavLi>
+ *   </NavUl>
+ * </Navbar>
+ * ```
+ */
 export default class MegaMenu extends SvelteComponentTyped<MegaMenuProps, MegaMenuEvents, MegaMenuSlots> {
 }
 export {};

package/dist/megamenu/MegaMenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AA6CzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"MegaMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/megamenu/MegaMenu.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AA+CzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}