@seed-design/css 1.2.10 → 1.2.12

package/recipes/app-screen.css

@@ -58,146 +58,10 @@
 .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
     transform: translate3d(0, 0, 0);
 }
-[data-global-transition-state=enter-active] .seed-app-screen__layer--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: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-}
-[data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    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-screen__layer--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: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-}
-[data-swipe-back-state=swiping] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none;
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-}
-[data-swipe-back-state=canceling] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    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-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    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][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    transform: translate3d(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: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-screen__layer--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: calc(-30% + var(--swipe-back-displacement, 0) * 0.3);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-}
-[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 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: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none;
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0);
-}
-[data-swipe-back-state=canceling] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    animation: none !important;
-    transform: translate3d(-30%, 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-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    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);
-}
 .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
     height: 100%;
     background: var(--seed-color-bg-overlay);
 }
-[data-global-transition-state=enter-active] .seed-app-screen__dim--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-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    opacity: calc(1 - 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-global-transition-state=enter-done] .seed-app-screen__dim--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: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none;
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-}
-[data-swipe-back-state=canceling] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    animation: none !important;
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 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-screen__dim--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);
-}
 .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -208,55 +72,9 @@
     height: 160px;
     background: linear-gradient(var(--seed-color-bg-overlay), rgba(0, 0, 0, 0));
 }
-[data-global-transition-state=enter-active] .seed-app-screen__dim--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: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, -8vh, 0);
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
-    transform: translate3d(0, -8vh, 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: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
 .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
     transform: translate3d(0, 0, 0);
 }
-[data-global-transition-state=enter-active] .seed-app-screen__layer--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-screen__layer--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;
-}
 .seed-app-screen__root--transitionStyle_fadeIn {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -266,27 +84,6 @@
 .seed-app-screen__dim--transitionStyle_fadeIn {
     display: none;
 }
-[data-global-transition-state=enter-active] .seed-app-screen__layer--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-screen__layer--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-screen__layer--layerOffsetTop_safeArea {
     padding-top: var(--seed-safe-area-top);
 }

package/recipes/app-screen.layered.css

@@ -70,143 +70,11 @@
     transform: translate3d(0, 0, 0);
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    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-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    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-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    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"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
-    --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="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    --seed-exit-translate-x: -30%;
-    --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-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(-30%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
-    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;
-  }
-
   .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
     background: var(--seed-color-bg-overlay);
     height: 100%;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--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-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    opacity: calc(1 - 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-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 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-screen__dim--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;
-  }
-
   .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -219,50 +87,10 @@
     height: 160px;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[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 cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, -8vh, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[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 linear forwards seed-exit;
-    transform: translate3d(0, -8vh, 0);
-  }
-
   .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
     transform: translate3d(0, 0, 0);
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--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-screen__layer--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);
-  }
-
   .seed-app-screen__root--transitionStyle_fadeIn {
     --z-index-dim: calc(var(--z-index-base) + 0);
     --z-index-layer: calc(var(--z-index-base) + 3);
@@ -274,24 +102,6 @@
     display: none;
   }
 
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--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-screen__layer--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-screen__layer--layerOffsetTop_safeArea {
     padding-top: var(--seed-safe-area-top);
   }

package/recipes/chip.css

@@ -230,6 +230,15 @@
 .seed-chip__suffixIcon--size_small {
     --seed-icon-size: var(--seed-dimension-x3_5);
 }
+.seed-chip__root--size_small-layout_withText {
+    min-width: 44px;
+}
+.seed-chip__root--size_medium-layout_withText {
+    min-width: var(--seed-dimension-x12);
+}
+.seed-chip__root--size_large-layout_withText {
+    min-width: var(--seed-dimension-x13);
+}
 .seed-chip__root--size_small-layout_iconOnly {
     min-width: var(--seed-dimension-x8);
 }

package/recipes/chip.layered.css

@@ -258,6 +258,18 @@
     --seed-icon-size: var(--seed-dimension-x3_5);
   }
 
+  .seed-chip__root--size_small-layout_withText {
+    min-width: 44px;
+  }
+
+  .seed-chip__root--size_medium-layout_withText {
+    min-width: var(--seed-dimension-x12);
+  }
+
+  .seed-chip__root--size_large-layout_withText {
+    min-width: var(--seed-dimension-x13);
+  }
+
   .seed-chip__root--size_small-layout_iconOnly {
     min-width: var(--seed-dimension-x8);
   }

