@seed-design/css 1.2.0 → 1.2.2

package/all.css

@@ -2724,6 +2724,7 @@
   font-size: var(--seed-font-size-t8);
   line-height: var(--seed-line-height-t8);
   font-weight: var(--seed-font-weight-bold);
+  word-break: keep-all;
   margin: 0;
 }
 
@@ -2732,6 +2733,8 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
   white-space: pre-wrap;
   margin: 0;
 }
@@ -2764,8 +2767,8 @@
 }
 
 .seed-bottom-sheet__closeButton {
-  top: var(--seed-dimension-x5);
-  right: var(--seed-dimension-x5);
+  top: var(--seed-dimension-x6);
+  right: var(--seed-dimension-x4);
   border-radius: var(--seed-radius-full);
   background: var(--seed-color-bg-neutral-weak);
   cursor: pointer;
@@ -2787,19 +2790,35 @@
 }
 
 .seed-bottom-sheet__header--headerAlign_left {
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
   justify-content: flex-start;
+}
+
+.seed-bottom-sheet__title--headerAlign_left {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+}
+
+.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
   padding-right: 50px;
 }
 
 .seed-bottom-sheet__header--headerAlign_center {
   text-align: center;
   justify-content: center;
-  padding-left: 50px;
-  padding-right: 50px;
 }
 
-.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"] {
+.seed-bottom-sheet__title--headerAlign_center {
+  padding-left: var(--seed-dimension-spacing-x-global-gutter);
+  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+}
+
+.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
   animation-name: fade-in;
   animation-duration: var(--seed-duration-d6);
   animation-timing-function: var(--seed-timing-function-enter);
@@ -2811,7 +2830,7 @@
   animation-timing-function: var(--seed-timing-function-exit);
 }
 
-.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"] {
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"]:not([data-animation-done="true"]) {
   animation-name: fade-in;
   animation-duration: var(--seed-duration-d6);
   animation-timing-function: var(--seed-timing-function-enter);
@@ -2822,7 +2841,7 @@
   animation-timing-function: var(--seed-timing-function-enter-expressive);
 }
 
-.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"] {
+.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
   animation-name: drawer-slide-from-bottom;
   animation-duration: var(--seed-duration-d6);
   animation-timing-function: var(--seed-timing-function-enter-expressive);
@@ -2834,7 +2853,7 @@
   animation-timing-function: var(--seed-timing-function-exit);
 }
 
-.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points="true"] {
+.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points="true"]:not([data-animation-done="true"]) {
   animation-name: drawer-slide-from-bottom;
   animation-duration: var(--seed-duration-d6);
   animation-timing-function: var(--seed-timing-function-enter-expressive);
@@ -4561,20 +4580,17 @@
 }
 
 .seed-image-frame {
+  border-radius: inherit;
   position: relative;
+  overflow: hidden;
 }
 
 .seed-image-frame > img, .seed-image-frame > video {
   object-fit: cover;
-}
-
-.seed-image-frame--rounded_true {
-  border-radius: var(--seed-radius-r2);
-  overflow: hidden;
-}
-
-.seed-image-frame--rounded_true > img, .seed-image-frame--rounded_true > video {
-  border-radius: var(--seed-radius-r2);
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
 .seed-image-frame--stroke_true:after {
@@ -4586,6 +4602,10 @@
   inset: 0;
 }
 
+.seed-image-frame--rounded_true {
+  border-radius: var(--seed-radius-r2);
+}
+
 .seed-image-frame-indicator {
   box-sizing: border-box;
   background-color: var(--seed-color-palette-static-black-alpha-800);
@@ -4616,7 +4636,7 @@
   width: var(--seed-dimension-x6);
   height: var(--seed-dimension-x6);
   --seed-icon-size: var(--seed-dimension-x6);
-  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-palette-static-white);
   background: none;
   border: none;
   justify-content: center;
@@ -4640,7 +4660,7 @@
 }
 
 .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
-  --seed-icon-color: var(--seed-color-fg-brand);
+  --seed-icon-color: var(--seed-color-bg-transparent);
 }
 
 .seed-inline-banner__root {