@wix/site-ui 1.56.0 → 1.57.0

package/dist/CheckboxGroup/index.css

@@ -1,9 +1,9 @@
 .root-ZCRH6j {
-  font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color);
   border: none;
+  flex-direction: column;
+  gap: 12px;
   margin: 0;
   padding: 0;
-  display: inline-block;
+  display: flex;
 }
 

package/dist/Collapsible/index.css

@@ -3,45 +3,43 @@
 }
 
 .trigger-jzj48r {
-  text-align: start;
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
-  font: inherit;
+  text-align: start;
   cursor: pointer;
-  width: 100%;
   padding: 0;
-  padding-inline-start: var(--wst-collapsible-trigger-padding-inline-start, 0px);
-  padding-inline-end: var(--wst-collapsible-trigger-padding-inline-end, 0px);
-  padding-top: var(--wst-collapsible-trigger-padding-top, 12px);
-  padding-bottom: var(--wst-collapsible-trigger-padding-bottom, 12px);
   background: none;
   border: none;
-  align-items: flex-start;
-  font-size: 16px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding-block: 12px;
+  padding-inline: 0;
   display: flex;
 }
 
 .trigger-jzj48r:disabled {
-  color: var(--wst-disabled-color, #c1c1c1);
-  cursor: not-allowed;
+  color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+  pointer-events: none;
 }
 
 .panel-TIli5f {
-  padding-inline-start: var(--wst-collapsible-content-padding-inline-start, 0px);
-  padding-inline-end: var(--wst-collapsible-content-padding-inline-end, 0px);
-  padding-top: var(--wst-collapsible-content-padding-top, 0px);
-  padding-bottom: var(--wst-collapsible-content-padding-bottom, 12px);
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
-  font-size: 16px;
+  interpolate-size: allow-keywords;
+  height: auto;
+  padding-block: 0 12px;
+  padding-inline: 0;
+  transition: height .3s cubic-bezier(.39, .11, .37, .99), padding .3s cubic-bezier(.39, .11, .37, .99);
+  overflow: hidden;
 }
 
 .root-D02Wtj:after {
   content: "";
-  border-bottom-style: solid;
-  border-bottom-color: var(--wst-paragraph-2-color, #000);
-  border-bottom-width: var(--wst-collapsible-divider-width, 1px);
-  width: 100%;
-  opacity: var(--wst-collapsible-divider-opacity, .3);
-  border-radius: var(--wst-collapsible-divider-radius, 0px);
+  border-bottom: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
   display: block;
 }
 

package/dist/Combobox/index.css

@@ -1,78 +1,86 @@
 .label-AxhKN1 {
-  color: var(--wst-paragraph-2-color, #000);
   font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
   margin-bottom: 8px;
-  display: block;
+  display: inline-block;
 }
 
 .inputGroup-j4QBzY {
   box-sizing: border-box;
-  min-width: 68px;
-  height: var(--wst-dropdown-height, 42px);
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
   background-color: var(--wst-primary-background-color, #fff);
-  border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
-  border-radius: var(--wst-border-radius, 0);
-  color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2-font);
-  transition: border-color .1s, background-color .1s, color .1s;
+  border-radius: 0;
+  align-items: center;
+  width: 100%;
   display: flex;
 }
 
 .inputGroup-j4QBzY:not([data-disabled]):not([data-invalid]):hover, .inputGroup-j4QBzY:not([data-disabled]):not([data-invalid]):focus-within {
-  border-color: var(--wst-paragraph-2-color, #000);
-  background-color: var(--wst-primary-background-color, #fff);
-  color: var(--wst-paragraph-2-color, #000);
+  border-color: var(--wst-system-line-1-color, #000);
 }
 
 .inputGroup-j4QBzY[data-invalid] {
-  border-color: var(--wst-system-error-color, #df3131);
+  border-color: color-mix(in srgb, var(--wst-system-error-color, #df3131) 60%, transparent);
 }
 
 .inputGroup-j4QBzY[data-disabled] {
-  color: var(--wst-system-disabled-color, #bcbcbc);
-  border-color: var(--wst-system-disabled-color, #bcbcbc);
+  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
   cursor: not-allowed;
+  opacity: .6;
 }
 
 .input-V1lew7 {
+  box-sizing: border-box;
   min-width: 0;
-  color: inherit;
-  font: inherit;
-  background: none;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  vertical-align: middle;
+  background-color: #0000;
   border: none;
   outline: none;
   flex: 1;
-  padding: 0 8px;
+  margin: 0;
+  padding-block: 8px;
+  padding-inline: 12px;
 }
 
 .input-V1lew7::placeholder {
-  color: var(--wst-shade-3-color, #aaa);
+  color: var(--wst-shade-3-color, #767676);
   font: var(--wst-paragraph-2-font);
 }
 
 .trigger-d9xFPE {
+  appearance: none;
   cursor: pointer;
+  width: 36px;
+  height: 100%;
   color: var(--wst-paragraph-2-color, #000);
   background: none;
   border: none;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  padding: 0 8px;
-  display: flex;
+  margin: 0;
+  padding: 0;
+  padding-inline: 8px;
+  display: inline-flex;
 }
 
 .trigger-d9xFPE[data-disabled] {
-  color: var(--wst-system-disabled-color, #bcbcbc);
+  color: var(--wst-system-disabled-color, #939393);
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .icon-sFiTxy {
-  color: var(--wst-paragraph-2-color, #000);
   justify-content: center;
   align-items: center;
-  transition: transform .15s;
-  display: flex;
+  width: 20px;
+  height: 20px;
+  transition: transform .2s;
+  display: inline-flex;
 }
 
 [data-popup-open] .icon-sFiTxy, .trigger-d9xFPE[aria-expanded="true"] .icon-sFiTxy {
@@ -80,105 +88,111 @@
 }
 
 .positioner-Va3ay5 {
-  z-index: 9999;
+  z-index: 100;
 }
 
 .popup-u5vEt9 {
   box-sizing: border-box;
   background-color: var(--wst-primary-background-color, #fff);
-  border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 40%, transparent);
-  border-radius: var(--wst-border-radius, 0);
-  max-width: 100%;
+  border: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+  min-width: var(--anchor-width);
+  border-radius: 0;
   overflow: hidden;
-  box-shadow: 0 4px 8px #0000001a, 0 0 4px #0000001a;
 }
 
 .list-du0h4z {
-  padding-top: var(--wst-dropdown-content-vertical-padding, 12px);
-  padding-bottom: var(--wst-dropdown-content-vertical-padding, 12px);
-  padding-left: var(--wst-dropdown-content-horizontal-padding, 0);
-  padding-right: var(--wst-dropdown-content-horizontal-padding, 0);
+  flex-direction: column;
+  max-height: 300px;
+  margin: 0;
+  padding-block: 4px;
+  list-style: none;
+  display: flex;
   overflow-y: auto;
 }
 
 .groupLabel-fj4SAo {
-  padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
-  padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
-  color: var(--wst-shade-3-color, #aaa);
-  font: var(--wst-paragraph-2-font);
-  padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
-  padding-inline-end: 12px;
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-shade-3-color, #767676);
+  padding-block: 6px;
+  padding-inline: 12px;
   display: block;
 }
 
 .item-cRAzQU {
-  box-sizing: border-box;
-  width: 100%;
-  padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
-  padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
-  color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2-font);
   cursor: pointer;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
   user-select: none;
   align-items: center;
-  gap: var(--wst-dropdown-option-column-gap, 12px);
-  padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
-  padding-inline-end: 12px;
+  gap: 8px;
+  padding-block: 10px;
+  padding-inline: 12px;
   display: flex;
 }
 
 .item-cRAzQU[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
 }
 
 .item-cRAzQU[data-selected] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 12%, transparent);
 }
 
 .item-cRAzQU[data-highlighted][data-selected] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 16%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 16%, transparent);
 }
 
 .item-cRAzQU[data-disabled] {
-  color: var(--wst-system-disabled-color, #bcbcbc);
-  cursor: not-allowed;
+  color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+  pointer-events: none;
 }
 
 .itemIndicator-vKAwkz {
+  width: 16px;
+  height: 16px;
+  color: var(--wst-links-and-actions-color, #116dff);
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  display: flex;
+  display: inline-flex;
 }
 
 .chips-XV1Ctk {
   flex-wrap: wrap;
   gap: 4px;
-  padding: 4px 8px;
+  padding: 4px;
   display: flex;
 }
 
 .chip-YCMHpQ {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
+  font: var(--wst-paragraph-3-font);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2-font);
-  border-radius: 2px;
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
+  user-select: none;
+  border-radius: 12px;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
+  padding-block: 2px;
+  padding-inline: 8px;
   display: inline-flex;
 }
 
 .chipRemove-VYdSNc {
+  appearance: none;
   cursor: pointer;
-  color: inherit;
+  color: var(--wst-paragraph-2-color, #000);
   opacity: .6;
   background: none;
   border: none;
   justify-content: center;
   align-items: center;
+  margin: 0;
   padding: 0;
-  display: flex;
+  line-height: 1;
+  display: inline-flex;
 }
 
 .chipRemove-VYdSNc:hover {
@@ -187,29 +201,35 @@
 
 .row-tXxIj8 {
   align-items: center;
+  padding-block: 10px;
+  padding-inline: 12px;
   display: flex;
 }
 
 .empty-ypPHaj {
-  padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
-  padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
-  color: var(--wst-shade-3-color, #aaa);
   font: var(--wst-paragraph-2-font);
-  padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
-  padding-inline-end: 12px;
+  color: var(--wst-shade-3-color, #767676);
+  text-align: center;
+  padding-block: 12px;
+  padding-inline: 12px;
+  display: block;
 }
 
 .clear-UgLOma {
+  appearance: none;
   cursor: pointer;
+  width: 28px;
+  height: 28px;
   color: var(--wst-paragraph-2-color, #000);
-  opacity: .6;
+  opacity: .5;
   background: none;
   border: none;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  padding: 0 8px;
-  display: flex;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
 }
 
 .clear-UgLOma:hover {

package/dist/ContextMenu/index.css

@@ -1,9 +1,22 @@
+.trigger-D0oBie {
+  cursor: context-menu;
+}
+
+.backdrop-SPwmGh {
+  position: fixed;
+  inset: 0;
+}
+
+.positioner-ZCJXBK {
+  z-index: 1000;
+}
+
 .popup-exWvLg {
   background-color: var(--wst-primary-background-color, #fff);
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--wst-paragraph-2-color, #fff6);
+  border: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
   box-sizing: border-box;
+  outline: none;
   max-width: 320px;
   margin: 0;
   padding: 12px 0;
@@ -15,34 +28,41 @@
   box-sizing: border-box;
 }
 
-.popup-exWvLg hr {
-  border-width: 0 0 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--wst-system-line-1-color, #e5e5e5);
-  opacity: .2;
-  width: auto;
-  margin: 10px 13px;
+.popup-exWvLg hr, .separator-FAmS6X {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent);
+  border: none;
+  height: 1px;
+  margin: 4px 0;
+}
+
+.arrow-_xxSbP {
+  pointer-events: none;
+  width: 10px;
+  height: 10px;
+  display: block;
+  overflow: visible;
 }
 
 .groupLabel-nJbnHC {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-paragraph-3-color);
+  color: var(--wst-shade-3-color, #767676);
   padding: 4px 24px;
 }
 
 .item-u6sdTm {
   cursor: pointer;
-  width: calc(100% + 2px);
-  text-align: initial;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  text-align: start;
+  user-select: none;
+  background: none;
+  border: none;
+  outline: none;
   padding: 8px 24px;
-  list-style: none;
-  position: relative;
-  left: -1px;
-  right: -1px;
 }
 
 .item-u6sdTm[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
 }
 
 .item-u6sdTm[data-disabled] {
@@ -51,22 +71,23 @@
 }
 
 .item-u6sdTm[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
 }
 
 .checkboxItem-lQUwTw {
   cursor: pointer;
-  width: calc(100% + 2px);
-  text-align: initial;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  text-align: start;
+  user-select: none;
+  background: none;
+  border: none;
+  outline: none;
   padding: 8px 24px;
-  list-style: none;
-  position: relative;
-  left: -1px;
-  right: -1px;
 }
 
 .checkboxItem-lQUwTw[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
 }
 
 .checkboxItem-lQUwTw[data-disabled] {
@@ -75,22 +96,34 @@
 }
 
 .checkboxItem-lQUwTw[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
+}
+
+.checkboxItemIndicator-kWKt4r {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 8px;
+  display: inline-flex;
 }
 
 .linkItem-w7Buqf {
   cursor: pointer;
-  width: calc(100% + 2px);
-  text-align: initial;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  text-align: start;
+  user-select: none;
+  background: none;
+  border: none;
+  outline: none;
   padding: 8px 24px;
-  list-style: none;
-  position: relative;
-  left: -1px;
-  right: -1px;
+  text-decoration: none;
 }
 
 .linkItem-w7Buqf[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
 }
 
 .linkItem-w7Buqf[data-disabled] {
@@ -99,22 +132,23 @@
 }
 
 .linkItem-w7Buqf[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
 }
 
 .radioItem-GkHQXK {
   cursor: pointer;
-  width: calc(100% + 2px);
-  text-align: initial;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  text-align: start;
+  user-select: none;
+  background: none;
+  border: none;
+  outline: none;
   padding: 8px 24px;
-  list-style: none;
-  position: relative;
-  left: -1px;
-  right: -1px;
 }
 
 .radioItem-GkHQXK[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
 }
 
 .radioItem-GkHQXK[data-disabled] {
@@ -123,22 +157,37 @@
 }
 
 .radioItem-GkHQXK[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
+}
+
+.radioItemIndicator-gKBhmr {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 8px;
+  display: inline-flex;
 }
 
 .submenuTrigger-vAkD3A {
   cursor: pointer;
-  width: calc(100% + 2px);
-  text-align: initial;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  text-align: start;
+  user-select: none;
+  background: none;
+  border: none;
+  outline: none;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
   padding: 8px 24px;
-  list-style: none;
-  position: relative;
-  left: -1px;
-  right: -1px;
+  display: flex;
 }
 
 .submenuTrigger-vAkD3A[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
 }
 
 .submenuTrigger-vAkD3A[data-disabled] {
@@ -147,6 +196,6 @@
 }
 
 .submenuTrigger-vAkD3A[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
 }
 

package/dist/ContextMenu/index.d.ts

@@ -23,7 +23,7 @@ import { Padding } from '@floating-ui/react-dom';
 import * as React_2 from 'react';
 import { ReactStore } from '@base-ui/utils/store';
 import { Rect } from '@floating-ui/utils';
-import { SeparatorProps as SeparatorProps_2 } from '@base-ui/react';
+import { SeparatorProps } from '@base-ui/react';
 import { TransitionStatus as TransitionStatus_2 } from '../../internals/useTransitionStatus.js';
 import type { UseFloatingReturn } from '@floating-ui/react-dom';
 import { VirtualElement } from '@floating-ui/react-dom';
@@ -180,10 +180,12 @@ export declare const ContextMenu: {
     SubmenuTrigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ContextMenuSubmenuTriggerProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
+    Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
     Root: typeof ContextMenu_2.Root;
     SubmenuRoot: typeof ContextMenu_2.SubmenuRoot;
     Portal: React_2.ForwardRefExoticComponent<Omit<ContextMenuPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
-    Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 };
 
 export declare namespace ContextMenu_2 {
@@ -2094,14 +2096,14 @@ declare const selectors_2: {
  *
  * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
  */
-declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+declare const Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 declare namespace Separator {
-    type Props = SeparatorProps;
+    type Props = SeparatorProps_2;
     type State = SeparatorState;
 }
 
-declare interface SeparatorProps extends BaseUIComponentProps<'div', SeparatorState> {
+declare interface SeparatorProps_2 extends BaseUIComponentProps<'div', SeparatorState> {
     /**
      * The orientation of the separator.
      * @default 'horizontal'