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

package/dist/o-spreadsheet.esm.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -20,13 +20,21 @@ function createAction(item) {
     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
@@ -154,6 +162,7 @@ const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
 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";
@@ -297,6 +306,7 @@ const GROUP_LAYER_WIDTH = 21;
 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;
@@ -642,9 +652,6 @@ function parseSheetUrl(sheetLink) {
 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.
  */
@@ -1355,9 +1362,16 @@ function darkenColor(color, percentage) {
     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
@@ -6834,19 +6848,17 @@ function getDefaultContextFont(fontSize, bold = false, italic = false) {
 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];
 }
@@ -7011,19 +7023,19 @@ function getContextFontSize(font) {
 }
 // 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;
 }
@@ -7237,6 +7249,63 @@ function parseOSClipboardContent(content, clipboardId) {
     };
     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;
@@ -9941,8 +10010,15 @@ function getDependencyContainer(env) {
 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;
@@ -9959,17 +10035,54 @@ class RendererStore {
             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 {
@@ -9993,7 +10106,7 @@ class SpreadsheetStore extends DisposableStore {
     }
     handle(cmd) { }
     finalize() { }
-    drawLayer(ctx, layer) { }
+    drawLayer(ctx, layer, timestamp) { }
 }
 
 const VOID_COMPOSER = {
@@ -21686,6 +21799,7 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
         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);
@@ -21696,10 +21810,18 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
             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);
@@ -21709,7 +21831,7 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
             }
             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);
@@ -21728,6 +21850,8 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
         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)) {
@@ -21736,17 +21860,27 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
             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);
@@ -23694,11 +23828,11 @@ function drawTitle(ctx, config) {
 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,
@@ -23711,7 +23845,7 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
     }
     // 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"));
     }
@@ -23851,7 +23985,7 @@ function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
     return inflectionValues;
 }
 function getGaugeColor(runtime) {
-    const gaugeValue = runtime.gaugeValue?.value;
+    const gaugeValue = getGaugeValue(runtime, "final");
     if (gaugeValue === undefined) {
         return GAUGE_BACKGROUND_COLOR;
     }
@@ -23939,6 +24073,11 @@ function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY
     };
     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
@@ -25680,7 +25819,9 @@ function getPyramidChartShowValues(definition, args) {
         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");
         },
     };
 }
@@ -26291,6 +26432,320 @@ function createBarChartRuntime(chart, getters) {
     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 Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     static props = {
@@ -26298,16 +26753,101 @@ class GaugeChartComponent extends Component {
         isFullScreen: { type: Boolean, optional: true },
     };
     canvas = useRef("chartContainer");
+    animationStore;
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
     }
     setup() {
-        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;
+        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 {
@@ -29341,6 +29881,12 @@ class Menu extends Component {
         menu.onStopHover?.(this.env);
         this.props.onMouseLeave?.(menu, ev);
     }
+    onClickMenu(menu, ev) {
+        if (!this.isEnabled(menu)) {
+            return;
+        }
+        this.props.onClickMenu?.(menu, ev);
+    }
 }
 
 /**
@@ -29839,9 +30385,6 @@ class MenuPopover extends Component {
         this.subMenu.parentMenu = undefined;
     }
     onClickMenu(menu, ev) {
-        if (!this.isEnabled(menu)) {
-            return;
-        }
         if (this.isRoot(menu)) {
             this.openSubMenu(menu, ev.currentTarget);
         }
@@ -31092,11 +31635,9 @@ criterionEvaluatorRegistry.add("isValueInRange", {
         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])),
@@ -31268,6 +31809,12 @@ class TextValueProvider extends Component {
             selectedElement?.scrollIntoView?.({ block: "nearest" });
         }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
     }
+    getCss(html) {
+        return cssPropertiesToCss({
+            color: html.color || "#000000",
+            background: html.backgroundColor,
+        });
+    }
 }
 
 class ContentEditableHelper {
@@ -31406,7 +31953,6 @@ class ContentEditableHelper {
                 // 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;
@@ -31441,9 +31987,7 @@ class ContentEditableHelper {
             }
             // 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) {
@@ -31490,13 +32034,10 @@ class ContentEditableHelper {
     }
     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>
             ) {
@@ -31506,8 +32047,15 @@ class ContentEditableHelper {
                 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;
     }
@@ -32857,6 +33405,12 @@ class Composer extends Component {
         useEffect(() => {
             this.processTokenAtCursor();
         }, () => [this.props.composerStore.editionMode !== "inactive"]);
+        useEffect(() => {
+            this.contentHelper.scrollSelectionIntoView();
+        }, () => [
+            this.props.composerStore.composerSelection.start,
+            this.props.composerStore.composerSelection.end,
+        ]);
     }
     // ---------------------------------------------------------------------------
     // Handlers
@@ -33067,6 +33621,7 @@ class Composer extends Component {
         if (this.env.isMobile() && !isIOS()) {
             return;
         }
+        this.debouncedHover.stopDebounce();
         this.contentHelper.removeSelection();
     }
     onMouseup() {
@@ -33145,7 +33700,6 @@ class Composer extends Component {
                 const { start, end } = this.props.composerStore.composerSelection;
                 this.contentHelper.selectRange(start, end);
             }
-            this.contentHelper.scrollSelectionIntoView();
         }
         this.shouldProcessInputEvents = true;
     }
@@ -33621,68 +34175,6 @@ class SingleInputCriterionForm extends CriterionForm {
     }
 }
 
-css /* scss */ `
-  .o-dv-list-item-delete {
-    color: #666666;
-    cursor: pointer;
-  }
-`;
-class ListCriterionForm extends CriterionForm {
-    static template = "o-spreadsheet-ListCriterionForm";
-    static components = { CriterionInput };
-    state = 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" });
-            }
-        };
-        onWillUpdateProps(setupDefault);
-        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.
  *
@@ -33712,207 +34204,653 @@ function startDnd(onPointerMove, onPointerUp) {
     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));
