@seed-design/css 2.1.3 → 2.2.0

package/all.css

@@ -929,6 +929,20 @@
   --seed-shadow-s3: 0px 4px 16px 0px #000c;
 }
 
+:root {
+  --seed-scale-s95: .95;
+  --seed-scale-s97: .97;
+  --seed-scale-s98: .98;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --seed-scale-s95: 1;
+    --seed-scale-s97: 1;
+    --seed-scale-s98: 1;
+  }
+}
+
 .seed-accordion__root, .seed-accordion__item {
   flex-direction: column;
   width: 100%;
@@ -948,8 +962,7 @@
   text-align: start;
   width: 100%;
   padding: 0;
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
   outline: var(--seed-dimension-x0_5) solid transparent;
   outline-offset: var(--seed-dimension-x0_5);
@@ -1045,8 +1058,7 @@
 .seed-accordion__item--variant_inline:not(:last-child):after {
   content: "";
   bottom: 0;
-  left: var(--seed-dimension-x3);
-  right: var(--seed-dimension-x3);
+  inset-inline: var(--seed-dimension-x3);
   background-color: var(--seed-color-stroke-neutral-subtle);
   height: 1px;
   position: absolute;
@@ -1055,7 +1067,7 @@
 .seed-accordion__trigger--variant_inline:before {
   content: "";
   z-index: -1;
-  transition-property: background-color, left, right, border-radius;
+  transition-property: background-color, inset-inline, border-radius;
   transition-duration: var(--seed-duration-color-transition);
   transition-timing-function: var(--seed-timing-function-easing);
   position: absolute;
@@ -1065,8 +1077,7 @@
 @media (hover: hover) and (pointer: fine) {
   .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x1_5);
-    right: var(--seed-dimension-x1_5);
+    inset-inline: var(--seed-dimension-x1_5);
     border-radius: var(--seed-dimension-x2_5);
   }
 }
@@ -1074,8 +1085,7 @@
 @media not all and (hover: hover) and (pointer: fine) {
   .seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x1_5);
-    right: var(--seed-dimension-x1_5);
+    inset-inline: var(--seed-dimension-x1_5);
     border-radius: var(--seed-dimension-x2_5);
   }
 }
@@ -1109,8 +1119,7 @@
 }
 
 .seed-accordion__trigger--size_medium {
-  padding-top: var(--seed-dimension-x4);
-  padding-bottom: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x4);
 }
 
 .seed-accordion__prefix--size_medium {
@@ -1134,8 +1143,7 @@
 }
 
 .seed-accordion__trigger--size_large {
-  padding-top: var(--seed-dimension-x5);
-  padding-bottom: var(--seed-dimension-x5);
+  padding-block: var(--seed-dimension-x5);
 }
 
 .seed-accordion__prefix--size_large {
@@ -1159,14 +1167,12 @@
 }
 
 .seed-accordion__trigger--size_responsive {
-  padding-top: var(--seed-dimension-x4);
-  padding-bottom: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x4);
 }
 
 @media (width >= 768px) {
   .seed-accordion__trigger--size_responsive {
-    padding-top: var(--seed-dimension-x5);
-    padding-bottom: var(--seed-dimension-x5);
+    padding-block: var(--seed-dimension-x5);
   }
 }
 
@@ -1306,7 +1312,8 @@
 }
 
 .seed-action-button {
-  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  scale: 1;
 }
 
 .seed-action-button--variant_brandSolid {
@@ -1574,6 +1581,10 @@
   --seed-icon-size: var(--seed-dimension-x3_5);
 }
 
+.seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+  scale: var(--seed-scale-s95);
+}
+
 .seed-action-button--size_small {
   height: var(--seed-dimension-x9);
   border-radius: var(--seed-radius-r2);
@@ -1584,6 +1595,10 @@
   --seed-icon-size: var(--seed-dimension-x4);
 }
 
+.seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+  scale: var(--seed-scale-s97);
+}
+
 .seed-action-button--size_medium {
   height: var(--seed-dimension-x10);
   border-radius: var(--seed-radius-r2);
@@ -1594,6 +1609,10 @@
   --seed-icon-size: 18px;
 }
 
+.seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+  scale: var(--seed-scale-s97);
+}
+
 .seed-action-button--size_large {
   height: var(--seed-dimension-x13);
   border-radius: var(--seed-radius-r3);
@@ -1604,6 +1623,10 @@
   --seed-icon-size: 22px;
 }
 
