@streamscloud/kit 0.29.0 → 0.29.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script lang="ts">import { IconSlot } from '../icon';
|
|
2
|
-
const { label, icon, href, active = false, disabled = false, badge, target, rel, on } = $props();
|
|
2
|
+
const { label, icon, href, active = false, activeStyle = 'plain', disabled = false, badge, target, rel, on } = $props();
|
|
3
|
+
const activeFilled = $derived(active && activeStyle === 'filled');
|
|
3
4
|
const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
|
|
4
5
|
const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
|
|
5
6
|
const handleClick = () => {
|
|
@@ -24,6 +25,7 @@ const handleClick = () => {
|
|
|
24
25
|
<a
|
|
25
26
|
class="nav-menu-item"
|
|
26
27
|
class:nav-menu-item--active={active}
|
|
28
|
+
class:nav-menu-item--active-filled={activeFilled}
|
|
27
29
|
class:nav-menu-item--disabled={disabled}
|
|
28
30
|
href={href}
|
|
29
31
|
target={target}
|
|
@@ -38,6 +40,7 @@ const handleClick = () => {
|
|
|
38
40
|
type="button"
|
|
39
41
|
class="nav-menu-item"
|
|
40
42
|
class:nav-menu-item--active={active}
|
|
43
|
+
class:nav-menu-item--active-filled={activeFilled}
|
|
41
44
|
class:nav-menu-item--disabled={disabled}
|
|
42
45
|
disabled={disabled}
|
|
43
46
|
aria-current={active ? 'page' : undefined}
|
|
@@ -51,7 +54,9 @@ const handleClick = () => {
|
|
|
51
54
|
NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
|
|
52
55
|
the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
|
|
53
56
|
Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
|
|
54
|
-
(`active` prop) — wire it to your router's pathname matching upstream.
|
|
57
|
+
(`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
|
|
58
|
+
active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
|
|
59
|
+
working on the active row, `'filled'` plates it and suppresses hover there.
|
|
55
60
|
|
|
56
61
|
### CSS Custom Properties
|
|
57
62
|
| Property | Description | Default |
|
|
@@ -63,7 +68,7 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
|
|
|
63
68
|
| `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
|
|
64
69
|
| `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
|
|
65
70
|
| `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
|
|
66
|
-
| `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
|
|
71
|
+
| `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
|
|
67
72
|
| `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
|
|
68
73
|
| `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
|
|
69
74
|
-->
|
|
@@ -93,13 +98,13 @@ Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consu
|
|
|
93
98
|
text-align: left;
|
|
94
99
|
transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
|
|
95
100
|
}
|
|
96
|
-
.nav-menu-item:hover:not(.nav-menu-item--active):not(.nav-menu-item--disabled):not(:disabled) {
|
|
101
|
+
.nav-menu-item:hover:not(.nav-menu-item--active-filled):not(.nav-menu-item--disabled):not(:disabled) {
|
|
97
102
|
background: var(--_nav-menu-item--background-hover);
|
|
98
103
|
}
|
|
99
104
|
.nav-menu-item:hover:not(.nav-menu-item--disabled):not(:disabled), .nav-menu-item--active {
|
|
100
105
|
color: var(--_nav-menu-item--color-active);
|
|
101
106
|
}
|
|
102
|
-
.nav-menu-item--active {
|
|
107
|
+
.nav-menu-item--active-filled {
|
|
103
108
|
background: var(--_nav-menu-item--background-active);
|
|
104
109
|
}
|
|
105
110
|
.nav-menu-item--disabled, .nav-menu-item:disabled {
|
|
@@ -7,6 +7,8 @@ type Props = {
|
|
|
7
7
|
href?: string;
|
|
8
8
|
/** Highlight as the current item. Consumer-controlled. @default false */
|
|
9
9
|
active?: boolean;
|
|
10
|
+
/** Active row visuals — `'plain'` uses color only and keeps hover, `'filled'` paints the active background (no hover on it). @default 'plain' */
|
|
11
|
+
activeStyle?: 'filled' | 'plain';
|
|
10
12
|
disabled?: boolean;
|
|
11
13
|
/** Notification badge on the icon (top-right corner). Numbers > 99 render as `99+`; strings render as-is. */
|
|
12
14
|
badge?: number | string;
|
|
@@ -22,7 +24,9 @@ type Props = {
|
|
|
22
24
|
* NavMenuItem — single row inside a `NavMenuGroup`. Icon + label, optional badge in the top-right of
|
|
23
25
|
* the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string or a snippet.
|
|
24
26
|
* Renders as `<a>` when `href` is set, `<button>` otherwise. Active state is consumer-controlled
|
|
25
|
-
* (`active` prop) — wire it to your router's pathname matching upstream.
|
|
27
|
+
* (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
|
|
28
|
+
* active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
|
|
29
|
+
* working on the active row, `'filled'` plates it and suppresses hover there.
|
|
26
30
|
*
|
|
27
31
|
* ### CSS Custom Properties
|
|
28
32
|
* | Property | Description | Default |
|
|
@@ -34,7 +38,7 @@ type Props = {
|
|
|
34
38
|
* | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
|
|
35
39
|
* | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
|
|
36
40
|
* | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
|
|
37
|
-
* | `--sc-kit--nav-menu-item--background--active` | Active background | `--sc-kit--color--bg--menu-active` |
|
|
41
|
+
* | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
|
|
38
42
|
* | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
|
|
39
43
|
* | `--sc-kit--nav-menu-item--badge--color` | Badge text color | `--sc-kit--color--text--on-accent` |
|
|
40
44
|
*/
|