-    };
-    onWillUnmount(() => {
-        cleanUp();
-    });
-    const state = 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);
+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;
     }
-    onScroll() {
-        this.moveDraggedItemToPosition(this.currentMousePosition + this.scrollOffset);
+    .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;
     }
-    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();
+    .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%;
         }
-        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());
+    .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;
+      }
     }
-    onMouseUp(ev) {
-        if (ev.button !== 0) {
-            this.onCancel();
+    .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);
         }
-        ev.stopPropagation();
-        ev.preventDefault();
-        const targetItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
-        this.onDragEnd(this.draggedItemId, targetItemIndex);
-        this.stopEdgeScroll();
-        return false;
+      }
     }
-    startEdgeScroll(direction) {
-        if (this.edgeScrollIntervalId)
-            return;
-        this.edgeScrollIntervalId = window.setInterval(() => {
-            const offset = direction * 3;
-            this.container.scroll += offset;
-        }, 5);
+    .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);
+      }
     }
-    stopEdgeScroll() {
-        window.clearInterval(this.edgeScrollIntervalId);
-        this.edgeScrollIntervalId = undefined;
+    .o-separator {
+      border-bottom: ${MENU_SEPARATOR_BORDER_WIDTH}px solid ${SEPARATOR_COLOR};
+      margin-top: ${MENU_SEPARATOR_PADDING}px;
+      margin-bottom: ${MENU_SEPARATOR_PADDING}px;
     }
-    /**
-     * Get the index of the item the given mouse position is inside.
-     * If the mouse is outside the container, return the first or last item index.
-     */
+
+    .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 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 = 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 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 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 = useRef("colorPickerButton");
+    state;
+    setup() {
+        this.state = useState({ pickerOpened: false });
+        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 = 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" });
+            }
+        };
+        onWillUpdateProps(setupDefault);
+        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));
+    };
+    onWillUnmount(() => {
+        cleanUp();
+    });
+    const state = 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) {
+            this.onCancel();
+        }
+        ev.stopPropagation();
+        ev.preventDefault();
+        const targetItemIndex = this.items.findIndex((item) => item.id === this.draggedItemId);
+        this.onDragEnd(this.draggedItemId, targetItemIndex);
+        this.stopEdgeScroll();
+        return false;
+    }
+    startEdgeScroll(direction) {
+        if (this.edgeScrollIntervalId)
+            return;
+        this.edgeScrollIntervalId = window.setInterval(() => {
+            const offset = direction * 3;
+            this.container.scroll += offset;
+        }, 5);
+    }
+    stopEdgeScroll() {
+        window.clearInterval(this.edgeScrollIntervalId);
+        this.edgeScrollIntervalId = undefined;
+    }
+    /**
+     * Get the index of the item the given mouse position is inside.
+     * If the mouse is outside the container, return the first or last item index.
+     */
     getHoveredItemIndex(mousePosition, items) {
         if (mousePosition <= this.minPosition)
             return 0;
@@ -34571,12 +35509,12 @@ class SelectionInput extends Component {
 
 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" });
             }
         };
         onWillUpdateProps(setupDefault);
