m3-svelte 4.5.3 → 4.5.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 (5) hide show
  1. package/package/containers/Dialog.svelte +6 -8
  2. package/package/misc/_ripple.svelte +14 -12
  3. package/package/misc/_ripplesimple.svelte +14 -12
  4. package/package/misc/styles.css +4 -0
  5. package/package.json +13 -13
package/package/containers/Dialog.svelte CHANGED
@@ -36,6 +36,7 @@
36
36
  </script>
37
37
 
38
38
  <dialog
39
+ class="m3-container"
39
40
  oncancel={(e) => {
40
41
  if (closeOnEsc) {
41
42
  onEsc?.();
@@ -54,9 +55,9 @@
54
55
  bind:this={dialog}
55
56
  {...extra}
56
57
  >
57
- <div class="m3-container">
58
+ <div class="d">
58
59
  {#if icon}
59
- <Icon {icon} />
60
+ <Icon {icon} width="1.5rem" height="1.5rem" />
60
61
  {/if}
61
62
  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
62
63
  <div class="content m3-font-body-medium">
@@ -74,6 +75,7 @@
74
75
  }
75
76
  dialog {
76
77
  display: flex;
78
+ flex-direction: column;
77
79
  background-color: rgb(var(--m3-scheme-surface-container-high));
78
80
  border: none;
79
81
  border-radius: var(--m3-dialog-shape);
@@ -82,17 +84,13 @@
82
84
  padding: 0;
83
85
  overflow: auto;
84
86
  }
85
- .m3-container {
87
+ .d {
86
88
  display: flex;
87
89
  flex-direction: column;
88
90
  padding: 1.5rem;
89
- width: 100%;
90
91
  }
91
-
92
- .m3-container > :global(svg) {
92
+ .d > :global(svg) {
93
93
  color: rgb(var(--m3-scheme-secondary));
94
- width: 1.5rem;
95
- height: 1.5rem;
96
94
 
97
95
  flex-shrink: 0;
98
96
  align-self: center;
package/package/misc/_ripple.svelte CHANGED
@@ -159,19 +159,21 @@
159
159
  opacity: 0;
160
160
  transition: opacity var(--m3-util-easing-fast);
161
161
 
162
- @media (hover: hover) {
163
- &:is(:global(:hover) > .tint):not(
164
- :global(input:disabled + label) > .tint,
165
- :global(input:disabled + .layer-container) > .tint,
166
- :global(:disabled) > .tint
167
- ) {
168
- opacity: 0.08;
162
+ &:not(
163
+ :global(input:disabled + label) > .tint,
164
+ :global(input:disabled + .layer-container) > .tint,
165
+ :global(:disabled) > .tint
166
+ ) {
167
+ @media (hover: hover) {
168
+ &:is(:global(:hover) > .tint) {
169
+ opacity: 0.08;
170
+ }
171
+ }
172
+ &:is(:global(input:focus-visible + label) > .tint),
173
+ &:is(:global(:focus-visible) > .tint),
174
+ &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
175
+ opacity: 0.12;
169
176
  }
170
- }
171
- &:is(:global(input:focus-visible + label) > .tint),
172
- &:is(:global(:focus-visible) > .tint),
173
- &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
174
- opacity: 0.12;
175
177
  }
176
178
  }
177
179
  </style>
package/package/misc/_ripplesimple.svelte CHANGED
@@ -13,19 +13,21 @@
13
13
  opacity: 0;
14
14
  transition: opacity var(--m3-util-easing-fast);
15
15
 
16
- @media (hover: hover) {
17
- &:is(:global(:hover) > .tint):not(
18
- :global(input:disabled + label) > .tint,
19
- :global(input:disabled + .layer-container) > .tint,
20
- :global(:disabled) > .tint
21
- ) {
22
- opacity: 0.08;
16
+ &:not(
17
+ :global(input:disabled + label) > .tint,
18
+ :global(input:disabled + .layer-container) > .tint,
19
+ :global(:disabled) > .tint
20
+ ) {
21
+ @media (hover: hover) {
22
+ &:is(:global(:hover) > .tint) {
23
+ opacity: 0.08;
24
+ }
25
+ }
26
+ &:is(:global(input:focus-visible + label) > .tint),
27
+ &:is(:global(:focus-visible) > .tint),
28
+ &:is(:global(:active) > .tint) {
29
+ opacity: 0.12;
23
30
  }
24
- }
25
- &:is(:global(input:focus-visible + label) > .tint),
26
- &:is(:global(:focus-visible) > .tint),
27
- &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
28
- opacity: 0.12;
29
31
  }
30
32
  }
31
33
  </style>
package/package/misc/styles.css CHANGED
@@ -302,3 +302,7 @@ or for very small text in the content body, such as captions. */
302
302
  a.m3-container {
303
303
  text-decoration: none;
304
304
  }
305
+ .m3-container dialog,
306
+ dialog.m3-container {
307
+ margin: auto;
308
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "m3-svelte",
3
- "version": "4.5.3",
3
+ "version": "4.5.5",
4
4
  "license": "Apache-2.0 OR GPL-3.0-only",
5
5
  "repository": "KTibow/m3-svelte",
6
6
  "author": {
@@ -30,30 +30,30 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@iconify/types": "^2.0.0",
33
- "@ktibow/iconset-material-symbols": "^0.0.1750223537",
34
- "@ktibow/material-color-utilities-nightly": "^0.3.11750642744987",
35
- "svelte": "^5.34.7"
33
+ "@ktibow/iconset-material-symbols": "^0.0.1751607664",
34
+ "@ktibow/material-color-utilities-nightly": "^0.3.11751852341624",
35
+ "svelte": "^5.35.4"
36
36
  },
37
37
  "devDependencies": {
38
- "@eslint/compat": "^1.3.0",
39
- "@eslint/js": "^9.29.0",
38
+ "@eslint/compat": "^1.3.1",
39
+ "@eslint/js": "^9.30.1",
40
40
  "@sveltejs/adapter-static": "^3.0.8",
41
- "@sveltejs/kit": "^2.22.0",
42
- "@sveltejs/package": "^2.3.11",
41
+ "@sveltejs/kit": "^2.22.2",
42
+ "@sveltejs/package": "^2.3.12",
43
43
  "@sveltejs/vite-plugin-svelte": "^5.1.0",
44
44
  "eslint": "^9.27.0",
45
45
  "eslint-config-prettier": "^10.1.5",
46
- "eslint-plugin-svelte": "^3.9.3",
46
+ "eslint-plugin-svelte": "^3.10.1",
47
47
  "fast-glob": "^3.3.3",
48
- "globals": "^16.2.0",
49
- "prettier": "^3.6.0",
48
+ "globals": "^16.3.0",
49
+ "prettier": "^3.6.2",
50
50
  "prettier-plugin-svelte": "^3.4.0",
51
51
  "publint": "^0.3.12",
52
52
  "svelte-check": "^4.2.2",
53
53
  "svelte-highlight": "^7.8.3",
54
54
  "typescript": "^5.8.3",
55
- "typescript-eslint": "^8.35.0",
56
- "vite": "^6.3.5"
55
+ "typescript-eslint": "^8.36.0",
56
+ "vite": "^7.0.2"
57
57
  },
58
58
  "keywords": [
59
59
  "svelte",