windmill-components 1.82.2 → 1.82.3

package/components/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    placeholder?: string | undefined;
     readonly?: boolean | undefined;
+    placeholder?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        placeholder?: string | undefined;
         readonly?: boolean | undefined;
+        placeholder?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/buttons/AppFormButton.svelte

@@ -3,12 +3,14 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import Portal from 'svelte-portal';
+import Modal from '../../../common/modal/Modal.svelte';
 import { concatCustomCss } from '../../utils';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -28,6 +30,7 @@ let runnableComponent;
 let isLoading = false;
 let ownClick = false;
 let errors = {};
+let open = false;
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
@@ -59,64 +62,73 @@ let runnableWrapper;
 	/>
 {/each}
 
-<AlwaysMountedModal
-	title={resolvedConfig.label ?? ''}
-	class={css?.popup?.class}
-	style={css?.popup?.style}
->
-	<RunnableWrapper
-		bind:this={runnableWrapper}
-		{recomputeIds}
-		{render}
-		bind:runnableComponent
-		{componentInput}
-		{id}
-		{extraQueryParams}
-		autoRefresh={false}
-		forceSchemaDisplay={true}
-		runnableClass="!block"
-		{outputs}
-		doOnSuccess={resolvedConfig.onSuccess}
+<Portal>
+	<Modal
+		{open}
+		title={resolvedConfig.label ?? ''}
+		class={css?.popup?.class}
+		style={css?.popup?.style}
+		on:canceled={() => {
+			open = false
+		}}
+		on:confirmed={() => {
+			open = false
+		}}
 	>
-		<div class="flex flex-col gap-2 px-4 w-full">
-			<div>
-				{#if noInputs}
-					<div class="text-gray-600 italic text-sm my-4">
-						Run forms are associated with a runnable that has user inputs.
-						<br />
-						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-						<strong>
-							User Input
-							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-						</strong>
-					</div>
-				{/if}
-			</div>
-			<div class="flex justify-end">
-				<Button
-					{loading}
-					btnClasses="my-1"
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
-					}}
-					on:click={async () => {
-						if (!runnableComponent) {
-							runnableWrapper.onSuccess()
-						} else {
-							await runnableComponent?.runComponent()
-						}
-						getModal().close()
-					}}
-					size="xs"
-					color="dark"
-				>
-					Submit
-				</Button>
+		<RunnableWrapper
+			bind:this={runnableWrapper}
+			{recomputeIds}
+			{render}
+			bind:runnableComponent
+			{componentInput}
+			{id}
+			{extraQueryParams}
+			autoRefresh={false}
+			forceSchemaDisplay={true}
+			runnableClass="!block"
+			{outputs}
+			doOnSuccess={resolvedConfig.onSuccess}
+		>
+			<div class="flex flex-col gap-2 px-4 w-full">
+				<div>
+					{#if noInputs}
+						<div class="text-gray-600 italic text-sm my-4">
+							Run forms are associated with a runnable that has user inputs.
+							<br />
+							Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+							<strong>
+								User Input
+								<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+							</strong>
+						</div>
+					{/if}
+				</div>
+				<div class="flex justify-end">
+					<Button
+						{loading}
+						btnClasses="my-1"
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+							window.dispatchEvent(new Event('pointerup'))
+						}}
+						on:click={async () => {
+							if (!runnableComponent) {
+								runnableWrapper.onSuccess()
+							} else {
+								await runnableComponent?.runComponent()
+							}
+							open = false
+						}}
+						size="xs"
+						color="dark"
+					>
+						Submit
+					</Button>
+				</div>
 			</div>
-		</div>
-	</RunnableWrapper>
-</AlwaysMountedModal>
+		</RunnableWrapper>
+	</Modal>
+</Portal>
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
@@ -129,7 +141,7 @@ let runnableWrapper;
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
-			getModal().open()
+			open = true
 		}}
 	>
 		{resolvedConfig.label}

package/components/apps/editor/AppEditor.svelte

@@ -10,7 +10,8 @@ import Tabs from '../../common/tabs/Tabs.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import { Alert, Button, Tab } from '../../common';
 import ComponentList from './componentsPanel/ComponentList.svelte';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames, encodeState } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
@@ -25,8 +26,6 @@ import { initHistory } from '../../../history';
 import ComponentNavigation from './component/ComponentNavigation.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
-import { SecondaryMenu } from './settingsPanel/secondaryMenu';
-import { Component, Paintbrush, Plus } from 'lucide-svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -161,7 +160,7 @@ let variableEditor = undefined;
 					<Pane size={15} minSize={5} maxSize={33}>
 						<ContextPanel />
 					</Pane>