package/recipes/chip.layered.mjs

@@ -31,6 +31,18 @@ const defaultVariant = {
 };
 
 const compoundVariants = [
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "large",
+    "layout": "withText"
+  },
   {
     "size": "small",
     "layout": "iconOnly"

package/recipes/chip.mjs

@@ -31,6 +31,18 @@ const defaultVariant = {
 };
 
 const compoundVariants = [
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "large",
+    "layout": "withText"
+  },
   {
     "size": "small",
     "layout": "iconOnly"

package/vars/component/chip.d.ts

@@ -276,7 +276,27 @@ export declare const vars: {
       }
     }
   },
-  "layoutWithText": {},
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "44px"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x12)"
+      }
+    }
+  },
+  "sizeLargeLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x13)"
+      }
+    }
+  },
   "sizeSmallLayoutIconOnly": {
     "enabled": {
       "root": {

package/vars/component/chip.mjs

@@ -258,7 +258,27 @@ export const vars = {
       }
     }
   },
-  "layoutWithText": {},
+  "sizeSmallLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "44px"
+      }
+    }
+  },
+  "sizeMediumLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x12)"
+      }
+    }
+  },
+  "sizeLargeLayoutWithText": {
+    "enabled": {
+      "root": {
+        "minWidth": "var(--seed-dimension-x13)"
+      }
+    }
+  },
   "sizeSmallLayoutIconOnly": {
     "enabled": {
       "root": {

package/vars/component/list-item.d.ts

@@ -10,9 +10,11 @@ export declare const vars: {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
+        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
+        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
       },
-      "content": {
+      "body": {
         "gap": "var(--seed-dimension-x0_5)",
         "paddingRight": "var(--seed-dimension-x2_5)"
       },
@@ -52,8 +54,11 @@ export declare const vars: {
     "pressed": {
       "root": {
         "color": "var(--seed-color-bg-transparent-pressed)",
+        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다. */
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)"
+        "cornerRadius": "var(--seed-dimension-x2_5)",
+        /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. OS 동작 줄이기 등의 설정이 켜진 경우 이 값을 1로 변경하여 사용합니다. */
+        "contentScale": "0.97"
       }
     },
     "highlighted": {

package/vars/component/list-item.mjs

@@ -10,9 +10,11 @@ export const vars = {
         "marginDuration": "var(--seed-duration-d3)",
         "marginTimingFunction": "var(--seed-timing-function-easing)",
         "borderRadiusDuration": "var(--seed-duration-d3)",
-        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
+        "borderRadiusTimingFunction": "var(--seed-timing-function-easing)",
+        "contentScaleDuration": "var(--seed-duration-pressed-scale)",
+        "contentScaleTimingFunction": "var(--seed-timing-function-pressed-scale)"
       },
-      "content": {
+      "body": {
         "gap": "var(--seed-dimension-x0_5)",
         "paddingRight": "var(--seed-dimension-x2_5)"
       },
@@ -53,7 +55,8 @@ export const vars = {
       "root": {
         "color": "var(--seed-color-bg-transparent-pressed)",
         "marginX": "var(--seed-dimension-x1_5)",
-        "cornerRadius": "var(--seed-dimension-x2_5)"
+        "cornerRadius": "var(--seed-dimension-x2_5)",
+        "contentScale": "0.97"
       }
     },
     "highlighted": {

package/vars/component/top-navigation-text-button.d.ts

@@ -39,5 +39,14 @@ export declare const vars: {
         "color": "var(--seed-color-fg-disabled)"
       }
     }
-  }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        /** 버튼 레이블이 길어졌을 때 ellipsis 말줄임을 시작할 최대 너비입니다. Top Navigation main slot이 충분한 공간을 차지할 수 있도록 하기 위해 폰트 스케일링의 영향을 받지 않는 px 값을 사용합니다. */
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
 }

package/vars/component/top-navigation-text-button.mjs

@@ -39,5 +39,13 @@ export const vars = {
         "color": "var(--seed-color-fg-disabled)"
       }
     }
-  }
+  },
+  "themeIos": {
+    "enabled": {
+      "root": {
+        "maxWidth": "96px"
+      }
+    }
+  },
+  "themeAndroid": {}
 }