@seed-design/css 1.2.5 → 1.2.7

package/all.css

@@ -1701,6 +1701,96 @@
   animation: none !important;
 }
 
+[data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+  opacity: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+}
+
+[data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+  transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+  opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+}
+
+[data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+  --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+  --seed-enter-scale: 1;
+  opacity: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+}
+
+[data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+  transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+  opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+  animation: none;
+}
+
+[data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+  opacity: 1;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
+[data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+  opacity: 0;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
+[data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+  opacity: 1;
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+}
+
+[data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+  --seed-enter-scale: 1;
+  opacity: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+}
+
+[data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+  opacity: calc(var(--swipe-back-displacement-ratio, 0));
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+}
+
+[data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+  opacity: calc(var(--swipe-back-displacement-ratio, 0));
+  animation: none;
+}
+
+[data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+  opacity: 0;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
+[data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+  opacity: 1;
+  transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+  animation: none !important;
+}
+
 [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
   --seed-enter-translate-x: 0;
   --seed-enter-translate-y: 8vh;
@@ -2418,6 +2508,18 @@
   --badge-offset: 30px;
 }
 
+.seed-avatar__root--size_56 {
+  --avatar-size: 56px;
+  --avatar-stroke-width: 1px;
+  --badge-mask-size: 24px;
+  --badge-mask-offset: 34px;
+}
+
+.seed-avatar__badge--size_56 {
+  --badge-size: 20px;
+  --badge-offset: 36px;
+}
+
 .seed-avatar__root--size_64 {
   --avatar-size: 64px;
   --avatar-stroke-width: 1px;
@@ -2543,6 +2645,15 @@
   box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
 }
 
+.seed-avatar-stack__item--size_56:not(:first-child) {
+  margin-left: -13px;
+}
+
+.seed-avatar-stack__item--size_56 {
+  clip-path: inset(-3px);
+  box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+}
+
 .seed-avatar-stack__item--size_64:not(:first-child) {
   margin-left: -16px;
 }
@@ -3986,6 +4097,32 @@
   top: 0;
 }
 
+.seed-content-placeholder__root {
+  box-sizing: border-box;
+  vertical-align: top;
+  background-color: var(--seed-color-palette-gray-200);
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.seed-content-placeholder__asset {
+  height: 50%;
+  min-width: var(--seed-dimension-x4);
+  aspect-ratio: 1;
+  width: auto;
+  max-width: 64px;
+  color: var(--seed-color-palette-gray-400);
+  fill: currentColor;
+  stroke: currentColor;
+  object-fit: contain;
+  display: block;
+}
+
 .seed-contextual-floating-button {
   box-sizing: border-box;
   cursor: pointer;
@@ -4903,6 +5040,7 @@
   margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
   margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
   margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
+  margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
   color: var(--seed-color-fg-neutral-inverted);
   --seed-icon-size: var(--seed-dimension-x3_5);
   --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -4943,13 +5081,13 @@
   overflow: hidden;
 }
 
-.seed-image-frame {
+.seed-image-frame__root {
   border-radius: inherit;
   position: relative;
   overflow: hidden;
 }
 
-.seed-image-frame > img, .seed-image-frame > video {
+.seed-image-frame__content {
   object-fit: cover;
   border-radius: inherit;
   width: 100%;
@@ -4957,7 +5095,12 @@
   display: block;
 }
 
-.seed-image-frame--stroke_true:after {
+.seed-image-frame__fallback {
+  width: 100%;
+  height: 100%;
+}
+
+.seed-image-frame__root--stroke_true:after {
   content: "";
   pointer-events: none;
   border-radius: inherit;
@@ -4966,7 +5109,7 @@
   inset: 0;
 }
 
-.seed-image-frame--rounded_true {
+.seed-image-frame__root--rounded_true {
   border-radius: var(--seed-radius-r2);
 }
 
@@ -4994,13 +5137,11 @@
   display: inline-flex;
 }
 
-.seed-image-frame-reaction-button {
+.seed-image-frame-reaction-button__root {
   box-sizing: border-box;
   cursor: pointer;
   width: var(--seed-dimension-x6);
   height: var(--seed-dimension-x6);
-  --seed-icon-size: var(--seed-dimension-x6);
-  --seed-icon-color: var(--seed-color-palette-static-white);
   background: none;
   border: none;
   justify-content: center;
@@ -5010,7 +5151,7 @@
   position: relative;
 }
 
-.seed-image-frame-reaction-button:before {
+.seed-image-frame-reaction-button__root:before {
   content: "";
   top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
   right: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
@@ -5022,18 +5163,37 @@
   position: absolute;
 }
 
-.seed-image-frame-reaction-button:is(:focus, [data-focus]) {
+.seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
   outline: none;
 }
 
-.seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
+.seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
   border-radius: var(--seed-radius-r1);
   outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
   outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }
 
-.seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
-  --seed-icon-color: var(--seed-color-bg-transparent);
+.seed-image-frame-reaction-button__fillIcon {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
+  pointer-events: none;
+  margin: auto;
+  position: absolute;
+  inset: 0;
+}
+
+.seed-image-frame-reaction-button__lineIcon {
+  width: var(--seed-dimension-x6);
+  height: var(--seed-dimension-x6);
+  color: var(--seed-color-palette-static-white);
+  pointer-events: none;
+  margin: auto;
+  position: absolute;
+  inset: 0;
+}
+
+.seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
+  color: var(--seed-color-bg-transparent);
 }
 
 .seed-inline-banner__root {

package/all.layered.css

@@ -1798,6 +1798,96 @@
     animation: none !important;
   }
 
+  [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
+    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
+    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: 1;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-enter-scale: 1;
+    opacity: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
+  }
+
+  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 1;
+    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
+  }
+
+  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: calc(var(--swipe-back-displacement-ratio, 0));
+    animation: none;
+  }
+
+  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 0;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
+  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
+    opacity: 1;
+    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
+    animation: none !important;
+  }
+
   [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
     --seed-enter-translate-x: 0;
     --seed-enter-translate-y: 8vh;
@@ -2515,6 +2605,18 @@
     --badge-offset: 30px;
   }
 
+  .seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+  }
+
+  .seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+  }
+
   .seed-avatar__root--size_64 {
     --avatar-size: 64px;
     --avatar-stroke-width: 1px;
@@ -2640,6 +2742,15 @@
     box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
   }
 
+  .seed-avatar-stack__item--size_56:not(:first-child) {
+    margin-left: -13px;
+  }
+
+  .seed-avatar-stack__item--size_56 {
+    clip-path: inset(-3px);
+    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
+  }
+
   .seed-avatar-stack__item--size_64:not(:first-child) {
     margin-left: -16px;
   }
@@ -4083,6 +4194,32 @@
     top: 0;
   }
 
