m3-svelte 4.0.0-beta.2 → 4.0.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 (7) hide show
  1. package/package/buttons/FAB.svelte +21 -10
  2. package/package/buttons/FAB.svelte.d.ts +1 -1
  3. package/package/misc/_ripple.svelte +3 -5
  4. package/package/misc/_ripplesimple.svelte +2 -4
  5. package/package/nav/NavCMLX.svelte +2 -2
  6. package/package/nav/NavCMLXItem.svelte +4 -4
  7. package/package.json +1 -1
package/package/buttons/FAB.svelte CHANGED
@@ -25,7 +25,13 @@
25
25
  text,
26
26
  ...extra
27
27
  }: {
28
- color?: "primary" | "surface" | "secondary" | "tertiary";
28
+ color?:
29
+ | "primary-container"
30
+ | "secondary-container"
31
+ | "tertiary-container"
32
+ | "primary"
33
+ | "secondary"
34
+ | "tertiary";
29
35
  elevation?: "normal" | "lowered" | "none";
30
36
  click: () => void;
31
37
  } & ContentProps &
@@ -100,21 +106,26 @@
100
106
  }
101
107
 
102
108
  .color-primary {
103
- background-color: rgb(var(--m3-scheme-primary-container));
104
- color: rgb(var(--m3-scheme-on-primary-container));
109
+ background-color: rgb(var(--m3-scheme-primary));
110
+ color: rgb(var(--m3-scheme-on-primary));
105
111
  }
106
- .color-surface {
107
- background-color: rgb(var(--m3-scheme-surface-container-low));
108
- color: rgb(var(--m3-scheme-primary));
112
+ .color-secondary {
113
+ background-color: rgb(var(--m3-scheme-secondary));
114
+ color: rgb(var(--m3-scheme-on-secondary));
109
115
  }
110
- .color-surface.elevation-normal {
111
- background-color: rgb(var(--m3-scheme-surface-container-high));
116
+ .color-tertiary {
117
+ background-color: rgb(var(--m3-scheme-tertiary));
118
+ color: rgb(var(--m3-scheme-on-tertiary));
112
119
  }
113
- .color-secondary {
120
+ .color-primary-container {
121
+ background-color: rgb(var(--m3-scheme-primary-container));
122
+ color: rgb(var(--m3-scheme-on-primary-container));
123
+ }
124
+ .color-secondary-container {
114
125
  background-color: rgb(var(--m3-scheme-secondary-container));
115
126
  color: rgb(var(--m3-scheme-on-secondary-container));
116
127
  }
117
- .color-tertiary {
128
+ .color-tertiary-container {
118
129
  background-color: rgb(var(--m3-scheme-tertiary-container));
119
130
  color: rgb(var(--m3-scheme-on-tertiary-container));
120
131
  }
package/package/buttons/FAB.svelte.d.ts CHANGED
@@ -10,7 +10,7 @@ type ContentProps = {
10
10
  text?: undefined;
11
11
  };
12
12
  type $$ComponentProps = {
13
- color?: "primary" | "surface" | "secondary" | "tertiary";
13
+ color?: "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary";
14
14
  elevation?: "normal" | "lowered" | "none";
15
15
  click: () => void;
16
16
  } & ContentProps & HTMLButtonAttributes;
package/package/misc/_ripple.svelte CHANGED
@@ -171,11 +171,9 @@
171
171
  }
172
172
  }
173
173
 
174
- &:focus-visible > .tint {
175
- opacity: 0.12;
176
- }
177
-
178
- &:active > .ripple-container.broken + .tint {
174
+ &:is(:global(input:focus-visible + label)) > .tint,
175
+ &:focus-visible > .tint,
176
+ &:active > .tint {
179
177
  opacity: 0.12;
180
178
  }
181
179
  }
package/package/misc/_ripplesimple.svelte CHANGED
@@ -21,10 +21,8 @@
21
21
  }
22
22
  }
23
23
 
24
- &:focus-visible > .tint {
25
- opacity: 0.12;
26
- }
27
-
24
+ &:is(:global(input:focus-visible + label)) > .tint,
25
+ &:focus-visible > .tint,
28
26
  &:active > .tint {
29
27
  opacity: 0.12;
30
28
  }
package/package/nav/NavCMLX.svelte CHANGED
@@ -36,7 +36,7 @@
36
36
  gap: 0.25rem;
37
37
  }
38
38
  &.expanded {
39
- padding-top: 1.25rem;
39
+ padding-block: 1.25rem;
40
40
  min-width: 13.75rem;
41
41
  max-width: 22.5rem;
42
42
  }
@@ -61,7 +61,7 @@
61
61
  @media (100rem <= width) {
62
62
  /* Expanded */
63
63
  flex-direction: column;
64
- padding-top: 1.25rem;
64
+ padding-block: 1.25rem;
65
65
  min-width: 13.75rem;
66
66
  max-width: 22.5rem;
67
67
  }
package/package/nav/NavCMLXItem.svelte CHANGED
@@ -20,10 +20,10 @@
20
20
  <button
21
21
  onclick={click}
22
22
  class="m3-container m3-font-label-medium {variant}"
23
- class:selected
23
+ disabled={selected}
24
24
  {...extra}
25
25
  >
26
- <div class="content">
26
+ <div class="content" class:selected>
27
27
  <Layer />
28
28
  <div class="icon">
29
29
  <Icon {icon} width="1.5rem" height="1.5rem" />
@@ -140,7 +140,7 @@
140
140
  }
141
141
  &.large {
142
142
  flex-direction: column;
143
- height: 4rem;
143
+ min-height: 4rem;
144
144
  padding-block: 0.375rem;
145
145
  }
146
146
  &.expanded {
@@ -221,7 +221,7 @@
221
221
  /* Large */
222
222
  flex-direction: column;
223
223
  text-align: center;
224
- height: 4rem;
224
+ min-height: 4rem;
225
225
  padding-block: 0.375rem;
226
226
 
227
227
  .content {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "4.0.0-beta.2",
3
+ "version": "4.0.0",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {