@streamscloud/kit 0.34.1 → 0.35.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.
Files changed (7) hide show
  1. package/dist/ui/grid-card/cmp.grid-card-media.svelte +3 -0
  2. package/dist/ui/grid-card/cmp.grid-card-media.svelte.d.ts +1 -0
  3. package/dist/ui/navigation/cmp.nav-menu-item.svelte +10 -2
  4. package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts +4 -3
  5. package/dist/ui/page-layout/cmp.panel-content.svelte +2 -2
  6. package/dist/ui/page-layout/cmp.panel-content.svelte.d.ts +1 -1
  7. package/package.json +1 -1
package/dist/ui/grid-card/cmp.grid-card-media.svelte CHANGED
@@ -118,9 +118,11 @@ The play glyph of a playable item is a `PlayIndicator` — size and shadow are t
118
118
  | Property | Description | Default |
119
119
  |---|---|---|
120
120
  | `--sc-kit--grid-card--media--object-fit` | Object-fit forwarded to image / video | `contain` (per `objectFit` prop) |
121
+ | `--sc-kit--grid-card--media--padding` | Inset between the media backdrop and the image / video | `0` |
121
122
  -->
122
123
 
123
124
  <style>.grid-card-media {
125
+ --_grid-card-media--padding: var(--sc-kit--grid-card--media--padding, 0);
124
126
  width: 100%;
125
127
  margin-bottom: 0.5rem;
126
128
  }
