@odoo/o-spreadsheet 18.4.0-alpha.8 → 18.4.0

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.4.0-alpha.8
- * @date 2025-06-12T09:53:48.133Z
- * @hash 9b7a8d0
+ * @version 18.4.0
+ * @date 2025-06-24T11:19:24.606Z
+ * @hash a5b7cad
  */
 
 (function (exports, owl) {
@@ -21,13 +21,21 @@
       const icon = item.icon;
       const secondaryIcon = item.secondaryIcon;
       const itemId = item.id || nextItemId++;
+      const isEnabled = item.isEnabled ? item.isEnabled : () => true;
       return {
           id: itemId.toString(),
           name: typeof name === "function" ? name : () => name,
           isVisible: item.isVisible ? item.isVisible : () => true,
-          isEnabled: item.isEnabled ? item.isEnabled : () => true,
+          isEnabled: isEnabled,
           isActive: item.isActive,
-          execute: item.execute,
+          execute: item.execute
+              ? (env, isMiddleClick) => {
+                  if (isEnabled(env)) {
+                      return item.execute(env, isMiddleClick);
+                  }
+                  return undefined;
+              }
+              : undefined,
           children: children
               ? (env) => {
                   return children
@@ -155,6 +163,7 @@
   const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
   const COMPOSER_ASSISTANT_COLOR = "#9B359B";
   const COLOR_TRANSPARENT = "#00000000";
+  const TABLE_HOVER_BACKGROUND_COLOR = "#017E8414";
   const CHART_WATERFALL_POSITIVE_COLOR = "#4EA7F2";
   const CHART_WATERFALL_NEGATIVE_COLOR = "#EA6175";
   const CHART_WATERFALL_SUBTOTAL_COLOR = "#AAAAAA";
@@ -298,6 +307,7 @@
   const GRID_ICON_MARGIN = 2;
   const GRID_ICON_EDGE_LENGTH = 17;
   const FOOTER_HEIGHT = 2 * DEFAULT_CELL_HEIGHT;
+  const DATA_VALIDATION_CHIP_MARGIN = 5;
   // 768px is a common breakpoint for small screens
   // Typically inside Odoo, it is the threshold for switching to mobile view
   const MOBILE_WIDTH_BREAKPOINT = 768;
@@ -643,9 +653,6 @@
   function isDefined(argument) {
       return argument !== undefined;
   }
-  function isNotNull(argument) {
-      return argument !== null;
-  }
   /**
    * Check if all the values of an object, and all the values of the objects inside of it, are undefined.
    */
@@ -1356,9 +1363,16 @@
       if (percentage === 1) {
           return "#000";
       }
+      // increase saturation to compensate and make it more vivid
+      hsla.s = Math.min(100, percentage * hsla.s + hsla.s);
       hsla.l = hsla.l - percentage * hsla.l;
       return hslaToHex(hsla);
   }
+  function chipTextColor(chipBackgroundColor) {
+      return relativeLuminance(chipBackgroundColor) < 0.6
+          ? lightenColor(chipBackgroundColor, 0.9)
+          : darkenColor(chipBackgroundColor, 0.75);
+  }
   const COLORS_SM = [
       "#4EA7F2", // Blue
       "#EA6175", // Red
@@ -6835,19 +6849,17 @@
   const textWidthCache = {};
   function computeTextWidth(context, text, style, fontUnit = "pt") {
       const font = computeTextFont(style, fontUnit);
-      context.save();
-      context.font = font;
-      const width = computeCachedTextWidth(context, text);
-      context.restore();
-      return width;
+      return computeCachedTextWidth(context, text, font);
   }
-  function computeCachedTextWidth(context, text) {
-      const font = context.font;
+  function computeCachedTextWidth(context, text, font) {
       if (!textWidthCache[font]) {
           textWidthCache[font] = {};
       }
       if (textWidthCache[font][text] === undefined) {
+          const oldFont = context.font;
+          context.font = font;
           textWidthCache[font][text] = context.measureText(text).width;
+          context.font = oldFont;
       }
       return textWidthCache[font][text];
   }
@@ -7012,19 +7024,19 @@
   }
   // Inspired from https://stackoverflow.com/a/10511598
   function clipTextWithEllipsis(ctx, text, maxWidth) {
-      let width = computeCachedTextWidth(ctx, text);
+      let width = computeCachedTextWidth(ctx, text, ctx.font);
       if (width <= maxWidth) {
           return text;
       }
       const ellipsis = "…";
-      const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis);
+      const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis, ctx.font);
       if (width <= ellipsisWidth) {
           return text;
       }
       let len = text.length;
       while (width >= maxWidth - ellipsisWidth && len-- > 0) {
           text = text.substring(0, len);
-          width = computeCachedTextWidth(ctx, text);
+          width = computeCachedTextWidth(ctx, text, ctx.font);
       }
       return text + ellipsis;
   }
@@ -7238,6 +7250,63 @@
       };
       return osClipboardContent;
   }
+  /**
+   * Applies each clipboard handler to paste its corresponding data into the target.
+   */
+  const applyClipboardHandlersPaste = (handlers, copiedData, target, options) => {
+      handlers.forEach(({ handlerName, handler }) => {
+          const data = copiedData[handlerName];
+          if (data) {
+              handler.paste(target, data, options);
+          }
+      });
+  };
+  /**
+   * Returns the paste target based on clipboard handlers.
+   * Also includes the full affected zone and the list of pasted zones for selection.
+   */
+  function getPasteTargetFromHandlers(sheetId, zones, copiedData, handlers, options) {
+      let zone = undefined;
+      const selectedZones = [];
+      const target = {
+          sheetId,
+          zones,
+      };
+      for (const { handlerName, handler } of handlers) {
+          const handlerData = copiedData[handlerName];
+          if (!handlerData) {
+              continue;
+          }
+          const currentTarget = handler.getPasteTarget(sheetId, zones, handlerData, options);
+          if (currentTarget.figureId) {
+              target.figureId = currentTarget.figureId;
+          }
+          for (const targetZone of currentTarget.zones) {
+              selectedZones.push(targetZone);
+              if (zone === undefined) {
+                  zone = targetZone;
+                  continue;
+              }
+              zone = union(zone, targetZone);
+          }
+      }
+      return {
+          target,
+          zone,
+          selectedZones,
+      };
+  }
+  /**
+   * Updates the selection after a paste operation.
+   */
+  const selectPastedZone = (selection, sourceZones, pastedZones) => {
+      const anchorCell = {
+          col: sourceZones[0].left,
+          row: sourceZones[0].top,
+      };
+      selection.getBackToDefault();
+      selection.selectZone({ cell: anchorCell, zone: union(...pastedZones) }, { scrollIntoView: false });
+  };
 
   class ClipboardHandler {
       getters;
@@ -9942,8 +10011,15 @@ stores.inject(MyMetaStore, storeInstance);
   const ModelStore = createAbstractStore("Model");
 
   class RendererStore {
-      mutators = ["register", "unRegister", "drawLayer"];
+      mutators = ["register", "unRegister", "draw", "startAnimation", "stopAnimation"];
       renderers = {};
+      model;
+      context = undefined;
+      animationFrameId = null;
+      registeredAnimations = new Set();
+      constructor(get) {
+          this.model = get(ModelStore);
+      }
       register(renderer) {
           if (!renderer.renderingLayers.length) {
               return;
@@ -9960,17 +10036,54 @@ stores.inject(MyMetaStore, storeInstance);
               this.renderers[layer] = this.renderers[layer].filter((r) => r !== renderer);
           }
       }
-      drawLayer(context, layer) {
+      drawLayer(context, layer, timeStamp) {
           const renderers = this.renderers[layer];
           if (renderers) {
               for (const renderer of renderers) {
                   context.ctx.save();
-                  renderer.drawLayer(context, layer);
+                  renderer.drawLayer(context, layer, timeStamp);
                   context.ctx.restore();
               }
           }
           return "noStateChange";
       }
+      draw(context, timestamp) {
+          context = context || this.context;
+          if (!context) {
+              throw new Error("Rendering context is not defined");
+          }
+          this.context = context;
+          for (const layer of OrderedLayers()) {
+              this.model.drawLayer(context, layer);
+              this.drawLayer(context, layer, timestamp);
+          }
+          return "noStateChange";
+      }
+      startAnimation(animationId) {
+          this.registeredAnimations.add(animationId);
+          if (!this.animationFrameId) {
+              const animationCallback = (timestamp) => {
+                  this.animationFrameId = requestAnimationFrame(animationCallback);
+                  this.draw(undefined, timestamp);
+              };
+              this.animationFrameId = requestAnimationFrame(animationCallback);
+          }
+          return "noStateChange";
+      }
+      stopAnimation(animationId) {
+          this.registeredAnimations.delete(animationId);
+          if (this.registeredAnimations.size === 0 && this.animationFrameId !== null) {
+              cancelAnimationFrame(this.animationFrameId);
+              this.animationFrameId = null;
+          }
+          return "noStateChange";
+      }
+      dispose() {
+          if (this.animationFrameId) {
+              cancelAnimationFrame(this.animationFrameId);
+              this.animationFrameId = null;
+          }
+      }
   }
 
   class SpreadsheetStore extends DisposableStore {
@@ -9994,7 +10107,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       handle(cmd) { }
       finalize() { }
-      drawLayer(ctx, layer) { }
+      drawLayer(ctx, layer, timestamp) { }
   }
 
   const VOID_COMPOSER = {
@@ -21687,6 +21800,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (isTrendLineAxis(dataset.xAxisID) || dataset.hidden) {
               continue;
           }
+          const yAxisScale = chart.scales[dataset.yAxisID];
           for (let i = 0; i < dataset._parsed.length; i++) {
               const parsedValue = dataset._parsed[i];
               const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
@@ -21697,10 +21811,18 @@ stores.inject(MyMetaStore, storeInstance);
               const xPosition = point.x;
               let yPosition = 0;
               if (chart.config.type === "line" || chart.config.type === "radar") {
-                  yPosition = point.y - 10;
+                  yPosition = value < 0 ? point.y + 10 : point.y - 10;
               }
               else {
-                  yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
+                  const yZeroLine = yAxisScale.getPixelForValue(0);
+                  const distanceFromAxisOrigin = Math.abs(yZeroLine - point.y);
+                  const textHeight = 12; // ChartJS default text height
+                  if (distanceFromAxisOrigin < textHeight) {
+                      yPosition = value < 0 ? yZeroLine + textHeight / 2 : yZeroLine - textHeight / 2;
+                  }
+                  else {
+                      yPosition = value < 0 ? point.y - point.height / 2 : point.y + point.height / 2;
+                  }
               }
               yPosition = Math.min(yPosition, yMax);
               yPosition = Math.max(yPosition, yMin);
@@ -21710,7 +21832,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               for (const otherPosition of textsPositions[xPosition] || []) {
                   if (Math.abs(otherPosition - yPosition) < 13) {
-                      yPosition = otherPosition - 13;
+                      yPosition = value < 0 ? otherPosition + 13 : otherPosition - 13;
                   }
               }
               textsPositions[xPosition].push(yPosition);
@@ -21729,6 +21851,8 @@ stores.inject(MyMetaStore, storeInstance);
           if (isTrendLineAxis(dataset.xAxisID)) {
               return; // ignore trend lines
           }
+          const xAxisScale = chart.scales[dataset.xAxisID];
+          const xZeroLine = xAxisScale.getPixelForValue(0);
           for (let i = 0; i < dataset._parsed.length; i++) {
               const value = Number(dataset._parsed[i].x);
               if (isNaN(value)) {
@@ -21737,17 +21861,27 @@ stores.inject(MyMetaStore, storeInstance);
               const displayValue = options.callback(value, dataset, i);
               const point = dataset.data[i];
               const yPosition = point.y;
-              let xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
-              xPosition = Math.min(xPosition, xMax);
-              xPosition = Math.max(xPosition, xMin);
+              const textWidth = computeTextWidth(ctx, displayValue, { fontSize: 12 }, "px");
+              const distanceFromAxisOrigin = Math.abs(point.x - xZeroLine);
+              const PADDING = 3;
+              let xPosition;
+              if (distanceFromAxisOrigin < textWidth) {
+                  xPosition =
+                      value < 0 ? xZeroLine - textWidth / 2 - PADDING : xZeroLine + textWidth / 2 + PADDING;
+              }
+              else {
+                  xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
+                  xPosition = Math.min(xPosition, xMax);
+                  xPosition = Math.max(xPosition, xMin);
+              }
               // Avoid overlapping texts with same Y
               if (!textsPositions[yPosition]) {
                   textsPositions[yPosition] = [];
               }
-              const textWidth = computeTextWidth(ctx, displayValue, { fontSize: 12 }, "px");
               for (const otherPosition of textsPositions[yPosition]) {
                   if (Math.abs(otherPosition - xPosition) < textWidth) {
-                      xPosition = otherPosition + textWidth + 3;
+                      xPosition =
+                          value < 0 ? otherPosition - textWidth - PADDING : otherPosition + textWidth + PADDING;
                   }
               }
               textsPositions[yPosition].push(xPosition);
@@ -23695,11 +23829,11 @@ stores.inject(MyMetaStore, storeInstance);
   function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
       const maxValue = runtime.maxValue;
       const minValue = runtime.minValue;
-      const gaugeValue = runtime.gaugeValue;
+      const gaugeValue = getGaugeValue(runtime, "animated");
       const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
       const gaugeArcWidth = gaugeRect.width / 6;
       const gaugePercentage = gaugeValue
-          ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
+          ? (gaugeValue - minValue.value) / (maxValue.value - minValue.value)
           : 0;
       const gaugeValuePosition = {
           x: boundingRect.width / 2,
@@ -23712,7 +23846,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       // Scale down the font size if the text is too long
       const maxTextWidth = gaugeRect.width / 2;
-      const gaugeLabel = gaugeValue?.label || "-";
+      const gaugeLabel = runtime.gaugeValue?.label || "-";
       if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
           gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
       }
@@ -23852,7 +23986,7 @@ stores.inject(MyMetaStore, storeInstance);
       return inflectionValues;
   }
   function getGaugeColor(runtime) {
-      const gaugeValue = runtime.gaugeValue?.value;
+      const gaugeValue = getGaugeValue(runtime, "final");
       if (gaugeValue === undefined) {
           return GAUGE_BACKGROUND_COLOR;
       }
@@ -23940,6 +24074,11 @@ stores.inject(MyMetaStore, storeInstance);
       };
       return { bottomLeft, bottomRight, topRight, topLeft };
   }
+  function getGaugeValue(runtime, mode) {
+      return mode === "animated" && runtime.animationValue !== undefined
+          ? runtime.animationValue
+          : runtime.gaugeValue?.value;
+  }
 
   const CHART_COMMON_OPTIONS = {
       // https://www.chartjs.org/docs/latest/general/responsive.html
@@ -25681,7 +25820,9 @@ stores.inject(MyMetaStore, storeInstance);
           background: definition.background,
           callback: (value, dataset) => {
               value = Math.abs(Number(value));
-              return formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
+              return value === 0
+                  ? ""
+                  : formatChartDatasetValue(axisFormats, locale)(value, dataset.xAxisID || "x");
           },
       };
   }
@@ -26292,6 +26433,320 @@ stores.inject(MyMetaStore, storeInstance);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
+  const cellAnimationRegistry = new Registry();
+  cellAnimationRegistry.add("animatedBackgroundColorChange", {
+      id: "animatedBackgroundColorChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return oldBox?.style?.fillColor !== newBox?.style?.fillColor;
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const colorScale = getColorScale([
+              { value: 0, color: oldBox.style.fillColor || "#ffffff" },
+              { value: 1, color: newBox.style.fillColor || "#ffffff" },
+          ]);
+          animatedBox.style.fillColor = colorScale(EASING_FN[this.easingFn](progress));
+      },
+  });
+  cellAnimationRegistry.add("animatedTextColorChange", {
+      id: "animatedTextColorChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return oldBox?.style?.textColor !== newBox?.style?.textColor;
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const colorScale = getColorScale([
+              { value: 0, color: oldBox.style.textColor || "#000000" },
+              { value: 1, color: newBox.style.textColor || "#000000" },
+          ]);
+          animatedBox.style.textColor = colorScale(EASING_FN[this.easingFn](progress));
+      },
+  });
+  cellAnimationRegistry.add("animatedDataBar", {
+      id: "animatedDataBar",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return oldBox?.dataBarFill?.percentage !== newBox?.dataBarFill?.percentage;
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const startingPercentage = oldBox?.dataBarFill?.percentage || 0;
+          const endingPercentage = newBox?.dataBarFill?.percentage || 0;
+          const value = EASING_FN[this.easingFn](progress);
+          const percentage = startingPercentage + (endingPercentage - startingPercentage) * value;
+          animatedBox.dataBarFill = {
+              color: newBox.dataBarFill?.color || oldBox.dataBarFill?.color || "#ffffff",
+              percentage: percentage,
+          };
+      },
+  });
+  cellAnimationRegistry.add("textFadeIn", {
+      id: "textFadeIn",
+      easingFn: "easeInCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldText = oldBox?.content?.textLines?.join("\n");
+          const newText = newBox?.content?.textLines?.join("\n");
+          return Boolean(!oldText && newText);
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          animatedBox.textOpacity = EASING_FN[this.easingFn](progress);
+      },
+  });
+  cellAnimationRegistry.add("textFadeOut", {
+      id: "textFadeOut",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldText = oldBox?.content?.textLines?.join("\n");
+          const newText = newBox?.content?.textLines?.join("\n");
+          return Boolean(oldText && !newText);
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const textOpacity = 1 - EASING_FN[this.easingFn](progress);
+          const style = { ...oldBox.style };
+          delete style.fillColor;
+          animatedBox.textOpacity = textOpacity;
+          animatedBox.content = oldBox.content;
+          animatedBox.clipRect = oldBox.clipRect;
+          Object.assign(animatedBox.style, style);
+      },
+  });
+  cellAnimationRegistry.add("textChange", {
+      id: "textChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldText = oldBox?.content?.textLines?.join("\n");
+          const newText = newBox?.content?.textLines?.join("\n");
+          // Note: here, we also animate changes to icons layout (margins/size change, or icon appearing/disappearing)
+          // because a change to the icon layout will impact where the text is positioned.
+          return (Boolean(oldText && newText && oldText !== newText) || hasIconLayoutChange(newBox, oldBox));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const value = EASING_FN[this.easingFn](progress);
+          const slideInY = newBox.y + (value - 1) * newBox.height;
+          const slideOutY = newBox.y + value * newBox.height;
+          const iconLayoutChange = hasIconLayoutChange(newBox, oldBox);
+          const slideInBox = {
+              id: newBox.id + "-text-slide-in",
+              x: newBox.x,
+              y: slideInY,
+              width: newBox.width,
+              height: newBox.height,
+              style: { ...newBox.style },
+              skipCellGridLines: true,
+              content: newBox.content,
+              clipRect: newBox.clipRect || {
+                  ...newBox,
+                  // large width to avoid clipping the text it it didn't have a clipRect before,
+                  // we mainly want to clip the Y for the animation
+                  x: Math.max(0, newBox.x - (newBox.content?.width || 0)),
+                  width: newBox.width + (newBox.content?.width || 0) * 2,
+              },
+              icons: iconLayoutChange
+                  ? addClipRectToIcons(newBox.icons, newBox)
+                  : makeIconsEmpty(newBox.icons),
+          };
+          const slideOutBox = {
+              id: oldBox.id + "-text-slide-out",
+              x: newBox.x,
+              y: slideOutY,
+              width: newBox.width,
+              height: newBox.height,
+              style: { ...oldBox.style },
+              skipCellGridLines: true,
+              content: oldBox.content,
+              clipRect: oldBox.clipRect || {
+                  ...newBox,
+                  x: Math.max(0, newBox.x - (oldBox.content?.width || 0)),
+                  width: newBox.width + (oldBox.content?.width || 0) * 2,
+              },
+              icons: iconLayoutChange
+                  ? addClipRectToIcons(oldBox.icons, newBox)
+                  : makeIconsEmpty(oldBox.icons),
+          };
+          if (newBox.content && oldBox.content && slideInBox.content && slideOutBox.content) {
+              const slideInContentY = newBox.content.y + (value - 1) * newBox.height;
+              const slideOutContentY = newBox.content.y + value * newBox.height;
+              slideInBox.content.y = slideInContentY;
+              slideOutBox.content.y = slideOutContentY;
+          }
+          slideOutBox.style.fillColor = slideInBox.style.fillColor = undefined;
+          animatedBox.content = undefined;
+          animatedBox.icons = iconLayoutChange ? {} : animatedBox.icons;
+          return { newBoxes: [slideInBox, slideOutBox] };
+      },
+  });
+  cellAnimationRegistry.add("borderFadeIn", {
+      id: "borderFadeIn",
+      easingFn: "easeInCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return Boolean((!oldBox?.border?.bottom && newBox?.border?.bottom) ||
+              (!oldBox?.border?.top && newBox?.border?.top) ||
+              (!oldBox?.border?.left && newBox?.border?.left) ||
+              (!oldBox?.border?.right && newBox?.border?.right));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const borderOpacity = EASING_FN[this.easingFn](progress);
+          if (animatedBox.border?.top && newBox.border?.top && !oldBox.border?.top) {
+              animatedBox.border.top.opacity = borderOpacity;
+          }
+          if (animatedBox.border?.bottom && newBox.border?.bottom && !oldBox.border?.bottom) {
+              animatedBox.border.bottom.opacity = borderOpacity;
+          }
+          if (animatedBox.border?.left && newBox.border?.left && !oldBox.border?.left) {
+              animatedBox.border.left.opacity = borderOpacity;
+          }
+          if (animatedBox.border?.right && newBox.border?.right && !oldBox.border?.right) {
+              animatedBox.border.right.opacity = borderOpacity;
+          }
+      },
+  });
+  cellAnimationRegistry.add("borderFadeOut", {
+      id: "borderFadeOut",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return Boolean((oldBox?.border?.bottom && !newBox?.border?.bottom) ||
+              (oldBox?.border?.top && !newBox?.border?.top) ||
+              (oldBox?.border?.left && !newBox?.border?.left) ||
+              (oldBox?.border?.right && !newBox?.border?.right));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const borderOpacity = 1 - EASING_FN[this.easingFn](progress);
+          if (!animatedBox.border) {
+              animatedBox.border = {};
+          }
+          if (oldBox.border?.top && !newBox.border?.top) {
+              animatedBox.border.top = { ...oldBox.border.top, opacity: borderOpacity };
+          }
+          if (oldBox.border?.bottom && !newBox.border?.bottom) {
+              animatedBox.border.bottom = { ...oldBox.border.bottom, opacity: borderOpacity };
+          }
+          if (oldBox.border?.left && !newBox.border?.left) {
+              animatedBox.border.left = { ...oldBox.border.left, opacity: borderOpacity };
+          }
+          if (oldBox.border?.right && !newBox.border?.right) {
+              animatedBox.border.right = { ...oldBox.border.right, opacity: borderOpacity };
+          }
+      },
+  });
+  cellAnimationRegistry.add("borderColorChange", {
+      id: "borderColorChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          const oldBorder = oldBox?.border;
+          const newBorder = newBox?.border;
+          if (!oldBorder || !newBorder) {
+              return false;
+          }
+          return Boolean(oldBorder.bottom?.color !== newBorder.bottom?.color ||
+              oldBorder.top?.color !== newBorder.top?.color ||
+              oldBorder.left?.color !== newBorder.left?.color ||
+              oldBorder.right?.color !== newBorder.right?.color);
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const animateBorderColor = (side) => {
+              const oldBorder = oldBox?.border?.[side];
+              const newBorder = newBox?.border?.[side];
+              const animatedBorder = animatedBox.border?.[side];
+              if (oldBorder && newBorder && animatedBorder) {
+                  const colorScale = getColorScale([
+                      { value: 0, color: oldBorder.color || "#000000" },
+                      { value: 1, color: newBorder.color || "#000000" },
+                  ]);
+                  animatedBorder.color = colorScale(EASING_FN[this.easingFn](progress));
+              }
+          };
+          animateBorderColor("top");
+          animateBorderColor("bottom");
+          animateBorderColor("left");
+          animateBorderColor("right");
+      },
+  });
+  cellAnimationRegistry.add("iconChange", {
+      id: "iconChange",
+      easingFn: "easeOutCubic",
+      hasAnimation: (oldBox, newBox) => {
+          return (!hasIconLayoutChange(newBox, oldBox) &&
+              Boolean(oldBox?.icons?.center?.svg?.name !== newBox?.icons?.center?.svg?.name ||
+                  oldBox?.icons?.left?.svg?.name !== newBox?.icons?.left?.svg?.name ||
+                  oldBox?.icons?.right?.svg?.name !== newBox?.icons?.right?.svg?.name));
+      },
+      updateAnimation: function (progress, animatedBox, oldBox, newBox) {
+          const value = EASING_FN[this.easingFn](progress);
+          const slideInY = newBox.y + (value - 1) * newBox.height;
+          const slideOutY = newBox.y + value * newBox.height;
+          const newBoxes = [];
+          const animateIconChange = (side) => {
+              const oldIcon = oldBox.icons?.[side];
+              const newIcon = newBox.icons?.[side];
+              const slideInBox = {
+                  id: `${newBox.id}-icon-${side}-slide-in`,
+                  style: { verticalAlign: newBox.style.verticalAlign },
+                  x: newBox.x,
+                  y: slideInY,
+                  width: newBox.width,
+                  height: newBox.height,
+                  skipCellGridLines: true,
+                  icons: { [side]: { ...newIcon, clipRect: newBox } },
+              };
+              const slideOutBox = {
+                  id: `${newBox.id}-icon-${side}-slide-out`,
+                  style: { verticalAlign: oldBox.style.verticalAlign },
+                  x: newBox.x,
+                  y: slideOutY,
+                  width: newBox.width,
+                  height: newBox.height,
+                  skipCellGridLines: true,
+                  icons: { [side]: { ...oldIcon, clipRect: newBox } },
+              };
+              animatedBox.icons[side] = makeIconsEmpty(newBox.icons)[side];
+              newBoxes.push(slideInBox, slideOutBox);
+          };
+          animateIconChange("left");
+          animateIconChange("right");
+          animateIconChange("center");
+          return { newBoxes };
+      },
+  });
+  const EASING_FN = {
+      linear: (t) => t,
+      easeInCubic: (t) => t * t * t,
+      easeOutCubic: (t) => (t -= 1) * t * t + 1,
+      easeInOutCubic: (t) => ((t /= 0.5) < 1 ? 0.5 * t * t * t : 0.5 * ((t -= 2) * t * t + 2)),
+      easeOutQuart: (t) => -((t -= 1) * t * t * t - 1),
+  };
+  function makeIconsEmpty(icons) {
+      return {
+          left: icons.left ? { ...icons.left, svg: undefined } : undefined,
+          right: icons.right ? { ...icons.right, svg: undefined } : undefined,
+          center: icons.center ? { ...icons.center, svg: undefined } : undefined,
+      };
+  }
+  function addClipRectToIcons(icons, clipRect) {
+      return {
+          left: icons.left ? { ...icons.left, clipRect } : undefined,
+          right: icons.right ? { ...icons.right, clipRect } : undefined,
+          center: icons.center ? { ...icons.center, clipRect } : undefined,
+      };
+  }
+  /**
+   *  Check if the icons have appeared, disappeared or changed margin/size/align. Those changes affect where the text is positioned.
+   */
+  function hasIconLayoutChange(newBox, oldBox) {
+      const hasLayoutChange = (newIcon, oldIcon) => {
+          if (oldIcon && newIcon) {
+              return !!(newIcon.horizontalAlign !== oldIcon.horizontalAlign ||
+                  newIcon.size !== oldIcon.size ||
+                  newIcon.margin !== oldIcon.margin ||
+                  (newIcon.svg && !oldIcon.svg) ||
+                  (!newIcon.svg && oldIcon.svg));
+          }
+          return !!((newIcon && !oldIcon) || (!newIcon && oldIcon));
+      };
+      return (hasLayoutChange(newBox?.icons.left, oldBox?.icons.left) ||
+          hasLayoutChange(newBox?.icons.right, oldBox?.icons.right) ||
+          hasLayoutChange(newBox?.icons.center, oldBox?.icons.center));
+  }
+
+  const ANIMATION_DURATION = 1000;
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       static props = {
@@ -26299,16 +26754,101 @@ stores.inject(MyMetaStore, storeInstance);
           isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.useRef("chartContainer");
+      animationStore;
       get runtime() {
           return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
       }
       setup() {
-          owl.useEffect(() => drawGaugeChart(this.canvas.el, this.runtime), () => {
-              const canvas = this.canvas.el;
-              const rect = canvas.getBoundingClientRect();
+          if (this.env.model.getters.isDashboard()) {
+              this.animationStore = useStore(ChartAnimationStore);
+          }
+          let animation = null;
+          let lastRuntime = undefined;
+          owl.useEffect(() => {
+              if (this.env.isDashboard() &&
+                  lastRuntime === undefined && // first render
+                  this.animationStore?.animationPlayed[this.animationFigureId] !== "gauge") {
+                  animation = this.drawGaugeWithAnimation();
+                  this.animationStore?.disableAnimationForChart(this.animationFigureId, "gauge");
+              }
+              else if (this.env.isDashboard() &&
+                  lastRuntime !== undefined && // not first render
+                  !deepEquals(this.runtime, lastRuntime)) {
+                  animation = this.drawGaugeWithAnimation();
+                  this.animationStore?.disableAnimationForChart(this.animationFigureId, "gauge");
+              }
+              else {
+                  drawGaugeChart(this.canvasEl, this.runtime);
+              }
+              lastRuntime = this.runtime;
+              return () => animation?.stop();
+          }, () => {
+              const rect = this.canvasEl.getBoundingClientRect();
               return [rect.width, rect.height, this.runtime, this.canvas.el, window.devicePixelRatio];
           });
       }
+      drawGaugeWithAnimation() {
+          drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue: 0 });
+          const gaugeValue = this.runtime.gaugeValue?.value || 0;
+          const upperBound = this.runtime.maxValue.value;
+          const finalValue = Math.sign(gaugeValue) * Math.min(Math.abs(gaugeValue), Math.abs(upperBound));
+          if (finalValue === 0) {
+              return null;
+          }
+          const lowerBound = this.runtime.minValue.value;
+          const animation = new Animation(lowerBound, finalValue, ANIMATION_DURATION, (animationValue) => drawGaugeChart(this.canvasEl, { ...this.runtime, animationValue }));
+          animation.start();
+          return animation;
+      }
+      get canvasEl() {
+          return this.canvas.el;
+      }
+      get animationFigureId() {
+          return this.props.isFullScreen
+              ? this.props.figureUI.id + "-fullscreen"
+              : this.props.figureUI.id;
+      }
+  }
+  /**
+   * Animation interpolating values using the ease-out quartic curve function (chartJS default easing)
+   */
+  class Animation {
+      startValue;
+      endValue;
+      duration;
+      callback;
+      startTime = undefined;
+      animationFrameId = null;
+      constructor(startValue, endValue, duration, callback) {
+          this.startValue = startValue;
+          this.endValue = endValue;
+          this.duration = duration;
+          this.callback = callback;
+      }
+      start() {
+          this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
+      }
+      stop() {
+          if (this.animationFrameId) {
+              cancelAnimationFrame(this.animationFrameId);
+              this.animationFrameId = null;
+          }
+      }
+      animate(timestamp) {
+          if (!this.startTime) {
+              this.startTime = timestamp;
+          }
+          const elapsed = timestamp - this.startTime;
+          const progress = Math.min(elapsed / this.duration, 1);
+          const currentValue = this.startValue + (this.endValue - this.startValue) * EASING_FN.easeOutQuart(progress);
+          this.callback(currentValue);
+          if (progress < 1) {
+              this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
+          }
+          else {
+              this.stop();
+          }
+      }
   }
 
   class ComboChart extends AbstractChart {
@@ -29342,6 +29882,12 @@ stores.inject(MyMetaStore, storeInstance);
           menu.onStopHover?.(this.env);
           this.props.onMouseLeave?.(menu, ev);
       }
