m3-svelte 4.4.0 → 4.5.0
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,178 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import iconExpand from "@ktibow/iconset-material-symbols/keyboard-arrow-down";
|
|
3
|
+
import type { Snippet } from "svelte";
|
|
4
|
+
import Layer from "../misc/Layer.svelte";
|
|
5
|
+
import Icon from "../misc/_icon.svelte";
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
variant,
|
|
9
|
+
x = "inner",
|
|
10
|
+
y = "down",
|
|
11
|
+
children,
|
|
12
|
+
menu,
|
|
13
|
+
click,
|
|
14
|
+
}: {
|
|
15
|
+
variant: "elevated" | "filled" | "tonal" | "outlined";
|
|
16
|
+
x?: "inner" | "right";
|
|
17
|
+
y?: "down" | "up";
|
|
18
|
+
children: Snippet;
|
|
19
|
+
menu: Snippet;
|
|
20
|
+
click: () => void;
|
|
21
|
+
} = $props();
|
|
22
|
+
|
|
23
|
+
const autoclose = (node: HTMLDetailsElement) => {
|
|
24
|
+
const close = (e: Event) => {
|
|
25
|
+
if (e.target instanceof Element && e.target.closest("summary")) return;
|
|
26
|
+
|
|
27
|
+
node.open = false;
|
|
28
|
+
};
|
|
29
|
+
window.addEventListener("click", close);
|
|
30
|
+
return {
|
|
31
|
+
destroy() {
|
|
32
|
+
window.removeEventListener("click", close);
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<div class="m3-container {variant}">
|
|
39
|
+
<button class="split m3-font-label-large" onclick={click}>
|
|
40
|
+
<Layer />
|
|
41
|
+
{@render children()}
|
|
42
|
+
</button>
|
|
43
|
+
<details class="align-{x} align-{y}" use:autoclose>
|
|
44
|
+
<summary class="split">
|
|
45
|
+
<Layer />
|
|
46
|
+
<Icon icon={iconExpand} width="1.375rem" height="1.375rem" />
|
|
47
|
+
</summary>
|
|
48
|
+
{@render menu()}
|
|
49
|
+
</details>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<style>
|
|
53
|
+
:root {
|
|
54
|
+
--m3-split-button-outer-shape: 1.25rem;
|
|
55
|
+
--m3-split-button-half-shape: var(--m3-util-rounding-medium);
|
|
56
|
+
--m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.m3-container {
|
|
60
|
+
display: inline-grid;
|
|
61
|
+
grid-template-columns: 1fr auto;
|
|
62
|
+
gap: 0.125rem;
|
|
63
|
+
|
|
64
|
+
&.elevated .split {
|
|
65
|
+
background-color: rgb(var(--m3-scheme-surface-container-low));
|
|
66
|
+
color: rgb(var(--m3-scheme-primary));
|
|
67
|
+
box-shadow: var(--m3-util-elevation-1);
|
|
68
|
+
&:hover {
|
|
69
|
+
box-shadow: var(--m3-util-elevation-2);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.filled .split {
|
|
74
|
+
background-color: rgb(var(--m3-scheme-primary));
|
|
75
|
+
color: rgb(var(--m3-scheme-on-primary));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.tonal .split {
|
|
79
|
+
background-color: rgb(var(--m3-scheme-secondary-container));
|
|
80
|
+
color: rgb(var(--m3-scheme-on-secondary-container));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
&.outlined .split {
|
|
84
|
+
outline: 1px solid rgb(var(--m3-scheme-outline-variant));
|
|
85
|
+
outline-offset: -1px;
|
|
86
|
+
color: rgb(var(--m3-scheme-on-surface-variant));
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.split {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
height: 2.5rem;
|
|
95
|
+
gap: 0.5rem;
|
|
96
|
+
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
background-color: transparent;
|
|
99
|
+
border: none;
|
|
100
|
+
|
|
101
|
+
position: relative;
|
|
102
|
+
transition:
|
|
103
|
+
box-shadow var(--m3-util-easing-fast),
|
|
104
|
+
border-radius var(--m3-util-easing-fast),
|
|
105
|
+
padding var(--m3-util-easing-fast);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
button {
|
|
109
|
+
padding-inline-start: 1rem;
|
|
110
|
+
padding-inline-end: 0.75rem;
|
|
111
|
+
border-start-start-radius: var(--m3-split-button-outer-shape);
|
|
112
|
+
border-end-start-radius: var(--m3-split-button-outer-shape);
|
|
113
|
+
border-start-end-radius: var(--m3-split-button-inner-shape);
|
|
114
|
+
border-end-end-radius: var(--m3-split-button-inner-shape);
|
|
115
|
+
&:hover,
|
|
116
|
+
&:active {
|
|
117
|
+
border-start-end-radius: var(--m3-split-button-half-shape);
|
|
118
|
+
border-end-end-radius: var(--m3-split-button-half-shape);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
> :global(svg) {
|
|
122
|
+
width: 1.25rem;
|
|
123
|
+
height: 1.25rem;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
details {
|
|
128
|
+
display: flex;
|
|
129
|
+
position: relative;
|
|
130
|
+
}
|
|
131
|
+
summary {
|
|
132
|
+
padding-inline-start: 0.75rem;
|
|
133
|
+
padding-inline-end: 0.875rem;
|
|
134
|
+
border-start-start-radius: var(--m3-split-button-inner-shape);
|
|
135
|
+
border-end-start-radius: var(--m3-split-button-inner-shape);
|
|
136
|
+
&:hover,
|
|
137
|
+
&:active {
|
|
138
|
+
border-start-start-radius: var(--m3-split-button-half-shape);
|
|
139
|
+
border-end-start-radius: var(--m3-split-button-half-shape);
|
|
140
|
+
}
|
|
141
|
+
border-start-end-radius: var(--m3-split-button-outer-shape);
|
|
142
|
+
border-end-end-radius: var(--m3-split-button-outer-shape);
|
|
143
|
+
&:is(details[open] summary) {
|
|
144
|
+
padding-inline-start: 0.8125rem;
|
|
145
|
+
padding-inline-end: 0.8125rem;
|
|
146
|
+
border-radius: var(--m3-split-button-outer-shape);
|
|
147
|
+
> :global(.tint) {
|
|
148
|
+
opacity: 0.08;
|
|
149
|
+
}
|
|
150
|
+
> :global(svg) {
|
|
151
|
+
rotate: 180deg;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
> :global(svg) {
|
|
155
|
+
transition: rotate var(--m3-util-easing-fast);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
details > :global(:not(summary)) :global {
|
|
159
|
+
position: absolute !important;
|
|
160
|
+
&:is(details.align-inner > *) {
|
|
161
|
+
left: 0;
|
|
162
|
+
}
|
|
163
|
+
&:is(details.align-right > *) {
|
|
164
|
+
right: 0;
|
|
165
|
+
}
|
|
166
|
+
&:is(details.align-down > *) {
|
|
167
|
+
top: 100%;
|
|
168
|
+
}
|
|
169
|
+
&:is(details.align-up > *) {
|
|
170
|
+
bottom: 100%;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.m3-container {
|
|
175
|
+
print-color-adjust: exact;
|
|
176
|
+
-webkit-print-color-adjust: exact;
|
|
177
|
+
}
|
|
178
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Snippet } from "svelte";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
variant: "elevated" | "filled" | "tonal" | "outlined";
|
|
4
|
+
x?: "inner" | "right";
|
|
5
|
+
y?: "down" | "up";
|
|
6
|
+
children: Snippet;
|
|
7
|
+
menu: Snippet;
|
|
8
|
+
click: () => void;
|
|
9
|
+
};
|
|
10
|
+
declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
11
|
+
type SplitButton = ReturnType<typeof SplitButton>;
|
|
12
|
+
export default SplitButton;
|
package/package/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from "./misc/easing.js";
|
|
|
7
7
|
export { default as Button } from "./buttons/Button.svelte";
|
|
8
8
|
export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
|
|
9
9
|
export { default as FAB } from "./buttons/FAB.svelte";
|
|
10
|
+
export { default as SplitButton } from "./buttons/SplitButton.svelte";
|
|
10
11
|
export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
|
|
11
12
|
export { default as BottomSheet } from "./containers/BottomSheet.svelte";
|
|
12
13
|
export { default as Card } from "./containers/Card.svelte";
|
package/package/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export * from "./misc/easing.js";
|
|
|
7
7
|
export { default as Button } from "./buttons/Button.svelte";
|
|
8
8
|
export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
|
|
9
9
|
export { default as FAB } from "./buttons/FAB.svelte";
|
|
10
|
+
export { default as SplitButton } from "./buttons/SplitButton.svelte";
|
|
10
11
|
export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
|
|
11
12
|
export { default as BottomSheet } from "./containers/BottomSheet.svelte";
|
|
12
13
|
export { default as Card } from "./containers/Card.svelte";
|
package/package/misc/colors.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "m3-svelte",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.5.0",
|
|
4
4
|
"license": "Apache-2.0 OR GPL-3.0-only",
|
|
5
5
|
"repository": "KTibow/m3-svelte",
|
|
6
6
|
"author": {
|
|
@@ -30,29 +30,29 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@iconify/types": "^2.0.0",
|
|
33
|
-
"@ktibow/iconset-material-symbols": "^0.0.
|
|
34
|
-
"@ktibow/material-color-utilities-nightly": "^0.3.
|
|
35
|
-
"svelte": "^5.34.
|
|
33
|
+
"@ktibow/iconset-material-symbols": "^0.0.1750223537",
|
|
34
|
+
"@ktibow/material-color-utilities-nightly": "^0.3.11750642744987",
|
|
35
|
+
"svelte": "^5.34.7"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@eslint/compat": "^1.3.0",
|
|
39
39
|
"@eslint/js": "^9.29.0",
|
|
40
40
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
41
|
-
"@sveltejs/kit": "^2.
|
|
41
|
+
"@sveltejs/kit": "^2.22.0",
|
|
42
42
|
"@sveltejs/package": "^2.3.11",
|
|
43
43
|
"@sveltejs/vite-plugin-svelte": "^5.1.0",
|
|
44
44
|
"eslint": "^9.27.0",
|
|
45
45
|
"eslint-config-prettier": "^10.1.5",
|
|
46
|
-
"eslint-plugin-svelte": "^3.9.
|
|
46
|
+
"eslint-plugin-svelte": "^3.9.3",
|
|
47
47
|
"fast-glob": "^3.3.3",
|
|
48
48
|
"globals": "^16.2.0",
|
|
49
|
-
"prettier": "^3.
|
|
49
|
+
"prettier": "^3.6.0",
|
|
50
50
|
"prettier-plugin-svelte": "^3.4.0",
|
|
51
51
|
"publint": "^0.3.12",
|
|
52
|
-
"svelte-check": "^4.2.
|
|
52
|
+
"svelte-check": "^4.2.2",
|
|
53
53
|
"svelte-highlight": "^7.8.3",
|
|
54
54
|
"typescript": "^5.8.3",
|
|
55
|
-
"typescript-eslint": "^8.
|
|
55
|
+
"typescript-eslint": "^8.35.0",
|
|
56
56
|
"vite": "^6.3.5"
|
|
57
57
|
},
|
|
58
58
|
"keywords": [
|