zabi-components 5.0.19 → 5.0.21

package/dist/atoms/Input.svelte

@@ -21,10 +21,12 @@
         variant?: SemanticVariant;
         message?: string;
         oninput?: (event: Event) => void;
+        onblur?: (event: Event) => void;
+        "aria-label"?: string;
     }
 
     let {
-        value = "",
+        value = $bindable(""),
         type = "text",
         name = "",
         label = "",
@@ -34,6 +36,7 @@
         variant = "default",
         message = "",
         oninput,
+        onblur,
         ...restProps
     }: Props = $props();
 
@@ -74,7 +77,7 @@
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
+            "w-full min-w-48 bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
@@ -102,9 +105,6 @@
     });
 
     function handleInput(event: Event) {
-        const target = event.target as HTMLInputElement;
-        value = target.value;
-
         if (oninput) {
             oninput(event);
         }
@@ -119,11 +119,12 @@
         id={inputId}
         {type}
         {name}
-        {value}
+        bind:value
         {placeholder}
         {disabled}
         class={inputClasses()}
         oninput={handleInput}
+        {onblur}
         aria-invalid={variant === "error" ? "true" : undefined}
         aria-describedby={message ? `${inputId}-message` : undefined}
         {...restProps}

package/dist/atoms/Input.svelte.d.ts

@@ -10,7 +10,9 @@ interface Props {
     variant?: SemanticVariant;
     message?: string;
     oninput?: (event: Event) => void;
+    onblur?: (event: Event) => void;
+    "aria-label"?: string;
 }
-declare const Input: import("svelte").Component<Props, {}, "">;
+declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/atoms/Progress.svelte

@@ -41,9 +41,7 @@
 
     <div
         id={progressId}
-        class="w-full bg-base-200 rounded-full overflow-hidden {sizeClasses[
-            size
-        ]}"
+        class="w-full bg-input rounded-full overflow-hidden {sizeClasses[size]}"
         role="progressbar"
         aria-valuenow={value}
         aria-valuemin="0"

package/dist/atoms/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
+    import Button from "./Button.svelte";
     import {
         ChevronDown,
         CheckCircle,
@@ -22,6 +23,16 @@
             label: string;
             disabled?: boolean;
         }>;
+        /** Enables the search input inside the dropdown. */
+        searchable?: boolean;
+        /** Placeholder for the search input. */
+        searchPlaceholder?: string;
+        /** Max height for the options list (supports any valid CSS length). */
+        maxMenuHeight?: string;
+        /** Width for the dropdown menu (supports any valid CSS length). */
+        menuWidth?: string;
+        /** Message shown when no options match the search. */
+        noResultsText?: string;
         placeholder?: string;
         label?: string;
         disabled?: boolean;
@@ -34,6 +45,11 @@
     let {
         value = undefined,
         options = [],
+        searchable = true,
+        searchPlaceholder = "Search options",
+        maxMenuHeight = "60vh",
+        menuWidth = "100%",
+        noResultsText = "No results found",
         placeholder = "Select an option",
         label = "",
         disabled = false,
@@ -45,6 +61,8 @@
     }: Props = $props();
 
     let isOpen = $state(false);