+.seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+  scale: var(--seed-scale-s98);
+}
+
 .seed-action-button--size_xsmall-layout_withText {
   gap: var(--seed-dimension-x1);
   --seed-box-padding-left: var(--seed-dimension-x3_5);
@@ -2010,8 +2033,7 @@
 
 .seed-app-bar__root--theme_cupertino {
   height: calc(44px + var(--seed-safe-area-top));
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-inline: var(--seed-dimension-x4);
   padding-top: var(--seed-safe-area-top);
 }
 
@@ -2035,8 +2057,7 @@
 
 .seed-app-bar__root--theme_android {
   height: calc(56px + var(--seed-safe-area-top));
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-inline: var(--seed-dimension-x4);
   padding-top: var(--seed-safe-area-top);
 }
 
@@ -2109,16 +2130,14 @@
 .seed-app-bar-main__root--theme_cupertino {
   text-align: center;
   top: var(--seed-safe-area-top);
-  padding-left: var(--centered-title-padding-x, 0);
-  padding-right: var(--centered-title-padding-x, 0);
+  bottom: 0;
+  padding-inline: var(--centered-title-padding-x, 0);
   pointer-events: none;
   justify-content: center;
   align-items: center;
   display: flex;
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-app-bar-main__root--theme_android {
@@ -2147,18 +2166,16 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   overflow: hidden;
 }
 
 .seed-app-screen__dim {
   z-index: var(--z-index-dim);
+  top: 0;
   width: 100%;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-app-screen__layer {
@@ -2168,8 +2185,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
   overflow-y: scroll;
 }
 
@@ -2190,8 +2206,7 @@
   width: 20px;
   height: 100%;
   position: absolute;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-app-screen__root--theme_cupertino {
@@ -2263,6 +2278,7 @@
 
 .seed-app-screen__layer--tone_transparent-gradient_true:before {
   content: "";
+  inset-inline: 0;
   margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
   height: calc(66px + 400px + var(--seed-safe-area-top));
   pointer-events: none;
@@ -2271,8 +2287,6 @@
   display: block;
   position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
 }
 
 .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
@@ -2653,10 +2667,8 @@
 .seed-badge__root--size_medium {
   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);
-  padding-top: var(--seed-dimension-x0_5);
-  padding-bottom: var(--seed-dimension-x0_5);
+  padding-inline: var(--seed-dimension-x1_5);
+  padding-block: var(--seed-dimension-x0_5);
   border-radius: var(--seed-radius-r1);
   font-size: var(--seed-font-size-t1);
   line-height: var(--seed-line-height-t1);
@@ -2665,10 +2677,8 @@
 .seed-badge__root--size_large {
   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);
-  padding-top: var(--seed-dimension-x1);
-  padding-bottom: var(--seed-dimension-x1);
+  padding-inline: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x1);
   border-radius: var(--seed-radius-r1_5);
   font-size: var(--seed-font-size-t2);
   line-height: var(--seed-line-height-t2);
@@ -2829,13 +2839,12 @@
 
 .seed-bottom-sheet__content:after {
   content: "";
+  top: 100%;
   background: inherit;
   z-index: -1;
   height: 200vh;
   position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-bottom-sheet__header {
@@ -2860,8 +2869,7 @@
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-regular);
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   white-space: pre-wrap;
   margin: 0;
 }
@@ -2893,8 +2901,7 @@
   --seed-box-max-height: var(--seed-box-max-height-base, initial);
   --seed-box-justify-content: initial;
   --seed-box-align-items: initial;
-  padding-left: var(--seed-box-padding-x);
-  padding-right: var(--seed-box-padding-x);
+  padding-inline: var(--seed-box-padding-x);
   height: var(--seed-box-height);
   min-height: var(--seed-box-min-height);
   max-height: var(--seed-box-max-height);
@@ -2905,8 +2912,7 @@
 }
 
 .seed-bottom-sheet__footer {
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   padding-top: var(--seed-dimension-x3);
   padding-bottom: var(--seed-dimension-x4);
   flex-direction: column;
@@ -3065,10 +3071,8 @@
   text-align: start;
   width: 100%;
   min-height: 50px;
-  padding-left: var(--seed-dimension-x3_5);
-  padding-right: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x3_5);
-  padding-bottom: var(--seed-dimension-x3_5);
+  padding-inline: var(--seed-dimension-x3_5);
+  padding-block: var(--seed-dimension-x3_5);
   align-items: center;
   gap: var(--seed-dimension-x3);
   border-radius: var(--seed-radius-r2_5);
@@ -3577,8 +3581,7 @@
 
 .seed-chip__label {
   font-weight: var(--seed-font-weight-medium);
-  padding-left: var(--seed-dimension-x1_5);
-  padding-right: var(--seed-dimension-x1_5);
+  padding-inline: var(--seed-dimension-x1_5);
   justify-content: center;
   align-items: center;
   display: inline-flex;
@@ -3751,8 +3754,7 @@
 
 .seed-chip__root--size_large {
   height: 40px;
-  padding-left: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x2_5);
   --seed-icon-size: var(--seed-dimension-x4);
 }
 
@@ -3767,8 +3769,7 @@
 
 .seed-chip__root--size_medium {
   height: 36px;
-  padding-left: var(--seed-dimension-x2);
-  padding-right: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-x2);
   --seed-icon-size: var(--seed-dimension-x4);
 }
 
@@ -3787,8 +3788,7 @@
 
 .seed-chip__root--size_small {
   height: 32px;
-  padding-left: var(--seed-dimension-x1_5);
-  padding-right: var(--seed-dimension-x1_5);
+  padding-inline: var(--seed-dimension-x1_5);
   --seed-icon-size: var(--seed-dimension-x3_5);
 }
 
@@ -3899,8 +3899,7 @@
   min-height: 36px;
   min-width: var(--seed-dimension-x12);
   font-size: var(--seed-font-size-t4);
-  padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
-  padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
+  padding-inline: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
 }
 
 .seed-chip-tabs__list--size_large {
@@ -3911,8 +3910,7 @@
   min-height: 40px;
   min-width: var(--seed-dimension-x13);
   font-size: var(--seed-font-size-t4);
-  padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
-  padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
+  padding-inline: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
 }
 
 .seed-chip-tabs__trigger--variant_neutralSolid {
@@ -4165,10 +4163,8 @@
 
 .seed-contextual-floating-button--layout_withText {
   min-height: 36px;
-  padding-left: var(--seed-dimension-x3_5);
-  padding-right: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-x3_5);
+  padding-block: var(--seed-dimension-x2);
   gap: var(--seed-dimension-x1);
   --seed-prefix-icon-size: 16px;
 }
@@ -4315,8 +4311,7 @@
 }
 
 .seed-dialog__header {
-  padding-left: var(--seed-dimension-x5);
-  padding-right: var(--seed-dimension-x5);
+  padding-inline: var(--seed-dimension-x5);
   padding-top: var(--seed-dimension-x5);
   gap: var(--seed-dimension-x1_5);
   flex-direction: column;
@@ -4341,8 +4336,7 @@
 }
 
 .seed-dialog__footer {
-  padding-left: var(--seed-dimension-x5);
-  padding-right: var(--seed-dimension-x5);
+  padding-inline: var(--seed-dimension-x5);
   padding-top: var(--seed-dimension-x4);
   padding-bottom: var(--seed-dimension-x5);
   flex-direction: column;
@@ -4682,8 +4676,7 @@
 }
 
 .seed-field__header {
-  padding-left: var(--seed-dimension-x0_5);
-  padding-right: var(--seed-dimension-x0_5);
+  padding-inline: var(--seed-dimension-x0_5);
   justify-content: space-between;
   align-items: center;
   gap: var(--seed-dimension-x2_5);
@@ -4691,8 +4684,7 @@
 }
 
 .seed-field__footer {
-  padding-left: var(--seed-dimension-x0_5);
-  padding-right: var(--seed-dimension-x0_5);
+  padding-inline: var(--seed-dimension-x0_5);
   align-items: flex-start;
   gap: var(--seed-dimension-x2);
   display: flex;
@@ -4790,8 +4782,7 @@
 
 .seed-attachment-input__root {
   gap: var(--seed-dimension-x2);
-  margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
-  margin-right: calc(var(--seed-attachment-input-extend-x) * -1);
+  margin-inline: calc(var(--seed-attachment-input-extend-x) * -1);
   flex-direction: column;
   display: flex;
 }
@@ -4803,10 +4794,8 @@
   border: 1px dashed var(--seed-color-palette-gray-500);
   border-radius: var(--seed-radius-r3);
   height: 120px;
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
-  margin-left: var(--seed-attachment-input-extend-x);
-  margin-right: var(--seed-attachment-input-extend-x);
+  padding-inline: var(--seed-dimension-x4);
+  margin-inline: var(--seed-attachment-input-extend-x);
   flex-direction: column;
   transition: border-color .2s;
   display: flex;
@@ -4837,8 +4826,7 @@
   gap: var(--seed-dimension-x2);
   padding-top: var(--seed-dimension-x1);
   margin-top: calc(var(--seed-dimension-x1) * -1);
-  padding-left: var(--seed-attachment-input-extend-x);
-  padding-right: var(--seed-attachment-input-extend-x);
+  padding-inline: var(--seed-attachment-input-extend-x);
   display: flex;
   overflow-x: auto;
 }
@@ -5059,8 +5047,7 @@
 
 .seed-attachment-input-item__root--type_general {
   width: 160px;
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-inline: var(--seed-dimension-x4);
 }
 
 .seed-attachment-input-item__root--type_general:before {
@@ -5107,18 +5094,16 @@
 }
 
 .seed-attachment-input-item__badge--type_image {
+  bottom: 0;
   height: var(--seed-dimension-x6);
-  padding-left: var(--seed-dimension-x1);
-  padding-right: var(--seed-dimension-x1);
+  padding-inline: var(--seed-dimension-x1);
   background-color: var(--seed-color-bg-overlay);
   border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3);
   justify-content: center;
   align-items: center;
   display: flex;
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-attachment-input-item__badgeLabel--type_image {
@@ -5290,8 +5275,7 @@
 }
 
 .seed-floating-action-button__root--extended_true {
-  padding-left: var(--seed-dimension-x4_5);
-  padding-right: var(--seed-dimension-x4_5);
+  padding-inline: var(--seed-dimension-x4_5);
   width: fit-content;
   max-width: 999px;
   height: 48px;
@@ -5383,10 +5367,8 @@
 
 .seed-help-bubble__content {
   background: var(--seed-color-bg-neutral-inverted);
-  padding-left: var(--seed-dimension-x3);
-  padding-right: var(--seed-dimension-x3);
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x3);
+  padding-block: var(--seed-dimension-x2_5);
   border-radius: var(--seed-radius-r3);
   --seed-box-max-width-base: none;
   --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
@@ -5470,8 +5452,7 @@
   padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
   margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
   margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
-  margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
-  margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+  margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
   color: var(--seed-color-fg-neutral-inverted);
   --seed-icon-size: var(--seed-dimension-x3_5);
   --seed-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -5553,10 +5534,8 @@
   background-color: var(--seed-color-palette-static-black-alpha-800);
   color: var(--seed-color-palette-static-white);
   border-radius: var(--seed-radius-full);
-  padding-left: var(--seed-dimension-x1_5);
-  padding-right: var(--seed-dimension-x1_5);
-  padding-top: var(--seed-dimension-x0_5);
-  padding-bottom: var(--seed-dimension-x0_5);
+  padding-inline: var(--seed-dimension-x1_5);
+  padding-block: var(--seed-dimension-x0_5);
   font-size: var(--seed-font-size-t1);
   line-height: var(--seed-line-height-t1);
   font-weight: var(--seed-font-weight-medium);
@@ -5588,10 +5567,7 @@
 
 .seed-image-frame-reaction-button__root:before {
   content: "";
-  top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
-  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
-  bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
-  left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
   outline: var(--seed-dimension-x0_5) solid transparent;
   outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -5955,8 +5931,7 @@
 .seed-input-button__root--size_large {
   height: var(--seed-dimension-x13);
   gap: var(--seed-dimension-x2_5);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-inline: var(--seed-dimension-x4);
 }
 
 .seed-input-button__button--size_large {
@@ -5990,8 +5965,7 @@
 .seed-input-button__root--size_medium {
   height: var(--seed-dimension-x10);
   gap: var(--seed-dimension-x2);
-  padding-left: var(--seed-dimension-x3_5);
-  padding-right: var(--seed-dimension-x3_5);
+  padding-inline: var(--seed-dimension-x3_5);
 }
 
 .seed-input-button__button--size_medium {
@@ -6025,16 +5999,14 @@
 .seed-input-button__root--size_responsive {
   height: var(--seed-dimension-x13);
   gap: var(--seed-dimension-x2_5);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-inline: var(--seed-dimension-x4);
 }
 
 @media (width >= 1280px) {
   .seed-input-button__root--size_responsive {
     height: var(--seed-dimension-x10);
     gap: var(--seed-dimension-x2);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
+    padding-inline: var(--seed-dimension-x3_5);
   }
 }
 
@@ -6138,8 +6110,7 @@
 
 .seed-layout__content {
   width: 100%;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 @media (width >= 768px) {
@@ -6206,10 +6177,8 @@
   gap: var(--seed-dimension-x2_5);
   box-sizing: border-box;
   width: 100%;
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
+  padding-block: var(--seed-dimension-x2);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   justify-content: space-between;
@@ -6232,10 +6201,8 @@
   -moz-osx-font-smoothing: grayscale;
   isolation: isolate;
   width: 100%;
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
-  padding-top: var(--seed-dimension-x3);
-  padding-bottom: var(--seed-dimension-x3);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
+  padding-block: var(--seed-dimension-x3);
   --seed-box-align-items: center;
   align-items: var(--seed-box-align-items);
   border: none;
@@ -6338,7 +6305,7 @@
 .seed-list-item__content:before {
   content: "";
   z-index: -1;
-  transition-property: background-color, left, right, border-radius;
+  transition-property: background-color, inset-inline, border-radius;
   transition-duration: var(--seed-duration-color-transition);
   transition-timing-function: var(--seed-timing-function-easing);
   position: absolute;
@@ -6348,8 +6315,7 @@
 @media (hover: hover) and (pointer: fine) {
   .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x1_5);
-    right: var(--seed-dimension-x1_5);
+    inset-inline: var(--seed-dimension-x1_5);
     border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
   }
 }
@@ -6357,8 +6323,7 @@
 @media not all and (hover: hover) and (pointer: fine) {
   .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x1_5);
-    right: var(--seed-dimension-x1_5);
+    inset-inline: var(--seed-dimension-x1_5);
     border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
   }
 }
@@ -6366,8 +6331,7 @@
 @media (hover: hover) and (pointer: fine) {
   .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x1_5);
-    right: var(--seed-dimension-x1_5);
+    inset-inline: var(--seed-dimension-x1_5);
     border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
   }
 }
@@ -6375,8 +6339,7 @@
 @media not all and (hover: hover) and (pointer: fine) {
   .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x1_5);
-    right: var(--seed-dimension-x1_5);
+    inset-inline: var(--seed-dimension-x1_5);
     border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
   }
 }
@@ -6496,10 +6459,8 @@
   -moz-osx-font-smoothing: grayscale;
   border-radius: var(--seed-radius-full);
   min-height: var(--seed-dimension-x5);
-  padding-left: var(--seed-dimension-x1_5);
-  padding-right: var(--seed-dimension-x1_5);
-  padding-top: var(--seed-dimension-x0_5);
-  padding-bottom: var(--seed-dimension-x0_5);
+  padding-inline: var(--seed-dimension-x1_5);
+  padding-block: var(--seed-dimension-x0_5);
   font-size: var(--seed-font-size-t1);
   line-height: var(--seed-line-height-t1);
   font-weight: var(--seed-font-weight-bold);
@@ -6609,8 +6570,7 @@
 .seed-menu__scrollArea {
   max-height: min(480px, var(--seed-menu-available-height, 480px));
   box-sizing: border-box;
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x2);
   gap: var(--seed-dimension-x2);
   flex-direction: column;
   display: flex;
@@ -6624,8 +6584,7 @@
 
 .seed-menu__group + .seed-menu__group:before {
   content: "";
-  margin-left: var(--seed-dimension-x4);
-  margin-right: var(--seed-dimension-x4);
+  margin-inline: var(--seed-dimension-x4);
   margin-bottom: var(--seed-dimension-x2);
   background-color: var(--seed-color-stroke-neutral-muted);
   flex-shrink: 0;
@@ -6642,10 +6601,8 @@
 }
 
 .seed-menu__groupLabel--size_medium {
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x4);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-medium);
@@ -6656,10 +6613,8 @@
 }
 
 .seed-menu__groupLabel--size_small {
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-x4);
   font-size: var(--seed-font-size-t3);
   line-height: var(--seed-line-height-t3);
   font-weight: var(--seed-font-weight-regular);
@@ -6676,10 +6631,8 @@
 }
 
 .seed-menu__groupLabel--size_responsive {
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x4);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-medium);
@@ -6687,10 +6640,8 @@
 
 @media (width >= 1280px) {
   .seed-menu__groupLabel--size_responsive {
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x2);
+    padding-inline: var(--seed-dimension-x4);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-regular);
@@ -6719,7 +6670,7 @@
 .seed-menu-item__root:before {
   content: "";
   z-index: -1;
-  transition-property: background-color, left, right, border-radius;
+  transition-property: background-color, inset-inline, border-radius;
   transition-duration: var(--seed-duration-color-transition);
   transition-timing-function: var(--seed-timing-function-easing);
   position: absolute;
@@ -6728,10 +6679,8 @@
 
 .seed-menu-item__root:after {
   content: "";
-  top: 0;
-  right: var(--seed-dimension-x2);
-  bottom: 0;
-  left: var(--seed-dimension-x2);
+  inset-block: 0;
+  inset-inline: var(--seed-dimension-x2);
   border-radius: var(--seed-radius-r3);
   outline: var(--seed-dimension-x0_5) solid transparent;
   outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6742,8 +6691,7 @@
 @media (hover: hover) and (pointer: fine) {
   .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x2);
-    right: var(--seed-dimension-x2);
+    inset-inline: var(--seed-dimension-x2);
     border-radius: var(--seed-radius-r3);
   }
 }
@@ -6751,8 +6699,7 @@
 @media not all and (hover: hover) and (pointer: fine) {
   .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
     background-color: var(--seed-color-bg-transparent-pressed);
-    left: var(--seed-dimension-x2);
-    right: var(--seed-dimension-x2);
+    inset-inline: var(--seed-dimension-x2);
     border-radius: var(--seed-radius-r3);
   }
 }
@@ -6793,10 +6740,8 @@
 }
 
 .seed-menu-item__root--size_medium {
-  padding-top: var(--seed-dimension-x3);
-  padding-bottom: var(--seed-dimension-x3);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x3);
+  padding-inline: var(--seed-dimension-x4);
   gap: var(--seed-dimension-x3);
   --seed-prefix-icon-size: 22px;
   --seed-suffix-icon-size: 18px;
@@ -6813,10 +6758,8 @@
 }
 
 .seed-menu-item__root--size_small {
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x4);
   gap: var(--seed-dimension-x2);
   --seed-prefix-icon-size: 18px;
   --seed-suffix-icon-size: 16px;
@@ -6833,10 +6776,8 @@
 }
 
 .seed-menu-item__root--size_responsive {
-  padding-top: var(--seed-dimension-x3);
-  padding-bottom: var(--seed-dimension-x3);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x3);
+  padding-inline: var(--seed-dimension-x4);
   gap: var(--seed-dimension-x3);
   --seed-prefix-icon-size: 22px;
   --seed-suffix-icon-size: 18px;
@@ -6844,10 +6785,8 @@
 
 @media (width >= 1280px) {
   .seed-menu-item__root--size_responsive {
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-block: var(--seed-dimension-x2_5);
+    padding-inline: var(--seed-dimension-x4);
     gap: var(--seed-dimension-x2);
     --seed-prefix-icon-size: 18px;
     --seed-suffix-icon-size: 16px;
@@ -6919,8 +6858,7 @@
   word-break: break-all;
   z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
   background: var(--seed-color-bg-layer-floating);
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
   padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
   border-top-left-radius: var(--seed-radius-r5);
@@ -6944,13 +6882,12 @@
 
 .seed-menu-sheet__content[data-drawer]:after {
   content: "";
+  top: 100%;
   background: inherit;
   z-index: -1;
   height: 200vh;
   position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-menu-sheet__header {
@@ -7003,10 +6940,8 @@
 .seed-menu-sheet__closeButton {
   background-color: var(--seed-color-bg-neutral-weak);
   min-height: 52px;
-  padding-left: var(--seed-dimension-x5);
-  padding-right: var(--seed-dimension-x5);
-  padding-top: var(--seed-dimension-x3_5);
-  padding-bottom: var(--seed-dimension-x3_5);
+  padding-inline: var(--seed-dimension-x5);
+  padding-block: var(--seed-dimension-x3_5);
   border-radius: var(--seed-radius-r3);
   color: var(--seed-color-fg-neutral);
   font-family: inherit;
@@ -7087,10 +7022,8 @@
 .seed-menu-sheet-item__root {
   background-color: var(--seed-color-bg-neutral-weak);
   min-height: 52px;
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
-  padding-top: var(--seed-dimension-x3_5);
-  padding-bottom: var(--seed-dimension-x3_5);
+  padding-inline: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x3_5);
   align-items: center;
   gap: var(--seed-dimension-x3_5);
   box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
@@ -7209,13 +7142,11 @@
   border-radius: var(--seed-radius-full);
   min-width: 18px;
   min-height: 18px;
-  padding-left: var(--seed-dimension-x1);
-  padding-right: var(--seed-dimension-x1);
+  padding-inline: var(--seed-dimension-x1);
   font-size: var(--seed-font-size-t1-static);
   line-height: var(--seed-line-height-t1-static);
   font-weight: var(--seed-font-weight-bold);
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
 }
 
 .seed-notification-badge-positioner {
@@ -7261,10 +7192,8 @@
   text-align: start;
   width: 100%;
   min-height: var(--seed-dimension-x10);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x2_5);
   --seed-prefix-icon-size: var(--seed-dimension-x4);
   --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
   --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
@@ -7962,10 +7891,8 @@
 
 .seed-reaction-button--size_xsmall {
   height: var(--seed-dimension-x8);
-  padding-left: var(--seed-dimension-x3);
-  padding-right: var(--seed-dimension-x3);
-  padding-top: var(--seed-dimension-x1_5);
-  padding-bottom: var(--seed-dimension-x1_5);
+  padding-inline: var(--seed-dimension-x3);
+  padding-block: var(--seed-dimension-x1_5);
   gap: var(--seed-dimension-x1);
   border-radius: var(--seed-radius-full);
   font-size: var(--seed-font-size-t3);
@@ -7979,10 +7906,8 @@
 
 .seed-reaction-button--size_small {
   height: var(--seed-dimension-x9);
-  padding-left: var(--seed-dimension-x3_5);
-  padding-right: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-x3_5);
+  padding-block: var(--seed-dimension-x2);
   gap: var(--seed-dimension-x1);
   border-radius: var(--seed-radius-full);
   font-size: var(--seed-font-size-t3);
@@ -8039,8 +7964,7 @@
   z-index: -1;
   will-change: transform;
   transform: translateX(calc(var(--segment-index) * 100%));
-  top: var(--seed-dimension-x1);
-  bottom: var(--seed-dimension-x1);
+  inset-block: var(--seed-dimension-x1);
   left: var(--seed-dimension-x1);
   width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
   border-radius: var(--seed-radius-full);
@@ -8062,10 +7986,8 @@
   min-width: 86px;
   height: 100%;
   min-height: 34px;
-  padding-left: var(--seed-dimension-x6);
-  padding-right: var(--seed-dimension-x6);
-  padding-top: var(--seed-dimension-x1_5);
-  padding-bottom: var(--seed-dimension-x1_5);
+  padding-inline: var(--seed-dimension-x6);
+  padding-block: var(--seed-dimension-x1_5);
   border-radius: var(--seed-radius-full);
   font-weight: var(--seed-font-weight-bold);
   font-size: var(--seed-font-size-t5);
@@ -8252,8 +8174,7 @@
 .seed-select-box__trigger--layout_horizontal {
   padding-left: var(--seed-dimension-x5);
   padding-right: var(--seed-dimension-x4);
-  padding-top: var(--seed-dimension-x4);
-  padding-bottom: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x4);
   align-items: center;
 }
 
@@ -8263,10 +8184,8 @@
 }
 
 .seed-select-box__trigger--layout_vertical {
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
-  padding-top: var(--seed-dimension-x5);
-  padding-bottom: var(--seed-dimension-x5);
+  padding-inline: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x5);
 }
 
 .seed-select-box__content--layout_vertical {
@@ -8350,10 +8269,12 @@
 }
 
 .seed-side-navigation__content {
+  padding-top: 8px;
+  padding-inline: 8px;
   flex-direction: column;
   flex: 1;
   gap: 8px;
-  padding: 8px 8px 24px;
+  padding-bottom: 24px;
   display: flex;
   overflow-y: auto;
 }
@@ -8473,8 +8394,7 @@
   gap: 12px;
   width: 100%;
   height: 44px;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-inline: 8px;
   scroll-margin-top: 8px;
   scroll-margin-bottom: 24px;
   transition: padding .2s, background-color .2s;
@@ -8540,8 +8460,7 @@
 }
 
 .seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"] {
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-inline: 10px;
 }
 
 .seed-side-navigation-menu-item__prefixIcon {
@@ -8571,8 +8490,9 @@
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-medium);
+  padding: 6px;
   flex-grow: 1;
