@seed-design/lynx-css 0.14.2 → 1.0.1

package/recipes/reaction-button.mjs

@@ -31,18 +31,11 @@ const reactionButtonSlotNames = [
 const defaultVariant = {
   "size": "small",
   "selected": false,
-  "pressed": false,
   "disabled": false,
   "loading": false
 };
 
 const compoundVariants = [
-  {
-    "selected": true,
-    "pressed": true,
-    "disabled": false,
-    "loading": false
-  },
   {
     "selected": false,
     "disabled": false,
@@ -68,10 +61,6 @@ export const reactionButtonVariantMap = {
     true,
     false
   ],
-  "pressed": [
-    true,
-    false
-  ],
   "disabled": [
     true,
     false

package/recipes/scroll-fog.css

@@ -5,8 +5,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__bottomMask {
     width: 100%;
@@ -14,8 +13,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__leftMask {
     width: 100%;
@@ -23,8 +21,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__rightMask {
     width: 100%;
@@ -32,17 +29,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
-}
-.seed-scroll-fog__verticalScroll {
-    width: 100%;
-    height: 100%;
-    pointer-events: auto
-}
-.seed-scroll-fog__horizontalScroll {
-    width: 100%;
-    pointer-events: auto
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__topMask--top_true {
     mask-image: linear-gradient(to bottom, #00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%), linear-gradient(#000000ff, #000000ff);

package/recipes/scroll-fog.d.ts

@@ -23,7 +23,7 @@ declare type ScrollFogVariantMap = {
 
 export declare type ScrollFogVariantProps = Partial<ScrollFogVariant>;
 
-export declare type ScrollFogSlotName = "root" | "topMask" | "bottomMask" | "leftMask" | "rightMask" | "verticalScroll" | "horizontalScroll";
+export declare type ScrollFogSlotName = "root" | "topMask" | "bottomMask" | "leftMask" | "rightMask";
 
 export declare const scrollFogVariantMap: ScrollFogVariantMap;
 

package/recipes/scroll-fog.mjs

@@ -21,14 +21,6 @@ const scrollFogSlotNames = [
   [
     "rightMask",
     "seed-scroll-fog__rightMask"
-  ],
-  [
-    "verticalScroll",
-    "seed-scroll-fog__verticalScroll"
-  ],
-  [
-    "horizontalScroll",
-    "seed-scroll-fog__horizontalScroll"
   ]
 ];
 

package/recipes/segmented-control.css

@@ -9,7 +9,8 @@
     max-width: 100%;
     padding: var(--seed-dimension-x1);
     border-radius: var(--seed-radius-full);
-    background-color: var(--seed-color-bg-neutral-weak-alpha)
+    background-color: var(--seed-color-bg-neutral-weak-alpha);
+    --segment-min-width: 86px
 }
 .seed-segmented-control__indicator {
     position: absolute;
@@ -18,6 +19,7 @@
     left: var(--seed-dimension-x1);
     z-index: 0;
     width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count, 1));
+    min-width: var(--segment-min-width);
     border-radius: var(--seed-radius-full);
     background-color: var(--seed-color-palette-gray-00);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
@@ -33,7 +35,7 @@
     z-index: 1;
     align-items: center;
     justify-content: center;
-    min-width: 86px;
+    min-width: var(--segment-min-width);
     min-height: 34px;
     height: 100%;
     border-radius: var(--seed-radius-full)
@@ -58,6 +60,22 @@
     bottom: 0;
     left: 0;
     border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-bg-neutral-weak-pressed);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing)
+}
+.seed-segmented-control__itemSelectedBackground {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-palette-gray-100);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     opacity: 0;
     transition-property: opacity;
     transition-duration: var(--seed-duration-color-transition);
@@ -73,31 +91,23 @@
     transition-duration: var(--seed-duration-color-transition);
     transition-timing-function: var(--seed-timing-function-easing)
 }
-.seed-segmented-control__itemBackground--selected_true {
-    background-color: var(--seed-color-palette-gray-100);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
-}
 .seed-segmented-control__label--selected_true {
     color: var(--seed-color-fg-neutral)
 }
-.seed-segmented-control__itemBackground--selected_false {
-    background-color: var(--seed-color-bg-neutral-weak-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
-}
 .seed-segmented-control__label--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground {
+.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground--selected_false {
     opacity: 1
 }
-.seed-segmented-control__itemBackground--pressed_true {
+.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemSelectedBackground--selected_true {
     opacity: 1
 }
 .seed-segmented-control__indicator--hasSelection_false {
     opacity: 0
 }
-.seed-segmented-control__itemBackground--disabled_true-pressed_true {
-    opacity: 0
+.seed-segmented-control__indicator--transitionEnabled_false {
+    transition-duration: 0s
 }
 .seed-segmented-control__item--selected_true-disabled_true {
     background-color: var(--seed-color-bg-disabled);

package/recipes/segmented-control.d.ts

@@ -8,13 +8,13 @@ declare interface SegmentedControlVariant {
   */
   disabled: boolean;
 /**
-  * @default false
+  * @default true
   */
-  pressed: boolean;
+  hasSelection: boolean;
 /**
   * @default true
   */
-  hasSelection: boolean;
+  transitionEnabled: boolean;
 }
 
 declare type SegmentedControlVariantMap = {
@@ -23,7 +23,7 @@ declare type SegmentedControlVariantMap = {
 
 export declare type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
 
-export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemContent" | "itemBackground" | "label";
+export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemContent" | "itemBackground" | "itemSelectedBackground" | "label";
 
 export declare const segmentedControlVariantMap: SegmentedControlVariantMap;
 

package/recipes/segmented-control.mjs

@@ -22,6 +22,10 @@ const segmentedControlSlotNames = [
     "itemBackground",
     "seed-segmented-control__itemBackground"
   ],
+  [
+    "itemSelectedBackground",
+    "seed-segmented-control__itemSelectedBackground"
+  ],
   [
     "label",
     "seed-segmented-control__label"
@@ -31,15 +35,11 @@ const segmentedControlSlotNames = [
 const defaultVariant = {
   "selected": false,
   "disabled": false,
-  "pressed": false,
-  "hasSelection": true
+  "hasSelection": true,
+  "transitionEnabled": true
 };
 
 const compoundVariants = [
-  {
-    "disabled": true,
-    "pressed": true
-  },
   {
     "selected": true,
     "disabled": true
@@ -55,11 +55,11 @@ export const segmentedControlVariantMap = {
     true,
     false
   ],
-  "pressed": [
+  "hasSelection": [
     true,
     false
   ],
-  "hasSelection": [
+  "transitionEnabled": [
     true,
     false
   ]

package/recipes/select-box-checkmark.css

@@ -1,19 +1,16 @@
 .seed-select-box-checkmark__root {
-    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-shrink: 0;
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5)
 }
 .seed-select-box-checkmark__icon {
     display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    flex-shrink: 0;
     width: 15px;
     height: 15px;
-    margin: auto;
     color: var(--seed-color-fg-placeholder)
 }
 .seed-select-box-checkmark__icon--selected_true {

package/recipes/select-box.css

@@ -3,7 +3,6 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
-    height: 100%;
     min-height: 0;
     gap: 0
 }
@@ -13,7 +12,7 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
-    height: 100%;
+    flex-grow: 1;
     border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
@@ -25,7 +24,6 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
-    height: 100%;
     min-height: 0;
     flex-grow: 1
 }
@@ -52,7 +50,9 @@
 .seed-select-box__content {
     display: flex;
     flex-direction: row;
-    min-width: 0
+    min-width: 0;
+    flex-grow: 1;
+    flex-shrink: 1
 }
 .seed-select-box__prefixIcon {
     display: flex;
@@ -72,6 +72,7 @@
 }
 .seed-select-box__label {
     display: flex;
+    flex-shrink: 0;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
@@ -82,6 +83,7 @@
     font-weight: var(--seed-font-weight-medium)
 }
 .seed-select-box__description {
+    flex-shrink: 0;
     color: var(--seed-color-fg-neutral-muted);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
@@ -114,6 +116,10 @@
     align-items: center;
     gap: var(--seed-dimension-x3)
 }
+.seed-select-box__body--layout_horizontal {
+    flex-grow: 1;
+    flex-shrink: 1
+}
 .seed-select-box__trigger--layout_vertical {
     padding-left: var(--seed-dimension-x4);
     padding-right: var(--seed-dimension-x4);

package/recipes/select-item.css

@@ -5,6 +5,13 @@
     align-items: center;
     flex-shrink: 0
 }
+.seed-select-item__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    min-width: 0
+}
 .seed-select-item__pressedOverlay {
     position: absolute;
     top: 0;
@@ -46,7 +53,9 @@
     padding-top: var(--seed-dimension-x3);
     padding-bottom: var(--seed-dimension-x3);
     padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4)
+}
+.seed-select-item__scaleContent--size_large {
     gap: var(--seed-dimension-x3)
 }
 .seed-select-item__prefixIcon--size_large {
@@ -69,7 +78,9 @@
     padding-top: var(--seed-dimension-x2_5);
     padding-bottom: var(--seed-dimension-x2_5);
     padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4)
+}
+.seed-select-item__scaleContent--size_medium {
     gap: var(--seed-dimension-x2)
 }
 .seed-select-item__prefixIcon--size_medium {

package/recipes/select-item.d.ts

@@ -23,7 +23,7 @@ declare type SelectItemVariantMap = {
 
 export declare type SelectItemVariantProps = Partial<SelectItemVariant>;
 
-export declare type SelectItemSlotName = "root" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "indicator";
+export declare type SelectItemSlotName = "root" | "scaleContent" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "indicator";
 
 export declare const selectItemVariantMap: SelectItemVariantMap;
 

package/recipes/select-item.mjs

@@ -6,6 +6,10 @@ const selectItemSlotNames = [
     "root",
     "seed-select-item__root"
   ],
+  [
+    "scaleContent",
+    "seed-select-item__scaleContent"
+  ],
   [
     "pressedOverlay",
     "seed-select-item__pressedOverlay"

package/recipes/select-trigger.css

@@ -10,6 +10,13 @@
     border-width: 1px;
     border-color: var(--seed-color-stroke-neutral-weak)
 }
+.seed-select-trigger__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    min-width: 0
+}
 .seed-select-trigger__pressedOverlay {
     position: absolute;
     top: 0;
@@ -59,11 +66,13 @@
 }
 .seed-select-trigger__root--size_large {
     height: var(--seed-dimension-x13);
-    gap: var(--seed-dimension-x2_5);
     padding-left: var(--seed-dimension-x4);
     padding-right: var(--seed-dimension-x4);
     border-radius: var(--seed-radius-r3)
 }
+.seed-select-trigger__scaleContent--size_large {
+    gap: var(--seed-dimension-x2_5)
+}
 .seed-select-trigger__pressedOverlay--size_large {
     border-radius: var(--seed-radius-r3)
 }
@@ -85,11 +94,13 @@
 }
 .seed-select-trigger__root--size_medium {
     height: var(--seed-dimension-x10);
-    gap: var(--seed-dimension-x2);
     padding-left: var(--seed-dimension-x3_5);
     padding-right: var(--seed-dimension-x3_5);
     border-radius: var(--seed-radius-r2)
 }
+.seed-select-trigger__scaleContent--size_medium {
+    gap: var(--seed-dimension-x2)
+}
 .seed-select-trigger__pressedOverlay--size_medium {
     border-radius: var(--seed-radius-r2)
 }

package/recipes/select-trigger.d.ts

@@ -31,7 +31,7 @@ declare type SelectTriggerVariantMap = {
 
 export declare type SelectTriggerVariantProps = Partial<SelectTriggerVariant>;
 
-export declare type SelectTriggerSlotName = "root" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
+export declare type SelectTriggerSlotName = "root" | "scaleContent" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
 
 export declare const selectTriggerVariantMap: SelectTriggerVariantMap;
 

package/recipes/select-trigger.mjs

@@ -6,6 +6,10 @@ const selectTriggerSlotNames = [
     "root",
     "seed-select-trigger__root"
   ],
+  [
+    "scaleContent",
+    "seed-select-trigger__scaleContent"
+  ],
   [
     "pressedOverlay",
     "seed-select-trigger__pressedOverlay"

package/recipes/select.css

@@ -1,17 +1,5 @@
 .seed-select__positioner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0
-}
-.seed-select__backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0
+    z-index: 99
 }
 .seed-select__content {
     position: absolute;

package/recipes/select.d.ts

@@ -19,7 +19,7 @@ declare type SelectVariantMap = {
 
 export declare type SelectVariantProps = Partial<SelectVariant>;
 
-export declare type SelectSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+export declare type SelectSlotName = "positioner" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
 
 export declare const selectVariantMap: SelectVariantMap;
 

package/recipes/select.mjs

@@ -6,10 +6,6 @@ const selectSlotNames = [
     "positioner",
     "seed-select__positioner"
   ],
-  [
-    "backdrop",
-    "seed-select__backdrop"
-  ],
   [
     "content",
     "seed-select__content"

package/recipes/slider-marker.css

@@ -3,8 +3,8 @@
     top: 0;
     bottom: 0;
     width: max-content;
-    left: calc(var(--slider-marker-left, 0%) + var(--slider-marker-offset, 0px));
-    color: var(--slider-marker-color, var(--seed-color-fg-neutral-muted));
+    left: calc(var(--slider-marker-left, 0%) + var(--seed-dimension-x5) * var(--slider-marker-offset-ratio, 0));
+    color: var(--seed-color-fg-neutral-muted);
     font-weight: var(--seed-font-weight-regular);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3)

package/recipes/slider-tick.css

@@ -2,7 +2,7 @@
     position: absolute;
     top: 50%;
     height: 100%;
-    left: calc(var(--slider-tick-left, 0%) + var(--slider-tick-offset, 0px));
+    left: calc(var(--slider-tick-left, 0%) + var(--seed-dimension-x5) * var(--slider-tick-offset-ratio, 0));
     background-color: var(--seed-color-fg-on-neutral-solid);
     transform: translate(-50%, -50%)
 }

package/recipes/slider.css

@@ -32,7 +32,7 @@
 .seed-slider__thumb {
     position: absolute;
     top: 50%;
-    left: calc(var(--slider-thumb-left, 0%) + var(--slider-thumb-offset, 0px));
+    left: calc(var(--slider-thumb-left, 0%) + var(--seed-dimension-x5) * var(--slider-thumb-offset-ratio, 0));
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
     background-color: var(--seed-color-bg-neutral-solid);
@@ -51,6 +51,7 @@
     top: 50%;
     left: calc(var(--slider-value-indicator-left, 0%) + var(--slider-value-indicator-offset, 0px));
     width: max-content;
+    height: max-content;
     padding-top: 8px;
     padding-right: 8px;
     padding-bottom: 8px;
@@ -99,7 +100,6 @@
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);
     flex-shrink: 0;
-    white-space: nowrap;
     text-align: center
 }
 .seed-slider__track--disabled_true {
@@ -111,9 +111,6 @@
 .seed-slider__thumb--disabled_true {
     background-color: var(--seed-color-fg-disabled)
 }
-.seed-slider__markers--disabled_true {
-    --slider-marker-color: var(--seed-color-fg-disabled)
-}
 .seed-slider__range--dragging_true {
     transition: none
 }

package/recipes/tabs.css

@@ -3,10 +3,7 @@
 }
 .seed-tabs__list {
     position: relative;
-    background-color: var(--seed-color-bg-layer-default);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--seed-color-stroke-neutral-muted)
+    background-color: var(--seed-color-bg-layer-default)
 }
 .seed-tabs__listContent {
     display: flex;
@@ -15,7 +12,9 @@
     flex-wrap: nowrap;
     align-items: stretch;
     width: max-content;
-    min-width: 100%
+    min-width: 100%;
+    padding-bottom: 1px;
+    box-shadow: inset 0 -1px 0 0 var(--seed-color-stroke-neutral-muted)
 }
 .seed-tabs__carousel {
     display: flex;
@@ -34,9 +33,9 @@
     left: 0px;
     bottom: 0px;
     height: 2px;
-    width: var(--tabs-indicator-width, 0px);
     background-color: var(--seed-color-fg-neutral);
-    transform: translateX(var(--tabs-indicator-x, 0px));
+    box-sizing: border-box;
+    background-clip: content-box;
     transition-property: transform, width;
     transition-duration: var(--seed-duration-d4);
     transition-timing-function: var(--seed-timing-function-easing)
@@ -62,8 +61,8 @@
     padding-right: 0px
 }
 .seed-tabs__indicator--triggerLayout_fill {
-    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter)));
-    width: calc(var(--tabs-indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter))
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-tabs__trigger--triggerLayout_fill {
     flex: 1
@@ -73,8 +72,9 @@
     padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-tabs__indicator--triggerLayout_hug {
-    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter) + 0px));
-    width: calc(var(--tabs-indicator-width, 0px) - 2 * 0px)
+    left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-left: 0px;
+    padding-right: 0px
 }
 .seed-tabs__root--contentLayout_fill {
     display: flex;