@wentools/overlay 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wentools/overlay",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Svelte 5 popover, dropdown menu, and tooltip components with CSS custom property theming",
   "license": "MIT",
   "repository": {

package/src/dropdown_menu.svelte

@@ -91,7 +91,7 @@ Perfect for: context menus, action menus, navigation dropdowns.
 
 	const getMenuItems = (): HTMLElement[] => {
 		if (!menuElement) return []
-		return Array.from(menuElement.querySelectorAll('[role="menuitem"]:not([disabled])'))
+		return Array.from(menuElement.querySelectorAll('[role="menuitem"]:not([disabled]):not([aria-disabled="true"])'))
 	}
 
 	const focusItem = (index: number) => {

package/src/menu_item.svelte

@@ -5,7 +5,9 @@ MenuItem - Individual menu item for DropdownMenu
 A styled menu item that works with DropdownMenu's keyboard navigation.
 Follows ARIA menuitem patterns and integrates with focus management.
 
-Perfect for: actions in dropdown menus, selectable options.
+Renders as a `<button>` by default, or as an `<a>` when `href` is provided.
+
+Perfect for: actions in dropdown menus, selectable options, navigation links.
 
 @example
 ```svelte
@@ -13,6 +15,10 @@ Perfect for: actions in dropdown menus, selectable options.
   Delete Item
 </MenuItem>
 
+<MenuItem href="/settings">
+  Settings
+</MenuItem>
+
 <MenuItem disabled>
   Unavailable Action
 </MenuItem>
@@ -28,6 +34,8 @@ Perfect for: actions in dropdown menus, selectable options.
 		highlighted?: boolean
 		/** Color theme for special items (e.g., 'var(--blue-ch)' for create, 'var(--red-ch)' for destructive) */
 		color?: string
+		/** Navigate to URL — renders as <a> instead of <button> */
+		href?: string
 		/** Click handler */
 		onclick?: () => void
 		/** CSS class for styling */
@@ -40,28 +48,50 @@ Perfect for: actions in dropdown menus, selectable options.
 		disabled = false,
 		highlighted = false,
 		color,
+		href,
 		onclick,
 		class: className = '',
 		children,
 	}: Props = $props()
 </script>
 
-<button
-	class="menu-item {className}"
-	class:highlighted
-	class:disabled
-	{disabled}
-	role="menuitem"
-	tabindex="-1"
-	style:--item-color={color}
-	onclick={() => {
-		if (!disabled) {
+{#if href}
+	<a
+		href={disabled ? undefined : href}
+		class="menu-item {className}"
+		class:highlighted
+		class:disabled
+		role="menuitem"
+		tabindex="-1"
+		aria-disabled={disabled}
+		style:--item-color={color}
+		onclick={(e) => {
+			if (disabled) {
+				e.preventDefault()
+			}
 			onclick?.()
-		}
-	}}
->
-	{@render children()}
-</button>
+		}}
+	>
+		{@render children()}
+	</a>
+{:else}
+	<button
+		class="menu-item {className}"
+		class:highlighted
+		class:disabled
+		{disabled}
+		role="menuitem"
+		tabindex="-1"
+		style:--item-color={color}
+		onclick={() => {
+			if (!disabled) {
+				onclick?.()
+			}
+		}}
+	>
+		{@render children()}
+	</button>
+{/if}
 
 <style>
 	.menu-item {
@@ -77,6 +107,8 @@ Perfect for: actions in dropdown menus, selectable options.
 		text-align: left;
 		cursor: pointer;
 		color: inherit;
+		text-decoration: none;
+		font: inherit;
 		transition: background-color 0.2s ease;
 	}