@seed-design/css 2.3.0 → 2.3.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 (14) hide show
  1. package/README.md +5 -0
  2. package/all.css +21 -3
  3. package/all.layered.css +21 -3
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/package.json +1 -1
  7. package/recipes/avatar.css +11 -1
  8. package/recipes/avatar.layered.css +9 -1
  9. package/recipes/bottom-sheet.css +3 -1
  10. package/recipes/bottom-sheet.layered.css +3 -1
  11. package/recipes/image-frame.css +11 -1
  12. package/recipes/image-frame.layered.css +9 -1
  13. package/vars/component/menu-sheet-item.d.ts +2 -6
  14. package/vars/component/menu-sheet-item.mjs +2 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "2.3.0",
3
+ "version": "2.3.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/avatar.css CHANGED
@@ -8,6 +8,7 @@
8
8
  border-radius: var(--seed-radius-full);
9
9
  width: var(--avatar-size);
10
10
  height: var(--avatar-size);
11
+ isolation: isolate;
11
12
  }
12
13
  .seed-avatar__root:after {
13
14
  content: "";
@@ -46,10 +47,19 @@
46
47
  mask-composite: subtract;
47
48
  transform: translateZ(0);
48
49
  }
49
- .seed-avatar__image:not([data-loading-state='loaded']) {
50
+ .seed-avatar__image[data-loading-state='error'] {
51
+ display: none;
52
+ }
53
+ .seed-avatar__image:is([hidden], [data-hidden]) {
50
54
  display: none;
51
55
  }
56
+ .seed-avatar__image:not([data-loading-state='loaded']) {
57
+ pointer-events: none;
58
+ }
52
59
  .seed-avatar__fallback {
60
+ position: absolute;
61
+ inset: 0;
62
+ z-index: -1;
53
63
  display: flex;
54
64
  justify-content: center;
55
65
  align-items: center;
package/recipes/avatar.layered.css CHANGED
@@ -5,6 +5,7 @@
5
5
  border-radius: var(--seed-radius-full);
6
6
  width: var(--avatar-size);
7
7
  height: var(--avatar-size);
8
+ isolation: isolate;
8
9
  justify-content: center;
9
10
  align-items: center;
10
11
  display: inline-flex;
@@ -50,11 +51,16 @@
50
51
  mask-composite: subtract;
51
52
  }
52
53
 
53
- .seed-avatar__image:not([data-loading-state="loaded"]) {
54
+ .seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
54
55
  display: none;
55
56
  }
56
57
 
58
+ .seed-avatar__image:not([data-loading-state="loaded"]) {
59
+ pointer-events: none;
60
+ }
61
+
57
62
  .seed-avatar__fallback {
63
+ z-index: -1;
58
64
  object-fit: cover;
59
65
  border-radius: var(--seed-radius-full);
60
66
  width: 100%;
@@ -70,6 +76,8 @@
70
76
  justify-content: center;
71
77
  align-items: center;
72
78
  display: flex;
79
+ position: absolute;
80
+ inset: 0;
73
81
  overflow: hidden;
74
82
  transform: translateZ(0);
75
83
  mask-repeat: no-repeat;
package/recipes/bottom-sheet.css CHANGED
@@ -35,9 +35,11 @@
35
35
  border-top-left-radius: var(--seed-radius-r6);
36
36
  border-top-right-radius: var(--seed-radius-r6);
37
37
  padding-bottom: var(--seed-safe-area-bottom);
38
+ bottom: 0;
38
39
  touch-action: none;
39
40
  will-change: transform;
40
- transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
41
+ --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(0.32, 0.72, 0, 1);
42
+ transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
41
43
  }
42
44
  .seed-bottom-sheet__content[data-snap-points='true'] {
43
45
  transform: translate3d(0, var(--initial-transform, 100%), 0);
package/recipes/bottom-sheet.layered.css CHANGED
@@ -35,11 +35,13 @@
35
35
  padding-bottom: var(--seed-safe-area-bottom);
36
36
  touch-action: none;
37
37
  will-change: transform;
38
- transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
38
+ --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
39
+ transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
39
40
  flex-direction: column;
40
41
  flex: 1;
41
42
  display: flex;
42
43
  position: relative;
44
+ bottom: 0;
43
45
  }
44
46
 
45
47
  .seed-bottom-sheet__content[data-snap-points="true"] {
package/recipes/image-frame.css CHANGED
@@ -2,6 +2,7 @@
2
2
  position: relative;
3
3
  overflow: hidden;
4
4
  border-radius: inherit;
5
+ isolation: isolate;
5
6
  }
6
7
  .seed-image-frame__content {
7
8
  display: block;
@@ -10,10 +11,19 @@
10
11
  object-fit: cover;
11
12
  border-radius: inherit;
12
13
  }
13
- .seed-image-frame__content:not([data-loading-state='loaded']) {
14
+ .seed-image-frame__content[data-loading-state='error'] {
15
+ display: none;
16
+ }
17
+ .seed-image-frame__content:is([hidden], [data-hidden]) {
14
18
  display: none;
15
19
  }
20
+ .seed-image-frame__content:not([data-loading-state='loaded']) {
21
+ pointer-events: none;
22
+ }
16
23
  .seed-image-frame__fallback {
24
+ position: absolute;
25
+ inset: 0;
26
+ z-index: -1;
17
27
  width: 100%;
18
28
  height: 100%;
19
29
  }
package/recipes/image-frame.layered.css CHANGED
@@ -1,6 +1,7 @@
1
1
  @layer seed-components {
2
2
  .seed-image-frame__root {
3
3
  border-radius: inherit;
4
+ isolation: isolate;
4
5
  position: relative;
5
6
  overflow: hidden;
6
7
  }
@@ -13,13 +14,20 @@
13
14
  display: block;
14
15
  }
15
16
 
16
- .seed-image-frame__content:not([data-loading-state="loaded"]) {
17
+ .seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
17
18
  display: none;
18
19
  }
19
20
 
21
+ .seed-image-frame__content:not([data-loading-state="loaded"]) {
22
+ pointer-events: none;
23
+ }
24
+
20
25
  .seed-image-frame__fallback {
26
+ z-index: -1;
21
27
  width: 100%;
22
28
  height: 100%;
29
+ position: absolute;
30
+ inset: 0;
23
31
  }
24
32
 
25
33
  .seed-image-frame__fallback[data-loading-state="loaded"] {
package/vars/component/menu-sheet-item.d.ts CHANGED
@@ -61,13 +61,9 @@ export declare const vars: {
61
61
  /**
62
62
  * 라벨을 왼쪽 정렬합니다.
63
63
  */
64
- "labelAlignLeft": {
65
- "enabled": {}
66
- },
64
+ "labelAlignLeft": {},
67
65
  /**
68
66
  * 라벨을 중앙 정렬합니다.
69
67
  */
70
- "labelAlignCenter": {
71
- "enabled": {}
72
- }
68
+ "labelAlignCenter": {}
73
69
  }
package/vars/component/menu-sheet-item.mjs CHANGED
@@ -52,10 +52,6 @@ export const vars = {
52
52
  }
53
53
  }
54
54
  },
55
- "labelAlignLeft": {
56
- "enabled": {}
57
- },
58
- "labelAlignCenter": {
59
- "enabled": {}
60
- }
55
+ "labelAlignLeft": {},
56
+ "labelAlignCenter": {}
61
57
  }