@functionalcms/svelte-components 3.5.0 → 3.5.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,108 +1,111 @@
|
|
|
1
|
-
<style>
|
|
2
|
-
.disclose {
|
|
3
|
-
margin-block-end: var(--fluid-4);
|
|
4
|
-
|
|
5
|
-
/* When this element is a direct child of a flex container with
|
|
6
|
-
flex-direction: column it collapses similar to an inline element even though
|
|
7
|
-
it's block. This helps prevent that. */
|
|
8
|
-
width: 100%;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.disclose-title {
|
|
12
|
-
display: block;
|
|
13
|
-
cursor: pointer;
|
|
14
|
-
font-weight: 600;
|
|
15
|
-
padding: var(--fluid-8) var(--fluid-12);
|
|
16
|
-
|
|
17
|
-
/* Required to position the icon absolutely */
|
|
18
|
-
position: relative;
|
|
19
|
-
color: inherit;
|
|
20
|
-
transition: color var(--functional-timing-slow);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.disclose-panel {
|
|
24
|
-
font-weight: 400;
|
|
25
|
-
padding: var(--fluid-16);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.disclose-title,
|
|
29
|
-
.disclose-panel {
|
|
30
|
-
margin: 0;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
|
|
34
|
-
.disclose-title::webkit-details-marker {
|
|
35
|
-
display: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.disclose-bordered .disclose-title {
|
|
39
|
-
border: 1px solid var(--functional-gray-light);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.disclose-bg .disclose-title {
|
|
43
|
-
background-color: var(--functional-gray-light);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.disclose-title:focus {
|
|
47
|
-
box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
|
|
48
|
-
|
|
49
|
-
/* Needed for High Contrast mode */
|
|
50
|
-
outline:
|
|
51
|
-
var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
|
|
52
|
-
var(--functional-focus-ring-outline-color);
|
|
53
|
-
transition: box-shadow var(--functional-timing-fast) ease-out;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.disclose-title::after {
|
|
57
|
-
color: var(--functional-gray-dark);
|
|
58
|
-
content: "\203A";
|
|
59
|
-
position: absolute;
|
|
60
|
-
right: var(--fluid-12);
|
|
61
|
-
top: 0;
|
|
62
|
-
bottom: 0;
|
|
63
|
-
|
|
64
|
-
/* Chevron thinning :) */
|
|
65
|
-
font-size: var(--fluid-32);
|
|
66
|
-
line-height: 1;
|
|
67
|
-
font-weight: 100;
|
|
68
|
-
transition: transform var(--functional-timing-slow);
|
|
69
|
-
transform: rotate(0);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@media (prefers-reduced-motion), (update: slow) {
|
|
73
|
-
.disclose-title,
|
|
74
|
-
.disclose-title:focus,
|
|
75
|
-
.disclose-title::after {
|
|
76
|
-
transition: none;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.disclose[open] > .disclose-title::after {
|
|
81
|
-
transform: rotate(90deg);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
</style>
|
|
85
|
-
|
|
86
1
|
<script lang="ts">
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
2
|
+
import type { Snippet } from "svelte";
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
children: Snippet,
|
|
6
|
+
title?: string;
|
|
7
|
+
isOpen?: boolean;
|
|
8
|
+
isBackground?: boolean;
|
|
9
|
+
isBordered?: boolean;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
let { children, title = '', isOpen = false, isBackground = false, isBordered = false }: Props = $props();
|
|
13
|
+
|
|
14
|
+
const discloseClasses = [
|
|
15
|
+
'disclose',
|
|
16
|
+
isBackground ? 'disclose-bg' : '',
|
|
17
|
+
isBordered ? 'disclose-bordered' : ''
|
|
18
|
+
]
|
|
19
|
+
.filter((c) => c)
|
|
20
|
+
.join(' ');
|
|
101
21
|
</script>
|
|
102
22
|
|
|
103
23
|
<details class={discloseClasses} bind:open={isOpen}>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
24
|
+
<summary class="disclose-title">{title}</summary>
|
|
25
|
+
<div class="disclose-panel">
|
|
26
|
+
{@render children()}
|
|
27
|
+
</div>
|
|
108
28
|
</details>
|
|
29
|
+
|
|
30
|
+
<style>
|
|
31
|
+
.disclose {
|
|
32
|
+
margin-block-end: var(--fluid-4);
|
|
33
|
+
|
|
34
|
+
/* When this element is a direct child of a flex container with
|
|
35
|
+
flex-direction: column it collapses similar to an inline element even though
|
|
36
|
+
it's block. This helps prevent that. */
|
|
37
|
+
width: 100%;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.disclose-title {
|
|
41
|
+
display: block;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
padding: var(--fluid-8) var(--fluid-12);
|
|
45
|
+
|
|
46
|
+
/* Required to position the icon absolutely */
|
|
47
|
+
position: relative;
|
|
48
|
+
color: inherit;
|
|
49
|
+
transition: color var(--functional-timing-slow);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.disclose-panel {
|
|
53
|
+
font-weight: 400;
|
|
54
|
+
padding: var(--fluid-16);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.disclose-title,
|
|
58
|
+
.disclose-panel {
|
|
59
|
+
margin: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
|
|
63
|
+
.disclose-title::webkit-details-marker {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.disclose-bordered .disclose-title {
|
|
68
|
+
border: 1px solid var(--functional-gray-light);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.disclose-bg .disclose-title {
|
|
72
|
+
background-color: var(--functional-gray-light);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.disclose-title:focus {
|
|
76
|
+
box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
|
|
77
|
+
|
|
78
|
+
/* Needed for High Contrast mode */
|
|
79
|
+
outline: var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
|
|
80
|
+
var(--functional-focus-ring-outline-color);
|
|
81
|
+
transition: box-shadow var(--functional-timing-fast) ease-out;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.disclose-title::after {
|
|
85
|
+
color: var(--functional-gray-dark);
|
|
86
|
+
content: '\203A';
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: var(--fluid-12);
|
|
89
|
+
top: 0;
|
|
90
|
+
bottom: 0;
|
|
91
|
+
|
|
92
|
+
/* Chevron thinning :) */
|
|
93
|
+
font-size: var(--fluid-32);
|
|
94
|
+
line-height: 1;
|
|
95
|
+
font-weight: 100;
|
|
96
|
+
transition: transform var(--functional-timing-slow);
|
|
97
|
+
transform: rotate(0);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@media (prefers-reduced-motion), (update: slow) {
|
|
101
|
+
.disclose-title,
|
|
102
|
+
.disclose-title:focus,
|
|
103
|
+
.disclose-title::after {
|
|
104
|
+
transition: none;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.disclose[open] > .disclose-title::after {
|
|
109
|
+
transform: rotate(90deg);
|
|
110
|
+
}
|
|
111
|
+
</style>
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
|
-
props:
|
|
4
|
-
title?: string;
|
|
5
|
-
isOpen?: boolean;
|
|
6
|
-
isBackground?: boolean;
|
|
7
|
-
isBordered?: boolean;
|
|
8
|
-
};
|
|
3
|
+
props: Record<string, never>;
|
|
9
4
|
events: {
|
|
10
5
|
[evt: string]: CustomEvent<any>;
|
|
11
6
|
};
|
|
12
|
-
slots: {
|
|
13
|
-
default: {};
|
|
14
|
-
};
|
|
7
|
+
slots: {};
|
|
15
8
|
};
|
|
16
9
|
export type DiscloseProps = typeof __propDef.props;
|
|
17
10
|
export type DiscloseEvents = typeof __propDef.events;
|