+      onClickMenu(menu, ev) {
+          if (!this.isEnabled(menu)) {
+              return;
+          }
+          this.props.onClickMenu?.(menu, ev);
+      }
   }
 
   /**
@@ -29840,9 +30386,6 @@ stores.inject(MyMetaStore, storeInstance);
           this.subMenu.parentMenu = undefined;
       }
       onClickMenu(menu, ev) {
-          if (!this.isEnabled(menu)) {
-              return;
-          }
           if (this.isRoot(menu)) {
               this.openSubMenu(menu, ev.currentTarget);
           }
@@ -31093,11 +31636,9 @@ stores.inject(MyMetaStore, storeInstance);
           if (!value) {
               return false;
           }
-          const range = getters.getRangeFromSheetXC(sheetId, String(criterion.values[0]));
-          const criterionValues = getters.getRangeValues(range);
+          const criterionValues = getters.getDataValidationRangeValues(sheetId, criterion);
           return criterionValues
-              .filter(isNotNull)
-              .map((value) => value.toString().toLowerCase())
+              .map((value) => value.toLowerCase())
               .includes(value.toString().toLowerCase());
       },
       getErrorString: (criterion) => _t("The value must be a value in the range %s", String(criterion.values[0])),
@@ -31269,6 +31810,12 @@ stores.inject(MyMetaStore, storeInstance);
               selectedElement?.scrollIntoView?.({ block: "nearest" });
           }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
       }
+      getCss(html) {
+          return cssPropertiesToCss({
+              color: html.color || "#000000",
+              background: html.backgroundColor,
+          });
+      }
   }
 
   class ContentEditableHelper {
@@ -31407,7 +31954,6 @@ stores.inject(MyMetaStore, storeInstance);
                   // We can only modify a node in place if it has the same type as the content
                   // that we would insert, which are spans.
                   // Otherwise, it means that the node has been input by the user, through the keyboard or a copy/paste
-                  // @ts-ignore (somehow required because jest does not like child.tagName despite the prior check)
                   const childIsSpan = child && "tagName" in child && child.tagName === "SPAN";
                   if (childIsSpan && compareContentToSpanElement(content, child)) {
                       continue;
@@ -31442,9 +31988,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               // Empty line
               if (!p.hasChildNodes()) {
-                  const span = document.createElement("span");
-                  span.appendChild(document.createElement("br"));
-                  p.appendChild(span);
+                  p.appendChild(document.createElement("span"));
               }
               // replace p if necessary
               if (newChild) {
@@ -31491,13 +32035,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getText() {
           let text = "";
-          const it = iterateChildren(this.el);
-          let current = it.next();
           let isFirstParagraph = true;
-          while (!current.done) {
-              if (!current.value.hasChildNodes()) {
-                  text += current.value.textContent;
-              }
+          let emptyParagraph = false;
+          const it = iterateChildren(this.el);
+          for (let current = it.next(); !current.done; current = it.next()) {
               if (current.value.nodeName === "P" ||
                   (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
               ) {
@@ -31507,8 +32048,15 @@ stores.inject(MyMetaStore, storeInstance);
                   else {
                       text += NEWLINE;
                   }
+                  emptyParagraph = ["<br>", "<span><br></span>"].includes(current.value.innerHTML);
+                  continue;
+              }
+              if (!current.value.hasChildNodes()) {
+                  if (current.value.nodeName === "BR" && !emptyParagraph) {
+                      text += NEWLINE;
+                  }
+                  text += current.value.textContent;
               }
-              current = it.next();
           }
           return text;
       }
@@ -32858,6 +33406,12 @@ stores.inject(MyMetaStore, storeInstance);
           owl.useEffect(() => {
               this.processTokenAtCursor();
           }, () => [this.props.composerStore.editionMode !== "inactive"]);
+          owl.useEffect(() => {
+              this.contentHelper.scrollSelectionIntoView();
+          }, () => [
+              this.props.composerStore.composerSelection.start,
+              this.props.composerStore.composerSelection.end,
+          ]);
       }
       // ---------------------------------------------------------------------------
       // Handlers
@@ -33068,6 +33622,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (this.env.isMobile() && !isIOS()) {
               return;
           }
+          this.debouncedHover.stopDebounce();
           this.contentHelper.removeSelection();
       }
       onMouseup() {
@@ -33146,7 +33701,6 @@ stores.inject(MyMetaStore, storeInstance);
                   const { start, end } = this.props.composerStore.composerSelection;
                   this.contentHelper.selectRange(start, end);
               }
-              this.contentHelper.scrollSelectionIntoView();
           }
           this.shouldProcessInputEvents = true;
       }
@@ -33622,68 +34176,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  css /* scss */ `
-  .o-dv-list-item-delete {
-    color: #666666;
-    cursor: pointer;
-  }
-`;
-  class ListCriterionForm extends CriterionForm {
-      static template = "o-spreadsheet-ListCriterionForm";
-      static components = { CriterionInput };
-      state = owl.useState({
-          numberOfValues: Math.max(this.props.criterion.values.length, 2),
-      });
-      setup() {
-          super.setup();
-          const setupDefault = (props) => {
-              if (props.criterion.displayStyle === undefined) {
-                  this.updateCriterion({ displayStyle: "arrow" });
-              }
-          };
-          owl.onWillUpdateProps(setupDefault);
-          owl.onWillStart(() => setupDefault(this.props));
-      }
-      onValueChanged(value, index) {
-          const values = [...this.displayedValues];
-          values[index] = value;
-          this.updateCriterion({ values });
-      }
-      onAddAnotherValue() {
-          this.state.numberOfValues++;
-      }
-      removeItem(index) {
-          const values = [...this.displayedValues];
-          values.splice(index, 1);
-          this.state.numberOfValues--;
-          this.updateCriterion({ values });
-      }
-      onChangedDisplayStyle(ev) {
-          const displayStyle = ev.target.value;
-          this.updateCriterion({ displayStyle });
-      }
-      onKeyDown(ev, index) {
-          if ((ev.key === "Enter" || ev.key === "Tab") && index === this.state.numberOfValues - 1) {
-              this.onAddAnotherValue();
-              this.state.focusedValueIndex = index + 1;
-              ev.preventDefault();
-          }
-          else if (ev.key === "Enter") {
-              this.state.focusedValueIndex = index + 1;
-          }
-      }
-      onBlurInput() {
-          this.state.focusedValueIndex = undefined;
-      }
-      get displayedValues() {
-          const values = [];
-          for (let i = 0; i < this.state.numberOfValues; i++) {
-              values.push(this.props.criterion.values[i] || "");
-          }
-          return values;
-      }
-  }
-
   /**
    * Start listening to pointer events and apply the given callbacks.
    *
@@ -33713,179 +34205,625 @@ stores.inject(MyMetaStore, storeInstance);
       return removeListeners;
   }
 
-  function useDragAndDropListItems() {
-      let dndHelper;
-      const previousCursor = document.body.style.cursor;
-      let cleanupFns = [];
-      const cleanUp = () => {
-          dndHelper = undefined;
-          document.body.style.cursor = previousCursor;
-          cleanupFns.forEach((fn) => fn());
-          cleanupFns = [];
-      };
-      const start = (direction, args) => {
-          const onChange = () => {
-              document.body.style.cursor = "move";
-              if (!dndHelper)
-                  return;
-              Object.assign(state.itemsStyle, dndHelper.getItemStyles());
-              args.onChange?.();
-          };
-          state.cancel = () => {
-              state.draggedItemId = undefined;
-              state.itemsStyle = {};
-              document.body.style.cursor = previousCursor;
-              args.onCancel?.();
-              cleanUp();
-          };
-          const onDragEnd = (itemId, indexAtEnd) => {
-              state.draggedItemId = undefined;
-              state.itemsStyle = {};
-              document.body.style.cursor = previousCursor;
-              args.onDragEnd?.(itemId, indexAtEnd);
-              cleanUp();
-          };
-          document.body.style.cursor = "move";
-          state.draggedItemId = args.draggedItemId;
-          const container = direction === "horizontal"
-              ? new HorizontalContainer(args.scrollableContainerEl)
-              : new VerticalContainer(args.scrollableContainerEl);
-          dndHelper = new DOMDndHelper({
-              ...args,
-              container,
-              onChange,
-              onDragEnd,
-              onCancel: state.cancel,
-          });
-          const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
-          cleanupFns.push(stopListening);
-          const onScroll = dndHelper.onScroll.bind(dndHelper);
-          args.scrollableContainerEl.addEventListener("scroll", onScroll);
-          cleanupFns.push(() => args.scrollableContainerEl.removeEventListener("scroll", onScroll));
-          cleanupFns.push(dndHelper.destroy.bind(dndHelper));
-      };
-      owl.onWillUnmount(() => {
-          cleanUp();
-      });
-      const state = owl.useState({
-          itemsStyle: {},
-          draggedItemId: undefined,
-          start,
-          cancel: () => { },
-      });
-      return state;
-  }
-  class DOMDndHelper {
-      draggedItemId;
-      items;
-      container;
-      initialMousePosition;
-      currentMousePosition;
-      initialScroll;
-      minPosition;
-      maxPosition;
-      edgeScrollIntervalId;
-      onChange;
-      onCancel;
-      onDragEnd;
-      /**
-       * The dead zone is an area in which the pointermove events are ignored.
-       *
-       * This is useful when swapping the dragged item with a larger item. After the swap,
-       * the mouse is still hovering on the item  we just swapped with. In this case, we don't want
-       * a mouse move to trigger another swap the other way around, so we create a dead zone. We will clear
-       * the dead zone when the mouse leaves the swapped item.
-       */
-      deadZone;
-      constructor(args) {
-          this.items = args.items.map((item) => ({ ...item, positionAtStart: item.position }));
-          this.draggedItemId = args.draggedItemId;
-          this.container = args.container;
-          this.onChange = args.onChange;
-          this.onCancel = args.onCancel;
-          this.onDragEnd = args.onDragEnd;
-          this.initialMousePosition = args.initialMousePosition;
-          this.currentMousePosition = args.initialMousePosition;
-          this.initialScroll = this.container.scroll;
-          this.minPosition = this.items[0].position;
-          this.maxPosition =
-              this.items[this.items.length - 1].position + this.items[this.items.length - 1].size;
+  const LINE_VERTICAL_PADDING = 1;
+  const PICKER_PADDING = 8;
+  const ITEM_BORDER_WIDTH = 1;
+  const ITEM_EDGE_LENGTH = 18;
+  const ITEMS_PER_LINE = 10;
+  const MAGNIFIER_EDGE = 16;
+  const ITEM_GAP = 2;
+  const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
+  const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
+  const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
+  const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
+  css /* scss */ `
+  .o-color-picker {
+    padding: ${PICKER_PADDING}px 0;
+    /* FIXME: this is useless, overiden by the popover container */
+    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
+    background-color: white;
+    line-height: 1.2;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: ${CONTAINER_WIDTH}px;
+
+    .o-color-picker-section-name {
+      margin: 0px ${ITEM_BORDER_WIDTH}px;
+      padding: 4px ${PICKER_PADDING}px;
+    }
+    .colors-grid {
+      display: grid;
+      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
+      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
+      grid-gap: ${ITEM_GAP}px;
+    }
+    .o-color-picker-toggler-button {
+      display: flex;
+      .o-color-picker-toggler-sign {
+        display: flex;
+        margin: auto auto;
+        width: 55%;
+        height: 55%;
+        .o-icon {
+          width: 100%;
+          height: 100%;
+        }
       }
-      getItemStyles() {
-          const styles = {};
-          for (const item of this.items) {
-              styles[item.id] = this.getItemStyle(item.id);
-          }
-          return styles;
+    }
+    .o-color-picker-line-item {
+      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
+      margin: 0px;
+      border-radius: 50px;
+      border: ${ITEM_BORDER_WIDTH}px solid #666666;
+      padding: 0px;
+      font-size: 16px;
+      background: white;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+        outline: 1px solid gray;
+        cursor: pointer;
       }
-      getItemStyle(itemId) {
-          const position = this.container.cssPositionProperty;
-          const style = {};
-          style.position = "relative";
-          style[position] = (this.getItemsPositions()[itemId] || 0) + "px";
-          style.transition = `${position} 0.5s`;
-          style["pointer-events"] = "none";
-          if (this.draggedItemId === itemId) {
-              style.transition = `${position} 0s`;
-              style["z-index"] = "1000";
-          }
-          return cssPropertiesToCss(style);
+    }
+    .o-buttons {
+      padding: ${PICKER_PADDING}px;
+      display: flex;
+      .o-cancel {
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: 100%;
+        padding: 5px;
+        font-size: 14px;
+        background: white;
+        border-radius: 4px;
+        &:hover:enabled {
+          background-color: rgba(0, 0, 0, 0.08);
+        }
       }
-      onScroll() {
-          this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
+    }
+    .o-add-button {
+      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+      padding: 4px;
+      background: white;
+      border-radius: 4px;
+      &:hover:enabled {
+        background-color: rgba(0, 0, 0, 0.08);
       }
-      onMouseMove(ev) {
-          if (ev.button > 1) {
-              this.onCancel();
-              return;
-          }
-          const mousePosition = this.container.getMousePosition(ev);
-          this.currentMousePosition = mousePosition;
-          if (mousePosition < this.container.start || mousePosition > this.container.end) {
-              this.startEdgeScroll(mousePosition < this.container.start ? -1 : 1);
-              return;
-          }
-          else {
-              this.stopEdgeScroll();
-          }
-          this.moveDraggedItemToPosition(mousePosition + this.scrollOffset);
+    }
+    .o-separator {
+      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
+      margin-top: ${MENU_SEPARATOR_PADDING}px;
+      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
+    }
+
+    .o-custom-selector {
+      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
+      position: relative;
+      .o-gradient {
+        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
+        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
+        position: relative;
       }
-      moveDraggedItemToPosition(position) {
-          const hoveredItemIndex = this.getHoveredItemIndex(position, this.items);
-          const draggedItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
-          const draggedItem = this.items[draggedItemIndex];
-          if (this.deadZone && this.isInZone(position, this.deadZone)) {
-              this.onChange(this.getItemsPositions());
-              return;
-          }
-          else if (this.isInZone(position, {
-              start: draggedItem.position,
-              end: draggedItem.position + draggedItem.size,
-          })) {
-              this.deadZone = undefined;
-          }
-          if (draggedItemIndex === hoveredItemIndex) {
-              this.onChange(this.getItemsPositions());
-              return;
-          }
-          const startIndex = Math.min(draggedItemIndex, hoveredItemIndex);
-          const endIndex = Math.max(draggedItemIndex, hoveredItemIndex);
-          const direction = Math.sign(hoveredItemIndex - draggedItemIndex);
-          let draggedItemMoveSize = 0;
-          for (let i = startIndex; i <= endIndex; i++) {
-              if (i === draggedItemIndex) {
-                  continue;
-              }
-              this.items[i].position -= direction * draggedItem.size;
-              draggedItemMoveSize += this.items[i].size;
-          }
-          draggedItem.position += direction * draggedItemMoveSize;
-          this.items.sort((item1, item2) => item1.position - item2.position);
-          this.deadZone =
-              direction > 0
-                  ? { start: position, end: draggedItem.position }
-                  : { start: draggedItem.position + draggedItem.size, end: position };
-          this.onChange(this.getItemsPositions());
+
+      .magnifier {
+        height: ${MAGNIFIER_EDGE}px;
+        width: ${MAGNIFIER_EDGE}px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        box-shadow: 0px 0px 3px #c0c0c0;
+        position: absolute;
+        z-index: 2;
+      }
+      .saturation {
+        background: linear-gradient(to right, #fff 0%, transparent 100%);
+      }
+      .lightness {
+        background: linear-gradient(to top, #000 0%, transparent 100%);
+      }
+      .o-hue-picker {
+        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
+        width: 100%;
+        height: 12px;
+        border-radius: 4px;
+        background: linear-gradient(
+          to right,
+          hsl(0 100% 50%) 0%,
+          hsl(0.2turn 100% 50%) 20%,
+          hsl(0.3turn 100% 50%) 30%,
+          hsl(0.4turn 100% 50%) 40%,
+          hsl(0.5turn 100% 50%) 50%,
+          hsl(0.6turn 100% 50%) 60%,
+          hsl(0.7turn 100% 50%) 70%,
+          hsl(0.8turn 100% 50%) 80%,
+          hsl(0.9turn 100% 50%) 90%,
+          hsl(1turn 100% 50%) 100%
+        );
+        position: relative;
+        cursor: crosshair;
+      }
+      .o-hue-slider {
+        margin-top: -3px;
+      }
+      .o-custom-input-preview {
+        padding: 2px 0px;
+        display: flex;
+        input {
+          width: 50%;
+          border-radius: 4px;
+          padding: 4px 23px 4px 10px;
+          height: 24px;
+          border: 1px solid #c0c0c0;
+          margin-right: 2px;
+        }
+        .o-wrong-color {
+          /* FIXME bootstrap class instead? */
+          outline-color: red;
+          border-color: red;
+          &:focus {
+            outline-style: solid;
+            outline-width: 1px;
+          }
+        }
+      }
+      .o-custom-input-buttons {
+        padding: 2px 0px;
+        display: flex;
+        justify-content: end;
+      }
+      .o-color-preview {
+        border: 1px solid #c0c0c0;
+        border-radius: 4px;
+        width: 50%;
+      }
+    }
+  }
+`;
+  class ColorPicker extends owl.Component {
+      static template = "o-spreadsheet-ColorPicker";
+      static props = {
+          onColorPicked: Function,
+          currentColor: { type: String, optional: true },
+          maxHeight: { type: Number, optional: true },
+          anchorRect: Object,
+          disableNoColor: { type: Boolean, optional: true },
+      };
+      static defaultProps = { currentColor: "" };
+      static components = { Popover };
+      COLORS = COLOR_PICKER_DEFAULTS;
+      state = owl.useState({
+          showGradient: false,
+          currentHslaColor: isColorValid(this.props.currentColor)
+              ? { ...hexToHSLA(this.props.currentColor), a: 1 }
+              : { h: 0, s: 100, l: 100, a: 1 },
+          customHexColor: isColorValid(this.props.currentColor) ? toHex(this.props.currentColor) : "",
+      });
+      get colorPickerStyle() {
+          if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
+              return cssPropertiesToCss({ display: "none" });
+          }
+          return "";
+      }
+      get popoverProps() {
+          return {
+              anchorRect: this.props.anchorRect,
+              maxHeight: this.props.maxHeight,
+              positioning: "bottom-left",
+              verticalOffset: 0,
+          };
+      }
+      get gradientHueStyle() {
+          const hue = this.state.currentHslaColor?.h || 0;
+          return cssPropertiesToCss({
+              background: `hsl(${hue} 100% 50%)`,
+          });
+      }
+      get sliderStyle() {
+          const hue = this.state.currentHslaColor?.h || 0;
+          const delta = Math.round((hue / 360) * INNER_GRADIENT_WIDTH);
+          const left = clip(delta, 1, INNER_GRADIENT_WIDTH) - ICON_EDGE_LENGTH / 2;
+          return cssPropertiesToCss({
+              "margin-left": `${left}px`,
+          });
+      }
+      get pointerStyle() {
+          const { s, l } = this.state.currentHslaColor || { s: 0, l: 0 };
+          const left = Math.round(INNER_GRADIENT_WIDTH * clip(s / 100, 0, 1));
+          const top = Math.round(INNER_GRADIENT_HEIGHT * clip(1 - (2 * l) / (200 - s), 0, 1));
+          return cssPropertiesToCss({
+              left: `${-MAGNIFIER_EDGE / 2 + left}px`,
+              top: `${-MAGNIFIER_EDGE / 2 + top}px`,
+              background: hslaToHex(this.state.currentHslaColor),
+          });
+      }
+      get colorPreviewStyle() {
+          return cssPropertiesToCss({
+              "background-color": hslaToHex(this.state.currentHslaColor),
+          });
+      }
+      get checkmarkColor() {
+          return chartFontColor(this.props.currentColor);
+      }
+      get isHexColorInputValid() {
+          return !this.state.customHexColor || isColorValid(this.state.customHexColor);
+      }
+      setCustomGradient({ x, y }) {
+          const offsetX = clip(x, 0, INNER_GRADIENT_WIDTH);
+          const offsetY = clip(y, 0, INNER_GRADIENT_HEIGHT);
+          const deltaX = offsetX / INNER_GRADIENT_WIDTH;
+          const deltaY = offsetY / INNER_GRADIENT_HEIGHT;
+          const s = 100 * deltaX;
+          const l = 100 * (1 - deltaY) * (1 - 0.5 * deltaX);
+          this.updateColor({ s, l });
+      }
+      setCustomHue(x) {
+          // needs to be capped such that h is in [0°, 359°]
+          const h = Math.round(clip((360 * x) / INNER_GRADIENT_WIDTH, 0, 359));
+          this.updateColor({ h });
+      }
+      updateColor(newHsl) {
+          this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
+          this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
+      }
+      onColorClick(color) {
+          if (color) {
+              this.props.onColorPicked(toHex(color));
+          }
+      }
+      resetColor() {
+          this.props.onColorPicked("");
+      }
+      toggleColorPicker() {
+          this.state.showGradient = !this.state.showGradient;
+      }
+      dragGradientPointer(ev) {
+          const initialGradientCoordinates = { x: ev.offsetX, y: ev.offsetY };
+          this.setCustomGradient(initialGradientCoordinates);
+          const initialMousePosition = { x: ev.clientX, y: ev.clientY };
+          const onMouseMove = (ev) => {
+              const currentMousePosition = { x: ev.clientX, y: ev.clientY };
+              const deltaX = currentMousePosition.x - initialMousePosition.x;
+              const deltaY = currentMousePosition.y - initialMousePosition.y;
+              const currentGradientCoordinates = {
+                  x: initialGradientCoordinates.x + deltaX,
+                  y: initialGradientCoordinates.y + deltaY,
+              };
+              this.setCustomGradient(currentGradientCoordinates);
+          };
+          startDnd(onMouseMove, () => { });
+      }
+      dragHuePointer(ev) {
+          const initialX = ev.offsetX;
+          const initialMouseX = ev.clientX;
+          this.setCustomHue(initialX);
+          const onMouseMove = (ev) => {
+              const currentMouseX = ev.clientX;
+              const deltaX = currentMouseX - initialMouseX;
+              const x = initialX + deltaX;
+              this.setCustomHue(x);
+          };
+          startDnd(onMouseMove, () => { });
+      }
+      setHexColor(ev) {
+          // only support HEX code input
+          const val = ev.target.value.replace("##", "#").slice(0, 7);
+          this.state.customHexColor = val;
+          if (!isColorValid(val)) ;
+          else {
+              this.state.currentHslaColor = { ...hexToHSLA(val), a: 1 };
+          }
+      }
+      addCustomColor(ev) {
+          if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
+              return;
+          }
+          this.props.onColorPicked(toHex(this.state.customHexColor));
+      }
+      isSameColor(color1, color2) {
+          return isSameColor(color1, color2);
+      }
+  }
+
+  class Section extends owl.Component {
+      static template = "o_spreadsheet.Section";
+      static props = {
+          class: { type: String, optional: true },
+          title: { type: String, optional: true },
+          slots: Object,
+      };
+  }
+
+  const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+</svg>
+`;
+  css /* scss */ `
+  .o-round-color-picker-button {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border: 1px solid ${GRAY_300};
+    background-position: 1px 1px;
+    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
+  }
+`;
+  class RoundColorPicker extends owl.Component {
+      static template = "o-spreadsheet.RoundColorPicker";
+      static components = { Section, ColorPicker };
+      static props = {
+          currentColor: { type: String, optional: true },
+          title: { type: String, optional: true },
+          onColorPicked: Function,
+          disableNoColor: { type: Boolean, optional: true },
+      };
+      colorPickerButtonRef = owl.useRef("colorPickerButton");
+      state;
+      setup() {
+          this.state = owl.useState({ pickerOpened: false });
+          owl.useExternalListener(window, "click", this.closePicker);
+      }
+      closePicker() {
+          this.state.pickerOpened = false;
+      }
+      togglePicker() {
+          this.state.pickerOpened = !this.state.pickerOpened;
+      }
+      onColorPicked(color) {
+          this.props.onColorPicked(color);
+          this.state.pickerOpened = false;
+      }
+      get colorPickerAnchorRect() {
+          const button = this.colorPickerButtonRef.el;
+          return getBoundingRectAsPOJO(button);
+      }
+      get buttonStyle() {
+          return cssPropertiesToCss({
+              background: this.props.currentColor,
+          });
+      }
+  }
+
+  css /* scss */ `
+  .o-dv-list-item-delete {
+    color: #666666;
+    cursor: pointer;
+  }
+`;
+  class ListCriterionForm extends CriterionForm {
+      static template = "o-spreadsheet-ListCriterionForm";
+      static components = { CriterionInput, RoundColorPicker };
+      state = owl.useState({
+          numberOfValues: Math.max(this.props.criterion.values.length, 2),
+      });
+      setup() {
+          super.setup();
+          const setupDefault = (props) => {
+              if (props.criterion.displayStyle === undefined) {
+                  this.updateCriterion({ displayStyle: "chip" });
+              }
+          };
+          owl.onWillUpdateProps(setupDefault);
+          owl.onWillStart(() => setupDefault(this.props));
+      }
+      onValueChanged(value, index) {
+          const values = [...this.displayedValues];
+          values[index] = value;
+          this.updateCriterion({ values });
+      }
+      onColorChanged(color, value) {
+          const colors = { ...this.props.criterion.colors };
+          colors[value] = color || undefined;
+          this.updateCriterion({ colors });
+      }
+      onAddAnotherValue() {
+          this.state.numberOfValues++;
+      }
+      removeItem(index) {
+          const values = [...this.displayedValues];
+          values.splice(index, 1);
+          this.state.numberOfValues--;
+          this.updateCriterion({ values });
+      }
+      onChangedDisplayStyle(ev) {
+          const displayStyle = ev.target.value;
+          this.updateCriterion({ displayStyle });
+      }
+      onKeyDown(ev, index) {
+          if ((ev.key === "Enter" || ev.key === "Tab") && index === this.state.numberOfValues - 1) {
+              this.onAddAnotherValue();
+              this.state.focusedValueIndex = index + 1;
+              ev.preventDefault();
+          }
+          else if (ev.key === "Enter") {
+              this.state.focusedValueIndex = index + 1;
+          }
+      }
+      onBlurInput() {
+          this.state.focusedValueIndex = undefined;
+      }
+      get displayedValues() {
+          const values = [];
+          for (let i = 0; i < this.state.numberOfValues; i++) {
+              values.push(this.props.criterion.values[i] || "");
+          }
+          return values;
+      }
+  }
+
+  function useDragAndDropListItems() {
+      let dndHelper;
+      const previousCursor = document.body.style.cursor;
+      let cleanupFns = [];
+      const cleanUp = () => {
+          dndHelper = undefined;
+          document.body.style.cursor = previousCursor;
+          cleanupFns.forEach((fn) => fn());
+          cleanupFns = [];
+      };
+      const start = (direction, args) => {
+          const onChange = () => {
+              document.body.style.cursor = "move";
+              if (!dndHelper)
+                  return;
+              Object.assign(state.itemsStyle, dndHelper.getItemStyles());
+              args.onChange?.();
+          };
+          state.cancel = () => {
+              state.draggedItemId = undefined;
+              state.itemsStyle = {};
+              document.body.style.cursor = previousCursor;
+              args.onCancel?.();
+              cleanUp();
+          };
+          const onDragEnd = (itemId, indexAtEnd) => {
+              state.draggedItemId = undefined;
+              state.itemsStyle = {};
+              document.body.style.cursor = previousCursor;
+              args.onDragEnd?.(itemId, indexAtEnd);
+              cleanUp();
+          };
+          document.body.style.cursor = "move";
+          state.draggedItemId = args.draggedItemId;
+          const container = direction === "horizontal"
+              ? new HorizontalContainer(args.scrollableContainerEl)
+              : new VerticalContainer(args.scrollableContainerEl);
+          dndHelper = new DOMDndHelper({
+              ...args,
+              container,
+              onChange,
+              onDragEnd,
+              onCancel: state.cancel,
+          });
+          const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
+          cleanupFns.push(stopListening);
+          const onScroll = dndHelper.onScroll.bind(dndHelper);
+          args.scrollableContainerEl.addEventListener("scroll", onScroll);
+          cleanupFns.push(() => args.scrollableContainerEl.removeEventListener("scroll", onScroll));
+          cleanupFns.push(dndHelper.destroy.bind(dndHelper));
+      };
+      owl.onWillUnmount(() => {
+          cleanUp();
+      });
+      const state = owl.useState({
+          itemsStyle: {},
+          draggedItemId: undefined,
+          start,
+          cancel: () => { },
+      });
+      return state;
+  }
+  class DOMDndHelper {
+      draggedItemId;
+      items;
+      container;
+      initialMousePosition;
+      currentMousePosition;
+      initialScroll;
+      minPosition;
+      maxPosition;
+      edgeScrollIntervalId;
+      onChange;
+      onCancel;
+      onDragEnd;
+      /**
+       * The dead zone is an area in which the pointermove events are ignored.
+       *
+       * This is useful when swapping the dragged item with a larger item. After the swap,
+       * the mouse is still hovering on the item  we just swapped with. In this case, we don't want
+       * a mouse move to trigger another swap the other way around, so we create a dead zone. We will clear
+       * the dead zone when the mouse leaves the swapped item.
+       */
+      deadZone;
+      constructor(args) {
+          this.items = args.items.map((item) => ({ ...item, positionAtStart: item.position }));
+          this.draggedItemId = args.draggedItemId;
+          this.container = args.container;
+          this.onChange = args.onChange;
+          this.onCancel = args.onCancel;
+          this.onDragEnd = args.onDragEnd;
+          this.initialMousePosition = args.initialMousePosition;
+          this.currentMousePosition = args.initialMousePosition;
+          this.initialScroll = this.container.scroll;
+          this.minPosition = this.items[0].position;
+          this.maxPosition =
+              this.items[this.items.length - 1].position + this.items[this.items.length - 1].size;
+      }
+      getItemStyles() {
+          const styles = {};
+          for (const item of this.items) {
+              styles[item.id] = this.getItemStyle(item.id);
+          }
+          return styles;
+      }
+      getItemStyle(itemId) {
+          const position = this.container.cssPositionProperty;
+          const style = {};
+          style.position = "relative";
+          style[position] = (this.getItemsPositions()[itemId] || 0) + "px";
+          style.transition = `${position} 0.5s`;
+          style["pointer-events"] = "none";
+          if (this.draggedItemId === itemId) {
+              style.transition = `${position} 0s`;
+              style["z-index"] = "1000";
+          }
+          return cssPropertiesToCss(style);
+      }
+      onScroll() {
+          this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
+      }
+      onMouseMove(ev) {
+          if (ev.button > 1) {
+              this.onCancel();
+              return;
+          }
+          const mousePosition = this.container.getMousePosition(ev);
+          this.currentMousePosition = mousePosition;
+          if (mousePosition < this.container.start || mousePosition > this.container.end) {
+              this.startEdgeScroll(mousePosition < this.container.start ? -1 : 1);
+              return;
+          }
+          else {
+              this.stopEdgeScroll();
+          }
+          this.moveDraggedItemToPosition(mousePosition + this.scrollOffset);
+      }
+      moveDraggedItemToPosition(position) {
+          const hoveredItemIndex = this.getHoveredItemIndex(position, this.items);
+          const draggedItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
+          const draggedItem = this.items[draggedItemIndex];
+          if (this.deadZone && this.isInZone(position, this.deadZone)) {
+              this.onChange(this.getItemsPositions());
+              return;
+          }
+          else if (this.isInZone(position, {
+              start: draggedItem.position,
+              end: draggedItem.position + draggedItem.size,
+          })) {
+              this.deadZone = undefined;
+          }
+          if (draggedItemIndex === hoveredItemIndex) {
+              this.onChange(this.getItemsPositions());
+              return;
+          }
+          const startIndex = Math.min(draggedItemIndex, hoveredItemIndex);
+          const endIndex = Math.max(draggedItemIndex, hoveredItemIndex);
+          const direction = Math.sign(hoveredItemIndex - draggedItemIndex);
+          let draggedItemMoveSize = 0;
+          for (let i = startIndex; i <= endIndex; i++) {
+              if (i === draggedItemIndex) {
+                  continue;
+              }
+              this.items[i].position -= direction * draggedItem.size;
+              draggedItemMoveSize += this.items[i].size;
+          }
+          draggedItem.position += direction * draggedItemMoveSize;
+          this.items.sort((item1, item2) => item1.position - item2.position);
+          this.deadZone =
+              direction > 0
+                  ? { start: position, end: draggedItem.position }
+                  : { start: draggedItem.position + draggedItem.size, end: position };
+          this.onChange(this.getItemsPositions());
       }
       onMouseUp(ev) {
           if (ev.button !== 0) {
@@ -34572,12 +35510,12 @@ stores.inject(MyMetaStore, storeInstance);
 
   class ValueInRangeCriterionForm extends CriterionForm {
       static template = "o-spreadsheet-ValueInRangeCriterionForm";
-      static components = { SelectionInput };
+      static components = { RoundColorPicker, SelectionInput };
       setup() {
           super.setup();
           const setupDefault = (props) => {
               if (props.criterion.displayStyle === undefined) {
-                  this.updateCriterion({ displayStyle: "arrow" });
+                  this.updateCriterion({ displayStyle: "chip" });
               }
           };
           owl.onWillUpdateProps(setupDefault);
@@ -34590,6 +35528,16 @@ stores.inject(MyMetaStore, storeInstance);
           const displayStyle = ev.target.value;
           this.updateCriterion({ displayStyle });
       }
+      onColorChanged(color, value) {
+          const colors = { ...this.props.criterion.colors };
+          colors[value] = color || undefined;
+          this.updateCriterion({ colors });
+      }
+      get values() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          const values = this.env.model.getters.getDataValidationRangeValues(sheetId, this.props.criterion);
+          return new Set(values);
+      }
   }
 
   const criterionCategoriesSequences = {
@@ -36093,6 +37041,7 @@ stores.inject(MyMetaStore, storeInstance);
   // We need here the svg of the icons that we need to convert to images for the renderer
   // -----------------------------------------------------------------------------
   const ARROW_DOWN = {
+      name: "ARROW_DOWN",
       width: 448,
       height: 512,
       paths: [
@@ -36103,6 +37052,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const ARROW_UP = {
+      name: "ARROW_UP",
       width: 448,
       height: 512,
       paths: [
@@ -36113,6 +37063,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const ARROW_RIGHT = {
+      name: "ARROW_RIGHT",
       width: 448,
       height: 512,
       paths: [
@@ -36123,6 +37074,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const SMILE = {
+      name: "SMILE",
       width: 496,
       height: 512,
       paths: [
@@ -36133,6 +37085,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const MEH = {
+      name: "MEH",
       width: 496,
       height: 512,
       paths: [
@@ -36143,6 +37096,7 @@ stores.inject(MyMetaStore, storeInstance);
       ],
   };
   const FROWN = {
+      name: "FROWN",
       width: 496,
       height: 512,
       paths: [
@@ -36154,44 +37108,79 @@ stores.inject(MyMetaStore, storeInstance);
   };
   const DOT_PATH = "M256 9 a247 247 0 1 0.1 0 0";
   const GREEN_DOT = {
+      name: "GREEN_DOT",
       width: 512,
       height: 512,
       paths: [{ fillColor: "#6AA84F", path: DOT_PATH }],
   };
   const YELLOW_DOT = {
+      name: "YELLOW_DOT",
       width: 512,
       height: 512,
       paths: [{ fillColor: "#F0AD4E", path: DOT_PATH }],
   };
   const RED_DOT = {
+      name: "RED_DOT",
       width: 512,
       height: 512,
       paths: [{ fillColor: "#E06666", path: DOT_PATH }],
   };
-  const CARET_DOWN = {
-      width: 512,
-      height: 512,
-      paths: [{ fillColor: TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
-  };
-  const HOVERED_CARET_DOWN = {
-      width: 512,
-      height: 512,
-      paths: [
-          { fillColor: TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
-          { fillColor: "#fff", path: "M120 195 h270 l-135 130" },
-      ],
-  };
+  function getCaretDownSvg(color) {
+      return {
+          name: "CARET_DOWN",
+          width: 512,
+          height: 512,
+          paths: [{ fillColor: color.textColor || TEXT_BODY_MUTED, path: "M120 195 h270 l-135 130" }],
+      };
+  }
+  function getHoveredCaretDownSvg(color) {
+      return {
+          name: "CARET_DOWN",
+          width: 512,
+          height: 512,
+          paths: [
+              { fillColor: color.textColor || TEXT_BODY_MUTED, path: "M15 15 h482 v482 h-482" },
+              { fillColor: color.fillColor || "#fff", path: "M120 195 h270 l-135 130" },
+          ],
+      };
+  }
+  const CHIP_CARET_DOWN_PATH = "M40 185 h270 l-135 128";
+  function getChipSvg(chipStyle) {
+      return {
+          name: "CHIP",
+          width: 512,
+          height: 512,
+          paths: [{ fillColor: chipStyle.textColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH }],
+      };
+  }
+  function getHoveredChipSvg(chipStyle) {
+      return {
+          name: "CHIP",
+          width: 512,
+          height: 512,
+          paths: [
+              {
+                  fillColor: chipStyle.textColor || TEXT_BODY_MUTED,
+                  path: "M0,225 A175,175 0 1,0 350,225 A175,175 0 1,0 0,225",
+              },
+              { fillColor: chipStyle.fillColor || TEXT_BODY_MUTED, path: CHIP_CARET_DOWN_PATH },
+          ],
+      };
+  }
   const CHECKBOX_UNCHECKED = {
+      name: "CHECKBOX_UNCHECKED",
       width: 512,
       height: 512,
       paths: [{ fillColor: GRAY_300, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
   };
   const CHECKBOX_UNCHECKED_HOVERED = {
+      name: "CHECKBOX_UNCHECKED",
       width: 512,
       height: 512,
       paths: [{ fillColor: ACTION_COLOR, path: "M45,45 h422 v422 h-422 v-422 m30,30 v362 h362 v-362" }],
   };
   const CHECKBOX_CHECKED = {
+      name: "CHECKBOX_CHECKED",
       width: 512,
       height: 512,
       paths: [
@@ -36204,6 +37193,7 @@ stores.inject(MyMetaStore, storeInstance);
           ? "M149,235 h213 v43 h-213 M235,149 h43 v213 h-43" // +
           : "M149,235 h213 v43 h-213"; // -
       return {
+          name: "PIVOT_ICON",
           width: 512,
           height: 512,
           paths: [
@@ -36230,6 +37220,7 @@ stores.inject(MyMetaStore, storeInstance);
           colors.hoverBackgroundColor = "#fff";
       }
       return {
+          name: "DATA_FILTER_ICON",
           width: isActive ? 24 : 850,
           height: isActive ? 24 : 850,
           paths: [
@@ -40425,6 +41416,23 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return data;
       },
+  })
+      .add("18.4.3", {
+      migrate(data) {
+          if (!data.pivots) {
+              return data;
+          }
+          for (const pivotId in data.pivots) {
+              const pivot = data.pivots[pivotId];
+              if (pivot.sortedColumn) {
+                  const measure = pivot.measures.find((measure) => measure.fieldName === pivot.sortedColumn?.measure);
+                  if (measure) {
+                      pivot.sortedColumn.measure = measure.id;
+                  }
+              }
+          }
+          return data;
+      },
   });
   function fixOverlappingFilters(data) {
       for (const sheet of data.sheets || []) {
@@ -41088,6 +42096,10 @@ stores.inject(MyMetaStore, storeInstance);
       });
   };
   const CAN_REMOVE_COLUMNS_ROWS = (dimension, env) => {
+      if ((dimension === "COL" && env.model.getters.getActiveRows().size > 0) ||
+          (dimension === "ROW" && env.model.getters.getActiveCols().size > 0)) {
+          return false;
+      }
       const sheetId = env.model.getters.getActiveSheetId();
       const selectedElements = env.model.getters.getElementsFromSelection(dimension);
       const includesAllVisibleHeaders = env.model.getters.checkElementsIncludeAllVisibleHeaders(sheetId, dimension, selectedElements);
@@ -42642,7 +43654,7 @@ stores.inject(MyMetaStore, storeInstance);
                   criterion: {
                       type: "isValueInList",
                       values: [],
-                      displayStyle: "arrow",
+                      displayStyle: "chip",
                   },
               },
           });
@@ -44557,6 +45569,11 @@ stores.inject(MyMetaStore, storeInstance);
       rect = this.defaultRect;
       isEditing = false;
       isCellReferenceVisible = false;
+      currentEditedCell = {
+          col: 0,
+          row: 0,
+          sheetId: this.env.model.getters.getActiveSheetId(),
+      };
       composerStore;
       composerFocusStore;
       composerInterface;
@@ -44681,12 +45698,17 @@ stores.inject(MyMetaStore, storeInstance);
           if (!isEditing && this.composerFocusStore.activeComposer !== this.composerInterface) {
               this.composerFocusStore.focusComposer(this.composerInterface, { focusMode: "inactive" });
           }
+          let shouldRecomputeRect = !deepEquals(this.currentEditedCell, this.composerStore.currentEditedCell);
           if (this.isEditing !== isEditing) {
               this.isEditing = isEditing;
               if (!isEditing) {
                   this.rect = this.defaultRect;
                   return;
               }
+              this.currentEditedCell = this.composerStore.currentEditedCell;
+              shouldRecomputeRect = true;
+          }
+          if (shouldRecomputeRect) {
               const position = this.env.model.getters.getActivePosition();
               const zone = this.env.model.getters.expandZone(position.sheetId, positionToZone(position));
               this.rect = this.env.model.getters.getVisibleRect(zone);
@@ -45477,15 +46499,16 @@ stores.inject(MyMetaStore, storeInstance);
       return state;
   }
 
+  const PAINT_FORMAT_HANDLER_KEYS = [
+      "cell",
+      "border",
+      "table",
+      "conditionalFormat",
+      "merge",
+  ];
   class PaintFormatStore extends SpreadsheetStore {
       mutators = ["activate", "cancel", "pasteFormat"];
       highlightStore = this.get(HighlightStore);
-      clipboardHandlers = [
-          new CellClipboardHandler(this.getters, this.model.dispatch),
-          new BorderClipboardHandler(this.getters, this.model.dispatch),
-          new TableClipboardHandler(this.getters, this.model.dispatch),
-          new ConditionalFormatClipboardHandler(this.getters, this.model.dispatch),
-      ];
       status = "inactive";
       copiedData;
       constructor(get) {
@@ -45516,24 +46539,38 @@ stores.inject(MyMetaStore, storeInstance);
       get isActive() {
           return this.status !== "inactive";
       }
+      get clipboardHandlers() {
+          return PAINT_FORMAT_HANDLER_KEYS.map((handlerName) => {
+              const HandlerClass = clipboardHandlersRegistries.cellHandlers.get(handlerName);
+              return {
+                  handlerName,
+                  handler: new HandlerClass(this.getters, this.model.dispatch),
+              };
+          });
+      }
       copyFormats() {
           const sheetId = this.getters.getActiveSheetId();
           const zones = this.getters.getSelectedZones();
-          const copiedData = {};
-          for (const handler of this.clipboardHandlers) {
-              Object.assign(copiedData, handler.copy(getClipboardDataPositions(sheetId, zones), false));
+          const copiedData = { zones, sheetId };
+          for (const { handlerName, handler } of this.clipboardHandlers) {
+              const handlerResult = handler.copy(getClipboardDataPositions(sheetId, zones), false);
+              if (handlerResult !== undefined) {
+                  copiedData[handlerName] = handlerResult;
+              }
           }
           return copiedData;
       }
       paintFormat(sheetId, target) {
-          if (this.copiedData) {
-              for (const handler of this.clipboardHandlers) {
-                  handler.paste({ zones: target, sheetId }, this.copiedData, {
-                      isCutOperation: false,
-                      pasteOption: "onlyFormat",
-                  });
-              }
+          if (!this.copiedData) {
+              return;
           }
+          const options = {
+              isCutOperation: false,
+              pasteOption: "onlyFormat",
+          };
+          const { target: pasteTarget, selectedZones } = getPasteTargetFromHandlers(sheetId, target, this.copiedData, this.clipboardHandlers, options);
+          applyClipboardHandlersPaste(this.clipboardHandlers, this.copiedData, pasteTarget, options);
+          selectPastedZone(this.model.selection, target, selectedZones);
           if (this.status === "oneOff") {
               this.cancel();
           }
@@ -45580,12 +46617,8 @@ stores.inject(MyMetaStore, storeInstance);
           this.row = undefined;
       }
       computeOverlay() {
-          if (!this.getters.isDashboard()) {
-              return;
-          }
           this.overlayColors = new PositionMap();
-          const col = this.col;
-          const row = this.row;
+          const { col, row } = this;
           if (col === undefined || row === undefined) {
               return;
           }
@@ -45594,9 +46627,16 @@ stores.inject(MyMetaStore, storeInstance);
           if (!table) {
               return;
           }
-          const { left, right } = table.range.zone;
-          for (let c = left; c <= right; c++) {
-              this.overlayColors.set({ sheetId, col: c, row }, setColorAlpha("#017E84", 0.08));
+          const { left, right, top } = table.range.zone;
+          const isTableHeader = row < top + table.config.numberOfHeaders;
+          const doesTableRowHaveContent = range(left, right + 1).some((col) => {
+              return (!this.getters.isColHidden(sheetId, col) &&
+                  this.getters.getEvaluatedCell({ sheetId, col, row }).formattedValue);
+          });
+          if (!isTableHeader && doesTableRowHaveContent) {
+              for (let col = left; col <= right; col++) {
+                  this.overlayColors.set({ sheetId, col, row }, TABLE_HOVER_BACKGROUND_COLOR);
+              }
           }
       }
   }
@@ -45792,11 +46832,14 @@ stores.inject(MyMetaStore, storeInstance);
       onCellClicked(ev) {
           const openedPopover = this.cellPopovers.persistentCellPopover;
           const [col, row] = this.getCartesianCoordinates(ev);
+          const clickedIcon = this.getInteractiveIconAtEvent(ev);
+          if (clickedIcon) {
+              this.env.model.selection.getBackToDefault();
+          }
           this.props.onCellClicked(col, row, {
               expandZone: ev.shiftKey,
               addZone: isCtrlKey(ev),
           }, ev);
-          const clickedIcon = this.getInteractiveIconAtEvent(ev);
           if (clickedIcon?.onClick) {
               clickedIcon.onClick(clickedIcon.position, this.env);
           }
@@ -45841,7 +46884,10 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const icons = this.env.model.getters.getCellIcons(position);
           const icon = icons.find((icon) => {
-              return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon));
+              const merge = this.env.model.getters.getMerge(position);
+              const zone = merge || positionToZone(position);
+              const cellRect = this.env.model.getters.getRect(zone);
+              return isPointInsideRect(x, y, this.env.model.getters.getCellIconRect(icon, cellRect));
           });
           return icon?.onClick ? icon : undefined;
       }
@@ -46578,19 +47624,56 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class GridRenderer {
-      getters;
-      renderer;
+  const CELL_ANIMATION_DURATION = 200;
+  class GridRenderer extends SpreadsheetStore {
       fingerprints;
       hoveredTables;
       hoveredIcon;
+      lastRenderBoxes = new Map();
+      preventNewAnimationsInNextFrame = false;
+      zonesWithPreventedAnimationsInNextFrame = [];
+      animations = new Map();
       constructor(get) {
+          super(get);
           this.getters = get(ModelStore).getters;
-          this.renderer = get(RendererStore);
           this.fingerprints = get(FormulaFingerprintStore);
           this.hoveredTables = get(HoveredTableStore);
           this.hoveredIcon = get(HoveredIconStore);
-          this.renderer.register(this);
+      }
+      handle(cmd) {
+          switch (cmd.type) {
+              case "START":
+              case "ACTIVATE_SHEET":
+              case "ADD_COLUMNS_ROWS":
+              case "REMOVE_COLUMNS_ROWS":
+                  this.animations.clear();
+                  this.preventNewAnimationsInNextFrame = true;
+                  break;
+              case "RESIZE_COLUMNS_ROWS":
+                  this.preventNewAnimationsInNextFrame = true;
+                  break;
+              case "REDO":
+                  this.zonesWithPreventedAnimationsInNextFrame = [];
+                  break;
+              case "UNDO":
+                  for (const command of cmd.commands) {
+                      if (command.type === "ADD_COLUMNS_ROWS" ||
+                          command.type === "REMOVE_COLUMNS_ROWS" ||
+                          command.type === "RESIZE_COLUMNS_ROWS") {
+                          this.animations.clear();
+                          this.preventNewAnimationsInNextFrame = true;
+                          break;
+                      }
+                  }
+                  break;
+              case "PASTE":
+                  this.zonesWithPreventedAnimationsInNextFrame.push(...this.getters.getSelectedZones());
+                  break;
+              case "UPDATE_CELL":
+                  const zones = this.getters.getCommandZones(cmd);
+                  this.zonesWithPreventedAnimationsInNextFrame.push(...zones);
+                  break;
+          }
       }
       get renderingLayers() {
           return ["Background", "Headers"];
@@ -46598,17 +47681,20 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // Grid rendering
       // ---------------------------------------------------------------------------
-      drawLayer(renderingContext, layer) {
+      drawLayer(renderingContext, layer, timeStamp) {
           switch (layer) {
               case "Background":
                   this.drawGlobalBackground(renderingContext);
+                  const oldBoxes = this.lastRenderBoxes;
+                  this.lastRenderBoxes = new Map();
                   for (const { zone, rect } of this.getters.getAllActiveViewportsZonesAndRect()) {
                       const { ctx } = renderingContext;
                       ctx.save();
                       ctx.beginPath();
                       ctx.rect(rect.x, rect.y, rect.width, rect.height);
                       ctx.clip();
-                      const boxes = this.getGridBoxes(zone);
+                      const boxesWithoutAnimations = this.getGridBoxes(zone);
+                      const boxes = this.getBoxesWithAnimations(boxesWithoutAnimations, oldBoxes, timeStamp);
                       this.drawBackground(renderingContext, boxes);
                       this.drawOverflowingCellBackground(renderingContext, boxes);
                       this.drawCellBackground(renderingContext, boxes);
@@ -46618,6 +47704,8 @@ stores.inject(MyMetaStore, storeInstance);
                       ctx.restore();
                   }
                   this.drawFrozenPanes(renderingContext);
+                  this.preventNewAnimationsInNextFrame = false;
+                  this.zonesWithPreventedAnimationsInNextFrame = [];
                   break;
               case "Headers":
                   if (!this.getters.isDashboard()) {
@@ -46641,6 +47729,8 @@ stores.inject(MyMetaStore, storeInstance);
           const inset = areGridLinesVisible ? 0.1 * thinLineWidth : 0;
           if (areGridLinesVisible) {
               for (const box of boxes) {
+                  if (box.skipCellGridLines)
+                      continue;
                   ctx.strokeStyle = CELL_BORDER_COLOR;
                   ctx.lineWidth = thinLineWidth;
                   ctx.strokeRect(box.x + inset, box.y + inset, box.width - 2 * inset, box.height - 2 * inset);
@@ -46661,6 +47751,19 @@ stores.inject(MyMetaStore, storeInstance);
                   const width = box.width * (percentage / 100);
                   ctx.fillRect(box.x, box.y, width, box.height);
               }
+              if (box?.chip) {
+                  ctx.save();
+                  ctx.beginPath();
+                  ctx.rect(box.x, box.y, box.width, box.height);
+                  ctx.clip();
+                  const chip = box.chip;
+                  ctx.fillStyle = chip.color;
+                  const radius = 10;
+                  ctx.beginPath();
+                  ctx.roundRect(chip.x, chip.y, chip.width, chip.height, radius);
+                  ctx.fill();
+                  ctx.restore();
+              }
               if (box.overlayColor) {
                   ctx.fillStyle = box.overlayColor;
                   ctx.fillRect(box.x, box.y, box.width, box.height);
@@ -46735,7 +47838,8 @@ stores.inject(MyMetaStore, storeInstance);
            * each line and adding 1 pixel to the end of each line (depending on the direction of the
            * line).
            */
-          function drawBorder({ style, color }, x1, y1, x2, y2) {
+          function drawBorder({ color, style, opacity }, x1, y1, x2, y2) {
+              ctx.globalAlpha = opacity ?? 1;
               ctx.strokeStyle = color;
               switch (style) {
                   case "medium":
@@ -46783,6 +47887,7 @@ stores.inject(MyMetaStore, storeInstance);
               ctx.stroke();
               ctx.lineWidth = 1;
               ctx.setLineDash([]);
+              ctx.globalAlpha = 1;
           }
       }
       drawTexts(renderingContext, boxes) {
@@ -46791,6 +47896,7 @@ stores.inject(MyMetaStore, storeInstance);
           let currentFont;
           for (const box of boxes) {
               if (box.content) {
+                  ctx.globalAlpha = box.textOpacity ?? 1;
                   const style = box.style || {};
                   const align = box.content.align || "left";
                   // compute font and textColor
@@ -46800,19 +47906,6 @@ stores.inject(MyMetaStore, storeInstance);
                       ctx.font = font;
                   }
                   ctx.fillStyle = style.textColor || "#000";
-                  // compute horizontal align start point parameter
-                  let x = box.x;
-                  if (align === "left") {
-                      const leftIconSize = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
-                      x += MIN_CELL_TEXT_MARGIN + leftIconSize;
-                  }
-                  else if (align === "right") {
-                      const rightIconSize = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
-                      x += box.width - MIN_CELL_TEXT_MARGIN - rightIconSize;
-                  }
-                  else {
-                      x += box.width / 2;
-                  }
                   // horizontal align text direction
                   ctx.textAlign = align;
                   // clip rect if needed
@@ -46823,19 +47916,18 @@ stores.inject(MyMetaStore, storeInstance);
                       ctx.rect(x, y, width, height);
                       ctx.clip();
                   }
-                  // compute vertical align start point parameter:
-                  const textLineHeight = computeTextFontSizeInPixels(style);
-                  const numberOfLines = box.content.textLines.length;
-                  let y = this.getters.computeTextYCoordinate(box, textLineHeight, style.verticalAlign, numberOfLines);
+                  const x = box.content.x;
+                  let y = box.content.y;
                   // use the horizontal and the vertical start points to:
                   // fill text / fill strikethrough / fill underline
                   for (const brokenLine of box.content.textLines) {
-                      drawDecoratedText(ctx, brokenLine, { x: Math.round(x), y: Math.round(y) }, style.underline, style.strikethrough);
-                      y += MIN_CELL_TEXT_MARGIN + textLineHeight;
+                      drawDecoratedText(ctx, brokenLine, { x, y }, style.underline, style.strikethrough);
+                      y += MIN_CELL_TEXT_MARGIN + box.content.fontSizePx;
                   }
                   if (box.clipRect) {
                       ctx.restore();
                   }
+                  ctx.globalAlpha = 1;
               }
           }
       }
@@ -46853,10 +47945,11 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   ctx.save();
                   ctx.beginPath();
-                  ctx.rect(box.x, box.y, box.width, box.height);
+                  const clipRect = icon.clipRect || box;
+                  ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
                   ctx.clip();
                   const iconSize = icon.size;
-                  const { x, y } = this.getters.getCellIconRect(icon);
+                  const { x, y } = this.getters.getCellIconRect(icon, box);
                   ctx.translate(x, y);
                   ctx.scale(iconSize / svg.width, iconSize / svg.height);
                   for (const path of svg.paths) {
@@ -47065,12 +48158,15 @@ stores.inject(MyMetaStore, storeInstance);
           const cell = this.getters.getEvaluatedCell(position);
           const showFormula = this.getters.shouldShowFormulas();
           const { x, y, width, height } = this.getters.getRect(zone);
-          const { verticalAlign } = this.getters.getCellStyle(position);
+          const chipStyle = this.getters.getDataValidationChipStyle(position);
           let style = this.getters.getCellComputedStyle(position);
           if (this.fingerprints.isEnabled) {
               const fingerprintColor = this.fingerprints.colors.get(position);
               style = { ...style, fillColor: fingerprintColor };
           }
+          if (chipStyle?.textColor) {
+              style = { ...style, textColor: chipStyle.textColor };
+          }
           const dataBarFill = this.fingerprints.isEnabled
               ? undefined
               : this.getters.getConditionalDataBar(position);
@@ -47081,6 +48177,7 @@ stores.inject(MyMetaStore, storeInstance);
               center: iconsList.find((icon) => icon?.horizontalAlign === "center"),
           };
           const box = {
+              id: zoneToXc(zone),
               x,
               y,
               width,
@@ -47088,11 +48185,11 @@ stores.inject(MyMetaStore, storeInstance);
               border: this.getters.getCellComputedBorder(position) || undefined,
               style,
               dataBarFill,
-              verticalAlign,
               overlayColor: this.hoveredTables.overlayColors.get(position),
               isError: (cell.type === CellValueType.error && !!cell.message) ||
                   this.getters.isDataValidationInvalid(position),
               icons: cellIcons,
+              disabledAnimation: this.zonesWithPreventedAnimationsInNextFrame.some((z) => isZoneInside(zone, z) || overlap(zone, z)),
           };
           const fontSizePX = computeTextFontSizeInPixels(box.style);
           if (cell.type === CellValueType.empty || box.icons.center) {
@@ -47104,22 +48201,55 @@ stores.inject(MyMetaStore, storeInstance);
           const maxWidth = width - 2 * MIN_CELL_TEXT_MARGIN;
           const multiLineText = this.getters.getCellMultiLineText(position, { maxWidth, wrapText });
           const textWidth = Math.max(...multiLineText.map((line) => this.getters.getTextWidth(line, style) + MIN_CELL_TEXT_MARGIN));
+          const chipMargin = chipStyle ? DATA_VALIDATION_CHIP_MARGIN : 0;
           const leftIconWidth = box.icons.left ? box.icons.left.size + box.icons.left.margin : 0;
+          const leftMargin = leftIconWidth + chipMargin;
           const rightIconWidth = box.icons.right ? box.icons.right.size + box.icons.right.margin : 0;
-          const contentWidth = leftIconWidth + textWidth + rightIconWidth;
+          const rightMargin = rightIconWidth + chipMargin;
+          const contentWidth = leftMargin + textWidth + rightMargin;
           const align = this.computeCellAlignment(position, contentWidth > width);
+          // compute vertical align start point parameter:
+          const numberOfLines = multiLineText.length;
+          const contentY = Math.round(this.getters.computeTextYCoordinate(box, fontSizePX, style.verticalAlign, numberOfLines));
+          // compute horizontal align start point parameter
+          let contentX = box.x;
+          if (align === "left") {
+              contentX += MIN_CELL_TEXT_MARGIN + leftMargin;
+          }
+          else if (align === "right") {
+              contentX += box.width - MIN_CELL_TEXT_MARGIN - rightMargin;
+          }
+          else {
+              contentX += box.width / 2;
+          }
+          contentX = Math.round(contentX);
+          const textHeight = computeTextLinesHeight(fontSizePX, numberOfLines);
           box.content = {
               textLines: multiLineText,
               width: wrapping === "overflow" ? textWidth : width,
               align,
+              x: contentX,
+              y: contentY,
+              fontSizePx: fontSizePX,
           };
+          if (chipStyle?.fillColor) {
+              const chipMarginLeft = leftMargin;
+              const chipMarginRight = DATA_VALIDATION_CHIP_MARGIN;
+              box.chip = {
+                  color: chipStyle.fillColor,
+                  width: box.width - chipMarginLeft - chipMarginRight,
+                  height: textHeight + 2,
+                  x: box.x + chipMarginLeft,
+                  y: contentY - 2,
+              };
+          }
           /** ClipRect */
           const isOverflowing = contentWidth > width || fontSizePX > height;
-          if (box.icons.left || box.icons.right) {
+          if (box.icons.left || box.icons.right || box.chip) {
               box.clipRect = {
-                  x: box.x + leftIconWidth,
+                  x: box.x + leftMargin,
                   y: box.y,
-                  width: Math.max(0, width - leftIconWidth - rightIconWidth),
+                  width: Math.max(0, width - leftMargin - rightMargin),
                   height,
               };
           }
@@ -47229,6 +48359,77 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return boxes;
       }
+      getBoxesWithAnimations(boxes, oldBoxes, timeStamp) {
+          this.updateAnimationsProgress(timeStamp);
+          this.addNewAnimations(boxes, oldBoxes, timeStamp);
+          if (this.animations.size > 0) {
+              this.renderer.startAnimation("grid_renderer_animation");
+              return this.updateBoxesWithAnimations(boxes);
+          }
+          else {
+              this.renderer.stopAnimation("grid_renderer_animation");
+              return boxes;
+          }
+      }
+      updateBoxesWithAnimations(boxes) {
+          const boxesWithAnimations = [];
+          for (const box of boxes) {
+              const animation = this.animations.get(box.id);
+              if (!animation) {
+                  boxesWithAnimations.push(box);
+                  continue;
+              }
+              const animatedBox = deepCopy(box);
+              boxesWithAnimations.push(animatedBox);
+              for (const animationId of animation.animationTypes) {
+                  const animationItem = cellAnimationRegistry.get(animationId);
+                  const newBoxes = animationItem.updateAnimation(animation.progress, animatedBox, animation.oldBox, box);
+                  if (newBoxes) {
+                      boxesWithAnimations.push(...newBoxes.newBoxes);
+                  }
+              }
+          }
+          return boxesWithAnimations;
+      }
+      updateAnimationsProgress(timeStamp) {
+          if (timeStamp === undefined) {
+              return;
+          }
+          for (const boxId of this.animations.keys()) {
+              const animation = this.animations.get(boxId);
+              if (animation.startTime === undefined) {
+                  animation.startTime = timeStamp;
+                  continue;
+              }
+              const elapsedTime = timeStamp - animation.startTime;
+              const progress = Math.min(1, elapsedTime / CELL_ANIMATION_DURATION);
+              if (progress >= 1) {
+                  this.animations.delete(boxId);
+              }
+              animation.progress = progress;
+          }
+      }
+      addNewAnimations(boxes, oldBoxes, timeStamp) {
+          for (const box of boxes) {
+              this.lastRenderBoxes.set(box.id, box);
+              const oldBox = oldBoxes.get(box.id);
+              if (this.preventNewAnimationsInNextFrame || !oldBox || box.disabledAnimation) {
+                  continue;
+              }
+              const animationTypes = [];
+              for (const animationItem of cellAnimationRegistry.getAll()) {
+                  if (animationItem.hasAnimation(oldBox, box)) {
+                      animationTypes.push(animationItem.id);
+                  }
+              }
+              const animation = animationTypes.length > 0
+                  ? { animationTypes, oldBox, progress: 0, startTime: timeStamp }
+                  : undefined;
+              if (animation) {
+                  this.animations.set(box.id, animation);
+              }
+          }
+      }
   }
 
   function useGridDrawing(refName, model, canvasSize) {
@@ -47263,10 +48464,7 @@ stores.inject(MyMetaStore, storeInstance);
           // http://diveintohtml5.info/canvas.html#pixel-madness
           ctx.translate(-CANVAS_SHIFT, -CANVAS_SHIFT);
           ctx.scale(dpr, dpr);
-          for (const layer of OrderedLayers()) {
-              model.drawLayer(renderingContext, layer);
-              rendererStore.drawLayer(renderingContext, layer);
-          }
+          rendererStore.draw(renderingContext);
       }
   }
 
@@ -47819,15 +49017,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class Section extends owl.Component {
-      static template = "o_spreadsheet.Section";
-      static props = {
-          class: { type: String, optional: true },
-          title: { type: String, optional: true },
-          slots: Object,
-      };
-  }
-
   class ChartDataSeries extends owl.Component {
       static template = "o-spreadsheet.ChartDataSeries";
       static components = { SelectionInput, Section };
@@ -48376,325 +49565,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  const LINE_VERTICAL_PADDING = 1;
-  const PICKER_PADDING = 8;
-  const ITEM_BORDER_WIDTH = 1;
-  const ITEM_EDGE_LENGTH = 18;
-  const ITEMS_PER_LINE = 10;
-  const MAGNIFIER_EDGE = 16;
-  const ITEM_GAP = 2;
-  const CONTENT_WIDTH = ITEMS_PER_LINE * (ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH) + (ITEMS_PER_LINE - 1) * ITEM_GAP;
-  const INNER_GRADIENT_WIDTH = CONTENT_WIDTH - 2 * ITEM_BORDER_WIDTH;
-  const INNER_GRADIENT_HEIGHT = CONTENT_WIDTH - 30 - 2 * ITEM_BORDER_WIDTH;
-  const CONTAINER_WIDTH = CONTENT_WIDTH + 2 * PICKER_PADDING;
-  css /* scss */ `
-  .o-color-picker {
-    padding: ${PICKER_PADDING}px 0;
-    /* FIXME: this is useless, overiden by the popover container */
-    box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
-    background-color: white;
-    line-height: 1.2;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: ${CONTAINER_WIDTH}px;
-
-    .o-color-picker-section-name {
-      margin: 0px ${ITEM_BORDER_WIDTH}px;
-      padding: 4px ${PICKER_PADDING}px;
-    }
-    .colors-grid {
-      display: grid;
-      padding: ${LINE_VERTICAL_PADDING}px ${PICKER_PADDING}px;
-      grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
-      grid-gap: ${ITEM_GAP}px;
-    }
-    .o-color-picker-toggler-button {
-      display: flex;
-      .o-color-picker-toggler-sign {
-        display: flex;
-        margin: auto auto;
-        width: 55%;
-        height: 55%;
-        .o-icon {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .o-color-picker-line-item {
-      width: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      height: ${ITEM_EDGE_LENGTH + 2 * ITEM_BORDER_WIDTH}px;
-      margin: 0px;
-      border-radius: 50px;
-      border: ${ITEM_BORDER_WIDTH}px solid #666666;
-      padding: 0px;
-      font-size: 16px;
-      background: white;
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-        outline: 1px solid gray;
-        cursor: pointer;
-      }
-    }
-    .o-buttons {
-      padding: ${PICKER_PADDING}px;
-      display: flex;
-      .o-cancel {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        padding: 5px;
-        font-size: 14px;
-        background: white;
-        border-radius: 4px;
-        &:hover:enabled {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
-    .o-add-button {
-      border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-      padding: 4px;
-      background: white;
-      border-radius: 4px;
-      &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-    .o-separator {
-      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
-      margin-top: ${MENU_SEPARATOR_PADDING}px;
-      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
-    }
-
-    .o-custom-selector {
-      padding: ${PICKER_PADDING + 2}px ${PICKER_PADDING}px;
-      position: relative;
-      .o-gradient {
-        margin-bottom: ${MAGNIFIER_EDGE / 2}px;
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: ${INNER_GRADIENT_WIDTH + 2 * ITEM_BORDER_WIDTH}px;
-        height: ${INNER_GRADIENT_HEIGHT + 2 * ITEM_BORDER_WIDTH}px;
-        position: relative;
-      }
-
-      .magnifier {
-        height: ${MAGNIFIER_EDGE}px;
-        width: ${MAGNIFIER_EDGE}px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        box-shadow: 0px 0px 3px #c0c0c0;
-        position: absolute;
-        z-index: 2;
-      }
-      .saturation {
-        background: linear-gradient(to right, #fff 0%, transparent 100%);
-      }
-      .lightness {
-        background: linear-gradient(to top, #000 0%, transparent 100%);
-      }
-      .o-hue-picker {
-        border: ${ITEM_BORDER_WIDTH}px solid #c0c0c0;
-        width: 100%;
-        height: 12px;
-        border-radius: 4px;
-        background: linear-gradient(
-          to right,
-          hsl(0 100% 50%) 0%,
-          hsl(0.2turn 100% 50%) 20%,
-          hsl(0.3turn 100% 50%) 30%,
-          hsl(0.4turn 100% 50%) 40%,
-          hsl(0.5turn 100% 50%) 50%,
-          hsl(0.6turn 100% 50%) 60%,
-          hsl(0.7turn 100% 50%) 70%,
-          hsl(0.8turn 100% 50%) 80%,
-          hsl(0.9turn 100% 50%) 90%,
-          hsl(1turn 100% 50%) 100%
-        );
-        position: relative;
-        cursor: crosshair;
-      }
-      .o-hue-slider {
-        margin-top: -3px;
-      }
-      .o-custom-input-preview {
-        padding: 2px 0px;
-        display: flex;
-        input {
-          width: 50%;
-          border-radius: 4px;
-          padding: 4px 23px 4px 10px;
-          height: 24px;
-          border: 1px solid #c0c0c0;
-          margin-right: 2px;
-        }
-        .o-wrong-color {
-          /* FIXME bootstrap class instead? */
-          outline-color: red;
-          border-color: red;
-          &:focus {
-            outline-style: solid;
-            outline-width: 1px;
-          }
-        }
-      }
-      .o-custom-input-buttons {
-        padding: 2px 0px;
-        display: flex;
-        justify-content: end;
-      }
-      .o-color-preview {
-        border: 1px solid #c0c0c0;
-        border-radius: 4px;
-        width: 50%;
-      }
-    }
-  }
-`;
-  class ColorPicker extends owl.Component {
-      static template = "o-spreadsheet-ColorPicker";
-      static props = {
-          onColorPicked: Function,
-          currentColor: { type: String, optional: true },
-          maxHeight: { type: Number, optional: true },
-          anchorRect: Object,
-          disableNoColor: { type: Boolean, optional: true },
-      };
-      static defaultProps = { currentColor: "" };
-      static components = { Popover };
-      COLORS = COLOR_PICKER_DEFAULTS;
-      state = owl.useState({
-          showGradient: false,
-          currentHslaColor: isColorValid(this.props.currentColor)
-              ? { ...hexToHSLA(this.props.currentColor), a: 1 }
-              : { h: 0, s: 100, l: 100, a: 1 },
-          customHexColor: isColorValid(this.props.currentColor) ? toHex(this.props.currentColor) : "",
-      });
-      get colorPickerStyle() {
-          if (this.props.maxHeight !== undefined && this.props.maxHeight <= 0) {
-              return cssPropertiesToCss({ display: "none" });
-          }
-          return "";
-      }
-      get popoverProps() {
-          return {
-              anchorRect: this.props.anchorRect,
-              maxHeight: this.props.maxHeight,
-              positioning: "bottom-left",
-              verticalOffset: 0,
-          };
-      }
-      get gradientHueStyle() {
-          const hue = this.state.currentHslaColor?.h || 0;
-          return cssPropertiesToCss({
-              background: `hsl(${hue} 100% 50%)`,
-          });
-      }
-      get sliderStyle() {
-          const hue = this.state.currentHslaColor?.h || 0;
-          const delta = Math.round((hue / 360) * INNER_GRADIENT_WIDTH);
-          const left = clip(delta, 1, INNER_GRADIENT_WIDTH) - ICON_EDGE_LENGTH / 2;
-          return cssPropertiesToCss({
-              "margin-left": `${left}px`,
-          });
-      }
-      get pointerStyle() {
-          const { s, l } = this.state.currentHslaColor || { s: 0, l: 0 };
-          const left = Math.round(INNER_GRADIENT_WIDTH * clip(s / 100, 0, 1));
-          const top = Math.round(INNER_GRADIENT_HEIGHT * clip(1 - (2 * l) / (200 - s), 0, 1));
-          return cssPropertiesToCss({
-              left: `${-MAGNIFIER_EDGE / 2 + left}px`,
-              top: `${-MAGNIFIER_EDGE / 2 + top}px`,
-              background: hslaToHex(this.state.currentHslaColor),
-          });
-      }
-      get colorPreviewStyle() {
-          return cssPropertiesToCss({
-              "background-color": hslaToHex(this.state.currentHslaColor),
-          });
-      }
-      get checkmarkColor() {
-          return chartFontColor(this.props.currentColor);
-      }
-      get isHexColorInputValid() {
-          return !this.state.customHexColor || isColorValid(this.state.customHexColor);
-      }
-      setCustomGradient({ x, y }) {
-          const offsetX = clip(x, 0, INNER_GRADIENT_WIDTH);
-          const offsetY = clip(y, 0, INNER_GRADIENT_HEIGHT);
-          const deltaX = offsetX / INNER_GRADIENT_WIDTH;
-          const deltaY = offsetY / INNER_GRADIENT_HEIGHT;
-          const s = 100 * deltaX;
-          const l = 100 * (1 - deltaY) * (1 - 0.5 * deltaX);
-          this.updateColor({ s, l });
-      }
-      setCustomHue(x) {
-          // needs to be capped such that h is in [0°, 359°]
-          const h = Math.round(clip((360 * x) / INNER_GRADIENT_WIDTH, 0, 359));
-          this.updateColor({ h });
-      }
-      updateColor(newHsl) {
-          this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
-          this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
-      }
-      onColorClick(color) {
-          if (color) {
-              this.props.onColorPicked(toHex(color));
-          }
-      }
-      resetColor() {
-          this.props.onColorPicked("");
-      }
-      toggleColorPicker() {
-          this.state.showGradient = !this.state.showGradient;
-      }
-      dragGradientPointer(ev) {
-          const initialGradientCoordinates = { x: ev.offsetX, y: ev.offsetY };
-          this.setCustomGradient(initialGradientCoordinates);
-          const initialMousePosition = { x: ev.clientX, y: ev.clientY };
-          const onMouseMove = (ev) => {
-              const currentMousePosition = { x: ev.clientX, y: ev.clientY };
-              const deltaX = currentMousePosition.x - initialMousePosition.x;
-              const deltaY = currentMousePosition.y - initialMousePosition.y;
-              const currentGradientCoordinates = {
-                  x: initialGradientCoordinates.x + deltaX,
-                  y: initialGradientCoordinates.y + deltaY,
-              };
-              this.setCustomGradient(currentGradientCoordinates);
-          };
-          startDnd(onMouseMove, () => { });
-      }
-      dragHuePointer(ev) {
-          const initialX = ev.offsetX;
-          const initialMouseX = ev.clientX;
-          this.setCustomHue(initialX);
-          const onMouseMove = (ev) => {
-              const currentMouseX = ev.clientX;
-              const deltaX = currentMouseX - initialMouseX;
-              const x = initialX + deltaX;
-              this.setCustomHue(x);
-          };
-          startDnd(onMouseMove, () => { });
-      }
-      setHexColor(ev) {
-          // only support HEX code input
-          const val = ev.target.value.replace("##", "#").slice(0, 7);
-          this.state.customHexColor = val;
-          if (!isColorValid(val)) ;
-          else {
-              this.state.currentHslaColor = { ...hexToHSLA(val), a: 1 };
-          }
-      }
-      addCustomColor(ev) {
-          if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
-              return;
-          }
-          this.props.onColorPicked(toHex(this.state.customHexColor));
-      }
-      isSameColor(color1, color2) {
-          return isSameColor(color1, color2);
-      }
-  }
-
   css /* scss */ `
   .o-color-picker-widget {
     display: flex;
@@ -49162,57 +50032,6 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
-</svg>
-`;
-  css /* scss */ `
-  .o-round-color-picker-button {
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-    border: 1px solid ${GRAY_300};
-    background-position: 1px 1px;
-    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
-  }
-`;
-  class RoundColorPicker extends owl.Component {
-      static template = "o-spreadsheet.RoundColorPicker";
-      static components = { Section, ColorPicker };
-      static props = {
-          currentColor: { type: String, optional: true },
-          title: { type: String, optional: true },
-          onColorPicked: Function,
-          disableNoColor: { type: Boolean, optional: true },
-      };
-      colorPickerButtonRef = owl.useRef("colorPickerButton");
-      state;
-      setup() {
-          this.state = owl.useState({ pickerOpened: false });
-          owl.useExternalListener(window, "click", this.closePicker);
-      }
-      closePicker() {
-          this.state.pickerOpened = false;
-      }
-      togglePicker() {
-          this.state.pickerOpened = !this.state.pickerOpened;
-      }
-      onColorPicked(color) {
-          this.props.onColorPicked(color);
-          this.state.pickerOpened = false;
-      }
-      get colorPickerAnchorRect() {
-          const button = this.colorPickerButtonRef.el;
-          return getBoundingRectAsPOJO(button);
-      }
-      get buttonStyle() {
-          return cssPropertiesToCss({
-              background: this.props.currentColor,
-          });
-      }
-  }
-
   class GeneralDesignEditor extends owl.Component {
       static template = "o-spreadsheet-GeneralDesignEditor";
       static components = {
@@ -54740,7 +55559,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       getTypeFromZone(sheetId, zone) {
           const cells = this.getters.getEvaluatedCellsInZone(sheetId, zone);
-          const nonEmptyCells = cells.filter((cell) => cell.type !== CellValueType.empty);
+          const nonEmptyCells = cells.filter((cell) => !(cell.type === CellValueType.empty || cell.value === ""));
           if (nonEmptyCells.length === 0) {
               return "integer";
           }
@@ -55348,7 +56167,7 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class SettingsPanel extends owl.Component {
       static template = "o-spreadsheet-SettingsPanel";
-      static components = { Section, ValidationMessages };
+      static components = { Section, ValidationMessages, BadgeSelection };
       static props = { onCloseSidePanel: Function };
       loadedLocales = [];
       setup() {
@@ -56232,49 +57051,111 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   const DEFAULT_SIDE_PANEL_SIZE = 350;
+  const COLLAPSED_SIDE_PANEL_SIZE = 45;
   const MIN_SHEET_VIEW_WIDTH = 150;
   class SidePanelStore extends SpreadsheetStore {
-      mutators = ["open", "toggle", "close", "changePanelSize", "resetPanelSize"];
-      initialPanelProps = {};
-      componentTag = "";
-      panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      mutators = [
+          "open",
+          "toggle",
+          "close",
+          "changePanelSize",
+          "resetPanelSize",
+          "togglePinPanel",
+          "closeMainPanel",
+          "changeSpreadsheetWidth",
+          "toggleCollapsePanel",
+      ];
+      mainPanel = undefined;
+      secondaryPanel;
+      availableWidth = 0;
       screenWidthStore = this.get(ScreenWidthStore);
-      get isOpen() {
-          if (!this.componentTag) {
-              return false;
-          }
-          return this.computeState(this.componentTag, this.initialPanelProps).isOpen;
+      get isMainPanelOpen() {
+          return this.mainPanel && this.mainPanel.componentTag
+              ? this.computeState(this.mainPanel).isOpen
+              : false;
+      }
+      get isSecondaryPanelOpen() {
+          return this.secondaryPanel && this.secondaryPanel.componentTag
+              ? this.computeState(this.secondaryPanel).isOpen
+              : false;
+      }
+      get mainPanelProps() {
+          return this.mainPanel ? this.getPanelProps(this.mainPanel) : undefined;
+      }
+      get mainPanelKey() {
+          return this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
+      }
+      get secondaryPanelProps() {
+          return this.secondaryPanel ? this.getPanelProps(this.secondaryPanel) : undefined;
+      }
+      get secondaryPanelKey() {
+          return this.secondaryPanel ? this.getPanelKey(this.secondaryPanel) : undefined;
       }
-      get panelProps() {
-          const state = this.computeState(this.componentTag, this.initialPanelProps);
+      get totalPanelSize() {
+          return (this.mainPanel?.size || 0) + (this.secondaryPanel?.size ?? 0);
+      }
+      getPanelProps(panelInfo) {
+          const state = this.computeState(panelInfo);
           if (state.isOpen) {
               return state.props ?? {};
           }
           return {};
       }
-      get panelKey() {
-          const state = this.computeState(this.componentTag, this.initialPanelProps);
+      getPanelKey(panelInfo) {
+          const state = this.computeState(panelInfo);
           if (state.isOpen) {
               return state.key;
           }
           return undefined;
       }
-      open(componentTag, panelProps = {}) {
+      open(componentTag, initialPanelProps = {}) {
           if (this.screenWidthStore.isSmall) {
               return;
           }
-          const state = this.computeState(componentTag, panelProps);
+          const newPanelInfo = { initialPanelProps, componentTag, size: DEFAULT_SIDE_PANEL_SIZE };
+          const state = this.computeState(newPanelInfo);
           if (!state.isOpen) {
               return;
           }
-          if (this.isOpen && componentTag !== this.componentTag) {
-              this.initialPanelProps?.onCloseSidePanel?.();
+          const mainPanelKey = this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
+          if (!this.mainPanel || !this.mainPanel.isPinned || mainPanelKey === state.key) {
+              this._openPanel("mainPanel", newPanelInfo, state);
+              return;
+          }
+          // Try to open secondary panel if main panel is pinned
+          const nonCollapsedPanelSize = this.mainPanel.isCollapsed
+              ? DEFAULT_SIDE_PANEL_SIZE
+              : this.mainPanel.size;
+          if (!this.secondaryPanel &&
+              nonCollapsedPanelSize + DEFAULT_SIDE_PANEL_SIZE > this.availableWidth) {
+              this.get(NotificationStore).notifyUser({
+                  sticky: false,
+                  type: "warning",
+                  text: _t("The window is too small to display multiple side panels."),
+              });
+              return;
+          }
+          this._openPanel("secondaryPanel", newPanelInfo, state);
+      }
+      _openPanel(panel, newPanel, state) {
+          const currentPanel = this[panel];
+          if (currentPanel && newPanel.componentTag !== currentPanel.componentTag) {
+              currentPanel.initialPanelProps?.onCloseSidePanel?.();
+          }
+          this[panel] = {
+              initialPanelProps: state.props ?? {},
+              componentTag: newPanel.componentTag,
+              size: currentPanel?.size || DEFAULT_SIDE_PANEL_SIZE,
+              isCollapsed: currentPanel?.isCollapsed || false,
+              isPinned: currentPanel && "isPinned" in currentPanel ? currentPanel.isPinned : false,
+          };
+          if (this[panel].isCollapsed) {
+              this.toggleCollapsePanel(panel);
           }
-          this.componentTag = componentTag;
-          this.initialPanelProps = state.props ?? {};
       }
       toggle(componentTag, panelProps) {
-          if (this.isOpen && componentTag === this.componentTag) {
+          const panel = this.mainPanel?.isPinned ? this.secondaryPanel : this.mainPanel;
+          if (panel && componentTag === panel.componentTag) {
               this.close();
           }
           else {
@@ -56282,34 +57163,85 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       close() {
-          this.initialPanelProps.onCloseSidePanel?.();
-          this.initialPanelProps = {};
-          this.componentTag = "";
+          if (this.mainPanel?.isPinned) {
+              if (this.secondaryPanel) {
+                  this.secondaryPanel.initialPanelProps.onCloseSidePanel?.();
+                  this.secondaryPanel = undefined;
+              }
+              return;
+          }
+          this.mainPanel?.initialPanelProps.onCloseSidePanel?.();
+          this.mainPanel = undefined;
+      }
+      closeMainPanel() {
+          this.mainPanel?.initialPanelProps.onCloseSidePanel?.();
+          this.mainPanel = this.secondaryPanel || undefined;
+          this.secondaryPanel = undefined;
       }
-      changePanelSize(size, spreadsheetElWidth) {
-          if (size < DEFAULT_SIDE_PANEL_SIZE) {
-              this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      changePanelSize(panel, size) {
+          const panelInfo = this[panel];
+          if (!panelInfo || ("isCollapsed" in panelInfo && panelInfo.isCollapsed)) {
+              return;
           }
-          else if (size > spreadsheetElWidth - MIN_SHEET_VIEW_WIDTH) {
-              this.panelSize = Math.max(spreadsheetElWidth - MIN_SHEET_VIEW_WIDTH, DEFAULT_SIDE_PANEL_SIZE);
+          size = Math.max(size, DEFAULT_SIDE_PANEL_SIZE);
+          let otherPanelSize = panel === "mainPanel" ? this.secondaryPanel?.size || 0 : this.mainPanel?.size || 0;
+          if (size > this.availableWidth - otherPanelSize) {
+              if (panel === "mainPanel" && this.secondaryPanel) {
+                  // reduce the secondary panel size to fit the main panel
+                  this.secondaryPanel.size = Math.max(this.availableWidth - size, DEFAULT_SIDE_PANEL_SIZE);
+                  otherPanelSize = this.secondaryPanel.size;
+              }
+              size = Math.max(this.availableWidth - otherPanelSize, DEFAULT_SIDE_PANEL_SIZE);
           }
-          else {
-              this.panelSize = size;
+          panelInfo.size = size;
+      }
+      resetPanelSize(panel) {
+          const panelInfo = this[panel];
+          if (!panelInfo) {
+              return;
           }
+          panelInfo.size = DEFAULT_SIDE_PANEL_SIZE;
       }
-      resetPanelSize() {
-          this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+      togglePinPanel() {
+          if (!this.mainPanel) {
+              return;
+          }
+          this.mainPanel.isPinned = !this.mainPanel.isPinned;
+          if (!this.mainPanel.isPinned && this.secondaryPanel) {
+              this.secondaryPanel?.initialPanelProps.onCloseSidePanel?.();
+              this.mainPanel = this.secondaryPanel;
+              this.secondaryPanel = undefined;
+          }
       }
-      computeState(componentTag, panelProps) {
-          const customComputeState = sidePanelRegistry.get(componentTag).computeState;
-          if (!customComputeState) {
-              return {
-                  isOpen: true,
-                  props: panelProps,
-              };
+      toggleCollapsePanel(panel) {
+          const panelInfo = this[panel];
+          if (!panelInfo) {
+              return;
+          }
+          if (panelInfo.isCollapsed) {
+              panelInfo.isCollapsed = false;
+              this.changePanelSize(panel, DEFAULT_SIDE_PANEL_SIZE);
           }
           else {
-              return customComputeState(this.getters, panelProps);
+              panelInfo.isCollapsed = true;
+              panelInfo.size = COLLAPSED_SIDE_PANEL_SIZE;
+          }
+      }
+      computeState({ componentTag, initialPanelProps }) {
+          const customComputeState = sidePanelRegistry.get(componentTag).computeState;
+          const state = customComputeState
+              ? customComputeState(this.getters, initialPanelProps)
+              : { isOpen: true, props: initialPanelProps };
+          return state.isOpen ? { ...state, key: state.key || componentTag } : state;
+      }
+      changeSpreadsheetWidth(width) {
+          this.availableWidth = width - MIN_SHEET_VIEW_WIDTH;
+          if (this.secondaryPanel && width - this.totalPanelSize < MIN_SHEET_VIEW_WIDTH) {
+              this.secondaryPanel?.initialPanelProps.onCloseSidePanel?.();
+              this.secondaryPanel = undefined;
+          }
+          if (this.mainPanel && width - this.totalPanelSize < MIN_SHEET_VIEW_WIDTH) {
+              this.mainPanel.size = Math.max(width - MIN_SHEET_VIEW_WIDTH, DEFAULT_SIDE_PANEL_SIZE);
           }
       }
   }
@@ -56457,11 +57389,11 @@ stores.inject(MyMetaStore, storeInstance);
               this.hoveredCell.clear();
           });
           this.cellPopovers = useStore(CellPopoverStore);
-          owl.useEffect(() => {
-              if (!this.sidePanel.isOpen) {
+          owl.useEffect((isMainPanelOpen, isSecondaryPanelOpen) => {
+              if (!isMainPanelOpen && !isSecondaryPanelOpen) {
                   this.DOMFocusableElementStore.focus();
               }
-          }, () => [this.sidePanel.isOpen]);
+          }, () => [this.sidePanel.isMainPanelOpen, this.sidePanel.isSecondaryPanelOpen]);
           useTouchScroll(this.gridRef, this.moveCanvas.bind(this), () => {
               const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
               return scrollY > 0;
@@ -59543,7 +60475,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (!rule)
               return false;
           return ((rule.criterion.type === "isValueInList" || rule.criterion.type === "isValueInRange") &&
-              rule.criterion.displayStyle === "arrow");
+              (rule.criterion.displayStyle === "arrow" || rule.criterion.displayStyle === "chip"));
       }
       addDataValidationRule(sheetId, newRule) {
           const rules = this.rules[sheetId];
@@ -59553,7 +60485,7 @@ stores.inject(MyMetaStore, storeInstance);
           else if (newRule.criterion.type === "isValueInList") {
               newRule.criterion.values = Array.from(new Set(newRule.criterion.values));
           }
-          const adaptedRules = this.removeRangesFromRules(sheetId, newRule.ranges, rules);
+          const adaptedRules = this.removeRangesFromRules(sheetId, newRule.ranges, rules, newRule.id);
           const ruleIndex = adaptedRules.findIndex((rule) => rule.id === newRule.id);
           if (ruleIndex !== -1) {
               adaptedRules[ruleIndex] = newRule;
@@ -59563,9 +60495,12 @@ stores.inject(MyMetaStore, storeInstance);
               this.history.update("rules", sheetId, [...adaptedRules, newRule]);
           }
       }
-      removeRangesFromRules(sheetId, ranges, rules) {
+      removeRangesFromRules(sheetId, ranges, rules, editingRuleId) {
           rules = deepCopy(rules);
           for (const rule of rules) {
+              if (rule.id === editingRuleId) {
+                  continue; // Skip the rule being edited to preserve its place in the list
+              }
               rule.ranges = this.getters.recomputeRanges(rule.ranges, ranges);
           }
           return rules.filter((rule) => rule.ranges.length > 0);
@@ -62973,7 +63908,7 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
               }
               case "UPDATE_PIVOT": {
-                  this.history.update("pivots", cmd.pivotId, "definition", this.repairSortedColumn(deepCopy(cmd.pivot)));
+                  this.history.update("pivots", cmd.pivotId, "definition", deepCopy(cmd.pivot));
                   this.compileCalculatedMeasures(cmd.pivot.measures);
                   break;
               }
@@ -63044,10 +63979,7 @@ stores.inject(MyMetaStore, storeInstance);
       // Private
       // -------------------------------------------------------------------------
       addPivot(pivotId, pivot, formulaId = this.nextFormulaId.toString()) {
-          this.history.update("pivots", pivotId, {
-              definition: this.repairSortedColumn(deepCopy(pivot)),
-              formulaId,
-          });
+          this.history.update("pivots", pivotId, { definition: deepCopy(pivot), formulaId });
           this.compileCalculatedMeasures(pivot.measures);
           this.history.update("formulaIds", formulaId, pivotId);
           this.history.update("nextFormulaId", this.nextFormulaId + 1);
@@ -63136,7 +64068,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       checkSortedColumnInMeasures(definition) {
-          definition = this.repairSortedColumn(definition);
           const measures = definition.measures.map((measure) => measure.id);
           if (definition.sortedColumn && !measures.includes(definition.sortedColumn.measure)) {
               return "InvalidDefinition" /* CommandResult.InvalidDefinition */;
@@ -63150,26 +64081,6 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return "Success" /* CommandResult.Success */;
       }
-      repairSortedColumn(definition) {
-          if (definition.sortedColumn) {
-              // Fix for an upgrade issue: the sortedColumn measure was not updated
-              // from using fieldName to using id. If the sortedColumn measure matches
-              // a measure fieldName in the definition, update it to use the measure's id instead
-              // of its fieldName.
-              // TODO: add an upgrade step to fix this in master and remove this code
-              const sortedMeasure = definition.measures.find((measure) => measure.fieldName === definition.sortedColumn?.measure);
-              if (sortedMeasure) {
-                  return {
-                      ...definition,
-                      sortedColumn: {
-                          ...definition.sortedColumn,
-                          measure: sortedMeasure.id,
-                      },
-                  };
-              }
-          }
-          return definition;
-      }
       // ---------------------------------------------------------------------
       // Import/Export
       // ---------------------------------------------------------------------
@@ -63251,9 +64162,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.locale = data.settings?.locale ?? DEFAULT_LOCALE;
       }
       export(data) {
-          data.settings = {
-              locale: this.locale,
-          };
+          data.settings = { locale: this.locale };
       }
   }
 
@@ -65909,7 +66818,10 @@ stores.inject(MyMetaStore, storeInstance);
           "getDataValidationInvalidCriterionValueMessage",
           "getInvalidDataValidationMessage",
           "getValidationResultForCellValue",
+          "getDataValidationRangeValues",
           "isCellValidCheckbox",
+          "getDataValidationCellStyle",
+          "getDataValidationChipStyle",
           "isDataValidationInvalid",
       ];
       validationResults = {};
@@ -65930,6 +66842,18 @@ stores.inject(MyMetaStore, storeInstance);
       isDataValidationInvalid(cellPosition) {
           return !this.getValidationResultForCell(cellPosition).isValid;
       }
+      getDataValidationCellStyle(position) {
+          if (this.hasChip(position)) {
+              return undefined; // The style is not applied on the cell if it's a chip
+          }
+          return this.getDataValidationStyle(position);
+      }
+      getDataValidationChipStyle(position) {
+          if (this.hasChip(position)) {
+              return this.getDataValidationStyle(position) ?? { fillColor: GRAY_200 };
+          }
+          return undefined;
+      }
       getInvalidDataValidationMessage(cellPosition) {
           const validationResult = this.getValidationResultForCell(cellPosition);
           return validationResult.isValid ? undefined : validationResult.error;
@@ -65952,6 +66876,11 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return evaluator.isCriterionValueValid(value) ? undefined : evaluator.criterionValueErrorString;
       }
+      getDataValidationRangeValues(sheetId, criterion) {
+          const range = this.getters.getRangeFromSheetXC(sheetId, String(criterion.values[0]));
+          const criterionValues = this.getters.getRangeValues(range);
+          return criterionValues.map((value) => value?.toString()).filter(isDefined);
+      }
       isCellValidCheckbox(cellPosition) {
           if (!this.getters.isMainCellPosition(cellPosition)) {
               return false;
@@ -65971,6 +66900,38 @@ stores.inject(MyMetaStore, storeInstance);
           const error = this.getRuleErrorForCellValue(cellValue, cellPosition, rule);
           return error ? { error, rule, isValid: false } : VALID_RESULT;
       }
+      hasChip(position) {
+          const rule = this.getters.getValidationRuleForCell(position);
+          return ((rule?.criterion.type === "isValueInList" || rule?.criterion.type === "isValueInRange") &&
+              rule.criterion.displayStyle === "chip");
+      }
+      getDataValidationStyle(position) {
+          const rule = this.getters.getValidationRuleForCell(position);
+          if (!rule || this.isDataValidationInvalid(position)) {
+              return undefined;
+          }
+          const evaluatedCell = this.getters.getEvaluatedCell(position);
+          const color = this.getValueColor(rule, evaluatedCell.value);
+          if (!color) {
+              return undefined;
+          }
+          const style = {
+              fillColor: color,
+              textColor: chipTextColor(color),
+          };
+          return style;
+      }
+      getValueColor(rule, value) {
+          if (rule.criterion.type !== "isValueInList" && rule.criterion.type !== "isValueInRange") {
+              return undefined;
+          }
+          for (const criterionValue in rule.criterion.colors) {
+              if (criterionValue.toLowerCase() === String(value).toLowerCase()) {
+                  return rule.criterion.colors[criterionValue];
+              }
+          }
+          return undefined;
+      }
       isValidFormula(value) {
           return !compile(value).isBadExpression;
       }
@@ -66067,12 +67028,35 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return undefined;
   });
+  iconsOnCellRegistry.add("data_validation_chip_icon", (getters, position) => {
+      const chipStyle = getters.getDataValidationChipStyle(position);
+      if (chipStyle) {
+          const cellStyle = getters.getCellComputedStyle(position);
+          return {
+              svg: getChipSvg(chipStyle),
+              hoverSvg: getHoveredChipSvg(chipStyle),
+              priority: 10,
+              horizontalAlign: "right",
+              size: computeTextFontSizeInPixels(cellStyle),
+              margin: 4,
+              position,
+              onClick: (position, env) => {
+                  const { col, row } = position;
+                  env.model.selection.selectCell(col, row);
+                  env.startCellEdition();
+              },
+              type: "data_validation_chip_icon",
+          };
+      }
+      return undefined;
+  });
   iconsOnCellRegistry.add("data_validation_list_icon", (getters, position) => {
       const hasIcon = !getters.isReadonly() && getters.cellHasListDataValidationIcon(position);
       if (hasIcon) {
+          const cellStyle = getters.getCellComputedStyle(position);
           return {
-              svg: CARET_DOWN,
-              hoverSvg: HOVERED_CARET_DOWN,
+              svg: getCaretDownSvg(cellStyle),
+              hoverSvg: getHoveredCaretDownSvg(cellStyle),
               priority: 2,
               horizontalAlign: "right",
               size: GRID_ICON_EDGE_LENGTH,
@@ -66213,11 +67197,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return this.cellIconsCache[position.sheetId][position.col][position.row];
       }
-      getCellIconRect(icon) {
+      getCellIconRect(icon, cellRect) {
           const cellPosition = icon.position;
-          const merge = this.getters.getMerge(cellPosition);
-          const zone = merge || positionToZone(cellPosition);
-          const cellRect = this.getters.getRect(zone);
           const cell = this.getters.getCell(cellPosition);
           const x = this.getIconHorizontalPosition(cellRect, icon.horizontalAlign, icon);
           const y = this.getters.computeTextYCoordinate(cellRect, icon.size, cell?.style?.verticalAlign);
@@ -68614,11 +69595,11 @@ stores.inject(MyMetaStore, storeInstance);
        * transformation function given
        */
       addTransformation(executed, toTransforms, fn) {
+          if (!this.content[executed]) {
+              this.content[executed] = new Map();
+          }
           for (const toTransform of toTransforms) {
-              if (!this.content[toTransform]) {
-                  this.content[toTransform] = new Map();
-              }
-              this.content[toTransform].set(executed, fn);
+              this.content[executed].set(toTransform, fn);
           }
           return this;
       }
@@ -68627,7 +69608,7 @@ stores.inject(MyMetaStore, storeInstance);
        * that the executed command happened.
        */
       getTransformation(toTransform, executed) {
-          return this.content[toTransform] && this.content[toTransform].get(executed);
+          return this.content[executed] && this.content[executed].get(toTransform);
       }
   }
   const otRegistry = new OTRegistry();
@@ -68957,10 +69938,20 @@ stores.inject(MyMetaStore, storeInstance);
    */
   function transformAll(toTransform, executed) {
       let transformedCommands = [...toTransform];
+      const possibleTransformations = new Set(otRegistry.getKeys());
       for (const executedCommand of executed) {
-          transformedCommands = transformedCommands
-              .map((cmd) => transform(cmd, executedCommand))
-              .filter(isDefined);
+          // If the executed command is not in the registry, we skip it
+          // because we know there won't be any transformation impacting the
+          // commands to transform.
+          if (possibleTransformations.has(executedCommand.type)) {
+              transformedCommands = transformedCommands.reduce((acc, cmd) => {
+                  const transformed = transform(cmd, executedCommand);
+                  if (transformed) {
+                      acc.push(transformed);
+                  }
+                  return acc;
+              }, []);
+          }
       }
       return transformedCommands;
   }
@@ -70517,6 +71508,9 @@ stores.inject(MyMetaStore, storeInstance);
           for (const icon of this.getters.getCellIcons(position)) {
               contentWidth += icon.margin + icon.size;
           }
+          if (this.getters.getDataValidationChipStyle(position)) {
+              contentWidth += DATA_VALIDATION_CHIP_MARGIN * 2;
+          }
           if (contentWidth === 0) {
               return 0;
           }
@@ -70674,7 +71668,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
                   const position = this.getters.getCellPosition(cell.id);
                   const colSize = this.getters.getColSize(sheetId, position.col);
-                  if (cell.isFormula) {
+                  if (cell.isFormula || this.getters.getArrayFormulaSpreadingOn(position)) {
                       const content = this.getters.getEvaluatedCell(position).formattedValue;
                       const evaluatedSize = getCellContentHeight(this.ctx, content, cell?.style, colSize);
                       if (evaluatedSize > evaluatedRowSize && evaluatedSize > DEFAULT_CELL_HEIGHT) {
@@ -70877,6 +71871,8 @@ stores.inject(MyMetaStore, storeInstance);
           if (invalidateEvaluationCommands.has(cmd.type) ||
               cmd.type === "UPDATE_CELL" ||
               cmd.type === "SET_FORMATTING" ||
+              cmd.type === "ADD_DATA_VALIDATION_RULE" ||
+              cmd.type === "REMOVE_DATA_VALIDATION_RULE" ||
               cmd.type === "EVALUATE_CELLS") {
               this.styles = {};
               this.borders = {};
@@ -70948,8 +71944,10 @@ stores.inject(MyMetaStore, storeInstance);
           const cell = this.getters.getCell(position);
           const cfStyle = this.getters.getCellConditionalFormatStyle(position);
           const tableStyle = this.getters.getCellTableStyle(position);
+          const dataValidationStyle = this.getters.getDataValidationCellStyle(position);
           const computedStyle = {
               ...removeFalsyAttributes(tableStyle),
+              ...removeFalsyAttributes(dataValidationStyle),
               ...removeFalsyAttributes(cell?.style),
               ...removeFalsyAttributes(cfStyle),
           };
@@ -72033,49 +73031,17 @@ stores.inject(MyMetaStore, storeInstance);
           if (!copiedData) {
               return;
           }
-          let zone = undefined;
-          const selectedZones = [];
           const sheetId = this.getters.getActiveSheetId();
-          const target = {
-              sheetId,
-              zones,
-          };
           const handlers = this.selectClipboardHandlers(copiedData);
-          for (const { handlerName, handler } of handlers) {
-              const handlerData = copiedData[handlerName];
-              if (!handlerData) {
-                  continue;
-              }
-              const currentTarget = handler.getPasteTarget(sheetId, zones, handlerData, options);
-              if (currentTarget.figureId) {
-                  target.figureId = currentTarget.figureId;
-              }
-              for (const targetZone of currentTarget.zones) {
-                  selectedZones.push(targetZone);
-                  if (zone === undefined) {
-                      zone = targetZone;
-                      continue;
-                  }
-                  zone = union(zone, targetZone);
-              }
-          }
+          const { target, zone, selectedZones } = getPasteTargetFromHandlers(sheetId, zones, copiedData, handlers, options);
           if (zone !== undefined) {
-              this.addMissingDimensions(this.getters.getActiveSheetId(), zone.right - zone.left + 1, zone.bottom - zone.top + 1, zone.left, zone.top);
+              this.addMissingDimensions(sheetId, zone.right - zone.left + 1, zone.bottom - zone.top + 1, zone.left, zone.top);
           }
-          handlers.forEach(({ handlerName, handler }) => {
-              const handlerData = copiedData[handlerName];
-              if (handlerData) {
-                  handler.paste(target, handlerData, options);
-              }
-          });
+          applyClipboardHandlersPaste(handlers, copiedData, target, options);
           if (!options?.selectTarget) {
               return;
           }
-          const selection = zones[0];
-          const col = selection.left;
-          const row = selection.top;
-          this.selection.getBackToDefault();
-          this.selection.selectZone({ cell: { col, row }, zone: union(...selectedZones) }, { scrollIntoView: false });
+          selectPastedZone(this.selection, zones, selectedZones);
       }
       /**
        * Add columns and/or rows to ensure that col + width and row + height are still
@@ -74511,19 +75477,29 @@ stores.inject(MyMetaStore, storeInstance);
               (rule.criterion.type !== "isValueInList" && rule.criterion.type !== "isValueInRange")) {
               return [];
           }
-          let values;
-          if (rule.criterion.type === "isValueInList") {
-              values = rule.criterion.values;
-          }
-          else {
-              const range = this.getters.getRangeFromSheetXC(position.sheetId, rule.criterion.values[0]);
-              values = Array.from(new Set(this.getters
-                  .getRangeValues(range)
-                  .filter(isNotNull)
-                  .map((value) => value.toString())
-                  .filter((val) => val !== "")));
-          }
-          return values.map((value) => ({ text: value }));
+          const sheetId = this.composer.currentEditedCell.sheetId;
+          const values = rule.criterion.type === "isValueInRange"
+              ? Array.from(new Set(this.getters.getDataValidationRangeValues(sheetId, rule.criterion)))
+              : rule.criterion.values;
+          const isChip = rule.criterion.displayStyle === "chip";
+          if (!isChip) {
+              return values.map((value) => ({ text: value }));
+          }
+          const colors = rule.criterion.colors;
+          return values.map((value) => {
+              const color = colors?.[value];
+              return {
+                  text: value,
+                  htmlContent: [
+                      {
+                          value,
+                          color: color ? chipTextColor(color) : undefined,
+                          backgroundColor: color || GRAY_200,
+                          classes: ["badge rounded-pill fs-6 fw-normal w-100 mt-1 text-start"],
+                      },
+                  ],
+              };
+          });
       },
       selectProposal(tokenAtCursor, value) {
           this.composer.setCurrentContent(value);
@@ -74894,6 +75870,17 @@ stores.inject(MyMetaStore, storeInstance);
           return !!getters.getEvaluatedCell(position).link;
       },
       execute: (position, env, isMiddleClick) => openLink(env.model.getters.getEvaluatedCell(position).link, env, isMiddleClick),
+      title: (position, getters) => {
+          const link = getters.getEvaluatedCell(position).link;
+          if (!link)
+              return "";
+          if (link.isExternal) {
+              return _t("Go to url: %(url)s", { url: link.url });
+          }
+          else {
+              return _t("Go to %(label)s", { label: link.label });
+          }
+      },
       sequence: 5,
   });
 
@@ -76605,12 +77592,13 @@ stores.inject(MyMetaStore, storeInstance);
               if (!item) {
                   continue;
               }
+              const title = typeof item.title === "function" ? item.title(position, getters) : item.title;
               const zone = getters.expandZone(sheetId, positionToZone(position));
               cells.push({
                   coordinates: getters.getVisibleRect(zone),
                   position,
                   action: item.execute,
-                  title: item.title || "",
+                  title: title || "",
               });
           }
           return cells;
@@ -76995,24 +77983,36 @@ stores.inject(MyMetaStore, storeInstance);
     user-select: none;
     color: ${TEXT_BODY};
 
+    &.collapsed {
+      padding: 8px;
+      cursor: pointer;
+
+      .o-sidePanelTitle {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+      }
+    }
+
     .o-sidePanelTitle {
       line-height: 20px;
       font-size: 16px;
     }
 
     .o-sidePanelHeader {
-      padding: 8px 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      padding: 8px;
       border-bottom: 1px solid ${GRAY_300};
+    }
 
-      .o-sidePanelClose {
-        padding: 5px 10px;
-        cursor: pointer;
-        &:hover {
-          background-color: WhiteSmoke;
-        }
+    .o-sidePanelAction {
+      padding: 5px 10px;
+      cursor: pointer;
+
+      &.active {
+        background-color: ${BUTTON_ACTIVE_BG};
+      }
+
+      &:hover {
+        background-color: ${BUTTON_HOVER_BG};
       }
     }
     .o-sidePanelBody-container {
@@ -77089,43 +78089,114 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   class SidePanel extends owl.Component {
       static template = "o-spreadsheet-SidePanel";
+      static props = {
+          panelContent: Object,
+          panelProps: Object,
+          onCloseSidePanel: Function,
+          onStartHandleDrag: Function,
+          onResetPanelSize: Function,
+          isPinned: { type: Boolean, optional: true },
+          onTogglePinPanel: { type: Function, optional: true },
+          onToggleCollapsePanel: { type: Function, optional: true },
+          isCollapsed: { type: Boolean, optional: true },
+      };
+      spreadsheetRect = useSpreadsheetRect();
+      getTitle() {
+          const panel = this.props.panelContent;
+          return typeof panel.title === "function"
+              ? panel.title(this.env, this.props.panelProps)
+              : panel.title;
+      }
+      get pinInfoMessage() {
+          return _t("Pin this panel to allow to open another side panel beside it.");
+      }
+  }
+
+  class SidePanels extends owl.Component {
+      static template = "o-spreadsheet-SidePanels";
       static props = {};
+      static components = { SidePanel };
       sidePanelStore;
       spreadsheetRect = useSpreadsheetRect();
       setup() {
           this.sidePanelStore = useStore(SidePanelStore);
-          owl.useEffect((isOpen) => {
-              if (!isOpen) {
+          owl.useEffect(() => {
+              if (this.sidePanelStore.mainPanel && !this.sidePanelStore.isMainPanelOpen) {
+                  this.sidePanelStore.closeMainPanel();
+              }
+              if (this.sidePanelStore.secondaryPanel && !this.sidePanelStore.isSecondaryPanelOpen) {
                   this.sidePanelStore.close();
               }
-          }, () => [this.sidePanelStore.isOpen]);
-      }
-      get panel() {
-          return sidePanelRegistry.get(this.sidePanelStore.componentTag);
-      }
-      close() {
-          this.sidePanelStore.close();
+          }, () => [this.sidePanelStore.isMainPanelOpen, this.sidePanelStore.isSecondaryPanelOpen]);
       }
-      getTitle() {
-          const panel = this.panel;
-          return typeof panel.title === "function"
-              ? panel.title(this.env, this.sidePanelStore.panelProps)
-              : panel.title;
-      }
-      startHandleDrag(ev) {
+      startHandleDrag(panel, ev) {
           const startingCursor = document.body.style.cursor;
-          const startSize = this.sidePanelStore.panelSize;
+          const panelInfo = panel === "mainPanel" ? this.sidePanelStore.mainPanel : this.sidePanelStore.secondaryPanel;
+          if (!panelInfo) {
+              return;
+          }
+          const startSize = panelInfo.size;
           const startPosition = ev.clientX;
           const onMouseMove = (ev) => {
               document.body.style.cursor = "col-resize";
               const newSize = startSize + startPosition - ev.clientX;
-              this.sidePanelStore.changePanelSize(newSize, this.spreadsheetRect.width);
+              this.sidePanelStore.changePanelSize(panel, newSize);
           };
           const cleanUp = () => {
               document.body.style.cursor = startingCursor;
           };
           startDnd(onMouseMove, cleanUp);
       }
+      get mainPanelProps() {
+          const panelProps = this.sidePanelStore.mainPanelProps;
+          if (!this.sidePanelStore.mainPanel || !panelProps) {
+              return undefined;
+          }
+          return {
+              panelContent: sidePanelRegistry.get(this.sidePanelStore.mainPanel.componentTag),
+              panelProps,
+              onCloseSidePanel: () => this.sidePanelStore.closeMainPanel(),
+              onTogglePinPanel: () => this.sidePanelStore.togglePinPanel(),
+              onStartHandleDrag: (ev) => this.startHandleDrag("mainPanel", ev),
+              onResetPanelSize: () => this.sidePanelStore.resetPanelSize("mainPanel"),
+              isPinned: this.sidePanelStore.mainPanel?.isPinned,
+              onToggleCollapsePanel: () => this.sidePanelStore.toggleCollapsePanel("mainPanel"),
+              isCollapsed: this.sidePanelStore.mainPanel?.isCollapsed,
+          };
+      }
+      get secondaryPanelProps() {
+          const panelProps = this.sidePanelStore.secondaryPanelProps;
+          if (!this.sidePanelStore.secondaryPanel || !panelProps) {
+              return undefined;
+          }
+          return {
+              panelContent: sidePanelRegistry.get(this.sidePanelStore.secondaryPanel.componentTag),
+              panelProps,
+              onCloseSidePanel: () => this.sidePanelStore.close(),
+              onStartHandleDrag: (ev) => this.startHandleDrag("secondaryPanel", ev),
+              onResetPanelSize: () => this.sidePanelStore.resetPanelSize("secondaryPanel"),
+              onToggleCollapsePanel: () => this.sidePanelStore.toggleCollapsePanel("secondaryPanel"),
+              isCollapsed: this.sidePanelStore.secondaryPanel?.isCollapsed,
+          };
+      }
+      get panelList() {
+          return [
+              {
+                  key: this.sidePanelStore.secondaryPanelKey,
+                  props: this.secondaryPanelProps,
+                  style: this.sidePanelStore.secondaryPanel
+                      ? cssPropertiesToCss({ width: `${this.sidePanelStore.secondaryPanel.size}px` })
+                      : "",
+              },
+              {
+                  key: this.sidePanelStore.mainPanelKey,
+                  props: this.mainPanelProps,
+                  style: this.sidePanelStore.mainPanel
+                      ? cssPropertiesToCss({ width: `${this.sidePanelStore.mainPanel.size}px` })
+                      : "",
+              },
+          ].filter((panel) => panel.key && panel.props);
+      }
   }
 
   class RibbonMenu extends owl.Component {
@@ -78687,7 +79758,7 @@ stores.inject(MyMetaStore, storeInstance);
           Grid,
           BottomBar,
           SmallBottomBar,
-          SidePanel,
+          SidePanels,
           SpreadsheetDashboard,
           HeaderGroupContainer,
           FullScreenChart,
@@ -78710,7 +79781,9 @@ stores.inject(MyMetaStore, storeInstance);
           else {
               properties["grid-template-rows"] = `min-content auto min-content`;
           }
-          const columnWidth = this.sidePanel.isOpen ? `${this.sidePanel.panelSize}px` : "auto";
+          const columnWidth = this.sidePanel.mainPanel
+              ? `${this.sidePanel.totalPanelSize || DEFAULT_SIDE_PANEL_SIZE}px`
+              : "auto";
           properties["grid-template-columns"] = `auto ${columnWidth}`;
           return cssPropertiesToCss(properties);
       }
@@ -78794,7 +79867,7 @@ stores.inject(MyMetaStore, storeInstance);
               this.checkViewportSize();
           });
           const resizeObserver = new ResizeObserver(() => {
-              this.sidePanel.changePanelSize(this.sidePanel.panelSize, this.spreadsheetRect.width);
+              this.sidePanel.changeSpreadsheetWidth(this.spreadsheetRect.width);
           });
       }
       bindModelEvents() {
@@ -83391,9 +84464,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.4.0-alpha.8";
-  __info__.date = "2025-06-12T09:53:48.133Z";
-  __info__.hash = "9b7a8d0";
+  __info__.version = "18.4.0";
+  __info__.date = "2025-06-24T11:19:24.606Z";
+  __info__.hash = "a5b7cad";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);