m3-svelte 5.1.1 → 5.2.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.
Files changed (8) hide show
  1. package/package/buttons/Button.svelte +1 -1
  2. package/package/buttons/SplitButton.svelte +20 -15
  3. package/package/containers/ListItem.svelte +6 -6
  4. package/package/containers/Menu.svelte +0 -1
  5. package/package/containers/MenuItem.svelte +2 -2
  6. package/package/misc/recommended-styles.css +8 -8
  7. package/package/misc/styles.css +16 -15
  8. package/package.json +1 -1
package/package/buttons/Button.svelte CHANGED
@@ -79,7 +79,7 @@
79
79
  .m3-container {
80
80
  display: inline-flex;
81
81
  border: none;
82
- height: 2.5rem;
82
+ height: calc(2.5rem + var(--m3-util-density-term));
83
83
  gap: 0.5rem;
84
84
  padding: 0 1rem;
85
85
  border-radius: var(--m3-button-shape);
package/package/buttons/SplitButton.svelte CHANGED
@@ -91,7 +91,7 @@
91
91
  display: flex;
92
92
  align-items: center;
93
93
  justify-content: center;
94
- height: 2.5rem;
94
+ height: calc(2.5rem + var(--m3-util-density-term));
95
95
  gap: 0.5rem;
96
96
 
97
97
  cursor: pointer;
@@ -101,8 +101,7 @@
101
101
  position: relative;
102
102
  transition:
103
103
  box-shadow var(--m3-util-easing-fast),
104
- border-radius var(--m3-util-easing-fast),
105
- padding var(--m3-util-easing-fast);
104
+ border-radius var(--m3-util-easing-fast);
106
105
  }
107
106
 
108
107
  button {
@@ -129,21 +128,21 @@
129
128
  position: relative;
130
129
  }
131
130
  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);
131
+ width: 3rem;
132
+
133
+ --inner-shape: var(--m3-split-button-inner-shape);
134
+ --outer-shape: var(--m3-split-button-outer-shape);
135
+ border-start-start-radius: var(--inner-shape);
136
+ border-end-start-radius: var(--inner-shape);
137
+ border-start-end-radius: var(--outer-shape);
138
+ border-end-end-radius: var(--outer-shape);
139
+
136
140
  &:hover,
137
141
  &:active {
138
- border-start-start-radius: var(--m3-split-button-half-shape);
139
- border-end-start-radius: var(--m3-split-button-half-shape);
142
+ --inner-shape: var(--m3-split-button-half-shape);
140
143
  }
141
- border-start-end-radius: var(--m3-split-button-outer-shape);
142
- border-end-end-radius: var(--m3-split-button-outer-shape);
143
144
  &: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);
145
+ --inner-shape: var(--m3-split-button-outer-shape);
147
146
  > :global(.tint) {
148
147
  opacity: 0.08;
149
148
  }
@@ -152,7 +151,13 @@
152
151
  }
153
152
  }
154
153
  > :global(svg) {
155
- transition: rotate var(--m3-util-easing-fast);
154
+ /* Push away from the most rounded side */
155
+ --shape-delta: calc(var(--inner-shape) - var(--outer-shape));
156
+ --correction: calc(var(--m3-util-optical-centering-coefficient) * var(--shape-delta));
157
+ translate: var(--correction) 0;
158
+ transition:
159
+ rotate var(--m3-util-easing-fast),
160
+ translate var(--m3-util-easing-fast);
156
161
  }
157
162
  }
158
163
  details > :global(:not(summary)) :global {
package/package/containers/ListItem.svelte CHANGED
@@ -62,19 +62,19 @@
62
62
  label: _,
63
63
  ...extra
64
64
  } = props}
65
- <label class="m3-container lines-{_lines}" {...extra}>
65
+ <label class="m3-container focus-inset lines-{_lines}" {...extra}>
66
66
  <Layer />
67
67
  {@render content(leading, overline, headline, supporting, trailing)}
68
68
  </label>
69
69
  {:else if "onclick" in props}
70
70
  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
71
- <button type="button" class="m3-container lines-{_lines}" {...extra}>
71
+ <button type="button" class="m3-container focus-inset lines-{_lines}" {...extra}>
72
72
  <Layer />
73
73
  {@render content(leading, overline, headline, supporting, trailing)}
74
74
  </button>
75
75
  {:else if "href" in props}
76
76
  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
77
- <a class="m3-container lines-{_lines}" {...extra}>
77
+ <a class="m3-container focus-inset lines-{_lines}" {...extra}>
78
78
  <Layer />
79
79
  {@render content(leading, overline, headline, supporting, trailing)}
80
80
  </a>
@@ -104,13 +104,13 @@
104
104
  cursor: pointer;
105
105
  }
106
106
  .lines-1 {
107
- height: 3.5rem;
107
+ height: calc(3.5rem + var(--m3-util-density-term));
108
108
  }
109
109
  .lines-2 {
110
- height: 4.5rem;
110
+ height: calc(4.5rem + var(--m3-util-density-term));
111
111
  }
