@seed-design/css 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/avatar.css

@@ -8,6 +8,7 @@
     border-radius: var(--seed-radius-full);
     width: var(--avatar-size);
     height: var(--avatar-size);
+    isolation: isolate;
 }
 .seed-avatar__root:after {
     content: "";
@@ -46,10 +47,19 @@
     mask-composite: subtract;
     transform: translateZ(0);
 }
-.seed-avatar__image:not([data-loading-state='loaded']) {
+.seed-avatar__image[data-loading-state='error'] {
+    display: none;
+}
+.seed-avatar__image:is([hidden], [data-hidden]) {
     display: none;
 }
+.seed-avatar__image:not([data-loading-state='loaded']) {
+    pointer-events: none;
+}
 .seed-avatar__fallback {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
     display: flex;
     justify-content: center;
     align-items: center;

package/recipes/avatar.layered.css

@@ -5,6 +5,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;
@@ -50,11 +51,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%;
@@ -70,6 +76,8 @@
     justify-content: center;
     align-items: center;
     display: flex;
+    position: absolute;
+    inset: 0;
     overflow: hidden;
     transform: translateZ(0);
     mask-repeat: no-repeat;

package/recipes/bottom-sheet.css

@@ -35,9 +35,11 @@
     border-top-left-radius: var(--seed-radius-r6);
     border-top-right-radius: var(--seed-radius-r6);
     padding-bottom: var(--seed-safe-area-bottom);
+    bottom: 0;
     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(0.32, 0.72, 0, 1);
+    transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive), var(--drawer-keyboard-transition);
 }
 .seed-bottom-sheet__content[data-snap-points='true'] {
     transform: translate3d(0, var(--initial-transform, 100%), 0);

package/recipes/bottom-sheet.layered.css

@@ -35,11 +35,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"] {

package/recipes/date-picker.css

@@ -0,0 +1,400 @@
+.seed-date-picker__root {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    color: var(--seed-color-fg-neutral-muted);
+    background-color: var(--seed-color-bg-layer-floating);
+}
+.seed-date-picker__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--seed-dimension-x12);
+}
+.seed-date-picker__headerLabel {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--seed-dimension-x1);
+    height: 100%;
+    min-width: 0;
+    border: 0;
+    border-radius: var(--seed-radius-r2);
+    padding-inline: var(--seed-dimension-x1);
+    padding-block: 0;
+    color: var(--seed-color-fg-neutral);
+    background: transparent;
+    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);
+}
+.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] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.seed-date-picker__headerChevron {
+    display: inline-flex;
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    --seed-icon-size: var(--seed-dimension-x5);
+}
+.seed-date-picker__navigation {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+.seed-date-picker__navigationButton {
+    flex-shrink: 0;
+}
+.seed-date-picker__twoMonthHeader {
+    position: relative;
+    display: flex;
+    height: var(--seed-dimension-x12);
+    align-items: center;
+    justify-content: center;
+}
+.seed-date-picker__twoMonthLabel {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    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;
+}
+.seed-date-picker__twoMonthNavigationButton {
+    position: absolute;
+    top: 4px;
+    flex-shrink: 0;
+}
+.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 {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    position: relative;
+    z-index: 2;
+    background-color: var(--seed-color-bg-layer-floating);
+}
+.seed-date-picker__weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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);
+}
+.seed-date-picker__months {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+    min-width: 0;
+}
+.seed-date-picker__months[data-wheel-open] {
+    visibility: hidden;
+}
+.seed-date-picker__month {
+    min-width: 0;
+}
+.seed-date-picker__monthLabel {
+    display: flex;
+    align-items: center;
+    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);
+}
+.seed-date-picker__grid {
+    display: grid;
+    min-width: 0;
+}
+.seed-date-picker__weekRow {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.seed-date-picker__dateCell {
+    position: relative;
+    min-width: 0;
+    min-height: var(--seed-dimension-x12);
+    isolation: isolate;
+}
+.seed-date-picker__dateCell[data-range-complete][data-in-range]::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset-inline: 0;
+    top: 3px;
+    height: 42px;
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-date-picker__dateCell[data-range-complete][data-range-start]:not([data-range-end])::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset-inline-start: 50%;
+    inset-inline-end: 0;
+    top: 3px;
+    height: 42px;
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-date-picker__dateCell[data-range-complete][data-range-end]:not([data-range-start])::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset-inline-start: 0;
+    inset-inline-end: 50%;
+    top: 3px;
+    height: 42px;
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-date-picker__dateButton {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: var(--seed-dimension-x12);
+    min-width: 0;
+    align-items: flex-start;
+    justify-content: center;
+    border: 0;
+    padding: 0;
+    color: var(--seed-color-fg-neutral-muted);
+    background: transparent;
+    cursor: pointer;
+    font: inherit;
+    isolation: isolate;
+}
+.seed-date-picker__dateButton::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 3px;
+    left: 50%;
+    width: 42px;
+    height: 42px;
+    border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-bg-transparent);
+    transform: translateX(-50%);
+}
+.seed-date-picker__dateButton::after {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 3px;
+    left: 50%;
+    width: 42px;
+    height: 42px;
+    border-radius: var(--seed-radius-full);
+    pointer-events: none;
+    transform: translateX(-50%);
+    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);
+}
+.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: transparent;
+}
+.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 {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    min-height: var(--seed-dimension-x12);
+    min-width: 0;
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    padding-top: 3px;
+    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;
+}
+.seed-date-picker__dateContent > [data-date-picker-day] {
+    display: flex;
+    min-height: 42px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+}
+.seed-date-picker__emptyCell {
+    min-height: var(--seed-dimension-x12);
+}
+.seed-date-picker__continuousScroll {
+    position: relative;
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+}
+.seed-date-picker__continuousScroll::-webkit-scrollbar {
+    display: none;
+}
+.seed-date-picker__continuousScroll::after {
+    content: "";
+    position: sticky;
+    z-index: 3;
+    bottom: 0;
+    display: block;
+    width: 100%;
+    height: 96px;
+    margin-top: calc(96px * -1);
+    background: linear-gradient(to bottom, transparent, var(--seed-color-bg-layer-floating));
+    pointer-events: none;
+}
+.seed-date-picker__continuousContent {
+    position: relative;
+    min-width: 0;
+}
+.seed-date-picker__continuousSpacer {
+    height: var(--seed-date-picker-continuous-spacer-height);
+}
+.seed-date-picker__wheelContainer {
+    position: absolute;
+    z-index: 1;
+    inset-inline: 0;
+    top: var(--seed-dimension-x12);
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    background-color: var(--seed-color-bg-layer-floating);
+}
+.seed-date-picker__wheelView {
+    width: 100%;
+    --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
+}
+.seed-date-picker__wheelColumns {}
+.seed-date-picker__wheelSelectionIndicator {
+    border-radius: var(--seed-radius-r2);
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-date-picker__wheelScrollFog {}
+.seed-date-picker__yearColumn {
+    flex: 0 0 120px;
+    --seed-wheel-picker-item-justify-content: flex-end;
+}
+.seed-date-picker__monthColumn {
+    flex: 0 0 96px;
+    --seed-wheel-picker-item-justify-content: flex-start;
+}
+.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 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+.seed-date-picker__months--visibleRange_twoMonths {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: var(--seed-dimension-x6);
+}
+.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;
+}

