From dbd11ca9101751e1a6e242d0e8be617df2ee0d04 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 9 Oct 2024 14:23:09 +0200
Subject: [PATCH 01/12] First combobox setup

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte   | 127 ++++++++++++++++++
 v2/pink-sb/src/lib/combobox/_combobox.scss    | 102 ++++++++++++++
 v2/pink-sb/src/lib/combobox/index.ts          |   8 ++
 .../stories/combobox/Combobox.stories.svelte  |  88 ++++++++++++
 4 files changed, 325 insertions(+)
 create mode 100644 v2/pink-sb/src/lib/combobox/Combobox.svelte
 create mode 100644 v2/pink-sb/src/lib/combobox/_combobox.scss
 create mode 100644 v2/pink-sb/src/lib/combobox/index.ts
 create mode 100644 v2/pink-sb/src/stories/combobox/Combobox.stories.svelte

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
new file mode 100644
index 000000000..3fd76320e
--- /dev/null
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+    import type { ComboboxOption, ComboboxProps } from '$lib/combobox/index.js';
+
+    export let placeholder: ComboboxProps['placeholder'] = '';
+    export let disabled: ComboboxProps['disabled'] = false;
+    export let options: ComboboxProps['options'] = [];
+
+    $: hasFocus = false;
+    let currentActiveIndex: number | null = null;
+    let selectedOption: ComboboxOption | null = null;
+    let filteredOptions = options;
+    let inputTextValue: string | null = null;
+
+    function selectOption(optionIndex: number) {
+        selectedOption = filteredOptions[optionIndex];
+        inputTextValue = selectedOption.value;
+        hasFocus = false;
+        currentActiveIndex = null;
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (hasFocus) {
+            switch (event.key) {
+                case 'ArrowUp':
+                    if (currentActiveIndex !== null && currentActiveIndex > 0) {
+                        currentActiveIndex--;
+                    } else if (currentActiveIndex === 0) {
+                        currentActiveIndex = null;
+                    }
+
+                    break;
+                case 'ArrowDown':
+                    if (currentActiveIndex !== null && currentActiveIndex < options.length - 1) {
+                        currentActiveIndex++;
+                    } else if (currentActiveIndex === null) {
+                        currentActiveIndex = 0;
+                    }
+                    break;
+                case 'Enter':
+                    if (currentActiveIndex !== null) {
+                        selectOption(currentActiveIndex);
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+</script>
+
+<div
+    class="combobox-container"
+    tabindex="0"
+    on:keydown={handleKeydown}
+    role="combobox"
+    aria-expanded={hasFocus}
+    data-active-option={currentActiveIndex ? `option-${options[currentActiveIndex].key}` : ''}
+    aria-controls="comboboxoptions"
+>
+    <label
+        ><span>My label</span>
+        <div class="combobox-input" class:disabled>
+            <input
+                type="text"
+                {placeholder}
+                {disabled}
+                on:focus={() => {
+                    hasFocus = true;
+                }}
+                on:focusout={() => {
+                    setTimeout(() => {
+                        hasFocus = false;
+                        currentActiveIndex = null;
+                        filteredOptions = options;
+                    }, 100);
+                }}
+                bind:value={inputTextValue}
+                on:input={() => {
+                    filteredOptions = options.filter((option) =>
+                        option.value.toLowerCase().includes(inputTextValue.toLowerCase())
+                    );
+                }}
+            />
+            <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289L10 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z"
+                />
+            </svg>
+        </div>
+    </label>
+    <div class="combobox-menu" class:hidden={!hasFocus || filteredOptions.length === 0}>
+        <ul id="comboboxoptions" role="listbox" aria-label="Options">
+            {#each filteredOptions as option, index}
+                <li
+                    class="option"
+                    class:active={currentActiveIndex === index}
+                    id={`option-${option.key}`}
+                    on:mouseenter={() => {
+                        currentActiveIndex = index;
+                    }}
+                >
+                    <button
+                        on:click={() => {
+                            selectOption(index);
+                        }}
+                    >
+                        {option.value}
+                    </button>
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>
+
+<style lang="scss">
+    @use './combobox';
+
+    @include combobox.base;
+</style>
diff --git a/v2/pink-sb/src/lib/combobox/_combobox.scss b/v2/pink-sb/src/lib/combobox/_combobox.scss
new file mode 100644
index 000000000..8da5e8543
--- /dev/null
+++ b/v2/pink-sb/src/lib/combobox/_combobox.scss
@@ -0,0 +1,102 @@
+@mixin base {
+    label {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .combobox-container {
+        position: relative;
+    }
+
+    .combobox-input {
+        display: flex;
+        padding: var(--space-3, 6px) var(--space-4, 8px) var(--space-3, 6px) var(--space-6, 12px);
+        align-items: center;
+        gap: var(--space-7, 16px);
+        align-self: stretch;
+        border-radius: 8px;
+        border: var(--border-width-S, 1px) solid var(--color-border-neutral, #e4e4e7);
+        background: var(--color-bgColor-neutral-default, #fafafb);
+        box-sizing: border-box;
+
+        input {
+            flex-grow: 1;
+            &::placeholder {
+                color: var(--color-fgColor-neutral-tertiary, #97979b);
+            }
+        }
+
+        &:hover {
+            border: var(--border-width-S, 1px) solid var(--color-border-focus, #818186);
+        }
+
+        &:focus-within {
+            box-shadow: 0 0 0 1px var(--color-border-focus, #818186);
+            border-color: var(--color-border-focus, #818186);
+
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+
+        &.disabled {
+            border: var(--border-width-S, 1px) solid var(--color-border-neutral-strong, #d8d8db);
+            background: var(--color-bgColor-neutral-tertiary, #ededf0);
+        }
+
+        svg {
+            transform: rotate(0deg);
+            transition: transform 0.2s;
+            fill: var(--color-fgColor-neutral-secondary, #56565c);
+        }
+    }
+
+    .combobox-menu {
+        display: flex;
+        position: absolute;
+        width: 100%;
+        padding: var(--gap-XXS, 4px);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--gap-XXXS, 2px);
+        border-radius: var(--border-radius-M, 12px);
+        border: var(--border-width-S, 1px) solid var(--color-border-neutral, #e4e4e7);
+        background: var(--color-bgColor-neutral-primary, #fff);
+        margin-top: 8px;
+
+        /* box-shadow/neutral/S */
+        box-shadow:
+            0 1px 3px 0 rgba(0, 0, 0, 0.03),
+            0 4px 4px 0 rgba(0, 0, 0, 0.04);
+
+        ul,
+        button {
+            width: 100%;
+        }
+
+        button {
+            cursor: pointer;
+            height: 100%;
+            padding-top: var(--space-3, 6px);
+            padding-bottom: var(--space-3, 6px);
+        }
+
+        .option {
+            display: flex;
+            padding: 0 var(--space-4, 8px) 0 var(--space-5, 10px);
+            align-items: center;
+            gap: var(--gap-S, 8px);
+            align-self: stretch;
+
+            &.active {
+                border-radius: var(--border-radius-S, 8px);
+                background: var(--color-overlay-neutral-hover, rgba(25, 25, 28, 0.03));
+            }
+        }
+    }
+
+    .hidden {
+        display: none;
+    }
+}
diff --git a/v2/pink-sb/src/lib/combobox/index.ts b/v2/pink-sb/src/lib/combobox/index.ts
new file mode 100644
index 000000000..f57f35d35
--- /dev/null
+++ b/v2/pink-sb/src/lib/combobox/index.ts
@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+
+export type ComboboxOption = { key: string; value: string };
+export type ComboboxProps = HTMLInputAttributes & {
+    options: Array<ComboboxOption>;
+};
+
+export { default as Combobox } from './Combobox.svelte';
diff --git a/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte b/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte
new file mode 100644
index 000000000..fb1ed6f66
--- /dev/null
+++ b/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte
@@ -0,0 +1,88 @@
+<script context="module" lang="ts">
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Combobox } from '$lib/combobox/index.js';
+
+    export const meta: MetaProps = {
+        title: 'Components/Combobox',
+        component: Combobox,
+        args: {
+            placeholder: 'Placeholder',
+            disabled: false,
+            options: [
+                { key: 'RU', value: 'Russia' },
+                { key: 'CA', value: 'Canada' },
+                { key: 'US', value: 'United States' },
+                { key: 'CN', value: 'China' },
+                { key: 'BR', value: 'Brazil' },
+                { key: 'AU', value: 'Australia' },
+                { key: 'IN', value: 'India' },
+                { key: 'AR', value: 'Argentina' },
+                { key: 'KZ', value: 'Kazakhstan' },
+                { key: 'DZ', value: 'Algeria' },
+                { key: 'CD', value: 'Democratic Republic of the Congo' },
+                { key: 'SA', value: 'Saudi Arabia' },
+                { key: 'MX', value: 'Mexico' },
+                { key: 'ID', value: 'Indonesia' },
+                { key: 'SD', value: 'Sudan' },
+                { key: 'LY', value: 'Libya' },
+                { key: 'IR', value: 'Iran' },
+                { key: 'MN', value: 'Mongolia' },
+                { key: 'PE', value: 'Peru' },
+                { key: 'TD', value: 'Chad' },
+                { key: 'NE', value: 'Niger' },
+                { key: 'AO', value: 'Angola' },
+                { key: 'ML', value: 'Mali' },
+                { key: 'ZA', value: 'South Africa' },
+                { key: 'CO', value: 'Colombia' },
+                { key: 'ET', value: 'Ethiopia' },
+                { key: 'BO', value: 'Bolivia' },
+                { key: 'MA', value: 'Morocco' },
+                { key: 'EG', value: 'Egypt' },
+                { key: 'TZ', value: 'Tanzania' },
+                { key: 'NG', value: 'Nigeria' },
+                { key: 'VE', value: 'Venezuela' },
+                { key: 'PK', value: 'Pakistan' },
+                { key: 'NA', value: 'Namibia' },
+                { key: 'MO', value: 'Mozambique' },
+                { key: 'TR', value: 'Turkey' },
+                { key: 'CL', value: 'Chile' },
+                { key: 'ZM', value: 'Zambia' },
+                { key: 'MM', value: 'Myanmar' },
+                { key: 'AF', value: 'Afghanistan' },
+                { key: 'SS', value: 'South Sudan' },
+                { key: 'FR', value: 'France' },
+                { key: 'SO', value: 'Somalia' },
+                { key: 'CF', value: 'Central African Republic' },
+                { key: 'UA', value: 'Ukraine' },
+                { key: 'MG', value: 'Madagascar' },
+                { key: 'BW', value: 'Botswana' },
+                { key: 'KE', value: 'Kenya' },
+                { key: 'YE', value: 'Yemen' },
+                { key: 'TH', value: 'Thailand' }
+            ]
+        },
+        argTypes: {
+            placeholder: {
+                control: { type: 'text' }
+            },
+            disabled: {
+                control: { type: 'boolean' }
+            },
+            options: {
+                control: false
+            }
+        }
+    };
+</script>
+
+<script>
+    import { Story, Template } from '@storybook/addon-svelte-csf';
+</script>
+
+<Template let:args>
+    <div style="width: 320px">
+        <Combobox {...args} />
+    </div>
+</Template>
+
+<Story name="Default" />

From 2e954ce7b7c39e7515eda6bba7a07d9c502348b4 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 9 Oct 2024 14:24:18 +0200
Subject: [PATCH 02/12] Add label prop

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte             | 3 ++-
 v2/pink-sb/src/lib/combobox/index.ts                    | 1 +
 v2/pink-sb/src/stories/combobox/Combobox.stories.svelte | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index 3fd76320e..e617954bc 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -4,6 +4,7 @@
     export let placeholder: ComboboxProps['placeholder'] = '';
     export let disabled: ComboboxProps['disabled'] = false;
     export let options: ComboboxProps['options'] = [];
+    export let label: ComboboxProps['label'] = '';
 
     $: hasFocus = false;
     let currentActiveIndex: number | null = null;
@@ -58,7 +59,7 @@
     aria-controls="comboboxoptions"
 >
     <label
-        ><span>My label</span>
+        ><span>{label}</span>
         <div class="combobox-input" class:disabled>
             <input
                 type="text"
diff --git a/v2/pink-sb/src/lib/combobox/index.ts b/v2/pink-sb/src/lib/combobox/index.ts
index f57f35d35..c01a6ba71 100644
--- a/v2/pink-sb/src/lib/combobox/index.ts
+++ b/v2/pink-sb/src/lib/combobox/index.ts
@@ -2,6 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 
 export type ComboboxOption = { key: string; value: string };
 export type ComboboxProps = HTMLInputAttributes & {
+    label: string;
     options: Array<ComboboxOption>;
 };
 
diff --git a/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte b/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte
index fb1ed6f66..67a1b6cdd 100644
--- a/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte
+++ b/v2/pink-sb/src/stories/combobox/Combobox.stories.svelte
@@ -8,6 +8,7 @@
         args: {
             placeholder: 'Placeholder',
             disabled: false,
+            label: 'My combobox',
             options: [
                 { key: 'RU', value: 'Russia' },
                 { key: 'CA', value: 'Canada' },

From 616bdce61c77082de15d38dde8581fc511df136c Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 9 Oct 2024 14:45:45 +0200
Subject: [PATCH 03/12] Add max height

---
 v2/pink-sb/src/lib/combobox/_combobox.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/v2/pink-sb/src/lib/combobox/_combobox.scss b/v2/pink-sb/src/lib/combobox/_combobox.scss
index 8da5e8543..d64995b76 100644
--- a/v2/pink-sb/src/lib/combobox/_combobox.scss
+++ b/v2/pink-sb/src/lib/combobox/_combobox.scss
@@ -64,6 +64,8 @@
         border: var(--border-width-S, 1px) solid var(--color-border-neutral, #e4e4e7);
         background: var(--color-bgColor-neutral-primary, #fff);
         margin-top: 8px;
+        max-height: 300px;
+        overflow-y: scroll;
 
         /* box-shadow/neutral/S */
         box-shadow:

From e4fe4ae421f38e8ded74785137374263f4d11bca Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 11 Oct 2024 10:54:00 +0200
Subject: [PATCH 04/12] Pure css scroll indicator

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte |  5 ++-
 v2/pink-sb/src/lib/combobox/_combobox.scss  | 37 +++++++++++++++++++--
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index e617954bc..e28d1de49 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -6,11 +6,14 @@
     export let options: ComboboxProps['options'] = [];
     export let label: ComboboxProps['label'] = '';
 
-    $: hasFocus = false;
+    $: hasFocus = true;
     let currentActiveIndex: number | null = null;
     let selectedOption: ComboboxOption | null = null;
     let filteredOptions = options;
     let inputTextValue: string | null = null;
+    $: hasScroll = detectScroll();
+
+    function detectScroll(): boolean {}
 
     function selectOption(optionIndex: number) {
         selectedOption = filteredOptions[optionIndex];
diff --git a/v2/pink-sb/src/lib/combobox/_combobox.scss b/v2/pink-sb/src/lib/combobox/_combobox.scss
index d64995b76..7eb21e58c 100644
--- a/v2/pink-sb/src/lib/combobox/_combobox.scss
+++ b/v2/pink-sb/src/lib/combobox/_combobox.scss
@@ -62,16 +62,48 @@
         gap: var(--gap-XXXS, 2px);
         border-radius: var(--border-radius-M, 12px);
         border: var(--border-width-S, 1px) solid var(--color-border-neutral, #e4e4e7);
-        background: var(--color-bgColor-neutral-primary, #fff);
+        background: var(--color-bgcolor-neutral-primary, #fff);
         margin-top: 8px;
         max-height: 300px;
-        overflow-y: scroll;
 
         /* box-shadow/neutral/S */
         box-shadow:
             0 1px 3px 0 rgba(0, 0, 0, 0.03),
             0 4px 4px 0 rgba(0, 0, 0, 0.04);
 
+        overflow: auto;
+        background:
+                /* Shadow Cover TOP */
+            linear-gradient(
+                    var(--color-bgcolor-neutral-primary, #fff) 100%,
+                    var(--color-bgcolor-neutral-primary, #fff) 100%
+                )
+                center top,
+            /* Shadow Cover BOTTOM */
+                linear-gradient(
+                    var(--color-bgcolor-neutral-primary, #fff) 100%,
+                    var(--color-bgcolor-neutral-primary, #fff) 100%
+                )
+                center bottom,
+            /* Shadow TOP */
+                linear-gradient(var(--color-bgcolor-neutral-secondary) 62%, rgba(250, 250, 251, 0))
+                center top,
+            /* Shadow BOTTOM */
+                linear-gradient(
+                    180deg,
+                    rgba(250, 250, 251, 0) 0%,
+                    var(--color-bgcolor-neutral-secondary) 62%
+                )
+                center bottom;
+
+        background-repeat: no-repeat;
+        background-size:
+            100% 40px,
+            100% 40px,
+            100% 14px,
+            100% 14px;
+        background-attachment: local, local, scroll, scroll;
+
         ul,
         button {
             width: 100%;
@@ -97,7 +129,6 @@
             }
         }
     }
-
     .hidden {
         display: none;
     }

From 490fddd899655a33c962d4a8792239d7f605d10b Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 11 Oct 2024 14:17:48 +0200
Subject: [PATCH 05/12] No shadow scroll indicator, but half item cutoff

---
 v2/pink-sb/src/lib/combobox/_combobox.scss | 36 ++--------------------
 1 file changed, 2 insertions(+), 34 deletions(-)

diff --git a/v2/pink-sb/src/lib/combobox/_combobox.scss b/v2/pink-sb/src/lib/combobox/_combobox.scss
index 7eb21e58c..65837684e 100644
--- a/v2/pink-sb/src/lib/combobox/_combobox.scss
+++ b/v2/pink-sb/src/lib/combobox/_combobox.scss
@@ -64,46 +64,14 @@
         border: var(--border-width-S, 1px) solid var(--color-border-neutral, #e4e4e7);
         background: var(--color-bgcolor-neutral-primary, #fff);
         margin-top: 8px;
-        max-height: 300px;
+        max-height: 275px;
+        overflow-y: scroll;
 
         /* box-shadow/neutral/S */
         box-shadow:
             0 1px 3px 0 rgba(0, 0, 0, 0.03),
             0 4px 4px 0 rgba(0, 0, 0, 0.04);
 
-        overflow: auto;
-        background:
-                /* Shadow Cover TOP */
-            linear-gradient(
-                    var(--color-bgcolor-neutral-primary, #fff) 100%,
-                    var(--color-bgcolor-neutral-primary, #fff) 100%
-                )
-                center top,
-            /* Shadow Cover BOTTOM */
-                linear-gradient(
-                    var(--color-bgcolor-neutral-primary, #fff) 100%,
-                    var(--color-bgcolor-neutral-primary, #fff) 100%
-                )
-                center bottom,
-            /* Shadow TOP */
-                linear-gradient(var(--color-bgcolor-neutral-secondary) 62%, rgba(250, 250, 251, 0))
-                center top,
-            /* Shadow BOTTOM */
-                linear-gradient(
-                    180deg,
-                    rgba(250, 250, 251, 0) 0%,
-                    var(--color-bgcolor-neutral-secondary) 62%
-                )
-                center bottom;
-
-        background-repeat: no-repeat;
-        background-size:
-            100% 40px,
-            100% 40px,
-            100% 14px,
-            100% 14px;
-        background-attachment: local, local, scroll, scroll;
-
         ul,
         button {
             width: 100%;

From 2225fcb9b6828676f9d2493933f5c305d786860a Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 11 Oct 2024 14:26:45 +0200
Subject: [PATCH 06/12] Fix darkmode

---
 v2/pink-sb/src/lib/combobox/_combobox.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/combobox/_combobox.scss b/v2/pink-sb/src/lib/combobox/_combobox.scss
index 65837684e..90907c7d7 100644
--- a/v2/pink-sb/src/lib/combobox/_combobox.scss
+++ b/v2/pink-sb/src/lib/combobox/_combobox.scss
@@ -17,7 +17,8 @@
         align-self: stretch;
         border-radius: 8px;
         border: var(--border-width-S, 1px) solid var(--color-border-neutral, #e4e4e7);
-        background: var(--color-bgColor-neutral-default, #fafafb);
+        background: var(--color-bgcolor-neutral-primary, #fff);
+
         box-sizing: border-box;
 
         input {

From d0177a233378d054007b38d297add484db4c16c4 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 11 Oct 2024 15:04:21 +0200
Subject: [PATCH 07/12] Cleanup

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index e28d1de49..e617954bc 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -6,14 +6,11 @@
     export let options: ComboboxProps['options'] = [];
     export let label: ComboboxProps['label'] = '';
 
-    $: hasFocus = true;
+    $: hasFocus = false;
     let currentActiveIndex: number | null = null;
     let selectedOption: ComboboxOption | null = null;
     let filteredOptions = options;
     let inputTextValue: string | null = null;
-    $: hasScroll = detectScroll();
-
-    function detectScroll(): boolean {}
 
     function selectOption(optionIndex: number) {
         selectedOption = filteredOptions[optionIndex];

From a5b5e80e85332eb7573f96a9285ebf23f0b2a4aa Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 15 Oct 2024 14:31:18 +0200
Subject: [PATCH 08/12] Typescript fix

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index e617954bc..b3110366b 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -78,7 +78,9 @@
                 bind:value={inputTextValue}
                 on:input={() => {
                     filteredOptions = options.filter((option) =>
-                        option.value.toLowerCase().includes(inputTextValue.toLowerCase())
+                        option.value
+                            .toLowerCase()
+                            .includes(inputTextValue ? inputTextValue.toLowerCase() : '')
                     );
                 }}
             />

From 315e2444c962d3c127eb71e2b28df1c124b896b9 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 15 Oct 2024 14:43:16 +0200
Subject: [PATCH 09/12] Give more time to propagate the click, but also clear
 it straight away when clicked on an item

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index b3110366b..670f991ac 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -11,8 +11,13 @@
     let selectedOption: ComboboxOption | null = null;
     let filteredOptions = options;
     let inputTextValue: string | null = null;
+    // eslint-disable-next-line no-undef
+    let focusTimeout: NodeJS.Timeout | null = null;
 
     function selectOption(optionIndex: number) {
+        if (focusTimeout !== null) {
+            clearTimeout(focusTimeout);
+        }
         selectedOption = filteredOptions[optionIndex];
         inputTextValue = selectedOption.value;
         hasFocus = false;
@@ -69,11 +74,11 @@
                     hasFocus = true;
                 }}
                 on:focusout={() => {
-                    setTimeout(() => {
+                    focusTimeout = setTimeout(() => {
                         hasFocus = false;
                         currentActiveIndex = null;
                         filteredOptions = options;
-                    }, 100);
+                    }, 200);
                 }}
                 bind:value={inputTextValue}
                 on:input={() => {

From fe14ed8e9ee2c0a36482f048912608b80dff09c8 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 15 Oct 2024 14:58:26 +0200
Subject: [PATCH 10/12] Keep the actively focussed element in view

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index 670f991ac..400aeeb82 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -24,12 +24,20 @@
         currentActiveIndex = null;
     }
 
+    function keepActiveInView() {
+        const element = document.getElementById(`option-${options[currentActiveIndex].key}`);
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
+
     function handleKeydown(event: KeyboardEvent) {
         if (hasFocus) {
             switch (event.key) {
                 case 'ArrowUp':
                     if (currentActiveIndex !== null && currentActiveIndex > 0) {
                         currentActiveIndex--;
+                        keepActiveInView();
                     } else if (currentActiveIndex === 0) {
                         currentActiveIndex = null;
                     }
@@ -38,6 +46,7 @@
                 case 'ArrowDown':
                     if (currentActiveIndex !== null && currentActiveIndex < options.length - 1) {
                         currentActiveIndex++;
+                        keepActiveInView();
                     } else if (currentActiveIndex === null) {
                         currentActiveIndex = 0;
                     }

From 595b748a662a9e7dd55ff541633c2648ad71be2e Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 15 Oct 2024 15:05:44 +0200
Subject: [PATCH 11/12] Use Icon component instead of hardcoded svg code

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index 400aeeb82..447a28e6c 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import type { ComboboxOption, ComboboxProps } from '$lib/combobox/index.js';
+    import { Icon } from '$lib';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
 
     export let placeholder: ComboboxProps['placeholder'] = '';
     export let disabled: ComboboxProps['disabled'] = false;
@@ -98,19 +100,7 @@
                     );
                 }}
             />
-            <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289L10 10.5858L13.2929 7.29289C13.6834 6.90237 14.3166 6.90237 14.7071 7.29289C15.0976 7.68342 15.0976 8.31658 14.7071 8.70711L10.7071 12.7071C10.3166 13.0976 9.68342 13.0976 9.29289 12.7071L5.29289 8.70711C4.90237 8.31658 4.90237 7.68342 5.29289 7.29289Z"
-                />
-            </svg>
+            <Icon icon={IconChevronDown} />
         </div>
     </label>
     <div class="combobox-menu" class:hidden={!hasFocus || filteredOptions.length === 0}>

From 289c2b6ef8ed72e29700439c3e65b98419b8c477 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 15 Oct 2024 15:09:09 +0200
Subject: [PATCH 12/12] Added restprops for required support

---
 v2/pink-sb/src/lib/combobox/Combobox.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/v2/pink-sb/src/lib/combobox/Combobox.svelte b/v2/pink-sb/src/lib/combobox/Combobox.svelte
index 447a28e6c..b9a2285d8 100644
--- a/v2/pink-sb/src/lib/combobox/Combobox.svelte
+++ b/v2/pink-sb/src/lib/combobox/Combobox.svelte
@@ -81,6 +81,7 @@
                 type="text"
                 {placeholder}
                 {disabled}
+                {...$$restProps}
                 on:focus={() => {
                     hasFocus = true;
                 }}