@seed-design/css 2.3.0 → 2.4.0

package/recipes/date-picker.mjs

@@ -0,0 +1,165 @@
+import './date-picker.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const datePickerSlotNames = [
+  [
+    "root",
+    "seed-date-picker__root"
+  ],
+  [
+    "header",
+    "seed-date-picker__header"
+  ],
+  [
+    "headerLabel",
+    "seed-date-picker__headerLabel"
+  ],
+  [
+    "headerChevron",
+    "seed-date-picker__headerChevron"
+  ],
+  [
+    "navigation",
+    "seed-date-picker__navigation"
+  ],
+  [
+    "navigationButton",
+    "seed-date-picker__navigationButton"
+  ],
+  [
+    "twoMonthHeader",
+    "seed-date-picker__twoMonthHeader"
+  ],
+  [
+    "twoMonthLabel",
+    "seed-date-picker__twoMonthLabel"
+  ],
+  [
+    "twoMonthNavigationButton",
+    "seed-date-picker__twoMonthNavigationButton"
+  ],
+  [
+    "weekdayRow",
+    "seed-date-picker__weekdayRow"
+  ],
+  [
+    "weekday",
+    "seed-date-picker__weekday"
+  ],
+  [
+    "months",
+    "seed-date-picker__months"
+  ],
+  [
+    "month",
+    "seed-date-picker__month"
+  ],
+  [
+    "monthLabel",
+    "seed-date-picker__monthLabel"
+  ],
+  [
+    "grid",
+    "seed-date-picker__grid"
+  ],
+  [
+    "weekRow",
+    "seed-date-picker__weekRow"
+  ],
+  [
+    "dateCell",
+    "seed-date-picker__dateCell"
+  ],
+  [
+    "dateButton",
+    "seed-date-picker__dateButton"
+  ],
+  [
+    "dateContent",
+    "seed-date-picker__dateContent"
+  ],
+  [
+    "emptyCell",
+    "seed-date-picker__emptyCell"
+  ],
+  [
+    "continuousScroll",
+    "seed-date-picker__continuousScroll"
+  ],
+  [
+    "continuousContent",
+    "seed-date-picker__continuousContent"
+  ],
+  [
+    "continuousSpacer",
+    "seed-date-picker__continuousSpacer"
+  ],
+  [
+    "wheelContainer",
+    "seed-date-picker__wheelContainer"
+  ],
+  [
+    "wheelView",
+    "seed-date-picker__wheelView"
+  ],
+  [
+    "wheelColumns",
+    "seed-date-picker__wheelColumns"
+  ],
+  [
+    "wheelSelectionIndicator",
+    "seed-date-picker__wheelSelectionIndicator"
+  ],
+  [
+    "wheelScrollFog",
+    "seed-date-picker__wheelScrollFog"
+  ],
+  [
+    "yearColumn",
+    "seed-date-picker__yearColumn"
+  ],
+  [
+    "monthColumn",
+    "seed-date-picker__monthColumn"
+  ],
+  [
+    "wheelItem",
+    "seed-date-picker__wheelItem"
+  ],
+  [
+    "liveRegion",
+    "seed-date-picker__liveRegion"
+  ]
+];
+
+const defaultVariant = {
+  "visibleRange": "month"
+};
+
+const compoundVariants = [];
+
+export const datePickerVariantMap = {
+  "visibleRange": [
+    "month",
+    "twoMonths",
+    "continuous",
+    "week"
+  ]
+};
+
+export const datePickerVariantKeys = Object.keys(datePickerVariantMap);
+
+export function datePicker(props) {
+  return Object.fromEntries(
+    datePickerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(datePicker, { splitVariantProps: (props) => splitVariantProps(props, datePickerVariantMap) });
+
+// @recipe(seed): date-picker

package/recipes/image-frame.css

@@ -2,6 +2,7 @@
     position: relative;
     overflow: hidden;
     border-radius: inherit;
+    isolation: isolate;
 }
 .seed-image-frame__content {
     display: block;
@@ -10,10 +11,19 @@
     object-fit: cover;
     border-radius: inherit;
 }
-.seed-image-frame__content:not([data-loading-state='loaded']) {
+.seed-image-frame__content[data-loading-state='error'] {
+    display: none;
+}
+.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 {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
     width: 100%;
     height: 100%;
 }

package/recipes/image-frame.layered.css

@@ -1,6 +1,7 @@
 @layer seed-components {
   .seed-image-frame__root {
     border-radius: inherit;
+    isolation: isolate;
     position: relative;
     overflow: hidden;
   }
@@ -13,13 +14,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"] {

package/recipes/quantity-picker.css

@@ -54,6 +54,7 @@
 }
 .seed-quantity-picker__valueDisplay {
     display: grid;
+    flex-grow: 1;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -123,6 +124,9 @@
 .seed-quantity-picker__incrementIcon:is(:disabled, [disabled], [data-disabled]) {
     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);

package/recipes/quantity-picker.d.ts

@@ -1,5 +1,9 @@
 declare interface QuantityPickerVariant {
   /**
+  * @default "hug"
+  */
+  layout: "hug" | "fill";
+/**
   * @default "medium"
   */
   size: "small" | "medium" | "large";

package/recipes/quantity-picker.layered.css

@@ -67,6 +67,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;
@@ -145,6 +146,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);

package/recipes/quantity-picker.layered.mjs

@@ -41,12 +41,17 @@ const quantityPickerSlotNames = [
 ];
 
 const defaultVariant = {
+  "layout": "hug",
   "size": "medium"
 };
 
 const compoundVariants = [];
 
 export const quantityPickerVariantMap = {
+  "layout": [
+    "hug",
+    "fill"
+  ],
   "size": [
     "small",
     "medium",

package/recipes/quantity-picker.mjs

@@ -41,12 +41,17 @@ const quantityPickerSlotNames = [
 ];
 
 const defaultVariant = {
+  "layout": "hug",
   "size": "medium"
 };
 
 const compoundVariants = [];
 
 export const quantityPickerVariantMap = {
+  "layout": [
+    "hug",
+    "fill"
+  ],
   "size": [
     "small",
     "medium",

package/recipes/time-picker.css

@@ -0,0 +1,44 @@
+.seed-time-picker__root {
+    width: 100%;
+    height: 220px;
+    --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+    --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
+}
+.seed-time-picker__scrollFog {}
+.seed-time-picker__columns {}
+.seed-time-picker__selectionIndicator {
+    border-radius: var(--seed-radius-r2);
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-time-picker__periodColumn {
+    flex: 0 0 auto;
+    outline: none;
+}
+.seed-time-picker__periodColumn[data-disabled] {
+    --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
+}
+.seed-time-picker__hourColumn {
+    flex: 0 0 auto;
+    outline: 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 {
+    flex: 0 0 auto;
+    outline: 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;
+}

package/recipes/time-picker.d.ts

@@ -0,0 +1,21 @@
+declare interface TimePickerVariant {
+  
+}
+
+declare type TimePickerVariantMap = {
+  [key in keyof TimePickerVariant]: Array<TimePickerVariant[key]>;
+};
+
+export declare type TimePickerVariantProps = Partial<TimePickerVariant>;
+
+export declare type TimePickerSlotName = "root" | "scrollFog" | "columns" | "selectionIndicator" | "periodColumn" | "hourColumn" | "minuteColumn" | "item";
+
+export declare const timePickerVariantMap: TimePickerVariantMap;
+
+export declare const timePicker: ((
+  props?: TimePickerVariantProps,
+) => Record<TimePickerSlotName, string>) & {
+  splitVariantProps: <T extends TimePickerVariantProps>(
+    props: T,
+  ) => [TimePickerVariantProps, Omit<T, keyof TimePickerVariantProps>];
+}

package/recipes/time-picker.layered.css

@@ -0,0 +1,53 @@
+@layer seed-components {
+  .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;
+  }
+}

package/recipes/time-picker.layered.mjs

@@ -0,0 +1,60 @@
+import './time-picker.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const timePickerSlotNames = [
+  [
+    "root",
+    "seed-time-picker__root"
+  ],
+  [
+    "scrollFog",
+    "seed-time-picker__scrollFog"
+  ],
+  [
+    "columns",
+    "seed-time-picker__columns"
+  ],
+  [
+    "selectionIndicator",
+    "seed-time-picker__selectionIndicator"
+  ],
+  [
+    "periodColumn",
+    "seed-time-picker__periodColumn"
+  ],
+  [
+    "hourColumn",
+    "seed-time-picker__hourColumn"
+  ],
+  [
+    "minuteColumn",
+    "seed-time-picker__minuteColumn"
+  ],
+  [
+    "item",
+    "seed-time-picker__item"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const timePickerVariantMap = {};
+
+export const timePickerVariantKeys = Object.keys(timePickerVariantMap);
+
+export function timePicker(props) {
+  return Object.fromEntries(
+    timePickerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(timePicker, { splitVariantProps: (props) => splitVariantProps(props, timePickerVariantMap) });
+
+// @recipe(seed): time-picker

package/recipes/time-picker.mjs

@@ -0,0 +1,60 @@
+import './time-picker.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const timePickerSlotNames = [
+  [
+    "root",
+    "seed-time-picker__root"
+  ],
+  [
+    "scrollFog",
+    "seed-time-picker__scrollFog"
+  ],
+  [
+    "columns",
+    "seed-time-picker__columns"
+  ],
+  [
+    "selectionIndicator",
+    "seed-time-picker__selectionIndicator"
+  ],
+  [
+    "periodColumn",
+    "seed-time-picker__periodColumn"
+  ],
+  [
+    "hourColumn",
+    "seed-time-picker__hourColumn"
+  ],
+  [
+    "minuteColumn",
+    "seed-time-picker__minuteColumn"
+  ],
+  [
+    "item",
+    "seed-time-picker__item"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const timePickerVariantMap = {};
+
+export const timePickerVariantKeys = Object.keys(timePickerVariantMap);
+
+export function timePicker(props) {
+  return Object.fromEntries(
+    timePickerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(timePicker, { splitVariantProps: (props) => splitVariantProps(props, timePickerVariantMap) });
+
+// @recipe(seed): time-picker

package/recipes/wheel-picker.css

@@ -0,0 +1,85 @@
+.seed-wheel-picker__root {
+    position: relative;
+    height: var(--seed-wheel-picker-viewport-size);
+    overflow: hidden;
+}
+.seed-wheel-picker__scrollFog {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    overflow: hidden;
+}
+.seed-wheel-picker__columns {
+    display: flex;
+    height: 100%;
+    justify-content: center;
+}
+.seed-wheel-picker__column {
+    box-sizing: border-box;
+    width: max-content;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior-x: none;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    outline: none;
+    touch-action: pan-y;
+    cursor: grab;
+    padding-block: var(--seed-wheel-picker-center-offset);
+}
+.seed-wheel-picker__column[data-disabled] {
+    overflow-y: hidden;
+    cursor: default;
+}
+.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 {
+    display: flex;
+    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;
+}
+.seed-wheel-picker__item[data-wheel-picker-indicator-overlap] {
+    color: transparent;
+    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%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.seed-wheel-picker__selectionIndicator {
+    position: absolute;
+    z-index: 0;
+    inset-inline: 0;
+    top: 50%;
+    height: var(--seed-wheel-picker-item-size);
+    transform: translateY(-50%);
+    pointer-events: none;
+}

package/recipes/wheel-picker.d.ts

@@ -0,0 +1,21 @@
+declare interface WheelPickerVariant {
+  
+}
+
+declare type WheelPickerVariantMap = {
+  [key in keyof WheelPickerVariant]: Array<WheelPickerVariant[key]>;
+};
+
+export declare type WheelPickerVariantProps = Partial<WheelPickerVariant>;
+
+export declare type WheelPickerSlotName = "root" | "scrollFog" | "columns" | "column" | "item" | "selectionIndicator";
+
+export declare const wheelPickerVariantMap: WheelPickerVariantMap;
+
+export declare const wheelPicker: ((
+  props?: WheelPickerVariantProps,
+) => Record<WheelPickerSlotName, string>) & {
+  splitVariantProps: <T extends WheelPickerVariantProps>(
+    props: T,
+  ) => [WheelPickerVariantProps, Omit<T, keyof WheelPickerVariantProps>];
+}