@seed-design/css 2.3.0 → 2.4.0

package/all.css

@@ -2318,6 +2318,7 @@
   border-radius: var(--seed-radius-full);
   width: var(--avatar-size);
   height: var(--avatar-size);
+  isolation: isolate;
   justify-content: center;
   align-items: center;
   display: inline-flex;
@@ -2363,11 +2364,16 @@
   mask-composite: subtract;
 }
 
-.seed-avatar__image:not([data-loading-state="loaded"]) {
+.seed-avatar__image[data-loading-state="error"], .seed-avatar__image:is([hidden], [data-hidden]) {
   display: none;
 }
 
+.seed-avatar__image:not([data-loading-state="loaded"]) {
+  pointer-events: none;
+}
+
 .seed-avatar__fallback {
+  z-index: -1;
   object-fit: cover;
   border-radius: var(--seed-radius-full);
   width: 100%;
@@ -2383,6 +2389,8 @@
   justify-content: center;
   align-items: center;
   display: flex;
+  position: absolute;
+  inset: 0;
   overflow: hidden;
   transform: translateZ(0);
   mask-repeat: no-repeat;
@@ -2818,11 +2826,13 @@
   padding-bottom: var(--seed-safe-area-bottom);
   touch-action: none;
   will-change: transform;
-  transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
+  --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);
   flex-direction: column;
   flex: 1;
   display: flex;
   position: relative;
+  bottom: 0;
 }
 
 .seed-bottom-sheet__content[data-snap-points="true"] {
@@ -4511,6 +4521,466 @@
   min-width: var(--seed-dimension-x8);
 }
 
