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