lithesome 0.23.6 → 0.23.7

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/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/state.svelte.d.ts

@@ -2,19 +2,15 @@ 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[];
+    selectedOptions: HTMLElement[];
     sharedIds: SvelteMap<"content" | "trigger", string>;
     mounted: boolean;
-    HoveredOption: InternalSelectOption | undefined;
+    HoveredOption: HTMLElement | undefined;
     constructor(props: RootProps);
     /**
      * Toggle the visible state of the content
@@ -34,9 +30,9 @@ declare class SelectRoot extends Floating {
      */
     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.
@@ -45,13 +41,13 @@ declare class SelectRoot extends Floating {
     /**
      * Get either the hovered or first selected option id.
      */
-    getHoveredOrFirstSelectedId: () => Promise<string | undefined>;
+    getHoveredOrFirstSelectedId: () => Promise<string | null>;
     /**
      * 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,7 +57,7 @@ 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.
      *
@@ -131,6 +127,7 @@ declare class SelectOption {
     _root: SelectRoot;
     Hovered: boolean;
     Selected: boolean;
+    Label: string;
     constructor(root: SelectRoot, props: OptionProps);
     props: {
         id: string;
@@ -140,7 +137,7 @@ declare class SelectOption {
         role: string;
         tabindex: number;
         'aria-selected': boolean;
-        'data-value': JsonValue;
+        'data-value': string;
         'data-label': string;
     };
     state: SelectOptionState;

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

@@ -1,8 +1,8 @@
-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';
+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']);
 class SelectRoot extends Floating {
     $$;
@@ -49,16 +49,12 @@ class SelectRoot extends Floating {
         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.
@@ -73,22 +69,17 @@ class SelectRoot extends Floating {
     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;
+        return selectedOption.id || null;
     };
     /**
      * 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 +87,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.
@@ -116,8 +106,8 @@ class SelectRoot extends Floating {
         if (!this.HoveredOption)
             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);
+            if (this.selectedOptions.find((el) => el.dataset.value === this.HoveredOption?.dataset.value)) {
+                this.selectedOptions = this.selectedOptions.filter((el) => el.dataset.value !== this.HoveredOption?.dataset.value);
             }
             else {
                 this.selectedOptions.push(this.HoveredOption);
@@ -129,8 +119,8 @@ class SelectRoot extends Floating {
         if (!this.$$.multiple.val)
             this.$$.visible.val = false;
         this.$$.value.val = this.$$.multiple.val
-            ? this.selectedOptions.map((el) => el.value)
-            : this.selectedOptions[0].value;
+            ? this.selectedOptions.map((el) => el.dataset.value)
+            : this.selectedOptions[0].dataset.value;
     };
     /**
      * Sets the trigger label to the selected value, only if it's found in the options array.
@@ -139,9 +129,9 @@ class SelectRoot extends Floating {
         await tick();
         const value = this.$$.value.val;
         this.selectedOptions = this.options.filter((el) => {
-            if (!Array.isArray(value) && el.value === value)
+            if (!Array.isArray(value) && el.dataset.value === value)
                 return el;
-            else if (Array.isArray(value) && value.includes(el.value))
+            else if (Array.isArray(value) && value.includes(el.dataset.value))
                 return el;
         });
         this.doneMounting();
@@ -203,7 +193,7 @@ class SelectTrigger {
                     if (key === KEYS.enter) {
                         e.preventDefault();
                         if (this._root.HoveredOption && this._root.$$.visible.val) {
-                            this._root.getElementByValue(this._root.HoveredOption.value)?.click();
+                            this._root.HoveredOption?.click();
                             if (!this._root.$$.multiple.val)
                                 this._root.close();
                         }
@@ -228,6 +218,17 @@ class SelectContent {
         this._root = root;
         this.$$ = props;
         this._root.sharedIds.set('content', this.$$.id.val);
+        $effect(() => {
+            // Get element references
+            if (this._root.$$.visible.val)
+                this._root.getAvilableOptions();
+        });
+        $effect(() => {
+            // Set first selected value as highlighted option
+            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 +274,12 @@ 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));
+    Label = $derived.by(() => this.$$.label.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 +290,14 @@ class SelectOption {
         tabindex: 0,
         'aria-selected': this.Selected,
         'data-value': this.$$.value.val,
-        'data-label': this.$$.label.val,
+        'data-label': this.Label,
         ...attach((node) => {
+            if (!this.$$.label.val && this.$$.ref.val) {
+                this.Label = this.$$.ref.val.textContent.trim();
+            }
             // 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: () => {
@@ -327,7 +326,9 @@ class SelectValue {
         this._root = root;
         this.$$ = props;
     }
-    label = $derived.by(() => this.PlaceholderVisible ? this.$$.placeholder.val : this._root.selectedOptions.map((el) => el.label).join(','));
+    label = $derived.by(() => this.PlaceholderVisible
+        ? this.$$.placeholder.val
+        : this._root.selectedOptions.map((el) => el.dataset.label).join(','));
     props = $derived.by(() => ({
         id: this.$$.id.val,
         [attrs.value]: '',

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

@@ -1,5 +1,5 @@
-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, PropsNoChildren, PropsNoRender } from '../../internals/index.js';
+export interface SelectProps<V extends string | string[] = any> extends PropsNoRender<SelectState>, FloatingContent {
     /**
      * The currently selected option(s).
      *
@@ -50,7 +50,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.
      *

package/package.json

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