@seed-design/css 1.1.9 → 1.1.12

package/all.css

@@ -115,10 +115,10 @@
   padding-bottom: var(--seed-box-padding-bottom);
   padding-left: var(--seed-box-padding-left);
   padding-right: var(--seed-box-padding-right);
-  --seed-box-bleed-bottom: initial;
-  --seed-box-bleed-top: initial;
-  --seed-box-bleed-left: initial;
-  --seed-box-bleed-right: initial;
+  --seed-box-bleed-bottom: 0px;
+  --seed-box-bleed-top: 0px;
+  --seed-box-bleed-left: 0px;
+  --seed-box-bleed-right: 0px;
   margin-top: calc(var(--seed-box-bleed-top) * -1);
   margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
   margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -723,10 +723,10 @@
   padding-bottom: var(--seed-box-padding-bottom);
   padding-left: var(--seed-box-padding-left);
   padding-right: var(--seed-box-padding-right);
-  --seed-box-bleed-bottom: initial;
-  --seed-box-bleed-top: initial;
-  --seed-box-bleed-left: initial;
-  --seed-box-bleed-right: initial;
+  --seed-box-bleed-bottom: 0px;
+  --seed-box-bleed-top: 0px;
+  --seed-box-bleed-left: 0px;
+  --seed-box-bleed-right: 0px;
   margin-top: calc(var(--seed-box-bleed-top) * -1);
   margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
   margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -2398,7 +2398,7 @@
 }
 
 .seed-badge__root--size_medium {
-  max-width: 7.5rem;
+  max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
   min-height: var(--seed-dimension-x5);
   padding-left: var(--seed-dimension-x1_5);
   padding-right: var(--seed-dimension-x1_5);
@@ -2410,7 +2410,7 @@
 }
 
 .seed-badge__root--size_large {
-  max-width: 6.75rem;
+  max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
   min-height: var(--seed-dimension-x6);
   padding-left: var(--seed-dimension-x2);
   padding-right: var(--seed-dimension-x2);
@@ -2537,18 +2537,6 @@
   inset: 0;
 }
 
-.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points="false"] {
-  animation-name: fade-in;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter);
-}
-
-.seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
-  animation-name: fade-out;
-  animation-duration: var(--seed-duration-d4);
-  animation-timing-function: var(--seed-timing-function-exit);
-}
-
 .seed-bottom-sheet__backdrop[data-snap-points="true"], .seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="true"]:not([data-snap-points-overlay="true"]) {
   opacity: 0;
 }
@@ -2557,12 +2545,6 @@
   opacity: 1;
 }
 
-.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"] {
-  animation-name: fade-in;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter);
-}
-
 .seed-bottom-sheet__content {
   box-sizing: border-box;
   word-break: break-all;
@@ -2573,36 +2555,16 @@
   touch-action: none;
   will-change: transform;
   transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
   flex-direction: column;
   flex: 1;
   display: flex;
   position: relative;
 }
 
-.seed-bottom-sheet__content:is([data-state="open"], [data-open])[data-snap-points="false"] {
-  animation-name: drawer-slide-from-bottom;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-}
-
-.seed-bottom-sheet__content:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
-  animation-name: drawer-slide-to-bottom;
-  animation-duration: var(--seed-duration-d4);
-  animation-timing-function: var(--seed-timing-function-exit);
-}
-
 .seed-bottom-sheet__content[data-snap-points="true"] {
   transform: translate3d(0, var(--initial-transform, 100%), 0);
 }
 
-.seed-bottom-sheet__content:is([data-state="open"], [data-open])[data-delayed-snap-points="true"] {
-  animation-name: drawer-slide-from-bottom;
-  animation-duration: var(--seed-duration-d6);
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-}
-
 .seed-bottom-sheet__content[data-delayed-snap-points="true"] {
   transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
@@ -2705,6 +2667,47 @@
   padding-right: 50px;
 }
 
+.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"] {
+  animation-name: fade-in;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter);
+}
+
+.seed-bottom-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
+  animation-name: fade-out;
+  animation-duration: var(--seed-duration-d4);
+  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"] {
+  animation-name: fade-in;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter);
+}
+
+.seed-bottom-sheet__content--skipAnimation_false {
+  animation-duration: var(--seed-duration-d6);
+  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"] {
+  animation-name: drawer-slide-from-bottom;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
+.seed-bottom-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
+  animation-name: drawer-slide-to-bottom;
+  animation-duration: var(--seed-duration-d4);
+  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"] {
+  animation-name: drawer-slide-from-bottom;
+  animation-duration: var(--seed-duration-d6);
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+}
+
 .seed-bottom-sheet-handle__root {
   background-color: var(--seed-color-palette-gray-400);
   width: 36px;
@@ -3726,27 +3729,6 @@
   inset: 0;
 }
 
-.seed-dialog__backdrop:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter);
-  animation-duration: var(--seed-duration-d2);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1;
-}
-
-.seed-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
 .seed-dialog__content {
   box-sizing: border-box;
   word-break: break-all;
@@ -3761,27 +3743,6 @@
   position: relative;
 }
 
-.seed-dialog__content:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-  animation-duration: var(--seed-duration-d4);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1.3;
-}
-
-.seed-dialog__content:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
 .seed-dialog__header {
   padding-left: var(--seed-dimension-x5);
   padding-right: var(--seed-dimension-x5);
@@ -3818,6 +3779,48 @@
   display: flex;
 }
 
