m3-svelte 5.15.3 → 5.15.5

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 (23) hide show
  1. package/package/buttons/FAB.svelte +6 -4
  2. package/package/buttons/SplitButton.svelte +6 -4
  3. package/package/containers/BottomSheet.svelte +4 -2
  4. package/package/containers/Card.svelte +4 -2
  5. package/package/containers/Dialog.svelte +4 -2
  6. package/package/containers/Menu.svelte +4 -2
  7. package/package/containers/SnackbarItem.svelte +4 -2
  8. package/package/forms/Chip.svelte +4 -2
  9. package/package/forms/DateField.svelte +4 -2
  10. package/package/forms/DateFieldOutlined.svelte +4 -2
  11. package/package/forms/DatePickerDocked.svelte +4 -2
  12. package/package/forms/LinearProgressIndeterminate.svelte +4 -2
  13. package/package/forms/Select.svelte +5 -3
  14. package/package/forms/SelectOutlined.svelte +5 -3
  15. package/package/forms/Slider.svelte +6 -4
  16. package/package/forms/Switch.svelte +5 -3
  17. package/package/forms/TextField.svelte +8 -3
  18. package/package/forms/TextFieldMultiline.svelte +8 -3
  19. package/package/forms/TextFieldOutlined.svelte +8 -6
  20. package/package/forms/TextFieldOutlinedMultiline.svelte +8 -6
  21. package/package/misc/recommended-styles.css +4 -2
  22. package/package/misc/styles.css +145 -143
  23. package/package.json +1 -1
package/package/buttons/FAB.svelte CHANGED
@@ -51,10 +51,12 @@
51
51
  </button>
52
52
 
53
53
  <style>
