lithesome 0.23.6 → 0.24.0

package/README.md

@@ -9,10 +9,18 @@ An unstyled component library for Svelte 5.
 
 ## Install
 
+```bash
+npm i -D lithesome
+```
+
 ```bash
 pnpm i -D lithesome
 ```
 
+```bash
+bun add -D lithesome
+```
+
 ## Usage
 
 ```svelte
@@ -21,9 +29,7 @@ pnpm i -D lithesome
 </script>
 
 <Menu>
-	<MenuTrigger>
-		<button>Auth</button>
-	</MenuTrigger>
+	<MenuTrigger>Auth</MenuTrigger>
 	<MenuContent>
 		<MenuItem>My Profile</MenuItem>
 		<MenuItem>Account Settings</MenuItem>

package/dist/components/select/Select.svelte

@@ -14,8 +14,8 @@
 		disabled = $bindable(false),
 		portalTarget = 'body',
 		floatingConfig = {},
-		value = $bindable(),
-		multiple = false,
+		value = $bindable(null!),
+		unselectable = false,
 		onValueChanged
 	}: SelectProps = $props();
 
@@ -40,7 +40,7 @@
 		),
 		portalTarget: stateValue(() => portalTarget),
 		floatingConfig: stateValue(() => floatingConfig),
-		multiple: stateValue(() => multiple)
+		unselectable: stateValue(() => unselectable)
 	});
 </script>
 

package/dist/components/select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SelectProps } from '../../types/index.js';
-declare const Select: import("svelte").Component<SelectProps<any>, {}, "disabled" | "visible" | "value">;
+declare const Select: import("svelte").Component<SelectProps, {}, "disabled" | "visible" | "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/select/SelectOption.svelte.d.ts

@@ -7,7 +7,7 @@ declare const SelectOption: import("svelte").Component<SelectOptionProps<{
     role: string;
     tabindex: number;
     'aria-selected': boolean;
-    'data-value': import("../../internals/index.js").JsonValue;
+    'data-value': string;
     'data-label': string;
 }> & Record<string, any>, {}, "label" | "disabled" | "ref" | "value">;
 type SelectOption = ReturnType<typeof SelectOption>;

package/dist/components/select/SelectValue.svelte

@@ -9,9 +9,11 @@
 	let {
 		id = parseId(uid),
 		ref = $bindable(),
-		placeholder = $bindable(''),
+		placeholder = $bindable('Select an option...'),
+		children,
+		custom,
 		...props
-	}: SelectValueProps & Record<string, any> = $props();
+	}: SelectValueProps<typeof ctx.props> & Record<string, any> = $props();
 
 	let ctx = useSelectValue({
 		id: stateValue(() => id),
@@ -20,6 +22,6 @@
 	});
 </script>
 
-<Element bind:ref {ctx} {...props} as="span">
-	{ctx.label}
+<Element bind:ref {custom} {ctx} {...props} as="span">
+	{ctx.state.placeholderVisible ? placeholder : ctx.state.selectedLabels.join(', ')}
 </Element>

package/dist/components/select/SelectValue.svelte.d.ts

@@ -1,5 +1,8 @@
 import type { SelectValueProps } from '../../types/index.js';
-type $$ComponentProps = SelectValueProps & Record<string, any>;
-declare const SelectValue: import("svelte").Component<$$ComponentProps, {}, "ref" | "placeholder">;
+declare const SelectValue: import("svelte").Component<SelectValueProps<{
+    id: string;
+    "data-select-value": string;
+    'data-placeholder': true | undefined;
+}> & Record<string, any>, {}, "ref" | "placeholder">;
 type SelectValue = ReturnType<typeof SelectValue>;
 export default SelectValue;

package/dist/components/select/state.svelte.d.ts

@@ -2,19 +2,17 @@ import { SvelteMap } from 'svelte/reactivity';
 import { Floating } from '../../internals/index.js';
 import type { CalcIndexAction, GetInternalProps, JsonValue } from '../../internals/index.js';
 import type { SelectArrowProps, SelectArrowState, SelectContentProps, SelectContentState, SelectOptionProps, SelectOptionState, SelectProps, SelectState, SelectTriggerProps, SelectTriggerState, SelectValueProps, SelectValueState } from '../../types/index.js';
-interface InternalSelectOption {
-    value: JsonValue;
-    label: string;
-}
 type RootProps = GetInternalProps<SelectProps>;
 declare class SelectRoot extends Floating {
     $$: RootProps;
     hoveredIndex: number;
-    options: InternalSelectOption[];
-    selectedOptions: InternalSelectOption[];
+    options: HTMLElement[];
     sharedIds: SvelteMap<"content" | "trigger", string>;
     mounted: boolean;
-    HoveredOption: InternalSelectOption | undefined;
+    searchable: boolean;
+    serachTerm: string;
+    HoveredOption: HTMLElement | undefined;
+    SelectedOptions: HTMLElement[];
     constructor(props: RootProps);
     /**
      * Toggle the visible state of the content
@@ -30,28 +28,20 @@ declare class SelectRoot extends Floating {
      */
     close: () => void;
     /**
-     * Tells the components that checks have been completed, render as normal.
-     */
-    doneMounting: () => void;
-    /**
-     * Get the element node of the current hovered option.
+     * Get all non-disabled options from the content.
      */
-    getHoveredElement: () => HTMLElement | undefined;
+    getAvilableOptions: () => Promise<void>;
     /**
      * Get any element by its value inside the contents element.
      * @param value The value to search for.
      */
     getElementByValue: (value: JsonValue) => HTMLElement | null;
-    /**
-     * Get either the hovered or first selected option id.
-     */
-    getHoveredOrFirstSelectedId: () => Promise<string | undefined>;
     /**
      * Append the option to the parent array, used for keeping track of options.
      * @param value The value of the option. This must be unique.
      * @param label The label of the option. If no label is found, the text content of the node is used.
      */
-    registerOption: (value: JsonValue, label: string) => void;
+    registerOption: (option: HTMLElement) => void;
     /**
      * Move the focus to another element based on the action used.
      * @param action The direction in which to travel.
@@ -61,17 +51,13 @@ declare class SelectRoot extends Floating {
      * Sets the hovered option.
      * @param value The unique value of the option.
      */
-    setHovered: (value: JsonValue) => void;
+    setHovered: (value: string) => void;
     /**
      * Sets the selected option.
      *
      * Handles if singular or mulitple values.
      */
     setSelected: () => void;
-    /**
-     * Sets the trigger label to the selected value, only if it's found in the options array.
-     */
-    setInitialSelected: () => Promise<void>;
     state: SelectState;
 }
 type TriggerProps = GetInternalProps<SelectTriggerProps>;
@@ -140,7 +126,7 @@ declare class SelectOption {
         role: string;
         tabindex: number;
         'aria-selected': boolean;
-        'data-value': JsonValue;
+        'data-value': string;
         'data-label': string;
     };
     state: SelectOptionState;
@@ -151,7 +137,6 @@ declare class SelectValue {
     _root: SelectRoot;
     PlaceholderVisible: boolean;
     constructor(root: SelectRoot, props: ValueProps);
-    label: string;
     props: {
         id: string;
         "data-select-value": string;

package/dist/components/select/state.svelte.js

@@ -1,30 +1,50 @@
-import { tick } from 'svelte';
+import { onMount, tick } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { outside } from '../../attachments/outside.js';
 import { portal } from '../../attachments/portal.js';
-import { addEvents, attach, buildContext, calculateIndex, createAttributes, floating, Floating, KEYS, visuallyHidden } from '../../internals/index.js';
-const { attrs, selectors } = createAttributes('select', ['root', 'trigger', 'content', 'arrow', 'option', 'value']);
+import { addEvents, attach, buildContext, calculateIndex, createAttributes, floating, Floating, KEYS, removeDisabledElements, visuallyHidden } from '../../internals/index.js';
+const { attrs, selectors } = createAttributes('select', [
+    'root',
+    'trigger',
+    'content',
+    'arrow',
+    'option',
+    'value',
+    'search'
+]);
 class SelectRoot extends Floating {
     $$;
     hoveredIndex = $state(-1);
     options = $state([]);
-    selectedOptions = $state([]);
     sharedIds = new SvelteMap();
     mounted = $state(false);
+    searchable = $state(false);
+    serachTerm = $state('');
     HoveredOption = $derived.by(() => this.options[this.hoveredIndex] || undefined);
+    SelectedOptions = $derived(this.options.filter((opt) => {
+        if (!opt.dataset.value)
+            return false;
+        return Array.isArray(this.$$.value.val)
+            ? this.$$.value.val.includes(opt.dataset.value)
+            : this.$$.value.val === opt.dataset.value;
+    }));
     constructor(props) {
         super();
         this.$$ = props;
-        if (this.$$.value.val)
-            this.setInitialSelected();
-        else
-            this.doneMounting();
+        onMount(async () => {
+            await tick();
+            this.mounted = true;
+            this.$$.visible.val = false;
+        });
     }
     /**
      * Toggle the visible state of the content
      */
     toggle = () => {
-        this.$$.visible.val = !this.$$.visible.val;
+        if (this.$$.visible.val)
+            this.close();
+        else
+            this.open();
     };
     /**
      * Set the visible state of the content to true
@@ -38,27 +58,15 @@ class SelectRoot extends Floating {
      */
     close = () => {
         this.$$.visible.val = false;
-        this.options = [];
         this.hoveredIndex = -1;
     };
     /**
-     * Tells the components that checks have been completed, render as normal.
-     */
-    doneMounting = () => {
-        this.mounted = true;
-        this.$$.visible.val = false;
-    };
-    /**
-     * Get the element node of the current hovered option.
+     * Get all non-disabled options from the content.
      */
-    getHoveredElement = () => {
-        const hovered = this.options[this.hoveredIndex];
-        if (hovered) {
-            const option = document.querySelector(`#${this.$$.id.val} ${selectors.option}[data-value=${hovered.value}]`);
-            if (option)
-                return option;
-        }
-        return undefined;
+    getAvilableOptions = async () => {
+        const contentElement = document.querySelector(`#${this.sharedIds.get('content')}`);
+        if (contentElement)
+            this.options = removeDisabledElements(contentElement.querySelectorAll(selectors.option));
     };
     /**
      * Get any element by its value inside the contents element.
@@ -67,28 +75,15 @@ class SelectRoot extends Floating {
     getElementByValue = (value) => {
         return document.querySelector(`#${this.sharedIds.get('content')} ${selectors.option}[data-value="${value}"]`);
     };
-    /**
-     * Get either the hovered or first selected option id.
-     */
-    getHoveredOrFirstSelectedId = async () => {
-        await tick();
-        const selectedOption = this.HoveredOption || this.selectedOptions[0];
-        if (selectedOption) {
-            const option = this.getElementByValue(selectedOption.value);
-            if (option)
-                return option.id;
-        }
-        return undefined;
-    };
     /**
      * Append the option to the parent array, used for keeping track of options.
      * @param value The value of the option. This must be unique.
      * @param label The label of the option. If no label is found, the text content of the node is used.
      */
