fluent-svelte-extra 1.6.0 → 1.6.2
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.
- package/Expander/Expander.scss +21 -22
- package/Expander/Expander.svelte +21 -6
- package/ListItem/ListItem.scss +1 -0
- package/ListItem/ListItem.svelte +1 -1
- package/package.json +2 -1
package/Expander/Expander.scss
CHANGED
|
@@ -6,36 +6,45 @@
|
|
|
6
6
|
border-radius: var(--control-corner-radius);
|
|
7
7
|
inline-size: 100%;
|
|
8
8
|
user-select: none;
|
|
9
|
+
.expander-header {
|
|
10
|
+
transition: var(--fds-control-faster-duration) ease background;
|
|
11
|
+
&:hover {
|
|
12
|
+
background-color: var(--control-fill-secondary);
|
|
13
|
+
border: 1px solid var(--fds-control-stroke-default);
|
|
14
|
+
}
|
|
15
|
+
&:active {
|
|
16
|
+
background-color: var(--control-fill-tertiary);
|
|
17
|
+
border: 1px solid var(--fds-control-stroke-default);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
9
20
|
&.direction- {
|
|
10
21
|
&down {
|
|
11
22
|
.expander-content {
|
|
12
23
|
border-block-start: none;
|
|
13
24
|
border-radius: var(--control-corner-radius);
|
|
14
|
-
border-start-start-radius: 0;
|
|
15
|
-
border-start-end-radius: 0;
|
|
16
|
-
transform: translateY(-100%);
|
|
25
|
+
border-start-start-radius: 0 !important;
|
|
26
|
+
border-start-end-radius: 0 !important;
|
|
17
27
|
}
|
|
18
28
|
&.expanded .expander-header {
|
|
19
29
|
border-radius: var(--control-corner-radius);
|
|
20
|
-
border-end-start-radius: 0;
|
|
21
|
-
border-end-end-radius: 0;
|
|
30
|
+
border-end-start-radius: 0 !important;
|
|
31
|
+
border-end-end-radius: 0 !important;
|
|
22
32
|
}
|
|
23
33
|
}
|
|
24
34
|
&up {
|
|
25
35
|
.expander-content {
|
|
26
36
|
border-bottom: none;
|
|
27
37
|
border-radius: var(--control-corner-radius);
|
|
28
|
-
border-end-start-radius: 0;
|
|
29
|
-
border-end-end-radius: 0;
|
|
30
|
-
transform: translateY(100%);
|
|
38
|
+
border-end-start-radius: 0 !important;
|
|
39
|
+
border-end-end-radius: 0 !important;
|
|
31
40
|
&-anchor {
|
|
32
41
|
order: -1;
|
|
33
42
|
}
|
|
34
43
|
}
|
|
35
44
|
&.expanded .expander-header {
|
|
36
45
|
border-radius: var(--control-corner-radius);
|
|
37
|
-
border-start-start-radius: 0;
|
|
38
|
-
border-start-end-radius: 0;
|
|
46
|
+
border-start-start-radius: 0 !important;
|
|
47
|
+
border-start-end-radius: 0 !important;
|
|
39
48
|
}
|
|
40
49
|
}
|
|
41
50
|
}
|
|
@@ -45,10 +54,6 @@
|
|
|
45
54
|
transform: none;
|
|
46
55
|
transition: var(--control-slow-duration) var(--control-fast-out-slow-in-easing)
|
|
47
56
|
transform;
|
|
48
|
-
&-anchor {
|
|
49
|
-
max-block-size: 6.02e23vmax;
|
|
50
|
-
transition: none;
|
|
51
|
-
}
|
|
52
57
|
}
|
|
53
58
|
&-chevron svg {
|
|
54
59
|
transform: rotate(180deg);
|
|
@@ -78,7 +83,7 @@
|
|
|
78
83
|
padding-inline-start: 16px;
|
|
79
84
|
padding: 8px;
|
|
80
85
|
background-clip: padding-box;
|
|
81
|
-
background-color: var(--
|
|
86
|
+
background-color: var(--fds-control-fill-default);
|
|
82
87
|
border: 1px solid var(--card-stroke-default);
|
|
83
88
|
border-radius: var(--control-corner-radius);
|
|
84
89
|
&-title {
|
|
@@ -87,12 +92,8 @@
|
|
|
87
92
|
&:focus-visible {
|
|
88
93
|
box-shadow: var(--focus-stroke);
|
|
89
94
|
}
|
|
90
|
-
&:hover .expander-chevron {
|
|
91
|
-
background-color: var(--subtle-fill-secondary);
|
|
92
|
-
}
|
|
93
95
|
&:active .expander-chevron {
|
|
94
96
|
color: var(--text-secondary);
|
|
95
|
-
background-color: var(--subtle-fill-tertiary);
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
99
|
&-chevron {
|
|
@@ -126,10 +127,8 @@
|
|
|
126
127
|
padding: 16px;
|
|
127
128
|
transition: var(--control-fast-duration) cubic-bezier(1, 1, 0, 1) transform;
|
|
128
129
|
&-anchor {
|
|
129
|
-
max-height: 0;
|
|
130
130
|
position: relative;
|
|
131
|
-
|
|
132
|
-
transition: 0ms linear var(--control-slow-duration) max-height;
|
|
131
|
+
max-block-size: 6.02e23vmax;
|
|
133
132
|
}
|
|
134
133
|
}
|
|
135
134
|
}
|
package/Expander/Expander.svelte
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<script >// TODO: progressively enhance this
|
|
2
2
|
import { createEventDispatcher } from "svelte";
|
|
3
3
|
import { get_current_component } from "svelte/internal";
|
|
4
|
+
import { slide } from "svelte/transition";
|
|
4
5
|
import { createEventForwarder, uid } from "../internal";
|
|
6
|
+
import { expoOut } from "svelte/easing";
|
|
5
7
|
/** Determines whether the expander is expanded (open) or not. */
|
|
6
8
|
export let expanded = false;
|
|
7
9
|
/** Determines whether the expander is expandable or not. */
|
|
@@ -36,6 +38,17 @@ function handleKeydown({ key }) {
|
|
|
36
38
|
expanded = !expanded;
|
|
37
39
|
}
|
|
38
40
|
}
|
|
41
|
+
function fadeSlide(node, options) {
|
|
42
|
+
const slideTrans = slide(node, options);
|
|
43
|
+
return {
|
|
44
|
+
duration: options.duration,
|
|
45
|
+
easing: options.easing,
|
|
46
|
+
css: t => `
|
|
47
|
+
${slideTrans.css(t, options.duration)}
|
|
48
|
+
opacity: ${t};
|
|
49
|
+
`
|
|
50
|
+
};
|
|
51
|
+
}
|
|
39
52
|
</script>
|
|
40
53
|
|
|
41
54
|
<!--
|
|
@@ -55,8 +68,8 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
55
68
|
use:forwardEvents
|
|
56
69
|
class="expander direction-{direction} {className}"
|
|
57
70
|
role="region"
|
|
58
|
-
class:expanded
|
|
59
71
|
bind:this={containerElement}
|
|
72
|
+
class:expanded
|
|
60
73
|
{...$$restProps}
|
|
61
74
|
>
|
|
62
75
|
<svelte:element this="h">
|
|
@@ -114,11 +127,13 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
114
127
|
{/if}
|
|
115
128
|
</div>
|
|
116
129
|
</svelte:element>
|
|
117
|
-
|
|
118
|
-
<div class="expander-content"
|
|
119
|
-
<
|
|
130
|
+
{#if expanded}
|
|
131
|
+
<div class="expander-content-anchor" transition:fadeSlide={{ duration: 500, easing: expoOut }}>
|
|
132
|
+
<div class="expander-content" bind:this={contentElement}>
|
|
133
|
+
<slot name="content" />
|
|
134
|
+
</div>
|
|
120
135
|
</div>
|
|
121
|
-
|
|
136
|
+
{/if}
|
|
122
137
|
</div>
|
|
123
138
|
|
|
124
|
-
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0;border-start-start-radius:0
|
|
139
|
+
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none;transition:var(--fds-control-slow-duration) var(--fds-control-fast-out-slow-in-easing) transform}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-faster-duration)*1.2) linear transform var(--fds-control-faster-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>
|
package/ListItem/ListItem.scss
CHANGED
package/ListItem/ListItem.svelte
CHANGED
|
@@ -72,4 +72,4 @@ List Items display data stacked vertically in a single column. List Items work b
|
|
|
72
72
|
</li>
|
|
73
73
|
{/if}
|
|
74
74
|
|
|
75
|
-
<style >.list-item{align-items:center;background-color:var(--fds-subtle-fill-transparent);block-size:34px;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:default;display:flex;flex:0 0 auto;inline-size:calc(100% - 10px);margin:3px 5px;outline:none;padding-inline:12px;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.list-item:before{background-color:var(--fds-accent-default);block-size:16px;border-radius:3px;content:"";inline-size:3px;inset-inline-start:0;opacity:0;position:absolute;transform:scaleY(0);transition:transform var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing)}.list-item.selected:before{opacity:1;transform:scaleY(1)}.list-item:focus-visible{box-shadow:var(--fds-focus-stroke)}.list-item.selected,.list-item:hover{background-color:var(--fds-subtle-fill-secondary)}.list-item:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.list-item:active:before{transform:scaleY(.625)}.list-item.disabled{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-text-disabled);pointer-events:none}.list-item.disabled.selected{background-color:var(--fds-subtle-fill-secondary)}.list-item.disabled.selected:before{background-color:var(--fds-accent-disabled)}.list-item>:global(svg){fill:currentColor;-webkit-margin-end:16px;block-size:auto;inline-size:16px;margin-inline-end:16px}</style>
|
|
75
|
+
<style >.list-item{align-items:center;background-color:var(--fds-subtle-fill-transparent);block-size:34px;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:default;display:flex;flex:0 0 auto;inline-size:calc(100% - 10px);margin:3px 5px;outline:none;padding-inline:12px;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.list-item:before{background-color:var(--fds-accent-default);block-size:16px;border-radius:3px;content:"";inline-size:3px;inset-inline-start:0;opacity:0;position:absolute;transform:scaleY(0);transition:transform var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing)}.list-item.selected:before{opacity:1;transform:scaleY(1)}.list-item:focus-visible{box-shadow:var(--fds-focus-stroke)}.list-item.selected,.list-item:hover{background-color:var(--fds-subtle-fill-secondary)}.list-item:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.list-item:active:before{transform:scaleY(.625)}.list-item.disabled{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-text-disabled);pointer-events:none}.list-item.disabled.selected{background-color:var(--fds-subtle-fill-secondary)}.list-item.disabled.selected:before{background-color:var(--fds-accent-disabled)}.list-item>:global(svg){fill:currentColor;-webkit-margin-end:16px;block-size:auto;inline-size:16px;margin-inline-end:16px}</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fluent-svelte-extra",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.2",
|
|
4
4
|
"description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
|
|
5
5
|
"homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
|
|
6
6
|
"license": "MIT",
|
|
@@ -66,6 +66,7 @@
|
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@bulatdashiev/svelte-slider": "^1.0.3",
|
|
69
|
+
"@sveltejs/adapter-auto": "^3.1.1",
|
|
69
70
|
"fluent-svelte": "^1.6.0",
|
|
70
71
|
"focus-trap": "^6.7.3",
|
|
71
72
|
"tabbable": "^5.2.1"
|