+.seed-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d2);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+}
+
+.seed-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+  animation-duration: var(--seed-duration-d4);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1.3;
+}
+
+.seed-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
 .seed-extended-action-sheet__positioner {
   overscroll-behavior-y: none;
   --sheet-z-index: 2;
@@ -4119,7 +4122,6 @@
 .seed-field__footer {
   padding-left: var(--seed-dimension-x0_5);
   padding-right: var(--seed-dimension-x0_5);
-  justify-content: space-between;
   align-items: flex-start;
   gap: var(--seed-dimension-x2);
   display: flex;
@@ -4149,6 +4151,12 @@
   display: flex;
 }
 
+.seed-field__characterCountArea {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  margin-left: auto;
+}
+
 .seed-field__characterCount {
   color: var(--seed-color-fg-neutral);
   font-weight: var(--seed-font-weight-regular);
@@ -4183,21 +4191,21 @@
 
 .seed-field-label__indicatorText {
   vertical-align: bottom;
+  padding-left: clamp(calc(4px * var(--seed-font-size-limit-min)), .25rem, calc(4px * var(--seed-font-size-limit-max)));
   color: var(--seed-color-fg-neutral-subtle);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
-  padding-left: .25rem;
   display: inline;
 }
 
 .seed-field-label__indicatorIcon {
   vertical-align: top;
-  width: .375rem;
-  height: .375rem;
+  width: clamp(calc(6px * var(--seed-font-size-limit-min)), .375rem, calc(6px * var(--seed-font-size-limit-max)));
+  height: clamp(calc(6px * var(--seed-font-size-limit-min)), .375rem, calc(6px * var(--seed-font-size-limit-max)));
+  margin-top: clamp(calc(4px * var(--seed-font-size-limit-min)), .25rem, calc(4px * var(--seed-font-size-limit-max)));
+  margin-left: clamp(calc(2px * var(--seed-font-size-limit-min)), .125rem, calc(2px * var(--seed-font-size-limit-max)));
   color: var(--seed-color-fg-critical);
-  margin-top: .25rem;
-  margin-left: .125rem;
   display: inline;
 }
 
@@ -5038,27 +5046,6 @@
   inset: 0;
 }
 
-.seed-menu-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d2);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 0;
-  --seed-exit-opacity: 0;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
-.seed-menu-sheet__backdrop:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter);
-  animation-duration: var(--seed-duration-d2);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 0;
-  --seed-enter-opacity: 0;
-  --seed-enter-scale: 1;
-}
-
 .seed-menu-sheet__content {
   box-sizing: border-box;
   word-break: break-all;
@@ -5076,27 +5063,6 @@
   position: relative;
 }
 
-.seed-menu-sheet__content:not(:is([data-state="open"], [data-open])) {
-  animation: seed-exit;
-  animation-timing-function: var(--seed-timing-function-exit);
-  animation-duration: var(--seed-duration-d4);
-  --seed-exit-translate-x: 0;
-  --seed-exit-translate-y: 100%;
-  --seed-exit-opacity: 1;
-  --seed-exit-scale: 1;
-  animation-fill-mode: forwards;
-}
-
-.seed-menu-sheet__content:is([data-state="open"], [data-open]) {
-  animation: seed-enter;
-  animation-timing-function: var(--seed-timing-function-enter-expressive);
-  animation-duration: var(--seed-duration-d6);
-  --seed-enter-translate-x: 0;
-  --seed-enter-translate-y: 100%;
-  --seed-enter-opacity: 1;
-  --seed-enter-scale: 1;
-}
-
 .seed-menu-sheet__header {
   align-items: center;
   gap: var(--seed-dimension-x1);
@@ -5159,6 +5125,48 @@
   background-color: var(--seed-color-bg-neutral-weak-pressed);
 }
 
+.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d2);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+}
+
+.seed-menu-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-menu-sheet__content--skipAnimation_false:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+  animation-duration: var(--seed-duration-d6);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 100%;
+  --seed-enter-opacity: 1;
+  --seed-enter-scale: 1;
+}
+
+.seed-menu-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d4);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 100%;
+  --seed-exit-opacity: 1;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
 .seed-menu-sheet-item {
   background-color: var(--seed-color-bg-neutral-weak);
   min-height: 52px;
@@ -5506,6 +5514,20 @@
   color: var(--seed-color-palette-static-white);
 }
 
+.seed-page-banner__root--tone_magic-variant_weak {
+  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
+  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
+  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+}
+
+.seed-page-banner__title--tone_magic-variant_weak, .seed-page-banner__description--tone_magic-variant_weak, .seed-page-banner__button--tone_magic-variant_weak {
+  color: var(--seed-color-fg-neutral);
+}
+
 .seed-progress-circle__root {
   box-sizing: border-box;
   display: inline-flex;
@@ -5882,7 +5904,7 @@
   width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
   border-radius: var(--seed-radius-full);
   background-color: var(--seed-color-palette-gray-00);
-  box-shadow: 0px 1px 6px 0px #0000000d, inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
   transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
   position: absolute;
 }
@@ -7129,6 +7151,18 @@
   font-weight: var(--seed-font-weight-regular);
 }
 
+.seed-text-input__value:is(:autofill, :autofill) {
+  -webkit-text-fill-color: var(--seed-color-fg-neutral);
+  transition: background-color 2147480000s 2147480000s;
+}
+
+@supports (background-clip: text) {
+  .seed-text-input__value:is(:autofill, :autofill) {
+    background-clip: text;
+    transition: none;
+  }
+}
+
 .seed-text-input__value:is(:disabled, [disabled], [data-disabled]), .seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
   color: var(--seed-color-fg-disabled);
 }