@streamscloud/kit 0.9.10 → 0.9.11
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.
|
@@ -103,11 +103,6 @@ card a click target without nesting `<button>` elements with the action snippet.
|
|
|
103
103
|
overflow: hidden;
|
|
104
104
|
pointer-events: none;
|
|
105
105
|
}
|
|
106
|
-
.listing-card__preview :global(img),
|
|
107
|
-
.listing-card__preview :global(svg) {
|
|
108
|
-
max-width: 100%;
|
|
109
|
-
max-height: 100%;
|
|
110
|
-
}
|
|
111
106
|
.listing-card__body {
|
|
112
107
|
position: relative;
|
|
113
108
|
z-index: 1;
|
|
@@ -8,7 +8,7 @@ type Props = {
|
|
|
8
8
|
label: string;
|
|
9
9
|
tone?: StatusTone;
|
|
10
10
|
};
|
|
11
|
-
/** Top preview area — image, illustration, screenshot, gradient. Omit to skip the preview. */
|
|
11
|
+
/** Top preview area — image, illustration, screenshot, gradient. Consumer sizes its own content (e.g. `width:100%`). Omit to skip the preview. */
|
|
12
12
|
preview?: Snippet;
|
|
13
13
|
/** Action slot, typically a kit `<Button size="sm" variant="outline">`. */
|
|
14
14
|
action?: Snippet;
|
|
@@ -1,17 +1,56 @@
|
|
|
1
|
-
<script lang="ts">const { label } = $props();
|
|
1
|
+
<script lang="ts">const { label, fontFamily = 'mono', divider = false } = $props();
|
|
2
|
+
export {};
|
|
2
3
|
</script>
|
|
3
4
|
|
|
4
|
-
<div
|
|
5
|
+
<div
|
|
6
|
+
class="nav-menu-header"
|
|
7
|
+
class:nav-menu-header--mono={fontFamily === 'mono'}
|
|
8
|
+
class:nav-menu-header--sans={fontFamily === 'sans'}
|
|
9
|
+
class:nav-menu-header--display={fontFamily === 'display'}
|
|
10
|
+
class:nav-menu-header--divided={divider}>
|
|
11
|
+
{label}
|
|
12
|
+
</div>
|
|
5
13
|
|
|
6
14
|
<!--
|
|
7
15
|
@component
|
|
8
|
-
NavMenuHeader — group label rendered above a stack of `NavMenuItem`s.
|
|
9
|
-
`NavMenuGroup`.
|
|
16
|
+
NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Monospace 400 by default;
|
|
17
|
+
non-mono families default to weight 500. Use one per `NavMenuGroup`. Pass `divider` to draw a bottom
|
|
18
|
+
separator (same style as `NavMenuDivider`), so the header itself groups the items below it without a
|
|
19
|
+
standalone divider and wider spacing.
|
|
20
|
+
|
|
21
|
+
### CSS Custom Properties
|
|
22
|
+
| Property | Description | Default |
|
|
23
|
+
|---|---|---|
|
|
24
|
+
| `--sc-kit--nav-menu-header--font-family` | Label font family | `var(--sc-kit--font--mono)` |
|
|
25
|
+
| `--sc-kit--nav-menu-header--font-weight` | Label font weight | `400` (mono) / `500` (other families) |
|
|
10
26
|
-->
|
|
11
27
|
<style>.nav-menu-header {
|
|
28
|
+
--_nav-menu-header--font-family: var(--sc-kit--nav-menu-header--font-family, var(--_nav-menu-header--font-family-default));
|
|
29
|
+
--_nav-menu-header--font-weight: var(--sc-kit--nav-menu-header--font-weight, var(--_nav-menu-header--font-weight-default));
|
|
12
30
|
padding: var(--sc-kit--space--2) var(--sc-kit--space--5);
|
|
31
|
+
font-family: var(--_nav-menu-header--font-family), sans-serif;
|
|
13
32
|
font-size: var(--sc-kit--font-size--md);
|
|
14
|
-
font-weight: var(--
|
|
33
|
+
font-weight: var(--_nav-menu-header--font-weight);
|
|
15
34
|
line-height: var(--sc-kit--leading--tight);
|
|
16
35
|
color: var(--sc-kit--color--text--secondary);
|
|
36
|
+
}
|
|
37
|
+
.nav-menu-header--mono {
|
|
38
|
+
--_nav-menu-header--font-family-default: var(--sc-kit--font--mono);
|
|
39
|
+
--_nav-menu-header--font-weight-default: var(--sc-kit--font-weight--regular);
|
|
40
|
+
}
|
|
41
|
+
.nav-menu-header--sans {
|
|
42
|
+
--_nav-menu-header--font-family-default: var(--sc-kit--font--sans);
|
|
43
|
+
--_nav-menu-header--font-weight-default: var(--sc-kit--font-weight--medium);
|
|
44
|
+
}
|
|
45
|
+
.nav-menu-header--display {
|
|
46
|
+
--_nav-menu-header--font-family-default: var(--sc-kit--font--display);
|
|
47
|
+
--_nav-menu-header--font-weight-default: var(--sc-kit--font-weight--medium);
|
|
48
|
+
}
|
|
49
|
+
.nav-menu-header--divided::after {
|
|
50
|
+
content: "";
|
|
51
|
+
display: block;
|
|
52
|
+
height: 1px;
|
|
53
|
+
margin-block-start: var(--sc-kit--space--2);
|
|
54
|
+
margin-inline: calc(var(--sc-kit--space--4) - var(--sc-kit--space--5));
|
|
55
|
+
background: var(--sc-kit--color--border);
|
|
17
56
|
}</style>
|
|
@@ -1,9 +1,22 @@
|
|
|
1
|
+
import type { KitFontFamily } from '../../fonts';
|
|
1
2
|
type Props = {
|
|
2
3
|
label: string;
|
|
4
|
+
/** Label font family; each family carries its own default weight (mono → 400, others → 500). Overridable via `--sc-kit--nav-menu-header--font-family`. @default 'mono' */
|
|
5
|
+
fontFamily?: KitFontFamily;
|
|
6
|
+
/** Draw a bottom separator (same style as `NavMenuDivider`) under the label. @default false */
|
|
7
|
+
divider?: boolean;
|
|
3
8
|
};
|
|
4
9
|
/**
|
|
5
|
-
* NavMenuHeader — group label rendered above a stack of `NavMenuItem`s.
|
|
6
|
-
* `NavMenuGroup`.
|
|
10
|
+
* NavMenuHeader — group label rendered above a stack of `NavMenuItem`s. Monospace 400 by default;
|
|
11
|
+
* non-mono families default to weight 500. Use one per `NavMenuGroup`. Pass `divider` to draw a bottom
|
|
12
|
+
* separator (same style as `NavMenuDivider`), so the header itself groups the items below it without a
|
|
13
|
+
* standalone divider and wider spacing.
|
|
14
|
+
*
|
|
15
|
+
* ### CSS Custom Properties
|
|
16
|
+
* | Property | Description | Default |
|
|
17
|
+
* |---|---|---|
|
|
18
|
+
* | `--sc-kit--nav-menu-header--font-family` | Label font family | `var(--sc-kit--font--mono)` |
|
|
19
|
+
* | `--sc-kit--nav-menu-header--font-weight` | Label font weight | `400` (mono) / `500` (other families) |
|
|
7
20
|
*/
|
|
8
21
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
9
22
|
type Cmp = ReturnType<typeof Cmp>;
|