-					<Pane size={63}>
+					<Pane size={64}>
 						<SplitPanesWrapper>
 							<Splitpanes horizontal>
 								<Pane size={70}>
@@ -202,32 +201,31 @@ let variableEditor = undefined;
 							</Splitpanes>
 						</SplitPanesWrapper>
 					</Pane>
-					<Pane size={22} minSize={5} maxSize={33}>
+					<Pane size={21} minSize={5} maxSize={33}>
 						<div class="relative flex flex-col h-full">
 							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
 								<Tab value="insert" size="xs">
-									<div class="m-1 center-center gap-1">
-										<Plus size={18} />
+									<div class="m-1 center-center gap-2">
+										<Icon data={faPlus} />
 										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
-									<div class="m-1 center-center gap-1">
-										<Component size={18} />
-										<span>Component</span>
+									<div class="m-1 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
 									</div>
 								</Tab>
 								<Tab value="css" size="xs">
-									<div class="m-1 center-center gap-1">
-										<Paintbrush size={18} />
-										<span>Styling</span>
+									<div class="m-1 center-center gap-2">
+										<Icon data={faCode} />
+										<span>CSS</span>
 									</div>
 								</Tab>
 								<div slot="content" class="h-full overflow-y-auto">
 									<TabContent class="overflow-auto h-full" value="settings">
 										{#if $selectedComponent !== undefined}
 											<SettingsPanel />
-											<SecondaryMenu />
 										{:else}
 											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
 												Select a component to see the settings&nbsp;for&nbsp;it

package/components/apps/editor/AppPreview.svelte

@@ -82,7 +82,8 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				)}
 			>
 				<div
-					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+					style="z-index: 1000;"
 				>
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />

package/components/apps/editor/component/README.md

@@ -8,10 +8,6 @@
    1. Add the component to one of the component sets: `layout`, `buttons`,
       `inputs` or `display` _(this controls which group the component will be
       placed in in the **Insert** menu)_
-1. [**`quickStyleProperties.ts`**](../componentsPanel/quickStyleProperties.ts):
-   1. Add the component to the `quickStyleProperties` record
-   1. _(optional)_ Add the CSS properties that could be applied to the component
-      parts
 1. [**`Component.svelte`**](./Component.svelte):
    1. Add the new component in the Svelte `if` statement
 1. [**`default-codes.ts`**](./default-codes.ts):

package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -1,107 +1,67 @@
-<script>import { Forward, Paintbrush2 } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+<script>import { X } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
-import { addWhitespaceBeforeCapitals, sendUserToast } from '../../../../utils';
-import { Button, ClearableInput } from '../../../common';
-import Popover from '../../../Popover.svelte';
-import QuickStyleMenu from './QuickStyleMenu.svelte';
+import { addWhitespaceBeforeCapitals } from '../../../../utils';
 export let name;
-export let componentType = undefined;
 export let value = {};
 export let forceStyle = false;
 export let forceClass = false;
