@seed-design/lynx-css 0.2.0-alpha.3 → 0.2.1

package/all.css

@@ -1,30 +1,24 @@
-@supports (font: -apple-system-body) {
-}
-
-.seed-loading-indicator {
-  display: inline-flex;
-  position: absolute;
+text {
+  background-color: var(--seed-color-bg-transparent);
 }
 
 .seed-icon, .seed-prefix-icon, .seed-suffix-icon {
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  display: inline-flex;
+  display: flex;
 }
 
 .seed-icon {
   width: var(--seed-icon-size);
   height: var(--seed-icon-size);
-}
-
-.seed-icon__text {
   color: var(--seed-icon-color, currentColor);
 }
 
 .seed-prefix-icon {
   width: var(--seed-prefix-icon-size);
   height: var(--seed-prefix-icon-size);
+  color: var(--seed-prefix-icon-color, currentColor);
   margin-left: var(--seed-prefix-icon-margin-left, 0);
   margin-right: var(--seed-prefix-icon-margin-right, 0);
   margin-top: var(--seed-prefix-icon-margin-top, 0);
@@ -33,13 +27,10 @@
   justify-self: var(--seed-prefix-icon-justify-self);
 }
 
-.seed-prefix-icon__text {
-  color: var(--seed-prefix-icon-color, currentColor);
-}
-
 .seed-suffix-icon {
   width: var(--seed-suffix-icon-size);
   height: var(--seed-suffix-icon-size);
+  color: var(--seed-suffix-icon-color, currentColor);
   margin-left: var(--seed-suffix-icon-margin-left, 0);
   margin-right: var(--seed-suffix-icon-margin-right, 0);
   margin-top: var(--seed-suffix-icon-margin-top, 0);
@@ -48,226 +39,6 @@
   justify-self: var(--seed-suffix-icon-justify-self);
 }
 
-.seed-suffix-icon__text {
-  color: var(--seed-suffix-icon-color, currentColor);
-}
-
-.seed-count__text {
-  font-size: var(--seed-count-font-size);
-  line-height: var(--seed-count-line-height);
-  font-weight: var(--seed-count-font-weight);
-  color: var(--seed-count-color);
-}
-
-.seed-box {
-  --seed-box-background: transparent;
-  background: var(--seed-box-background);
-  --seed-box-border-style: solid;
-  --seed-box-border-color: transparent;
-  border-style: var(--seed-box-border-style);
-  border-color: var(--seed-box-border-color);
-  --seed-box-border-width: 0;
-  --seed-box-border-top-width: var(--seed-box-border-width);
-  --seed-box-border-bottom-width: var(--seed-box-border-width);
-  --seed-box-border-left-width: var(--seed-box-border-width);
-  --seed-box-border-right-width: var(--seed-box-border-width);
-  border-top-width: var(--seed-box-border-top-width);
-  border-bottom-width: var(--seed-box-border-bottom-width);
-  border-left-width: var(--seed-box-border-left-width);
-  border-right-width: var(--seed-box-border-right-width);
-  --seed-box-padding: 0;
-  --seed-box-padding-y: var(--seed-box-padding);
-  --seed-box-padding-x: var(--seed-box-padding);
-  --seed-box-padding-bottom: var(--seed-box-padding-y);
-  --seed-box-padding-top: var(--seed-box-padding-y);
-  --seed-box-padding-left: var(--seed-box-padding-x);
-  --seed-box-padding-right: var(--seed-box-padding-x);
-  padding-top: var(--seed-box-padding-top);
-  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: 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);
-  margin-right: calc(var(--seed-box-bleed-right) * -1);
-  --seed-box-min-height: auto;
-  --seed-box-max-height: none;
-  --seed-box-height: auto;
-  --seed-box-min-width: auto;
-  --seed-box-max-width: none;
-  --seed-box-width: auto;
-  min-height: var(--seed-box-min-height);
-  max-height: var(--seed-box-max-height);
-  height: var(--seed-box-height);
-  min-width: var(--seed-box-min-width);
-  max-width: var(--seed-box-max-width);
-  width: var(--seed-box-width);
-  --seed-box-top: auto;
-  --seed-box-bottom: auto;
-  --seed-box-left: auto;
-  --seed-box-right: auto;
-  top: var(--seed-box-top);
-  bottom: var(--seed-box-bottom);
-  left: var(--seed-box-left);
-  right: var(--seed-box-right);
-  --seed-box-border-radius: 0;
-  --seed-box-border-bottom-left-radius: var(--seed-box-border-radius);
-  --seed-box-border-bottom-right-radius: var(--seed-box-border-radius);
-  --seed-box-border-top-left-radius: var(--seed-box-border-radius);
-  --seed-box-border-top-right-radius: var(--seed-box-border-radius);
-  border-bottom-left-radius: var(--seed-box-border-bottom-left-radius);
-  border-bottom-right-radius: var(--seed-box-border-bottom-right-radius);
-  border-top-left-radius: var(--seed-box-border-top-left-radius);
-  border-top-right-radius: var(--seed-box-border-top-right-radius);
-  --seed-box-box-shadow: none;
-  box-shadow: var(--seed-box-box-shadow);
-  --seed-box-display: block;
-  --seed-box-position: relative;
-  display: var(--seed-box-display);
-  position: var(--seed-box-position);
-  --seed-box-unstable-transform: none;
-  transform: var(--seed-box-unstable-transform);
-  --seed-box-z-index: auto;
-  z-index: var(--seed-box-z-index);
-  --seed-box-overflow-x: visible;
-  --seed-box-overflow-y: visible;
-  overflow-x: var(--seed-box-overflow-x);
-  overflow-y: var(--seed-box-overflow-y);
-  --seed-box-flex-grow: 0;
-  --seed-box-flex-shrink: 1;
-  flex-grow: var(--seed-box-flex-grow);
-  flex-shrink: var(--seed-box-flex-shrink);
-  --seed-box-flex-direction: row;
-  --seed-box-flex-wrap: nowrap;
-  --seed-box-justify-content: flex-start;
-  --seed-box-justify-self: auto;
-  --seed-box-align-items: stretch;
-  --seed-box-align-content: stretch;
-  --seed-box-align-self: auto;
-  --seed-box-gap: 0px;
-  flex-direction: var(--seed-box-flex-direction);
-  flex-wrap: var(--seed-box-flex-wrap);
-  justify-content: var(--seed-box-justify-content);
-  justify-self: var(--seed-box-justify-self);
-  align-items: var(--seed-box-align-items);
-  align-content: var(--seed-box-align-content);
-  align-self: var(--seed-box-align-self);
-  gap: var(--seed-box-gap);
-  --seed-box-grid-column: auto;
-  --seed-box-grid-row: auto;
-}
-
-.seed-box__text {
-  --seed-box-background: transparent;
-  --seed-box-border-style: solid;
-  --seed-box-border-color: transparent;
-  --seed-box-border-width: 0;
-  --seed-box-border-top-width: var(--seed-box-border-width);
-  --seed-box-border-bottom-width: var(--seed-box-border-width);
-  --seed-box-border-left-width: var(--seed-box-border-width);
-  --seed-box-border-right-width: var(--seed-box-border-width);
-  --seed-box-padding: 0;
-  --seed-box-padding-y: var(--seed-box-padding);
-  --seed-box-padding-x: var(--seed-box-padding);
-  --seed-box-padding-bottom: var(--seed-box-padding-y);
-  --seed-box-padding-top: var(--seed-box-padding-y);
-  --seed-box-padding-left: var(--seed-box-padding-x);
-  --seed-box-padding-right: var(--seed-box-padding-x);
-  --seed-box-bleed-bottom: 0px;
-  --seed-box-bleed-top: 0px;
-  --seed-box-bleed-left: 0px;
-  --seed-box-bleed-right: 0px;
-  --seed-box-min-height: auto;
-  --seed-box-max-height: none;
-  --seed-box-height: auto;
-  --seed-box-min-width: auto;
-  --seed-box-max-width: none;
-  --seed-box-width: auto;
-  --seed-box-top: auto;
-  --seed-box-bottom: auto;
-  --seed-box-left: auto;
-  --seed-box-right: auto;
-  --seed-box-border-radius: 0;
-  --seed-box-border-bottom-left-radius: var(--seed-box-border-radius);
-  --seed-box-border-bottom-right-radius: var(--seed-box-border-radius);
-  --seed-box-border-top-left-radius: var(--seed-box-border-radius);
-  --seed-box-border-top-right-radius: var(--seed-box-border-radius);
-  --seed-box-box-shadow: none;
-  --seed-box-display: block;
-  --seed-box-position: relative;
-  --seed-box-unstable-transform: none;
-  --seed-box-z-index: auto;
-  --seed-box-overflow-x: visible;
-  --seed-box-overflow-y: visible;
-  --seed-box-flex-grow: 0;
-  --seed-box-flex-shrink: 1;
-  --seed-box-flex-direction: row;
-  --seed-box-flex-wrap: nowrap;
-  --seed-box-justify-content: flex-start;
-  --seed-box-justify-self: auto;
-  --seed-box-align-items: stretch;
-  --seed-box-align-content: stretch;
-  --seed-box-align-self: auto;
-  --seed-box-gap: 0px;
-  --seed-box-grid-column: auto;
-  --seed-box-grid-row: auto;
-  transform: var(--seed-box-unstable-transform);
-  color: var(--seed-box-color);
-}
-
-.seed-box.seed-box--has-active-bg_true:active {
-  background: var(--seed-box-background--active);
-}
-
-.seed-grid {
-  --seed-grid-columns: auto;
-  grid-template-columns: var(--seed-grid-columns);
-  --seed-grid-rows: auto;
-  grid-template-rows: var(--seed-grid-rows);
-  --seed-grid-auto-flow: row;
-  grid-auto-flow: var(--seed-grid-auto-flow);
-  --seed-grid-auto-columns: auto;
-  grid-auto-columns: var(--seed-grid-auto-columns);
-  --seed-grid-auto-rows: auto;
-  grid-auto-rows: var(--seed-grid-auto-rows);
-  --seed-grid-justify-items: stretch;
-  justify-items: var(--seed-grid-justify-items);
-  display: grid;
-}
-
-.seed-grid__text {
-  --seed-grid-columns: auto;
-  --seed-grid-rows: auto;
-  --seed-grid-auto-flow: row;
-  --seed-grid-auto-columns: auto;
-  --seed-grid-auto-rows: auto;
-  --seed-grid-justify-items: stretch;
-}
-
-.seed-consistent-width:before {
-  visibility: hidden;
-  height: 0;
-  display: block;
-}
-
-.seed-consistent-width__text:before {
-  font-weight: var(--seed-font-weight-regular);
-}
-
-.seed-consistent-width:after {
-  visibility: hidden;
-  height: 0;
-  display: block;
-}
-
-.seed-consistent-width__text:after {
-  font-weight: var(--seed-font-weight-bold);
-}
-
 :root {
   --seed-dimension-x0_5: 2px;
   --seed-dimension-x1: 4px;
@@ -301,6 +72,7 @@
   --seed-duration-d5: .25s;
   --seed-duration-d6: .3s;
   --seed-duration-color-transition: var(--seed-duration-d3);
+  --seed-duration-pressed-scale: var(--seed-duration-d3);
   --seed-font-size-t1: 11sp;
   --seed-font-size-t2: 12sp;
   --seed-font-size-t3: 13sp;
@@ -361,6 +133,7 @@
   --seed-timing-function-exit: cubic-bezier(.35, 0, 1, 1);
   --seed-timing-function-enter-expressive: cubic-bezier(.03, .4, .1, 1);
   --seed-timing-function-exit-expressive: cubic-bezier(.35, 0, .95, .55);
+  --seed-timing-function-pressed-scale: cubic-bezier(0, 0, .15, 1);
 }
 
 :root, :root.seed-user-color-scheme-light, :root.seed-color-mode-light-only, .seed-color-mode-light-only {
@@ -816,7 +589,6 @@
 }
 
 .seed-action-button__text {
-  font-family: inherit;
   font-weight: var(--seed-font-weight-bold);
   transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
 }
