@wix/patterns 1.483.0 → 1.485.0

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3700267363";
+var _namespace_ = "Edit3800964958";
 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":"Edit3700267363__root","wrapper":"Edit3700267363__wrapper","overlay":"Edit3700267363__overlay"};
+export var classes = {"root":"Edit3800964958__root","wrapper":"Edit3800964958__wrapper","overlay":"Edit3800964958__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit666191133";
+var _namespace_ = "Edit2433271717";
 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":"Edit666191133__root","urlInput":"Edit666191133__urlInput"};
+export var classes = {"root":"Edit2433271717__root","urlInput":"Edit2433271717__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3273447384";
+var _namespace_ = "View2533571859";
 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":"View3273447384__root","textView":"View3273447384__textView","urlText":"View3273447384__urlText","suffix":"View3273447384__suffix"};
+export var classes = {"root":"View2533571859__root","textView":"View2533571859__textView","urlText":"View2533571859__urlText","suffix":"View2533571859__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/video/View.tsx

@@ -4,4 +4,4 @@ import type { CellViewProps } from '../../types';
 
 export const VideoView: React.FC<CellViewProps<string | null>> = ({
   value,
-}) => <FieldsImageView value={value} dataHook="video-view" />;
+}) => <FieldsImageView value={value} size={24} dataHook="video-view" />;

package/src/components/EmptyState/EmptyStateBase.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EmptyStateBase1424824079";
+var _namespace_ = "EmptyStateBase3394748271";
 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":"EmptyStateBase1424824079__root"};
+export var classes = {"root":"EmptyStateBase3394748271__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain2844113434";
+var _namespace_ = "EntityPagePlain14992123";
 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":"EntityPagePlain2844113434__root"};
+export var classes = {"root":"EntityPagePlain14992123__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3152122153";
+var _namespace_ = "Fade3640649627";
 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":"Fade3152122153__root"};
+export var classes = {"root":"Fade3640649627__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3764728993";
+var _namespace_ = "Heading1270530519";
 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":"Heading3764728993__root"};
+export var classes = {"root":"Heading1270530519__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2811416321";
+var _namespace_ = "ImportStepUpload4053124684";
 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":"ImportStepUpload2811416321__root","fileUpload":"ImportStepUpload2811416321__fileUpload"};
+export var classes = {"root":"ImportStepUpload4053124684__root","fileUpload":"ImportStepUpload4053124684__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow330524540";
+var _namespace_ = "InputOverflow3610674691";
 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":"InputOverflow330524540__root"};
+export var classes = {"root":"InputOverflow3610674691__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow1444698213";
+var _namespace_ = "LoadingRow1898531373";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow1444698213__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow1444698213__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1898531373__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1898531373__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText3443443614";
+var _namespace_ = "MaxHeightText1760830243";
 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":"MaxHeightText3443443614__root"};
+export var classes = {"root":"MaxHeightText1760830243__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines1289721197";
+var _namespace_ = "MaxLines2562303568";
 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":"MaxLines1289721197__root"};
+export var classes = {"root":"MaxLines2562303568__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar4156239102";
+var _namespace_ = "MultiBulkActionToolbar368203814";
 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":"MultiBulkActionToolbar4156239102__root","leftGroupWrapper":"MultiBulkActionToolbar4156239102__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4156239102__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4156239102__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar368203814__root","leftGroupWrapper":"MultiBulkActionToolbar368203814__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar368203814__selectedCountItem","selectedCountText":"MultiBulkActionToolbar368203814__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTablePlaceholderStatesRow1382563741";
+var _namespace_ = "NestedTablePlaceholderStatesRow1768998665";
 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":"NestedTablePlaceholderStatesRow1382563741__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1768998665__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow1404199394";
+var _namespace_ = "NestedTableRow1321463423";
 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":"NestedTableRow1404199394__root","firstLevel":"NestedTableRow1404199394__firstLevel","placeholder":"NestedTableRow1404199394__placeholder","parentHovered":"NestedTableRow1404199394__parentHovered"};
+export var classes = {"root":"NestedTableRow1321463423__root","firstLevel":"NestedTableRow1321463423__firstLevel","placeholder":"NestedTableRow1321463423__placeholder","parentHovered":"NestedTableRow1321463423__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -138,7 +138,6 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
       search={search === true ? <QuerySearch state={query.search} /> : search}
       {...rest}
       skin={isBmHarmonyTheme ? 'standard' : 'neutral'}
-      showHeaderWhenEmpty
       sticky
       tabs={tabs}
       filters={filters}

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect2831864267";
+var _namespace_ = "MultipleDragOverlayEffect2351759474";
 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":"MultipleDragOverlayEffect2831864267__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2351759474__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableDragAndDropRow3098986765";
+var _namespace_ = "NestedTableDragAndDropRow1858967673";
 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":"NestedTableDragAndDropRow3098986765__root"};
+export var classes = {"root":"NestedTableDragAndDropRow1858967673__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContent1580868744";
+var _namespace_ = "PickerContent1724579148";
 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":"PickerContent1580868744__root"};
+export var classes = {"root":"PickerContent1724579148__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1745221286";
+var _namespace_ = "PickerContentAdditionalStep1091980942";
 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":"PickerContentAdditionalStep1745221286__root","titles":"PickerContentAdditionalStep1745221286__titles","suffix":"PickerContentAdditionalStep1745221286__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep1091980942__root","titles":"PickerContentAdditionalStep1091980942__titles","suffix":"PickerContentAdditionalStep1091980942__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_ = "PickerTableListItem1492639925";
+var _namespace_ = "PickerTableListItem1759769485";
 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":"PickerTableListItem1492639925__root"};
+export var classes = {"root":"PickerTableListItem1759769485__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_ = "ScrollableContent529968157";
+var _namespace_ = "ScrollableContent1762609837";
 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":"ScrollableContent529968157__root"};
+export var classes = {"root":"ScrollableContent1762609837__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget3034824754";
+var _namespace_ = "SetupWidget3681248396";
 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":"SetupWidget3034824754__root","row":"SetupWidget3034824754__row","completedCta":"SetupWidget3034824754__completedCta","secondaryCta":"SetupWidget3034824754__secondaryCta","card":"SetupWidget3034824754__card","stepIcon":"SetupWidget3034824754__stepIcon","chevron":"SetupWidget3034824754__chevron","chevronDisabled":"SetupWidget3034824754__chevronDisabled","inProgressLabel":"SetupWidget3034824754__inProgressLabel"};
+export var classes = {"root":"SetupWidget3681248396__root","row":"SetupWidget3681248396__row","completedCta":"SetupWidget3681248396__completedCta","secondaryCta":"SetupWidget3681248396__secondaryCta","card":"SetupWidget3681248396__card","stepIcon":"SetupWidget3681248396__stepIcon","chevron":"SetupWidget3681248396__chevron","chevronDisabled":"SetupWidget3681248396__chevronDisabled","inProgressLabel":"SetupWidget3681248396__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.tsx

@@ -13,6 +13,15 @@ import { SetupStepGroup } from './SetupStepGroup';
 import { AllCompleteState } from './AllCompleteState';
 import { SetupWidgetSkeleton } from './SetupWidgetSkeleton';
 
+export interface SetupWidgetStepClickDetails {
+  /**
+   * Set only when the click toggled an inline step: whether the step is now
+   * expanded. Absent for steps that navigate, including inline children of an
+   * aggregated group (they never toggle).
+   */
+  expanded?: boolean;
+}
+
 export interface SetupWidgetProps {
   /**
    * A Setup widget state instance created with `useSetupWidget`. The widget
@@ -25,8 +34,15 @@ export interface SetupWidgetProps {
    * not carry it). Returned for the currently-expanded inline step.
    */
   renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
-  /** Fired when a `navigate` step (or its CTA) is activated. */
-  onStepClick?: (step: SetupWidgetStep) => void;
+  /**
+   * Fired when a step (or its CTA) is activated. For an inline step the widget
+   * first toggles its expansion and reports the new state in
+   * `details.expanded`; skip your navigate flow when it is set.
+   */
+  onStepClick?: (
+    step: SetupWidgetStep,
+    details: SetupWidgetStepClickDetails,
+  ) => void;
   /**
    * Fired when a *completed* step's CTA (or row) is activated — a distinct
    * action from `onStepClick` (mirrors `onCompletedCtaClick` in dashboard-setup,
@@ -54,6 +70,12 @@ export interface SetupWidgetProps {
    * not while loading, on error, or on the all-complete surface.
    */
   footer?: React.ReactNode;
+  /**
+   * Content rendered next to the widget title, separated from it by a vertical
+   * divider (e.g. a "Give feedback" row). Like `footer`, shown only with the
+   * list — not while loading, on error, or on the all-complete surface.
+   */
+  titleSuffix?: React.ReactNode;
   /**
    * Replaces the default error UI when the initial load fails. Receives a
    * `retry` callback (re-runs the load) and the thrown `error`. When omitted, a
@@ -99,6 +121,7 @@ const _SetupWidget = ({
   onStepView,
   onAllCompleteClick,
   footer,
+  titleSuffix,
   renderError,
   dataHook,
 }: SetupWidgetProps) => {
@@ -115,8 +138,9 @@ const _SetupWidget = ({
     }
     if (step.expansionMode === 'inline') {
       state._toggleStep(step.id);
+      onStepClick?.(step, { expanded: state._expandedStepId === step.id });
     } else {
-      onStepClick?.(step);
+      onStepClick?.(step, {});
     }
   };
 
@@ -126,7 +150,7 @@ const _SetupWidget = ({
     if (child.status === 'completed') {
       onCompletedStepClick?.(child);
     } else {
-      onStepClick?.(child);
+      onStepClick?.(child, {});
     }
   };
 
@@ -192,6 +216,13 @@ const _SetupWidget = ({
     );
   }
 
+  // Same rules as the footer below: `false` counts as absent, and the error
+  // card (which still renders the header) gets no suffix.
+  const hasTitleSuffix =
+    titleSuffix != null &&
+    typeof titleSuffix !== 'boolean' &&
+    status === 'success';
+
   const header = (
     <SetupWidgetHeader
       title={state._title}
@@ -199,6 +230,7 @@ const _SetupWidget = ({
       totalCount={state._totalCount}
       progressPercentage={state._progressPercentage}
       isMobile={isMobile}
+      titleSuffix={hasTitleSuffix ? titleSuffix : undefined}
     />
   );
 

package/src/components/SetupWidget/SetupWidget.uni.driver.ts

@@ -81,6 +81,9 @@ export default (base: UniDriver, body: UniDriver) => {
       base.$(`[data-hook="${dataHook}"]`).click(),
     /** Whether the consumer-supplied footer slot is rendered. */
     footerExists: () => base.$(`[data-hook="setup-widget-footer"]`).exists(),
+    /** Whether the consumer-supplied title suffix slot is rendered. */
+    titleSuffixExists: () =>
+      base.$(`[data-hook="setup-widget-title-suffix"]`).exists(),
     /** Whether the all-complete success surface is shown. */
     isAllComplete: () => base.$(`[data-hook="setup-all-complete"]`).exists(),
     /** Whether the loading skeleton is shown. */

package/src/components/SetupWidget/SetupWidgetHeader.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';
+import {
+  Box,
+  Divider,
+  Heading,
+  Text,
+  LinearProgressBar,
+} from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export interface SetupWidgetHeaderProps {
@@ -9,6 +15,11 @@ export interface SetupWidgetHeaderProps {
   totalCount: number;
   progressPercentage: number;
   isMobile: boolean;
+  /**
+   * Content shown after the title, separated from it by a vertical divider.
+   * The parent passes `undefined` when there is nothing to show.
+   */
+  titleSuffix?: React.ReactNode;
 }
 
 /**
@@ -22,6 +33,7 @@ export const SetupWidgetHeader = ({
   totalCount,
   progressPercentage,
   isMobile,
+  titleSuffix,
 }: SetupWidgetHeaderProps) => {
   const { translate: t } = useWixPatternsContainer();
   const resolvedTitle = title ?? t('cairo.setupWidget.title');
@@ -30,6 +42,20 @@ export const SetupWidgetHeader = ({
     total: totalCount,
   });
 
+  const renderTitle = (heading: React.ReactNode) =>
+    titleSuffix !== undefined ? (
+      <Box gap="SP2" verticalAlign="middle">
+        {heading}
+        {/* Per the Figma spec the 12px divider sits 2px below the row's center. */}
+        <Box height="12px" marginTop="4px">
+          <Divider direction="vertical" />
+        </Box>
+        <div data-hook="setup-widget-title-suffix">{titleSuffix}</div>
+      </Box>
+    ) : (
+      heading
+    );
+
   if (isMobile) {
     // Mobile (per Figma): the "X/Y" ratio sits inline to the left of the bar
     // (no "completed" word) to save vertical space. The ratio is just numbers,
@@ -37,9 +63,11 @@ export const SetupWidgetHeader = ({
     const ratio = `${completedCount}/${totalCount}`;
     return (
       <Box direction="vertical" gap="SP3" width="100%">
-        <Heading dataHook="setup-widget-title" size="large">
-          {resolvedTitle}
-        </Heading>
+        {renderTitle(
+          <Heading dataHook="setup-widget-title" size="large">
+            {resolvedTitle}
+          </Heading>,
+        )}
         <Box width="100%" verticalAlign="middle" gap="SP2">
           <Text dataHook="setup-widget-progress" size="small" secondary>
             {ratio}
@@ -54,9 +82,11 @@ export const SetupWidgetHeader = ({
 
   return (
     <Box align="space-between" verticalAlign="middle" marginBottom="SP4">
-      <Heading dataHook="setup-widget-title" size="medium">
-        {resolvedTitle}
-      </Heading>
+      {renderTitle(
+        <Heading dataHook="setup-widget-title" size="medium">
+          {resolvedTitle}
+        </Heading>,
+      )}
       <Box gap="SP1" verticalAlign="middle">
         <Text dataHook="setup-widget-progress" size="tiny" weight="thin">
           {ratioLabel}

package/src/components/SetupWidget/index.ts

@@ -1,5 +1,8 @@
 export { SetupWidget } from './SetupWidget';
-export type { SetupWidgetProps } from './SetupWidget';
+export type {
+  SetupWidgetProps,
+  SetupWidgetStepClickDetails,
+} from './SetupWidget';
 export type {
   SetupWidgetState,
   SetupWidgetData,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3144116235";
+var _namespace_ = "SkeletonCard3243548643";
 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":"SkeletonCard3144116235__root","headerLoading":"SkeletonCard3144116235__headerLoading"};
+export var classes = {"root":"SkeletonCard3243548643__root","headerLoading":"SkeletonCard3243548643__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};