112
112
  .lines-3 {
113
- height: 5.5rem;
113
+ height: calc(5.5rem + var(--m3-util-density-term));
114
114
  padding-top: 0.75rem;
115
115
  padding-bottom: 0.75rem;
116
116
  align-items: flex-start;
package/package/containers/Menu.svelte CHANGED
@@ -15,7 +15,6 @@
15
15
  .m3-container {
16
16
  display: flex;
17
17
  position: relative;
18
- overflow: hidden;
19
18
  flex-direction: column;
20
19
  padding: 0.5rem 0;
21
20
  border-radius: var(--m3-menu-shape);
package/package/containers/MenuItem.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  } = $props();
18
18
  </script>
19
19
 
20
- <button type="button" class="item m3-font-label-large" {disabled} {onclick}>
20
+ <button type="button" class="item focus-inset m3-font-label-large" {disabled} {onclick}>
21
21
  <Layer />
22
22
  {#if icon == "space"}
23
23
  <span class="icon"></span>
@@ -33,7 +33,7 @@
33
33
  .item {
34
34
  display: flex;
35
35
  align-items: center;
36
- height: 3rem;
36
+ height: calc(3rem + var(--m3-util-density-term));
37
37
  padding: 0 0.75rem;
38
38
  white-space: nowrap;
39
39
 
package/package/misc/recommended-styles.css CHANGED
@@ -1,31 +1,31 @@
1
1
  :root {
2
- --m3-util-refocus: refocus-one 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
2
+ --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
3
3
  }
4
4
  :focus-visible:not(.focus-inset, .focus-none) {
5
5
  animation: var(--m3-util-refocus);
6
6
  outline: none;
7
7
  }
8
8
  :focus-visible:is(.focus-inset):not(.focus-none) {
9
- animation: refocus-simple 0.3s forwards cubic-bezier(0.05, 0.7, 0.1, 1);
9
+ animation: refocus-inward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
10
10
  outline: none;
11
11
  }
12
12
  :focus-visible.focus-none {
13
13
  outline: none;
14
14
  }
15
- @keyframes refocus-one {
15
+ @keyframes refocus-outward {
16
16
  0% {
17
- box-shadow: 0 0 0 0px rgb(var(--m3-scheme-primary));
17
+ box-shadow: 0 0 0 0px rgb(var(--m3-scheme-secondary));
18
18
  }
19
19
  100% {
20
- box-shadow: 0 0 0 3px rgb(var(--m3-scheme-primary));
20
+ box-shadow: 0 0 0 3px rgb(var(--m3-scheme-secondary));
21
21
  }
22
22
  }
23
- @keyframes refocus-simple {
23
+ @keyframes refocus-inward {
24
24
  0% {
25
- box-shadow: inset 0 0 0 0px rgb(var(--m3-scheme-primary));
25
+ box-shadow: inset 0 0 0 0px rgb(var(--m3-scheme-secondary));
26
26
  }
27
27
  100% {
28
- box-shadow: inset 0 0 0 3px rgb(var(--m3-scheme-primary));
28
+ box-shadow: inset 0 0 0 3px rgb(var(--m3-scheme-secondary));
29
29
  }
30
30
  }
31
31
 
package/package/misc/styles.css CHANGED
@@ -2,26 +2,26 @@
2
2
  :root {
3
3
  --m3-util-elevation-0: none;
4
4
  --m3-util-elevation-1:
5
- 0px 3px 1px -2px rgb(var(--m3-scheme-shadow) / 0.2),
6
- 0px 2px 2px 0px rgb(var(--m3-scheme-shadow) / 0.14),
7
- 0px 1px 5px 0px rgb(var(--m3-scheme-shadow) / 0.12);
5
+ /* Spot */
6
+ 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
7
+ /* Ambient */ 0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15);
8
8
  --m3-util-elevation-2:
9
- 0px 2px 4px -1px rgb(var(--m3-scheme-shadow) / 0.2),
10
- 0px 4px 5px 0px rgb(var(--m3-scheme-shadow) / 0.14),
11
- 0px 1px 10px 0px rgb(var(--m3-scheme-shadow) / 0.12);
9
+ 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
10
+ 0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
12
11
  --m3-util-elevation-3:
13
- 0px 5px 5px -3px rgb(var(--m3-scheme-shadow) / 0.2),
14
- 0px 8px 10px 1px rgb(var(--m3-scheme-shadow) / 0.14),
15
- 0px 3px 14px 2px rgb(var(--m3-scheme-shadow) / 0.12);
12
+ 0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
13
+ 0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
16
14
  --m3-util-elevation-4:
17
- 0px 5px 5px -3px rgb(var(--m3-scheme-shadow) / 0.2),
18
- 0px 8px 10px 1px rgb(var(--m3-scheme-shadow) / 0.14),
19
- 0px 3px 14px 2px rgb(var(--m3-scheme-shadow) / 0.12);
15
+ 0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
16
+ 0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
20
17
  --m3-util-elevation-5:
21
- 0px 8px 10px -6px rgb(var(--m3-scheme-shadow) / 0.2),
22
- 0px 16px 24px 2px rgb(var(--m3-scheme-shadow) / 0.14),
23
- 0px 6px 30px 5px rgb(var(--m3-scheme-shadow) / 0.12);
18
+ 0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
19
+ 0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
20
+
21
+ /* Sizing */
24
22
  --m3-util-bottom-offset: 0;
23
+ --m3-util-density: 0;
24
+ --m3-util-density-term: calc(var(--m3-util-density) * 0.25rem);
25
25
 
26
26
  /* Shapes */
27
27
  --m3-util-rounding-none: 0;
@@ -31,6 +31,7 @@
31
31
  --m3-util-rounding-large: 16px;
32
32
  --m3-util-rounding-extra-large: 28px;
33
33
  --m3-util-rounding-full: 9999px;
34
+ --m3-util-optical-centering-coefficient: 0.11;
34
35
 
35
36
  --m3-font: Roboto, system-ui, sans-serif;
36
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.1.1",
3
+ "version": "5.2.0",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {