@wix/patterns 1.416.0 → 1.418.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade1719716815";
+var _namespace_ = "Fade158248200";
 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":"Fade1719716815__root"};
+export var classes = {"root":"Fade158248200__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_ = "Heading694489876";
+var _namespace_ = "Heading3044927820";
 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":"Heading694489876__root"};
+export var classes = {"root":"Heading3044927820__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/CAIRO-4118-tasks.md

@@ -24,17 +24,17 @@ This tracker turns the ticket's task spec into individually-trackable items. All
 
 | # | Case | Desired behavior | Status | Resolution / Notes |
 |---|---|---|---|---|
-| 2.1 | Duplicate field mapping | Once a collection field is selected in one dropdown, **disable** it (visible but unselectable) in all other dropdowns | open | — |
-| 2.2 | Zero data rows | Show an **inline warning notice** inside step 2 (non-blocking) — user can still proceed or go back. [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=72-39072) | open | — |
+| 2.1 | Duplicate field mapping | Once a collection field is selected in one dropdown, **disable** it (visible but unselectable) in all other dropdowns | done | Shipped in PR #5130 (`feat(Import): disable already selected fields`). `ImportState.selectedFieldIds` (computed `Set` of mapped field ids) drives the per-dropdown `disabled` flag in `ImportStepConfiguration.tsx`: an option is disabled when `selectedFieldIds.has(option.id)` **and** it isn't the current header's own selection (so the field stays selectable in its own dropdown). Tests: *"disables already-selected fields in other dropdowns"*, *"does not disable a field in its own dropdown"* in `Table.importButton.spec.tsx` (both passing). |
+| 2.2 | Zero data rows | Show an **inline warning notice** inside step 2 (non-blocking) — user can still proceed or go back. [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=72-39072) | done | Inline `SectionHelper` (skin `warning`, hook `import-no-rows-warning`) in `ImportStepConfiguration.tsx` with keys `cairo.import.noRowsWarningTitle` / `noRowsWarningDescription`. Trigger broadened from `csvRows.length === 0` to the new `ImportState.hasNoMappedData` computed — true when there are mappings but **no mapped column holds data in any row** (matching the design copy "no data was found inside the mapped columns"); it reacts to mapping changes and stays false when nothing is mapped yet (that case is covered by the disabled Import button + `noMappingsTooltip`). Non-blocking: Import stays enabled whenever `hasMappings` is true. Tests in `Table.importButton.spec.tsx`: *"...shows warning for CSV with headers but no rows"*, *"shows the warning when rows exist but the mapped columns are empty"*, *"does not show the warning when a mapped column has data"*. Keys already registered in the Translation Center. |
 | 2.3 | Mismatch between CSV data and chosen field | Dropdown enters **error state** with a status message | open | — |
 
 ## Step 3 — Progress: Full Import Failures
 
 | # | Failure | Desired behavior | Status | Resolution / Notes |
 |---|---|---|---|---|
-| 3.1 | Backup fails (pre-upload backup throws) | Put modal into **error state**; replace progress label with error message; footer CTA → **"Try again"** (re-runs import). [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=145-12691) | open | — |
-| 3.2 | Full batch failure (network/server error on first batch) | Modal in **error state** with message and **try again** action | open | — |
-| 3.3 | Partial success (some batches succeed, then one throws) | Close modal; show toast with how many failed / succeeded + action to **download the CSV** | open | — |
+| 3.1 | Backup fails (pre-upload backup throws) | Put modal into **error state**; replace progress label with error message; footer CTA → **"Try again"** (re-runs import). [Design](https://www.figma.com/design/RpB9iQ6a43xcvKiovmJaA1/Import?node-id=145-12691) | done | When `_runBackup` rejects, `ImportState.importStatus` goes to `queryStatus.error` (existing). The progress step now renders the error state: `ImportStepProgress.tsx` replaces the `import-progress-label` with an `import-error-message` Text and sets `error` on the `LinearProgressBar` whenever `importStatus.isError` (message = `errorHandler.getResolvedError(...)?.message ?? cairo.import.genericError`). The progress-step footer in `getImportModalStepProps.tsx` swaps the disabled **Importing** primary button for an enabled **Try again** (`cairo.import.tryAgain`, re-runs `state.startImport`) and changes the title to `cairo.import.failedTitle` when `importStatus.isError`. `startImport` now resets `importStatus` → `idle` and `result` → zero at the start of each attempt so a retry begins from a clean slate. Tests in `Table.importButton.spec.tsx`: *"puts the modal into error state and replaces the progress label with an error message when backup fails"*, *"re-runs the import when the 'Try again' CTA is clicked after a backup failure"*. All keys (`tryAgain`, `genericError`, `failedTitle`) already registered in the Translation Center. |
+| 3.2 | Full batch failure (network/server error on first batch) | Modal in **error state** with message and **try again** action | done | `ImportState._uploadBatches` now distinguishes a *thrown* batch error before anything was imported (`result.succeeded === 0`) from a partial failure: in that case it re-throws so `startImport`'s catch sets `importStatus` → `queryStatus.error`. This reuses the same error-state UI shipped for 3.1 (error message replacing the progress label, error `LinearProgressBar`, `cairo.import.failedTitle`, enabled **Try again** primary button re-running `startImport`). A thrown error *after* some batches succeeded keeps the existing partial-success inline message (that path becomes the 3.3 toast later). Tests in `Table.importButton.spec.tsx`: *"puts the modal into error state with a 'Try again' CTA when the first batch fails"* and *"re-runs the import when 'Try again' is clicked after a full batch failure"*. |
+| 3.3 | Partial success — some rows don't make it in, whether a batch *returns* row `errors` or *throws* after some succeeded | Close modal; show toast with how many failed / succeeded + action to **download the CSV** | done | `ImportState._uploadBatches` accumulates a single `_failedRowIndices` (global indices into `csvRows`) across the whole run: (a) rows the server rejects inside an OK response are read from each batch's returned `errors[].rowIndex`, offset by the batch's start index; (b) when a batch *throws* after at least one OK response, every row from the throwing batch onward (the throwing batch + all un-attempted batches) is added on top of any already-rejected rows. If *no* OK response arrived before a throw, it re-throws → full batch failure (3.2). `startImport`'s success branch closes the modal, refreshes the collection, and — whenever `_failedRowIndices` is non-empty — fires a `WARNING` toast: message `cairo.import.partialSuccessToast` ("{failed} rows failed, {imported} rows imported", `failed = _failedRowIndices.length`, `imported = totalCount - failed`) with a `cairo.import.downloadFailedRows` ("Download failed rows") action. The action serializes `csvHeaders` + the failed rows via the `unparseCsv` helper (`parseCsv.ts`, `Papa.unparse`) and downloads through the `downloadCsv` prop, wired in `useImport.ts` from `container.window.download` as a `data:text/csv` URI (filename `failed-<original>`). `BulkUploadResults` was **not** changed — failed-row tracking lives entirely in `ImportState` (it owns `csvRows` + batching). The previous behavior, where a returned-`errors` batch left the modal open on an inline partial-success message, was the bug fixed here. Tests in `Table.importButton.spec.tsx`: throw path — *"closes the modal and shows a toast when a batch fails after some succeed"*, *"downloads only the failed rows when the toast download action is clicked"*; returned-errors path — *"closes the modal and shows a toast when a batch returns row errors"*, *"downloads the rejected rows when a batch returns row errors"*. New keys `partialSuccessToast` / `downloadFailedRows` must be registered in the Translation Center (core `messages_en.json` + generated `translations.ts` are gitignored). |
 
 ## Status summary
 
@@ -45,9 +45,9 @@ This tracker turns the ticket's task spec into individually-trackable items. All
 | 1.2 | Malformed CSV | done |
 | 1.3 | Non-UTF-8 encoding | done |
 | 1.4 | File too large | dismiss (deferred) |
-| 2.1 | Duplicate field mapping | open |
-| 2.2 | Zero data rows | open |
+| 2.1 | Duplicate field mapping | done |
+| 2.2 | Zero data rows | done |
 | 2.3 | Field/data mismatch | open |
-| 3.1 | Backup fails | open |
-| 3.2 | Full batch failure | open |
-| 3.3 | Partial success | open |
+| 3.1 | Backup fails | done |
+| 3.2 | Full batch failure | done |
+| 3.3 | Partial success | done |

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -78,11 +78,6 @@ export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
     getProgressLabel: () => progressLabelBase().text(),
     progressLabelExists: () => progressLabelBase().exists(),
 
-    getPartialErrorText: () =>
-      modalLayoutBase().$('[data-hook="import-partial-error"]').text(),
-    partialErrorExists: () =>
-      modalLayoutBase().$('[data-hook="import-partial-error"]').exists(),
-
     getErrorMessageText: () =>
       modalLayoutBase().$('[data-hook="import-error-message"]').text(),
     errorMessageExists: () =>

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -37,7 +37,7 @@ function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
 
   const { selectedFieldIds } = state;
 
-  const hasNoRows = state.csvRows.length === 0;
+  const hasNoRows = state.hasNoMappedData;
 
   return (
     <Box direction="vertical" dataHook="import-mapping-step" gap="SP3">

package/src/components/ImportButton/ImportStepProgress.tsx

@@ -12,7 +12,6 @@ function _ImportStepProgress({ state }: ImportStepProgressProps) {
     processedCount,
     totalCount,
     isBackingUp,
-    result,
     translate: t,
     importStatus,
     errorHandler,
@@ -22,14 +21,13 @@ function _ImportStepProgress({ state }: ImportStepProgressProps) {
       ? Math.min(100, Math.round((processedCount / totalCount) * 100))
       : 0;
 
-  const hasFailures = result != null && result.failed > 0;
-
   const errorMessage = useMemo(
     () =>
-      importStatus.error
-        ? errorHandler.getResolvedError?.(importStatus.error)?.message
+      importStatus.isError
+        ? errorHandler.getResolvedError?.(importStatus.error)?.message ??
+          t('cairo.import.genericError')
         : null,
-    [importStatus.error, errorHandler],
+    [importStatus.isError, importStatus.error, errorHandler, t],
   );
 
   return (
@@ -37,28 +35,22 @@ function _ImportStepProgress({ state }: ImportStepProgressProps) {
       <LinearProgressBar
         value={progress}
         showProgressIndication
+        error={!!errorMessage}
         dataHook="import-progress-bar"
       />
-      <Text size="small" dataHook="import-progress-label">
-        {isBackingUp && !errorMessage
-          ? t('cairo.import.backupDescription')
-          : t('cairo.import.progressLabel', {
-              processed: processedCount,
-              total: totalCount,
-            })}
-      </Text>
-      {hasFailures && (
-        <Text size="small" skin="error" dataHook="import-partial-error">
-          {t('cairo.import.partialSuccess', {
-            succeeded: result.succeeded,
-            failed: result.failed,
-          })}
-        </Text>
-      )}
-      {errorMessage && (
+      {errorMessage ? (
         <Text size="small" skin="error" dataHook="import-error-message">
           {errorMessage}
         </Text>
+      ) : (
+        <Text size="small" dataHook="import-progress-label">
+          {isBackingUp
+            ? t('cairo.import.backupDescription')
+            : t('cairo.import.progressLabel', {
+                processed: processedCount,
+                total: totalCount,
+              })}
+        </Text>
       )}
     </Box>
   );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload202689484";
+var _namespace_ = "ImportStepUpload3769880250";
 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":"ImportStepUpload202689484__root","fileUpload":"ImportStepUpload202689484__fileUpload"};
+export var classes = {"root":"ImportStepUpload3769880250__root","fileUpload":"ImportStepUpload3769880250__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -98,12 +98,19 @@ export function getImportModalStepProps({
     };
   }
 
+  const hasError = state.importStatus.isError;
+
   return {
-    title: t('cairo.import.progressTitle'),
+    title: hasError
+      ? t('cairo.import.failedTitle')
+      : t('cairo.import.progressTitle'),
     children: <ImportStepProgress state={state} />,
     showFooterDivider: false,
-    primaryButtonText: t('cairo.import.importing'),
-    primaryButtonProps: { disabled: true },
+    primaryButtonText: hasError
+      ? t('cairo.import.tryAgain')
+      : t('cairo.import.importing'),
+    primaryButtonOnClick: hasError ? state.startImport : undefined,
+    primaryButtonProps: { disabled: !hasError },
     secondaryButtonText: state.isRestoring
       ? t('cairo.import.restoring')
       : t('cairo.import.cancel'),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow1883835792";
+var _namespace_ = "InputOverflow2588486216";
 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":"InputOverflow1883835792__root"};
+export var classes = {"root":"InputOverflow2588486216__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_ = "LoadingRow324005189";
+var _namespace_ = "LoadingRow3117772883";
 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":"LoadingRow324005189__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow324005189__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3117772883__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3117772883__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_ = "MaxHeightText3575013893";
+var _namespace_ = "MaxHeightText2494588816";
 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":"MaxHeightText3575013893__root"};
+export var classes = {"root":"MaxHeightText2494588816__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_ = "MaxLines4217852426";
+var _namespace_ = "MaxLines4204134146";
 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":"MaxLines4217852426__root"};
+export var classes = {"root":"MaxLines4204134146__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_ = "MultiBulkActionToolbar3046762011";
+var _namespace_ = "MultiBulkActionToolbar1733349817";
 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":"MultiBulkActionToolbar3046762011__root","leftGroupWrapper":"MultiBulkActionToolbar3046762011__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3046762011__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3046762011__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar1733349817__root","leftGroupWrapper":"MultiBulkActionToolbar1733349817__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1733349817__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1733349817__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_ = "NestedTablePlaceholderStatesRow432314108";
+var _namespace_ = "NestedTablePlaceholderStatesRow2447244534";
 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":"NestedTablePlaceholderStatesRow432314108__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow2447244534__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_ = "NestedTableRow2823236595";
+var _namespace_ = "NestedTableRow1207904673";
 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":"NestedTableRow2823236595__root","firstLevel":"NestedTableRow2823236595__firstLevel","placeholder":"NestedTableRow2823236595__placeholder","parentHovered":"NestedTableRow2823236595__parentHovered"};
+export var classes = {"root":"NestedTableRow1207904673__root","firstLevel":"NestedTableRow1207904673__firstLevel","placeholder":"NestedTableRow1207904673__placeholder","parentHovered":"NestedTableRow1207904673__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect740434531";
+var _namespace_ = "MultipleDragOverlayEffect2863332161";
 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":"MultipleDragOverlayEffect740434531__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2863332161__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_ = "NestedTableDragAndDropRow3110001953";
+var _namespace_ = "NestedTableDragAndDropRow3711660438";
 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":"NestedTableDragAndDropRow3110001953__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3711660438__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_ = "PickerContent3941925014";
+var _namespace_ = "PickerContent3740036493";
 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":"PickerContent3941925014__root"};
+export var classes = {"root":"PickerContent3740036493__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_ = "PickerContentAdditionalStep3010223988";
+var _namespace_ = "PickerContentAdditionalStep2931410296";
 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":"PickerContentAdditionalStep3010223988__root","titles":"PickerContentAdditionalStep3010223988__titles","suffix":"PickerContentAdditionalStep3010223988__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2931410296__root","titles":"PickerContentAdditionalStep2931410296__titles","suffix":"PickerContentAdditionalStep2931410296__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_ = "PickerTableListItem1537267496";
+var _namespace_ = "PickerTableListItem2945163989";
 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":"PickerTableListItem1537267496__root"};
+export var classes = {"root":"PickerTableListItem2945163989__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_ = "ScrollableContent3722944559";
+var _namespace_ = "ScrollableContent3996425431";
 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":"ScrollableContent3722944559__root"};
+export var classes = {"root":"ScrollableContent3996425431__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_ = "SetupWidget3035762782";
+var _namespace_ = "SetupWidget755400176";
 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":"SetupWidget3035762782__root","row":"SetupWidget3035762782__row","completedCta":"SetupWidget3035762782__completedCta","card":"SetupWidget3035762782__card"};
+export var classes = {"root":"SetupWidget755400176__root","row":"SetupWidget755400176__row","completedCta":"SetupWidget755400176__completedCta","card":"SetupWidget755400176__card"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.tsx

@@ -124,11 +124,16 @@ const _SetupWidget = ({
     const onActivate = () =>
       isChild ? activateChild(step) : activateStep(step);
 
+    // A single step is focused/highlighted at a time — the expanded step when
+    // one is open, otherwise the primary. (Highlighting `primary || expanded`
+    // would mark two rows once the user opens a non-primary inline step.)
+    const isFocused = !isChild && step.id === state._focusedStepId;
+
     return isMobile ? (
       <SetupStepCard
         key={step.id}
         step={step}
-        isPrimary={!isChild && step.id === state._primaryStepId}
+        isPrimary={isFocused}
         expanded={expanded}
         onActivate={onActivate}
         renderStepContent={renderStepContent}
@@ -137,7 +142,7 @@ const _SetupWidget = ({
       <SetupStepRow
         key={step.id}
         step={step}
-        isFocused={!isChild && (step.id === state._primaryStepId || expanded)}
+        isFocused={isFocused}
         expanded={expanded}
         onActivate={onActivate}
         renderStepContent={renderStepContent}

package/src/components/SetupWidget/dashboard-setup-integration-gaps.md

@@ -128,6 +128,17 @@ Pure docs/decisions (G8) need none. Link the test/story/SLED files in **Resoluti
   `focusedStepId` + `isExtensionStep`.
 - Loading / error+retry (`TaskState` ↔ initial fetch).
 
+> ⚠️ **Focus is single — derive it, don't OR it.** Production has *one*
+> `focusedStepId` that drives both the highlight **and** which inline step is
+> expanded, so only one step is ever focused. We split that into two derived
+> values — `_primaryStepId` (recommended next ↔ `getNextStep`) and
+> `_expandedStepId` (what the user toggled open) — which is fine until they
+> **diverge** (user opens a non-primary inline step). The desktop row originally
+> highlighted `primary || expanded`, marking **two** rows focused once they
+> diverged. Fixed by deriving a single `_focusedStepId = _expandedStepId ??
+> _primaryStepId` and highlighting only that (`SetupStepRow`/`SetupStepCard`),
+> restoring production's single-focus invariant.
+
 ---
 
 ## 4. Data-model mapping (production `Step` → `SetupWidgetStep`)

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard667970716";
+var _namespace_ = "SkeletonCard4198497841";
 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":"SkeletonCard667970716__root","headerLoading":"SkeletonCard667970716__headerLoading"};
+export var classes = {"root":"SkeletonCard4198497841__root","headerLoading":"SkeletonCard4198497841__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1884220410";
+var _namespace_ = "TabsFilter2601808020";
 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":"TabsFilter1884220410__root","title":"TabsFilter1884220410__title"};
+export var classes = {"root":"TabsFilter2601808020__root","title":"TabsFilter2601808020__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2305674534";
+var _namespace_ = "ManageTagsModal3102269807";
 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":"ManageTagsModal2305674534__root"};
+export var classes = {"root":"ManageTagsModal3102269807__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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