+    let selectContainer: HTMLDivElement;
+    let searchQuery = $state("");
 
     const sizeClass = $derived(() => {
         if (size === "sm") {
@@ -92,13 +110,13 @@
 
     const messageClasses = $derived(() => {
         if (variant === "error") {
-            return "text-error text-sm mt-1 flex items-center gap-1.5";
+            return "text-error text-sm mt-1 flex items-center gap-1.5 w-full";
         } else if (variant === "success") {
-            return "text-success text-sm mt-1 flex items-center gap-1.5";
+            return "text-success text-sm mt-1 flex items-center gap-1.5 w-full";
         } else if (variant === "warning") {
-            return "text-warning text-sm mt-1 flex items-center gap-1.5";
+            return "text-warning text-sm mt-1 flex items-center gap-1.5 w-full";
         }
-        return "text-description text-sm mt-1 flex items-center gap-1.5";
+        return "text-description text-sm mt-1 flex items-center gap-1.5 w-full";
     });
 
     const getIcon = $derived(() => {
@@ -124,6 +142,33 @@
         return value === undefined || value === null || value === "";
     });
 
+    const normalizedOptions = $derived(() => {
+        const fallbackOptions = (restProps as { options?: Props["options"] })
+            .options;
+        return Array.from(options ?? fallbackOptions ?? []);
+    });
+
+    const hasSearchQuery = $derived(() => {
+        return searchQuery.trim().length > 0;
+    });
+
+    const filteredOptions = $derived(() => {
+        const query = searchQuery.trim().toLowerCase();
+        const availableOptions = normalizedOptions();
+        if (!searchable || query.length === 0) {
+            return availableOptions;
+        }
+        return availableOptions.filter((option) =>
+            option.label.toLowerCase().includes(query),
+        );
+    });
+
+    $effect(() => {
+        if (!isOpen && searchQuery.length > 0) {
+            searchQuery = "";
+        }
+    });
+
     function handleOptionClick(optionValue: string | number) {
         if (disabled) return;
         value = optionValue;
@@ -146,9 +191,15 @@
     }
 
     function handleClickOutside(event: MouseEvent) {
+        if (!isOpen) return;
+
+        const target = event.target as HTMLElement;
+        const clickedSelectContainer = target.closest(".select-container");
+
+        // Close if clicking outside any select container, or clicking on a different select
         if (
-            isOpen &&
-            !(event.target as HTMLElement).closest(".select-container")
+            !clickedSelectContainer ||
+            clickedSelectContainer !== selectContainer
         ) {
             isOpen = false;
         }
@@ -163,12 +214,18 @@
 
 <svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
 
-<div class="w-full select-container">
+<div bind:this={selectContainer} class="w-full select-container">
     {#if label}
         <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
 
-    <Dropdown {isOpen} placement="bottom-start">
+    <Dropdown
+        {isOpen}
+        placement="bottom-start"
+        selectedValue={value}
+        onOptionClick={handleOptionClick}
+        ariaLabel="Select options"
+    >
         {#snippet trigger()}
             <button
                 type="button"
@@ -181,7 +238,7 @@
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
                 <span
-                    class="text-left flex-1 {isEmpty()
+                    class="text-left flex-1 truncate {isEmpty()
                         ? 'text-description'
                         : 'text-body'}"
                 >
@@ -199,21 +256,49 @@
             </button>
         {/snippet}
         {#snippet children()}
-            <div class="px-2 py-2">
-                {#each options as option (option.value)}
-                    <button
-                        type="button"
-                        class="w-full text-left px-4 py-2 text-body hover:bg-base-100 transition-colors rounded-md my-0.5 {option.disabled
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'cursor-pointer'} {value === option.value
-                            ? 'bg-base-100'
-                            : ''}"
-                        onclick={() => handleOptionClick(option.value)}
-                        disabled={option.disabled}
-                    >
-                        {option.label}
-                    </button>
-                {/each}
+            <div class="px-2 pb-2 pt-1" style:width={menuWidth}>
+                {#if searchable}
+                    <div class="px-1 pb-2">
+                        <input
+                            type="text"
+                            class="w-full rounded-md bg-input hover:bg-input-hover focus:bg-input-focus text-body placeholder:text-description px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                            placeholder={searchPlaceholder}
+                            bind:value={searchQuery}
+                            aria-label={searchPlaceholder}
+                            {disabled}
+                        />
+                    </div>
+                {/if}
+                <div
+                    class="overflow-y-auto px-1"
+                    style:max-height={maxMenuHeight}
+                >
+                    {#if filteredOptions().length > 0}
+                        {#each filteredOptions() as option (option.value)}
+                            {@const buttonRestProps = {
+                                "data-value": String(option.value),
+                            } as Record<string, string>}
+                            <div class="w-full my-0.5">
+                                <Button
+                                    variant={value === option.value
+                                        ? "outline"
+                                        : "ghost"}
+                                    size="sm"
+                                    isFullWidth={true}
+                                    disabled={option.disabled}
+                                    onclick={() => handleOptionClick(option.value)}
+                                    {...buttonRestProps}
+                                >
+                                    {option.label}
+                                </Button>
+                            </div>
+                        {/each}
+                    {:else if hasSearchQuery()}
+                        <div class="px-3 py-2 text-sm text-description">
+                            {noResultsText}
+                        </div>
+                    {/if}
+                </div>
             </div>
         {/snippet}
     </Dropdown>

package/dist/atoms/Select.svelte.d.ts

@@ -5,6 +5,16 @@ interface Props {
         label: string;
         disabled?: boolean;
     }>;
+    /** Enables the search input inside the dropdown. */
+    searchable?: boolean;
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string;
+    /** Max height for the options list (supports any valid CSS length). */
+    maxMenuHeight?: string;
+    /** Width for the dropdown menu (supports any valid CSS length). */
+    menuWidth?: string;
+    /** Message shown when no options match the search. */
+    noResultsText?: string;
     placeholder?: string;
     label?: string;
     disabled?: boolean;

package/dist/atoms/Skeleton.svelte

@@ -3,18 +3,28 @@
         width?: string;
         height?: string;
         className?: string;
+        "aria-label"?: string;
     }
 
     let {
         width = "100%",
         height = "1rem",
         className = "",
+        "aria-label": ariaLabel = "Loading...",
         ...restProps
     }: Props = $props();
+
+    const classes = $derived(
+        `animate-pulse bg-action-secondary rounded${className ? ` ${className}` : ""}`,
+    );
+    const styles = $derived(`width: ${width}; height: ${height};`);
 </script>
 
 <div
-    class="animate-pulse bg-base-200 rounded {className}"
-    style="width: {width}; height: {height};"
+    class={classes}
+    style={styles}
+    aria-busy="true"
+    aria-label={ariaLabel}
+    role="status"
     {...restProps}
 ></div>

package/dist/atoms/Skeleton.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     width?: string;
     height?: string;
     className?: string;
+    "aria-label"?: string;
 }
 declare const Skeleton: import("svelte").Component<Props, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;

package/dist/atoms/Tooltip.svelte

@@ -77,7 +77,11 @@
     onfocusout={handleBlur}
     {...restProps}
 >
-    <div bind:this={triggerElement} id={triggerId} aria-describedby={isVisible ? tooltipId : undefined}>
+    <div
+        bind:this={triggerElement}
+        id={triggerId}
+        aria-describedby={isVisible ? tooltipId : undefined}
+    >
         {@render children?.()}
     </div>
 
@@ -97,10 +101,10 @@
 
 <style>
     :root {
-        --tooltip-bg: #1f2937;
-        --tooltip-color: white;
+        --tooltip-bg: var(--color-base-800);
+        --tooltip-color: var(--color-base-50);
         --tooltip-padding: 0.5rem 0.75rem;
-        --tooltip-radius: 0.375rem;
+        --tooltip-radius: 0.5rem;
         --tooltip-font-size: 0.875rem;
         --tooltip-line-height: 1.25rem;
         --tooltip-max-width: 200px;
@@ -243,16 +247,6 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
-        :root {
-            --tooltip-bg: #374151;
-        }
-    }
-
-    .dark :root {
-        --tooltip-bg: #374151;
-    }
-
     @media (prefers-contrast: high) {
         :root {
             --tooltip-bg: #000000;
@@ -263,16 +257,20 @@
 
     @media (prefers-reduced-motion: reduce) {
         .tooltip {
-            transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
+            transition:
+                opacity 0.1s ease-in-out,
+                visibility 0.1s ease-in-out;
         }
 
         .tooltip-container[data-placement="top"] .tooltip[data-visible="true"],
-        .tooltip-container[data-placement="bottom"] .tooltip[data-visible="true"] {
+        .tooltip-container[data-placement="bottom"]
+            .tooltip[data-visible="true"] {
             transform: translateX(-50%) !important;
         }
 
         .tooltip-container[data-placement="left"] .tooltip[data-visible="true"],
-        .tooltip-container[data-placement="right"] .tooltip[data-visible="true"] {
+        .tooltip-container[data-placement="right"]
+            .tooltip[data-visible="true"] {
             transform: translateY(-50%) !important;
         }
     }

package/dist/atoms/index.d.ts

@@ -1,12 +1,11 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
-export { default as CardTitle } from './CardTitle.svelte';
-export { default as CardDescription } from './CardDescription.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';

package/dist/atoms/index.js

@@ -1,12 +1,11 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
-export { default as CardTitle } from './CardTitle.svelte';
-export { default as CardDescription } from './CardDescription.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';

package/dist/components/atoms/index.d.ts

@@ -1,12 +1,11 @@
 export { default as Toggle } from './Toggle.svelte';
 export { default as Badge } from './Badge.svelte';
 export { default as Button } from './Button.svelte';
+export { default as IconButton } from './IconButton.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardHeader } from './CardHeader.svelte';
 export { default as CardContent } from './CardContent.svelte';
 export { default as CardFooter } from './CardFooter.svelte';
-export { default as CardTitle } from './CardTitle.svelte';
-export { default as CardDescription } from './CardDescription.svelte';
 export { default as Input } from './Input.svelte';
 export { default as Textarea } from './Textarea.svelte';
 export { default as Select } from './Select.svelte';

package/dist/components/atoms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/molecules/index.d.ts

@@ -5,6 +5,14 @@ export { default as Dropdown } from './Dropdown.svelte';
 export { default as Form } from './Form.svelte';
 export { default as ImageUpload } from './ImageUpload.svelte';
 export { default as Modal } from './Modal.svelte';
+export { default as NavigationMenu } from './NavigationMenu.svelte';
+export { default as NavigationMenuList } from './NavigationMenuList.svelte';
+export { default as NavigationMenuItem } from './NavigationMenuItem.svelte';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.svelte';
+export { default as NavigationMenuContent } from './NavigationMenuContent.svelte';
+export { default as NavigationMenuLink } from './NavigationMenuLink.svelte';
+export { default as Section } from './Section.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
 export { default as SlideUp } from './SlideUp.svelte';
 export { default as Tabs } from './Tabs.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/molecules/Dropdown.svelte

@@ -1,27 +1,45 @@
 <script lang="ts">
+    import Button from "../atoms/Button.svelte";
+
     interface Props {
         isOpen?: boolean;
         placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
         ariaLabel?: string;
+        selectedValue?: string | number | null;
+        options?: Array<{
+            value: string | number;
+            label: string;
+            disabled?: boolean;
+        }>;
+        onOptionClick?: (value: string | number) => void;
     }
 
     let {
         isOpen = false,
         placement = "bottom-start",
         ariaLabel = "Menu",
+        selectedValue = null,
+        options = [],
+        onOptionClick,
         children,
         trigger,
         ...restProps
     }: Props & { children?: any; trigger?: any } = $props();
 
     let dropdownId = `dropdown-${Math.random().toString(36).substr(2, 9)}`;
-    let triggerElement: HTMLElement | null = null;
-    let menuElement: HTMLElement | null = null;
+    let triggerElement = $state<HTMLElement | null>(null);
+    let menuElement = $state<HTMLElement | null>(null);
+    let openedViaKeyboard = $state(false);
 
     function handleKeydown(event: KeyboardEvent) {
         if (!isOpen) {
-            if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+            if (
+                event.key === "Enter" ||
+                event.key === " " ||
+                event.key === "ArrowDown"
+            ) {
                 event.preventDefault();
+                openedViaKeyboard = true;
                 isOpen = true;
             }
             return;
@@ -58,21 +76,29 @@
     function getMenuItems(): HTMLElement[] {
         if (!menuElement) return [];
         return Array.from(
-            menuElement.querySelectorAll<HTMLElement>('[role="menuitem"], button, a')
+            menuElement.querySelectorAll<HTMLElement>(
+                '[role="menuitem"], button, a',
+            ),
         );
     }
 
     function focusNextItem() {
         const items = getMenuItems();
-        const currentIndex = items.findIndex((item) => item === document.activeElement);
-        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        const currentIndex = items.findIndex(
+            (item) => item === document.activeElement,
+        );
+        const nextIndex =
+            currentIndex < items.length - 1 ? currentIndex + 1 : 0;
         items[nextIndex]?.focus();
     }
 
     function focusPreviousItem() {
         const items = getMenuItems();
-        const currentIndex = items.findIndex((item) => item === document.activeElement);
-        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        const currentIndex = items.findIndex(
+            (item) => item === document.activeElement,
+        );
+        const prevIndex =
+            currentIndex > 0 ? currentIndex - 1 : items.length - 1;
         items[prevIndex]?.focus();
     }
 
@@ -86,11 +112,41 @@
         items[items.length - 1]?.focus();
     }
 
-    // Focus first item when dropdown opens
+    // Focus first item when dropdown opens via keyboard
     $effect(() => {
-        if (isOpen && menuElement) {
+        if (isOpen && menuElement && openedViaKeyboard) {
             setTimeout(() => {
                 focusFirstItem();
+                openedViaKeyboard = false;
+            }, 0);
+        } else if (!isOpen) {
+            openedViaKeyboard = false;
+        }
+    });
+
+    // Mark selected items
+    $effect(() => {
+        if (isOpen && menuElement) {
+            // Small delay to ensure DOM is ready
+            setTimeout(() => {
+                const items = getMenuItems();
+                items.forEach((item) => {
+                    if (selectedValue !== null && selectedValue !== undefined) {
+                        const itemValue =
+                            item.getAttribute("data-value") ||
+                            item.textContent?.trim();
+                        if (String(itemValue) === String(selectedValue)) {
+                            item.setAttribute("data-selected", "true");
+                            item.setAttribute("aria-selected", "true");
+                        } else {
+                            item.removeAttribute("data-selected");
+                            item.removeAttribute("aria-selected");
+                        }
+                    } else {
+                        item.removeAttribute("data-selected");
+                        item.removeAttribute("aria-selected");
+                    }
+                });
             }, 0);
         }
     });
@@ -137,8 +193,8 @@
     });
 </script>
 
-<div 
-    class="relative inline-block" 
+<div
+    class="relative inline-block"
     data-placement={placement}
     onkeydown={handleKeydown}
     {...restProps}
@@ -148,7 +204,7 @@
     </div>
 
     {#if isOpen}
-        <div 
+        <div
             bind:this={menuElement}
             id={dropdownId}
             class={dropdownContentClasses()}
@@ -156,7 +212,38 @@
             aria-label={ariaLabel}
             tabindex="-1"
         >
-            {@render children?.()}
+            {#if options.length > 0}
+                <div class="px-2 py-2">
+                    {#each options as option (option.value)}
+                        {@const buttonRestProps = {
+                            "data-value": String(option.value),
+                        } as any}
+                        <div class="w-full my-0.5">
+                            <Button
+                                variant={selectedValue === option.value
+                                    ? "outline"
+                                    : "ghost"}
+                                size="sm"
+                                isFullWidth={true}
+                                disabled={option.disabled}
+                                onclick={() => onOptionClick?.(option.value)}
+                                {...buttonRestProps}
+                            >
+                                {option.label}
+                            </Button>
+                        </div>
+                    {/each}
+                </div>
+            {:else if children}
+                {@render children?.()}
+            {/if}
         </div>
     {/if}
 </div>
+
+<style>
+    :global([role="menu"] button) {
+        justify-content: flex-start;
+        text-align: left;
+    }
+</style>