@@ -153,6 +155,7 @@ The play glyph of a playable item is a `PlayIndicator` — size and shadow are t
153
155
  .grid-card-media__slide {
154
156
  width: 100%;
155
157
  height: 100%;
158
+ padding: var(--_grid-card-media--padding);
156
159
  background-color: light-dark(#ffffff, #000000);
157
160
  }
158
161
  .grid-card-media__duration-anchor {
package/dist/ui/grid-card/cmp.grid-card-media.svelte.d.ts CHANGED
@@ -29,6 +29,7 @@ type Props = {
29
29
  * | Property | Description | Default |
30
30
  * |---|---|---|
31
31
  * | `--sc-kit--grid-card--media--object-fit` | Object-fit forwarded to image / video | `contain` (per `objectFit` prop) |
32
+ * | `--sc-kit--grid-card--media--padding` | Inset between the media backdrop and the image / video | `0` |
32
33
  */
33
34
  declare const Cmp: import("svelte").Component<Props, {}, "">;
34
35
  type Cmp = ReturnType<typeof Cmp>;
package/dist/ui/navigation/cmp.nav-menu-item.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script lang="ts">import { IconSlot } from '../icon';
2
2
  const { label, icon, href, active = false, activeStyle = 'plain', disabled = false, badge, target, rel, on } = $props();
3
3
  const activeFilled = $derived(active && activeStyle === 'filled');
4
+ const activePlain = $derived(active && activeStyle === 'plain');
4
5
  const badgeText = $derived(typeof badge === 'number' && badge > 99 ? '99+' : badge);
5
6
  const hasBadge = $derived(badge !== undefined && badge !== null && badge !== '');
6
7
  const handleClick = (event) => {
@@ -26,6 +27,7 @@ const handleClick = (event) => {
26
27
  class="nav-menu-item"
27
28
  class:nav-menu-item--active={active}
28
29
  class:nav-menu-item--active-filled={activeFilled}
30
+ class:nav-menu-item--active-plain={activePlain}
29
31
  href={href}
30
32
  target={target}
31
33
  rel={rel}
@@ -39,6 +41,7 @@ const handleClick = (event) => {
39
41
  class="nav-menu-item"
40
42
  class:nav-menu-item--active={active}
41
43
  class:nav-menu-item--active-filled={activeFilled}
44
+ class:nav-menu-item--active-plain={activePlain}
42
45
  class:nav-menu-item--disabled={disabled}
43
46
  disabled={disabled}
44
47
  aria-current={active ? 'page' : undefined}
@@ -54,8 +57,8 @@ the icon (numbers > 99 truncate to `99+`). The icon accepts an SVG source string
54
57
  Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
55
58
  with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
56
59
  (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
57
- active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
58
- working on the active row, `'filled'` plates it and suppresses hover there.
60
+ active row reads: `'plain'` (default) drops the plate, so color plus a heavier label weight carry the
61
+ signal and hover keeps working on the active row; `'filled'` plates it and suppresses hover there.
59
62
 
60
63
  ### CSS Custom Properties
61
64
  | Property | Description | Default |
@@ -66,6 +69,7 @@ working on the active row, `'filled'` plates it and suppresses hover there.
66
69
  | `--sc-kit--nav-menu-item--color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
67
70
  | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
68
71
  | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
72
+ | `--sc-kit--nav-menu-item--font-weight--active` | Active label weight — `activeStyle="plain"` only | `--sc-kit--font-weight--semibold` |
69
73
  | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
70
74
  | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
71
75
  | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
@@ -78,6 +82,7 @@ working on the active row, `'filled'` plates it and suppresses hover there.
78
82
  --_nav-menu-item--color: var(--sc-kit--nav-menu-item--color, var(--sc-kit--color--text--secondary));
79
83
  --_nav-menu-item--color-active: var(--sc-kit--nav-menu-item--color--active, var(--sc-kit--color--text--primary));
80
84
  --_nav-menu-item--color-disabled: var(--sc-kit--nav-menu-item--color--disabled, var(--sc-kit--color--text--muted));
85
+ --_nav-menu-item--font-weight-active: var(--sc-kit--nav-menu-item--font-weight--active, var(--sc-kit--font-weight--semibold));
81
86
  --_nav-menu-item--background-hover: var(--sc-kit--nav-menu-item--background--hover, var(--sc-kit--color--bg--hover));
82
87
  --_nav-menu-item--background-active: var(--sc-kit--nav-menu-item--background--active, var(--sc-kit--color--bg--menu-active));
83
88
  --_nav-menu-item--badge-background: var(--sc-kit--nav-menu-item--badge--background, var(--sc-kit--color--accent));
@@ -106,6 +111,9 @@ working on the active row, `'filled'` plates it and suppresses hover there.
106
111
  .nav-menu-item--active-filled {
107
112
  background: var(--_nav-menu-item--background-active);
108
113
  }
114
+ .nav-menu-item--active-plain {
115
+ font-weight: var(--_nav-menu-item--font-weight-active);
116
+ }
109
117
  .nav-menu-item--disabled, .nav-menu-item:disabled {
110
118
  color: var(--_nav-menu-item--color-disabled);
111
119
  cursor: default;
package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts CHANGED
@@ -7,7 +7,7 @@ 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' */
10
+ /** Active row visuals — `'plain'` uses color plus a heavier label weight and keeps hover, `'filled'` paints the active background (no hover on it). @default 'plain' */
11
11
  activeStyle?: 'filled' | 'plain';
12
12
  disabled?: boolean;
13
13
  /** Notification badge on the icon (top-right corner). Numbers > 99 render as `99+`; strings render as-is. */
@@ -26,8 +26,8 @@ type Props = {
26
26
  * Renders as `<a>` when `href` is set and enabled, `<button>` otherwise; `on.click` fires in both forms
27
27
  * with the `MouseEvent` and the link default is left intact. Active state is consumer-controlled
28
28
  * (`active` prop) — wire it to your router's pathname matching upstream. `activeStyle` picks how the
29
- * active row reads: `'plain'` (default) leaves color as the only signal and keeps the hover background
30
- * working on the active row, `'filled'` plates it and suppresses hover there.
29
+ * active row reads: `'plain'` (default) drops the plate, so color plus a heavier label weight carry the
30
+ * signal and hover keeps working on the active row; `'filled'` plates it and suppresses hover there.
31
31
  *
32
32
  * ### CSS Custom Properties
33
33
  * | Property | Description | Default |
@@ -38,6 +38,7 @@ type Props = {
38
38
  * | `--sc-kit--nav-menu-item--color` | Idle text/icon color | `--sc-kit--color--text--secondary` |
39
39
  * | `--sc-kit--nav-menu-item--color--active` | Active / hover text color | `--sc-kit--color--text--primary` |
40
40
  * | `--sc-kit--nav-menu-item--color--disabled` | Disabled text color | `--sc-kit--color--text--muted` |
41
+ * | `--sc-kit--nav-menu-item--font-weight--active` | Active label weight — `activeStyle="plain"` only | `--sc-kit--font-weight--semibold` |
41
42
  * | `--sc-kit--nav-menu-item--background--hover` | Hover background | `--sc-kit--color--bg--hover` |
42
43
  * | `--sc-kit--nav-menu-item--background--active` | Active background — `activeStyle="filled"` only | `--sc-kit--color--bg--menu-active` |
43
44
  * | `--sc-kit--nav-menu-item--badge--background` | Badge background | `--sc-kit--color--accent` |
package/dist/ui/page-layout/cmp.panel-content.svelte CHANGED
@@ -13,9 +13,9 @@ PanelContent — default padded wrapper for the body of a `PagePanel`.
13
13
  ### CSS Custom Properties
14
14
  | Property | Description | Default |
15
15
  |---|---|---|
16
- | `--sc-kit--panel-content--padding` | Body padding | `16px` |
16
+ | `--sc-kit--panel-content--padding` | Body padding | `20px 24px` |
17
17
  -->
18
18
  <style>.panel-content {
19
- --_panel-content--padding: var(--sc-kit--panel-content--padding, 1rem);
19
+ --_panel-content--padding: var(--sc-kit--panel-content--padding, var(--sc-kit--space--5) var(--sc-kit--space--6));
20
20
  padding: var(--_panel-content--padding);
21
21
  }</style>
package/dist/ui/page-layout/cmp.panel-content.svelte.d.ts CHANGED
@@ -8,7 +8,7 @@ type Props = {
8
8
  * ### CSS Custom Properties
9
9
  * | Property | Description | Default |
10
10
  * |---|---|---|
11
- * | `--sc-kit--panel-content--padding` | Body padding | `16px` |
11
+ * | `--sc-kit--panel-content--padding` | Body padding | `20px 24px` |
12
12
  */
13
13
  declare const Cmp: import("svelte").Component<Props, {}, "">;
14
14
  type Cmp = ReturnType<typeof Cmp>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.34.1",
3
+ "version": "0.35.1",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",