+.seed-date-picker__root {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--seed-color-fg-neutral-muted);
+  background-color: var(--seed-color-bg-layer-floating);
+  position: relative;
+}
+
+.seed-date-picker__header {
+  height: var(--seed-dimension-x12);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__headerLabel {
+  align-items: center;
+  gap: var(--seed-dimension-x1);
+  border-radius: var(--seed-radius-r2);
+  min-width: 0;
+  height: 100%;
+  padding-inline: var(--seed-dimension-x1);
+  color: var(--seed-color-fg-neutral);
+  font-family: inherit;
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-bold);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  background: none;
+  border: 0;
+  padding-block: 0;
+  display: inline-flex;
+}
+
+.seed-date-picker__headerLabel: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-date-picker__headerLabel:is(:disabled, [disabled], [data-disabled]) {
+  cursor: default;
+}
+
+.seed-date-picker__headerLabel > [data-date-picker-header-label] {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.seed-date-picker__headerChevron {
+  width: var(--seed-dimension-x5);
+  height: var(--seed-dimension-x5);
+  --seed-icon-size: var(--seed-dimension-x5);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-date-picker__navigation {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__navigationButton {
+  flex-shrink: 0;
+}
+
+.seed-date-picker__twoMonthHeader {
+  height: var(--seed-dimension-x12);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.seed-date-picker__twoMonthLabel {
+  width: 100%;
+  height: 100%;
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-bold);
+  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__twoMonthNavigationButton {
+  flex-shrink: 0;
+  position: absolute;
+  top: 4px;
+}
+
+.seed-date-picker__twoMonthNavigationButton[data-placement="start"] {
+  inset-inline-start: 0;
+}
+
+.seed-date-picker__twoMonthNavigationButton[data-placement="end"] {
+  inset-inline-end: 0;
+}
+
+.seed-date-picker__weekdayRow {
+  z-index: 2;
+  background-color: var(--seed-color-bg-layer-floating);
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  display: grid;
+  position: relative;
+}
+
+.seed-date-picker__weekday {
+  height: var(--seed-dimension-x12);
+  color: var(--seed-color-fg-neutral-subtle);
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+  font-weight: var(--seed-font-weight-medium);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__months {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  min-width: 0;
+  display: grid;
+}
+
+.seed-date-picker__months[data-wheel-open] {
+  visibility: hidden;
+}
+
+.seed-date-picker__month {
+  min-width: 0;
+}
+
+.seed-date-picker__monthLabel {
+  height: var(--seed-dimension-x12);
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-bold);
+  align-items: center;
+  display: flex;
+}
+
+.seed-date-picker__grid {
+  min-width: 0;
+  display: grid;
+}
+
+.seed-date-picker__weekRow {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  display: grid;
+}
+
+.seed-date-picker__dateCell {
+  min-width: 0;
+  min-height: var(--seed-dimension-x12);
+  isolation: isolate;
+  position: relative;
+}
+
+.seed-date-picker__dateCell[data-range-complete][data-in-range]:before {
+  content: "";
+  z-index: -1;
+  inset-inline: 0;
+  background-color: var(--seed-color-bg-neutral-weak);
+  height: 42px;
+  position: absolute;
+  top: 3px;
+}
+
+.seed-date-picker__dateCell[data-range-complete][data-range-start]:not([data-range-end]):before {
+  content: "";
+  z-index: -1;
+  inset-inline: 50% 0;
+  background-color: var(--seed-color-bg-neutral-weak);
+  height: 42px;
+  position: absolute;
+  top: 3px;
+}
+
+.seed-date-picker__dateCell[data-range-complete][data-range-end]:not([data-range-start]):before {
+  content: "";
+  z-index: -1;
+  inset-inline: 0 50%;
+  background-color: var(--seed-color-bg-neutral-weak);
+  height: 42px;
+  position: absolute;
+  top: 3px;
+}
+
+.seed-date-picker__dateButton {
+  width: 100%;
+  height: 100%;
+  min-height: var(--seed-dimension-x12);
+  min-width: 0;
+  color: var(--seed-color-fg-neutral-muted);
+  cursor: pointer;
+  font: inherit;
+  isolation: isolate;
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.seed-date-picker__dateButton:before {
+  content: "";
+  z-index: -1;
+  border-radius: var(--seed-radius-full);
+  background-color: var(--seed-color-bg-transparent);
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seed-date-picker__dateButton:after {
+  content: "";
+  z-index: 2;
+  border-radius: var(--seed-radius-full);
+  pointer-events: none;
+  width: 42px;
+  height: 42px;
+  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  position: absolute;
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.seed-date-picker__dateButton[data-today]:before {
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]):before {
+  background-color: var(--seed-color-bg-neutral-inverted);
+}
+
+.seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]) {
+  color: var(--seed-color-fg-neutral-inverted);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
+    background-color: var(--seed-color-bg-transparent-pressed);
+  }
+}
+
+@media not all and (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
+    background-color: var(--seed-color-bg-transparent-pressed);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
+    background-color: var(--seed-color-bg-neutral-inverted);
+  }
+}
+
+@media not all and (hover: hover) and (pointer: fine) {
+  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
+    background-color: var(--seed-color-bg-neutral-inverted);
+  }
+}
+
+.seed-date-picker__dateButton[data-in-range] {
+  color: var(--seed-color-fg-neutral-muted);
+}
+
+.seed-date-picker__dateButton[data-in-range]:before {
+  background-color: #0000;
+}
+
+.seed-date-picker__dateButton[data-unavailable] {
+  color: var(--seed-color-fg-disabled);
+  cursor: not-allowed;
+}
+
+.seed-date-picker__dateButton[data-unavailable] [data-date-picker-day] {
+  text-decoration: line-through;
+}
+
+.seed-date-picker__dateButton[data-unavailable][data-range-start]:not([data-range-complete]) [data-date-picker-day] {
+  text-decoration: none;
+}
+
+.seed-date-picker__dateButton:is(:disabled, [disabled], [data-disabled]) {
+  color: var(--seed-color-fg-disabled);
+  cursor: default;
+}
+
+.seed-date-picker__dateButton {
+  outline: none;
+}
+
+.seed-date-picker__dateButton:is(:focus-visible, [data-focus-visible]):after {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+
+.seed-date-picker__dateContent {
+  z-index: 1;
+  width: 100%;
+  min-height: var(--seed-dimension-x12);
+  box-sizing: border-box;
+  min-width: 0;
+  color: inherit;
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding-top: 3px;
+  display: flex;
+  position: relative;
+}
+
+.seed-date-picker__dateContent > [data-date-picker-day] {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  min-height: 42px;
+  display: flex;
+}
+
+.seed-date-picker__emptyCell {
+  min-height: var(--seed-dimension-x12);
+}
+
+.seed-date-picker__continuousScroll {
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  overflow-y: auto;
+}
+
+.seed-date-picker__continuousScroll::-webkit-scrollbar {
+  display: none;
+}
+
+.seed-date-picker__continuousScroll:after {
+  content: "";
+  z-index: 3;
+  background: linear-gradient(to bottom, transparent, var(--seed-color-bg-layer-floating));
+  pointer-events: none;
+  width: 100%;
+  height: 96px;
+  margin-top: -96px;
+  display: block;
+  position: sticky;
+  bottom: 0;
+}
+
+.seed-date-picker__continuousContent {
+  min-width: 0;
+  position: relative;
+}
+
+.seed-date-picker__continuousSpacer {
+  height: var(--seed-date-picker-continuous-spacer-height);
+}
+
+.seed-date-picker__wheelContainer {
+  z-index: 1;
+  inset-inline: 0;
+  top: var(--seed-dimension-x12);
+  background-color: var(--seed-color-bg-layer-floating);
+  align-items: center;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.seed-date-picker__wheelView {
+  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
+  width: 100%;
+}
+
+.seed-date-picker__wheelSelectionIndicator {
+  border-radius: var(--seed-radius-r2);
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-date-picker__yearColumn {
+  --seed-wheel-picker-item-justify-content: flex-end;
+  flex: 0 0 120px;
+}
+
+.seed-date-picker__monthColumn {
+  --seed-wheel-picker-item-justify-content: flex-start;
+  flex: 0 0 96px;
+}
+
+.seed-date-picker__wheelItem {
+  --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+  padding-inline: var(--seed-dimension-x4);
+  font-size: var(--seed-font-size-t10-static);
+  line-height: var(--seed-line-height-t10-static);
+  font-weight: var(--seed-font-weight-medium);
+}
+
+.seed-date-picker__liveRegion {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.seed-date-picker__months--visibleRange_twoMonths {
+  column-gap: var(--seed-dimension-x6);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.seed-date-picker__root--visibleRange_continuous {
+  height: 100%;
+  min-height: 0;
+}
+
+.seed-date-picker__weekdayRow--visibleRange_continuous {
+  position: sticky;
+  top: 0;
+}
+
+.seed-date-picker__month--visibleRange_continuous {
+  padding-bottom: 16px;
+}
+
+.seed-date-picker__weekday--visibleRange_week {
+  height: 24px;
+}
+
 .seed-dialog__positioner {
   overscroll-behavior-y: none;
   --dialog-z-index: 2;
@@ -5733,6 +6203,7 @@
 
 .seed-image-frame__root {
   border-radius: inherit;
+  isolation: isolate;
   position: relative;
   overflow: hidden;
 }
@@ -5745,13 +6216,20 @@
   display: block;
 }
 
-.seed-image-frame__content:not([data-loading-state="loaded"]) {
+.seed-image-frame__content[data-loading-state="error"], .seed-image-frame__content:is([hidden], [data-hidden]) {
   display: none;
 }
 
+.seed-image-frame__content:not([data-loading-state="loaded"]) {
+  pointer-events: none;
+}
+
 .seed-image-frame__fallback {
+  z-index: -1;
   width: 100%;
   height: 100%;
+  position: absolute;
+  inset: 0;
 }
 
 .seed-image-frame__fallback[data-loading-state="loaded"] {
@@ -7916,6 +8394,7 @@
   box-sizing: border-box;
   font-weight: var(--seed-font-weight-medium);
   color: var(--seed-color-fg-neutral);
+  flex-grow: 1;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
@@ -7994,6 +8473,10 @@
   color: var(--seed-color-fg-disabled);
 }
 
+.seed-quantity-picker__root--layout_fill {
+  flex-grow: 1;
+}
+
 .seed-quantity-picker__root--size_small {
   height: var(--seed-dimension-x9);
   border-radius: var(--seed-radius-r2);
@@ -12035,6 +12518,58 @@
   }
 }
 
+.seed-time-picker__root {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
+  width: 100%;
+  height: 220px;
+}
+
+.seed-time-picker__selectionIndicator {
+  border-radius: var(--seed-radius-r2);
+  background-color: var(--seed-color-bg-neutral-weak);
+}
+
+.seed-time-picker__periodColumn {
+  outline: none;
+  flex: none;
+}
+
+.seed-time-picker__periodColumn[data-disabled] {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+
+.seed-time-picker__hourColumn {
+  outline: none;
+  flex: none;
+}
+
+.seed-time-picker__hourColumn[data-disabled] {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+
+.seed-time-picker__hourColumn {
+  --seed-wheel-picker-item-justify-content: flex-end;
+}
+
+.seed-time-picker__minuteColumn {
+  outline: none;
+  flex: none;
+}
+
+.seed-time-picker__minuteColumn[data-disabled] {
+  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+
+.seed-time-picker__item {
+  --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+  padding-inline: var(--seed-dimension-x4);
+  font-size: var(--seed-font-size-t10-static);
+  line-height: var(--seed-line-height-t10-static);
+  font-weight: var(--seed-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
 .seed-toggle-button {
   box-sizing: border-box;
   cursor: pointer;
@@ -12213,6 +12748,104 @@
   --seed-suffix-icon-size: var(--seed-dimension-x3_5);
 }
 
+.seed-wheel-picker__root {
+  height: var(--seed-wheel-picker-viewport-size);
+  position: relative;
+  overflow: hidden;
+}
+
+.seed-wheel-picker__scrollFog {
+  z-index: 1;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.seed-wheel-picker__columns {
+  justify-content: center;
+  height: 100%;
+  display: flex;
+}
+
+.seed-wheel-picker__column {
+  box-sizing: border-box;
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  touch-action: pan-y;
+  cursor: grab;
+  width: max-content;
+  height: 100%;
+  padding-block: var(--seed-wheel-picker-center-offset);
+  outline: none;
+  overflow: hidden auto;
+}
+
+.seed-wheel-picker__column[data-disabled] {
+  cursor: default;
+  overflow-y: hidden;
+}
+
+.seed-wheel-picker__column[data-readonly] {
+  cursor: default;
+}
+
+.seed-wheel-picker__column[data-wheel-picker-dragging] {
+  cursor: grabbing;
+  scroll-snap-type: none;
+}
+
+.seed-wheel-picker__column[data-wheel-picker-scrolling] {
+  scroll-snap-type: none;
+}
+
+.seed-wheel-picker__column::-webkit-scrollbar {
+  display: none;
+}
+
+.seed-wheel-picker__column :is([aria-selected="true"], [data-selected]) {
+  outline: var(--seed-dimension-x0_5) solid transparent;
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, 0);
+  transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+
+.seed-wheel-picker__column.seed-wheel-picker__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
+  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+
+.seed-wheel-picker__item {
+  height: var(--seed-wheel-picker-item-size);
+  min-height: var(--seed-wheel-picker-item-size);
+  align-items: center;
+  justify-content: var(--seed-wheel-picker-item-justify-content, center);
+  color: var(--seed-wheel-picker-item-color);
+  scroll-snap-align: center;
+  user-select: none;
+  display: flex;
+}
+
+.seed-wheel-picker__item[data-wheel-picker-indicator-overlap] {
+  color: #0000;
+  background-image: linear-gradient(to bottom, var(--seed-wheel-picker-item-color) 0%, var(--seed-wheel-picker-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-selected-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-selected-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-item-color) 100%);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.seed-wheel-picker__selectionIndicator {
+  z-index: 0;
+  inset-inline: 0;
+  height: var(--seed-wheel-picker-item-size);
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 @keyframes seed-enter {
   from {
     opacity: var(--seed-enter-opacity, 1);