@wix/patterns 1.487.0 → 1.488.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines606070879";
+var _namespace_ = "MaxLines28702856";
 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":"MaxLines606070879__root"};
+export var classes = {"root":"MaxLines28702856__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_ = "MultiBulkActionToolbar1677630063";
+var _namespace_ = "MultiBulkActionToolbar2902181092";
 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":"MultiBulkActionToolbar1677630063__root","leftGroupWrapper":"MultiBulkActionToolbar1677630063__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1677630063__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1677630063__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2902181092__root","leftGroupWrapper":"MultiBulkActionToolbar2902181092__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2902181092__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2902181092__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_ = "NestedTablePlaceholderStatesRow2348037792";
+var _namespace_ = "NestedTablePlaceholderStatesRow3925760858";
 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":"NestedTablePlaceholderStatesRow2348037792__root"};
+export var classes = {"root":"NestedTablePlaceholderStatesRow3925760858__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_ = "NestedTableRow126686359";
+var _namespace_ = "NestedTableRow866529802";
 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":"NestedTableRow126686359__root","firstLevel":"NestedTableRow126686359__firstLevel","placeholder":"NestedTableRow126686359__placeholder","parentHovered":"NestedTableRow126686359__parentHovered"};
+export var classes = {"root":"NestedTableRow866529802__root","firstLevel":"NestedTableRow866529802__firstLevel","placeholder":"NestedTableRow866529802__placeholder","parentHovered":"NestedTableRow866529802__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_ = "MultipleDragOverlayEffect781156099";
+var _namespace_ = "MultipleDragOverlayEffect2650853254";
 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":"MultipleDragOverlayEffect781156099__root"};
+export var classes = {"root":"MultipleDragOverlayEffect2650853254__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_ = "NestedTableDragAndDropRow1314655904";
+var _namespace_ = "NestedTableDragAndDropRow4161848159";
 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":"NestedTableDragAndDropRow1314655904__root"};
+export var classes = {"root":"NestedTableDragAndDropRow4161848159__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_ = "PickerContent897261569";
+var _namespace_ = "PickerContent1182858536";
 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":"PickerContent897261569__root"};
+export var classes = {"root":"PickerContent1182858536__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_ = "PickerContentAdditionalStep855646970";
+var _namespace_ = "PickerContentAdditionalStep2362062783";
 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":"PickerContentAdditionalStep855646970__root","titles":"PickerContentAdditionalStep855646970__titles","suffix":"PickerContentAdditionalStep855646970__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2362062783__root","titles":"PickerContentAdditionalStep2362062783__titles","suffix":"PickerContentAdditionalStep2362062783__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_ = "PickerTableListItem1053670603";
+var _namespace_ = "PickerTableListItem2133071640";
 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":"PickerTableListItem1053670603__root"};
+export var classes = {"root":"PickerTableListItem2133071640__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_ = "ScrollableContent3886533252";
+var _namespace_ = "ScrollableContent3785619166";
 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":"ScrollableContent3886533252__root"};
+export var classes = {"root":"ScrollableContent3785619166__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_ = "SetupWidget3466095077";
+var _namespace_ = "SetupWidget1099513909";
 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":"SetupWidget3466095077__root","row":"SetupWidget3466095077__row","completedCta":"SetupWidget3466095077__completedCta","secondaryCta":"SetupWidget3466095077__secondaryCta","card":"SetupWidget3466095077__card","stepIcon":"SetupWidget3466095077__stepIcon","chevron":"SetupWidget3466095077__chevron","chevronDisabled":"SetupWidget3466095077__chevronDisabled","inProgressLabel":"SetupWidget3466095077__inProgressLabel"};
+export var classes = {"root":"SetupWidget1099513909__root","row":"SetupWidget1099513909__row","completedCta":"SetupWidget1099513909__completedCta","secondaryCta":"SetupWidget1099513909__secondaryCta","card":"SetupWidget1099513909__card","stepIcon":"SetupWidget1099513909__stepIcon","chevron":"SetupWidget1099513909__chevron","chevronDisabled":"SetupWidget1099513909__chevronDisabled","inProgressLabel":"SetupWidget1099513909__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_ = "SkeletonCard4240415242";
+var _namespace_ = "SkeletonCard706100567";
 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":"SkeletonCard4240415242__root","headerLoading":"SkeletonCard4240415242__headerLoading"};
+export var classes = {"root":"SkeletonCard706100567__root","headerLoading":"SkeletonCard706100567__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_ = "SlidingModal2940725729";
+var _namespace_ = "SlidingModal1179177860";
 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":"SlidingModal2940725729__root"};
+export var classes = {"root":"SlidingModal1179177860__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_ = "AddFieldColumnHeader3322376690";
+var _namespace_ = "AddFieldColumnHeader4168196710";
 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":"AddFieldColumnHeader3322376690__root","anchorLayer":"AddFieldColumnHeader3322376690__anchorLayer","popover":"AddFieldColumnHeader3322376690__popover","title":"AddFieldColumnHeader3322376690__title","hoverBridge":"AddFieldColumnHeader3322376690__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader4168196710__root","anchorLayer":"AddFieldColumnHeader4168196710__anchorLayer","popover":"AddFieldColumnHeader4168196710__popover","title":"AddFieldColumnHeader4168196710__title","hoverBridge":"AddFieldColumnHeader4168196710__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/TableFolders/TableFoldersContent.tsx

@@ -165,7 +165,10 @@ function _TableFoldersContent<
     toolbar: { selectedOrderedColumnsOrAll },
   } = state;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: state.toolbar.showFieldTypeIcons });
+  const createWSRColumnBase = useCreateWSRColumnBase({
+    horizontalScroll,
+    showFieldTypeIcons: state.toolbar.showFieldTypeIcons,
+  });
 
   const finalColumns = [
     {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter4015760724";
+var _namespace_ = "TabsFilter950746489";
 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":"TabsFilter4015760724__root","titleBox":"TabsFilter4015760724__titleBox"};
+export var classes = {"root":"TabsFilter950746489__root","titleBox":"TabsFilter950746489__titleBox"};
 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_ = "ManageTagsModal2402629413";
+var _namespace_ = "ManageTagsModal1385552329";
 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":"ManageTagsModal2402629413__root"};
+export var classes = {"root":"ManageTagsModal1385552329__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_ = "ToolbarItem2668785265";
+var _namespace_ = "ToolbarItem163264995";
 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":"ToolbarItem2668785265__root"};
+export var classes = {"root":"ToolbarItem163264995__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2758328366";
+var _namespace_ = "common560572835";
 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":"common2758328366__root","column":"common2758328366__column","fullHeight":"common2758328366__fullHeight"};
+export var classes = {"root":"common560572835__root","column":"common560572835__column","fullHeight":"common560572835__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader554297078";
+var _namespace_ = "CollectionPageHeader3392449430";
 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":"CollectionPageHeader554297078__root","mobileMoreActions":"CollectionPageHeader554297078__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader3392449430__root","mobileMoreActions":"CollectionPageHeader3392449430__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/MobilePrimaryActionBar.st.css.ts

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

package/src/state/CollectionPage/TitleBadges.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges2059119480";
+var _namespace_ = "TitleBadges3455170710";
 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":"TitleBadges2059119480__root","tooltip":"TitleBadges2059119480__tooltip","tooltipTrigger":"TitleBadges2059119480__tooltipTrigger"};
+export var classes = {"root":"TitleBadges3455170710__root","tooltip":"TitleBadges3455170710__tooltip","tooltipTrigger":"TitleBadges3455170710__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -340,11 +340,12 @@ export class CellValueState<T, F extends FiltersMap> {
     try {
       return { value: resolved.deserialize(rawValue) };
     } catch {
+      const translate = this._parent.collection?.translate;
       return {
         value: rawValue,
-        error: this._parent.collection?.translate(
-          'cairo.editableTable.cell.validation.notCompatible',
-        ),
+        error:
+          resolved.invalidInputMessage?.(rawValue, translate) ||
+          translate?.('cairo.editableTable.cell.validation.notCompatible'),
       };
     }
   }

package/src/state/EditableTable/ClipboardState.ts

@@ -13,6 +13,7 @@ export class ClipboardState<T, F extends FiltersMap> {
   isCut = false;
   private _copiedDataString?: string;
   private _copiedValues = new Map<string, any>();
+  private _copiedSerialized = new Map<string, string>();
   private _copiedSourceKeys = new Map<string, string>();
   private readonly _parent: EditableTableState<T, F>;
 
@@ -137,7 +138,10 @@ export class ClipboardState<T, F extends FiltersMap> {
 
         keptSourceKeys.add(cellKey(dest.rowKey, dest.columnId));
         pasted.push(dest);
-        if (useRichValues) {
+        if (
+          useRichValues &&
+          this._isSameCellType(offset, dest.columnId, cellValue)
+        ) {
           richChanges.push({
             rowKey: dest.rowKey,
             columnId: dest.columnId,
@@ -147,7 +151,11 @@ export class ClipboardState<T, F extends FiltersMap> {
           rawChanges.push({
             rowKey: dest.rowKey,
             columnId: dest.columnId,
-            rawValue: cols[c],
+            // A copied cell's text can contain tabs or newlines, which break the
+            // split of `rawData`, so read it from the copy-time map instead.
+            rawValue: useRichValues
+              ? this._copiedSerialized.get(offset) ?? ''
+              : cols[c],
           });
         }
       }
@@ -163,6 +171,24 @@ export class ClipboardState<T, F extends FiltersMap> {
     return { keptSourceKeys, pasted };
   }
 
+  // A typed value pasted into a column of another cell type would skip that
+  // type's `deserialize`, so its rules would fail on the wrong JS type.
+  private _isSameCellType(
+    offset: string,
+    destColumnId: string,
+    cellValue: EditableTableState<T, F>['cellValue'],
+  ): boolean {
+    const sourceKey = this._copiedSourceKeys.get(offset);
+    const source = sourceKey ? parseCellKey(sourceKey) : null;
+    if (!source) {
+      return false;
+    }
+    return (
+      cellValue.resolveCellTypeByColumnId(source.columnId).type ===
+      cellValue.resolveCellTypeByColumnId(destColumnId).type
+    );
+  }
+
   private _clearCutSources(
     keptSourceKeys: Set<string>,
     cellValue: EditableTableState<T, F>['cellValue'],
@@ -186,6 +212,7 @@ export class ClipboardState<T, F extends FiltersMap> {
     this.isCut = false;
     this._copiedDataString = undefined;
     this._copiedValues.clear();
+    this._copiedSerialized.clear();
     this._copiedSourceKeys.clear();
   }
 
@@ -285,6 +312,7 @@ export class ClipboardState<T, F extends FiltersMap> {
             offset,
             cellValue.getCellDisplayValue(pos.rowKey, pos.columnId),
           );
+          this._copiedSerialized.set(offset, serialized);
           this._copiedSourceKeys.set(offset, cellKey(pos.rowKey, pos.columnId));
         } else {
           row.push('');

package/src/state/EditableTable/types.ts

@@ -63,6 +63,11 @@ export interface CellType {
     translate?: Translate,
   ) => string | null;
 
+  /** Error message for pasted text that `deserialize` rejected. Receives the
+   *  raw text, not a typed value. Omit it to show the generic
+   *  "not compatible" message. */
+  invalidInputMessage?: (raw: string, translate?: Translate) => string | null;
+
   /** Can this cell type be edited? (default: true) */
   editable?: boolean;
 

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/buildEditableFieldColumns.ts

@@ -57,23 +57,39 @@ export function toValidationRules(
     });
   }
   if (v.numberRange?.min != null) {
-    rules.push({ type: 'min', value: v.numberRange.min, message: '' });
+    const min = v.numberRange.min;
+    rules.push({
+      type: 'min',
+      value: min,
+      message: translate('cairo.editableTable.field.validation.min', { min }),
+    });
   }
   if (v.numberRange?.max != null) {
-    rules.push({ type: 'max', value: v.numberRange.max, message: '' });
+    const max = v.numberRange.max;
+    rules.push({
+      type: 'max',
+      value: max,
+      message: translate('cairo.editableTable.field.validation.max', { max }),
+    });
   }
   if (v.stringLengthRange?.minLength != null) {
+    const minLength = v.stringLengthRange.minLength;
     rules.push({
       type: 'minLength',
-      value: v.stringLengthRange.minLength,
-      message: '',
+      value: minLength,
+      message: translate('cairo.editableTable.field.validation.minLength', {
+        minLength,
+      }),
     });
   }
   if (v.stringLengthRange?.maxLength != null) {
+    const maxLength = v.stringLengthRange.maxLength;
     rules.push({
       type: 'maxLength',
-      value: v.stringLengthRange.maxLength,
-      message: '',
+      value: maxLength,
+      message: translate('cairo.editableTable.field.validation.maxLength', {
+        maxLength,
+      }),
     });
   }
   // A pattern the platform refuses to run (uncompilable, over-long, or able to