@@ -839,9 +611,9 @@
   display: flex;
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
   left: 0;
+  right: 0;
 }
 
 .seed-action-button__root--variant_brandSolid {
@@ -1190,17 +962,403 @@
   background: var(--seed-color-bg-transparent-pressed);
 }
 
+.seed-app-bar__root {
+  z-index: var(--z-index-app-bar);
+  flex-direction: row;
+  align-items: flex-end;
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+
+.seed-app-bar__background {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.seed-app-bar__left {
+  z-index: 1;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  display: flex;
+}
+
+.seed-app-bar__right {
+  z-index: 1;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  margin-left: auto;
+  display: flex;
+}
+
+.seed-app-bar__iconButton {
+  border-radius: var(--seed-radius-r1);
+  background: none;
+  border-width: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.seed-app-bar__icon {
+  flex-shrink: 0;
+}
+
+.seed-app-bar__custom {
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+.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-top: var(--seed-safe-area-top);
+}
+
+.seed-app-bar__left--theme_cupertino, .seed-app-bar__right--theme_cupertino {
+  height: 44px;
+}
+
+.seed-app-bar__iconButton--theme_cupertino {
+  width: 44px;
+  height: 44px;
+}
+
+.seed-app-bar__icon--theme_cupertino {
+  width: 24px;
+  height: 24px;
+}
+
+.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-top: var(--seed-safe-area-top);
+}
+
+.seed-app-bar__left--theme_android {
+  height: 56px;
+  padding-right: 16px;
+}
+
+.seed-app-bar__right--theme_android {
+  height: 56px;
+}
+
+.seed-app-bar__iconButton--theme_android {
+  width: 44px;
+  height: 44px;
+}
+
+.seed-app-bar__icon--theme_android {
+  width: 24px;
+  height: 24px;
+}
+
+.seed-app-bar__background--tone_layer {
+  background: var(--seed-color-bg-layer-default);
+}
+
+.seed-app-bar__icon--tone_layer {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-app-bar__background--tone_transparent {
+  background: none;
+}
+
+.seed-app-bar__icon--tone_transparent {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-app-bar-main__root {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.seed-app-bar-main__title, .seed-app-bar-main__subtitle {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.seed-app-bar-main__title--layout_titleOnly {
+  font-size: var(--seed-font-size-t6);
+  font-weight: var(--seed-font-weight-bold);
+  line-height: var(--seed-line-height-t6);
+}
+
+.seed-app-bar-main__title--layout_withSubtitle {
+  font-size: var(--seed-font-size-t5);
+  font-weight: var(--seed-font-weight-bold);
+  line-height: var(--seed-line-height-t5);
+}
+
+.seed-app-bar-main__subtitle--layout_withSubtitle {
+  font-size: var(--seed-font-size-t2);
+  font-weight: var(--seed-font-weight-regular);
+  line-height: var(--seed-line-height-t2);
+}
+
+.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);
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.seed-app-bar-main__root--theme_android {
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  height: 56px;
+}
+
+.seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-app-bar-main__subtitle--tone_layer {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-app-bar-main__root--tone_transparent, .seed-app-bar-main__title--tone_transparent, .seed-app-bar-main__subtitle--tone_transparent {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-badge__root {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-badge__root:dir(ltr) {
+  text-align: left;
+}
+
+.seed-badge__root:dir(rtl) {
+  text-align: right;
+}
+
+.seed-badge__label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.seed-badge__root--size_medium {
+  max-width: 7.5rem;
+  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);
+  border-radius: var(--seed-radius-r1);
+}
+
+.seed-badge__label--size_medium {
+  font-size: var(--seed-font-size-t1);
+  line-height: var(--seed-line-height-t1);
+}
+
+.seed-badge__root--size_large {
+  max-width: 6.75rem;
+  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);
+  border-radius: var(--seed-radius-r1_5);
+}
+
+.seed-badge__label--size_large {
+  font-size: var(--seed-font-size-t2);
+  line-height: var(--seed-line-height-t2);
+}
+
+.seed-badge__label--variant_weak {
+  font-weight: var(--seed-font-weight-medium);
+}
+
+.seed-badge__label--variant_solid, .seed-badge__label--variant_outline {
+  font-weight: var(--seed-font-weight-bold);
+}
+
+.seed-badge__root--tone_neutral-variant_weak {
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-badge__label--tone_neutral-variant_weak {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-badge__root--tone_neutral-variant_solid {
+  background-color: var(--seed-color-palette-gray-800);
+}
+
+.seed-badge__label--tone_neutral-variant_solid {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-badge__root--tone_neutral-variant_outline {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+}
+
+.seed-badge__label--tone_neutral-variant_outline {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-badge__root--tone_brand-variant_weak {
+  background-color: var(--seed-color-bg-brand-weak);
+}
+
+.seed-badge__label--tone_brand-variant_weak {
+  color: var(--seed-color-fg-brand-contrast);
+}
+
+.seed-badge__root--tone_brand-variant_solid {
+  background-color: var(--seed-color-bg-brand-solid);
+}
+
+.seed-badge__label--tone_brand-variant_solid {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-badge__root--tone_brand-variant_outline {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+}
+
+.seed-badge__label--tone_brand-variant_outline {
+  color: var(--seed-color-fg-brand);
+}
+
+.seed-badge__root--tone_informative-variant_weak {
+  background-color: var(--seed-color-bg-informative-weak);
+}
+
+.seed-badge__label--tone_informative-variant_weak {
+  color: var(--seed-color-fg-informative-contrast);
+}
+
+.seed-badge__root--tone_informative-variant_solid {
+  background-color: var(--seed-color-bg-informative-solid);
+}
+
+.seed-badge__label--tone_informative-variant_solid {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-badge__root--tone_informative-variant_outline {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
+}
+
+.seed-badge__label--tone_informative-variant_outline {
+  color: var(--seed-color-fg-informative);
+}
+
+.seed-badge__root--tone_positive-variant_weak {
+  background-color: var(--seed-color-bg-positive-weak);
+}
+
+.seed-badge__label--tone_positive-variant_weak {
+  color: var(--seed-color-fg-positive-contrast);
+}
+
+.seed-badge__root--tone_positive-variant_solid {
+  background-color: var(--seed-color-bg-positive-solid);
+}
+
+.seed-badge__label--tone_positive-variant_solid {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-badge__root--tone_positive-variant_outline {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
+}
+
+.seed-badge__label--tone_positive-variant_outline {
+  color: var(--seed-color-fg-positive);
+}
+
+.seed-badge__root--tone_warning-variant_weak {
+  background-color: var(--seed-color-bg-warning-weak);
+}
+
+.seed-badge__label--tone_warning-variant_weak {
+  color: var(--seed-color-fg-warning-contrast);
+}
+
+.seed-badge__root--tone_warning-variant_solid {
+  background-color: var(--seed-color-bg-warning-solid);
+}
+
+.seed-badge__label--tone_warning-variant_solid {
+  color: var(--seed-color-palette-static-black-alpha-900);
+}
+
+.seed-badge__root--tone_warning-variant_outline {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
+}
+
+.seed-badge__label--tone_warning-variant_outline {
+  color: var(--seed-color-fg-warning);
+}
+
+.seed-badge__root--tone_critical-variant_weak {
+  background-color: var(--seed-color-bg-critical-weak);
+}
+
+.seed-badge__label--tone_critical-variant_weak {
+  color: var(--seed-color-fg-critical-contrast);
+}
+
+.seed-badge__root--tone_critical-variant_solid {
+  background-color: var(--seed-color-bg-critical-solid);
+}
+
+.seed-badge__label--tone_critical-variant_solid {
+  color: var(--seed-color-palette-static-white);
+}
+
+.seed-badge__root--tone_critical-variant_outline {
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
+}
+
+.seed-badge__label--tone_critical-variant_outline {
+  color: var(--seed-color-fg-critical);
+}
+
 .seed-bottom-sheet__positioner {
-  --sheet-z-index: 2;
+  --sheet-z-index: 20;
   z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
   justify-content: center;
   align-items: flex-end;
   display: flex;
   position: fixed;
   top: 0;
-  right: 0;
   bottom: 0;
   left: 0;
+  right: 0;
 }
 
 .seed-bottom-sheet__backdrop {
@@ -1209,9 +1367,9 @@
   z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
   position: fixed;
   top: 0;
-  right: 0;
   bottom: 0;
   left: 0;
+  right: 0;
 }
 
 .seed-bottom-sheet__content {
@@ -1219,7 +1377,6 @@
   background: var(--seed-color-bg-layer-floating);
   border-top-left-radius: var(--seed-radius-r6);
   border-top-right-radius: var(--seed-radius-r6);
-  padding-bottom: env(safe-area-inset-bottom);
   flex-direction: column;
   flex: 1;
   display: flex;
@@ -1254,9 +1411,11 @@
 }
 
 .seed-bottom-sheet__body {
+  min-height: 0;
   padding-left: var(--seed-dimension-spacing-x-global-gutter);
   padding-right: var(--seed-dimension-spacing-x-global-gutter);
   flex-direction: column;
+  flex: 1;
   display: flex;
 }
 
@@ -1301,22 +1460,23 @@
   width: 36px;
   height: 4px;
   position: absolute;
-  top: 6px;
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
 }
 
 .seed-bottom-sheet-handle__touchArea {
+  z-index: 1;
   width: 44px;
   height: 44px;
   position: absolute;
-  top: 50%;
+  top: -14px;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
 }
 
 .seed-checkbox__root {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--seed-dimension-x2);
   display: flex;
   position: relative;
@@ -1336,6 +1496,7 @@
 
 .seed-checkbox__root--size_medium {
   min-height: var(--seed-dimension-x8);
+  --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
 }
 
 .seed-checkbox__label--size_medium {
@@ -1345,6 +1506,7 @@
 
 .seed-checkbox__root--size_large {
   min-height: var(--seed-dimension-x9);
+  --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
 }
 
 .seed-checkbox__label--size_large {
@@ -1356,13 +1518,14 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-checkbox-group {
+.seed-checkbox-group__root {
   gap: var(--seed-dimension-x1);
   flex-direction: column;
   display: flex;
 }
 
 .seed-checkmark__root {
+  margin-top: var(--checkmark-margin-top, 0);
   transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
   flex: none;
   justify-content: center;
@@ -1508,7 +1671,7 @@
 }
 
 .seed-radio__root {
-  align-items: center;
+  align-items: flex-start;
   gap: var(--seed-dimension-x2);
   display: flex;
   position: relative;
@@ -1528,6 +1691,7 @@
 
 .seed-radio__root--size_medium {
   min-height: var(--seed-dimension-x8);
+  --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
 }
 
 .seed-radio__label--size_medium {
@@ -1537,6 +1701,7 @@
 
 .seed-radio__root--size_large {
   min-height: var(--seed-dimension-x9);
+  --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
 }
 
 .seed-radio__label--size_large {
@@ -1548,13 +1713,14 @@
   color: var(--seed-color-fg-disabled);
 }
 
-.seed-radio-group {
+.seed-radio-group__root {
   gap: var(--seed-dimension-x1);
   flex-direction: column;
   display: flex;
 }
 
 .seed-radiomark__root {
+  margin-top: var(--radiomark-margin-top, 0);
   border-style: solid;
   border-width: 1px;
   border-color: var(--seed-color-stroke-neutral-weak);
@@ -1666,8 +1832,7 @@
 }
 
 .seed-switch__root {
-  justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   display: flex;
   position: relative;
 }
@@ -1686,6 +1851,7 @@
 .seed-switch__label--size_16 {
   font-size: var(--seed-font-size-t3);
   line-height: var(--seed-line-height-t3);
+  margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2);
 }
 
 .seed-switch__root--size_24 {
@@ -1696,6 +1862,7 @@
 .seed-switch__label--size_24 {
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
+  margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2);
 }
 
 .seed-switch__root--size_32 {
@@ -1706,6 +1873,7 @@
 .seed-switch__label--size_32 {
   font-size: var(--seed-font-size-t5);
   line-height: var(--seed-line-height-t5);
+  margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2);
 }
 
 .seed-switch__label--disabled_true {
@@ -1737,6 +1905,8 @@
 .seed-switchmark__root--size_16 {
   min-width: 26px;
   min-height: 16px;
+  margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
+  margin-bottom: calc((var(--seed-dimension-x6) - 16px) / 2);
   padding: 2px;
 }
 
@@ -1748,6 +1918,8 @@
 .seed-switchmark__root--size_24 {
   min-width: 38px;
   min-height: 24px;
+  margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
+  margin-bottom: calc((var(--seed-dimension-x6) - 24px) / 2);
   padding: 2px;
 }
 
@@ -1759,6 +1931,8 @@
 .seed-switchmark__root--size_32 {
   min-width: 52px;
   min-height: 32px;
+  margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
+  margin-bottom: calc((var(--seed-dimension-x8) - 32px) / 2);
   padding: 3px;
 }
 
@@ -1806,6 +1980,13 @@
   display: flex;
 }
 
+.seed-tag-group__separatorWrapper {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
 .seed-tag-group__separator {
   color: var(--seed-color-palette-gray-600);
   font-weight: var(--seed-font-weight-regular);
@@ -1909,12 +2090,6 @@
   }
 }
 
-@keyframes progress-circle-head {
-}
-
-@keyframes progress-circle-tail {
-}
-
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -1933,7 +2108,7 @@
 
 @keyframes drawer-slide-from-bottom {
   from {
-    transform: translate3d(0, var(--initial-transform, 100%), 0);
+    transform: translate3d(0, var(--seed-drawer-start-transform, 100%), 0);
   }
 
   to {
@@ -1943,6 +2118,6 @@
 
 @keyframes drawer-slide-to-bottom {
   to {
-    transform: translate3d(0, var(--initial-transform, 100%), 0);
+    transform: translate3d(0, var(--seed-drawer-start-transform, 100%), 0);
   }
 }