@seed-design/css 2.3.0 → 2.3.1

package/README.md

@@ -2,3 +2,8 @@
 
 CSS implementation of Seed Design, providing design tokens and component styles and theming codes.
 
+## Stability
+
+`@seed-design/css/vars/component/typography`를 제외한 `@seed-design/css/vars/component/*` 경로는 SemVer 보장 대상이 아닙니다.
+
+이 경로의 변수들은 rootage component spec에서 생성되는 컴포넌트 구현용 값이며, spec 변경에 따라 minor 또는 patch 버전에서도 이름이나 구조가 바뀔 수 있습니다. 앱이나 라이브러리의 공개 API, 런타임 로직에서 직접 의존하지 않는 것을 권장합니다.

package/all.css

@@ -2318,6 +2318,7 @@
   border-radius: var(--seed-radius-full);
   width: var(--avatar-size);
   height: var(--avatar-size);
+  isolation: isolate;
   justify-content: center;
   align-items: center;
   display: inline-flex;
@@ -2363,11 +2364,16 @@
   mask-composite: subtract;
 }
 
-.seed-avatar__image:not([data-loading-state="loaded"]) {
+.seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
   display: none;
 }
 
+.seed-avatar__image:not([data-loading-state="loaded"]) {
+  pointer-events: none;
+}
+
 .seed-avatar__fallback {
+  z-index: -1;
   object-fit: cover;
   border-radius: var(--seed-radius-full);
   width: 100%;
@@ -2383,6 +2389,8 @@
   justify-content: center;
   align-items: center;
   display: flex;
+  position: absolute;
+  inset: 0;
   overflow: hidden;
   transform: translateZ(0);
   mask-repeat: no-repeat;
@@ -2818,11 +2826,13 @@
   padding-bottom: var(--seed-safe-area-bottom);
   touch-action: none;
   will-change: transform;
-  transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
+  --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
+  transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
   flex-direction: column;
   flex: 1;
   display: flex;
   position: relative;
+  bottom: 0;
 }
 
 .seed-bottom-sheet__content[data-snap-points="true"] {
@@ -5733,6 +5743,7 @@
 
 .seed-image-frame__root {
   border-radius: inherit;
+  isolation: isolate;
   position: relative;
   overflow: hidden;
 }
@@ -5745,13 +5756,20 @@
   display: block;
 }
 
-.seed-image-frame__content:not([data-loading-state="loaded"]) {
+.seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
   display: none;
 }
 
+.seed-image-frame__content:not([data-loading-state="loaded"]) {
+  pointer-events: none;
+}
+
 .seed-image-frame__fallback {
+  z-index: -1;
   width: 100%;
   height: 100%;
+  position: absolute;
+  inset: 0;
 }
 
 .seed-image-frame__fallback[data-loading-state="loaded"] {

package/all.layered.css

@@ -2567,6 +2567,7 @@
     border-radius: var(--seed-radius-full);
     width: var(--avatar-size);
     height: var(--avatar-size);
+    isolation: isolate;
     justify-content: center;
     align-items: center;
     display: inline-flex;
@@ -2612,11 +2613,16 @@
     mask-composite: subtract;
   }
 
-  .seed-avatar__image:not([data-loading-state="loaded"]) {
+  .seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
     display: none;
   }
 
+  .seed-avatar__image:not([data-loading-state="loaded"]) {
+    pointer-events: none;
+  }
+
   .seed-avatar__fallback {
+    z-index: -1;
     object-fit: cover;
     border-radius: var(--seed-radius-full);
     width: 100%;
@@ -2632,6 +2638,8 @@
     justify-content: center;
     align-items: center;
     display: flex;
+    position: absolute;
+    inset: 0;
     overflow: hidden;
     transform: translateZ(0);
     mask-repeat: no-repeat;
@@ -3067,11 +3075,13 @@
     padding-bottom: var(--seed-safe-area-bottom);
     touch-action: none;
     will-change: transform;
-    transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
+    --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
+    transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
     flex-direction: column;
     flex: 1;
     display: flex;
     position: relative;
+    bottom: 0;
   }
 
   .seed-bottom-sheet__content[data-snap-points="true"] {
@@ -5982,6 +5992,7 @@
 
   .seed-image-frame__root {
     border-radius: inherit;
+    isolation: isolate;
     position: relative;
     overflow: hidden;
   }
@@ -5994,13 +6005,20 @@
     display: block;
   }
 
-  .seed-image-frame__content:not([data-loading-state="loaded"]) {
+  .seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
     display: none;
   }
 
+  .seed-image-frame__content:not([data-loading-state="loaded"]) {
+    pointer-events: none;
+  }
+
   .seed-image-frame__fallback {
+    z-index: -1;
     width: 100%;
     height: 100%;
+    position: absolute;
+    inset: 0;
   }
 
   .seed-image-frame__fallback[data-loading-state="loaded"] {