@wix/patterns 1.434.0 → 1.436.0

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1055771732";
+var _namespace_ = "PickerContentAdditionalStep2982818180";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep1055771732__root","titles":"PickerContentAdditionalStep1055771732__titles","suffix":"PickerContentAdditionalStep1055771732__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2982818180__root","titles":"PickerContentAdditionalStep2982818180__titles","suffix":"PickerContentAdditionalStep2982818180__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem4154832707";
+var _namespace_ = "PickerTableListItem3646337391";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem4154832707__root"};
+export var classes = {"root":"PickerTableListItem3646337391__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent2990159044";
+var _namespace_ = "ScrollableContent1350654399";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent2990159044__root"};
+export var classes = {"root":"ScrollableContent1350654399__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/AllCompleteState.tsx

@@ -25,7 +25,7 @@ export const AllCompleteState = observer(
           direction="vertical"
           padding="SP9"
           align="center"
-          backgroundColor="B50"
+          backgroundColor="var(--wds-color-fill-dark-secondary, var(--wsr-color-B50, #E7F0FF))"
           gap="SP3"
         >
           <Heading size="medium">

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -107,7 +107,7 @@ export const SetupStepCard = ({
         >
           <Box verticalAlign="middle" gap="SP1" flexGrow={1} minWidth={0}>
             <Box className={st(classes.stepIcon)}>
-              <SetupStepIcon status={step.status} marginTop="0px" />
+              <SetupStepIcon status={step.status} />
             </Box>
             {/* Title + "In progress" badge stack together so the icon centers
                 against the whole block (matches the Figma in-progress card). */}

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text, Badge, Tag } from '@wix/design-system';
+import { Box, Text, Badge, Tag, ClickableCard } from '@wix/design-system';
 import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -43,6 +43,75 @@ export const SetupStepGroup = ({
   const isFocused = expanded || isPrimary;
   const Chevron = expanded ? ChevronUp : ChevronDown;
 
+  const headerContent = (
+    <Box
+      align="space-between"
+      verticalAlign="middle"
+      width="100%"
+      minHeight="30px"
+    >
+      <Box
+        minHeight="24px"
+        verticalAlign="middle"
+        gap={isMobile ? 'SP1' : undefined}
+      >
+        {isMobile ? (
+          <Box className={st(classes.stepIcon)}>
+            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+          </Box>
+        ) : (
+          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+        )}
+        {/* Mobile cards stack the badge under the title (matches
+            SetupStepCard); desktop rows keep it inline next to it. */}
+        <Box
+          paddingLeft={isMobile ? undefined : 'SP2'}
+          direction={isMobile ? 'vertical' : 'horizontal'}
+          verticalAlign={isMobile ? undefined : 'middle'}
+          gap="SP1"
+        >
+          <Text
+            dataHook={`setup-step-title-${step.id}`}
+            size="small"
+            weight={isFocused ? 'bold' : 'thin'}
+          >
+            {step.title}
+          </Text>
+          {anyInProgress &&
+            !allCompleted &&
+            (isMobile ? (
+              <Text
+                size="tiny"
+                weight="normal"
+                className={st(classes.inProgressLabel)}
+              >
+                {t('cairo.setupWidget.step.inProgress')}
+              </Text>
+            ) : (
+              <Box marginTop="2px">
+                <Badge size="tiny" skin="urgent" type="transparent">
+                  {t('cairo.setupWidget.step.inProgress')}
+                </Badge>
+              </Box>
+            ))}
+        </Box>
+      </Box>
+      <Box verticalAlign="middle" gap="SP1">
+        <Tag
+          id={`setup-step-counter-${step.id}`}
+          skin="neutral"
+          removable={false}
+          size="small"
+        >
+          {t('cairo.setupWidget.aggregated.counter', { completed, total })}
+        </Tag>
+        <Box dataHook={`setup-step-chevron-${step.id}`}>
+          <Chevron width="20" height="20" />
+        </Box>
+      </Box>
+    </Box>
+  );
+
   const header = (
     <div
       role="button"
@@ -56,75 +125,15 @@ export const SetupStepGroup = ({
       }}
       style={{ cursor: 'pointer' }}
     >
-      <Box
-        align="space-between"
-        verticalAlign="middle"
-        width="100%"
-        minHeight="30px"
-      >
-        <Box
-          minHeight="24px"
-          verticalAlign="middle"
-          gap={isMobile ? 'SP1' : undefined}
-        >
-          {isMobile ? (
-            <Box className={st(classes.stepIcon)}>
-              <SetupStepIcon
-                status={allCompleted ? 'completed' : 'upcoming'}
-                marginTop="0px"
-              />
-            </Box>
-          ) : (
-            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
-          )}
-          {/* Mobile cards stack the badge under the title (matches
-              SetupStepCard); desktop rows keep it inline next to it. */}
-          <Box
-            paddingLeft={isMobile ? undefined : 'SP2'}
-            direction={isMobile ? 'vertical' : 'horizontal'}
-            verticalAlign={isMobile ? undefined : 'middle'}
-            gap="SP1"
-          >
-            <Text
-              dataHook={`setup-step-title-${step.id}`}
-              size="small"
-              weight={isFocused ? 'bold' : 'thin'}
-            >
-              {step.title}
-            </Text>
-            {anyInProgress &&
-              !allCompleted &&
-              (isMobile ? (
-                <Text
-                  size="tiny"
-                  weight="normal"
-                  className={st(classes.inProgressLabel)}
-                >
-                  {t('cairo.setupWidget.step.inProgress')}
-                </Text>
-              ) : (
-                <Box marginTop="2px">
-                  <Badge size="tiny" skin="urgent" type="transparent">
-                    {t('cairo.setupWidget.step.inProgress')}
-                  </Badge>
-                </Box>
-              ))}
-          </Box>
-        </Box>
-        <Box verticalAlign="middle" gap="SP1">
-          <Tag
-            id={`setup-step-counter-${step.id}`}
-            skin="neutral"
-            removable={false}
-            size="small"
-          >
-            {t('cairo.setupWidget.aggregated.counter', { completed, total })}
-          </Tag>
-          <Box dataHook={`setup-step-chevron-${step.id}`}>
-            <Chevron width="20" height="20" />
+      {isMobile ? (
+        headerContent
+      ) : (
+        <ClickableCard skin="outline" hasPadding={false}>
+          <Box direction="vertical" padding="6px">
+            {headerContent}
           </Box>
-        </Box>
-      </Box>
+        </ClickableCard>
+      )}
     </div>
   );
 

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import { Box } from '@wix/design-system';
-import {
-  ConfirmSmall,
-  CircleSmallFilledSmall,
-} from '@wix/wix-ui-icons-common/lazy';
+import { ConfirmSmall, DotSmall } from '@wix/wix-ui-icons-common/lazy';
 import { SetupWidgetStepStatus } from '@wix/bex-core';
 
 /**
@@ -12,30 +8,23 @@ import { SetupWidgetStepStatus } from '@wix/bex-core';
  */
 export const SetupStepIcon = ({
   status,
-  /**
-   * Top nudge that centers the 18px icon on a single line of text. Defaults to
-   * the desktop value; the mobile card centers the icon via its own wrapper and
-   * passes "0px" to drop the nudge.
-   */
-  marginTop = '3px',
 }: {
   status: SetupWidgetStepStatus;
-  marginTop?: string;
 }) => {
   if (status === 'completed') {
     return (
-      <Box marginTop={marginTop}>
-        <ConfirmSmall width="18px" height="18px" color="var(--wsr-color-G20)" />
-      </Box>
+      <ConfirmSmall
+        width="18px"
+        height="18px"
+        color="var(--wds-color-fill-success-primary, var(--wsr-color-G20, #51B77B))"
+      />
     );
   }
 
   const color =
-    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
+    status === 'disabled'
+      ? 'var(--wds-color-fill-standard-primary-disabled, var(--wsr-color-D40, #868AA5))'
+      : 'var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF))';
 
-  return (
-    <Box marginTop={marginTop}>
-      <CircleSmallFilledSmall width="18px" height="18px" color={color} />
-    </Box>
-  );
+  return <DotSmall width="18px" height="18px" color={color} />;
 };

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -7,6 +7,7 @@ import {
   Badge,
   Divider,
   Tooltip,
+  ClickableCard,
 } from '@wix/design-system';
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -22,6 +23,8 @@ export interface SetupStepRowProps {
   onActivate: () => void;
   /** Supplies the inline-expansion content (render prop on the widget). */
   renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
+  /** Tints the row's background when it's focused (off under the Harmony theme, see `useBmHarmonyTheme`). */
+  focusedBackground?: boolean;
 }
 
 /**
@@ -29,8 +32,8 @@ export interface SetupStepRowProps {
  * - completed → green check, struck-through title, optional completed CTA
  * - disabled → muted bullet + disabled CTA (permission-denied)
  * - in-progress → "In progress" badge next to the title
- * - focused → blue surface, bold title, primary CTA
- * - hoverable rows tint blue on hover (handled in Stylable)
+ * - focused → bolder border, bold title, primary CTA (+ background tint if
+ *   `focusedBackground` is on)
  */
 export const SetupStepRow = ({
   step,
@@ -38,6 +41,7 @@ export const SetupStepRow = ({
   expanded,
   onActivate,
   renderStepContent,
+  focusedBackground,
 }: SetupStepRowProps) => {
   const { translate: t } = useWixPatternsContainer();
 
@@ -50,7 +54,6 @@ export const SetupStepRow = ({
   // Completed steps stay actionable when they carry a completed CTA (G2).
   const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
   const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
-  const hoverable = !isFocused && !isCompleted && !isDisabled;
 
   const handleClick = clickable ? onActivate : undefined;
 
@@ -60,8 +63,7 @@ export const SetupStepRow = ({
       data-focused={isFocused}
       className={st(classes.row, {
         focused: isFocused,
-        hoverable,
-        clickable,
+        withBackground: !!focusedBackground,
       })}
       onClick={handleClick}
       onKeyDown={
@@ -77,121 +79,127 @@ export const SetupStepRow = ({
       role={clickable ? 'button' : undefined}
       tabIndex={clickable ? 0 : undefined}
     >
-      {/* Reserve the CTA button's height (small button = 30px) so rows keep a
-          stable height whether or not they render a CTA — otherwise completed
-          rows (which drop the CTA) would shrink and the widget would reflow. */}
-      <Box
-        align="space-between"
-        verticalAlign="middle"
-        width="100%"
-        minHeight="30px"
-      >
-        <Box minHeight="24px" verticalAlign="middle">
-          <SetupStepIcon status={step.status} />
+      <ClickableCard skin="outline" hasPadding={false} disabled={isDisabled}>
+        <Box direction="vertical" padding="6px">
+          {/* Reserve the CTA button's height (small button = 30px) so rows keep a
+              stable height whether or not they render a CTA — otherwise completed
+              rows (which drop the CTA) would shrink and the widget would reflow. */}
           <Box
-            paddingLeft="SP2"
-            paddingRight="SP2"
+            align="space-between"
             verticalAlign="middle"
-            gap="SP1"
+            width="100%"
+            minHeight="30px"
           >
-            <Text
-              dataHook={`setup-step-title-${step.id}`}
-              size="small"
-              skin={isDisabled ? 'disabled' : 'standard'}
-              weight={isFocused ? 'bold' : 'thin'}
-              secondary={isCompleted}
-              light={isCompleted}
-            >
-              {isCompleted ? <del>{step.title}</del> : step.title}
-            </Text>
-            {isInProgress && !isInlineExpanded && (
-              <Box marginTop="2px">
-                <Badge size="tiny" skin="urgent" type="transparent">
-                  {t('cairo.setupWidget.step.inProgress')}
-                </Badge>
+            <Box minHeight="24px" verticalAlign="middle">
+              <SetupStepIcon status={step.status} />
+              <Box
+                paddingLeft="SP2"
+                paddingRight="SP2"
+                verticalAlign="middle"
+                gap="SP1"
+              >
+                <Text
+                  dataHook={`setup-step-title-${step.id}`}
+                  size="small"
+                  skin={isDisabled ? 'disabled' : 'standard'}
+                  weight={isFocused ? 'bold' : 'thin'}
+                  secondary={isCompleted}
+                  light={isCompleted}
+                >
+                  {isCompleted ? <del>{step.title}</del> : step.title}
+                </Text>
+                {isInProgress && !isInlineExpanded && (
+                  <Box marginTop="2px">
+                    <Badge size="tiny" skin="urgent" type="transparent">
+                      {t('cairo.setupWidget.step.inProgress')}
+                    </Badge>
+                  </Box>
+                )}
               </Box>
-            )}
-          </Box>
-        </Box>
-        {showCta &&
-          (() => {
-            const ctaNode = (
-              <Box verticalAlign="middle">
-                <Button
+            </Box>
+            {showCta &&
+              (() => {
+                const ctaNode = (
+                  <Box verticalAlign="middle">
+                    <Button
+                      dataHook={`setup-step-cta-${step.id}`}
+                      size="small"
+                      priority={
+                        !isDisabled && !isFocused ? 'secondary' : 'primary'
+                      }
+                      disabled={isDisabled}
+                      ellipsis={false}
+                      onClick={(event: React.MouseEvent) => {
+                        event.stopPropagation();
+                        onActivate();
+                      }}
+                    >
+                      {step.ctaLabel}
+                    </Button>
+                  </Box>
+                );
+
+                // Disabled steps explain why the CTA is disabled (G5).
+                return isDisabled ? (
+                  <Tooltip
+                    dataHook={`setup-step-disabled-tooltip-${step.id}`}
+                    content={
+                      step.disabledTooltip ??
+                      // Translation-key id stays `lockedTooltip` until the
+                      // Translation Center key is renamed (TC follow-up to T2).
+                      t('cairo.setupWidget.step.lockedTooltip')
+                    }
+                  >
+                    {ctaNode}
+                  </Tooltip>
+                ) : (
+                  ctaNode
+                );
+              })()}
+            {showCompletedCta && (
+              <Box
+                verticalAlign="middle"
+                marginRight="SP2"
+                className={st(classes.completedCta)}
+              >
+                <TextButton
                   dataHook={`setup-step-cta-${step.id}`}
                   size="small"
-                  priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}
-                  disabled={isDisabled}
-                  ellipsis={false}
                   onClick={(event: React.MouseEvent) => {
                     event.stopPropagation();
                     onActivate();
                   }}
                 >
-                  {step.ctaLabel}
-                </Button>
+                  {step.completedCtaLabel}
+                </TextButton>
               </Box>
-            );
-
-            // Disabled steps explain why the CTA is disabled (G5).
-            return isDisabled ? (
-              <Tooltip
-                dataHook={`setup-step-disabled-tooltip-${step.id}`}
-                content={
-                  step.disabledTooltip ??
-                  // Translation-key id stays `lockedTooltip` until the
-                  // Translation Center key is renamed (TC follow-up to T2).
-                  t('cairo.setupWidget.step.lockedTooltip')
-                }
-              >
-                {ctaNode}
-              </Tooltip>
-            ) : (
-              ctaNode
-            );
-          })()}
-        {showCompletedCta && (
-          <Box
-            verticalAlign="middle"
-            marginRight="SP2"
-            className={st(classes.completedCta)}
-          >
-            <TextButton
-              dataHook={`setup-step-cta-${step.id}`}
-              size="small"
-              onClick={(event: React.MouseEvent) => {
-                event.stopPropagation();
-                onActivate();
-              }}
-            >
-              {step.completedCtaLabel}
-            </TextButton>
-          </Box>
-        )}
-      </Box>
-      {isInlineExpanded && (
-        <Box
-          dataHook={`setup-step-content-${step.id}`}
-          direction="vertical"
-          paddingLeft="SP5"
-          paddingRight="SP1"
-          paddingBottom="SP1"
-          marginTop="SP2"
-        >
-          <Box marginBottom="SP2">
-            <Divider />
+            )}
           </Box>
-          {/* Stop clicks/keys inside the consumer widget from bubbling to the
-              row's toggle handler — otherwise interacting with the content
-              (e.g. an input) would collapse the card. */}
-          <div
-            onClick={(event) => event.stopPropagation()}
-            onKeyDown={(event) => event.stopPropagation()}
-          >
-            {renderStepContent?.(step)}
-          </div>
+          {isInlineExpanded && (
+            <Box
+              dataHook={`setup-step-content-${step.id}`}
+              direction="vertical"
+              paddingLeft="SP5"
+              paddingRight="SP1"
+              paddingBottom="SP1"
+              marginTop="SP2"
+            >
+              <Box marginBottom="SP2">
+                <Divider />
+              </Box>
+              {/* Stop clicks/keys inside the consumer widget from bubbling to the
+                  row's toggle handler — otherwise interacting with the content
+                  (e.g. an input) would collapse the card. */}
+              <div
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => event.stopPropagation()}
+              >
+                {renderStepContent?.(step)}
+              </div>
+            </Box>
+          )}
         </Box>
-      )}
+      </ClickableCard>
     </div>
   );
 };

package/src/components/SetupWidget/SetupWidget.st.css

@@ -1,12 +1,8 @@
 @property st-global(--wds-color-border-dark-secondary);
-@property st-global(--wds-color-border-standard-primary);
-@property st-global(--wds-color-border-standard-secondary);
 @property st-global(--wds-color-fill-standard-tertiary);
 @property st-global(--wds-color-fill-standard-tertiary-hover);
 @property st-global(--wsr-color-D60);
 @property st-global(--wsr-color-D80);
-@property st-global(--wsr-color-B30);
-@property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-B60);
 @property st-global(--wds-color-text-standard-primary);
 @property st-global(--wds-color-text-disabled);
@@ -14,48 +10,43 @@
 @property st-global(--wsr-color-D10);
 @property st-global(--wsr-color-D10-30);
 @property st-global(--wsr-color-O10);
-@property st-global(--wds-space-100);
-@property st-global(--wds-border-radius-200);
 @property st-global(--wds-border-radius-400);
+@property st-global(--wds-clickable-card-outline-border-color);
+@property st-global(--wds-color-border-standard-primary-active);
+@property st-global(--wsr-color-B10);
+@property st-global(--wds-color-fill-surface-default);
 
 .root {}
 
 /* ---------------------------------------------------------------------------
- * Desktop step row — bordered card with hover/focus tinting. Hover only
- * applies to rows that are actually interactive (not focused / completed /
- * locked), gated by the `hoverable` state.
- *
- * Every var() carries the WDS fallback chain — semantic --wds token →
- * legacy --wsr token → hard-coded value — so the widget renders correctly
- * even when no theme stylesheet is loaded (same chains WDS ships itself).
+ * Desktop step row — border/background come from the nested WDS
+ * <ClickableCard skin="outline"> (SetupStepRow.tsx / SetupStepGroup.tsx); this
+ * class only handles this row's own layout and the focused-row border/
+ * background, which ClickableCard has no className/style prop to override
+ * directly. --wds-clickable-card-outline-border-color and --wds-color-fill-
+ * surface-default are the custom properties ClickableCard's own outline skin
+ * reads internally for border and background respectively — setting them
+ * here cascades down into it despite ClickableCard exposing no styling hook
+ * on its visible root element. The background tint (the `withBackground`
+ * state) is on unless the Harmony theme is active (`useBmHarmonyTheme`,
+ * SetupWidget.tsx) — it isn't part of the outline skin itself.
  * ------------------------------------------------------------------------- */
 .row {
-  -st-states: focused, hoverable, clickable;
+  -st-states: focused, withBackground;
 
   display: flex;
   flex-direction: column;
-  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
-   * inner gaps for a consistent 6px rhythm */
-  padding: var(--wds-space-100, 6px);
-  border-radius: var(--wds-border-radius-200, 4px);
-  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
-  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
   /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
   overflow: clip;
+  --wds-clickable-card-outline-border-color: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
 }
 
-.row:clickable {
-  cursor: pointer;
-}
-
-.row:hoverable:hover {
-  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
-  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
+.row:focused {
+  --wds-clickable-card-outline-border-color: var(--wds-color-border-standard-primary-active, var(--wsr-color-B10, #116DFF));
 }
 
-.row:focused {
-  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
-  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
+.row:focused:withBackground {
+  --wds-color-fill-surface-default: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
 }
 
 /* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the