@seed-design/css 2.4.0 → 2.4.2

package/all.css

@@ -381,16 +381,33 @@
 }
 
 :root, [data-seed-color-mode="system"] {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
   color-scheme: light dark;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root, [data-seed-color-mode="system"] {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+  }
+}
+
 [data-seed-color-mode="light-only"] {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
   color-scheme: light;
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
   color-scheme: light only;
 }
 
 [data-seed-color-mode="dark-only"] {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
   color-scheme: dark;
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
   color-scheme: dark only;
 }
 
@@ -1170,7 +1187,7 @@
   padding-block: var(--seed-dimension-x4);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__trigger--size_responsive {
     padding-block: var(--seed-dimension-x5);
   }
@@ -1181,7 +1198,7 @@
   --seed-icon-size: 22px;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__prefix--size_responsive {
     margin-right: var(--seed-dimension-x3);
     --seed-icon-size: 22px;
@@ -1193,7 +1210,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__title--size_responsive {
     font-size: var(--seed-font-size-t7);
     line-height: var(--seed-line-height-t7);
@@ -1205,7 +1222,7 @@
   line-height: var(--seed-line-height-t3);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__description--size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -1217,7 +1234,7 @@
   --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__suffixIcon--size_responsive {
     --seed-suffix-icon-size: var(--seed-dimension-x6);
     --seed-suffix-icon-margin-left: var(--seed-dimension-x3);
@@ -1236,7 +1253,7 @@
   gap: var(--seed-dimension-x3);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-accordion__root--variant_separated-size_responsive {
     gap: var(--seed-dimension-x4);
   }
@@ -2302,6 +2319,7 @@
 }
 
 .seed-article {
+  -webkit-user-select: text;
   user-select: text;
   word-break: normal;
   overflow-wrap: break-word;
@@ -2335,13 +2353,18 @@
   -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   -webkit-mask-composite: source-out;
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
   mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
   mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   position: absolute;
   inset: 0;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -2354,13 +2377,18 @@
   -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   -webkit-mask-composite: source-out;
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
   mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
   mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   display: block;
   overflow: hidden;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -2383,8 +2411,11 @@
   -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   -webkit-mask-composite: source-out;
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
   mask-image: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>"), var(--svg-mask-uri);
+  -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
   mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
+  -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
   justify-content: center;
   align-items: center;
@@ -2393,7 +2424,9 @@
   inset: 0;
   overflow: hidden;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -2826,13 +2859,11 @@
   padding-bottom: var(--seed-safe-area-bottom);
   touch-action: none;
   will-change: transform;
-  --drawer-keyboard-transition: bottom var(--seed-duration-d5) cubic-bezier(.32, .72, 0, 1);
-  transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
+  transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
   flex-direction: column;
   flex: 1;
   display: flex;
   position: relative;
-  bottom: 0;
 }
 
 .seed-bottom-sheet__content[data-snap-points="true"] {
@@ -4094,6 +4125,7 @@
   --seed-box-max-width: var(--seed-box-max-width-base, initial);
   width: var(--seed-box-width);
   max-width: var(--seed-box-max-width);
+  max-height: 80vh;
   outline: none;
   flex-direction: column;
   flex: none;
@@ -4102,7 +4134,7 @@
   position: relative;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-content-dialog__content {
     --content-dialog-default-width: var(--content-dialog-size-width);
     --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
@@ -4184,6 +4216,7 @@
 
 .seed-content-dialog__body[data-overflow] {
   padding-bottom: var(--seed-dimension-x12);
+  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
 }
@@ -5577,12 +5610,16 @@
   -webkit-mask-composite: source-out;
   mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
   mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+  -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   position: absolute;
   inset: 0;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -5606,10 +5643,14 @@
   -webkit-mask-composite: source-out;
   mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
   mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+  -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -5657,7 +5698,9 @@
   -webkit-mask-composite: source-out;
   mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"white\"/></svg>");
   -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
   mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+  -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
   flex-direction: column;
   justify-content: center;
@@ -5666,7 +5709,9 @@
   position: absolute;
   inset: 0;
   transform: translateZ(0);
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-out;
   mask-composite: subtract;
 }
 
@@ -6718,7 +6763,7 @@
   padding-inline: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__root--size_responsive {
     height: var(--seed-dimension-x10);
     gap: var(--seed-dimension-x2);
@@ -6730,7 +6775,7 @@
   border-radius: var(--seed-radius-r3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__button--size_responsive {
     border-radius: var(--seed-radius-r2);
   }
@@ -6741,7 +6786,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__value--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6753,7 +6798,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__placeholder--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6765,7 +6810,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__prefixText--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6777,7 +6822,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__prefixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -6789,7 +6834,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__suffixText--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -6801,7 +6846,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__suffixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -6812,7 +6857,7 @@
   --seed-icon-size: 22px;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-input-button__clearButton--size_responsive {
     --seed-icon-size: var(--seed-dimension-x4_5);
   }
@@ -6829,13 +6874,13 @@
   margin-inline: auto;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-layout__content--density_low, .seed-layout__content--density_medium {
     max-width: 720px;
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-layout__content--density_medium {
     max-width: 1040px;
   }
@@ -7340,7 +7385,7 @@
   width: var(--seed-menu-reference-width, 240px);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu__content--size_responsive {
     width: var(--seed-menu-reference-width, 200px);
   }
@@ -7354,7 +7399,7 @@
   font-weight: var(--seed-font-weight-medium);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu__groupLabel--size_responsive {
     padding-block: var(--seed-dimension-x2);
     padding-inline: var(--seed-dimension-x4);
@@ -7368,6 +7413,7 @@
   scroll-margin-top: var(--seed-dimension-x2);
   scroll-margin-bottom: var(--seed-dimension-x2);
   cursor: default;
+  -webkit-user-select: none;
   user-select: none;
   color: inherit;
   text-align: start;
@@ -7499,7 +7545,7 @@
   --seed-suffix-icon-size: 18px;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu-item__root--size_responsive {
     padding-block: var(--seed-dimension-x2_5);
     padding-inline: var(--seed-dimension-x4);
@@ -7514,7 +7560,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu-item__label--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -7526,7 +7572,7 @@
   line-height: var(--seed-line-height-t3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-menu-item__description--size_responsive {
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2);
@@ -8917,6 +8963,7 @@
   --scroll-fog-to-color: #000;
   width: 100%;
   height: 100%;
+  -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
   mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
   -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
   -webkit-mask-composite: source-in;
@@ -8926,6 +8973,7 @@
   mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-composite: source-in;
   mask-composite: intersect;
 }
 
@@ -8970,6 +9018,7 @@
 .seed-segmented-control__item {
   text-align: center;
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
   box-sizing: border-box;
   overflow-wrap: break-word;
@@ -9139,7 +9188,7 @@
   font-weight: var(--seed-font-weight-medium);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select__groupLabel--size_responsive {
     padding-block: var(--seed-dimension-x2);
     padding-inline: var(--seed-dimension-x4);
@@ -9318,7 +9367,7 @@
   border-radius: var(--seed-radius-r3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__root--size_responsive {
     height: var(--seed-dimension-x10);
     gap: var(--seed-dimension-x2);
@@ -9332,7 +9381,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__value--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -9344,7 +9393,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__placeholder--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -9356,7 +9405,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__prefixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -9368,7 +9417,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-trigger__suffixIcon--size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -9379,6 +9428,7 @@
   scroll-margin-block: var(--seed-dimension-x2);
   padding-inline: var(--seed-dimension-x4);
   cursor: default;
+  -webkit-user-select: none;
   user-select: none;
   color: inherit;
   text-align: start;
@@ -9510,7 +9560,7 @@
   gap: var(--seed-dimension-x3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__root--size_responsive {
     padding-block: var(--seed-dimension-x2_5);
     gap: var(--seed-dimension-x2);
@@ -9522,7 +9572,7 @@
   height: 22px;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__prefixIcon--size_responsive {
     width: var(--seed-dimension-x4_5);
     height: var(--seed-dimension-x4_5);
@@ -9534,7 +9584,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__label--size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -9546,7 +9596,7 @@
   line-height: var(--seed-line-height-t3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__description--size_responsive {
     font-size: var(--seed-font-size-t2);
     line-height: var(--seed-line-height-t2);
@@ -9558,7 +9608,7 @@
   height: var(--seed-dimension-x3_5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-select-item__indicator--size_responsive {
     width: var(--seed-dimension-x3);
     height: var(--seed-dimension-x3);
@@ -10119,7 +10169,7 @@
   inset-block: 0;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-side-panel__content {
     --side-panel-default-width: var(--side-panel-size-width);
   }
@@ -10279,6 +10329,7 @@
 }
 
 .seed-side-panel__body {
+  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
   outline: var(--seed-dimension-x0_5) solid transparent;
@@ -10415,6 +10466,7 @@
 .seed-slider__root {
   align-items: stretch;
   gap: var(--seed-dimension-x0_5);
+  -webkit-user-select: none;
   user-select: none;
   touch-action: none;
   flex-direction: column;
@@ -11229,6 +11281,7 @@
   color: var(--seed-color-palette-gray-600);
   font-weight: var(--seed-font-weight-regular);
   white-space: pre;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -11999,13 +12052,25 @@
   font-weight: var(--seed-font-weight-regular);
 }
 
+.seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
+  -webkit-text-fill-color: var(--seed-color-fg-neutral);
+  transition: background-color 2147480000s 2147480000s;
+}
+
 .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) {
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
+    -webkit-background-clip: text;
+    background-clip: text;
+    transition: none;
+  }
+
   .seed-text-input__value:is(:autofill, :autofill) {
+    -webkit-background-clip: text;
     background-clip: text;
     transition: none;
   }
@@ -12117,7 +12182,7 @@
   padding-block: var(--seed-dimension-x3_5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--size_responsive:is(textarea) {
     min-height: 82px;
     padding-block: var(--seed-dimension-x3);
@@ -12240,7 +12305,7 @@
   border-radius: var(--seed-radius-r3);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__root--variant_outline-size_responsive {
     gap: var(--seed-dimension-x2);
     min-height: var(--seed-dimension-x10);
@@ -12253,7 +12318,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -12265,7 +12330,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive::placeholder {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -12276,7 +12341,7 @@
   padding-left: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive:first-child {
     padding-left: var(--seed-dimension-x3_5);
   }
@@ -12286,7 +12351,7 @@
   padding-right: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_outline-size_responsive:last-child {
     padding-right: var(--seed-dimension-x3_5);
   }
@@ -12297,7 +12362,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixText--variant_outline-size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -12308,7 +12373,7 @@
   margin-left: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
     margin-left: var(--seed-dimension-x3_5);
   }
@@ -12319,7 +12384,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixIcon--variant_outline-size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -12330,7 +12395,7 @@
   margin-left: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
     margin-left: var(--seed-dimension-x3_5);
   }
@@ -12341,7 +12406,7 @@
   line-height: var(--seed-line-height-t5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixText--variant_outline-size_responsive {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
@@ -12352,7 +12417,7 @@
   margin-right: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
     margin-right: var(--seed-dimension-x3_5);
   }
@@ -12363,7 +12428,7 @@
   height: var(--seed-dimension-x5);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixIcon--variant_outline-size_responsive {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4);
@@ -12374,7 +12439,7 @@
   margin-right: var(--seed-dimension-x4);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
     margin-right: var(--seed-dimension-x3_5);
   }
@@ -12438,7 +12503,7 @@
   padding-block: var(--seed-dimension-x2);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__root--variant_underline-size_responsive {
     gap: var(--seed-dimension-x2);
     min-height: 34px;
@@ -12451,7 +12516,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_underline-size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12463,7 +12528,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__value--variant_underline-size_responsive::placeholder {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12475,7 +12540,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixText--variant_underline-size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12487,7 +12552,7 @@
   height: var(--seed-dimension-x6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__prefixIcon--variant_underline-size_responsive {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
@@ -12499,7 +12564,7 @@
   line-height: var(--seed-line-height-t6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixText--variant_underline-size_responsive {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
@@ -12511,7 +12576,7 @@
   height: var(--seed-dimension-x6);
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-text-input__suffixIcon--variant_underline-size_responsive {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
@@ -12824,6 +12889,7 @@
   justify-content: var(--seed-wheel-picker-item-justify-content, center);
   color: var(--seed-wheel-picker-item-color);
   scroll-snap-align: center;
+  -webkit-user-select: none;
   user-select: none;
   display: flex;
 }
@@ -12944,7 +13010,7 @@
   }
 }
 
-@media (width >= 480px) {
+@media (min-width: 480px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-sm, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-sm, initial);
@@ -13040,7 +13106,7 @@
   }
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-md, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-md, initial);
@@ -13136,7 +13202,7 @@
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-lg, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-lg, initial);
@@ -13232,7 +13298,7 @@
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .seed-box {
     --seed-box-padding: var(--seed-box-padding-xl, initial);
     --seed-box-padding-y: var(--seed-box-padding-y-xl, initial);