@odoo/o-spreadsheet 17.5.0-alpha.4 → 17.5.0-alpha.6

package/dist/o-spreadsheet.cjs.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 17.5.0-alpha.4
- * @date 2024-08-06T12:05:55.642Z
- * @hash a941df3
+ * @version 17.5.0-alpha.6
+ * @date 2024-08-19T08:12:01.220Z
+ * @hash c067f5d
  */
 
 'use strict';
@@ -24,12 +24,11 @@ const SELECTION_BORDER_COLOR = "#3266ca";
 const HEADER_BORDER_COLOR = "#C0C0C0";
 const CELL_BORDER_COLOR = "#E2E3E3";
 const BACKGROUND_CHART_COLOR = "#FFFFFF";
-const BG_HOVER_COLOR = "#EBEBEB";
+const BORDER_CHART_COLOR = "#FFFFFF";
 const DISABLED_TEXT_COLOR = "#CACACA";
 const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
 const LINK_COLOR = "#017E84";
 const FILTERS_COLOR = "#188038";
-const BACKGROUND_HEADER_FILTER_COLOR = "#E6F4EA";
 const SEPARATOR_COLOR = "#E0E2E4";
 const ICONS_COLOR = "#4A4F59";
 const HEADER_GROUPING_BACKGROUND_COLOR = "#F5F5F5";
@@ -38,9 +37,35 @@ const GRID_BORDER_COLOR = "#E2E3E3";
 const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
 const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
 const COMPOSER_ASSISTANT_COLOR = "#9B359B";
-const CHART_WATERFALL_POSITIVE_COLOR = "#006FBE";
-const CHART_WATERFALL_NEGATIVE_COLOR = "#E40000";
+const CHART_WATERFALL_POSITIVE_COLOR = "#4EA7F2";
+const CHART_WATERFALL_NEGATIVE_COLOR = "#EA6175";
 const CHART_WATERFALL_SUBTOTAL_COLOR = "#AAAAAA";
+const GRAY_900 = "#111827";
+const GRAY_300 = "#D8DADD";
+const GRAY_200 = "#E7E9ED";
+const GRAY_100 = "#F9FAFB";
+const TEXT_BODY = "#374151";
+const TEXT_BODY_MUTED = TEXT_BODY + "C2";
+const TEXT_HEADING = "#111827";
+const PRIMARY_BUTTON_BG = "#714B67";
+const PRIMARY_BUTTON_HOVER_BG = "#624159";
+const PRIMARY_BUTTON_ACTIVE_BG = "#f1edf0";
+const BUTTON_BG = GRAY_200;
+const BUTTON_HOVER_BG = GRAY_300;
+const BUTTON_HOVER_TEXT_COLOR = "#111827";
+const BUTTON_ACTIVE_BG = "#e6f2f3";
+const BUTTON_ACTIVE_TEXT_COLOR = "#111827";
+const ACTION_COLOR = "#017E84";
+const ALERT_WARNING_BG = "#FBEBCC";
+const ALERT_WARNING_BORDER = "#F8E2B3";
+const ALERT_WARNING_TEXT_COLOR = "#946D23";
+const ALERT_DANGER_BG = "#D44C591A";
+const ALERT_DANGER_BORDER = "#C34A41";
+const ALERT_DANGER_TEXT_COLOR = "#C34A41";
+const ALERT_INFO_BG = "#CDEDF1";
+const ALERT_INFO_BORDER = "#98DBE2";
+const ALERT_INFO_TEXT_COLOR = "#09414A";
+const BADGE_SELECTED_COLOR = "#E6F2F3";
 const DEFAULT_CHART_PADDING = 20;
 const DEFAULT_CHART_FONT_SIZE = 22;
 // Color picker defaults as upper case HEX to match `toHex`helper
@@ -190,12 +215,12 @@ const MIN_FIG_SIZE = 80;
 // Chart
 const MAX_CHAR_LABEL = 20;
 const FIGURE_ID_SPLITTER = "??";
-const DEFAULT_GAUGE_LOWER_COLOR = "#cc0000";
-const DEFAULT_GAUGE_MIDDLE_COLOR = "#f1c232";
-const DEFAULT_GAUGE_UPPER_COLOR = "#6aa84f";
+const DEFAULT_GAUGE_LOWER_COLOR = "#EA6175";
+const DEFAULT_GAUGE_MIDDLE_COLOR = "#FFD86D";
+const DEFAULT_GAUGE_UPPER_COLOR = "#43C5B1";
 const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
-const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6AA84F";
-const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#E06666";
+const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#43C5B1";
+const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#EA6175";
 const LINE_FILL_TRANSPARENCY = 0.4;
 // session
 const DEBOUNCE_TIME = 200;
@@ -1090,42 +1115,117 @@ function darkenColor(color, percentage) {
     hsla.l = hsla.l - percentage * hsla.l;
     return hslaToHex(hsla);
 }
