@wix/patterns 1.443.0 → 1.445.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Heading3163261033";
+var _namespace_ = "Heading386952903";
 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":"Heading3163261033__root"};
+export var classes = {"root":"Heading386952903__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_ = "ImportStepUpload1959139342";
+var _namespace_ = "ImportStepUpload1582844632";
 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":"ImportStepUpload1959139342__root","fileUpload":"ImportStepUpload1959139342__fileUpload"};
+export var classes = {"root":"ImportStepUpload1582844632__root","fileUpload":"ImportStepUpload1582844632__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_ = "InputOverflow49811962";
+var _namespace_ = "InputOverflow212485012";
 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":"InputOverflow49811962__root"};
+export var classes = {"root":"InputOverflow212485012__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_ = "LoadingRow3671094324";
+var _namespace_ = "LoadingRow3889172829";
 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":"LoadingRow3671094324__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3671094324__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow3889172829__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow3889172829__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_ = "MaxHeightText1332223107";
+var _namespace_ = "MaxHeightText883485478";
 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":"MaxHeightText1332223107__root"};
+export var classes = {"root":"MaxHeightText883485478__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_ = "MaxLines1739550404";
+var _namespace_ = "MaxLines407219590";
 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":"MaxLines1739550404__root"};
+export var classes = {"root":"MaxLines407219590__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_ = "MultiBulkActionToolbar487792898";
+var _namespace_ = "MultiBulkActionToolbar302415624";
 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":"MultiBulkActionToolbar487792898__root","leftGroupWrapper":"MultiBulkActionToolbar487792898__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar487792898__selectedCountItem","selectedCountText":"MultiBulkActionToolbar487792898__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar302415624__root","leftGroupWrapper":"MultiBulkActionToolbar302415624__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar302415624__selectedCountItem","selectedCountText":"MultiBulkActionToolbar302415624__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_ = "NestedTablePlaceholderStatesRow3711257837";
+var _namespace_ = "NestedTablePlaceholderStatesRow1482393073";
 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":"NestedTablePlaceholderStatesRow3711257837__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow1482393073__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_ = "NestedTableRow113885260";
+var _namespace_ = "NestedTableRow397408975";
 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":"NestedTableRow113885260__root","firstLevel":"NestedTableRow113885260__firstLevel","placeholder":"NestedTableRow113885260__placeholder","parentHovered":"NestedTableRow113885260__parentHovered"};
+export var classes = {"root":"NestedTableRow397408975__root","firstLevel":"NestedTableRow397408975__firstLevel","placeholder":"NestedTableRow397408975__placeholder","parentHovered":"NestedTableRow397408975__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTableWSRTable.tsx

@@ -20,6 +20,7 @@ import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlacehold
 import { NestedTableDragAndDrop } from '../NestedTableDragAndDrop/NestedTableDragAndDrop';
 import { getVirtualTableProps } from '../Table/getVirtualTableProps';
 import { CollectionToolbarFiltersElement } from '../assertComponentType';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface NestedTableWSRTableBaseProps<
   C extends string,
@@ -52,6 +53,7 @@ export interface NestedTableWSRTableProps<
 function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
   props: NestedTableWSRTableProps<C, T, F>,
 ) {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
   const {
     state: wrapperState,
     renderError,
@@ -135,7 +137,7 @@ function _NestedTableWSRTable<C extends string, T, F extends FiltersMap>(
       rowVerticalPadding={rowVerticalPadding}
       search={search === true ? <QuerySearch state={query.search} /> : search}
       {...rest}
-      skin="neutral"
+      skin={isBmHarmonyTheme ? 'standard' : 'neutral'}
       showHeaderWhenEmpty
       sticky
       tabs={tabs}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultipleDragOverlayEffect1979270825";
+var _namespace_ = "MultipleDragOverlayEffect1122287837";
 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":"MultipleDragOverlayEffect1979270825__root"};
+export var classes = {"root":"MultipleDragOverlayEffect1122287837__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_ = "NestedTableDragAndDropRow636371559";
+var _namespace_ = "NestedTableDragAndDropRow3935211421";
 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":"NestedTableDragAndDropRow636371559__root"};
+export var classes = {"root":"NestedTableDragAndDropRow3935211421__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_ = "PickerContent2177971082";
+var _namespace_ = "PickerContent4235159373";
 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":"PickerContent2177971082__root"};
+export var classes = {"root":"PickerContent4235159373__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_ = "PickerContentAdditionalStep4105912496";
+var _namespace_ = "PickerContentAdditionalStep364555487";
 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":"PickerContentAdditionalStep4105912496__root","titles":"PickerContentAdditionalStep4105912496__titles","suffix":"PickerContentAdditionalStep4105912496__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep364555487__root","titles":"PickerContentAdditionalStep364555487__titles","suffix":"PickerContentAdditionalStep364555487__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_ = "PickerTableListItem2465022673";
+var _namespace_ = "PickerTableListItem3124724981";
 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":"PickerTableListItem2465022673__root"};
+export var classes = {"root":"PickerTableListItem3124724981__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SchemaSource/referenceCells.ts

@@ -1,5 +1,5 @@
 import { observable, runInAction } from 'mobx';
-import { sourceFetchData } from '@wix/bex-core';
+import { isReferenceField, sourceFetchData } from '@wix/bex-core';
 import type {
   Field,
   OffsetQuery,
@@ -17,7 +17,7 @@ import type {
 type RefRow = Record<string, unknown>;
 
 const referencedCollectionIdOf = (field: Field): string | undefined =>
-  field.type === 'REFERENCE' || field.type === 'MULTI_REFERENCE'
+  isReferenceField(field)
     ? field.referenceMetadata?.referencedCollectionId
     : undefined;
 
@@ -49,6 +49,8 @@ export class ReferenceCellsState<T = Record<string, unknown>> {
   private readonly _sourceState: SourceState<T>;
   /** Referenced schema per referenced collection id, once loaded. */
   private readonly _schemas = observable.map<string, Schema>();
+  /** Sources found after initial setup; schemas alone cannot fetch items. */
+  private readonly _resolvedSources = new Map<string, SchemaSource<any>>();
   /** Ids already requested. A plain Set, so reading `cellFor` from a computed
    *  mutates no observable — only the async result does, in an action. */
   private readonly _requested = new Set<string>();
@@ -93,8 +95,7 @@ export class ReferenceCellsState<T = Record<string, unknown>> {
       }>)
     | undefined {
     const collectionId = referencedCollectionIdOf(field);
-    const refSource =
-      collectionId && this._sourceState.source.references?.[collectionId];
+    const refSource = collectionId && this._sourceOf(collectionId);
     if (!collectionId || !refSource) {
       return undefined;
     }
@@ -118,7 +119,7 @@ export class ReferenceCellsState<T = Record<string, unknown>> {
     if (!collectionId) {
       return undefined;
     }
-    const refSource = this._sourceState.source.references?.[collectionId];
+    const refSource = this._sourceOf(collectionId);
     if (!refSource) {
       return undefined;
     }
@@ -161,6 +162,32 @@ export class ReferenceCellsState<T = Record<string, unknown>> {
         this._requested.delete(collectionId);
       });
   }
+
+  private _sourceOf(collectionId: string): SchemaSource<any> | undefined {
+    const direct = this._sourceState.source.references?.[collectionId];
+
+    if (direct) {
+      return direct;
+    }
+
+    const cached = this._resolvedSources.get(collectionId);
+
+    if (cached) {
+      return cached;
+    }
+
+    // A field can start referencing a collection after this source was built
+    // (for example, after Add Field creates a new reference). Ask the source for
+    // that late entry; once we have it, `_schemas` caches only its loaded schema.
+    const resolved =
+      this._sourceState.source.getReferencedCollectionSource?.(collectionId);
+
+    if (resolved) {
+      this._resolvedSources.set(collectionId, resolved);
+    }
+
+    return resolved;
+  }
 }
 
 async function fetchReferenceItems(

package/src/components/SchemaSource/schemaFieldManagement.ts

@@ -1,6 +1,9 @@
 import {
+  Field,
   FieldDraft,
   FieldManagement,
+  isReferenceField,
+  isReferenceFieldType,
   NonReferenceField,
   SourceState,
 } from '@wix/bex-core';
@@ -16,19 +19,41 @@ import { standardFieldTypeLabels } from './standardFieldTypeLabels';
 export const schemaFieldManagement = (
   sourceState: SourceState<any>,
 ): FieldManagement => {
-  const draftToField = (draft: FieldDraft): NonReferenceField => {
+  const draftToField = (draft: FieldDraft): Field => {
     const definition = sourceState.source.fieldTypes?.find(
       (def) => def.type === draft.type,
     );
-    return {
+    const baseField = {
       id: draft.key,
       displayName: draft.name,
-      ...(definition
-        ? { type: 'CUSTOM' as const, customType: definition.type }
-        : { type: (draft.type ?? 'SHORT_TEXT') as NonReferenceField['type'] }),
       isPii: draft.containsPii,
       validation: { required: false },
     };
+
+    if (isReferenceFieldType(draft.type)) {
+      if (!draft.referencedCollectionId) {
+        throw new Error(
+          `cannot create ${draft.type} field without referencedCollectionId`,
+        );
+      }
+
+      return {
+        ...baseField,
+        type: draft.type,
+        referenceMetadata: {
+          referencedCollectionId: draft.referencedCollectionId,
+        },
+      };
+    }
+
+    return {
+      ...baseField,
+      ...(definition
+        ? { type: 'CUSTOM' as const, customType: definition.type }
+        : {
+            type: (draft.type ?? 'SHORT_TEXT') as NonReferenceField['type'],
+          }),
+    };
   };
 
   return {
@@ -73,6 +98,10 @@ export const schemaFieldManagement = (
           addTitle: t('cairo.customFields.addCustomField.modal.title'),
           editTitle: t('cairo.customFields.editCustomField.modal.title'),
         },
+        ...(fieldModal.loadReferenceableCollectionOptions && {
+          loadReferenceableCollectionOptions:
+            fieldModal.loadReferenceableCollectionOptions,
+        }),
         types: [
           ...fieldModal.types.map((ft) => {
             // The standard pair applies only when the source didn't custom-label
@@ -94,6 +123,9 @@ export const schemaFieldManagement = (
               supportsPii: ft.supportsPii,
               piiWarning: ft.piiWarning,
               settingsSection: ft.settingsSection,
+              ...(ft.collectionInput && {
+                collectionInput: ft.collectionInput,
+              }),
               patternsType: ft.patternsType,
             };
           }),
@@ -109,6 +141,9 @@ export const schemaFieldManagement = (
                     supportsPii: def.fieldModal.supportsPii,
                     piiWarning: def.fieldModal.piiWarning,
                     settingsSection: def.fieldModal.settingsSection,
+                    ...(def.fieldModal.collectionInput && {
+                      collectionInput: def.fieldModal.collectionInput,
+                    }),
                     patternsType: 'CUSTOM' as const,
                     icons: def.display.icons,
                   },
@@ -158,6 +193,9 @@ export const schemaFieldManagement = (
         writeApps: false,
         writeUsers: false,
         containsPii: field.isPii ?? false,
+        referencedCollectionId: isReferenceField(field)
+          ? field.referenceMetadata.referencedCollectionId
+          : undefined,
         field,
       };
     },

package/src/components/SchemaSource/schemaRendering.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilterOperator } from '@wix/bex-core';
+import { FilterOperator, isReferenceField } from '@wix/bex-core';
 import type { Column } from '../../model';
 import type { FieldsSourceRendering } from '../../state/CollectionFieldsSourceState';
 import type { FieldFilterConfig } from '../../state/buildFieldFilters';
@@ -45,7 +45,7 @@ export const schemaRendering = (
   // A reference value is an expanded referenced item, which FieldCell can't
   // render — the label is in the referenced collection's display field.
   columnOverrides: (field): Partial<Column> => {
-    if (field.type !== 'REFERENCE' && field.type !== 'MULTI_REFERENCE') {
+    if (!isReferenceField(field)) {
       return {};
     }
     return {

package/src/components/SchemaSource/tableSchemaSource.ts

@@ -69,6 +69,9 @@ class TableSchemaSourceImpl<T> implements TableSchemaSource<T> {
   get references() {
     return this.source.references;
   }
+  get getReferencedCollectionSource() {
+    return this.source.getReferencedCollectionSource;
+  }
   get fieldsContainer() {
     // Attached by `useSchemaSource`; forwarded like every other member, or the
     // wrapper would hand the components a source with no container.

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

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

package/src/components/SetupWidget/SetupStepSecondaryCta.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, IconButton, Tooltip, ClickableCard } from '@wix/design-system';
 import { SetupWidgetStepSecondaryCta as SecondaryCta } from '@wix/bex-core';
+import { st, classes } from './SetupWidget.st.css.js';
 
 export interface SetupStepSecondaryCtaProps {
   stepId: string;
@@ -41,7 +42,7 @@ export const SetupStepSecondaryCta = ({
   // itself — that's what carries its focus handlers and aria wiring.
   return (
     <ClickableCard.Action>
-      <Box verticalAlign="middle">
+      <Box verticalAlign="middle" className={st(classes.secondaryCta)}>
         {cta.tooltip ? (
           <Tooltip
             dataHook={`setup-step-secondary-cta-tooltip-${stepId}`}

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

@@ -49,15 +49,32 @@
   --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
- * existing Setup widget. It still occupies space so the row height is stable. */
-.completedCta {
+/* A completed step's CTA and a step's secondary action are both revealed on row
+ * hover (desktop), mirroring the existing Setup widget. They keep their space,
+ * so the row height is stable and the step's CTA doesn't shift on hover. */
+.completedCta,
+.secondaryCta {
   opacity: 0;
   transition: opacity 0.25s ease-in-out;
 }
 
-.row:hover .completedCta,
-.row:focus-within .completedCta {
+/* `:hover` is gated so a tap on a touch device can't leave a sticky hover
+ * state — WDS gates its own the same way, see wix-design-systems#16201. With no
+ * hover the buttons stay hidden, which is intended: mobile renders
+ * SetupStepCard, and it has no per-step action area at all. */
+@media (hover: hover) {
+  .row:hover .completedCta,
+  .row:hover .secondaryCta {
+    opacity: 1;
+  }
+}
+
+/* The focus reveal stays outside that query. `opacity` (not `visibility`)
+ * leaves the buttons focusable while invisible, so a keyboard focus ring must
+ * never land on something the user cannot see — on any device. */
+.row:focus-within .completedCta,
+.row:focus-within .secondaryCta,
+.secondaryCta:focus-within {
   opacity: 1;
 }
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget1177837430";
+var _namespace_ = "SetupWidget1751783782";
 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":"SetupWidget1177837430__root","row":"SetupWidget1177837430__row","completedCta":"SetupWidget1177837430__completedCta","card":"SetupWidget1177837430__card","stepIcon":"SetupWidget1177837430__stepIcon","chevron":"SetupWidget1177837430__chevron","chevronDisabled":"SetupWidget1177837430__chevronDisabled","inProgressLabel":"SetupWidget1177837430__inProgressLabel"};
+export var classes = {"root":"SetupWidget1751783782__root","row":"SetupWidget1751783782__row","completedCta":"SetupWidget1751783782__completedCta","secondaryCta":"SetupWidget1751783782__secondaryCta","card":"SetupWidget1751783782__card","stepIcon":"SetupWidget1751783782__stepIcon","chevron":"SetupWidget1751783782__chevron","chevronDisabled":"SetupWidget1751783782__chevronDisabled","inProgressLabel":"SetupWidget1751783782__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard3642517607";
+var _namespace_ = "SkeletonCard3743223440";
 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":"SkeletonCard3642517607__root","headerLoading":"SkeletonCard3642517607__headerLoading"};
+export var classes = {"root":"SkeletonCard3743223440__root","headerLoading":"SkeletonCard3743223440__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_ = "SlidingModal2387354353";
+var _namespace_ = "SlidingModal2468710087";
 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":"SlidingModal2387354353__root"};
+export var classes = {"root":"SlidingModal2468710087__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader1284582770";
+var _namespace_ = "AddFieldColumnHeader3783145171";
 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":"AddFieldColumnHeader1284582770__root","title":"AddFieldColumnHeader1284582770__title","hoverBridge":"AddFieldColumnHeader1284582770__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3783145171__root","title":"AddFieldColumnHeader3783145171__title","hoverBridge":"AddFieldColumnHeader3783145171__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};