m3-svelte 3.5.1 → 3.6.1

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 (6) hide show
  1. package/package/forms/TextField.svelte +1 -1
  2. package/package/forms/TextFieldMultiline.svelte +1 -1
  3. package/package/forms/TextFieldOutlined.svelte +1 -1
  4. package/package/forms/TextFieldOutlinedMultiline.svelte +1 -1
  5. package/package/misc/recommended-styles.css +39 -0
  6. package/package.json +4 -1
package/package/forms/TextField.svelte CHANGED
@@ -28,7 +28,7 @@
28
28
  {...extraWrapperOptions}
29
29
  >
30
30
  <input
31
- class="m3-font-body-large"
31
+ class="focus-none m3-font-body-large"
32
32
  placeholder=" "
33
33
  bind:value
34
34
  on:keydown={(e) => e.key == "Enter" && dispatch("enter")}
package/package/forms/TextFieldMultiline.svelte CHANGED
@@ -39,7 +39,7 @@
39
39
  {...extraWrapperOptions}
40
40
  >
41
41
  <textarea
42
- class="m3-font-body-large"
42
+ class="focus-none m3-font-body-large"
43
43
  placeholder=" "
44
44
  bind:value
45
45
  {id}
package/package/forms/TextFieldOutlined.svelte CHANGED
@@ -28,7 +28,7 @@
28
28
  {...extraWrapperOptions}
29
29
  >
30
30
  <input
31
- class="m3-font-body-large"
31
+ class="focus-none m3-font-body-large"
32
32
  placeholder=" "
33
33
  bind:value
34
34
  {id}
package/package/forms/TextFieldOutlinedMultiline.svelte CHANGED
@@ -39,7 +39,7 @@
39
39
  {...extraWrapperOptions}
40
40
  >
41
41
  <textarea
42
- class="m3-font-body-large"
42
+ class="focus-none m3-font-body-large"
43
43
  placeholder=" "
44
44
  bind:value
45
45
  {id}
package/package/misc/recommended-styles.css ADDED
@@ -0,0 +1,39 @@
1
+ :root {
2
+ --m3-util-refocus: refocus-one 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
3
+ }
4
+ :focus-visible:not(.focus-inset, .focus-none) {
5
+ animation: var(--m3-util-refocus);
6
+ outline: none;
7
+ }
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);
10
+ outline: none;
11
+ }
12
+ :focus-visible.focus-none {
13
+ outline: none;
14
+ }
15
+ @keyframes refocus-one {
16
+ 0% {
17
+ box-shadow: 0 0 0 0px rgb(var(--m3-scheme-primary));
18
+ }
19
+ 100% {
20
+ box-shadow: 0 0 0 3px rgb(var(--m3-scheme-primary));
21
+ }
22
+ }
23
+ @keyframes refocus-simple {
24
+ 0% {
25
+ box-shadow: inset 0 0 0 0px rgb(var(--m3-scheme-primary));
26
+ }
27
+ 100% {
28
+ box-shadow: inset 0 0 0 3px rgb(var(--m3-scheme-primary));
29
+ }
30
+ }
31
+
32
+ ::placeholder {
33
+ color: rgb(var(--m3-scheme-on-background) / 0.5);
34
+ opacity: 1;
35
+ }
36
+ ::selection {
37
+ background-color: rgb(var(--m3-scheme-tertiary-container));
38
+ color: rgb(var(--m3-scheme-on-tertiary-container));
39
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "3.5.1",
3
+ "version": "3.6.1",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {
@@ -26,6 +26,9 @@
26
26
  },
27
27
  "./misc/styles.css": {
28
28
  "import": "./package/misc/styles.css"
29
+ },
30
+ "./misc/recommended-styles.css": {
31
+ "import": "./package/misc/recommended-styles.css"
29
32
  }
30
33
  },
31
34
  "devDependencies": {