@streamscloud/kit 0.29.1 → 0.30.0

package/dist/ui/navigation/cmp.nav-menu-item.svelte

@@ -3,11 +3,11 @@ const { label, icon, href, active = false, activeStyle = 'plain', disabled = fal
 const activeFilled = $derived(active && activeStyle === 'filled');
 const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
 const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
-const handleClick = () => {
+const handleClick = (event) => {
     if (disabled) {
         return;
     }
-    on?.click?.();
+    on?.click?.(event);
 };
 </script>
 
@@ -21,18 +21,16 @@ const handleClick = () => {
   <span class="nav-menu-item__label">{label}</span>
 {/snippet}
 
-{#if href}
+{#if href && !disabled}
   <a
     class="nav-menu-item"
     class:nav-menu-item--active={active}
     class:nav-menu-item--active-filled={activeFilled}
-    class:nav-menu-item--disabled={disabled}
     href={href}
     target={target}
     rel={rel}
     aria-current={active ? 'page' : undefined}
-    aria-disabled={disabled || undefined}
-    tabindex={disabled ? -1 : undefined}>
+    onclick={handleClick}>
     {@render content()}
   </a>
 {:else}
@@ -53,7 +51,8 @@ const handleClick = () => {
 @component
 NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
 the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
-Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
+Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
+with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
 (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
 active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
 working on the active row, `'filled'` plates it and suppresses hover there.

package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts

@@ -3,7 +3,7 @@ type Props = {
     label: string;
     /** Icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
     icon: IconProp;
-    /** Render as `<a href>`. Mutually exclusive with `on.click`. */
+    /** Render as `<a href>` — unless `disabled`, which falls back to the button form. `on.click` still fires; `event.preventDefault()` keeps the click from navigating. */
     href?: string;
     /** Highlight as the current item. Consumer-controlled. @default false */
     active?: boolean;
@@ -17,13 +17,14 @@ type Props = {
     /** Anchor rel — only relevant when `href` is set. */
     rel?: string;
     on?: {
-        click?: () => void;
+        click?: (event: MouseEvent) => void;
     };
 };
 /**
  * NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
  * the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
- * Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
+ * Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
+ * with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
  * (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
  * active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
  * working on the active row, `'filled'` plates it and suppresses hover there.

package/dist/ui/navigation/cmp.nav-rail-item.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { IconSlot } from '../icon';
 const { label, icon, href, active = false, error = false, disabled = false, target, rel, on } = $props();
-const handleClick = () => {
+const handleClick = (event) => {
     if (disabled) {
         return;
     }
-    on?.click?.();
+    on?.click?.(event);
 };
 </script>
 
@@ -13,18 +13,16 @@ const handleClick = () => {
   <span class="nav-rail-item__label">{label}</span>
 {/snippet}
 
-{#if href}
+{#if href && !disabled}
   <a
     class="nav-rail-item"
     class:nav-rail-item--active={active}
     class:nav-rail-item--error={error}
-    class:nav-rail-item--disabled={disabled}
     href={href}
     target={target}
     rel={rel}
     aria-current={active ? 'page' : undefined}
-    aria-disabled={disabled || undefined}
-    tabindex={disabled ? -1 : undefined}>
+    onclick={handleClick}>
     {@render tile()}
   </a>
 {:else}
@@ -43,8 +41,9 @@ const handleClick = () => {
 
 <!--
 @component
-NavRailItem — one icon-and-label tile inside a `NavRail`. Renders as `<a>` when `href` is set,
-`<button>` otherwise. Active state is consumer-controlled (`active` prop). The icon accepts an SVG
+NavRailItem — one icon-and-label tile inside a `NavRail`. Renders as `<a>` when `href` is set and
+enabled, `<button>` otherwise; `on.click` fires in both forms with the `MouseEvent` and the link
+default is left intact. Active state is consumer-controlled (`active` prop). The icon accepts an SVG
 source string or a snippet. Tile dimensions are controlled via the `--sc-kit--nav-rail--item-*`
 CSS variables (settable on the parent rail or any ancestor).
 

package/dist/ui/navigation/cmp.nav-rail-item.svelte.d.ts

@@ -3,7 +3,7 @@ type Props = {
     label: string;
     /** Icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
     icon: IconProp;
-    /** Render as `<a href>`. Mutually exclusive with `on.click`. */
+    /** Render as `<a href>` — unless `disabled`, which falls back to the button form. `on.click` still fires; `event.preventDefault()` keeps the click from navigating. */
     href?: string;
     /** Highlight as the current section. Consumer-controlled. @default false */
     active?: boolean;
@@ -15,12 +15,13 @@ type Props = {
     /** Anchor rel — only relevant when `href` is set. */
     rel?: string;
     on?: {
-        click?: () => void;
+        click?: (event: MouseEvent) => void;
     };
 };
 /**
- * NavRailItem — one icon-and-label tile inside a `NavRail`. Renders as `<a>` when `href` is set,
- * `<button>` otherwise. Active state is consumer-controlled (`active` prop). The icon accepts an SVG
+ * NavRailItem — one icon-and-label tile inside a `NavRail`. Renders as `<a>` when `href` is set and
+ * enabled, `<button>` otherwise; `on.click` fires in both forms with the `MouseEvent` and the link
+ * default is left intact. Active state is consumer-controlled (`active` prop). The icon accepts an SVG
  * source string or a snippet. Tile dimensions are controlled via the `--sc-kit--nav-rail--item-*`
  * CSS variables (settable on the parent rail or any ancestor).
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",