noph-ui 0.18.4 → 0.18.6

package/dist/chip/ChipSet.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
-	import type { ChipSetContext, ChipSetProps } from './types.ts'
+	import type { ChipSetProps } from './types.ts'
 
-	let { children, ...attributes }: ChipSetProps = $props()
-	let chipSet: ChipSetContext = $state({
-		chips: [],
-	})
-	setContext('chipSet', chipSet)
+	let { children, chipsCount, ...attributes }: ChipSetProps = $props()
 </script>
 
 {#if children}
 	<div
-		class={['np-chip-set', chipSet.chips.length > 0 && 'np-chip-set-has-chips', attributes.class]}
+		class={['np-chip-set', (chipsCount ?? 0) > 0 && 'np-chip-set-has-chips', attributes.class]}
 		style={attributes.style}
 		role="toolbar"
 	>

package/dist/chip/FilterChip.svelte

@@ -3,8 +3,7 @@
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { getContext, onMount } from 'svelte'
-	import type { ChipSetContext, FilterChipProps } from './types.ts'
+	import type { FilterChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),
@@ -24,17 +23,6 @@
 	}: FilterChipProps = $props()
 
 	let chipLabel: HTMLLabelElement | undefined = $state()
-	let chipSet: ChipSetContext = getContext('chipSet')
-
-	onMount(() => {
-		chipSet.chips.push({ label: label, name: name, value: value })
-		return () => {
-			const index = chipSet.chips.findIndex((chip) => chip.value === value)
-			if (index !== -1) {
-				chipSet.chips.splice(index, 1)
-			}
-		}
-	})
 
 	$effect(() => {
 		if (group && value) {

package/dist/chip/InputChip.svelte

@@ -2,8 +2,8 @@
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { getContext, onMount } from 'svelte'
-	import type { ChipSetContext, InputChipProps } from './types.ts'
+	import { onMount } from 'svelte'
+	import type { InputChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),
@@ -20,7 +20,6 @@
 
 	let chipLabel: HTMLDivElement | undefined = $state()
 	let visible = $state(false)
-	let chipSet: ChipSetContext = getContext('chipSet')
 
 	onMount(() => {
 		const observer = new IntersectionObserver((entries) => {
@@ -35,14 +34,9 @@
 		if (element) {
 			observer.observe(element)
 		}
-		chipSet.chips.push({ label: label, name: name, value: value })
 
 		return () => {
 			observer.disconnect()
-			const index = chipSet.chips.findIndex((chip) => chip.value === value)
-			if (index !== -1) {
-				chipSet.chips.splice(index, 1)
-			}
 		}
 	})
 </script>

package/dist/chip/types.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-export type ChipSetProps = HTMLAttributes<HTMLDivElement>;
+export interface ChipSetProps extends HTMLAttributes<HTMLDivElement> {
+    chipsCount?: number;
+}
 interface AssistChipButtonProps extends HTMLButtonAttributes {
     elevated?: boolean;
     disabled?: boolean;

package/dist/menu/Menu.svelte

@@ -2,13 +2,13 @@
 	import type { MenuProps } from './types.ts'
 
 	let {
-		anchor,
 		children,
 		element = $bindable(),
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
 		style,
 		popover = 'auto',
+		anchor,
 		...attributes
 	}: MenuProps = $props()
 
@@ -24,8 +24,10 @@
 	hidePopover = () => {
 		element?.hidePopover()
 	}
-
 	const refreshValues = () => {
+		if ('anchorName' in document.documentElement.style) {
+			return
+		}
 		if (element && anchor && menuOpen) {
 			const anchorRect = anchor.getBoundingClientRect()
 			let maxHeight: number
@@ -83,28 +85,11 @@
 	}
 
 	$effect(() => {
-		if (anchor && element) {
-			if (style) {
-				const styleEntries = style
-					.split(';')
-					.filter(Boolean)
-					.map((entry) => entry.split(':').map((str) => str.trim()))
-				styleEntries.forEach(([key, value]) => {
-					element?.style.setProperty(key, value)
-				})
-			}
+		if (element && !('anchorName' in document.documentElement.style)) {
 			getScrollableParent(element).addEventListener('scroll', onScroll, { passive: true })
-			if (
-				'anchorName' in document.documentElement.style &&
-				!anchor.style.getPropertyValue('anchor-name')
-			) {
-				const generatedId = `--${crypto.randomUUID()}`
-				element.style.setProperty('position-anchor', generatedId)
-				anchor.style.setProperty('anchor-name', generatedId)
-			}
 		}
 		return () => {
-			if (element) {
+			if (element && !('anchorName' in document.documentElement.style)) {
 				getScrollableParent(element).removeEventListener('scroll', onScroll)
 			}
 		}
@@ -125,6 +110,7 @@
 	}}
 	{popover}
 	class={['np-menu-container', attributes.class]}
+	{style}
 >
 	<div class="np-menu">
 		{@render children()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -53,26 +53,26 @@
     "svelte": "^5.32.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.29.0",
+    "@eslint/js": "^9.30.1",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.53.1",
+    "@playwright/test": "^1.53.2",
     "@sveltejs/adapter-vercel": "^5.7.2",
-    "@sveltejs/kit": "^2.22.0",
-    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/kit": "^2.22.2",
+    "@sveltejs/package": "^2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.29.0",
+    "eslint": "^9.30.1",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.3",
-    "globals": "^16.2.0",
-    "prettier": "^3.6.0",
+    "eslint-plugin-svelte": "^3.10.1",
+    "globals": "^16.3.0",
+    "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.34.7",
+    "svelte": "^5.35.2",
     "svelte-check": "^4.2.2",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.35.0",
-    "vite": "^6.3.5",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.2",
     "vitest": "^3.2.4"
   },
   "svelte": "./dist/index.js",