-    registerOption = (value, label) => {
-        const find = this.options.find((option) => option.value === value);
+    registerOption = (option) => {
+        const find = this.options.find((option) => option.dataset.value === option.dataset.value);
         if (!find)
-            this.options.push({ value, label });
+            this.options.push(option);
     };
     /**
      * Move the focus to another element based on the action used.
@@ -96,16 +91,15 @@ class SelectRoot extends Floating {
      */
     navigate = (action) => {
         this.hoveredIndex = calculateIndex(action, this.options, this.hoveredIndex);
-        const element = this.getHoveredElement();
-        if (element)
-            element.scrollIntoView({ block: 'nearest' });
+        if (this.HoveredOption)
+            this.HoveredOption.scrollIntoView({ block: 'nearest' });
     };
     /**
      * Sets the hovered option.
      * @param value The unique value of the option.
      */
     setHovered = (value) => {
-        this.hoveredIndex = this.options.findIndex((el) => el.value === value);
+        this.hoveredIndex = this.options.findIndex((el) => el.dataset.value === value);
     };
     /**
      * Sets the selected option.
@@ -113,38 +107,22 @@ class SelectRoot extends Floating {
      * Handles if singular or mulitple values.
      */
     setSelected = () => {
-        if (!this.HoveredOption)
+        if (!this.HoveredOption || !this.HoveredOption.dataset.value)
             return;
-        if (this.$$.multiple.val) {
-            if (this.selectedOptions.find((el) => el.value === this.HoveredOption?.value)) {
-                this.selectedOptions = this.selectedOptions.filter((el) => el.value !== this.HoveredOption?.value);
-            }
-            else {
-                this.selectedOptions.push(this.HoveredOption);
-            }
+        const newVal = this.HoveredOption.dataset.value;
+        if (Array.isArray(this.$$.value.val)) {
+            if (this.$$.value.val.includes(newVal))
+                this.$$.value.val = this.$$.value.val.filter((el) => el !== newVal);
+            else
+                this.$$.value.val.push(newVal);
         }
         else {
-            this.selectedOptions[0] = this.HoveredOption;
+            if (this.$$.unselectable.val && this.$$.value.val === newVal)
+                this.$$.value.val = '';
+            else
+                this.$$.value.val = newVal;
+            this.close();
         }
-        if (!this.$$.multiple.val)
-            this.$$.visible.val = false;
-        this.$$.value.val = this.$$.multiple.val
-            ? this.selectedOptions.map((el) => el.value)
-            : this.selectedOptions[0].value;
-    };
-    /**
-     * Sets the trigger label to the selected value, only if it's found in the options array.
-     */
-    setInitialSelected = async () => {
-        await tick();
-        const value = this.$$.value.val;
-        this.selectedOptions = this.options.filter((el) => {
-            if (!Array.isArray(value) && el.value === value)
-                return el;
-            else if (Array.isArray(value) && value.includes(el.value))
-                return el;
-        });
-        this.doneMounting();
     };
     state = $derived.by(() => ({
         visible: this.$$.visible.val
@@ -168,18 +146,17 @@ class SelectTrigger {
         ...attach((node) => {
             this._root.trigger = node;
             // Such a hacky way, but it works :\
-            if (this._root.HoveredOption || this._root.selectedOptions[0]) {
-                tick().then(async () => {
+            if (this._root.HoveredOption || this._root.SelectedOptions[0]) {
+                tick().then(() => {
                     if (this._root.$$.visible.val) {
-                        const id = await this._root.getHoveredOrFirstSelectedId();
+                        const { id } = this._root.HoveredOption || this._root.SelectedOptions[0];
                         if (id)
                             node.setAttribute('aria-activedescendant', id);
                     }
-                    else {
-                        node.removeAttribute('aria-activedescendant');
-                    }
                 });
             }
+            if (!this._root.$$.visible.val)
+                node.removeAttribute('aria-activedescendant');
             return addEvents(node, {
                 click: () => {
                     if (this._root.$$.disabled.val)
@@ -203,8 +180,8 @@ class SelectTrigger {
                     if (key === KEYS.enter) {
                         e.preventDefault();
                         if (this._root.HoveredOption && this._root.$$.visible.val) {
-                            this._root.getElementByValue(this._root.HoveredOption.value)?.click();
-                            if (!this._root.$$.multiple.val)
+                            this._root.HoveredOption?.click();
+                            if (!Array.isArray(this._root.$$.value.val))
                                 this._root.close();
                         }
                         else {
@@ -228,6 +205,20 @@ class SelectContent {
         this._root = root;
         this.$$ = props;
         this._root.sharedIds.set('content', this.$$.id.val);
+        // Get element references but wait for label to be populated.
+        $effect(() => {
+            if (this._root.$$.visible.val) {
+                tick().then(() => {
+                    this._root.getAvilableOptions();
+                });
+            }
+        });
+        // Set first selected value as highlighted option
+        $effect(() => {
+            if (this._root.$$.visible.val && this._root.SelectedOptions.length && !this._root.HoveredOption) {
+                this._root.hoveredIndex = this._root.options.findIndex((el) => el.dataset.selected === 'true');
+            }
+        });
     }
     props = $derived.by(() => ({
         id: this.$$.id.val,
@@ -273,17 +264,11 @@ class SelectArrow {
 class SelectOption {
     $$;
     _root;
-    Hovered = $derived.by(() => this._root.HoveredOption?.value === this.$$.value.val);
-    Selected = $derived.by(() => !!this._root.selectedOptions.find((el) => el.value === this.$$.value.val));
+    Hovered = $derived.by(() => this._root.HoveredOption?.dataset.value === this.$$.value.val);
+    Selected = $derived.by(() => !!this._root.SelectedOptions.find((el) => el.dataset.value === this.$$.value.val));
     constructor(root, props) {
         this._root = root;
         this.$$ = props;
-        $effect(() => {
-            if (this.$$.disabled.val)
-                return;
-            const label = this.$$.label.val || this.$$.ref.val.textContent.trim();
-            this._root.registerOption(this.$$.value.val, label);
-        });
     }
     props = $derived.by(() => ({
         id: this.$$.id.val,
@@ -294,11 +279,11 @@ class SelectOption {
         tabindex: 0,
         'aria-selected': this.Selected,
         'data-value': this.$$.value.val,
-        'data-label': this.$$.label.val,
+        'data-label': this.$$.ref.val && !this.$$.label.val ? this.$$.ref.val.textContent.trim() : this.$$.label.val,
         ...attach((node) => {
             // Set the hovered index to the active item, if that item is "selected".
             if (this._root.$$.value.val === this.$$.value.val) {
-                this._root.hoveredIndex = this._root.options.findIndex((el) => el.value === this.$$.value.val);
+                this._root.hoveredIndex = this._root.options.findIndex((el) => el.dataset.value === this.$$.value.val);
             }
             return addEvents(node, {
                 click: () => {
@@ -322,12 +307,11 @@ class SelectOption {
 class SelectValue {
     $$;
     _root;
-    PlaceholderVisible = $derived.by(() => this._root.selectedOptions.length === 0);
+    PlaceholderVisible = $derived.by(() => !this._root.$$.value.val.length);
     constructor(root, props) {
         this._root = root;
         this.$$ = props;
     }
-    label = $derived.by(() => this.PlaceholderVisible ? this.$$.placeholder.val : this._root.selectedOptions.map((el) => el.label).join(','));
     props = $derived.by(() => ({
         id: this.$$.id.val,
         [attrs.value]: '',
@@ -335,7 +319,8 @@ class SelectValue {
     }));
     state = $derived.by(() => ({
         visible: this._root.$$.visible.val,
-        placeholderVisible: this.PlaceholderVisible
+        placeholderVisible: this.PlaceholderVisible,
+        selectedLabels: this._root.SelectedOptions.map((el) => el.dataset.label)
     }));
 }
 //

package/dist/types/components/select.d.ts

@@ -1,20 +1,22 @@
-import type { FloatingContent, JsonValue, Props, PropsNoChildren, PropsNoRender } from '../../internals/index.js';
-export interface SelectProps<V extends JsonValue = any> extends PropsNoRender<SelectState>, FloatingContent {
+import type { FloatingContent, Props, PropsNoRender } from '../../internals/index.js';
+export interface SelectProps extends PropsNoRender<SelectState>, FloatingContent {
     /**
      * The currently selected option(s).
      *
      * ### `$bindable`
      */
-    value?: V;
+    value?: string | string[];
     /**
-     * Allows multiple options to be selected at once.
+     * Allows a non-array value to be unselected.
+     *
+     * @default false
      */
-    multiple?: boolean;
+    unselectable?: boolean;
     /**
      * Fires whenever the `value` prop changes.
      * @param value The new value
      */
-    onValueChanged?: (value: V) => void;
+    onValueChanged?: (value: string | string[]) => void;
 }
 export interface SelectState {
     /**
@@ -50,7 +52,7 @@ export interface SelectOptionProps<P = any> extends Props<HTMLButtonElement, P,
     /**
      * The value of the option.
      */
-    value: JsonValue;
+    value: string;
     /**
      * Disables the option, skipping mouse/keyboard navigation and stopping events from firing.
      *
@@ -74,7 +76,7 @@ export interface SelectOptionState {
      */
     selected: boolean;
 }
-export interface SelectValueProps extends PropsNoChildren<HTMLSpanElement, SelectValueState> {
+export interface SelectValueProps<P = any> extends Props<HTMLSpanElement, P, SelectValueState> {
     /**
      * The value displayed when no option(s) is selected.
      */
@@ -89,4 +91,8 @@ export interface SelectValueState {
      * True if no options are selected.
      */
     placeholderVisible: boolean;
+    /**
+     * The currently selected options.
+     */
+    selectedLabels: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lithesome",
-	"version": "0.23.6",
+	"version": "0.24.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "bun --bun vite build && npm run prepack",