+  .seed-content-placeholder__root {
+    box-sizing: border-box;
+    vertical-align: top;
+    background-color: var(--seed-color-palette-gray-200);
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-content-placeholder__asset {
+    height: 50%;
+    min-width: var(--seed-dimension-x4);
+    aspect-ratio: 1;
+    width: auto;
+    max-width: 64px;
+    color: var(--seed-color-palette-gray-400);
+    fill: currentColor;
+    stroke: currentColor;
+    object-fit: contain;
+    display: block;
+  }
+
   .seed-contextual-floating-button {
     box-sizing: border-box;
     cursor: pointer;
@@ -5000,6 +5137,7 @@
     margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
     margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
     color: var(--seed-color-fg-neutral-inverted);
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -5040,13 +5178,13 @@
     overflow: hidden;
   }
 
-  .seed-image-frame {
+  .seed-image-frame__root {
     border-radius: inherit;
     position: relative;
     overflow: hidden;
   }
 
-  .seed-image-frame > img, .seed-image-frame > video {
+  .seed-image-frame__content {
     object-fit: cover;
     border-radius: inherit;
     width: 100%;
@@ -5054,7 +5192,12 @@
     display: block;
   }
 
-  .seed-image-frame--stroke_true:after {
+  .seed-image-frame__fallback {
+    width: 100%;
+    height: 100%;
+  }
+
+  .seed-image-frame__root--stroke_true:after {
     content: "";
     pointer-events: none;
     border-radius: inherit;
@@ -5063,7 +5206,7 @@
     inset: 0;
   }
 
-  .seed-image-frame--rounded_true {
+  .seed-image-frame__root--rounded_true {
     border-radius: var(--seed-radius-r2);
   }
 
@@ -5091,13 +5234,11 @@
     display: inline-flex;
   }
 
-  .seed-image-frame-reaction-button {
+  .seed-image-frame-reaction-button__root {
     box-sizing: border-box;
     cursor: pointer;
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6);
-    --seed-icon-size: var(--seed-dimension-x6);
-    --seed-icon-color: var(--seed-color-palette-static-white);
     background: none;
     border: none;
     justify-content: center;
@@ -5107,7 +5248,7 @@
     position: relative;
   }
 
-  .seed-image-frame-reaction-button:before {
+  .seed-image-frame-reaction-button__root:before {
     content: "";
     top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
     right: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
@@ -5119,18 +5260,37 @@
     position: absolute;
   }
 
-  .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
+  .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
     outline: none;
   }
 
-  .seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
+  .seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
     border-radius: var(--seed-radius-r1);
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   }
 
-  .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
-    --seed-icon-color: var(--seed-color-bg-transparent);
+  .seed-image-frame-reaction-button__fillIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame-reaction-button__lineIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-palette-static-white);
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
+    color: var(--seed-color-bg-transparent);
   }
 
   .seed-inline-banner__root {