@streamscloud/kit 0.29.0 → 0.30.0

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

@@ -1,12 +1,13 @@
 <script lang="ts">import { IconSlot } from '../icon';
-const { label, icon, href, active = false, disabled = false, badge, target, rel, on } = $props();
+const { label, icon, href, active = false, activeStyle = 'plain', disabled = false, badge, target, rel, on } = $props();
+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>
 
@@ -20,17 +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--disabled={disabled}
+    class:nav-menu-item--active-filled={activeFilled}
     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}
@@ -38,6 +38,7 @@ const handleClick = () => {
     type="button"
     class="nav-menu-item"
     class:nav-menu-item--active={active}
+    class:nav-menu-item--active-filled={activeFilled}
     class:nav-menu-item--disabled={disabled}
     disabled={disabled}
     aria-current={active ? 'page' : undefined}
@@ -50,8 +51,11 @@ 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
-(`active` prop) — wire it to your router's pathname matching upstream.
+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.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -63,7 +67,7 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
 | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
 | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
-| `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
+| `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
 | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
 | `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
 -->
@@ -93,13 +97,13 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
   text-align: left;
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
-.nav-menu-item:hover:not(.nav-menu-item--active):not(.nav-menu-item--disabled):not(:disabled) {
+.nav-menu-item:hover:not(.nav-menu-item--active-filled):not(.nav-menu-item--disabled):not(:disabled) {
   background: var(--_nav-menu-item--background-hover);
 }
 .nav-menu-item:hover:not(.nav-menu-item--disabled):not(:disabled), .nav-menu-item--active {
   color: var(--_nav-menu-item--color-active);
 }
-.nav-menu-item--active {
+.nav-menu-item--active-filled {
   background: var(--_nav-menu-item--background-active);
 }
 .nav-menu-item--disabled, .nav-menu-item:disabled {

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

@@ -3,10 +3,12 @@ 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;
+    /** Active row visuals — `'plain'` uses color only and keeps hover, `'filled'` paints the active background (no hover on it). @default 'plain' */
+    activeStyle?: 'filled' | 'plain';
     disabled?: boolean;
     /** Notification badge on the icon (top-right corner). Numbers > 99 render as `99+`; strings render as-is. */
     badge?: number | string;
@@ -15,14 +17,17 @@ 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
- * (`active` prop) — wire it to your router's pathname matching upstream.
+ * 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.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -34,7 +39,7 @@ type Props = {
  * | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
  * | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
- * | `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
+ * | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
  * | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
  * | `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
  */

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.0",
+  "version": "0.30.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",