-  padding: 6px 6px 6px 32px;
+  padding-left: 32px;
   transition: opacity .2s, color .2s;
   overflow: hidden;
 }
@@ -8680,8 +8600,7 @@
   flex-direction: column;
   display: flex;
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block: 0;
 }
 
 @media (width >= 768px) {
@@ -8696,8 +8615,7 @@
   z-index: -1;
   width: 100vw;
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block: 0;
 }
 
 .seed-side-panel__content:is(:focus, [data-focus]) {
@@ -8768,8 +8686,7 @@
   box-sizing: border-box;
   gap: var(--seed-dimension-x1_5);
   min-height: calc(70px + var(--seed-safe-area-top));
-  padding-left: var(--seed-dimension-x6);
-  padding-right: var(--seed-dimension-x6);
+  padding-inline: var(--seed-dimension-x6);
   padding-top: calc(var(--seed-dimension-x6) + var(--seed-safe-area-top));
   padding-bottom: var(--seed-dimension-x4);
   flex-direction: column;
@@ -8827,8 +8744,7 @@
   --seed-box-max-height: var(--seed-box-max-height-base, initial);
   --seed-box-justify-content: initial;
   --seed-box-align-items: initial;
-  padding-left: var(--seed-box-padding-x);
-  padding-right: var(--seed-box-padding-x);
+  padding-inline: var(--seed-box-padding-x);
   padding-bottom: var(--seed-dimension-x12);
   height: var(--seed-box-height);
   min-height: var(--seed-box-min-height);
@@ -8849,11 +8765,17 @@
 .seed-side-panel__body {
   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;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+
+.seed-side-panel__body:is(:focus-visible, [data-focus-visible]) {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }
 
 .seed-side-panel__footer {
-  padding-left: var(--seed-dimension-x6);
-  padding-right: var(--seed-dimension-x6);
+  padding-inline: var(--seed-dimension-x6);
   padding-top: var(--seed-dimension-x4);
   padding-bottom: var(--seed-dimension-x6);
   flex-direction: column;
@@ -9101,10 +9023,8 @@
   transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
   will-change: left, right;
   background: var(--seed-color-bg-neutral-inverted);
-  padding-left: var(--seed-dimension-x2);
-  padding-right: var(--seed-dimension-x2);
-  padding-top: var(--seed-dimension-x1);
-  padding-bottom: var(--seed-dimension-x1);
+  padding-inline: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x1);
   border-radius: var(--seed-radius-r1_5);
   color: var(--seed-color-fg-neutral-inverted);
   font-size: var(--seed-font-size-t3);
@@ -9218,8 +9138,7 @@
   font-size: var(--seed-font-size-t3);
   line-height: var(--seed-line-height-t3);
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block: 0;
 }
 
 .seed-slider-marker[data-dir="ltr"] {
@@ -9294,10 +9213,8 @@
   border-radius: var(--seed-radius-r2);
   width: 100%;
   max-width: 560px;
-  padding-left: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-dimension-x2_5);
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x2_5);
+  padding-block: var(--seed-dimension-x2_5);
   min-height: 44px;
   animation: seed-enter;
   animation-timing-function: var(--seed-timing-function-enter);
@@ -9333,8 +9250,7 @@
 }
 
 .seed-snackbar__content {
-  padding-left: var(--seed-dimension-x1_5);
-  padding-right: var(--seed-dimension-x1_5);
+  padding-inline: var(--seed-dimension-x1_5);
   justify-content: space-between;
   align-items: center;
   gap: var(--seed-dimension-x2_5);
@@ -9380,8 +9296,7 @@
 .seed-snackbar__actionButton:after {
   content: "";
   top: 50%;
-  left: calc(-1 * var(--seed-dimension-x2));
-  right: calc(-1 * var(--seed-dimension-x2));
+  inset-inline: calc(-1 * var(--seed-dimension-x2));
   outline: var(--seed-dimension-x0_5) solid transparent;
   outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   min-height: 44px;
@@ -9418,10 +9333,8 @@
   left: calc(env(safe-area-inset-left, 0px));
   right: calc(env(safe-area-inset-right, 0px));
   bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
-  padding-left: var(--seed-dimension-x2);
-  padding-right: var(--seed-dimension-x2);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x2);
   transition-property: bottom;
   transition-duration: var(--seed-duration-d4);
   transition-timing-function: var(--seed-timing-function-easing);
@@ -9699,8 +9612,7 @@
 
 .seed-tabs__list--triggerLayout_fill {
   justify-content: space-around;
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline: 0;
 }
 
 .seed-tabs__indicator--triggerLayout_fill {
@@ -9713,13 +9625,11 @@
 }
 
 .seed-tabs__trigger--triggerLayout_fill:is([aria-selected="true"], [data-selected])[data-ssr]:after {
-  left: var(--seed-dimension-spacing-x-global-gutter);
-  right: var(--seed-dimension-spacing-x-global-gutter);
+  inset-inline: var(--seed-dimension-spacing-x-global-gutter);
 }
 
 .seed-tabs__list--triggerLayout_hug {
-  padding-left: var(--seed-dimension-spacing-x-global-gutter);
-  padding-right: var(--seed-dimension-spacing-x-global-gutter);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
   justify-content: flex-start;
 }
 
@@ -9729,8 +9639,7 @@
 }
 
 .seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
