m3-svelte 5.1.0 → 5.1.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.
Files changed (5) hide show
  1. package/package/buttons/Button.svelte +1 -0
  2. package/package/buttons/SplitButton.svelte +19 -14
  3. package/package/forms/_picker/Item.svelte +2 -2
  4. package/package/misc/styles.css +11 -15
  5. package/package.json +1 -1
package/package/buttons/Button.svelte CHANGED
@@ -61,6 +61,7 @@
61
61
  {:else}
62
62
  {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
63
63
  <button
64
+ type={"onclick" in extra ? "button" : undefined}
64
65
  class="m3-container m3-font-label-large {variant} icon-{iconType}"
65
66
  class:square
66
67
  {...extra}
package/package/buttons/SplitButton.svelte CHANGED
@@ -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/forms/_picker/Item.svelte CHANGED
@@ -17,9 +17,9 @@
17
17
  </script>
18
18
 
19
19
  <button
20
- {disabled}
21
- class="item m3-font-body-small"
22
20
  type="button"
21
+ class="item m3-font-body-small"
22
+ {disabled}
23
23
  class:today
24
24
  class:selected
25
25
  {onclick}
package/package/misc/styles.css CHANGED
@@ -2,25 +2,20 @@
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
+ 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3), /* Spot */
6
+ 0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15); /* Ambient */
8
7
  --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);
8
+ 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
9
+ 0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
12
10
  --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);
11
+ 0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
12
+ 0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
16
13
  --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);
14
+ 0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
15
+ 0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
20
16
  --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);
17
+ 0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
18
+ 0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
24
19
  --m3-util-bottom-offset: 0;
25
20
 
26
21
  /* Shapes */
@@ -31,6 +26,7 @@
31
26
  --m3-util-rounding-large: 16px;
32
27
  --m3-util-rounding-extra-large: 28px;
33
28
  --m3-util-rounding-full: 9999px;
29
+ --m3-util-optical-centering-coefficient: 0.11;
34
30
 
35
31
  --m3-font: Roboto, system-ui, sans-serif;
36
32
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.1.0",
3
+ "version": "5.1.2",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {