Update docs examples + Add Select component + Add Card, Base, Title classes

src/lib/components/Avatar.svelte

@@ -2,7 +2,8 @@
     import { onMount } from 'svelte'
     import { classCombine } from '$lib/utils/classCombine'
 
-    export let src: string | null
+    /** Optional, as a default icon will be substituted if no image was specified */
+    export let src: string | undefined
     export let size: 'xs' | 'sm' | 'md' | 'lg'
     export let circle = false
     export let floatUp = false
@@ -85,6 +86,7 @@
 
         &--float-up {
             margin-top: calc(var(--size) * (-2 / 3));
+            z-index: 1;
         }
 
         &--circle {

src/lib/components/Badge.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let label = ''
-    // Supports `green`, `yellow`, `red`, & `gray`
+    /** Supports `green`, `yellow`, `red`, & `gray` */
     export let color = 'gray'
 </script>
 

src/lib/components/Button.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
     import { classCombine } from '$lib/utils/classCombine'
 
-    // The element to be styled as a button
+    /** The element to be styled as a button */
     export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
-    export let href: string
+    export let href = ''
     if (href) as = 'a'
 
-    // Use `value` if the button is an `<input`>
-    export let value: string
+    /** Use `value` if the button is an `<input`> */
+    export let value = ''
 
     export let size: 'sm' | 'md' | 'lg' = 'md'
     export let color: 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent'
 
-    // Show notification badge in the upper right of button
+    /** Show notification badge in the upper right of button */
     export let badge = false
 
     export let disabled = false

src/lib/components/Chips.svelte

@@ -27,7 +27,6 @@
     <Button
       color={isSelected ? 'primary-light' : undefined}
       on:click={() => {
-        console.log(option)
         isSelected && !neverEmpty
           ? selected = null
           : selected = option

src/lib/components/Link.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-    export let href: string;
-</script>
-
-<a {href}><slot /></a>
-
-<style lang="postcss">
-    a {
-        color: var(--color-link);
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-</style>

src/lib/components/Select.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+    import IconChevronDown from 'virtual:icons/lucide/chevron-down'
+    import { debounce } from 'throttle-debounce'
+    import { clickOutside } from 'svelte-use-click-outside'
+    import { onMount } from 'svelte'
+
+    interface Option {
+        label: string;
+        value: string | number;
+    }
+
+    export let options: Option[] = []
+    export let value: string | number
+    export let selected: Option = options.find((option) => option.value === (value || ''))
+    export let color = ''
+    export let label = ''
+    export let icon = null
+
+    let open = false
+
+    $: if (selected) {
+        value = selected.value
+    }
+
+    const minWidth = options
+			.map(it => it.label || it.value)
+			.reduce((it, acc) => String(it).length > acc ? it : acc, '')
+			.length * 9
+
+    let shouldOpenUp = false
+    let element: HTMLElement
+
+    const checkShouldOpenUp = debounce(100, false, () => {
+        if (element) {
+            const bounding = element.getBoundingClientRect()
+
+            shouldOpenUp =
+                bounding.bottom + 32 * options.length + 16 >
+                (window.innerHeight || document.documentElement.clientHeight)
+        }
+    })
+
+    onMount(() => {
+        checkShouldOpenUp()
+        window.addEventListener('resize', checkShouldOpenUp)
+    })
+
+    function keydown(event: KeyboardEvent) {
+        if ((event.key === ' ' || event.key === 'Enter') && !open) {
+            open = true
+        } else if (event.key === 'ArrowUp') {
+            if (selected) {
+                const index = options.findIndex((option) => option.value === selected.value)
+                if (index > 0) {
+                    selected = options[index - 1]
+                }
+            }
+        } else if (event.key === 'ArrowDown') {
+            if (selected) {
+                const index = options.findIndex((option) => option.value === selected.value)
+                if (index < options.length - 1) {
+                    selected = options[index + 1]
+                }
+            }
+        } else if ((event.key === 'Escape' || event.key === 'Enter') && open) {
+            open = false
+        }
+    }
+</script>
+
+<div
+        class="select select--color-{color}"
+        class:is-open={open}
+        class:select--opens-up={shouldOpenUp}
+        use:clickOutside={() => {
+		open = false;
+	}}
+        bind:this={element}
+        tabindex="0"
+        on:keydown={keydown}
+>
+    <div
+            class="select__input"
+            on:click={() => {
+			open = !open;
+		}}
+    >
+        {#if icon}
+            <svelte:component this={icon}/>
+        {/if}
+        <span class="select__input__value" style:min-width="{minWidth}px">{label || selected?.label || value || 'Choose...'}</span>
+        {#if !icon}
+            <div class="select__input__arrow">
+                <slot name="expandIcon">
+                    <IconChevronDown/>
+                </slot>
+            </div>
+        {/if}
+    </div>
+    {#if open}
+        <ul class="select__options">
+            {#each options as option (option.value)}
+                <li
+                        on:click={() => {
+						selected = option;
+						open = false;
+					}}
+                        class:is-selected={selected?.value === option.value}
+                >
+                    {option.label || option.value}
+                </li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style lang="postcss">
+    .select {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        color: var(--color-button-text);
+        cursor: pointer;
+        border-radius: var(--rounded);
+        align-self: flex-start;
+
+        &__input {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.25rem 0.9rem;
+            grid-gap: 0.4rem;
+            background-color: var(--color-button-bg);
+            box-shadow: var(--shadow-inset-sm);
+            border-radius: var(--rounded);
+        }
+
+        &__options {
+            list-style-type: none;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            position: absolute;
+            top: 100%;
+            background-color: var(--color-button-bg);
+            border-radius: var(--rounded-bottom);
+            box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+            overflow: hidden;
+            border-top: 0.1rem solid var(--color-divider);
+            z-index: 5;
+
+            li {
+                padding: 0.25rem 1rem;
+
+                &:hover {
+                    background-color: var(--color-button-bg-hover);
+                }
+
+                &.is-selected {
+                    background-color: var(--color-brand-dark);
+                    color: var(--color-brand-contrast);
+                    cursor: default;
+                }
+            }
+        }
+
+        &.is-open {
+            z-index: 10;
+
+            .select__input {
+                border-radius: var(--rounded-top);
+                box-shadow: none;
+
+                &__arrow {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        &--color-raised {
+            > * {
+                background-color: var(--color-raised-bg);
+            }
+        }
+
+        &--opens-up {
+            .select__options {
+                bottom: 100%;
+                top: auto;
+                border-radius: var(--rounded-top);
+                box-shadow: none;
+                border-top: none;
+                border-bottom: 0.1rem solid var(--color-divider);
+            }
+
+            &.is-open .select__input {
+                border-radius: var(--rounded-bottom);
+            }
+        }
+    }
+</style>