flowbite-svelte 0.21.10 → 0.21.13

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.21.13](https://github.com/themesberg/flowbite-svelte/compare/v0.21.12...v0.21.13) (2022-07-19)
+
+### [0.21.12](https://github.com/themesberg/flowbite-svelte/compare/v0.21.11...v0.21.12) (2022-07-19)
+
+### [0.21.11](https://github.com/themesberg/flowbite-svelte/compare/v0.21.10...v0.21.11) (2022-07-18)
+
+
+### Bug Fixes
+
+* add on:change to Input component requested by https://github.com/themesberg/flowbite-svelte/pull/127 ([af5e64d](https://github.com/themesberg/flowbite-svelte/commit/af5e64d84b45f424b6166ff4fa1b5634a6f387d0))
+
 ### [0.21.10](https://github.com/themesberg/flowbite-svelte/compare/v0.21.9...v0.21.10) (2022-07-17)
 
 

package/avatar/Dot.svelte

@@ -23,7 +23,7 @@ $: dotClass = classNames('absolute rounded-full border-white dark:border-gray-80
 </script>
 
 {#if show}
-	<div class="relative">
+	<div class="relative flex-shrink-0 h-full">
 		<slot />
 		<span class={dotClass} />
 	</div>

package/dropdowns/Dropdown.svelte

@@ -19,39 +19,40 @@ $: icon = icons[placement.split('-')[0]];
 </script>
 
 <Tooltip
-	class={classNames('w-44 !rounded !p-0', $$props.class)}
+	class={classNames('!rounded !p-0', $$props.class)}
 	style="auto"
 	animation="duration-100"
 	{placement}
 	arrow={tooltipArrow}
 	trigger="click"
 >
-	{#if inline}
-		<button class={labelClass}>
-			<slot name="label">{label}</slot>
-			{#if arrowIcon}
-				<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
-			{/if}
-		</button>
-	{:else}
-		<Button
-			pill={$$props.pill}
-			outline={$$props.outline}
-			color={$$props.color}
-			size={$$props.size}
-			icon={$$props.icon}
-			gradientDuoTone={$$props.gradientDuoTone}
-			gradientMonochrome={$$props.gradientMonochrome}
-		>
-			<slot name="label">{label}</slot>
-			{#if arrowIcon}
-				<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
-			{/if}
-		</Button>
-	{/if}
-	<div slot="content">
+	<slot name="trigger">
+		{#if inline}
+			<button class={labelClass}>
+				<slot name="label">{label}</slot>
+				{#if arrowIcon}
+					<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
+				{/if}
+			</button>
+		{:else}
+			<Button
+				pill={$$props.pill}
+				outline={$$props.outline}
+				color={$$props.color}
+				size={$$props.size}
+				icon={$$props.icon}
+				gradient={$$props.gradient}
+			>
+				<slot name="label">{label}</slot>
+				{#if arrowIcon}
+					<svelte:component this={icon ?? ChevronDown} class="ml-2 h-4 w-4" />
+				{/if}
+			</Button>
+		{/if}
+	</slot>
+	<slot name="content" slot="content">
 		<ul class="py-1">
 			<slot />
 		</ul>
-	</div>
+	</slot>
 </Tooltip>

package/dropdowns/Dropdown.svelte.d.ts

@@ -14,7 +14,11 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        trigger: {};
         label: {};
+        content: {
+            slot: string;
+        };
         default: {};
     };
 };

package/dropdowns/DropdownHeader.svelte

@@ -1,9 +1,13 @@
 <script>import classNames from 'classnames';
 import DropdownDivider from './DropdownDivider.svelte';
-export let divClass = 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
+export let divClass = 'py-2 px-4 text-gray-700 dark:text-white';
+// 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
+export let divider = true;
 </script>
 
-<div class={classNames(divClass, $$props.class)} {...$$restProps}>
+<div {...$$restProps} class={classNames(divClass, $$props.class)}>
 	<slot />
 </div>
-<DropdownDivider />
+{#if divider}
+	<DropdownDivider />
+{/if}

package/dropdowns/DropdownHeader.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         divClass?: string;
+        divider?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dropdowns/DropdownItem.svelte

@@ -1,7 +1,16 @@
 <script>import classNames from 'classnames';
-export let liClass = 'block cursor-pointer py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white';
+export let liClass = 'block font-medium cursor-pointer py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
+export let color = 'default';
+const colors = {
+    default: 'text-gray-700 dark:text-gray-200 dark:hover:text-white',
+    red: 'text-red-600 dark:text-red-500'
+};
 </script>
 
-<li {...$$restProps} class={classNames(liClass, $$props.class)} on:click>
+<li
+	{...$$restProps}
+	class={classNames(liClass, colors[color] ?? colors.default, $$props.class)}
+	on:click|stopPropagation
+>
 	<slot />
 </li>

package/dropdowns/DropdownItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         liClass?: string;
+        color?: string;
     };
     events: {
         click: MouseEvent;

package/forms/Checkbox.svelte

@@ -1,21 +1,42 @@
-<script>import classNames from 'classnames';
-export let inputClass = 'w-4 h-4 bg-gray-100 rounded border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 ';
-export let checked = false;
+<script>import Radio from './Radio.svelte';
+export let group = [];
+export let value = '';
+export let checked = undefined;
+$: {
+    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
+    // This workaround is taken from:
+    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+    const index = group.indexOf(value);
+    if (checked === undefined)
+        checked = index >= 0;
+    if (checked) {
+        if (index < 0) {
+            group.push(value);
+            group = group;
+        }
+    }
+    else {
+        if (index >= 0) {
+            group.splice(index, 1);
+            group = group;
+        }
+    }
+}
+let inputClass; // get the value from the underlying Radio
+// properties forwarding
+export let custom = false;
 export let color = 'blue';
-const colorClasses = {
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
-};
+export let inline = false;
 </script>
 
-<input
-	{...$$restProps}
-	type="checkbox"
-	bind:checked
-	class={classNames(inputClass, colorClasses[color], $$props.class)}
-/>
+<Radio class={$$restProps.class} bind:inputClass {color} {custom} {inline}>
+	<input
+		slot="input"
+		type="checkbox"
+		bind:checked
+		{value}
+		{...$$restProps}
+		class="rounded {inputClass}"
+	/>
+	<slot />
+</Radio>

package/forms/Checkbox.svelte.d.ts

@@ -3,14 +3,19 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        inputClass?: string;
+        group?: string[];
+        value?: string;
         checked?: boolean;
+        custom?: boolean;
         color?: FormColorType;
+        inline?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type CheckboxProps = typeof __propDef.props;
 export declare type CheckboxEvents = typeof __propDef.events;

package/forms/Input.svelte

@@ -20,6 +20,7 @@ function setType(node) {
 	{...$$restProps}
 	bind:value
 	bind:this={ref}
+	on:change
 	use:setType
 	class={classNames(
 		inputClass,

package/forms/Input.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         ref?: HTMLElement;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/forms/Radio.svelte

@@ -1,82 +1,49 @@
-<script>export let helper;
-export let id;
-export let value;
-export let label;
-export let group;
-export let divClass = 'flex items-center mr-4';
-export let inputClass = 'w-4 h-4 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 bg-gray-100 border-gray-300 ';
-export let labelClass = 'block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300';
-export let disabled = false;
-export let name = '';
-export let divHelperClass = 'flex items-center h-5';
-export let labelHelperClass = 'font-medium text-gray-900 dark:text-gray-300';
-export let helperClass = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+<script>/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Label
+
+To associate the <label> with an <input> element, you need to give the <input> an id attribute.
+The <label> then needs a for attribute	whose value is the same as the input's id.
+
+Alternatively, you can nest the <input> directly inside the <label>, in which case the for and
+id attributes are not needed because the association is implicit:
+
+<label>Do you like peas?
+<input type="checkbox" name="peas">
+</label>
+
+ */
+import classNames from 'classnames';
 export let color = 'blue';
-if (disabled) {
-    labelClass = 'ml-2 text-sm font-medium text-gray-400 dark:text-gray-500';
-}
-if (color === 'red') {
-    inputClass = 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600';
-}
-else if (color === 'green') {
-    inputClass = 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600';
-}
-else if (color === 'purple') {
-    inputClass = 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600';
-}
-else if (color === 'teal') {
-    inputClass = 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600';
-}
-else if (color === 'yellow') {
-    inputClass = 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600';
-}
-else if (color === 'orange') {
-    inputClass = 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600';
-}
-else {
-    inputClass = 'text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-600';
-}
+export let custom = false;
+export let inline = false;
+export let group = '';
+export let value = '';
+export let inputClass;
+$: inputClass = classNames('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 mr-2', custom && 'sr-only peer', colorClasses[color]);
+let colorLabel = 'gray';
+$: colorLabel = $$restProps.disabled ? 'disabled' : colorLabel;
+let labelClass;
+$: labelClass = classNames(inline ? 'inline-flex' : 'flex', 'items-center text-sm font-medium', colorClassesLabel[colorLabel], $$restProps.class);
+const colorClassesLabel = {
+    gray: 'text-gray-900 dark:text-gray-300',
+    green: 'text-green-700 dark:text-green-500',
+    red: 'text-red-700 dark:text-red-500',
+    disabled: 'text-gray-400 dark:text-gray-500'
+};
+const colorClasses = {
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+};
 </script>
 
-{#if helper}
-	<div class="flex">
-		<div class={divHelperClass}>
-			<input
-				{...$$restProps}
-				bind:group
-				{id}
-				type="radio"
-				{name}
-				{value}
-				class={inputClass}
-				aria-labelledby={id}
-				aria-describedby={id}
-				{disabled}
-			/>
-		</div>
-		<div class="ml-2 text-sm">
-			<label for={id} class={labelHelperClass}>
-				{@html label}
-			</label>
-			<p id="{id}-helper-radio-text" class={helperClass}>{helper}</p>
-		</div>
-	</div>
-{:else}
-	<div class={divClass}>
-		<input
-			bind:group
-			{id}
-			type="radio"
-			{name}
-			{value}
-			class={inputClass}
-			aria-labelledby={id}
-			aria-describedby={id}
-			{disabled}
-			{...$$restProps}
-		/>
-		<label for={id} class={labelClass}>
-			{@html label}
-		</label>
-	</div>
-{/if}
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label class={labelClass}>
+	<slot name="input">
+		<input type="radio" bind:group {value} {...$$restProps} class={inputClass} />
+	</slot>
+	<slot />
+</label>

package/forms/Radio.svelte.d.ts

@@ -3,25 +3,20 @@ import type { FormColorType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        helper: string;
-        id: string;
-        value: string;
-        label: string;
-        group: number | string;
-        divClass?: string;
-        inputClass?: string;
-        labelClass?: string;
-        disabled?: boolean;
-        name?: string;
-        divHelperClass?: string;
-        labelHelperClass?: string;
-        helperClass?: string;
         color?: FormColorType;
+        custom?: boolean;
+        inline?: boolean;
+        group?: number | string;
+        value?: string;
+        inputClass: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        input: {};
+        default: {};
+    };
 };
 export declare type RadioProps = typeof __propDef.props;
 export declare type RadioEvents = typeof __propDef.events;

package/forms/Toggle.svelte

@@ -1,55 +1,24 @@
-<script>import generateId from '../utils/generateId.js';
-export let name = 'toggle-example';
-export let color = 'blue';
+<script>import classNames from 'classnames';
+import Checkbox from './Checkbox.svelte';
 export let size = 'default';
-export let id = generateId();
-export let label = 'Toggle me';
-export let value = '';
-export let checked = false;
-export let disabled = false;
-export let labelClass = 'relative inline-flex items-center cursor-pointer';
-export let divClass = "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
-export let inputClass = 'sr-only';
-export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
-if (color || size) {
-    inputClass += ' peer';
-}
-if (color === 'red') {
-    divClass =
-        "w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600";
-}
-else if (color === 'green') {
-    divClass =
-        "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600";
-}
-else if (color === 'purple') {
-    divClass =
-        "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600";
-}
-else if (color === 'yellow') {
-    divClass =
-        "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400";
-}
-else if (color === 'teal') {
-    divClass =
-        "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600";
-}
-else if (color === 'orange') {
-    divClass =
-        "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500";
-}
-else if (size === 'small') {
-    divClass =
-        "w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
-}
-else if (size === 'large') {
-    divClass =
-        "w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
-}
+const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600";
+const colors = {
+    red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
+    green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
+    purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
+    yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
+    teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
+    orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
+    blue: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+};
+const sizes = {
+    small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
+    default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
+    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
+};
 </script>
 
-<label for={id} class={labelClass}>
-	<input type="checkbox" {id} class={inputClass} {value} bind:checked {name} {disabled} on:click />
-	<div class="{divClass} {$$props.class ? $$props.class : ''}" />
-	<span class={spanClass}>{label}</span>
-</label>
+<Checkbox custom class="relative {$$restProps.class}" {...$$restProps}>
+	<div class={classNames(common, colors[$$restProps.color ?? 'blue'], sizes[size])} />
+	<slot />
+</Checkbox>

package/forms/Toggle.svelte.d.ts

@@ -1,27 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ToggleColorType } from '../types.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        name?: string;
-        color?: ToggleColorType;
         size?: 'small' | 'default' | 'large';
-        id?: string;
-        label?: string;
-        value?: string;
-        checked?: boolean;
-        disabled?: boolean;
-        labelClass?: string;
-        divClass?: string;
-        inputClass?: string;
-        spanClass?: string;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type ToggleProps = typeof __propDef.props;
 export declare type ToggleEvents = typeof __propDef.events;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.21.10",
+  "version": "0.21.13",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/tooltips/Tooltip.svelte

@@ -61,7 +61,13 @@ onDestroy(() => {
 
 <svelte:window on:resize={() => open && updatePosition()} />
 
-<div>
+<div
+	use:clickOutside={() => {
+		if (open) {
+			open = false;
+		}
+	}}
+>
 	<div
 		class="w-fit"
 		bind:this={triggerRef}
@@ -80,11 +86,6 @@ onDestroy(() => {
 				open = !open;
 			}
 		}}
-		use:clickOutside={() => {
-			if (open) {
-				open = false;
-			}
-		}}
 	>
 		<slot />
 	</div>

package/utils/CloseButton.svelte

@@ -16,12 +16,14 @@ $: buttonClass = classNames('ml-auto -mx-1 -my-1.5 rounded-lg focus:ring-2 p-1.5
 </script>
 
 <button on:click type="button" class={buttonClass} aria-label="Close">
-	<span class="sr-only">Close</span>
-	<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-		><path
-			fill-rule="evenodd"
-			d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-			clip-rule="evenodd"
-		/></svg
-	>
+	<slot>
+		<span class="sr-only">Close</span>
+		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+			><path
+				fill-rule="evenodd"
+				d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</slot>
 </button>

package/utils/CloseButton.svelte.d.ts

@@ -9,7 +9,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type CloseButtonProps = typeof __propDef.props;
 export declare type CloseButtonEvents = typeof __propDef.events;