-export let quickStyleProperties = undefined;
-const { app } = getContext('AppViewerContext');
-const dispatch = createEventDispatcher();
-let isQuickMenuOpen = false;
-$: dispatch('change', value);
-function toggleQuickMenu() {
-    isQuickMenuOpen = !isQuickMenuOpen;
-}
-function applyToAllInstances() {
-    if (componentType &&
-        componentType in ($app?.css || {}) &&
-        name in ($app?.css?.[componentType] || {})) {
-        $app.css[componentType][name].style = value.style;
-        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
+function reset(property) {
+    if (value) {
+        value[property] = '';
     }
 }
 </script>
 
-<div
-	class="sticky top-0 z-20 text-lg bg-white font-semibold [font-variant:small-caps] text-gray-700 pt-2 pb-1"
->
+<div class="text-sm font-semibold text-gray-500 capitalize pt-2">
 	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
-	<div class="border-l border-gray-400/80 py-1 pl-3.5 ml-0.5">
+	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
 		{#if value.style !== undefined || forceStyle}
-			<div class="pb-2">
-				<!-- svelte-ignore a11y-label-has-associated-control -->
-				<label class="block">
-					<div class="text-sm font-medium text-gray-600 pb-0.5"> Style </div>
-					<div class="flex gap-1">
-						<div class="relative grow">
-							<ClearableInput
-								bind:value={value.style}
-								type="textarea"
-								wrapperClass="h-full min-h-[72px]"
-								inputClass="h-full"
-							/>
-						</div>
-						<div class="flex flex-col gap-1">
-							{#if componentType}
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<Button
-										variant="border"
-										color="light"
-										size="xs"
-										btnClasses="!p-1 !w-[34px] !h-[34px]"
-										aria-label="Apply to all instances of this component"
-										on:click={applyToAllInstances}
-									>
-										<Forward size={18} />
-									</Button>
-									<svelte:fragment slot="text">
-										Apply to all instances of this component
-									</svelte:fragment>
-								</Popover>
-							{/if}
-							{#if quickStyleProperties?.length}
-								<Popover placement="bottom" notClickable disapperTimoout={0}>
-									<Button
-										variant="border"
-										color="light"
-										size="xs"
-										btnClasses="!p-1 !w-[34px] !h-[34px] {isQuickMenuOpen
-											? '!bg-gray-200/60 hover:!bg-gray-200'
-											: ''}"
-										aria-label="{isQuickMenuOpen ? 'Close' : 'Open'} styling menu"
-										on:click={toggleQuickMenu}
-									>
-										<Paintbrush2 size={18} />
-									</Button>
-									<svelte:fragment slot="text">
-										{isQuickMenuOpen ? 'Close' : 'Open'} styling menu
-									</svelte:fragment>
-								</Popover>
-							{/if}
-						</div>
-					</div>
-				</label>
-				{#if quickStyleProperties?.length && isQuickMenuOpen}
-					<div transition:fade|local={{ duration: 200 }} class="w-full pt-1">
-						<QuickStyleMenu bind:value={value.style} properties={quickStyleProperties} />
-					</div>
-				{/if}
-			</div>
+			<label class="block pb-2">
+				<div class="text-xs font-medium pb-0.5"> Style </div>
+				<div class="relative">
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.style}
+						on:focus
+					/>
+					{#if value?.style}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove styles"
+							on:click|preventDefault|stopPropagation={() => reset('style')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
+				</div>
+			</label>
 		{/if}
 		{#if value.class !== undefined || forceClass}
-			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-sm font-medium text-gray-600 pb-0.5"> Tailwind classes </div>
+				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
 				<div class="relative">
-					<ClearableInput bind:value={value.class} />
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.class}
+						on:focus
+					/>
+					{#if value?.class}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove classes"
+							on:click|preventDefault|stopPropagation={() => reset('class')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
 				</div>
 			</label>
 		{/if}

package/components/apps/editor/componentsPanel/CssProperty.svelte.d.ts

@@ -1,18 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentCssProperty } from '../../types';
-import type { AppComponent } from '../component/components';
-import type { StylePropertyKey } from './quickStyleProperties';
 declare const __propDef: {
     props: {
         name: string;
-        componentType?: AppComponent['type'] | undefined;
         value?: ComponentCssProperty | undefined;
         forceStyle?: boolean | undefined;
         forceClass?: boolean | undefined;
-        quickStyleProperties?: StylePropertyKey[] | undefined;
     };
     events: {
-        change: CustomEvent<any>;
+        keydown: KeyboardEvent;
+        focus: FocusEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -7,7 +7,7 @@ import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
-import { capitalize, classNames, getModifierKey, isMac } from '../../../../utils';
+import { capitalize, classNames, getModifierKey } from '../../../../utils';
 import { buildExtraLib, fieldTypeToTsType } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
@@ -23,9 +23,6 @@ import GridPane from './GridPane.svelte';
 import { slide } from 'svelte/transition';
 import { push } from '../../../../history';
 import Kbd from '../../../common/kbd/Kbd.svelte';
-import { secondaryMenu } from './secondaryMenu';
-import StylePanel from './StylePanel.svelte';
-import { Delete } from 'lucide-svelte';
 export let componentSettings = undefined;
 export let rowColumns = false;
 export let onDelete = undefined;
@@ -62,10 +59,12 @@ $: extraLib =
         ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
         : undefined;
 function keydown(event) {
-    const { key, metaKey } = event;
-    if (key === 'Delte' || (key === 'Backspace' && metaKey)) {
-        removeGridElement();
-        event.stopPropagation();
+    switch (event.key) {
+        case 'Delete': {
+            removeGridElement();
+            event.stopPropagation();
+            break;
+        }
     }
 }
 const initialConfiguration = componentSettings?.item?.data?.type
@@ -202,20 +201,19 @@ $: componentSettings?.item?.data && ($app = $app);
 		<div class="grow shrink" />
 
 		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
-			<PanelSection title="Styling">
+			<PanelSection title="Custom CSS">
 				<div slot="action">
 					<Button
 						color="light"
 						size="xs"
-						variant="border"
-						endIcon={{ icon: faChevronRight }}
-						on:click={() => secondaryMenu.open(StylePanel, { component })}
+						endIcon={{ icon: viewCssOptions ? faChevronUp : faChevronDown }}
+						on:click={() => (viewCssOptions = !viewCssOptions)}
 					>
-						Open
+						{viewCssOptions ? 'Hide' : 'Show'}
 					</Button>
 				</div>
 				{#if viewCssOptions}
-					<div transition:slide|local class="w-full">
+					<div transition:slide|local>
 						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
 							{#if componentSettings.item.data?.customCss != undefined}
 								<div class="w-full mb-2">
@@ -238,15 +236,7 @@ $: componentSettings?.item?.data && ($app = $app);
 				<div slot="action">
 					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
 						Delete&nbsp;&nbsp;
-						{#if isMac()}
-							<Kbd kbdClass="center-center">
-								<span class="text-lg leading-none">⌘</span>
-								<span class="px-0.5">+</span>
-								<Delete size={16} />
-							</Kbd>
-						{:else}
-							<Kbd>Del</Kbd>
-						{/if}
+						<Kbd>Del</Kbd>
 					</Button>
 				</div>
 				<div class="flex flex-col gap-1">

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -1,18 +1,19 @@
-<script>import { createEventDispatcher } from 'svelte';
-import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
-import { ClearableInput } from '../../../../common';
-export let value = '#fff';
-const dispatch = createEventDispatcher();
+<script>import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
+export let componentInput;
 let isOpen = false;
-$: dispatch('change', value);
 </script>
 
-<div class="color-picker-input grow">
-	<ClearableInput readonly bind:value on:focus={() => (isOpen = true)} />
+<div class="color-picker-input">
+	<input
+		type="text"
+		readonly
+		value={componentInput.value}
+		on:focus|preventDefault|stopPropagation={() => (isOpen = true)}
+	/>
 	<ColorPicker
 		bind:isOpen
-		bind:hex={value}
-		label={value}
+		bind:hex={componentInput.value}
+		label={componentInput.value}
 		canChangeMode={false}
 		components={ChromeVariant}
 		toRight
@@ -21,7 +22,7 @@ $: dispatch('change', value);
 </div>
 
 <style global>
-	:global(.color-picker-input) :global(span) > :global(label) {
+	:global(.color-picker-input) :global(span) > :global(label.svelte-rogbpz) {
 		display: none;
 	}
 
@@ -29,7 +30,6 @@ $: dispatch('change', value);
 		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
 		border-style: none !important;
 		border-radius: 0.375rem !important;
-		z-index: 20;
 	}
 
 	:global(.color-picker-input) :global(.slider-wrapper) {

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -1,11 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        componentInput: StaticInput<string>;
     };
     events: {
-        change: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -74,7 +74,7 @@ $: componentInput && onchange?.();
 			Inconsistent labeled resource object
 		{/if}
 	{:else if fieldType === 'color'}
-		<ColorInput bind:value={componentInput.value} />
+		<ColorInput bind:componentInput />
 	{:else if fieldType === 'object'}
 		{#if format?.startsWith('resource-')}
 			<ResourcePicker

package/components/apps/types.d.ts

@@ -63,7 +63,6 @@ export type InlineScript = {
         key: string;
     }[];
 };
-export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
 export type App = {
     grid: GridItem[];
     fullscreen: boolean;
@@ -79,7 +78,7 @@ export type App = {
         autoRefresh?: boolean;
         doNotRecomputeOnInputChanged?: boolean;
     }>;
-    css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
+    css?: Partial<Record<'viewer' | 'grid' | AppComponent['type'], Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {

package/components/common/button/ButtonPopup.svelte

@@ -7,7 +7,6 @@ export let color = 'blue';
 export let variant = 'contained';
 export let mainClasses = '';
 export let toggleClasses = '';
-export let listClasses = '';
 export let disabled = false;
 export let href = undefined;
 export let target = '_self';
@@ -60,16 +59,14 @@ $: commonProps = {
 {#if ref}
 	<Popup
 		{ref}
-		let:open
-		let:close
 		options={{
 			placement: $$slots.main ? 'bottom-end' : 'bottom',
 			strategy: 'absolute',
 			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
 		}}
 	>
-		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto {listClasses}">
-			<slot {open} {close} />
+		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto">
+			<slot />
 		</ul>
 	</Popup>
 {/if}