@seed-design/css 2.3.1 → 2.4.1

package/recipes/slider.layered.css

@@ -2,6 +2,7 @@
   .seed-slider__root {
     align-items: stretch;
     gap: var(--seed-dimension-x0_5);
+    -webkit-user-select: none;
     user-select: none;
     touch-action: none;
     flex-direction: column;

package/recipes/tag-group.layered.css

@@ -3,6 +3,7 @@
     color: var(--seed-color-palette-gray-600);
     font-weight: var(--seed-font-weight-regular);
     white-space: pre;
+    -webkit-user-select: none;
     user-select: none;
   }
 

package/recipes/text-input.layered.css

@@ -40,13 +40,25 @@
     font-weight: var(--seed-font-weight-regular);
   }
 
+  .seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
+    -webkit-text-fill-color: var(--seed-color-fg-neutral);
+    transition: background-color 2147480000s 2147480000s;
+  }
+
   .seed-text-input__value:is(:autofill, :autofill) {
     -webkit-text-fill-color: var(--seed-color-fg-neutral);
     transition: background-color 2147480000s 2147480000s;
   }
 
-  @supports (background-clip: text) {
+  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
+    .seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
+      -webkit-background-clip: text;
+      background-clip: text;
+      transition: none;
+    }
+
     .seed-text-input__value:is(:autofill, :autofill) {
+      -webkit-background-clip: text;
       background-clip: text;
       transition: none;
     }
@@ -158,7 +170,7 @@
     padding-block: var(--seed-dimension-x3_5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--size_responsive:is(textarea) {
       min-height: 82px;
       padding-block: var(--seed-dimension-x3);
@@ -281,7 +293,7 @@
     border-radius: var(--seed-radius-r3);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__root--variant_outline-size_responsive {
       gap: var(--seed-dimension-x2);
       min-height: var(--seed-dimension-x10);
@@ -294,7 +306,7 @@
     line-height: var(--seed-line-height-t5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--variant_outline-size_responsive {
       font-size: var(--seed-font-size-t4);
       line-height: var(--seed-line-height-t4);
@@ -306,7 +318,7 @@
     line-height: var(--seed-line-height-t5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--variant_outline-size_responsive::placeholder {
       font-size: var(--seed-font-size-t4);
       line-height: var(--seed-line-height-t4);
@@ -317,7 +329,7 @@
     padding-left: var(--seed-dimension-x4);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--variant_outline-size_responsive:first-child {
       padding-left: var(--seed-dimension-x3_5);
     }
@@ -327,7 +339,7 @@
     padding-right: var(--seed-dimension-x4);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--variant_outline-size_responsive:last-child {
       padding-right: var(--seed-dimension-x3_5);
     }
@@ -338,7 +350,7 @@
     line-height: var(--seed-line-height-t5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__prefixText--variant_outline-size_responsive {
       font-size: var(--seed-font-size-t4);
       line-height: var(--seed-line-height-t4);
@@ -349,7 +361,7 @@
     margin-left: var(--seed-dimension-x4);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
       margin-left: var(--seed-dimension-x3_5);
     }
@@ -360,7 +372,7 @@
     height: var(--seed-dimension-x5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__prefixIcon--variant_outline-size_responsive {
       width: var(--seed-dimension-x4);
       height: var(--seed-dimension-x4);
@@ -371,7 +383,7 @@
     margin-left: var(--seed-dimension-x4);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
       margin-left: var(--seed-dimension-x3_5);
     }
@@ -382,7 +394,7 @@
     line-height: var(--seed-line-height-t5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__suffixText--variant_outline-size_responsive {
       font-size: var(--seed-font-size-t4);
       line-height: var(--seed-line-height-t4);
@@ -393,7 +405,7 @@
     margin-right: var(--seed-dimension-x4);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
       margin-right: var(--seed-dimension-x3_5);
     }
@@ -404,7 +416,7 @@
     height: var(--seed-dimension-x5);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__suffixIcon--variant_outline-size_responsive {
       width: var(--seed-dimension-x4);
       height: var(--seed-dimension-x4);
@@ -415,7 +427,7 @@
     margin-right: var(--seed-dimension-x4);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
       margin-right: var(--seed-dimension-x3_5);
     }
@@ -479,7 +491,7 @@
     padding-block: var(--seed-dimension-x2);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__root--variant_underline-size_responsive {
       gap: var(--seed-dimension-x2);
       min-height: 34px;
@@ -492,7 +504,7 @@
     line-height: var(--seed-line-height-t6);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--variant_underline-size_responsive {
       font-size: var(--seed-font-size-t5);
       line-height: var(--seed-line-height-t5);
@@ -504,7 +516,7 @@
     line-height: var(--seed-line-height-t6);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__value--variant_underline-size_responsive::placeholder {
       font-size: var(--seed-font-size-t5);
       line-height: var(--seed-line-height-t5);
@@ -516,7 +528,7 @@
     line-height: var(--seed-line-height-t6);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__prefixText--variant_underline-size_responsive {
       font-size: var(--seed-font-size-t5);
       line-height: var(--seed-line-height-t5);
@@ -528,7 +540,7 @@
     height: var(--seed-dimension-x6);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__prefixIcon--variant_underline-size_responsive {
       width: var(--seed-dimension-x5);
       height: var(--seed-dimension-x5);
@@ -540,7 +552,7 @@
     line-height: var(--seed-line-height-t6);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__suffixText--variant_underline-size_responsive {
       font-size: var(--seed-font-size-t5);
       line-height: var(--seed-line-height-t5);
@@ -552,7 +564,7 @@
     height: var(--seed-dimension-x6);
   }
 
-  @media (width >= 1280px) {
+  @media (min-width: 1280px) {
     .seed-text-input__suffixIcon--variant_underline-size_responsive {
       width: var(--seed-dimension-x5);
       height: var(--seed-dimension-x5);

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>];
+}

package/recipes/wheel-picker.layered.css

@@ -0,0 +1,100 @@
+@layer seed-components {
+  .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;
+    -webkit-user-select: none;
+    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%);
+  }
+}