package/recipes/date-picker.d.ts

@@ -0,0 +1,24 @@
+declare interface DatePickerVariant {
+  /**
+  * @default "month"
+  */
+  visibleRange: "month" | "twoMonths" | "continuous" | "week";
+}
+
+declare type DatePickerVariantMap = {
+  [key in keyof DatePickerVariant]: Array<DatePickerVariant[key]>;
+};
+
+export declare type DatePickerVariantProps = Partial<DatePickerVariant>;
+
+export declare type DatePickerSlotName = "root" | "header" | "headerLabel" | "headerChevron" | "navigation" | "navigationButton" | "twoMonthHeader" | "twoMonthLabel" | "twoMonthNavigationButton" | "weekdayRow" | "weekday" | "months" | "month" | "monthLabel" | "grid" | "weekRow" | "dateCell" | "dateButton" | "dateContent" | "emptyCell" | "continuousScroll" | "continuousContent" | "continuousSpacer" | "wheelContainer" | "wheelView" | "wheelColumns" | "wheelSelectionIndicator" | "wheelScrollFog" | "yearColumn" | "monthColumn" | "wheelItem" | "liveRegion";
+
+export declare const datePickerVariantMap: DatePickerVariantMap;
+
+export declare const datePicker: ((
+  props?: DatePickerVariantProps,
+) => Record<DatePickerSlotName, string>) & {
+  splitVariantProps: <T extends DatePickerVariantProps>(
+    props: T,
+  ) => [DatePickerVariantProps, Omit<T, keyof DatePickerVariantProps>];
+}