-  left: 0;
-  right: 0;
+  inset-inline: 0;
 }
 
 .seed-tabs__root--contentLayout_fill {
@@ -9762,10 +9671,8 @@
 
 .seed-tabs__trigger--size_small {
   min-height: 40px;
-  padding-left: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-dimension-x2_5);
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x2_5);
+  padding-block: var(--seed-dimension-x2_5);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-bold);
@@ -9781,10 +9688,8 @@
 
 .seed-tabs__trigger--size_medium {
   min-height: 44px;
-  padding-left: var(--seed-dimension-x2_5);
-  padding-right: var(--seed-dimension-x2_5);
-  padding-top: var(--seed-dimension-x2_5);
-  padding-bottom: var(--seed-dimension-x2_5);
+  padding-inline: var(--seed-dimension-x2_5);
+  padding-block: var(--seed-dimension-x2_5);
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
   font-weight: var(--seed-font-weight-bold);
@@ -10562,8 +10467,7 @@
   outline: none;
   flex-grow: 1;
   align-self: stretch;
-  padding-left: 0;
-  padding-right: 0;
+  padding-inline: 0;
 }
 
 .seed-text-input__value:is(input) {
@@ -10680,27 +10584,23 @@
 
 .seed-text-input__value--size_large:is(textarea) {
   min-height: 94px;
-  padding-top: var(--seed-dimension-x3_5);
-  padding-bottom: var(--seed-dimension-x3_5);
+  padding-block: var(--seed-dimension-x3_5);
 }
 
 .seed-text-input__value--size_medium:is(textarea) {
   min-height: 82px;
-  padding-top: var(--seed-dimension-x3);
-  padding-bottom: var(--seed-dimension-x3);
+  padding-block: var(--seed-dimension-x3);
 }
 
 .seed-text-input__value--size_responsive:is(textarea) {
   min-height: 94px;
-  padding-top: var(--seed-dimension-x3_5);
-  padding-bottom: var(--seed-dimension-x3_5);
+  padding-block: var(--seed-dimension-x3_5);
 }
 
 @media (width >= 1280px) {
   .seed-text-input__value--size_responsive:is(textarea) {
     min-height: 82px;
-    padding-top: var(--seed-dimension-x3);
-    padding-bottom: var(--seed-dimension-x3);
+    padding-block: var(--seed-dimension-x3);
   }
 }
 
@@ -10963,8 +10863,7 @@
 .seed-text-input__root--variant_underline-size_large {
   gap: var(--seed-dimension-x2_5);
   min-height: var(--seed-dimension-x10);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x2);
 }
 
 .seed-text-input__value--variant_underline-size_large, .seed-text-input__value--variant_underline-size_large::placeholder, .seed-text-input__prefixText--variant_underline-size_large {
@@ -10990,8 +10889,7 @@
 .seed-text-input__root--variant_underline-size_medium {
   gap: var(--seed-dimension-x2);
   min-height: 34px;
-  padding-top: var(--seed-dimension-x1_5);
-  padding-bottom: var(--seed-dimension-x1_5);
+  padding-block: var(--seed-dimension-x1_5);
 }
 
 .seed-text-input__value--variant_underline-size_medium, .seed-text-input__value--variant_underline-size_medium::placeholder, .seed-text-input__prefixText--variant_underline-size_medium {
@@ -11017,16 +10915,14 @@
 .seed-text-input__root--variant_underline-size_responsive {
   gap: var(--seed-dimension-x2_5);
   min-height: var(--seed-dimension-x10);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-block: var(--seed-dimension-x2);
 }
 
 @media (width >= 1280px) {
   .seed-text-input__root--variant_underline-size_responsive {
     gap: var(--seed-dimension-x2);
     min-height: 34px;
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
+    padding-block: var(--seed-dimension-x1_5);
   }
 }
 
@@ -11256,10 +11152,8 @@
   height: var(--seed-dimension-x8);
   border-radius: var(--seed-radius-full);
   gap: var(--seed-dimension-x1);
-  padding-left: var(--seed-dimension-x3_5);
-  padding-right: var(--seed-dimension-x3_5);
-  padding-top: var(--seed-dimension-x1_5);
-  padding-bottom: var(--seed-dimension-x1_5);
+  padding-inline: var(--seed-dimension-x3_5);
+  padding-block: var(--seed-dimension-x1_5);
   font-size: var(--seed-font-size-t3);
   line-height: var(--seed-line-height-t3);
   --size: 14px;
@@ -11272,10 +11166,8 @@
   height: var(--seed-dimension-x9);
   border-radius: var(--seed-radius-full);
   gap: var(--seed-dimension-x1);
-  padding-left: var(--seed-dimension-x4);
-  padding-right: var(--seed-dimension-x4);
-  padding-top: var(--seed-dimension-x2);
-  padding-bottom: var(--seed-dimension-x2);
+  padding-inline: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x2);
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   --size: 14px;