noph-ui 0.30.3 → 0.30.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Noph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/autocomplete/AutoComplete.svelte

@@ -2,8 +2,8 @@
 	import Item from '../list/Item.svelte'
 	import Menu from '../menu/Menu.svelte'
 	import VirtualList from '../select/VirtualList.svelte'
-	import type { AutoCompleteOption, AutoCompleteProps } from './types.ts'
 	import TextField from '../text-field/TextField.svelte'
+	import type { AutoCompleteOption, AutoCompleteProps } from './types.ts'
 
 	let {
 		options = [],
@@ -38,7 +38,7 @@
 	let clientWidth = $state(0)
 	let menuElement = $state<HTMLDivElement>()
 	let menuOpen = $state(false)
-	let finalPopulated = $state(populated)
+	let finalPopulated = $derived(populated)
 	let activeIndex = $state(NO_INDEX)
 
 	const setActive = (index: number) => {

package/dist/button/Button.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 	import type { ButtonProps } from './types.ts'
-	import CircularProgress from '../progress/CircularProgress.svelte'
 
 	let {
 		variant = 'outlined',

package/dist/button/IconButton.svelte

@@ -2,8 +2,8 @@
 	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import type { IconButtonProps } from './types.ts'
 	import type { HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
+	import type { IconButtonProps } from './types.ts'
 
 	let {
 		variant = 'text',

package/dist/list/Item.svelte

@@ -19,7 +19,7 @@
 	}: ItemProps = $props()
 
 	let focused = $derived(softFocus)
-	let visible = $state(!lazy)
+	let visible = $derived(!lazy)
 	let element: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement | undefined = $state()
 	let observer: IntersectionObserver | undefined
 	onMount(() => {

package/dist/select/NativeSelect.svelte

@@ -27,7 +27,7 @@
 		...attributes
 	}: SelectProps = $props()
 	const uid = $props.id()
-	const selectId = id ?? `select-${uid}`
+	const selectId = $derived(id ?? `select-${uid}`)
 
 	let animateLabel = $state(false)
 	let errorText = $derived(issues?.map((issue) => issue.message).join(', '))

package/dist/select/Select.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import Menu from '../menu/Menu.svelte'
-	import type { SelectOption, SelectProps } from './types.ts'
 	import Item from '../list/Item.svelte'
-	import { tick } from 'svelte'
+	import Menu from '../menu/Menu.svelte'
 	import Check from './Check.svelte'
 	import VirtualList from './VirtualList.svelte'
+	import { tick } from 'svelte'
+	import type { SelectOption, SelectProps } from './types.ts'
 
 	let {
 		options = [],
@@ -34,13 +34,15 @@
 	}: SelectProps = $props()
 
 	const uid = $props.id()
-	if (value === undefined) {
-		if (multiple) {
-			value = options.filter((option) => option.selected).map((option) => option.value)
-		} else {
-			value = options.find((option) => option.selected)?.value
+	$effect(() => {
+		if (value === undefined) {
+			if (multiple) {
+				value = options.filter((option) => option.selected).map((option) => option.value)
+			} else {
+				value = options.find((option) => option.selected)?.value
+			}
 		}
-	}
+	})
 
 	let valueArray = $derived<unknown[]>(
 		Array.isArray(value) ? value : value === undefined || value === null ? [] : [value],

package/dist/select/VirtualList.svelte

@@ -34,7 +34,7 @@
 
 	let top = $state(0)
 	let bottom = $state(0)
-	let average_height: number = $state(itemHeight || 0)
+	let average_height: number = $derived(itemHeight || 0)
 
 	$effect(() => {
 		if (mounted) {

package/dist/tabs/Tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
-	import type { TabsContext, TabsProps } from './types.ts'
 	import { setTabsContext } from './context.js'
+	import type { TabsContext, TabsProps } from './types.ts'
 
 	let {
 		children,
@@ -12,6 +12,8 @@
 	}: TabsProps = $props()
 
 	let uid = $props.id()
+
+	// svelte-ignore state_referenced_locally
 	let tabsContext = $state<TabsContext>({
 		value,
 		variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.30.3",
+  "version": "0.30.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -56,25 +56,25 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.48.4",
-    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.13.0",
+    "eslint-plugin-svelte": "^3.13.1",
     "globals": "^16.5.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
-    "svelte": "^5.43.3",
-    "svelte-check": "^4.3.3",
+    "svelte": "^5.45.5",
+    "svelte-check": "^4.3.4",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.1.12",
-    "vitest": "^4.0.6"
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vitest": "^4.0.15"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",