-const ColorsList = [
-    // the same colors as those used in odoo reporting
-    "rgb(31,119,180)",
-    "rgb(255,127,14)",
-    "rgb(174,199,232)",
-    "rgb(255,187,120)",
-    "rgb(44,160,44)",
-    "rgb(152,223,138)",
-    "rgb(214,39,40)",
-    "rgb(255,152,150)",
-    "rgb(148,103,189)",
-    "rgb(197,176,213)",
-    "rgb(140,86,75)",
-    "rgb(196,156,148)",
-    "rgb(227,119,194)",
-    "rgb(247,182,210)",
-    "rgb(127,127,127)",
-    "rgb(199,199,199)",
-    "rgb(188,189,34)",
-    "rgb(219,219,141)",
-    "rgb(23,190,207)",
-    "rgb(158,218,229)",
+const COLORS_SM = [
+    "#4EA7F2", // Blue
+    "#EA6175", // Red
+    "#43C5B1", // Teal
+    "#F4A261", // Orange
+    "#8481DD", // Purple
+    "#FFD86D", // Yellow
 ];
-function getNthColor(index) {
-    return ColorsList[index % ColorsList.length];
+const COLORS_MD = [
+    "#4EA7F2", // Blue #1
+    "#3188E6", // Blue #2
+    "#43C5B1", // Teal #1
+    "#00A78D", // Teal #2
+    "#EA6175", // Red #1
+    "#CE4257", // Red #2
+    "#F4A261", // Orange #1
+    "#F48935", // Orange #2
+    "#8481DD", // Purple #1
+    "#5752D1", // Purple #2
+    "#FFD86D", // Yellow #1
+    "#FFBC2C", // Yellow #2
+];
+const COLORS_LG = [
+    "#4EA7F2", // Blue #1
+    "#3188E6", // Blue #2
+    "#056BD9", // Blue #3
+    "#A76DBC", // Violet #1
+    "#7F4295", // Violet #2
+    "#6D2387", // Violet #3
+    "#EA6175", // Red #1
+    "#CE4257", // Red #2
+    "#982738", // Red #3
+    "#43C5B1", // Teal #1
+    "#00A78D", // Teal #2
+    "#0E8270", // Teal #3
+    "#F4A261", // Orange #1
+    "#F48935", // Orange #2
+    "#BE5D10", // Orange #3
+    "#8481DD", // Purple #1
+    "#5752D1", // Purple #2
+    "#3A3580", // Purple #3
+    "#A4A8B6", // Gray #1
+    "#7E8290", // Gray #2
+    "#545B70", // Gray #3
+    "#FFD86D", // Yellow #1
+    "#FFBC2C", // Yellow #2
+    "#C08A16", // Yellow #3
+];
+const COLORS_XL = [
+    "#4EA7F2", // Blue #1
+    "#3188E6", // Blue #2
+    "#056BD9", // Blue #3
+    "#155193", // Blue #4
+    "#A76DBC", // Violet #1
+    "#7F4295", // Violet #1
+    "#6D2387", // Violet #1
+    "#4F1565", // Violet #1
+    "#EA6175", // Red #1
+    "#CE4257", // Red #2
+    "#982738", // Red #3
+    "#791B29", // Red #4
+    "#43C5B1", // Teal #1
+    "#00A78D", // Teal #2
+    "#0E8270", // Teal #3
+    "#105F53", // Teal #4
+    "#F4A261", // Orange #1
+    "#F48935", // Orange #2
+    "#BE5D10", // Orange #3
+    "#7D380D", // Orange #4
+    "#8481DD", // Purple #1
+    "#5752D1", // Purple #2
+    "#3A3580", // Purple #3
+    "#26235F", // Purple #4
+    "#A4A8B6", // Grey #1
+    "#7E8290", // Grey #2
+    "#545B70", // Grey #3
+    "#3F4250", // Grey #4
+    "#FFD86D", // Yellow #1
+    "#FFBC2C", // Yellow #2
+    "#C08A16", // Yellow #3
+    "#936A12", // Yellow #4
+];
+function getNthColor(index, palette) {
+    return palette[index % palette.length];
+}
+function getColorsPalette(quantity) {
+    if (quantity <= 6) {
+        return COLORS_SM;
+    }
+    else if (quantity <= 12) {
+        return COLORS_MD;
+    }
+    else if (quantity <= 24) {
+        return COLORS_LG;
+    }
+    else {
+        return COLORS_XL;
+    }
 }
 class ColorGenerator {
+    preferredColors;
     currentColorIndex = 0;
-    colors;
-    constructor(colors = []) {
-        this.colors = colors;
+    palette;
+    constructor(paletteSize, preferredColors = []) {
+        this.preferredColors = preferredColors;
+        this.palette = getColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
     }
     next() {
-        return this.colors?.[this.currentColorIndex]
-            ? this.colors[this.currentColorIndex++]
-            : getNthColor(this.currentColorIndex++);
+        return this.preferredColors?.[this.currentColorIndex]
+            ? this.preferredColors[this.currentColorIndex++]
+            : getNthColor(this.currentColorIndex++, this.palette);
     }
 }
 
@@ -2011,6 +2111,7 @@ const coreTypes = new Set([
     "UPDATE_CELL",
     "UPDATE_CELL_POSITION",
     "CLEAR_CELL",
+    "CLEAR_CELLS",
     "DELETE_CONTENT",
     /** GRID SHAPE */
     "ADD_COLUMNS_ROWS",
@@ -7033,13 +7134,10 @@ class CellClipboardHandler extends AbstractCellClipboardHandler {
      * Clear the clipped zones: remove the cells and clear the formatting
      */
     clearClippedZones(content) {
-        for (const row of content.cells) {
-            for (const cell of row) {
-                if (cell.position) {
-                    this.dispatch("CLEAR_CELL", cell.position);
-                }
-            }
-        }
+        this.dispatch("CLEAR_CELLS", {
+            sheetId: content.sheetId,
+            target: content.zones,
+        });
         this.dispatch("CLEAR_FORMATTING", {
             sheetId: content.sheetId,
             target: content.zones,
@@ -8425,6 +8523,7 @@ function getFullTrendingLineDataSet(dataset, config, data) {
         backgroundColor,
         borderColor: backgroundColor,
         borderDash: [5, 5],
+        borderWidth: undefined,
     };
 }
 function interpolateData(config, values, labels, newLabels) {
@@ -8461,6 +8560,25 @@ function interpolateData(config, values, labels, newLabels) {
             return [];
     }
 }
+function formatTickValue(localeFormat) {
+    return (value) => {
+        value = Number(value);
+        if (isNaN(value))
+            return value;
+        const { locale, format } = localeFormat;
+        return formatValue(value, {
+            locale,
+            format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
+        });
+    };
+}
+function getChartColorsGenerator(definition, dataSetsSize) {
+    return new ColorGenerator(dataSetsSize, definition.dataSets.map((ds) => ds.backgroundColor));
+}
+const CHART_AXIS_CHOICES = [
+    { value: "left", label: _t("Left") },
+    { value: "right", label: _t("Right") },
+];
 
 /** This is a chartJS plugin that will draw the values of each data next to the point/bar/pie slice */
 const chartShowValuesPlugin = {
@@ -8480,6 +8598,9 @@ const chartShowValuesPlugin = {
         ctx.fillStyle = chartFontColor(options.background);
         ctx.strokeStyle = chartFontColor(ctx.fillStyle);
         chart._metasets.forEach(function (dataset) {
+            if (dataset.xAxisID === TREND_LINE_XAXIS_ID) {
+                return; // ignore trend lines
+            }
             switch (dataset.type) {
                 case "doughnut":
                 case "pie": {
@@ -8799,8 +8920,8 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
         this.baselineMode = definition.baselineMode;
         this.baselineDescr = definition.baselineDescr;
         this.background = definition.background;
-        this.baselineColorUp = definition.baselineColorUp;
-        this.baselineColorDown = definition.baselineColorDown;
+        this.baselineColorUp = definition.baselineColorUp ?? DEFAULT_SCORECARD_BASELINE_COLOR_UP;
+        this.baselineColorDown = definition.baselineColorDown ?? DEFAULT_SCORECARD_BASELINE_COLOR_DOWN;
         this.humanize = definition.humanize ?? false;
     }
     static validateChartDefinition(validator, definition) {
@@ -16181,7 +16302,7 @@ function parse(str) {
 }
 function parseTokens(tokens) {
     tokens = tokens.filter((x) => x.type !== "SPACE");
-    if (tokens[0].value === "=") {
+    if (tokens[0]?.value === "=") {
         tokens.splice(0, 1);
     }
     const result = parseExpression(tokens);
@@ -18654,14 +18775,6 @@ for (let category of categories) {
 }
 const notAvailableError = new NotAvailableError(_t("Array arguments to [[FUNCTION_NAME]] are of different size."));
 function createComputeFunction(descr, functionName) {
-    function runtimeCompute(...args) {
-        try {
-            return vectorizedCompute.apply(this, args);
-        }
-        catch (e) {
-            return handleError(e, functionName);
-        }
-    }
     function vectorizedCompute(...args) {
         let countVectorizableCol = 1;
         let countVectorizableRow = 1;
@@ -18702,13 +18815,13 @@ function createComputeFunction(descr, functionName) {
                 }
             }
             if (!isMatrix(arg) && argDefinition.acceptMatrixOnly) {
-                throw new BadExpressionError(_t("Function [[FUNCTION_NAME]] expects the parameter '%s' to be reference to a cell or range.", (i + 1).toString()));
+                throw new BadExpressionError(_t("Function %s expects the parameter '%s' to be reference to a cell or range.", functionName, (i + 1).toString()));
             }
         }
         //#endregion
         if (countVectorizableCol === 1 && countVectorizableRow === 1) {
             // either this function is not vectorized or it ends up with a 1x1 dimension
-            return computeFunctionToObject.apply(this, args);
+            return errorHandlingCompute.apply(this, args);
         }
         const getArgOffset = (i, j) => args.map((arg, index) => {
             switch (vectorArgsType?.[index]) {
@@ -18726,7 +18839,7 @@ function createComputeFunction(descr, functionName) {
             if (col > vectorizableColLimit - 1 || row > vectorizableRowLimit - 1) {
                 return notAvailableError;
             }
-            const singleCellComputeResult = computeFunctionToObject.apply(this, getArgOffset(col, row));
+            const singleCellComputeResult = errorHandlingCompute.apply(this, getArgOffset(col, row));
             // In the case where the user tries to vectorize arguments of an array formula, we will get an
             // array for every combination of the vectorized arguments, which will lead to a 3D matrix and
             // we won't be able to return the values.
@@ -18741,6 +18854,14 @@ function createComputeFunction(descr, functionName) {
                 : singleCellComputeResult;
         });
     }
+    function errorHandlingCompute(...args) {
+        try {
+            return computeFunctionToObject.apply(this, args);
+        }
+        catch (e) {
+            return handleError(e, functionName);
+        }
+    }
     function computeFunctionToObject(...args) {
         const result = descr.compute.apply(this, args);
         if (!isMatrix(result)) {
@@ -18756,7 +18877,7 @@ function createComputeFunction(descr, functionName) {
         }
         return matrixMap(result, (row) => ({ value: row }));
     }
-    return runtimeCompute;
+    return vectorizedCompute;
 }
 function handleError(e, functionName) {
     // the error could be an user error (instance of EvaluationError)
@@ -22105,15 +22226,15 @@ css /* scss */ `
 // -----------------------------------------------------------------------------
 // We need here the svg of the icons that we need to convert to images for the renderer
 // -----------------------------------------------------------------------------
-const ARROW_DOWN = '<svg class="o-cf-icon arrow-down" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#E06666" d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path></svg>';
-const ARROW_UP = '<svg class="o-cf-icon arrow-up" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#6AA84F" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>';
-const ARROW_RIGHT = '<svg class="o-cf-icon arrow-right" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#F0AD4E" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>';
-const SMILE = '<svg class="o-cf-icon smile" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#6AA84F" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>';
-const MEH = '<svg class="o-cf-icon meh" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#F0AD4E" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z"></path></svg>';
-const FROWN = '<svg class="o-cf-icon frown" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#E06666" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"></path></svg>';
-const GREEN_DOT = '<svg class="o-cf-icon green-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#6AA84F" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
-const YELLOW_DOT = '<svg class="o-cf-icon yellow-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#F0AD4E" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
-const RED_DOT = '<svg class="o-cf-icon red-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#E06666" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
+const ARROW_DOWN = '<svg class="o-icon arrow-down" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#E06666" d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"></path></svg>';
+const ARROW_UP = '<svg class="o-icon arrow-up" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#6AA84F" d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path></svg>';
+const ARROW_RIGHT = '<svg class="o-icon arrow-right" width="10" height="10" focusable="false" viewBox="0 0 448 512"><path fill="#F0AD4E" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>';
+const SMILE = '<svg class="o-icon smile" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#6AA84F" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg>';
+const MEH = '<svg class="o-icon meh" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#F0AD4E" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z"></path></svg>';
+const FROWN = '<svg class="o-icon frown" width="10" height="10" focusable="false" viewBox="0 0 496 512"><path fill="#E06666" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"></path></svg>';
+const GREEN_DOT = '<svg class="o-icon green-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#6AA84F" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
+const YELLOW_DOT = '<svg class="o-icon yellow-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#F0AD4E" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
+const RED_DOT = '<svg class="o-icon red-dot" width="10" height="10" focusable="false" viewBox="0 0 512 512"><path fill="#E06666" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path></svg>';
 function getIconSrc(svg) {
     /** We have to add xmlns, as it's not added by owl in the canvas */
     svg = `<svg xmlns="http://www.w3.org/2000/svg" ${svg.slice(4)}`;
@@ -23410,6 +23531,7 @@ function convertChartData(chartData) {
         return {
             dataRange: convertExcelRangeToSheetXC(data.range, dataSetsHaveTitle),
             label,
+            backgroundColor: data.backgroundColor,
         };
     });
     // For doughnut charts, in chartJS first dataset = outer dataset, in excel first dataset = inner dataset
@@ -24930,11 +25052,13 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
                         label = { text };
                     }
                 }
+                const color = this.extractChildAttr(chartDataElement, "c:spPr a:solidFill a:srgbClr", "val");
                 return {
                     label,
                     range: this.extractChildTextContent(chartDataElement, "c:val c:f", {
                         required: true,
                     }),
+                    backgroundColor: color ? `${toHex(color.asString())}` : undefined,
                 };
             });
         })
@@ -27100,23 +27224,13 @@ function createBarChartRuntime(chart, getters) {
         }),
     };
     config.options.indexAxis = chart.horizontal ? "y" : "x";
-    const formatCallback = (value) => {
-        value = Number(value);
-        if (isNaN(value))
-            return value;
-        const { locale, format } = localeFormat;
-        return formatValue(value, {
-            locale,
-            format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
-        });
-    };
     config.options.scales = {};
     const labelsAxis = { ticks: { padding: 5, color: fontColor } };
     const valuesAxis = {
         beginAtZero: true, // the origin of the y axis is always zero
         ticks: {
             color: fontColor,
-            callback: formatCallback,
+            callback: formatTickValue(localeFormat),
         },
     };
     const xAxis = chart.horizontal ? valuesAxis : labelsAxis;
@@ -27153,26 +27267,22 @@ function createBarChartRuntime(chart, getters) {
         showValues: chart.showValues,
         background: chart.background,
         horizontal: chart.horizontal,
-        callback: formatCallback,
+        callback: formatTickValue(localeFormat),
     };
-    const colors = new ColorGenerator();
-    const trendDatasets = [];
     const definition = chart.getDefinition();
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+    const trendDatasets = [];
     for (const index in dataSetsValues) {
         const { label, data } = dataSetsValues[index];
         const color = colors.next();
         const dataset = {
             label,
             data,
-            borderColor: color,
+            borderColor: BORDER_CHART_COLOR,
+            borderWidth: 1,
             backgroundColor: color,
         };
         config.data.datasets.push(dataset);
-        if (definition.dataSets?.[index]?.backgroundColor) {
-            const color = definition.dataSets[index].backgroundColor;
-            dataset.backgroundColor = color;
-            dataset.borderColor = color;
-        }
         if (definition.dataSets?.[index]?.label) {
             const label = definition.dataSets[index].label;
             dataset.label = label;
@@ -27515,21 +27625,11 @@ function createLineOrScatterChartRuntime(chart, getters) {
     config.options.scales = {
         x: xAxis,
     };
-    const formatCallback = (value) => {
-        value = Number(value);
-        if (isNaN(value))
-            return value;
-        const { locale, format } = options;
-        return formatValue(value, {
-            locale,
-            format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
-        });
-    };
     const yAxis = {
         beginAtZero: true, // the origin of the y axis is always zero
         ticks: {
             color: fontColor,
-            callback: formatCallback,
+            callback: formatTickValue(options),
         },
     };
     const { useLeftAxis, useRightAxis } = getDefinedAxis(chart.getDefinition());
@@ -27560,7 +27660,7 @@ function createLineOrScatterChartRuntime(chart, getters) {
     config.options.plugins.chartShowValuesPlugin = {
         showValues: chart.showValues,
         background: chart.background,
-        callback: formatCallback,
+        callback: formatTickValue(options),
     };
     if (chart.dataSetsHaveTitle &&
         dataSetsValues[0] &&
@@ -27597,8 +27697,8 @@ function createLineOrScatterChartRuntime(chart, getters) {
     const areaChart = "fillArea" in chart ? chart.fillArea : false;
     const stackedChart = "stacked" in chart ? chart.stacked : false;
     const cumulative = "cumulative" in chart ? chart.cumulative : false;
-    const colors = new ColorGenerator();
     const definition = chart.getDefinition();
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
     for (let [index, { label, data }] of dataSetsValues.entries()) {
         const color = colors.next();
         let backgroundRGBA = colorToRGBA(color);
@@ -27634,13 +27734,6 @@ function createLineOrScatterChartRuntime(chart, getters) {
     let maxLength = 0;
     const trendDatasets = [];
     for (const [index, dataset] of config.data.datasets.entries()) {
-        if (definition.dataSets?.[index]?.backgroundColor) {
-            const color = definition.dataSets[index].backgroundColor;
-            dataset.backgroundColor = color;
-            dataset.borderColor = color;
-            //@ts-ignore
-            dataset.pointBackgroundColor = color;
-        }
         if (definition.dataSets?.[index]?.label) {
             const label = definition.dataSets[index].label;
             dataset.label = label;
@@ -27855,30 +27948,18 @@ function createComboChartRuntime(chart, getters) {
             title: getChartAxisTitleRuntime(chart.axesDesign?.x),
         },
     };
-    const formatCallback = (format) => {
-        return (value) => {
-            value = Number(value);
-            if (isNaN(value))
-                return value;
-            const { locale } = localeFormat;
-            return formatValue(value, {
-                locale,
-                format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
-            });
-        };
-    };
     const leftVerticalAxis = {
         beginAtZero: true, // the origin of the y axis is always zero
         ticks: {
             color: fontColor,
-            callback: formatCallback(mainDataSetFormat),
+            callback: formatTickValue({ format: mainDataSetFormat, locale }),
         },
     };
     const rightVerticalAxis = {
         beginAtZero: true, // the origin of the y axis is always zero
         ticks: {
             color: fontColor,
-            callback: formatCallback(lineDataSetsFormat),
+            callback: formatTickValue({ format: lineDataSetsFormat, locale }),
         },
     };
     const definition = chart.getDefinition();
@@ -27903,9 +27984,9 @@ function createComboChartRuntime(chart, getters) {
     config.options.plugins.chartShowValuesPlugin = {
         showValues: chart.showValues,
         background: chart.background,
-        callback: formatCallback(mainDataSetFormat),
+        callback: formatTickValue({ format: mainDataSetFormat, locale }),
     };
-    const colors = new ColorGenerator();
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
     let maxLength = 0;
     const trendDatasets = [];
     for (let [index, { label, data }] of dataSetsValues.entries()) {
@@ -27914,8 +27995,8 @@ function createComboChartRuntime(chart, getters) {
         const dataset = {
             label: design?.label ?? label,
             data,
-            borderColor: design?.backgroundColor ?? color,
-            backgroundColor: design.backgroundColor ?? color,
+            borderColor: color,
+            backgroundColor: color,
             yAxisID: design?.yAxisId ?? "y",
             type: index === 0 ? "bar" : "line",
             order: -index,
@@ -28464,7 +28545,10 @@ function getPieConfiguration(chart, labels, localeFormat) {
         const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
         return xLabel ? `${xLabel}: ${yLabelStr} (${percentage}%)` : `${yLabelStr} (${percentage}%)`;
     };
-    config.options.plugins.chartShowValuesPlugin = { showValues: chart.showValues };
+    config.options.plugins.chartShowValuesPlugin = {
+        showValues: chart.showValues,
+        callback: formatTickValue(localeFormat),
+    };
     return config;
 }
 function getPieColors(colors, dataSetsValues) {
@@ -28522,13 +28606,15 @@ function createPieChartRuntime(chart, getters) {
     const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
     const locale = getters.getLocale();
     const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale });
-    const backgroundColor = getPieColors(new ColorGenerator(), dataSetsValues);
+    const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
+    const backgroundColor = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
     for (const { label, data } of dataSetsValues) {
         const dataset = {
             label,
             data,
-            borderColor: "#FFFFFF",
+            borderColor: BACKGROUND_CHART_COLOR,
             backgroundColor,
+            hoverOffset: 30,
         };
         config.data.datasets.push(dataset);
     }
@@ -28958,14 +29044,25 @@ function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat
         labels: {
             generateLabels: () => {
                 const legendValues = [
-                    { text: _t("Positive values"), fontColor, fillStyle: positiveColor },
-                    { text: _t("Negative values"), fontColor, fillStyle: negativeColor },
+                    {
+                        text: _t("Positive values"),
+                        fontColor,
+                        fillStyle: positiveColor,
+                        strokeStyle: positiveColor,
+                    },
+                    {
+                        text: _t("Negative values"),
+                        fontColor,
+                        fillStyle: negativeColor,
+                        strokeStyle: negativeColor,
+                    },
                 ];
                 if (chart.showSubTotals || chart.firstValueAsSubtotal) {
                     legendValues.push({
                         text: _t("Subtotals"),
                         fontColor,
                         fillStyle: subTotalColor,
+                        strokeStyle: subTotalColor,
                     });
                 }
                 return legendValues;
@@ -29032,6 +29129,7 @@ function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat
     config.options.plugins.chartShowValuesPlugin = {
         showValues: chart.showValues,
         background: chart.background,
+        callback: formatTickValue(localeFormat),
     };
     return config;
 }
@@ -30222,30 +30320,8 @@ const CSS = css /* scss */ `
     .o-filter-menu-buttons {
       margin-top: 9px;
 
-      .o-filter-menu-button {
-        border: 1px solid lightgrey;
-        padding: 6px 10px;
-        cursor: pointer;
-        border-radius: 4px;
-        font-weight: 500;
-        line-height: 16px;
-      }
-
-      .o-filter-menu-button-cancel {
-        background: white;
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-
-      .o-filter-menu-button-primary {
-        background-color: #188038;
-        &:hover {
-          background-color: #1d9641;
-        }
-        color: white;
-        font-weight: bold;
-        margin-left: 10px;
+      .o-button {
+        height: 26px;
       }
     }
   }
@@ -30693,7 +30769,8 @@ css /* scss */ `
       &:not(.disabled) {
         &:hover,
         &.o-menu-item-active {
-          background-color: ${BG_HOVER_COLOR};
+          background-color: ${BUTTON_ACTIVE_BG};
+          color: ${BUTTON_ACTIVE_TEXT_COLOR};
         }
         .o-menu-item-description {
           color: grey;
@@ -30922,7 +30999,6 @@ const MENU_OFFSET_X = 320;
 const MENU_OFFSET_Y = 100;
 const PADDING = 12;
 const LINK_EDITOR_WIDTH = 340;
-const LINK_EDITOR_HEIGHT = 165;
 css /* scss */ `
   .o-link-editor {
     font-size: 13px;
@@ -30932,30 +31008,23 @@ css /* scss */ `
     display: flex;
     flex-direction: column;
     border-radius: 4px;
-    height: ${LINK_EDITOR_HEIGHT}px;
     width: ${LINK_EDITOR_WIDTH}px;
 
     .o-section {
       .o-section-title {
         font-weight: bold;
-        color: dimgrey;
         margin-bottom: 5px;
       }
     }
     .o-buttons {
       padding-left: 16px;
       padding-top: 16px;
-      padding-bottom: 16px;
       text-align: right;
     }
-    input {
+    input.o-input {
       box-sizing: border-box;
       width: 100%;
-      border-radius: 4px;
-      padding: 4px 23px 4px 10px;
-      border: none;
-      height: 24px;
-      border: 1px solid lightgrey;
+      padding: 0 23px 4px 0;
     }
     .o-link-url {
       position: relative;
@@ -34079,12 +34148,40 @@ class OTRegistry extends Registry {
 }
 const otRegistry = new OTRegistry();
 
+const CHECK_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+  <path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+</svg>
+`;
 css /* scss */ `
-  .o-checkbox {
-    display: flex;
-    justify-items: center;
+  label.o-checkbox {
     input {
-      margin-right: 5px;
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      border-radius: 0;
+      width: 14px;
+      height: 14px;
+      vertical-align: top;
+      box-sizing: border-box;
+      outline: none;
+      border: 1px solid ${GRAY_300};
+
+      &:hover {
+        border-color: ${ACTION_COLOR};
+      }
+
+      &:checked {
+        background: url("data:image/svg+xml,${encodeURIComponent(CHECK_SVG)}");
+        background-color: ${ACTION_COLOR};
+        border-color: ${ACTION_COLOR};
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 0.25rem rgba(113, 75, 103, 0.25);
+        border-color: ${ACTION_COLOR};
+      }
     }
   }
 `;
@@ -34300,7 +34397,7 @@ class SelectionInputStore extends SpreadsheetStore {
      * e.g. ["A1", "Sheet2!B3", "E12"]
      */
     get selectionInputs() {
-        const generator = new ColorGenerator(this.colors);
+        const generator = new ColorGenerator(this.ranges.length, this.colors);
         return this.ranges.map((input, index) => Object.assign({}, input, {
             color: this.hasMainFocus &&
                 this.focusedRangeIndex !== null &&
@@ -34315,8 +34412,10 @@ class SelectionInputStore extends SpreadsheetStore {
         return this.initialRanges.join() !== this.ranges.map((r) => r.xc).join();
     }
     get isConfirmable() {
-        const hasFocus = this.selectionInputs.some((i) => i.isFocused);
-        return hasFocus && this.selectionInputs.every((range) => range.isValidRange);
+        return this.selectionInputs.every((range) => range.isValidRange);
+    }
+    get hasFocus() {
+        return this.selectionInputs.some((i) => i.isFocused);
     }
     get hasMainFocus() {
         const focusedElement = this.focusStore.focusedElement;
@@ -34382,7 +34481,7 @@ class SelectionInputStore extends SpreadsheetStore {
      */
     insertNewRange(index, values) {
         const currentMaxId = Math.max(0, ...this.ranges.map((range) => Number(range.id)));
-        const colors = new ColorGenerator(this.colors);
+        const colors = new ColorGenerator(this.ranges.length, this.colors);
         for (let i = 0; i < index; i++) {
             colors.next();
         }
@@ -34468,46 +34567,19 @@ css /* scss */ `
     .o-selection-input {
       padding: 2px 0px;
 
-      input {
-        padding: 4px 6px;
-        border-radius: 4px;
-        box-sizing: border-box;
-      }
-      input:focus {
-        outline: none;
-      }
-      input.o-required,
-      input.o-focused {
-        border: 1px solid;
-      }
-      input.o-focused {
-        border-width: 2px;
-        padding: 3px 5px;
-      }
       input.o-invalid {
-        /* The background-color is similar to the bootstrap alert-danger class but, because of the commit 0358a76d,
-         * which avoids being parasitized by the dark-mode in spreadsheet, we cannot use this class.
-         * TODO: Replace with the bootstrap alert-danger class when we support dark mode
-         */
-        background-color: #ffdddd;
-        border-width: 2px;
-      }
-      button.o-btn {
-        color: #333;
-      }
-      button.o-btn-action {
-        margin: 8px 1px;
-        border-radius: 4px;
-        border: 1px solid #dadce0;
-        color: #188038;
-        font-size: 14px;
-        height: 25px;
+        background-color: ${ALERT_DANGER_BG};
       }
       .error-icon {
         right: 7px;
-        top: 7px;
+        top: 4px;
       }
     }
+    .o-button {
+      height: 28px;
+      flex-grow: 0;
+    }
+
     /** Make the character a bit bigger
     compared to its neighbor INPUT box  */
     .o-remove-selection {
@@ -34570,8 +34642,10 @@ class SelectionInput extends owl.Component {
         });
     }
     getColor(range) {
-        const color = range.color || "#000";
-        return "color: " + color + ";";
+        if (!range.color) {
+            return "";
+        }
+        return cssPropertiesToCss({ color: range.color });
     }
     triggerChange() {
         const ranges = this.store.selectionInputValues;
@@ -34654,9 +34728,11 @@ class ChartDataSeries extends owl.Component {
 }
 
 css /* scss */ `
-  .o-validation-error,
-  .o-validation-warning {
-    margin-top: 10px;
+  .o-validation {
+    border-radius: 4px;
+    border-width: 0 0 0 3px;
+    border-style: solid;
+    gap: 3px;
 
     .o-icon {
       margin-right: 5px;
@@ -34664,18 +34740,43 @@ css /* scss */ `
       width: 1.2em;
     }
   }
+
+  .o-validation-warning {
+    border-color: ${ALERT_WARNING_BORDER};
+    color: ${ALERT_WARNING_TEXT_COLOR};
+    background-color: ${ALERT_WARNING_BG};
+  }
+
+  .o-validation-error {
+    border-color: ${ALERT_DANGER_BORDER};
+    color: ${ALERT_DANGER_TEXT_COLOR};
+    background-color: ${ALERT_DANGER_BG};
+  }
+
+  .o-validation-info {
+    border-color: ${ALERT_INFO_BORDER};
+    color: ${ALERT_INFO_TEXT_COLOR};
+    background-color: ${ALERT_INFO_BG};
+  }
 `;
 class ValidationMessages extends owl.Component {
     static template = "o-spreadsheet-ValidationMessages";
     static props = {
         messages: Array,
         msgType: String,
+        singleBox: { type: Boolean, optional: true },
     };
     get divClasses() {
         if (this.props.msgType === "warning") {
-            return "o-validation-warning text-warning";
+            return "o-validation-warning";
+        }
+        if (this.props.msgType === "info") {
+            return "o-validation-info";
         }
-        return "o-validation-error text-danger";
+        return "o-validation-error";
+    }
+    get alertBoxes() {
+        return this.props.singleBox ? [this.props.messages] : this.props.messages.map((msg) => [msg]);
     }
 }
 
@@ -34692,7 +34793,6 @@ class ChartLabelRange extends owl.Component {
         title: { type: String, optional: true },
         range: String,
         isInvalid: Boolean,
-        required: { type: Boolean, optional: true },
         onSelectionChanged: Function,
         onSelectionConfirmed: Function,
         options: { type: Array, optional: true },
@@ -34700,7 +34800,6 @@ class ChartLabelRange extends owl.Component {
     static defaultProps = {
         title: _t("Categories / Labels"),
         options: [],
-        required: false,
     };
 }
 
@@ -34754,6 +34853,12 @@ class GenericChartConfigPanel extends owl.Component {
                 value: this.props.definition.aggregated ?? false,
                 onChange: this.onUpdateAggregated.bind(this),
             },
+            {
+                name: "dataSetsHaveTitle",
+                label: this.dataSetsHaveTitleLabel,
+                value: this.props.definition.dataSetsHaveTitle,
+                onChange: this.onUpdateDataSetsHaveTitle.bind(this),
+            },
         ];
     }
     onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
@@ -34838,13 +34943,6 @@ class BarConfigPanel extends GenericChartConfigPanel {
     }
 }
 
-const ANGLE_DOWN = /*xml*/ `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
-    <path d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" transform="translate(0, 9) scale(0.5,0.5)"/>
-</svg>
-`;
-const BACKGROUND_COLOR = "#fdfdfd";
-const BORDER_COLOR = "#8b8b8b";
 css /* scss */ `
   .o_side_panel_collapsible_title {
     font-size: 16px;
@@ -34852,55 +34950,29 @@ css /* scss */ `
     cursor: pointer;
     padding: 6px 0px 6px 6px !important;
 
-    .collapsor:before {
+    .collapsor-arrow {
       transform: rotate(-90deg);
-      content: url("data:image/svg+xml,${encodeURIComponent(ANGLE_DOWN)}");
-      width: 12px;
       display: inline-block;
-      margin: 0 5px 0px 2px;
-      height: 22px;
-      transform-origin: 7px 10px;
+      transform-origin: 8px 11px;
       transition: transform 0.2s ease-in-out;
+
+      .o-icon {
+        width: 16px;
+        height: 22px;
+      }
     }
-    .collapsor:not(.collapsed):before {
+    .collapsor:not(.collapsed) .collapsor-arrow {
       transform: rotate(0);
     }
 
-    .collapsor:not(.collapsed) {
-      background-color: ${BACKGROUND_COLOR};
-      border: solid ${BORDER_COLOR} 1px;
-      margin: -3px 1px -6px -5px;
-      border-radius: 5px 5px 0px 0px;
-      border-bottom: 0px;
-      transition-delay: 0s;
-    }
-
     .collapsor {
       width: 100%;
-      margin: -2px 2px -5px -4px;
-      padding: 2px 0 6px 4px;
-      background-color: transparent;
-      border: solid ${BORDER_COLOR} 0px;
       transition-delay: 0.35s;
       transition-property: all;
     }
-
-    .collapsor.collapsed {
-    }
   }
 
   .collapsible_section {
-    background-color: #fff;
-    border: solid ${BORDER_COLOR} 1px;
-    border-top: 0;
-    border-radius: 0 0 5px 5px;
-    margin: 0px 1px 0px 1px;
-
-    &.collapsing,
-    &.show {
-      background-color: ${BACKGROUND_COLOR};
-    }
-
     &.collapsing {
       transition: height 0.35s, background-color 0.35s !important;
     }
@@ -34917,6 +34989,46 @@ class SidePanelCollapsible extends owl.Component {
     currentId = (CURRENT_COLLAPSIBLE_ID++).toString();
 }
 
+const CIRCLE_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'>
+  <circle r="2" fill="#FFF"/>
+</svg>
+`;
+css /* scss */ `
+  .o-radio {
+    input {
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      width: 14px;
+      height: 14px;
+      border: 1px solid ${GRAY_300};
+      box-sizing: border-box;
+      outline: none;
+      border-radius: 8px;
+
+      &:checked {
+        background: url("data:image/svg+xml,${encodeURIComponent(CIRCLE_SVG)}");
+        background-color: ${ACTION_COLOR};
+        border-color: ${ACTION_COLOR};
+      }
+    }
+  }
+`;
+class RadioSelection extends owl.Component {
+    static template = "o-spreadsheet.RadioSelection";
+    static props = {
+        choices: Array,
+        onChange: Function,
+        selectedValue: String,
+        name: String,
+    };
+    onChange(ev) {
+        const value = ev.target.value;
+        this.props.onChange(value);
+    }
+}
+
 /**
  * Start listening to pointer events and apply the given callbacks.
  *
@@ -35464,10 +35576,10 @@ const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
 `;
 css /* scss */ `
   .o-round-color-picker-button {
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 18px;
     cursor: pointer;
-    border: 1px solid #aaa;
+    border: 1px solid ${GRAY_300};
     background-position: 1px 1px;
     background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
   }
@@ -35507,12 +35619,48 @@ class RoundColorPicker extends owl.Component {
     }
 }
 
+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 owl.Component {
+    static template = "o-spreadsheet.BadgeSelection";
+    static props = {
+        choices: Array,
+        onChange: Function,
+        selectedValue: String,
+    };
+}
+
 css /* scss */ `
   .o-chart-title-designer {
     > span {
       height: 30px;
     }
 
+    .o-divider {
+      border-right: 1px solid ${GRAY_300};
+      margin: 0px 4px;
+      height: 14px;
+    }
+
     .o-menu-item-button.active {
       background-color: #e6f4ea;
       color: #188038;
@@ -35593,7 +35741,7 @@ class ChartTitle extends owl.Component {
 
 class AxisDesignEditor extends owl.Component {
     static template = "o-spreadsheet-AxisDesignEditor";
-    static components = { Section, ChartTitle };
+    static components = { Section, ChartTitle, BadgeSelection };
     static props = { figureId: String, definition: Object, updateChart: Function, axesList: Array };
     state = owl.useState({ currentAxis: "x" });
     get axisTitleStyle() {
@@ -35604,6 +35752,9 @@ class AxisDesignEditor extends owl.Component {
             ...axisDesign.title,
         };
     }
+    get badgeAxes() {
+        return this.props.axesList.map((axis) => ({ value: axis.id, label: axis.name }));
+    }
     updateAxisTitleColor(color) {
         const axesDesign = this.props.definition.axesDesign ?? {};
         axesDesign[this.state.currentAxis] = {
@@ -35745,6 +35896,7 @@ class ChartWithAxisDesignPanel extends owl.Component {
         AxisDesignEditor,
         RoundColorPicker,
         Checkbox,
+        RadioSelection,
     };
     static props = {
         figureId: String,
@@ -35752,15 +35904,16 @@ class ChartWithAxisDesignPanel extends owl.Component {
         canUpdateChart: Function,
         updateChart: Function,
     };
+    axisChoices = CHART_AXIS_CHOICES;
     state = owl.useState({ index: 0 });
     get axesList() {
         const { useLeftAxis, useRightAxis } = getDefinedAxis(this.props.definition);
         let axes = [{ id: "x", name: _t("Horizontal axis") }];
         if (useLeftAxis) {
-            axes.push({ id: "y", name: _t("Vertical (left) axis") });
+            axes.push({ id: "y", name: useRightAxis ? _t("Left axis") : _t("Vertical axis") });
         }
         if (useRightAxis) {
-            axes.push({ id: "y1", name: _t("Vertical (right) axis") });
+            axes.push({ id: "y1", name: useLeftAxis ? _t("Right axis") : _t("Vertical axis") });
         }
         return axes;
     }
@@ -35798,10 +35951,9 @@ class ChartWithAxisDesignPanel extends owl.Component {
             return "";
         }
         const color = dataSets[this.state.index].backgroundColor;
-        return color ? toHex(color) : getNthColor(this.state.index);
+        return color ? toHex(color) : getNthColor(this.state.index, getColorsPalette(dataSets.length));
     }
-    updateDataSeriesAxis(ev) {
-        const axis = ev.target.value;
+    updateDataSeriesAxis(axis) {
         const dataSets = [...this.props.definition.dataSets];
         if (!dataSets?.[this.state.index]) {
             return;
@@ -35967,10 +36119,13 @@ css /* scss */ `
       font-size: 12px;
       line-height: 18px;
       width: 100%;
+      font-size: 12px;
     }
+
     td {
       box-sizing: border-box;
       height: 30px;
+      padding: 6px 0;
     }
     th.o-gauge-color-set-colorPicker {
       width: 8%;
@@ -36274,6 +36429,7 @@ class WaterfallChartDesignPanel extends owl.Component {
         Section,
         RoundColorPicker,
         AxisDesignEditor,
+        RadioSelection,
     };
     static props = {
         figureId: String,
@@ -36281,6 +36437,7 @@ class WaterfallChartDesignPanel extends owl.Component {
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
     };
+    axisChoices = CHART_AXIS_CHOICES;
     onUpdateShowSubTotals(showSubTotals) {
         this.props.updateChart(this.props.figureId, { showSubTotals });
     }
@@ -36316,9 +36473,9 @@ class WaterfallChartDesignPanel extends owl.Component {
             legendPosition: ev.target.value,
         });
     }
-    updateVerticalAxisPosition(ev) {
+    updateVerticalAxisPosition(value) {
         this.props.updateChart(this.props.figureId, {
-            verticalAxisPosition: ev.target.value,
+            verticalAxisPosition: value,
         });
     }
     get showValuesLabel() {
@@ -36369,9 +36526,10 @@ chartSidePanelComponentRegistry
 });
 
 css /* scss */ `
-  .o-section .o-type-selector {
+  .o-section .o-input.o-type-selector {
     height: 30px;
-    padding-left: 30px;
+    padding-left: 35px;
+    padding-top: 5px;
   }
   .o-type-selector-preview {
     left: 5px;
@@ -36391,8 +36549,8 @@ css /* scss */ `
       margin: 1px 2px;
       &.selected,
       &:hover {
-        background: #f5f5f5;
-        border: 1px solid #ccc;
+        border: 1px solid ${ACTION_COLOR};
+        background: ${BADGE_SELECTED_COLOR};
         padding: 2px 5px;
       }
       .o-chart-preview {
@@ -36508,11 +36666,19 @@ css /* scss */ `
         padding: 8px 0px;
         text-align: center;
         cursor: pointer;
-        border-right: 1px solid darkgray;
+        border-right: 1px solid ${GRAY_300};
+
         &.inactive {
-          background-color: ${BACKGROUND_HEADER_COLOR};
-          border-bottom: 1px solid darkgray;
+          color: ${TEXT_BODY};
+          background-color: ${GRAY_100};
+          border-bottom: 1px solid ${GRAY_300};
+        }
+
+        &:not(.inactive) {
+          color: ${TEXT_HEADING};
+          border-bottom: 1px solid #fff;
         }
+
         .fa {
           margin-right: 4px;
         }
@@ -36967,7 +37133,7 @@ class AbstractComposerStore extends SpreadsheetStore {
             if (pivotId && pivotCell.type !== "EMPTY" && !cell?.isFormula) {
                 const formulaPivotId = this.getters.getPivotFormulaId(pivotId);
                 const formula = createPivotFormula(formulaPivotId, pivotCell);
-                return formula.slice(1); // strip leading =
+                return localizeFormula(formula, this.getters.getLocale()).slice(1); // strip leading =
             }
         }
         const range = this.getters.getRangeFromZone(sheetId, zone);
@@ -37190,20 +37356,19 @@ class StandaloneComposerStore extends AbstractComposerStore {
 css /* scss */ `
   .o-spreadsheet {
     .o-standalone-composer {
-      min-height: 28px;
+      min-height: 24px;
       overflow: auto;
       box-sizing: border-box;
 
-      border-radius: 4px;
-      border: 1px solid;
-      border-color: #666666;
+      border-bottom: 1px solid;
+      border-color: ${GRAY_300};
 
       &.active {
         border-color: ${SELECTION_BORDER_COLOR};
       }
 
       &.o-invalid {
-        border: 2px solid red;
+        border-bottom: 2px solid red;
       }
 
       /* As the standalone composer is potentially very small (eg. in a side panel), we remove the scrollbar display */
@@ -37255,8 +37420,8 @@ class StandaloneComposer extends owl.Component {
     }
     get composerStyle() {
         return this.props.invalid
-            ? cssPropertiesToCss({ padding: "3px 0px 3px 4px" })
-            : cssPropertiesToCss({ padding: "4px 0px 4px 5px" });
+            ? cssPropertiesToCss({ padding: "1px 0px 0px 0px" })
+            : cssPropertiesToCss({ padding: "1px 0px" });
     }
     get containerClass() {
         const classes = [
@@ -37281,13 +37446,13 @@ css /* scss */ `
   }
   .o-cf-icon-line {
     display: flex;
-    padding: 3px 6px;
+    padding: 0 6px;
   }
   .o-icon-picker-item {
-    margin: 0px 2px;
+    cursor: pointer;
     &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-      outline: 1px solid gray;
+      background-color: ${BADGE_SELECTED_COLOR};
+      outline: ${ACTION_COLOR} solid 1px;
     }
   }
 `;
@@ -37645,24 +37810,29 @@ css /* scss */ `
       cursor: pointer;
     }
 
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid ${GRAY_300};
     height: 60px;
     padding: 10px;
     position: relative;
     cursor: pointer;
     &:hover,
     &.o-cf-dragging {
-      background-color: #ebebeb;
+      background-color: ${GRAY_200};
     }
 
     &:not(:hover) .o-cf-delete-button {
       display: none;
     }
     .o-cf-preview-icon {
-      border: 1px solid lightgrey;
+      border: 1px solid ${GRAY_300};
+      background-color: #fff;
       position: absolute;
       height: 50px;
       width: 50px;
+      .o-icon {
+        width: ${CF_ICON_EDGE_LENGTH}px;
+        height: ${CF_ICON_EDGE_LENGTH}px;
+      }
     }
     .o-cf-preview-description {
       left: 65px;
@@ -37674,7 +37844,6 @@ css /* scss */ `
       .o-cf-preview-description-rule {
         margin-bottom: 4px;
         font-weight: 600;
-        color: #303030;
         max-height: 2.8em;
         line-height: 1.4em;
       }
@@ -37698,6 +37867,13 @@ css /* scss */ `
         height: 30px;
       }
     }
+
+    .o-icon.arrow-down {
+      color: #e06666;
+    }
+    .o-icon.arrow-up {
+      color: #6aa84f;
+    }
   }
 `;
 class ConditionalFormatPreview extends owl.Component {
@@ -37819,162 +37995,98 @@ class ConditionalFormatPreviewList extends owl.Component {
 }
 
 css /* scss */ `
-  label {
-    vertical-align: middle;
-  }
-  .o_cf_radio_item {
-    margin-right: 30px;
-  }
-  .radio input:checked {
-    color: #e9ecef;
-    border-color: #00a09d;
-    background-color: #00a09d;
-  }
-  .o-cf-editor {
-    border-bottom: solid;
-    border-color: lightgrey;
-  }
-  .o-cf {
-    .o-cf-type-selector {
-      *,
-      ::after,
-      ::before {
-        box-sizing: border-box;
-      }
-      margin-top: 10px;
-      display: flex;
-      .form-check {
-        padding-left: 1rem;
-      }
-    }
-    .o-section-subtitle:first-child {
-      margin-top: 0px;
-    }
-    .o-cf-ruleEditor {
-      font-size: 12px;
-      line-height: 1.5;
-      .o-selection-cf {
-        margin-bottom: 9px;
-      }
-      .o-cell-content {
-        font-size: 12px;
-        font-weight: 500;
-        padding: 0 12px;
-        margin: 0;
-        line-height: 35px;
-      }
-    }
-    .o-cf-error {
-      color: red;
-      margin-top: 10px;
-    }
-    .o-input {
-      border-width: 1px;
-    }
-  }
-  .o-cf-cell-is-rule {
-    .o-cf-preview-line {
-      border: 1px solid darkgrey;
+  .o-cf-ruleEditor {
+    .o-cf-preview-display {
+      border: 1px solid ${GRAY_300};
       padding: 10px;
     }
-    .o-cell-is-operator {
-      margin-bottom: 5px;
-    }
-    .o-cell-is-value {
-      margin-bottom: 5px;
-    }
-    .o-color-picker-widget .o-color-picker-button {
-      pointer-events: all;
-      cursor: default;
-    }
-  }
-  .o-cf-color-scale-editor {
-    .o-threshold {
-      select {
-        max-width: 200px;
-      }
-      .o-threshold-value {
-        margin-left: 6px;
-        flex-grow: 1;
-        flex-basis: 60%;
-        min-width: 0px; // input overflows in Firefox otherwise
-      }
-      .o-threshold-value input:disabled {
-        background-color: #edebed;
+
+    .o-cf-cell-is-rule {
+      .o-divider {
+        border-right: 1px solid ${GRAY_300};
+        margin: 4px 6px;
       }
     }
-    .o-cf-preview-gradient {
-      border: 1px solid darkgrey;
-      padding: 10px;
-      border-radius: 4px;
-    }
-  }
-  .o-cf-iconset-rule {
-    font-size: 12;
-    .o-cf-iconsets {
-      gap: 11px;
-      .o-cf-iconset {
-        border: 1px solid #dadce0;
-        border-radius: 4px;
-        display: inline-flex;
-        padding: 5px 8px;
-        width: 95px;
-        box-sizing: border-box;
-        cursor: pointer;
-        justify-content: space-between;
-        .o-cf-icon {
-          display: inline;
-          margin-left: 3px;
-          margin-right: 3px;
+    .o-cf-color-scale-editor {
+      .o-threshold {
+        .o-select-with-input {
+          max-width: 150px;
         }
-        svg {
-          vertical-align: baseline;
+        .o-threshold-value {
+          flex-grow: 1;
+          flex-basis: 60%;
+          min-width: 0px; // input overflows in Firefox otherwise
+        }
+        .o-threshold-value input:disabled {
+          background-color: #edebed;
         }
-      }
-      .o-cf-iconset:hover {
-        background-color: rgba(0, 0, 0, 0.08);
       }
     }
-    .o-inflection {
-      .o-cf-icon-button {
-        display: inline-block;
-        border: 1px solid #dadce0;
+    .o-cf-iconset-rule {
+      .o-cf-clickable-icon {
+        border: 1px solid ${GRAY_200};
         border-radius: 4px;
         cursor: pointer;
-        padding: 1px 2px;
-      }
-      .o-cf-icon-button:hover {
-        background-color: rgba(0, 0, 0, 0.08);
-      }
-      table {
-        margin-top: 6px;
-        display: table;
-        text-align: left;
-        font-size: 12px;
-        line-height: 18px;
-        width: 100%;
-      }
-      th.o-cf-iconset-icons {
-        width: 25px;
+        &:hover {
+          border-color: ${ACTION_COLOR};
+          background-color: ${BADGE_SELECTED_COLOR};
+        }
+        .o-icon {
+          width: ${CF_ICON_EDGE_LENGTH}px;
+          height: ${CF_ICON_EDGE_LENGTH}px;
+        }
       }
-      th.o-cf-iconset-text {
-        width: 82px;
+      .o-cf-iconsets {
+        gap: 11px;
+        .o-cf-iconset {
+          padding: 7px 8px;
+          width: 95px;
+          .o-icon {
+            margin: 0 3px;
+          }
+          svg {
+            vertical-align: baseline;
+          }
+        }
       }
-      th.o-cf-iconset-operator {
-        width: 40px;
+      .o-inflection {
+        .o-cf-icon-button {
+          padding: 4px 10px;
+        }
+        table {
+          font-size: 13px;
+          td {
+            padding: 6px 0;
+          }
+
+          th.o-cf-iconset-icons {
+            width: 25px;
+          }
+          th.o-cf-iconset-text {
+            width: 82px;
+          }
+          th.o-cf-iconset-operator {
+            width: 20px;
+          }
+          .o-cf-iconset-type {
+            min-width: 80px;
+          }
+        }
       }
-      .o-cf-iconset-type {
-        min-width: 80px;
+
+      .o-cf-iconset-reverse {
+        font-size: 14px;
+        .o-icon {
+          font-size: 17px;
+        }
       }
     }
-    .o-cf-iconset-reverse {
-      margin-bottom: 6px;
-      margin-top: 6px;
-      .o-cf-label {
-        display: inline-block;
-        vertical-align: bottom;
-        margin-bottom: 2px;
-      }
+
+    .o-icon.arrow-down {
+      color: #e06666;
+    }
+    .o-icon.arrow-up {
+      color: #6aa84f;
     }
   }
 `;
@@ -37992,6 +38104,8 @@ class ConditionalFormattingEditor extends owl.Component {
         Section,
         RoundColorPicker,
         StandaloneComposer: StandaloneComposer,
+        BadgeSelection,
+        ValidationMessages,
     };
     icons = ICONS;
     cellIsOperators = CellIsOperators;
@@ -38030,8 +38144,15 @@ class ConditionalFormattingEditor extends owl.Component {
     get isRangeValid() {
         return this.state.errors.includes("EmptyRange" /* CommandResult.EmptyRange */);
     }
-    errorMessage(error) {
-        return CfTerms.Errors[error] || CfTerms.Errors.Unexpected;
+    get errorMessages() {
+        return this.state.errors.map((error) => CfTerms.Errors[error] || CfTerms.Errors.Unexpected);
+    }
+    get cfTypesValues() {
+        return [
+            { value: "CellIsRule", label: _t("Single color") },
+            { value: "ColorScaleRule", label: _t("Color scale") },
+            { value: "IconSetRule", label: _t("Icon set") },
+        ];
     }
     saveConditionalFormat() {
         if (this.state.currentCF) {
@@ -39468,13 +39589,6 @@ function getDataValidationCriterionMenuItems(callback) {
     return createActions(actionSpecs);
 }
 
-css /* scss */ `
-  .o-sidePanel .o-sidePanelBody .o-dv-form {
-    .o-section {
-      padding: 16px 16px 0 16px;
-    }
-  }
-`;
 class DataValidationEditor extends owl.Component {
     static template = "o-spreadsheet-DataValidationEditor";
     static components = { SelectionInput, SelectMenu, Section };
@@ -40040,19 +40154,25 @@ css /* scss */ `
       .o-input-count {
         width: fit-content;
         padding: 4px 0 4px 4px;
+        white-space: nowrap;
       }
     }
 
-    .o-matches-count div {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .o-result-buttons {
+      .o-button {
+        height: 19px;
+        width: 19px;
+        .o-icon {
+          height: 14px;
+          width: 14px;
+        }
+      }
     }
   }
 `;
 class FindAndReplacePanel extends owl.Component {
     static template = "o-spreadsheet-FindAndReplacePanel";
-    static components = { SelectionInput, Section, Checkbox };
+    static components = { SelectionInput, Section, Checkbox, ValidationMessages };
     static props = {
         onCloseSidePanel: Function,
     };
@@ -40066,10 +40186,10 @@ class FindAndReplacePanel extends owl.Component {
         return this.store.searchOptions;
     }
     get allSheetsMatchesCount() {
-        return _t("%s in all sheets", this.store.allSheetMatchesCount);
+        return _t("%s matches in all sheets", this.store.allSheetMatchesCount);
     }
     get currentSheetMatchesCount() {
-        return _t("%(matches)s in sheet %(sheetName)s", {
+        return _t("%(matches)s matches in %(sheetName)s", {
             matches: this.store.activeSheetMatchesCount,
             sheetName: this.env.model.getters.getSheetName(this.env.model.getters.getActiveSheetId()),
         });
@@ -40080,12 +40200,22 @@ class FindAndReplacePanel extends owl.Component {
             return "";
         }
         const { sheetId, zone } = range;
-        return _t("%(matches)s in range %(range)s of sheet %(sheetName)s", {
+        return _t("%(matches)s matches in range %(range)s of %(sheetName)s", {
             matches: this.store.specificRangeMatchesCount,
             range: zoneToXc(zone),
             sheetName: this.env.model.getters.getSheetName(sheetId),
         });
     }
+    get searchInfo() {
+        if (!this.store.toSearch) {
+            return [];
+        }
+        return [
+            this.specificRangeMatchesCount,
+            this.currentSheetMatchesCount,
+            this.allSheetsMatchesCount,
+        ];
+    }
     setup() {
         this.store = useLocalStore(FindAndReplaceStore);
         this.state = owl.useState({ dataRange: "" });
@@ -40141,6 +40271,7 @@ css /* scss */ `
     .format-preview {
       height: 48px;
       background-color: white;
+      cursor: pointer;
 
       &:hover {
         background-color: rgba(0, 0, 0, 0.08);
@@ -40179,7 +40310,6 @@ class MoreFormatsPanel extends owl.Component {
 css /* scss */ `
   .pivot-defer-update {
     min-height: 35px;
-    background-color: #f8f9fa;
   }
 `;
 class PivotDeferUpdate extends owl.Component {
@@ -40221,6 +40351,13 @@ css /* scss */ `
   .pivot-dimension-search {
     background-color: white;
   }
+  .add-dimension.o-button {
+    padding: 2px 7px;
+    font-weight: 400;
+    font-size: 12px;
+    flex-grow: 0;
+    height: inherit;
+  }
 `;
 class AddDimensionButton extends owl.Component {
     static template = "o-spreadsheet-AddDimensionButton";
@@ -40322,10 +40459,11 @@ css /* scss */ `
       border-color: transparent;
       outline: none;
       text-overflow: ellipsis;
+      color: ${TEXT_BODY};
     }
     .os-input:hover,
     .os-input:focus {
-      border-color: black;
+      border-color: ${GRAY_300};
     }
   }
 `;
@@ -40369,6 +40507,12 @@ class TextInput extends owl.Component {
 css /* scss */ `
   .pivot-dimension {
     background-color: white;
+    border: 1px solid ${GRAY_300};
+    border-radius: 4px;
+
+    select.o-input {
+      height: inherit;
+    }
 
     select > option {
       background-color: white;
@@ -42026,7 +42170,7 @@ class PivotSidePanel extends owl.Component {
 
 css /* scss */ `
   .o-checkbox-selection {
-    height: 150px;
+    max-height: 300px;
   }
 `;
 class RemoveDuplicatesPanel extends owl.Component {
@@ -42116,12 +42260,13 @@ class RemoveDuplicatesPanel extends owl.Component {
 
 css /* scss */ `
   .o-locale-preview {
-    color: dimgrey;
+    border: 1px solid ${GRAY_300};
+    background-color: ${GRAY_100};
   }
 `;
 class SettingsPanel extends owl.Component {
     static template = "o-spreadsheet-SettingsPanel";
-    static components = { Section };
+    static components = { Section, ValidationMessages };
     static props = { onCloseSidePanel: Function };
     loadedLocales = [];
     setup() {
@@ -42597,9 +42742,10 @@ function drawTexts(ctx, tableStyle, colWidth, rowHeight) {
 css /* scss */ `
   .o-table-style-list-item {
     border: 1px solid transparent;
+    border-radius: 4px;
     &.selected {
-      border: 1px solid #007eff;
-      background: #f5f5f5;
+      border: 1px solid ${ACTION_COLOR};
+      background: ${BADGE_SELECTED_COLOR};
     }
 
     &:hover {
@@ -42684,13 +42830,29 @@ class TableStylePreview extends owl.Component {
 css /* scss */ `
   .o-table-style-popover {
     /** 7 tables preview + padding by line */
-    width: calc((66px + 4px * 2) * 7);
+    width: calc((66px + 4px * 2) * 7 + 1.5rem * 2);
     background: #fff;
     font-size: 14px;
     user-select: none;
 
-    .form-check-input {
-      font-size: 12px;
+    .o-notebook {
+      border-bottom: 1px solid ${GRAY_300};
+
+      .o-notebook-tab {
+        padding: 5px 15px;
+        border: 1px solid ${GRAY_300};
+        margin-bottom: -1px;
+        margin-left: -1px;
+        color: ${TEXT_BODY};
+        cursor: pointer;
+        transition: color 0.2s, border-color 0.2s;
+
+        &.selected {
+          border-bottom-color: #fff;
+          border-top-color: ${PRIMARY_BUTTON_BG};
+          color: ${TEXT_HEADING};
+        }
+      }
     }
 
     .o-table-style-list-item {
@@ -42754,11 +42916,11 @@ class TableStylesPopover extends owl.Component {
 css /* scss */ `
   .o-table-style-picker {
     box-sizing: border-box;
-    border: 1px solid #ddd;
+    border: 1px solid ${GRAY_300};
     border-radius: 3px;
 
     .o-table-style-picker-arrow {
-      border-left: 1px solid #ddd;
+      border-left: 1px solid ${GRAY_300};
 
       &:hover {
         background: #f5f5f5;
@@ -42767,12 +42929,12 @@ css /* scss */ `
     }
 
     .o-table-style-list-item {
-      padding: 3px 2px;
-      margin: 2px 1px;
+      padding: 5px 6px;
+      margin: 5px 2px;
 
       .o-table-style-picker-preview {
-        width: 61px;
-        height: 46px;
+        width: 51px;
+        height: 36px;
       }
     }
   }
@@ -42822,22 +42984,9 @@ class TableStylePicker extends owl.Component {
 
 css /* scss */ `
   .o-table-panel {
-    .o-table-n-of-headers {
+    input.o-table-n-of-headers {
       width: 14px;
-      color: #666666;
-      line-height: 1;
       text-align: center;
-      border: none;
-      border-bottom: 1px solid #ccc;
-      padding: 0px 2px;
-      &:focus {
-        outline: none;
-      }
-    }
-
-    .o-sidePanelButtons .o-table-delete:hover {
-      color: #ffffff;
-      background: #d94b4b;
     }
 
     .o-info-icon {
@@ -43009,19 +43158,14 @@ class TablePanel extends owl.Component {
 css /* scss */ `
   .o-table-style-editor-panel {
     .o-table-style-list-item {
-      margin: 1px 3px;
-      padding: 3px 6px;
+      margin: 2px 7px;
+      padding: 6px 9px;
 
       .o-table-style-edit-template-preview {
-        width: 81px;
-        height: 61px;
+        width: 71px;
+        height: 51px;
       }
     }
-
-    .o-sidePanelButtons .o-delete:hover:enabled {
-      color: #ffffff;
-      background: #d94b4b;
-    }
   }
 `;
 class TableStyleEditorPanel extends owl.Component {
@@ -44971,7 +45115,7 @@ class FilterIconsOverlay extends owl.Component {
 
 css /* scss */ `
   .o-grid-add-rows {
-    input {
+    input.o-input {
       box-sizing: border-box;
       width: 60px;
       height: 30px;
@@ -48426,6 +48570,9 @@ class CellPlugin extends CorePlugin {
                     format: "",
                 });
                 break;
+            case "CLEAR_CELLS":
+                this.clearCells(cmd.sheetId, cmd.target);
+                break;
             case "DELETE_CONTENT":
                 this.clearZones(cmd.sheetId, cmd.target);
                 break;
@@ -48484,6 +48631,25 @@ class CellPlugin extends CorePlugin {
             }
         }
     }
+    /**
+     * Clear the styles, the format and the content of zones
+     */
+    clearCells(sheetId, zones) {
+        for (const zone of zones) {
+            for (let col = zone.left; col <= zone.right; col++) {
+                for (let row = zone.top; row <= zone.bottom; row++) {
+                    this.dispatch("UPDATE_CELL", {
+                        sheetId: sheetId,
+                        col,
+                        row,
+                        content: "",
+                        style: null,
+                        format: "",
+                    });
+                }
+            }
+        }
+    }
     /**
      * Copy the style of the reference column/row to the new columns/rows.
      */
@@ -51935,19 +52101,23 @@ class SheetPlugin extends CorePlugin {
         }
     }
     moveCellOnColumnsDeletion(sheet, deletedColumn) {
+        this.dispatch("CLEAR_CELLS", {
+            sheetId: sheet.id,
+            target: [
+                {
+                    left: deletedColumn,
+                    top: 0,
+                    right: deletedColumn,
+                    bottom: sheet.rows.length - 1,
+                },
+            ],
+        });
         for (let rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
             const row = sheet.rows[rowIndex];
             for (let i in row.cells) {
                 const colIndex = Number(i);
                 const cellId = row.cells[i];
                 if (cellId) {
-                    if (colIndex === deletedColumn) {
-                        this.dispatch("CLEAR_CELL", {
-                            sheetId: sheet.id,
-                            col: colIndex,
-                            row: rowIndex,
-                        });
-                    }
                     if (colIndex > deletedColumn) {
                         this.setNewPosition(cellId, sheet.id, colIndex - 1, rowIndex);
                     }
@@ -51993,22 +52163,20 @@ class SheetPlugin extends CorePlugin {
      *
      */
     moveCellOnRowsDeletion(sheet, deleteFromRow, deleteToRow) {
+        this.dispatch("CLEAR_CELLS", {
+            sheetId: sheet.id,
+            target: [
+                {
+                    left: 0,
+                    top: deleteFromRow,
+                    right: this.getters.getNumberCols(sheet.id),
+                    bottom: deleteToRow,
+                },
+            ],
+        });
         const numberRows = deleteToRow - deleteFromRow + 1;
         for (let rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
             const row = sheet.rows[rowIndex];
-            if (rowIndex >= deleteFromRow && rowIndex <= deleteToRow) {
-                for (let i in row.cells) {
-                    const colIndex = Number(i);
-                    const cellId = row.cells[i];
-                    if (cellId) {
-                        this.dispatch("CLEAR_CELL", {
-                            sheetId: sheet.id,
-                            col: colIndex,
-                            row: rowIndex,
-                        });
-                    }
-                }
-            }
             if (rowIndex > deleteToRow) {
                 for (let i in row.cells) {
                     const colIndex = Number(i);
@@ -54711,18 +54879,23 @@ class Evaluator {
         this.evaluate(this.getAllCells());
         console.info("evaluate all cells", performance.now() - start, "ms");
     }
-    evaluateFormula(sheetId, formulaString) {
+    evaluateFormulaResult(sheetId, formulaString) {
         const compiledFormula = compile(formulaString);
         const ranges = compiledFormula.dependencies.map((xc) => this.getters.getRangeFromSheetXC(sheetId, xc));
         this.updateCompilationParameters();
-        const result = updateEvalContextAndExecute({ ...compiledFormula, dependencies: ranges }, this.compilationParams, sheetId, undefined);
-        if (isMatrix(result)) {
-            return matrixMap(result, (cell) => cell.value);
+        try {
+            const result = updateEvalContextAndExecute({ ...compiledFormula, dependencies: ranges }, this.compilationParams, sheetId, undefined);
+            if (isMatrix(result)) {
+                return result;
+            }
+            if (result.value === null) {
+                return { value: 0, format: result.format };
+            }
+            return result;
         }
-        if (result.value === null) {
-            return 0;
+        catch (error) {
+            return handleError(error, "");
         }
-        return result.value;
     }
     getAllCells() {
         const positions = this.createEmptyPositionSet();
@@ -55076,6 +55249,7 @@ function updateEvalContextAndExecute(compiledFormula, compilationParams, sheetId
 class EvaluationPlugin extends UIPlugin {
     static getters = [
         "evaluateFormula",
+        "evaluateFormulaResult",
         "getCorrespondingFormulaCell",
         "getRangeFormattedValues",
         "getRangeValues",
@@ -55135,12 +55309,14 @@ class EvaluationPlugin extends UIPlugin {
     // Getters
     // ---------------------------------------------------------------------------
     evaluateFormula(sheetId, formulaString) {
-        try {
-            return this.evaluator.evaluateFormula(sheetId, formulaString);
-        }
-        catch (error) {
-            return error.value || CellErrorType.GenericError;
+        const result = this.evaluateFormulaResult(sheetId, formulaString);
+        if (isMatrix(result)) {
+            return matrixMap(result, (cell) => cell.value);
         }
+        return result.value;
+    }
+    evaluateFormulaResult(sheetId, formulaString) {
+        return this.evaluator.evaluateFormulaResult(sheetId, formulaString);
     }
     /**
      * Return the value of each cell in the range as they are displayed in the grid.
@@ -56396,6 +56572,10 @@ class PivotUIPlugin extends UIPlugin {
                 this.setupPivot(cmd.pivotId, { recreate: true });
                 break;
             }
+            case "REMOVE_PIVOT": {
+                delete this.pivots[cmd.pivotId];
+                break;
+            }
             case "DELETE_SHEET":
             case "UPDATE_CELL": {
                 this.unusedPivots = undefined;
@@ -56508,28 +56688,33 @@ class PivotUIPlugin extends UIPlugin {
             const pivotRow = position.row - mainPosition.row;
             return pivotCells[pivotCol][pivotRow];
         }
-        if (functionName === "PIVOT.HEADER" && args.at(-2) === "measure") {
-            const domain = pivot.parseArgsToPivotDomain(args.slice(1, -2).map((value) => ({ value })));
+        try {
+            if (functionName === "PIVOT.HEADER" && args.at(-2) === "measure") {
+                const domain = pivot.parseArgsToPivotDomain(args.slice(1, -2).map((value) => ({ value })));
+                return {
+                    type: "MEASURE_HEADER",
+                    domain,
+                    measure: args.at(-1)?.toString() || "",
+                };
+            }
+            else if (functionName === "PIVOT.HEADER") {
+                const domain = pivot.parseArgsToPivotDomain(args.slice(1).map((value) => ({ value })));
+                return {
+                    type: "HEADER",
+                    domain,
+                };
+            }
+            const [measure, ...domainArgs] = args.slice(1);
+            const domain = pivot.parseArgsToPivotDomain(domainArgs.map((value) => ({ value })));
             return {
-                type: "MEASURE_HEADER",
+                type: "VALUE",
                 domain,
-                measure: args.at(-1)?.toString() || "",
+                measure: measure?.toString() || "",
             };
         }
-        else if (functionName === "PIVOT.HEADER") {
-            const domain = pivot.parseArgsToPivotDomain(args.slice(1).map((value) => ({ value })));
-            return {
-                type: "HEADER",
-                domain,
-            };
+        catch (_) {
+            return EMPTY_PIVOT_CELL;
         }
-        const [measure, ...domainArgs] = args.slice(1);
-        const domain = pivot.parseArgsToPivotDomain(domainArgs.map((value) => ({ value })));
-        return {
-            type: "VALUE",
-            domain,
-            measure: measure?.toString() || "",
-        };
     }
     getPivot(pivotId) {
         return this.pivots[pivotId];
@@ -57825,7 +58010,7 @@ class Session extends EventBus {
      */
     leave(data) {
         if (Object.keys(this.clients).length === 1 && this.processedRevisions.size) {
-            this.snapshot(data);
+            this.snapshot(data());
         }
         delete this.clients[this.clientId];
         this.transportService.leave(this.clientId);
@@ -58247,9 +58432,7 @@ class DataCleanupPlugin extends UIPlugin {
         if (!data) {
             return;
         }
-        for (const { col, row } of positions(zone)) {
-            this.dispatch("CLEAR_CELL", { col, row, sheetId });
-        }
+        this.dispatch("CLEAR_CELLS", { target: [zone], sheetId });
         const zonePasted = {
             left: zone.left,
             top: zone.top,
@@ -58397,6 +58580,7 @@ class FormatPlugin extends UIPlugin {
      * evaluated and updated with the number type.
      */
     setDecimal(sheetId, zones, step) {
+        const positionsByFormat = {};
         // Find the each cell with a number value and get the format
         for (const zone of recomputeZones(zones)) {
             for (const position of positions(zone)) {
@@ -58406,15 +58590,20 @@ class FormatPlugin extends UIPlugin {
                     // of the format
                     this.getters.getLocale();
                     const newFormat = changeDecimalPlaces(numberFormat, step);
-                    // Apply the new format on the whole zone
-                    this.dispatch("SET_FORMATTING", {
-                        sheetId,
-                        target: [positionToZone(position)],
-                        format: newFormat,
-                    });
+                    positionsByFormat[newFormat] = positionsByFormat[newFormat] || [];
+                    positionsByFormat[newFormat].push(position);
                 }
             }
         }
+        // consolidate all positions with the same format in bigger zones
+        for (const newFormat in positionsByFormat) {
+            const zones = recomputeZones(positionsByFormat[newFormat].map((position) => positionToZone(position)));
+            this.dispatch("SET_FORMATTING", {
+                sheetId,
+                format: newFormat,
+                target: zones,
+            });
+        }
     }
     /**
      * Take a range of cells and return the format of the first cell containing a
@@ -58948,6 +59137,9 @@ class SheetUIPlugin extends UIPlugin {
         if (showFormula && cell?.isFormula) {
             return localizeFormula(cell.content, this.getters.getLocale());
         }
+        else if (showFormula && !cell?.content) {
+            return "";
+        }
         else {
             return this.getters.getEvaluatedCell(position).formattedValue;
         }
@@ -59446,6 +59638,7 @@ function repeatGroupHeadersCommand(getters, cmd) {
 const repeatCommandTransformRegistry = new Registry();
 repeatCommandTransformRegistry.add("UPDATE_CELL", genericRepeat);
 repeatCommandTransformRegistry.add("CLEAR_CELL", genericRepeat);
+repeatCommandTransformRegistry.add("CLEAR_CELLS", genericRepeat);
 repeatCommandTransformRegistry.add("DELETE_CONTENT", genericRepeat);
 repeatCommandTransformRegistry.add("ADD_MERGE", genericRepeat);
 repeatCommandTransformRegistry.add("REMOVE_MERGE", genericRepeat);
@@ -60077,9 +60270,10 @@ class ClipboardPlugin extends UIPlugin {
             case "DELETE_CELL": {
                 const { cut, paste } = this.getDeleteCellsTargets(cmd.zone, cmd.shiftDimension);
                 if (!isZoneValid(cut[0])) {
-                    for (const { col, row } of positions(cmd.zone)) {
-                        this.dispatch("CLEAR_CELL", { col, row, sheetId: this.getters.getActiveSheetId() });
-                    }
+                    this.dispatch("CLEAR_CELLS", {
+                        target: [cmd.zone],
+                        sheetId: this.getters.getActiveSheetId(),
+                    });
                     break;
                 }
                 const copiedData = this.copy(cut);
@@ -62985,7 +63179,6 @@ class BottomBarStatistic extends owl.Component {
 const MENU_MAX_HEIGHT = 250;
 css /* scss */ `
   .o-spreadsheet-bottom-bar {
-    color: ${TEXT_HEADER_COLOR};
     background-color: ${BACKGROUND_GRAY_COLOR};
     padding-left: ${HEADER_WIDTH}px;
     font-size: 15px;
@@ -63643,8 +63836,20 @@ css /* scss */ `
     flex-direction: column;
     overflow-x: hidden;
     background-color: white;
-    border: 1px solid darkgray;
+    border: solid ${GRAY_300};
+    border-width: 1px 0 0 1px;
     user-select: none;
+    color: ${TEXT_BODY};
+
+    .o-text-muted {
+      color: ${TEXT_BODY_MUTED};
+    }
+
+    .o-heading-3 {
+      line-height: 20px;
+      font-size: 16px;
+      font-weight: 600;
+    }
 
     .btn-link {
       text-decoration: none;
@@ -63656,20 +63861,12 @@ css /* scss */ `
     }
 
     .o-sidePanelHeader {
-      padding: 6px;
-      height: 30px;
-      background-color: ${BACKGROUND_HEADER_COLOR};
+      padding: 8px 16px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border-bottom: 1px solid darkgray;
-      border-top: 1px solid darkgray;
-      font-weight: bold;
-      .o-sidePanelTitle {
-        font-weight: bold;
-        padding: 5px 10px;
-        color: dimgrey;
-      }
+      border-bottom: 1px solid ${GRAY_300};
+
       .o-sidePanelClose {
         padding: 5px 10px;
         cursor: pointer;
@@ -63691,15 +63888,13 @@ css /* scss */ `
         padding: 16px;
 
         .o-section-title {
-          font-weight: bold;
-          color: dimgrey;
+          font-weight: 500;
           margin-bottom: 5px;
         }
 
         .o-section-subtitle {
-          color: dimgrey;
           font-weight: 500;
-          font-size: 12px;
+          font-size: 13px;
           line-height: 14px;
           margin: 8px 0 4px 0;
         }
@@ -63718,13 +63913,13 @@ css /* scss */ `
       }
 
       .o-sidePanel-composer {
-        color: #666666; /* Match o-input color */
+        color: ${TEXT_BODY};
       }
     }
 
     .o-sidePanelButtons {
-      padding: 16px;
-      text-align: right;
+      display: flex;
+      gap: 8px;
     }
 
     .o-sidePanel-btn-link {
@@ -63739,50 +63934,10 @@ css /* scss */ `
       }
     }
 
-    .o-button.primary:not(.o-disabled) {
-      background-color: ${FILTERS_COLOR};
-      color: white;
-      &:hover:enabled {
-        opacity: 0.8;
-        background-color: ${FILTERS_COLOR};
-      }
-    }
-
-    input.o-required,
-    select.o-required {
-      border-color: #4c4c4c;
-    }
-    input.o-optional,
-    select.o-optional {
-      border: 1px solid #a9a9a9;
-    }
     .o-invalid {
       border-width: 2px;
       border-color: red;
     }
-    select.o-input {
-      background-color: white;
-      text-align: left;
-    }
-
-    .o-sidePanel-tools {
-      color: #333;
-      font-size: 13px;
-      cursor: default;
-      display: flex;
-
-      .o-tool {
-        display: flex;
-        align-items: center;
-        margin: 2px;
-        padding: 0 3px;
-        border-radius: 2px;
-
-        &:hover {
-          background-color: rgba(0, 0, 0, 0.08);
-        }
-      }
-    }
 
     .o-sidePanel-handle-container {
       width: 8px;
@@ -63935,69 +64090,73 @@ css /* scss */ `
   .o-border-selector {
     padding: 4px;
     background-color: white;
-  }
-  .o-divider {
-    border-right: 1px solid #e0e2e4;
-    margin: 0 6px;
-  }
-  .o-border-selector-section {
-    .o-dropdown-line {
-      height: 30px;
-      margin: 1px;
-      .o-line-item {
-        padding: 4px;
-        width: 18px;
-        height: 18px;
-      }
-    }
-    .o-border-style-tool {
-      padding: 0px 3px;
-      margin: 2px;
-      height: 25px;
+
+    .o-divider {
+      border-right: 1px solid ${GRAY_300};
+      margin: 0 6px;
     }
-  }
-  .o-style-preview {
-    margin: 7px 5px 7px 5px;
-    width: 60px;
-    height: 5px;
-  }
-  .o-style-thin {
-    border-bottom: 1px solid #000000;
-  }
-  .o-style-medium {
-    border-bottom: 2px solid #000000;
-  }
-  .o-style-thick {
-    border-bottom: 3px solid #000000;
-  }
-  .o-style-dashed {
-    border-bottom: 1px dashed #000000;
-  }
-  .o-style-dotted {
-    border-bottom: 1px dotted #000000;
-  }
-  .o-dropdown-border-type {
-    &:not(.o-disabled):not(.active):hover {
-      background-color: ${BG_HOVER_COLOR};
+
+    .o-border-selector-section {
+      .o-dropdown-line {
+        height: 30px;
+        margin: 1px;
+        .o-line-item {
+          padding: 4px;
+          width: 18px;
+          height: 18px;
+          &.active {
+            background-color: ${BUTTON_ACTIVE_BG};
+          }
+        }
+      }
+      .o-border-style-tool {
+        padding: 0px 3px;
+        margin: 2px;
+        height: 25px;
+      }
     }
   }
-  .o-dropdown-border-check {
-    width: 20px;
-    font-size: 12px;
-  }
+
   .o-border-style-dropdown {
     background: #ffffff;
     padding: 4px;
     .o-dropdown-line {
-      .o-line-item.active {
-        background-color: rgba(0, 0, 0, 0.2);
+    }
+    .o-style-preview {
+      margin: 7px 5px 7px 5px;
+      width: 60px;
+      height: 5px;
+    }
+    .o-style-thin {
+      border-bottom: 1px solid #000000;
+    }
+    .o-style-medium {
+      border-bottom: 2px solid #000000;
+    }
+    .o-style-thick {
+      border-bottom: 3px solid #000000;
+    }
+    .o-style-dashed {
+      border-bottom: 1px dashed #000000;
+    }
+    .o-style-dotted {
+      border-bottom: 1px dotted #000000;
+    }
+    .o-dropdown-border-type {
+      cursor: pointer;
+      &:not(.o-disabled):not(.active):hover {
+        background-color: ${BUTTON_HOVER_BG};
       }
     }
-  }
-  .o-border-picker-button {
-    padding: 0px !important;
-    margin: 5px 0px 0px 0px !important;
-    height: 25px !important;
+    .o-dropdown-border-check {
+      width: 20px;
+      font-size: 12px;
+    }
+    .o-border-picker-button {
+      padding: 0px !important;
+      margin: 5px 0px 0px 0px !important;
+      height: 25px !important;
+    }
   }
 `;
 class BorderEditor extends owl.Component {
@@ -64372,8 +64531,8 @@ css /* scss */ `
           margin: 0 2px;
 
           &.active {
-            background-color: ${BG_HOVER_COLOR};
-            color: #000;
+            background-color: ${BUTTON_ACTIVE_BG};
+            color: ${BUTTON_ACTIVE_TEXT_COLOR};
           }
         }
       }
@@ -64658,23 +64817,23 @@ class WebClipboardWrapper {
 // -----------------------------------------------------------------------------
 // SpreadSheet
 // -----------------------------------------------------------------------------
-// If we ever change these colors, make sure the filter tool stays green to match the icon in the grid
-const ACTIVE_BG_COLOR = BACKGROUND_HEADER_FILTER_COLOR;
-const ACTIVE_FONT_COLOR = FILTERS_COLOR;
-const HOVERED_BG_COLOR = BG_HOVER_COLOR;
-const HOVERED_FONT_COLOR = "#000";
+const CARET_DOWN_SVG = /*xml*/ `
+<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'>
+  <polygon fill='%23374151' points='3.5 4 7 0 0 0'/>
+</svg>
+`;
 css /* scss */ `
   .o-spreadsheet {
     position: relative;
     display: grid;
-    color: #333;
+    color: ${TEXT_BODY};
     font-size: 14px;
 
     input {
       background-color: white;
     }
     .text-muted {
-      color: grey !important;
+      color: ${TEXT_BODY_MUTED} !important;
     }
     .o-disabled {
       opacity: 0.4;
@@ -64699,20 +64858,20 @@ css /* scss */ `
       border-radius: 2px;
       cursor: pointer;
       .o-icon {
-        color: ${ICONS_COLOR};
+        color: ${TEXT_BODY};
       }
       &:not(.o-disabled):not(.active):hover {
-        background-color: ${HOVERED_BG_COLOR};
-        color: ${HOVERED_FONT_COLOR};
+        background-color: ${BUTTON_HOVER_BG};
+        color: ${BUTTON_HOVER_TEXT_COLOR};
         .o-icon {
-          color: ${HOVERED_FONT_COLOR};
+          color: ${BUTTON_HOVER_TEXT_COLOR};
         }
       }
       &.active {
-        background-color: ${ACTIVE_BG_COLOR};
-        color: ${ACTIVE_FONT_COLOR};
+        background-color: ${BUTTON_ACTIVE_BG};
+        color: ${BUTTON_ACTIVE_TEXT_COLOR};
         .o-icon {
-          color: ${ACTIVE_FONT_COLOR};
+          color: ${BUTTON_ACTIVE_TEXT_COLOR};
         }
       }
     }
@@ -64741,18 +64900,64 @@ css /* scss */ `
         border-left: 1px solid ${GRID_BORDER_COLOR};
       }
     }
+
+    .o-input {
+      min-width: 0px;
+      padding: 1px 0;
+      box-sizing: border-box;
+      width: 100%;
+      outline: none;
+      border-color: ${GRAY_300};
+      color: ${GRAY_900};
+
+      &::placeholder {
+        opacity: 0.5;
+      }
+      &:focus {
+        border-color: ${ACTION_COLOR};
+      }
+    }
+
+    select.o-input {
+      cursor: pointer;
+      border-width: 0 0 1px 0;
+      padding: 1px 6px 1px 0px;
+
+      appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background: transparent url("data:image/svg+xml,${encodeURIComponent(CARET_DOWN_SVG)}")
+        no-repeat right center;
+      text-overflow: ellipsis;
+
+      &:disabled {
+        color: ${DISABLED_TEXT_COLOR};
+        opacity: 0.4;
+        cursor: default;
+      }
+    }
+
+    .o-input[type="text"] {
+      border-width: 0 0 1px 0;
+    }
+
+    .o-input[type="number"],
+    .o-number-input {
+      border-width: 0 0 1px 0;
+      /* Remove number input arrows */
+      appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
 
   .o-two-columns {
     grid-column: 1 / 3;
   }
 
-  .o-cf-icon {
-    width: ${CF_ICON_EDGE_LENGTH}px;
-    height: ${CF_ICON_EDGE_LENGTH}px;
-    vertical-align: sub;
-  }
-
   .o-text-icon {
     vertical-align: middle;
   }
@@ -64791,58 +64996,55 @@ css /* scss */ `
 
   .o-button {
     border: 1px solid;
-    padding: 0px 20px 0px 20px;
     border-radius: 4px;
     font-weight: 500;
     font-size: 14px;
     height: 30px;
     line-height: 16px;
-    margin-right: 8px;
-
-    &:not(:hover) {
-      background-color: transparent;
-    }
-
-    &:enabled {
-      cursor: pointer;
-    }
+    flex-grow: 1;
+    background-color: ${BUTTON_BG};
+    border: 1px solid ${GRAY_200};
+    color: ${TEXT_BODY};
 
     &:disabled {
       color: ${DISABLED_TEXT_COLOR};
     }
 
-    &:last-child {
-      margin-right: 0px;
-    }
-
-    &.o-button-grey {
-      border-color: lightgrey;
-      background: #ffffff;
-      color: #333;
+    &.primary {
+      background-color: ${PRIMARY_BUTTON_BG};
+      border-color: ${PRIMARY_BUTTON_BG};
+      color: #fff;
       &:hover:enabled {
-        background-color: rgba(0, 0, 0, 0.08);
+        color: #fff;
+        background-color: ${PRIMARY_BUTTON_HOVER_BG};
+      }
+      &:active:enabled {
+        background-color: ${PRIMARY_BUTTON_ACTIVE_BG};
+        color: ${PRIMARY_BUTTON_BG};
+      }
+      &.o-disabled,
+      &:disabled {
+        opacity: 0.5;
       }
     }
-  }
 
-  .o-input {
-    color: #666666;
-    border-radius: 4px;
-    min-width: 0px;
-    padding: 4px 6px;
-    box-sizing: border-box;
-    line-height: 1;
-    width: 100%;
-    height: 28px;
-  }
+    &:hover:enabled {
+      color: ${BUTTON_HOVER_TEXT_COLOR};
+      background-color: ${BUTTON_HOVER_BG};
+    }
+    &:active:enabled {
+      color: ${BUTTON_ACTIVE_TEXT_COLOR};
+      background-color: ${BUTTON_ACTIVE_BG};
+    }
 
-  .o-number-input {
-    /* Remove number input arrows */
-    appearance: textfield;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
+    &.o-disabled,
+    &:disabled {
+      opacity: 0.8;
+    }
+
+    &.o-button-danger:hover {
+      color: #ffffff;
+      background: ${ALERT_DANGER_BORDER};
     }
   }
 `;
@@ -66680,7 +66882,7 @@ function addBarChart(chart) {
     // overlap and gapWitdh seems to be by default at -20 and 20 in chart.js.
     // See https://www.chartjs.org/docs/latest/charts/bar.html and https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
     const dataSetsColors = chart.dataSets.map((ds) => ds.backgroundColor ?? "");
-    const colors = new ColorGenerator(dataSetsColors);
+    const colors = new ColorGenerator(chart.dataSets.length, dataSetsColors);
     const leftDataSetsNodes = [];
     const rightDataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
@@ -66755,7 +66957,7 @@ function addComboChart(chart) {
     // See https://www.chartjs.org/docs/latest/charts/bar.html and https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
     const dataSets = chart.dataSets;
     const dataSetsColors = dataSets.map((ds) => ds.backgroundColor ?? "");
-    const colors = new ColorGenerator(dataSetsColors);
+    const colors = new ColorGenerator(dataSets.length, dataSetsColors);
     let dataSet = dataSets[0];
     const firstColor = toXlsxHexColor(colors.next());
     const useRightAxisForBarSerie = dataSet.rightYAxis ?? false;
@@ -66863,7 +67065,7 @@ function addComboChart(chart) {
 }
 function addLineChart(chart) {
     const dataSetsColors = chart.dataSets.map((ds) => ds.backgroundColor ?? "");
-    const colors = new ColorGenerator(dataSetsColors);
+    const colors = new ColorGenerator(chart.dataSets.length, dataSetsColors);
     const leftDataSetsNodes = [];
     const rightDataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
@@ -66934,7 +67136,7 @@ function addLineChart(chart) {
 }
 function addScatterChart(chart) {
     const dataSetsColors = chart.dataSets.map((ds) => ds.backgroundColor ?? "");
-    const colors = new ColorGenerator(dataSetsColors);
+    const colors = new ColorGenerator(chart.dataSets.length, dataSetsColors);
     const leftDataSetsNodes = [];
     const rightDataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
@@ -67005,8 +67207,8 @@ function addScatterChart(chart) {
         : ""}`;
 }
 function addDoughnutChart(chart, chartSheetIndex, data, { holeSize } = { holeSize: 50 }) {
-    const colors = new ColorGenerator();
     const maxLength = largeMax(chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
+    const colors = new ColorGenerator(maxLength);
     const doughnutColors = range(0, maxLength).map(() => toXlsxHexColor(colors.next()));
     const dataSetsNodes = [];
     for (const [dsIndex, dataset] of Object.entries(chart.dataSets).reverse()) {
@@ -68549,7 +68751,7 @@ class Model extends EventBus {
         this.session.join(this.config.client);
     }
     leaveSession() {
-        this.session.leave(this.exportData());
+        this.session.leave(lazy(() => this.exportData()));
     }
     setupUiPlugin(Plugin) {
         const plugin = new Plugin(this.uiPluginConfig);
@@ -68988,6 +69190,9 @@ const helpers = {
     getDefaultChartJsRuntime,
     chartFontColor,
     getChartAxisTitleRuntime,
+    getChartAxisType,
+    getTrendDatasetForBarChart,
+    getTrendDatasetForLineChart,
     getFillingMode,
     rgbaToHex,
     colorToRGBA,
@@ -69022,6 +69227,7 @@ const helpers = {
     UNDO_REDO_PIVOT_COMMANDS,
     createPivotFormula,
     areDomainArgsFieldsValid,
+    splitReference,
 };
 const links = {
     isMarkdownLink,
@@ -69068,6 +69274,7 @@ const components = {
     PivotDeferUpdate,
     PivotTitleSection,
     CogWheelMenu,
+    TextInput,
 };
 const hooks = {
     useDragAndDropListItems,
@@ -69104,6 +69311,8 @@ const constants = {
     HIGHLIGHT_COLOR,
     PIVOT_TABLE_CONFIG,
     ChartTerms,
+    TREND_LINE_XAXIS_ID,
+    CHART_AXIS_CHOICES,
 };
 
 exports.AbstractCellClipboardHandler = AbstractCellClipboardHandler;
@@ -69152,6 +69361,6 @@ exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
 
-__info__.version = "17.5.0-alpha.4";
-__info__.date = "2024-08-06T12:05:55.642Z";
-__info__.hash = "a941df3";
+__info__.version = "17.5.0-alpha.6";
+__info__.date = "2024-08-19T08:12:01.220Z";
+__info__.hash = "c067f5d";