@seed-design/css 1.2.10 → 1.2.12

package/recipes/app-bar.css

@@ -7,8 +7,7 @@
     display: flex;
     align-items: flex-end;
 }
-.seed-app-bar__root:before {
-    content: "";
+.seed-app-bar__background {
     position: absolute;
     pointer-events: none;
     top: 0;
@@ -92,282 +91,7 @@
 .seed-app-bar__left--theme_android {
     padding-right: 16px;
 }
-[data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-}
-[data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-}
-[data-swipe-back-state=swiping] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
-    animation: none;
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-}
-[data-swipe-back-state=canceling] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
-    animation: none !important;
-    transform: translate3d(0, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
-    animation: none !important;
-    transform: translate3d(100%, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 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;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none;
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-}
-[data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --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;
-}
-[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none;
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-}
-[data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 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;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none;
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-}
-[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[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;
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --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;
-}
-[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));
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none;
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-}
-[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: linear;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
-    animation: seed-enter;
-    animation-timing-function: ease-out;
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: ease-in;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-app-bar__root--tone_layer:before {
+.seed-app-bar__background--tone_layer {
     background: var(--seed-box-background, var(--seed-color-bg-layer-default));
 }
 .seed-app-bar__icon--tone_layer {
@@ -379,6 +103,6 @@
 .seed-app-bar__icon--tone_transparent {
     color: var(--seed-icon-color, var(--seed-color-palette-static-white));
 }
-.seed-app-bar__root--divider_true:before {
+.seed-app-bar__background--divider_true {
     box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
 }

package/recipes/app-bar.d.ts

@@ -23,7 +23,7 @@ declare type AppBarVariantMap = {
 
 export declare type AppBarVariantProps = Partial<AppBarVariant>;
 
-export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon" | "custom";
+export declare type AppBarSlotName = "root" | "background" | "left" | "right" | "iconButton" | "icon" | "custom";
 
 export declare const appBarVariantMap: AppBarVariantMap;
 

package/recipes/app-bar.layered.css

@@ -9,8 +9,7 @@
     top: 0;
   }
 
-  .seed-app-bar__root:before {
-    content: "";
+  .seed-app-bar__background {
     pointer-events: none;
     z-index: -1;
     position: absolute;
@@ -108,269 +107,7 @@
     padding-right: 16px;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(100%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-bar__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__icon--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__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;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeIn[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: .3s ease-out seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeIn[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: .15s ease-in forwards seed-exit;
-  }
-
-  .seed-app-bar__root--tone_layer:before {
+  .seed-app-bar__background--tone_layer {
     background: var(--seed-box-background, var(--seed-color-bg-layer-default));
   }
 
@@ -386,7 +123,7 @@
     color: var(--seed-icon-color, var(--seed-color-palette-static-white));
   }
 
-  .seed-app-bar__root--divider_true:before {
+  .seed-app-bar__background--divider_true {
     box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
   }
 }

package/recipes/app-bar.layered.mjs

@@ -6,6 +6,10 @@ const appBarSlotNames = [
     "root",
     "seed-app-bar__root"
   ],
+  [
+    "background",
+    "seed-app-bar__background"
+  ],
   [
     "left",
     "seed-app-bar__left"

package/recipes/app-bar.mjs

@@ -6,6 +6,10 @@ const appBarSlotNames = [
     "root",
     "seed-app-bar__root"
   ],
+  [
+    "background",
+    "seed-app-bar__background"
+  ],
   [
     "left",
     "seed-app-bar__left"