@jelinek/ui 0.4.0 → 0.4.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,4 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
2
3
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
4
|
import { cn } from '../utils/cn.js';
|
|
4
5
|
|
|
@@ -8,6 +9,16 @@
|
|
|
8
9
|
slogan?: string;
|
|
9
10
|
meta?: string;
|
|
10
11
|
stamp?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Consumer content rendered inside the footer's black chrome, ABOVE the
|
|
14
|
+
* brand row (an e-shop's link columns, a newsletter box). The guide's
|
|
15
|
+
* own footer is the brand row alone, so this stays unset there and the
|
|
16
|
+
* markup is unchanged; an app footer is usually more than one strip,
|
|
17
|
+
* and without this slot it would have to stack its own black block on
|
|
18
|
+
* top of this one — two rounded-top black boxes with a seam between
|
|
19
|
+
* them. Same consumer-seam reasoning as SiteHeader's `barActions`.
|
|
20
|
+
*/
|
|
21
|
+
children?: Snippet;
|
|
11
22
|
/**
|
|
12
23
|
* Task 45 — HTML of the changelog shown in a floating <dialog> when the
|
|
13
24
|
* reader clicks the deploy stamp. The showcase passes the build-time
|
|
@@ -26,6 +37,7 @@
|
|
|
26
37
|
meta,
|
|
27
38
|
stamp,
|
|
28
39
|
changelog,
|
|
40
|
+
children,
|
|
29
41
|
class: className,
|
|
30
42
|
...rest
|
|
31
43
|
}: Props & HTMLAttributes<HTMLElement> = $props();
|
|
@@ -84,6 +96,15 @@
|
|
|
84
96
|
</script>
|
|
85
97
|
|
|
86
98
|
<footer {...rest} class={cn(BASE, className)}>
|
|
99
|
+
{#if children}
|
|
100
|
+
<!-- Consumer strip(s) above the brand row — see the `children` prop doc.
|
|
101
|
+
The divider separates it from the brand row the same way an app
|
|
102
|
+
would otherwise draw its own seam; the brand row below keeps its
|
|
103
|
+
guide geometry untouched. -->
|
|
104
|
+
<div class="border-b border-white/15">
|
|
105
|
+
{@render children()}
|
|
106
|
+
</div>
|
|
107
|
+
{/if}
|
|
87
108
|
<div class="mx-auto flex max-w-page flex-wrap items-center gap-6 px-6 py-10">
|
|
88
109
|
{#if logo}
|
|
89
110
|
<!-- jelinek.css:767 — 52px square, 12px radius. Neither value is on
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
1
2
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
3
|
interface Props {
|
|
3
4
|
logo?: string;
|
|
@@ -5,6 +6,16 @@ interface Props {
|
|
|
5
6
|
slogan?: string;
|
|
6
7
|
meta?: string;
|
|
7
8
|
stamp?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Consumer content rendered inside the footer's black chrome, ABOVE the
|
|
11
|
+
* brand row (an e-shop's link columns, a newsletter box). The guide's
|
|
12
|
+
* own footer is the brand row alone, so this stays unset there and the
|
|
13
|
+
* markup is unchanged; an app footer is usually more than one strip,
|
|
14
|
+
* and without this slot it would have to stack its own black block on
|
|
15
|
+
* top of this one — two rounded-top black boxes with a seam between
|
|
16
|
+
* them. Same consumer-seam reasoning as SiteHeader's `barActions`.
|
|
17
|
+
*/
|
|
18
|
+
children?: Snippet;
|
|
8
19
|
/**
|
|
9
20
|
* Task 45 — HTML of the changelog shown in a floating <dialog> when the
|
|
10
21
|
* reader clicks the deploy stamp. The showcase passes the build-time
|