@@ -34589,6 +35527,16 @@ class ValueInRangeCriterionForm extends CriterionForm {
         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 = {
@@ -36092,6 +37040,7 @@ css /* scss */ `
 // 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: [
@@ -36102,6 +37051,7 @@ const ARROW_DOWN = {
     ],
 };
 const ARROW_UP = {
+    name: "ARROW_UP",
     width: 448,
     height: 512,
     paths: [
@@ -36112,6 +37062,7 @@ const ARROW_UP = {
     ],
 };
 const ARROW_RIGHT = {
+    name: "ARROW_RIGHT",
     width: 448,
     height: 512,
     paths: [
@@ -36122,6 +37073,7 @@ const ARROW_RIGHT = {
     ],
 };
 const SMILE = {
+    name: "SMILE",
     width: 496,
     height: 512,
     paths: [
@@ -36132,6 +37084,7 @@ const SMILE = {
     ],
 };
 const MEH = {
+    name: "MEH",
     width: 496,
     height: 512,
     paths: [
@@ -36142,6 +37095,7 @@ const MEH = {
     ],
 };
 const FROWN = {
+    name: "FROWN",
     width: 496,
     height: 512,
     paths: [
@@ -36153,44 +37107,79 @@ const FROWN = {
 };
 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: [
@@ -36203,6 +37192,7 @@ function getPivotIconSvg(isCollapsed, isHovered) {
         ? "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: [
@@ -36229,6 +37219,7 @@ function getDataFilterIcon(isActive, isHighContrast, isHovered) {
         colors.hoverBackgroundColor = "#fff";
     }
     return {
+        name: "DATA_FILTER_ICON",
         width: isActive ? 24 : 850,
         height: isActive ? 24 : 850,
         paths: [
@@ -40424,6 +41415,23 @@ migrationStepRegistry
         }
         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 || []) {
@@ -41087,6 +42095,10 @@ const REMOVE_ROWS_ACTION = (env) => {
     });
 };
 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);
@@ -42641,7 +43653,7 @@ const insertDropdown = {
                 criterion: {
                     type: "isValueInList",
                     values: [],
-                    displayStyle: "arrow",
+                    displayStyle: "chip",
                 },
             },
         });
@@ -44556,6 +45568,11 @@ class GridComposer extends Component {
     rect = this.defaultRect;
     isEditing = false;
     isCellReferenceVisible = false;
+    currentEditedCell = {
+        col: 0,
+        row: 0,
+        sheetId: this.env.model.getters.getActiveSheetId(),
+    };
     composerStore;
     composerFocusStore;
     composerInterface;
@@ -44680,12 +45697,17 @@ class GridComposer extends Component {
         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);
@@ -45476,15 +46498,16 @@ function useHoveredElement(ref) {
     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) {
@@ -45515,24 +46538,38 @@ class PaintFormatStore extends SpreadsheetStore {
     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();
         }
@@ -45579,12 +46616,8 @@ class HoveredTableStore extends SpreadsheetStore {
         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;
         }
@@ -45593,9 +46626,16 @@ class HoveredTableStore extends SpreadsheetStore {
         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);
+            }
         }
     }
 }
@@ -45791,11 +46831,14 @@ class GridOverlay extends Component {
     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);
         }
@@ -45840,7 +46883,10 @@ class GridOverlay extends Component {
         }
         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;
     }
@@ -46577,19 +47623,56 @@ class HeadersOverlay extends Component {
     }
 }
 
-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"];
@@ -46597,17 +47680,20 @@ class GridRenderer {
     // ---------------------------------------------------------------------------
     // 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);
@@ -46617,6 +47703,8 @@ class GridRenderer {
                     ctx.restore();
                 }
                 this.drawFrozenPanes(renderingContext);
+                this.preventNewAnimationsInNextFrame = false;
+                this.zonesWithPreventedAnimationsInNextFrame = [];
                 break;
             case "Headers":
                 if (!this.getters.isDashboard()) {
@@ -46640,6 +47728,8 @@ class GridRenderer {
         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);
@@ -46660,6 +47750,19 @@ class GridRenderer {
                 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);
@@ -46734,7 +47837,8 @@ class GridRenderer {
          * 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":
@@ -46782,6 +47886,7 @@ class GridRenderer {
             ctx.stroke();
             ctx.lineWidth = 1;
             ctx.setLineDash([]);
+            ctx.globalAlpha = 1;
         }
     }
     drawTexts(renderingContext, boxes) {
@@ -46790,6 +47895,7 @@ class GridRenderer {
         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
@@ -46799,19 +47905,6 @@ class GridRenderer {
                     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
@@ -46822,19 +47915,18 @@ class GridRenderer {
                     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;
             }
         }
     }
@@ -46852,10 +47944,11 @@ class GridRenderer {
                 }
                 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) {
@@ -47064,12 +48157,15 @@ class GridRenderer {
         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);
@@ -47080,6 +48176,7 @@ class GridRenderer {
             center: iconsList.find((icon) => icon?.horizontalAlign === "center"),
         };
         const box = {
+            id: zoneToXc(zone),
             x,
             y,
             width,
@@ -47087,11 +48184,11 @@ class GridRenderer {
             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) {
@@ -47103,22 +48200,55 @@ class GridRenderer {
         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,
             };
         }
@@ -47228,6 +48358,77 @@ class GridRenderer {
         }
         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) {
@@ -47262,10 +48463,7 @@ function useGridDrawing(refName, model, canvasSize) {
         // 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);
     }
 }
 
@@ -47818,15 +49016,6 @@ class Selection extends Component {
     }
 }
 
-class Section extends Component {
-    static template = "o_spreadsheet.Section";
-    static props = {
-        class: { type: String, optional: true },
-        title: { type: String, optional: true },
-        slots: Object,
-    };
-}
-
 class ChartDataSeries extends Component {
     static template = "o-spreadsheet.ChartDataSeries";
     static components = { SelectionInput, Section };
@@ -48165,532 +49354,213 @@ class GenericChartConfigPanel extends Component {
      * Change the local labelRange. The model should be updated when the
      * button "confirm" is clicked
      */
-    onLabelRangeChanged(ranges) {
-        this.labelRange = ranges[0];
-        this.state.labelsDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-            labelRange: this.labelRange,
-        });
-    }
-    onLabelRangeConfirmed() {
-        this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
-            labelRange: this.labelRange,
-        });
-    }
-    getLabelRange() {
-        return this.labelRange || "";
-    }
-    onUpdateAggregated(aggregated) {
-        this.props.updateChart(this.props.figureId, {
-            aggregated,
-        });
-    }
-    calculateHeaderPosition() {
-        if (this.isDatasetInvalid || this.isLabelInvalid) {
-            return undefined;
-        }
-        const getters = this.env.model.getters;
-        const sheetId = getters.getActiveSheetId();
-        const labelRange = createValidRange(getters, sheetId, this.labelRange);
-        const dataSets = createDataSets(getters, this.dataSets, sheetId, this.props.definition.dataSetsHaveTitle);
-        if (dataSets.length) {
-            return this.datasetOrientation === "rows"
-                ? dataSets[0].dataRange.zone.left
-                : dataSets[0].dataRange.zone.top + 1;
-        }
-        else if (labelRange) {
-            return labelRange.zone.top + 1;
-        }
-        return undefined;
-    }
-    get maxNumberOfUsedRanges() {
-        return chartRegistry.get(this.props.definition.type).dataSeriesLimit;
-    }
-    transposeDataSet(dataRanges, datasetOrientation) {
-        const getters = this.env.model.getters;
-        if (datasetOrientation === undefined) {
-            return dataRanges.filter(isDefined).map((dataRange) => ({ dataRange }));
-        }
-        const zonesBySheetName = {};
-        const transposedDatasets = [];
-        const figureSheetId = getters.getFigureSheetId(this.props.figureId);
-        let name = getters.getActiveSheet().name;
-        if (figureSheetId) {
-            name = getters.getSheet(figureSheetId).name;
-        }
-        for (const dataRange of dataRanges) {
-            if (!dataRange) {
-                continue;
-            }
-            if (!isXcRepresentation(dataRange)) {
-                return dataRanges.filter(isDefined).map((dataRange) => ({ dataRange }));
-            }
-            let { sheetName, xc } = splitReference(dataRange);
-            sheetName = sheetName ?? name;
-            if (!zonesBySheetName[sheetName]) {
-                zonesBySheetName[sheetName] = [];
-            }
-            zonesBySheetName[sheetName].push(toZone(xc));
-        }
-        for (const sheetName in zonesBySheetName) {
-            const zones = zonesBySheetName[sheetName];
-            const contiguousZones = mergeContiguousZones(zones);
-            if (datasetOrientation === "columns") {
-                for (const zone of contiguousZones) {
-                    for (let col = zone.left; col <= zone.right; col++) {
-                        const dataRange = `${sheetName === name ? "" : sheetName + "!"}${zoneToXc({
-                            ...zone,
-                            left: col,
-                            right: col,
-                        })}`;
-                        transposedDatasets.push({ dataRange });
-                    }
-                }
-            }
-            else {
-                for (const zone of contiguousZones) {
-                    for (let row = zone.top; row <= zone.bottom; row++) {
-                        const dataRange = `${sheetName === name ? "" : sheetName + "!"}${zoneToXc({
-                            ...zone,
-                            top: row,
-                            bottom: row,
-                        })}`;
-                        transposedDatasets.push({ dataRange });
-                    }
-                }
-            }
-        }
-        return transposedDatasets;
-    }
-}
-
-class BarConfigPanel extends GenericChartConfigPanel {
-    static template = "o-spreadsheet-BarConfigPanel";
-    get stackedLabel() {
-        const definition = this.props.definition;
-        return definition.horizontal
-            ? this.chartTerms.StackedBarChart
-            : this.chartTerms.StackedColumnChart;
-    }
-    onUpdateStacked(stacked) {
-        this.props.updateChart(this.props.figureId, {
-            stacked,
-        });
-    }
-}
-
-css /* scss */ `
-  .o-badge-selection {
-    gap: 1px;
-    button.o-button {
-      border-radius: 0;
-      &.selected {
-        color: ${GRAY_900};
-        border-color: ${ACTION_COLOR};
-        background: ${BADGE_SELECTED_COLOR};
-        font-weight: 600;
-      }
-
-      &:first-child {
-        border-radius: 4px 0 0 4px;
-      }
-      &:last-child {
-        border-radius: 0 4px 4px 0;
-      }
-    }
-  }
-`;
-class BadgeSelection extends Component {
-    static template = "o-spreadsheet.BadgeSelection";
-    static props = {
-        choices: Array,
-        onChange: Function,
-        selectedValue: String,
-    };
-}
-
-css /* scss */ `
-  .o-menu-item-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 2px 1px;
-    padding: 0px 1px;
-    border-radius: 2px;
-    min-width: 22px;
-  }
-  .o-disabled {
-    opacity: 0.6;
-    cursor: default;
-  }
-`;
-class ActionButton extends Component {
-    static template = "o-spreadsheet-ActionButton";
-    static props = {
-        action: Object,
-        hasTriangleDownIcon: { type: Boolean, optional: true },
-        selectedColor: { type: String, optional: true },
-        class: { type: String, optional: true },
-        onClick: { type: Function, optional: true },
-    };
-    actionButton = createAction(this.props.action);
-    setup() {
-        onWillUpdateProps((nextProps) => {
-            if (nextProps.action !== this.props.action) {
-                this.actionButton = createAction(nextProps.action);
-            }
-        });
-    }
-    get isVisible() {
-        return this.actionButton.isVisible(this.env);
-    }
-    get isEnabled() {
-        return this.actionButton.isEnabled(this.env);
-    }
-    get isActive() {
-        return this.actionButton.isActive?.(this.env);
-    }
-    get title() {
-        const name = this.actionButton.name(this.env);
-        const description = this.actionButton.description(this.env);
-        return name + (description ? ` (${description})` : "");
-    }
-    get iconTitle() {
-        return this.actionButton.icon(this.env);
-    }
-    onClick(ev) {
-        if (this.isEnabled) {
-            this.props.onClick?.(ev);
-            this.actionButton.execute?.(this.env);
-        }
-    }
-    get buttonStyle() {
-        if (this.props.selectedColor) {
-            return cssPropertiesToCss({
-                "border-bottom": `4px solid ${this.props.selectedColor}`,
-                height: "16px",
-                "margin-top": "2px",
-            });
-        }
-        return "";
-    }
-}
-
-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 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 = 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%)`,
+    onLabelRangeChanged(ranges) {
+        this.labelRange = ranges[0];
+        this.state.labelsDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+            labelRange: this.labelRange,
         });
     }
-    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`,
+    onLabelRangeConfirmed() {
+        this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
+            labelRange: this.labelRange,
         });
     }
-    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),
-        });
+    getLabelRange() {
+        return this.labelRange || "";
     }
-    get colorPreviewStyle() {
-        return cssPropertiesToCss({
-            "background-color": hslaToHex(this.state.currentHslaColor),
+    onUpdateAggregated(aggregated) {
+        this.props.updateChart(this.props.figureId, {
+            aggregated,
         });
     }
-    get checkmarkColor() {
-        return chartFontColor(this.props.currentColor);
+    calculateHeaderPosition() {
+        if (this.isDatasetInvalid || this.isLabelInvalid) {
+            return undefined;
+        }
+        const getters = this.env.model.getters;
+        const sheetId = getters.getActiveSheetId();
+        const labelRange = createValidRange(getters, sheetId, this.labelRange);
+        const dataSets = createDataSets(getters, this.dataSets, sheetId, this.props.definition.dataSetsHaveTitle);
+        if (dataSets.length) {
+            return this.datasetOrientation === "rows"
+                ? dataSets[0].dataRange.zone.left
+                : dataSets[0].dataRange.zone.top + 1;
+        }
+        else if (labelRange) {
+            return labelRange.zone.top + 1;
+        }
+        return undefined;
     }
-    get isHexColorInputValid() {
-        return !this.state.customHexColor || isColorValid(this.state.customHexColor);
+    get maxNumberOfUsedRanges() {
+        return chartRegistry.get(this.props.definition.type).dataSeriesLimit;
     }
-    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 });
+    transposeDataSet(dataRanges, datasetOrientation) {
+        const getters = this.env.model.getters;
+        if (datasetOrientation === undefined) {
+            return dataRanges.filter(isDefined).map((dataRange) => ({ dataRange }));
+        }
+        const zonesBySheetName = {};
+        const transposedDatasets = [];
+        const figureSheetId = getters.getFigureSheetId(this.props.figureId);
+        let name = getters.getActiveSheet().name;
+        if (figureSheetId) {
+            name = getters.getSheet(figureSheetId).name;
+        }
+        for (const dataRange of dataRanges) {
+            if (!dataRange) {
+                continue;
+            }
+            if (!isXcRepresentation(dataRange)) {
+                return dataRanges.filter(isDefined).map((dataRange) => ({ dataRange }));
+            }
+            let { sheetName, xc } = splitReference(dataRange);
+            sheetName = sheetName ?? name;
+            if (!zonesBySheetName[sheetName]) {
+                zonesBySheetName[sheetName] = [];
+            }
+            zonesBySheetName[sheetName].push(toZone(xc));
+        }
+        for (const sheetName in zonesBySheetName) {
+            const zones = zonesBySheetName[sheetName];
+            const contiguousZones = mergeContiguousZones(zones);
+            if (datasetOrientation === "columns") {
+                for (const zone of contiguousZones) {
+                    for (let col = zone.left; col <= zone.right; col++) {
+                        const dataRange = `${sheetName === name ? "" : sheetName + "!"}${zoneToXc({
+                            ...zone,
+                            left: col,
+                            right: col,
+                        })}`;
+                        transposedDatasets.push({ dataRange });
+                    }
+                }
+            }
+            else {
+                for (const zone of contiguousZones) {
+                    for (let row = zone.top; row <= zone.bottom; row++) {
+                        const dataRange = `${sheetName === name ? "" : sheetName + "!"}${zoneToXc({
+                            ...zone,
+                            top: row,
+                            bottom: row,
+                        })}`;
+                        transposedDatasets.push({ dataRange });
+                    }
+                }
+            }
+        }
+        return transposedDatasets;
     }
-    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 });
+}
+
+class BarConfigPanel extends GenericChartConfigPanel {
+    static template = "o-spreadsheet-BarConfigPanel";
+    get stackedLabel() {
+        const definition = this.props.definition;
+        return definition.horizontal
+            ? this.chartTerms.StackedBarChart
+            : this.chartTerms.StackedColumnChart;
     }
-    updateColor(newHsl) {
-        this.state.currentHslaColor = { ...this.state.currentHslaColor, ...newHsl };
-        this.state.customHexColor = hslaToHex(this.state.currentHslaColor);
+    onUpdateStacked(stacked) {
+        this.props.updateChart(this.props.figureId, {
+            stacked,
+        });
     }
-    onColorClick(color) {
-        if (color) {
-            this.props.onColorPicked(toHex(color));
-        }
+}
+
+css /* scss */ `
+  .o-badge-selection {
+    gap: 1px;
+    button.o-button {
+      border-radius: 0;
+      &.selected {
+        color: ${GRAY_900};
+        border-color: ${ACTION_COLOR};
+        background: ${BADGE_SELECTED_COLOR};
+        font-weight: 600;
+      }
+
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
     }
-    resetColor() {
-        this.props.onColorPicked("");
+  }
+`;
+class BadgeSelection extends Component {
+    static template = "o-spreadsheet.BadgeSelection";
+    static props = {
+        choices: Array,
+        onChange: Function,
+        selectedValue: String,
+    };
+}
+
+css /* scss */ `
+  .o-menu-item-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2px 1px;
+    padding: 0px 1px;
+    border-radius: 2px;
+    min-width: 22px;
+  }
+  .o-disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`;
+class ActionButton extends Component {
+    static template = "o-spreadsheet-ActionButton";
+    static props = {
+        action: Object,
+        hasTriangleDownIcon: { type: Boolean, optional: true },
+        selectedColor: { type: String, optional: true },
+        class: { type: String, optional: true },
+        onClick: { type: Function, optional: true },
+    };
+    actionButton = createAction(this.props.action);
+    setup() {
+        onWillUpdateProps((nextProps) => {
+            if (nextProps.action !== this.props.action) {
+                this.actionButton = createAction(nextProps.action);
+            }
+        });
     }
-    toggleColorPicker() {
-        this.state.showGradient = !this.state.showGradient;
+    get isVisible() {
+        return this.actionButton.isVisible(this.env);
     }
-    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, () => { });
+    get isEnabled() {
+        return this.actionButton.isEnabled(this.env);
     }
-    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, () => { });
+    get isActive() {
+        return this.actionButton.isActive?.(this.env);
     }
-    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 };
-        }
+    get title() {
+        const name = this.actionButton.name(this.env);
+        const description = this.actionButton.description(this.env);
+        return name + (description ? ` (${description})` : "");
     }
-    addCustomColor(ev) {
-        if (!isHSLAValid(this.state.currentHslaColor) || !isColorValid(this.state.customHexColor)) {
-            return;
+    get iconTitle() {
+        return this.actionButton.icon(this.env);
+    }
+    onClick(ev) {
+        if (this.isEnabled) {
+            this.props.onClick?.(ev);
+            this.actionButton.execute?.(this.env);
         }
-        this.props.onColorPicked(toHex(this.state.customHexColor));
     }
-    isSameColor(color1, color2) {
-        return isSameColor(color1, color2);
+    get buttonStyle() {
+        if (this.props.selectedColor) {
+            return cssPropertiesToCss({
+                "border-bottom": `4px solid ${this.props.selectedColor}`,
+                height: "16px",
+                "margin-top": "2px",
+            });
+        }
+        return "";
     }
 }
 
@@ -49161,57 +50031,6 @@ class RadioSelection extends Component {
     };
 }
 
-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 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 = useRef("colorPickerButton");
-    state;
-    setup() {
-        this.state = useState({ pickerOpened: false });
-        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 Component {
     static template = "o-spreadsheet-GeneralDesignEditor";
     static components = {
@@ -54739,7 +55558,7 @@ class SpreadsheetPivot {
     }
     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";
         }
@@ -55347,7 +56166,7 @@ css /* scss */ `
 `;
 class SettingsPanel extends Component {
     static template = "o-spreadsheet-SettingsPanel";
-    static components = { Section, ValidationMessages };
+    static components = { Section, ValidationMessages, BadgeSelection };
     static props = { onCloseSidePanel: Function };
     loadedLocales = [];
     setup() {
@@ -56231,49 +57050,111 @@ class ScreenWidthStore {
 }
 
 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 panelProps() {
-        const state = this.computeState(this.componentTag, this.initialPanelProps);
+    get secondaryPanelProps() {
+        return this.secondaryPanel ? this.getPanelProps(this.secondaryPanel) : undefined;
+    }
+    get secondaryPanelKey() {
+        return this.secondaryPanel ? this.getPanelKey(this.secondaryPanel) : undefined;
+    }
+    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 {
@@ -56281,34 +57162,85 @@ class SidePanelStore extends SpreadsheetStore {
         }
     }
     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;
     }
-    changePanelSize(size, spreadsheetElWidth) {
-        if (size < DEFAULT_SIDE_PANEL_SIZE) {
-            this.panelSize = DEFAULT_SIDE_PANEL_SIZE;
+    closeMainPanel() {
+        this.mainPanel?.initialPanelProps.onCloseSidePanel?.();
+        this.mainPanel = this.secondaryPanel || undefined;
+        this.secondaryPanel = undefined;
+    }
+    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);
         }
     }
 }
@@ -56456,11 +57388,11 @@ class Grid extends Component {
             this.hoveredCell.clear();
         });
         this.cellPopovers = useStore(CellPopoverStore);
-        useEffect(() => {
-            if (!this.sidePanel.isOpen) {
+        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;
@@ -59542,7 +60474,7 @@ class DataValidationPlugin extends CorePlugin {
         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];
@@ -59552,7 +60484,7 @@ class DataValidationPlugin extends CorePlugin {
         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;
@@ -59562,9 +60494,12 @@ class DataValidationPlugin extends CorePlugin {
             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);
@@ -62972,7 +63907,7 @@ class PivotCorePlugin extends CorePlugin {
                 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;
             }
@@ -63043,10 +63978,7 @@ class PivotCorePlugin extends CorePlugin {
     // 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);
@@ -63135,7 +64067,6 @@ class PivotCorePlugin extends CorePlugin {
         }
     }
     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 */;
@@ -63149,26 +64080,6 @@ class PivotCorePlugin extends CorePlugin {
         }
         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
     // ---------------------------------------------------------------------
@@ -63250,9 +64161,7 @@ class SettingsPlugin extends CorePlugin {
         this.locale = data.settings?.locale ?? DEFAULT_LOCALE;
     }
     export(data) {
-        data.settings = {
-            locale: this.locale,
-        };
+        data.settings = { locale: this.locale };
     }
 }
 
@@ -65908,7 +66817,10 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         "getDataValidationInvalidCriterionValueMessage",
         "getInvalidDataValidationMessage",
         "getValidationResultForCellValue",
+        "getDataValidationRangeValues",
         "isCellValidCheckbox",
+        "getDataValidationCellStyle",
+        "getDataValidationChipStyle",
         "isDataValidationInvalid",
     ];
     validationResults = {};
@@ -65929,6 +66841,18 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
     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;
@@ -65951,6 +66875,11 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         }
         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;
@@ -65970,6 +66899,38 @@ class EvaluationDataValidationPlugin extends CoreViewPlugin {
         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;
     }
@@ -66066,12 +67027,35 @@ iconsOnCellRegistry.add("data_validation_checkbox", (getters, position) => {
     }
     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,
@@ -66212,11 +67196,8 @@ class CellIconPlugin extends CoreViewPlugin {
         }
         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);
@@ -68613,11 +69594,11 @@ class OTRegistry extends Registry {
      * 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;
     }
@@ -68626,7 +69607,7 @@ class OTRegistry extends Registry {
      * 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();
@@ -68956,10 +69937,20 @@ function adaptTransform(toTransform, executed) {
  */
 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;
 }
@@ -70516,6 +71507,9 @@ class SheetUIPlugin extends UIPlugin {
         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;
         }
@@ -70673,7 +71667,7 @@ class SheetUIPlugin extends UIPlugin {
                 }
                 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) {
@@ -70876,6 +71870,8 @@ class CellComputedStylePlugin extends UIPlugin {
         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 = {};
@@ -70947,8 +71943,10 @@ class CellComputedStylePlugin extends UIPlugin {
         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),
         };
@@ -72032,49 +73030,17 @@ class ClipboardPlugin extends UIPlugin {
         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
@@ -74510,19 +75476,29 @@ autoCompleteProviders.add("dataValidation", {
             (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);
@@ -74893,6 +75869,17 @@ clickableCellRegistry.add("link", {
         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,
 });
 
@@ -76604,12 +77591,13 @@ class ClickableCellsStore extends SpreadsheetStore {
             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;
@@ -76994,24 +77982,36 @@ css /* scss */ `
     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 {
@@ -77088,43 +78088,114 @@ css /* scss */ `
 `;
 class SidePanel extends 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 Component {
+    static template = "o-spreadsheet-SidePanels";
     static props = {};
+    static components = { SidePanel };
     sidePanelStore;
     spreadsheetRect = useSpreadsheetRect();
     setup() {
         this.sidePanelStore = useStore(SidePanelStore);
-        useEffect((isOpen) => {
-            if (!isOpen) {
+        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);
+        }, () => [this.sidePanelStore.isMainPanelOpen, this.sidePanelStore.isSecondaryPanelOpen]);
     }
-    close() {
-        this.sidePanelStore.close();
-    }
-    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 Component {
@@ -78686,7 +79757,7 @@ class Spreadsheet extends Component {
         Grid,
         BottomBar,
         SmallBottomBar,
-        SidePanel,
+        SidePanels,
         SpreadsheetDashboard,
         HeaderGroupContainer,
         FullScreenChart,
@@ -78709,7 +79780,9 @@ class Spreadsheet extends Component {
         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);
     }
@@ -78793,7 +79866,7 @@ class Spreadsheet extends Component {
             this.checkViewportSize();
         });
         const resizeObserver = new ResizeObserver(() => {
-            this.sidePanel.changePanelSize(this.sidePanel.panelSize, this.spreadsheetRect.width);
+            this.sidePanel.changeSpreadsheetWidth(this.spreadsheetRect.width);
         });
     }
     bindModelEvents() {
@@ -83342,6 +84415,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";