lithesome 0.23.5 → 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/internals/utils.svelte.js

@@ -1,6 +1,5 @@
 import { on } from 'svelte/events';
 import { isBrowser, isObject } from './is.js';
-import { log } from './log.js';
 /**
  * Calculates the index position of the action given.
  * @param action Which direction to navigate the index.

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,75 +1,75 @@
-{
-	"name": "lithesome",
-	"version": "0.23.5",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "bun --bun vite build && npm run prepack",
-		"preview": "bun --bun vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check ."
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./types": {
-			"types": "./dist/types/index.d.ts"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@lucide/svelte": "^0.541.0",
-		"@prgm/sveltekit-progress-bar": "^3.0.2",
-		"@sveltejs/adapter-vercel": "^5.6.3",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.0.0",
-		"@types/node": "^24.3.0",
-		"clsx": "^2.1.1",
-		"gray-matter": "^4.0.3",
-		"mdsvex": "^0.12.6",
-		"mode-watcher": "^1.1.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-imports": "^4.3.3",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.3.2",
-		"rehype-external-links": "^3.0.0",
-		"rehype-slug": "^6.0.0",
-		"shiki": "^3.11.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwind-merge": "^3.3.1",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"unist-util-visit": "^5.0.0",
-		"vite": "^7.0.4"
-	},
-	"keywords": [
-		"svelte"
-	],
-	"dependencies": {
-		"@floating-ui/dom": "^1.7.4",
-		"focus-trap": "^7.6.5"
-	}
-}
+{
+	"name": "lithesome",
+	"version": "0.23.7",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "bun --bun vite build && npm run prepack",
+		"preview": "bun --bun vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./types": {
+			"types": "./dist/types/index.d.ts"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.53.12"
+	},
+	"devDependencies": {
+		"@lucide/svelte": "^0.577.0",
+		"@prgm/sveltekit-progress-bar": "^3.0.2",
+		"@sveltejs/adapter-vercel": "^6.3.3",
+		"@sveltejs/kit": "^2.55.0",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.2.1",
+		"@types/node": "^25.5.0",
+		"clsx": "^2.1.1",
+		"gray-matter": "^4.0.3",
+		"mdsvex": "^0.12.7",
+		"mode-watcher": "^1.1.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-imports": "^4.3.3",
+		"prettier-plugin-svelte": "^3.5.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.18",
+		"rehype-external-links": "^3.0.0",
+		"rehype-slug": "^6.0.0",
+		"shiki": "^4.0.2",
+		"svelte": "^5.53.12",
+		"svelte-check": "^4.4.5",
+		"tailwind-merge": "^3.5.0",
+		"tailwindcss": "^4.2.1",
+		"typescript": "^5.9.3",
+		"unist-util-visit": "^5.1.0",
+		"vite": "^8.0.0"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"@floating-ui/dom": "^1.7.6",
+		"focus-trap": "^8.0.0"
+	}
+}