54
- :root {
55
- --m3-fab-small-shape: var(--m3-util-rounding-small);
56
- --m3-fab-normal-shape: var(--m3-util-rounding-large);
57
- --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
54
+ @layer tokens {
55
+ :root {
56
+ --m3-fab-small-shape: var(--m3-util-rounding-small);
57
+ --m3-fab-normal-shape: var(--m3-util-rounding-large);
58
+ --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
59
+ }
58
60
  }
59
61
  button {
60
62
  display: inline-flex;
package/package/buttons/SplitButton.svelte CHANGED
@@ -50,10 +50,12 @@
50
50
  </div>
51
51
 
52
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);
53
+ @layer tokens {
54
+ :root {
55
+ --m3-split-button-outer-shape: 1.25rem;
56
+ --m3-split-button-half-shape: var(--m3-util-rounding-medium);
57
+ --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
58
+ }
57
59
  }
58
60
 
59
61
  .m3-container {
package/package/containers/BottomSheet.svelte CHANGED
@@ -90,8 +90,10 @@
90
90
  </dialog>
91
91
 
92
92
  <style>
93
- :root {
94
- --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
93
+ @layer tokens {
94
+ :root {
95
+ --m3-bottom-sheet-shape: var(--m3-util-rounding-extra-large);
96
+ }
95
97
  }
96
98
 
97
99
  .m3-container {
package/package/containers/Card.svelte CHANGED
@@ -27,8 +27,10 @@
27
27
  {/if}
28
28
 
29
29
  <style>
30
- :root {
31
- --m3-card-shape: var(--m3-util-rounding-medium);
30
+ @layer tokens {
31
+ :root {
32
+ --m3-card-shape: var(--m3-util-rounding-medium);
33
+ }
32
34
  }
33
35
 
34
36
  .m3-container {
package/package/containers/Dialog.svelte CHANGED
@@ -76,8 +76,10 @@
76
76
  </dialog>
77
77
 
78
78
  <style>
79
- :root {
80
- --m3-dialog-shape: var(--m3-util-rounding-extra-large);
79
+ @layer tokens {
80
+ :root {
81
+ --m3-dialog-shape: var(--m3-util-rounding-extra-large);
82
+ }
81
83
  }
82
84
  dialog {
83
85
  display: flex;
package/package/containers/Menu.svelte CHANGED
@@ -9,8 +9,10 @@
9
9
  </div>
10
10
 
11
11
  <style>
12
- :root {
13
- --m3-menu-shape: var(--m3-util-rounding-extra-small);
12
+ @layer tokens {
13
+ :root {
14
+ --m3-menu-shape: var(--m3-util-rounding-extra-small);
15
+ }
14
16
  }
15
17
  .m3-container {
16
18
  display: flex;
package/package/containers/SnackbarItem.svelte CHANGED
@@ -10,8 +10,10 @@
10
10
  </div>
11
11
 
12
12
  <style>
13
- :root {
14
- --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
13
+ @layer tokens {
14
+ :root {
15
+ --m3-snackbar-shape: var(--m3-util-rounding-extra-small);
16
+ }
15
17
  }
16
18
  .m3-container {
17
19
  display: flex;
package/package/forms/Chip.svelte CHANGED
@@ -60,8 +60,10 @@
60
60
  {/if}
61
61
 
62
62
  <style>
63
- :root {
64
- --m3-chip-shape: var(--m3-util-rounding-small);
63
+ @layer tokens {
64
+ :root {
65
+ --m3-chip-shape: var(--m3-util-rounding-small);
66
+ }
65
67
  }
66
68
  .m3-container {
67
69
  display: flex;
package/package/forms/DateField.svelte CHANGED
@@ -111,8 +111,10 @@ opacity: ${Math.min(t * 3, 1)};`,
111
111
  margin-block-end: 1rem;
112
112
  }
113
113
 
114
- :root {
115
- --m3-datefield-shape: var(--m3-util-rounding-extra-small);
114
+ @layer tokens {
115
+ :root {
116
+ --m3-datefield-shape: var(--m3-util-rounding-extra-small);
117
+ }
116
118
  }
117
119
  .m3-container {
118
120
  position: relative;
package/package/forms/DateFieldOutlined.svelte CHANGED
@@ -116,8 +116,10 @@ opacity: ${Math.min(t * 3, 1)};`,
116
116
  want to customize the label's background?
117
117
  do this: <DateFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
118
118
  */
119
- :root {
120
- --m3-datefield-outlined-shape: var(--m3-util-rounding-extra-small);
119
+ @layer tokens {
120
+ :root {
121
+ --m3-datefield-outlined-shape: var(--m3-util-rounding-extra-small);
122
+ }
121
123
  }
122
124
  .m3-container {
123
125
  display: inline-flex;
package/package/forms/DatePickerDocked.svelte CHANGED
@@ -81,8 +81,10 @@
81
81
  </div>
82
82
 
83
83
  <style>
84
- :root {
85
- --m3-date-picker-shape: var(--m3-util-rounding-large);
84
+ @layer tokens {
85
+ :root {
86
+ --m3-date-picker-shape: var(--m3-util-rounding-large);
87
+ }
86
88
  }
87
89
 
88
90
  .m3-container {
package/package/forms/LinearProgressIndeterminate.svelte CHANGED
@@ -13,8 +13,10 @@
13
13
  </div>
14
14
 
15
15
  <style>
16
- :root {
17
- --m3-linear-progress-shape: var(--m3-util-rounding-full);
16
+ @layer tokens {
17
+ :root {
18
+ --m3-linear-progress-shape: var(--m3-util-rounding-full);
19
+ }
18
20
  }
19
21
  .m3-container {
20
22
  display: inline-flex;
package/package/forms/Select.svelte CHANGED
@@ -45,9 +45,11 @@
45
45
  </div>
46
46
 
47
47
  <style>
48
- :root {
49
- --m3-menu-shape: var(--m3-util-rounding-extra-small);
50
- --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
48
+ @layer tokens {
49
+ :root {
50
+ --m3-menu-shape: var(--m3-util-rounding-extra-small);
51
+ --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
52
+ }
51
53
  }
52
54
 
53
55
  .m3-container {
package/package/forms/SelectOutlined.svelte CHANGED
@@ -50,9 +50,11 @@
50
50
  want to customize the label's background?
51
51
  do this: <SelectOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
52
52
  */
53
- :root {
54
- --m3-menu-shape: var(--m3-util-rounding-extra-small);
55
- --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
53
+ @layer tokens {
54
+ :root {
55
+ --m3-menu-shape: var(--m3-util-rounding-extra-small);
56
+ --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
57
+ }
56
58
  }
57
59
 
58
60
  .m3-container {
package/package/forms/Slider.svelte CHANGED
@@ -116,10 +116,12 @@
116
116
  </div>
117
117
 
118
118
  <style>
119
- :root {
120
- --m3-slider-track-out-shape: 0.5rem;
121
- --m3-slider-track-in-shape: 0.125rem;
122
- --m3-slider-handle-shape: var(--m3-util-rounding-full);
119
+ @layer tokens {
120
+ :root {
121
+ --m3-slider-track-out-shape: 0.5rem;
122
+ --m3-slider-track-in-shape: 0.125rem;
123
+ --m3-slider-handle-shape: var(--m3-util-rounding-full);
124
+ }
123
125
  }
124
126
 
125
127
  .m3-container {
package/package/forms/Switch.svelte CHANGED
@@ -68,9 +68,11 @@
68
68
  </div>
69
69
 
70
70
  <style>
71
- :root {
72
- --m3-switch-track-shape: var(--m3-util-rounding-full);
73
- --m3-switch-handle-shape: var(--m3-util-rounding-full);
71
+ @layer tokens {
72
+ :root {
73
+ --m3-switch-track-shape: var(--m3-util-rounding-full);
74
+ --m3-switch-handle-shape: var(--m3-util-rounding-full);
75
+ }
74
76
  }
75
77
  .m3-container {
76
78
  display: inline-flex;
package/package/forms/TextField.svelte CHANGED
@@ -61,9 +61,14 @@
61
61
  </div>
62
62
 
63
63
  <style>
64
- :root {
65
- /* "textfield" is deprecated */
66
- --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
64
+ @layer tokens {
65
+ :root {
66
+ /* "textfield" is deprecated */
67
+ --m3-field-filled-shape: var(
68
+ --m3-textfield-filled-shape,
69
+ var(--m3-util-rounding-extra-small)
70
+ );
71
+ }
67
72
  }
68
73
 
69
74
  .m3-container {
package/package/forms/TextFieldMultiline.svelte CHANGED
@@ -56,9 +56,14 @@
56
56
  </div>
57
57
 
58
58
  <style>
59
- :root {
60
- /* "textfield" is deprecated */
61
- --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
59
+ @layer tokens {
60
+ :root {
61
+ /* "textfield" is deprecated */
62
+ --m3-field-filled-shape: var(
63
+ --m3-textfield-filled-shape,
64
+ var(--m3-util-rounding-extra-small)
65
+ );
66
+ }
62
67
  }
63
68
  .m3-container {
64
69
  display: inline-flex;
package/package/forms/TextFieldOutlined.svelte CHANGED
@@ -65,12 +65,14 @@
65
65
  want to customize the label's background?
66
66
  do this: <TextFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
67
67
  */
68
- :root {
69
- /* "textfield" is deprecated */
70
- --m3-field-outlined-shape: var(
71
- --m3-textfield-outlined-shape,
72
- var(--m3-util-rounding-extra-small)
73
- );
68
+ @layer tokens {
69
+ :root {
70
+ /* "textfield" is deprecated */
71
+ --m3-field-outlined-shape: var(
72
+ --m3-textfield-outlined-shape,
73
+ var(--m3-util-rounding-extra-small)
74
+ );
75
+ }
74
76
  }
75
77
  .m3-container {
76
78
  display: inline-flex;
package/package/forms/TextFieldOutlinedMultiline.svelte CHANGED
@@ -60,12 +60,14 @@
60
60
  want to customize the label's background?
61
61
  do this: <TextFieldOutlinedMultiline --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
62
62
  */
63
- :root {
64
- /* "textfield" is deprecated */
65
- --m3-field-outlined-shape: var(
66
- --m3-textfield-outlined-shape,
67
- var(--m3-util-rounding-extra-small)
68
- );
63
+ @layer tokens {
64
+ :root {
65
+ /* "textfield" is deprecated */
66
+ --m3-field-outlined-shape: var(
67
+ --m3-textfield-outlined-shape,
68
+ var(--m3-util-rounding-extra-small)
69
+ );
70
+ }
69
71
  }
70
72
  .m3-container {
71
73
  display: inline-flex;
package/package/misc/recommended-styles.css CHANGED
@@ -1,5 +1,7 @@
1
- :root {
2
- --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
1
+ @layer tokens {
2
+ :root {
3
+ --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
4
+ }
3
5
  }
4
6
  :focus-visible:not(.focus-inset, .focus-none) {
5
7
  animation: var(--m3-util-refocus);
package/package/misc/styles.css CHANGED
@@ -8,161 +8,163 @@
8
8
  inherits: true;
9
9
  initial-value: 0;
10
10
  }
11
- :root {
12
- /* Needed for elevation to work */
13
- --m3-util-elevation-0: none;
14
- --m3-util-elevation-1:
11
+ @layer tokens {
12
+ :root {
13
+ /* Needed for elevation to work */
14
+ --m3-util-elevation-0: none;
15
+ --m3-util-elevation-1:
15
16
  /* Spot */
16
- 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
17
- /* Ambient */ 0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15);
18
- --m3-util-elevation-2:
19
- 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
20
- 0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
21
- --m3-util-elevation-3:
22
- 0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
23
- 0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
24
- --m3-util-elevation-4:
25
- 0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
26
- 0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
27
- --m3-util-elevation-5:
28
- 0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
29
- 0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
17
+ 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
18
+ /* Ambient */ 0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15);
19
+ --m3-util-elevation-2:
20
+ 0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
21
+ 0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
22
+ --m3-util-elevation-3:
23
+ 0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
24
+ 0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
25
+ --m3-util-elevation-4:
26
+ 0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
27
+ 0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
28
+ --m3-util-elevation-5:
29
+ 0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
30
+ 0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
30
31
 
31
- /* Sizing */
32
- --m3-util-density-term: calc(var(--m3-util-density) * 0.25rem);
32
+ /* Sizing */
33
+ --m3-util-density-term: calc(var(--m3-util-density) * 0.25rem);
33
34
 
34
- /* Shapes */
35
- --m3-util-rounding-none: 0;
36
- --m3-util-rounding-extra-small: 4px;
37
- --m3-util-rounding-small: 8px;
38
- --m3-util-rounding-medium: 12px;
39
- --m3-util-rounding-large: 16px;
40
- --m3-util-rounding-extra-large: 28px;
41
- --m3-util-rounding-full: calc(infinity * 1px);
42
- --m3-util-optical-centering-coefficient: 0.11;
35
+ /* Shapes */
36
+ --m3-util-rounding-none: 0;
37
+ --m3-util-rounding-extra-small: 4px;
38
+ --m3-util-rounding-small: 8px;
39
+ --m3-util-rounding-medium: 12px;
40
+ --m3-util-rounding-large: 16px;
41
+ --m3-util-rounding-extra-large: 28px;
42
+ --m3-util-rounding-full: calc(infinity * 1px);
43
+ --m3-util-optical-centering-coefficient: 0.11;
43
44
 
44
- /* Typography */
45
- --m3-font: Roboto, system-ui;
46
- --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
47
- --m3-font-display: var(--m3-font);
48
- --m3-font-headline: var(--m3-font);
49
- --m3-font-title: var(--m3-font);
50
- --m3-font-label: var(--m3-font);
51
- --m3-font-body: var(--m3-font);
52
- --m3-font-display-large-size: 3.563rem;
53
- --m3-font-display-large-height: 1.123;
54
- --m3-font-display-large-tracking: 0;
55
- --m3-font-display-large-weight: 400;
56
- --m3-font-display-medium-size: 2.813rem;
57
- --m3-font-display-medium-height: 1.156;
58
- --m3-font-display-medium-tracking: 0;
59
- --m3-font-display-medium-weight: 400;
60
- --m3-font-display-small-size: 2.25rem;
61
- --m3-font-display-small-height: 1.222;
62
- --m3-font-display-small-tracking: 0;
63
- --m3-font-display-small-weight: 400;
64
- --m3-font-headline-large-size: 2rem;
65
- --m3-font-headline-large-height: 1.25;
66
- --m3-font-headline-large-tracking: 0;
67
- --m3-font-headline-large-weight: 400;
68
- --m3-font-headline-medium-size: 1.75rem;
69
- --m3-font-headline-medium-height: 1.286;
70
- --m3-font-headline-medium-tracking: 0;
71
- --m3-font-headline-medium-weight: 400;
72
- --m3-font-headline-small-size: 1.5rem;
73
- --m3-font-headline-small-height: 1.333;
74
- --m3-font-headline-small-tracking: 0;
75
- --m3-font-headline-small-weight: 400;
76
- --m3-font-title-large-size: 1.375rem;
77
- --m3-font-title-large-height: 1.273;
78
- --m3-font-title-large-tracking: 0;
79
- --m3-font-title-large-weight: 400;
80
- --m3-font-title-medium-size: 1rem;
81
- --m3-font-title-medium-height: 1.5;
82
- --m3-font-title-medium-tracking: 0;
83
- --m3-font-title-medium-weight: 500;
84
- --m3-font-title-small-size: 0.875rem;
85
- --m3-font-title-small-height: 1.429;
86
- --m3-font-title-small-tracking: 0.006rem;
87
- --m3-font-title-small-weight: 500;
88
- --m3-font-label-large-size: 0.875rem;
89
- --m3-font-label-large-height: 1.429;
90
- --m3-font-label-large-tracking: 0.006rem;
91
- --m3-font-label-large-weight: 500;
92
- --m3-font-label-medium-size: 0.75rem;
93
- --m3-font-label-medium-height: 1.333;
94
- --m3-font-label-medium-tracking: 0.031rem;
95
- --m3-font-label-medium-weight: 500;
96
- --m3-font-label-small-size: 0.688rem;
97
- --m3-font-label-small-height: 1.455;
98
- --m3-font-label-small-tracking: 0.031rem;
99
- --m3-font-label-small-weight: 500;
100
- --m3-font-body-large-size: 1rem;
101
- --m3-font-body-large-height: 1.5;
102
- --m3-font-body-large-tracking: 0;
103
- --m3-font-body-large-weight: 400;
104
- --m3-font-body-medium-size: 0.875rem;
105
- --m3-font-body-medium-height: 1.429;
106
- --m3-font-body-medium-tracking: 0.016rem;
107
- --m3-font-body-medium-weight: 400;
108
- --m3-font-body-small-size: 0.75rem;
109
- --m3-font-body-small-height: 1.333;
110
- --m3-font-body-small-tracking: 0.025rem;
111
- --m3-font-body-small-weight: 400;
45
+ /* Typography */
46
+ --m3-font: Roboto, system-ui;
47
+ --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
48
+ --m3-font-display: var(--m3-font);
49
+ --m3-font-headline: var(--m3-font);
50
+ --m3-font-title: var(--m3-font);
51
+ --m3-font-label: var(--m3-font);
52
+ --m3-font-body: var(--m3-font);
53
+ --m3-font-display-large-size: 3.563rem;
54
+ --m3-font-display-large-height: 1.123;
55
+ --m3-font-display-large-tracking: 0;
56
+ --m3-font-display-large-weight: 400;
57
+ --m3-font-display-medium-size: 2.813rem;
58
+ --m3-font-display-medium-height: 1.156;
59
+ --m3-font-display-medium-tracking: 0;
60
+ --m3-font-display-medium-weight: 400;
61
+ --m3-font-display-small-size: 2.25rem;
62
+ --m3-font-display-small-height: 1.222;
63
+ --m3-font-display-small-tracking: 0;
64
+ --m3-font-display-small-weight: 400;
65
+ --m3-font-headline-large-size: 2rem;
66
+ --m3-font-headline-large-height: 1.25;
67
+ --m3-font-headline-large-tracking: 0;
68
+ --m3-font-headline-large-weight: 400;
69
+ --m3-font-headline-medium-size: 1.75rem;
70
+ --m3-font-headline-medium-height: 1.286;
71
+ --m3-font-headline-medium-tracking: 0;
72
+ --m3-font-headline-medium-weight: 400;
73
+ --m3-font-headline-small-size: 1.5rem;
74
+ --m3-font-headline-small-height: 1.333;
75
+ --m3-font-headline-small-tracking: 0;
76
+ --m3-font-headline-small-weight: 400;
77
+ --m3-font-title-large-size: 1.375rem;
78
+ --m3-font-title-large-height: 1.273;
79
+ --m3-font-title-large-tracking: 0;
80
+ --m3-font-title-large-weight: 400;
81
+ --m3-font-title-medium-size: 1rem;
82
+ --m3-font-title-medium-height: 1.5;
83
+ --m3-font-title-medium-tracking: 0;
84
+ --m3-font-title-medium-weight: 500;
85
+ --m3-font-title-small-size: 0.875rem;
86
+ --m3-font-title-small-height: 1.429;
87
+ --m3-font-title-small-tracking: 0.006rem;
88
+ --m3-font-title-small-weight: 500;
89
+ --m3-font-label-large-size: 0.875rem;
90
+ --m3-font-label-large-height: 1.429;
91
+ --m3-font-label-large-tracking: 0.006rem;
92
+ --m3-font-label-large-weight: 500;
93
+ --m3-font-label-medium-size: 0.75rem;
94
+ --m3-font-label-medium-height: 1.333;
95
+ --m3-font-label-medium-tracking: 0.031rem;
96
+ --m3-font-label-medium-weight: 500;
97
+ --m3-font-label-small-size: 0.688rem;
98
+ --m3-font-label-small-height: 1.455;
99
+ --m3-font-label-small-tracking: 0.031rem;
100
+ --m3-font-label-small-weight: 500;
101
+ --m3-font-body-large-size: 1rem;
102
+ --m3-font-body-large-height: 1.5;
103
+ --m3-font-body-large-tracking: 0;
104
+ --m3-font-body-large-weight: 400;
105
+ --m3-font-body-medium-size: 0.875rem;
106
+ --m3-font-body-medium-height: 1.429;
107
+ --m3-font-body-medium-tracking: 0.016rem;
108
+ --m3-font-body-medium-weight: 400;
109
+ --m3-font-body-small-size: 0.75rem;
110
+ --m3-font-body-small-height: 1.333;
111
+ --m3-font-body-small-tracking: 0.025rem;
112
+ --m3-font-body-small-weight: 400;
112
113
 
113
- /* Expressive easing */
114
- --m3-util-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
115
- --m3-util-duration-fast-spatial: 350ms;
116
- --m3-util-easing-fast-spatial: var(--m3-util-timing-function-fast-spatial)
117
- var(--m3-util-duration-fast-spatial);
114
+ /* Expressive easing */
115
+ --m3-util-timing-function-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
116
+ --m3-util-duration-fast-spatial: 350ms;
117
+ --m3-util-easing-fast-spatial: var(--m3-util-timing-function-fast-spatial)
118
+ var(--m3-util-duration-fast-spatial);
118
119
 
119
- --m3-util-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
120
- --m3-util-duration-spatial: 500ms;
121
- --m3-util-easing-spatial: var(--m3-util-timing-function-spatial) var(--m3-util-duration-spatial);
120
+ --m3-util-timing-function-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
121
+ --m3-util-duration-spatial: 500ms;
122
+ --m3-util-easing-spatial: var(--m3-util-timing-function-spatial) var(--m3-util-duration-spatial);
122
123
 
123
- --m3-util-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
124
- --m3-util-duration-slow-spatial: 650ms;
125
- --m3-util-easing-slow-spatial: var(--m3-util-timing-function-slow-spatial)
126
- var(--m3-util-duration-slow-spatial);
124
+ --m3-util-timing-function-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
125
+ --m3-util-duration-slow-spatial: 650ms;
126
+ --m3-util-easing-slow-spatial: var(--m3-util-timing-function-slow-spatial)
127
+ var(--m3-util-duration-slow-spatial);
127
128
 
128
- --m3-util-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
129
- --m3-util-duration-fast: 150ms;
130
- --m3-util-easing-fast: var(--m3-util-timing-function-fast) var(--m3-util-duration-fast);
129
+ --m3-util-timing-function-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
130
+ --m3-util-duration-fast: 150ms;
131
+ --m3-util-easing-fast: var(--m3-util-timing-function-fast) var(--m3-util-duration-fast);
131
132
 
132
- --m3-util-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
133
- --m3-util-duration: 200ms;
134
- --m3-util-easing: var(--m3-util-timing-function) var(--m3-util-duration);
133
+ --m3-util-timing-function: cubic-bezier(0.34, 0.8, 0.34, 1);
134
+ --m3-util-duration: 200ms;
135
+ --m3-util-easing: var(--m3-util-timing-function) var(--m3-util-duration);
135
136
 
136
- --m3-util-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
137
- --m3-util-duration-slow: 300ms;
138
- --m3-util-easing-slow: var(--m3-util-timing-function-slow) var(--m3-util-duration-slow);
137
+ --m3-util-timing-function-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
138
+ --m3-util-duration-slow: 300ms;
139
+ --m3-util-easing-slow: var(--m3-util-timing-function-slow) var(--m3-util-duration-slow);
139
140
 
140
- --m3-util-timing-function-emphasized: linear(
141
- 0,
142
- 0.034 6%,
143
- 0.073 9%,
144
- 0.126 11%,
145
- 0.194 13%,
146
- 0.273 15%,
147
- 0.351 16%,
148
- 0.541 18%,
149
- 0.652 20%,
150
- 0.755 24%,
151
- 0.839 30%,
152
- 0.91 39%,
153
- 0.959 53%,
154
- 0.989 72%,
155
- 1
156
- );
157
- --m3-util-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
158
- --m3-util-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
141
+ --m3-util-timing-function-emphasized: linear(
142
+ 0,
143
+ 0.034 6%,
144
+ 0.073 9%,
145
+ 0.126 11%,
146
+ 0.194 13%,
147
+ 0.273 15%,
148
+ 0.351 16%,
149
+ 0.541 18%,
150
+ 0.652 20%,
151
+ 0.755 24%,
152
+ 0.839 30%,
153
+ 0.91 39%,
154
+ 0.959 53%,
155
+ 0.989 72%,
156
+ 1
157
+ );
158
+ --m3-util-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
159
+ --m3-util-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
159
160
 
160
- /* deprecated */
161
- --m3-util-curve: var(--m3-util-timing-function-emphasized);
162
- --m3-util-curve-accel: var(--m3-util-timing-function-emphasized-accel);
163
- --m3-util-curve-decel: var(--m3-util-timing-function-emphasized-decel);
161
+ /* deprecated */
162
+ --m3-util-curve: var(--m3-util-timing-function-emphasized);
163
+ --m3-util-curve-accel: var(--m3-util-timing-function-emphasized-accel);
164
+ --m3-util-curve-decel: var(--m3-util-timing-function-emphasized-decel);
164
165
 
165
- accent-color: rgb(var(--m3-scheme-primary));
166
+ accent-color: rgb(var(--m3-scheme-primary));
167
+ }
166
168
  }
167
169
  .m3-font-display-large,
168
170
  .m3-font-display-medium,
@@ -285,8 +287,8 @@ or for very small text in the content body, such as captions. */
285
287
  letter-spacing: var(--m3-font-body-small-tracking);
286
288
  font-weight: var(--m3-font-body-small-weight);
287
289
  }
288
- /* Reset a few things */
289
290
  @layer base {
291
+ /* Reset a few things */
290
292
  *,
291
293
  *::before,
292
294
  *::after {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "5.15.3",
3
+ "version": "5.15.5",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {