@odoo/o-spreadsheet 19.2.0-alpha.4 → 19.3.2

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 19.2.0-alpha.4
- @date 2026-01-21T11:09:20.618Z
- @hash fa080c2
+ @version 19.3.2
+ @date 2026-05-11T13:52:25.929Z
+ @hash 14395f7
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -19,7 +19,7 @@
               t-key="msg_index"
               class="ps-2"
               t-att-class="{'text-truncate': props.singleBox }"
-              t-esc="msg"
+              t-out="msg"
             />
           </div>
         </div>
@@ -33,7 +33,7 @@
       t-on-click="props.onClick">
       <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between border-bottom">
         <!-- Menus -->
-        <div class="o-topbar-topleft d-flex">
+        <div class="o-topbar-topleft d-flex" t-ref="topBarTop">
           <t t-foreach="menus" t-as="menu" t-key="menu_index">
             <div
               t-if="menu.children.length !== 0"
@@ -42,7 +42,7 @@
               t-on-click="(ev) => this.toggleContextMenu(menu, ev)"
               t-on-mouseover="(ev) => this.onMenuMouseOver(menu, ev)"
               t-att-data-id="menu.id">
-              <t t-esc="getMenuName(menu)"/>
+              <t t-out="getMenuName(menu)"/>
             </div>
           </t>
         </div>
@@ -58,20 +58,30 @@
         t-att-class="{'o-topbar-responsive': !env.model.getters.isReadonly()}"
         t-ref="toolBarContainer">
         <div
-          class="o-topbar-toolbar d-flex"
+          class="o-topbar-toolbar d-flex flex-grow-1"
           t-att-class="{'flex-shrink-0': env.model.getters.isReadonly()}">
           <!-- Toolbar -->
           <div
             t-if="env.model.getters.isReadonly()"
-            class="o-readonly-toolbar d-flex align-items-center text-muted">
+            class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
             <span>
               <i class="fa fa-eye"/>
               Readonly Access
             </span>
           </div>
-          <div t-else="" class="o-toolbar-tools d-flex ms-4 flex-grow-1" t-ref="toolBar">
+          <div
+            t-else=""
+            class="o-toolbar-tools d-flex flex-grow-1 align-items-center"
+            t-ref="toolBar">
+            <div
+              class="d-flex h-100 o-named-range-selector-container align-items-center ms-2 me-1"
+              t-ref="namedRanges"
+              t-on-click.stop="">
+              <NamedRangeSelector/>
+              <div class="o-topbar-divider border-end"/>
+            </div>
             <div
-              class="d-flex tool-container"
+              class="d-flex tool-container h-100"
               t-foreach="toolsCategories"
               t-as="category"
               t-key="category"
@@ -125,14 +135,18 @@
     </div>
     <MenuPopover
       t-if="state.menuState.isOpen"
+      t-key="state.menuState.parentMenu.id"
       anchorRect="state.menuState.anchorRect"
       menuItems="state.menuState.menuItems"
       onClose="() => this.closeMenus()"
       onMenuClicked="() => this.props.onClick()"
       popoverPositioning="'bottom-left'"
+      menuId="state.menuState.parentMenu.id"
+      autoSelectFirstItem="state.menuState.autoSelectFirstItem"
+      onKeyboardNavigation.bind="this.onKeyboardNavigation"
     />
     <Popover t-if="state.toolsPopoverState.isOpen" t-props="toolsPopoverProps">
-      <div class="d-flex px-2 py-1 flex-wrap align-items-center bg-white">
+      <div class="d-flex px-2 py-1 flex-wrap align-items-center">
         <t
           t-foreach="state.invisibleToolsCategories"
           t-as="category"
@@ -188,7 +202,7 @@
     <FontSizeEditor
       currentFontSize="currentFontSize"
       onFontSizeChanged.bind="this.setFontSize"
-      class="props.class"
+      class="class"
       onToggle.bind="this.onToggle"
       onFocusInput.bind="this.onFocusInput"
     />
@@ -206,7 +220,7 @@
       class="props.class"
     />
     <Popover t-if="isActive" t-props="popoverProps">
-      <div class="o-dropdown-content p-1 bg-white" t-if="isActive" t-on-click.stop="">
+      <div class="o-dropdown-content p-1" t-if="isActive" t-on-click.stop="">
         <div class="o-dropdown-line">
           <t t-foreach="props.childActions" t-as="action" t-key="action_index">
             <ActionButton action="action" class="props.childClass"/>
@@ -217,7 +231,9 @@
   </div>
 
   <t t-name="o-spreadsheet-ColorEditor">
-    <div class="d-flex align-items-center">
+    <div
+      class="d-flex align-items-center"
+      t-att-class="{'o-disabled': env.model.getters.isCurrentSheetLocked() }">
       <ColorPickerWidget
         currentColor="currentColor"
         toggleColorPicker.bind="onClick"
@@ -239,9 +255,11 @@
         t-att-id="props.id"
         t-att-placeholder="props.placeholder"
         t-on-change="save"
-        t-on-blur="save"
+        t-on-blur="onBlur"
         t-on-pointerdown="onMouseDown"
         t-on-pointerup="onMouseUp"
+        t-on-focus="onFocus"
+        t-on-input="onInput"
         t-on-keydown="onKeyDown"
       />
       <span
@@ -256,7 +274,7 @@
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
       <div
-        class="o-table-style-popover d-flex flex-column py-3 bg-white"
+        class="o-table-style-popover d-flex flex-column py-3"
         t-ref="tableStyleList"
         t-on-contextmenu.prevent="">
         <div class="d-flex o-notebook ps-4 mb-3">
@@ -268,7 +286,7 @@
             t-att-class="{ 'selected': state.selectedCategory === category }"
             t-on-click="() => state.selectedCategory = category"
             t-att-data-id="category"
-            t-esc="categories[category_value]"
+            t-out="categories[category_value]"
           />
         </div>
         <div
@@ -364,12 +382,12 @@
   </t>
 
   <t t-name="o-spreadsheet-TableDropdownButton">
-    <div class="o-table-widget d-flex align-item-center" t-att-class="props.class">
+    <div class="o-table-widget d-flex align-item-center" t-att-class="class">
       <ActionButton
         action="action"
         hasTriangleDownIcon="true"
         t-on-click="onClick"
-        class="'o-hoverable-button'"
+        class="'opacity-100'"
       />
     </div>
     <TableStylesPopover
@@ -382,13 +400,115 @@
     />
   </t>
 
+  <t t-name="o-spreadsheet-StandaloneGridCanvas">
+    <canvas t-ref="canvas"/>
+  </t>
+
+  <t t-name="o-spreadsheet-SpreadsheetPrint">
+    <div class="o-spreadsheet-print d-flex flex-column h-100 w-100">
+      <t t-set="pages" t-value="printStore.printPages"/>
+      <div class="o-print-header flex-shrink-0 d-flex align-items-center d-print-none">
+        <h3 class="m-0 p-3 ps-4 text-white">Print Preview</h3>
+        <span class="text-white">
+          <t t-esc="pages.length"/>
+          pages
+        </span>
+        <button class="o-button ms-auto me-2 flex-grow-0" t-on-click="props.onExitPrintMode">
+          Cancel
+        </button>
+        <button class="o-button primary flex-grow-0 me-4" t-on-click="onPrint">Next</button>
+      </div>
+      <div class="o-print-container d-flex flex-grow-1 overflow-hidden">
+        <div class="o-print-preview w-100 overflow-auto d-flex flex-column">
+          <div class="mx-auto">
+            <div
+              t-if="pages.length === 0"
+              class="o-print-page o-empty-print-page m-4 shadow d-flex flex-column align-items-center justify-content-center flex-shrink-0"
+              t-att-style="pageStyle">
+              <h4 class="fst-italic text-muted">No content to print</h4>
+            </div>
+            <div
+              t-else=""
+              t-foreach="pages"
+              t-as="page"
+              t-key="page_index"
+              class="o-print-page m-4 shadow d-flex justify-content-center flex-shrink-0"
+              t-att-style="pageStyle">
+              <StandaloneGridCanvas
+                sheetId="page.sheetId"
+                zone="page.zone"
+                renderingCtx="page.renderingCtx"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="o-sidePanel flex-shrink-0 bg-white border-top border-start d-print-none">
+          <div class="o-sidePanelBody pt-4">
+            <Section t-if="!this.env.isDashboard()">
+              <div class="o-section-title">Print content</div>
+              <Select
+                selectedValue="printStore.printSelection"
+                values="printStore.printSelectionOptions"
+                class="'o-print-selection'"
+                onChange.bind="this.onPrintSelectionChange"
+              />
+            </Section>
+
+            <Section>
+              <div class="o-section-title">Scale</div>
+              <Select
+                selectedValue="printStore.printScale"
+                values="printStore.printScaleOptions"
+                class="'o-print-scale'"
+                onChange.bind="this.onPrintScaleChange"
+              />
+            </Section>
+
+            <Section>
+              <div class="o-section-title">Paper</div>
+              <Select
+                selectedValue="printStore.pageLayout"
+                values="printStore.layoutOptions"
+                class="'o-print-layout'"
+                onChange.bind="this.onLayoutChange"
+              />
+            </Section>
+
+            <Section>
+              <div class="o-section-title">Orientation</div>
+              <BadgeSelection
+                choices="printStore.orientationChoices"
+                onChange.bind="this.changeOrientation"
+                selectedValue="printStore.orientation"
+              />
+            </Section>
+
+            <Section t-if="!this.env.isDashboard()">
+              <div class="o-section-title">Formatting</div>
+              <Checkbox
+                name="'showGridLines'"
+                value="!this.printStore.hideGridLines"
+                onChange.bind="this.setGridLinesVisibility"
+                className="'mt-2'"
+                label.translate="Show gridlines"
+              />
+            </Section>
+          </div>
+        </div>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-Spreadsheet">
     <div
       class="o-spreadsheet h-100 w-100"
       t-att-class="getSpreadSheetClasses()"
       t-ref="spreadsheet"
       t-att-style="getStyle()">
-      <t t-if="env.isDashboard()">
+      <t t-if="state.printModeEnabled">
+        <SpreadsheetPrint onExitPrintMode.bind="exitPrintMode"/>
+      </t>
+      <t t-elif="env.isDashboard()">
         <SpreadsheetDashboard getGridSize.bind="getGridSize"/>
         <FullScreenFigure/>
       </t>
@@ -452,7 +572,7 @@
             t-as="symbol"
             t-key="symbol_index"
             class="o-spreadsheet-editor-symbol w-100 d-flex justify-content-center align-items-center mx-1"
-            t-esc="symbol"
+            t-out="symbol"
             tabindex="-1"
             t-att-title="symbol"
             t-on-click="() => this.insertSymbol(symbol)"
@@ -480,7 +600,7 @@
           t-att-title="backTitle">
           <i class="fa fa-angle-left"/>
         </div>
-        <span class="d-flex align-items-center" t-esc="state.title"/>
+        <span class="d-flex align-items-center" t-out="state.title"/>
       </div>
       <div
         class="o-ribbon-menu-wrapper overflow-auto"
@@ -524,7 +644,7 @@
             class="o-delete o-button-danger o-button">
             Delete
           </button>
-          <button t-on-click="onCancel" class="o-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-cancel o-button">Discard</button>
           <button t-on-click="onConfirm" class="o-confirm o-button primary">Confirm</button>
         </div>
       </Section>
@@ -616,9 +736,10 @@
         <Checkbox
           label="getCheckboxLabel('automaticAutofill')"
           name="'automaticAutofill'"
-          value="tableConfig.automaticAutofill"
+          value="tableConfig.automaticAutofill and props.table.type !== 'dynamic'"
           onChange="(val) => this.updateTableConfig('automaticAutofill', val)"
           className="'mb-1'"
+          disabled="props.table.type === 'dynamic'"
         />
         <div class="d-flex flex-row align-items-center">
           <Checkbox
@@ -716,7 +837,7 @@
           t-on-click="props.onToggleCollapsePanel">
           <i class="fa fa-angle-double-right"/>
         </div>
-        <div class="o-sidePanelTitle o-fw-bold ms-2" t-esc="getTitle()"/>
+        <div class="o-sidePanelTitle o-fw-bold ms-2" t-out="getTitle()"/>
         <div
           t-if="props.isPinned"
           class="o-pin-panel o-sidePanelAction ms-auto rounded active"
@@ -772,7 +893,7 @@
           ✕
         </div>
 
-        <div class="o-sidePanelTitle o-fw-bold" t-esc="getTitle()"/>
+        <div class="o-sidePanelTitle o-fw-bold" t-out="getTitle()"/>
       </div>
     </div>
   </t>
@@ -788,19 +909,19 @@
         <div class="o-locale-preview mt-4 p-3 rounded border">
           <div>
             <span class="o-fw-bold me-1">Number:</span>
-            <span t-esc="numberFormatPreview"/>
+            <span t-out="numberFormatPreview"/>
           </div>
           <div>
             <span class="o-fw-bold me-1">Date:</span>
-            <span t-esc="dateFormatPreview"/>
+            <span t-out="dateFormatPreview"/>
           </div>
           <div>
             <span class="o-fw-bold me-1">Date time:</span>
-            <span t-esc="dateTimeFormatPreview"/>
+            <span t-out="dateTimeFormatPreview"/>
           </div>
           <div>
             <span class="o-fw-bold me-1">First day of week:</span>
-            <span t-esc="firstDayOfWeek"/>
+            <span t-out="firstDayOfWeek"/>
           </div>
         </div>
       </Section>
@@ -898,15 +1019,15 @@
         </div>
       </div>
 
-      <div class="o-panel-content overflow-y-auto h-100" t-ref="panelContent">
-        <div class="h-100" t-att-class="{ 'd-none': state.panel !== 'configuration' }">
+      <div class="o-panel-content overflow-hidden h-100">
+        <div class="h-100" t-att-class="state.panel !== 'configuration' ? 'd-none' : ''">
           <t
             t-component="sidePanelEditor"
             pivotId="props.pivotId"
             onCloseSidePanel="props.onCloseSidePanel"
           />
         </div>
-        <div t-att-class="state.panel !== 'design' ? 'd-none' : ''">
+        <div class="h-100" t-att-class="state.panel !== 'design' ? 'd-none' : ''">
           <PivotDesignPanel pivotId="props.pivotId"/>
         </div>
       </div>
@@ -933,7 +1054,7 @@
             <span
               class="text-danger sp_range_error_message"
               t-if="shouldDisplayInvalidRangeError"
-              t-esc="pivot.invalidRangeMessage"
+              t-out="pivot.invalidRangeMessage"
             />
           </Section>
 
@@ -963,105 +1084,117 @@
   </t>
 
   <t t-name="o-spreadsheet-PivotDesignPanel">
-    <Section class="'o-pivot-design'" title.translate="Display options">
-      <div>
-        <div class="container-fluid p-0 pt-2">
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Max rows:</div>
-            <div class="col-6 d-flex align-items-center">
-              <NumberInput
-                value="pivotStyle.numberOfRows ?? ''"
-                class="'o-pivot-n-of-rows'"
-                placeholder.translate="e.g. 10"
-                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
-              />
+    <div class="h-100 overflow-y-auto">
+      <Section class="'o-pivot-design'" title.translate="Display options">
+        <div>
+          <div class="container-fluid p-0 pt-2">
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Max rows:</div>
+              <div class="col-6 d-flex align-items-center">
+                <NumberInput
+                  value="pivotStyle.numberOfRows ?? ''"
+                  class="'o-pivot-n-of-rows'"
+                  placeholder.translate="e.g. 10"
+                  onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Max columns:</div>
-            <div class="col-6 d-flex align-items-center">
-              <NumberInput
-                value="pivotStyle.numberOfColumns ?? ''"
-                class="'o-pivot-n-of-columns'"
-                placeholder.translate="e.g. 5"
-                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Max columns:</div>
+              <div class="col-6 d-flex align-items-center">
+                <NumberInput
+                  value="pivotStyle.numberOfColumns ?? ''"
+                  class="'o-pivot-n-of-columns'"
+                  placeholder.translate="e.g. 5"
+                  onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show totals:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayTotals'"
-                value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
-                onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show totals:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayTotals'"
+                  value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
+                  onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show column titles:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayColumnHeaders'"
-                value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
-                onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show column titles:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayColumnHeaders'"
+                  value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
+                  onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
+                />
+              </div>
+            </div>
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show measure titles:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayMeasuresRow'"
+                  value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
+                  onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
+                />
+              </div>
             </div>
           </div>
           <div class="row mb-2 align-items-center">
-            <div class="col-6">Show measure titles:</div>
+            <div class="col-6">Use tabular form:</div>
             <div class="col-6 d-flex align-items-center">
               <Checkbox
-                name="'displayMeasuresRow'"
-                value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
-                onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
+                name="'tabularForm'"
+                value="pivotStyle.tabularForm ?? defaultStyle.tabularForm"
+                onChange="(val) => this.updatePivotStyleProperty('tabularForm', val)"
               />
             </div>
           </div>
         </div>
-      </div>
-    </Section>
+      </Section>
 
-    <Section class="'o-pivot-table-style'" title.translate="Pivot table style">
-      <div class="row mb-2 align-items-center pt-2">
-        <div class="col-6">Banded rows:</div>
-        <div class="col-6 d-flex align-items-center">
-          <Checkbox
-            name="'bandedRows'"
-            value="pivotStyle.bandedRows ?? defaultStyle.bandedRows"
-            onChange="(val) => this.updatePivotStyleProperty('bandedRows', val)"
-          />
+      <Section class="'o-pivot-table-style'" title.translate="Pivot table style">
+        <div class="row mb-2 align-items-center pt-2">
+          <div class="col-6">Banded rows:</div>
+          <div class="col-6 d-flex align-items-center">
+            <Checkbox
+              name="'bandedRows'"
+              value="pivotStyle.bandedRows ?? defaultStyle.bandedRows"
+              onChange="(val) => this.updatePivotStyleProperty('bandedRows', val)"
+            />
+          </div>
         </div>
-      </div>
-      <div class="row mb-2 align-items-center">
-        <div class="col-6">Banded columns</div>
-        <div class="col-6 d-flex align-items-center">
-          <Checkbox
-            name="'bandedColumns'"
-            value="pivotStyle.bandedColumns ?? defaultStyle.bandedColumns"
-            onChange="(val) => this.updatePivotStyleProperty('bandedColumns', val)"
-          />
+        <div class="row mb-2 align-items-center">
+          <div class="col-6">Banded columns</div>
+          <div class="col-6 d-flex align-items-center">
+            <Checkbox
+              name="'bandedColumns'"
+              value="pivotStyle.bandedColumns ?? defaultStyle.bandedColumns"
+              onChange="(val) => this.updatePivotStyleProperty('bandedColumns', val)"
+            />
+          </div>
         </div>
-      </div>
-      <div class="row mb-2 align-items-center">
-        <div class="col-6">Filter button</div>
-        <div class="col-6 d-flex align-items-center">
-          <Checkbox
-            name="'hasFilters'"
-            value="pivotStyle.hasFilters ?? defaultStyle.hasFilters"
-            onChange="(val) => this.updatePivotStyleProperty('hasFilters', val)"
+        <div class="row mb-2 align-items-center">
+          <div class="col-6">Filter button</div>
+          <div class="col-6 d-flex align-items-center">
+            <Checkbox
+              name="'hasFilters'"
+              value="pivotStyle.hasFilters ?? defaultStyle.hasFilters"
+              onChange="(val) => this.updatePivotStyleProperty('hasFilters', val)"
+            />
+          </div>
+        </div>
+        <div class="mt-4">
+          <TableStylePicker
+            tableConfig="tableConfig"
+            onStylePicked.bind="onStylePicked"
+            tableStyles="tableStyles"
+            type="'pivot'"
           />
         </div>
-      </div>
-      <div class="mt-4">
-        <TableStylePicker
-          tableConfig="tableConfig"
-          onStylePicked.bind="onStylePicked"
-          tableStyles="tableStyles"
-          type="'pivot'"
-        />
-      </div>
-    </Section>
+      </Section>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
@@ -1074,7 +1207,7 @@
       />
       <div
         class="o-pivot-measure-display-description mt-3 ps-3 border-start"
-        t-esc="measureDisplayDescription[store.measureDisplay.type]"
+        t-out="measureDisplayDescription[store.measureDisplay.type]"
       />
     </Section>
 
@@ -1110,7 +1243,7 @@
 
     <Section>
       <div class="o-sidePanelButtons">
-        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Cancel</button>
+        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Discard</button>
         <button t-on-click="onSave" class="o-pivot-measure-save o-button primary">Save</button>
       </div>
     </Section>
@@ -1237,15 +1370,15 @@
   <t t-name="o-spreadsheet-PivotSortSection">
     <Section t-if="hasValidSort" class="'o-pivot-sort'">
       <t t-set-slot="title">Sorting</t>
-      <div t-esc="sortDescription" class="pb-2"/>
+      <div t-out="sortDescription" class="pb-2"/>
       <div class="d-flex flex-column gap-2">
         <t t-foreach="sortValuesAndFields" t-as="valueAndField" t-key="valueAndField_index">
           <div class="o-sort-card d-flex gap-1 px-2 border">
             <t t-if="valueAndField.field">
-              <span class="fw-bolder" t-esc="valueAndField.field"/>
+              <span class="fw-bolder" t-out="valueAndField.field"/>
               =
             </t>
-            <span class="fw-bolder o-sort-value" t-esc="valueAndField.value"/>
+            <span class="fw-bolder o-sort-value" t-out="valueAndField.value"/>
           </div>
         </t>
       </div>
@@ -1293,6 +1426,11 @@
           />
         </div>
       </div>
+      <div class="d-flex flex-row">
+        <div class="d-flex py-1 px-2 w-100 small text-muted o-measure-description">
+          <i t-out="getMeasureDescription(measure)"/>
+        </div>
+      </div>
     </PivotDimension>
   </t>
 
@@ -1330,7 +1468,9 @@
       class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension border rounded"
       t-att-class="{'pivot-dimension-invalid': !props.dimension.isValid}">
       <div class="d-flex flex-row justify-content-between align-items-center">
-        <div class="d-flex align-items-center overflow-hidden text-nowrap">
+        <div
+          class="d-flex align-items-center overflow-hidden text-nowrap"
+          t-att-title="props.dimension.displayName">
           <span class="text-danger me-1" t-if="!props.dimension.isValid">
             <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
           </span>
@@ -1341,7 +1481,7 @@
             class="'o-fw-bold'"
             selectContentOnFocus="true"
           />
-          <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
+          <span t-else="1" class="o-fw-bold text-truncate" t-out="dimensionDisplayName"/>
         </div>
         <div class="d-flex flex-rows" t-on-pointerdown.stop="">
           <t t-slot="upper-right-icons"/>
@@ -1358,9 +1498,8 @@
 
   <t t-name="o-spreadsheet-AddDimensionButton">
     <button class="add-dimension o-button" t-on-click="togglePopover" t-ref="button">Add</button>
-    <Popover t-if="popover.isOpen" t-props="popoverProps">
-      <div
-        class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search bg-white">
+    <Popover t-if="popover.isOpen" t-props="popoverProps" class="'o-pivot-add-dimension-popover'">
+      <div class="p-2 border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search">
         <i class="pe-1 pivot-dimension-search-field-icon text-muted">
           <t t-call="o-spreadsheet-Icon.SEARCH"/>
         </i>
@@ -1443,6 +1582,55 @@
     </SidePanelCollapsible>
   </t>
 
+  <t t-name="o-spreadsheet-NamedRangesPanel">
+    <div class="o-named-ranges">
+      <div class="o-named-range-list">
+        <t t-foreach="namedRanges" t-as="namedRange" t-key="namedRange_index">
+          <NamedRangePreview namedRange="namedRange"/>
+        </t>
+      </div>
+      <div class="o-named-range-add o-button-link p-4 float-end" t-on-click="addNewNamedRange">
+        + Add a new named range
+      </div>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-NamedRangePreview">
+    <t>
+      <div
+        class="o-named-range-preview p-3 pb-1 border-bottom"
+        t-att-class="{
+          'o-focused': state.isSelectionInputFocused
+        }"
+        t-ref="namedRangePreview">
+        <div class="d-flex justify-content-between">
+          <div class="o-named-range-container w-100 d-flex flex-column">
+            <TextInput
+              class="'o-fw-bold'"
+              value="props.namedRange.name"
+              onChange.bind="updateNamedRangeName"
+              selectContentOnFocus="true"
+            />
+            <SelectionInput
+              ranges="[rangeString]"
+              hasSingleRange="true"
+              required="true"
+              onSelectionChanged.bind="onSelectionInputChanged"
+              onSelectionConfirmed.bind="onSelectionInputConfirmed"
+              onInputFocused.bind="onSelectionInputFocused"
+            />
+          </div>
+          <div
+            class="o-named-range-edit d-none align-items-center o-button-icon px-3"
+            title="Delete named range"
+            t-on-click.stop="deleteNamedRange">
+            <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
+          </div>
+        </div>
+      </div>
+    </t>
+  </t>
+
   <t t-name="o-spreadsheet-MoreFormatsPanel">
     <div class="o-more-formats-panel">
       <Section title.translate="Format type">
@@ -1482,8 +1670,8 @@
           <table class="w-100">
             <t t-foreach="examples" t-as="example" t-key="example_index">
               <tr>
-                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
-                <td class="w-75 text-truncate" t-esc="example.value"/>
+                <td class="w-25 pe-3 o-fw-bold" t-out="example.label"/>
+                <td class="w-75 text-truncate" t-out="example.value"/>
               </tr>
             </t>
           </table>
@@ -1532,7 +1720,7 @@
   </t>
 
   <t t-name="o-spreadsheet-FindAndReplacePanel">
-    <div class="o-find-and-replace">
+    <div class="o-find-and-replace" t-on-keydown="onKeydownPanel">
       <Section title.translate="Search">
         <div class="o-input-search-container">
           <input
@@ -1545,9 +1733,9 @@
             placeholder="e.g. 'search me'"
           />
           <div class="o-input-count" t-if="hasSearchResult">
-            <t t-esc="store.selectedMatchIndex+1"/>
+            <t t-out="store.selectedMatchIndex+1"/>
             /
-            <t t-esc="store.searchMatches.length"/>
+            <t t-out="store.searchMatches.length"/>
           </div>
           <div t-elif="!this.pendingSearch and store.toSearch !== ''" class="o-input-count">
             0 / 0
@@ -1608,33 +1796,35 @@
           <ValidationMessages msgType="'info'" messages="searchInfo" singleBox="true"/>
         </div>
       </Section>
-      <Section class="'pt-0'" t-if="!env.model.getters.isReadonly()" title.translate="Replace">
-        <div class="o-input-search-container">
-          <input
-            type="text"
-            class="o-input o-input-without-count o-replace"
-            t-on-keydown="onKeydownReplace"
-            t-model="store.toReplace"
-            placeholder="e.g. 'replace me'"
-          />
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons" t-if="!env.model.getters.isReadonly()">
-          <button
-            t-att-disabled="store.selectedMatchIndex === null"
-            t-on-click="() => store.replace()"
-            class="o-button o-replace">
-            Replace
-          </button>
-          <button
-            t-att-disabled="store.selectedMatchIndex === null"
-            t-on-click="() => store.replaceAll()"
-            class="o-button o-replace-all">
-            Replace all
-          </button>
-        </div>
-      </Section>
+      <t t-if="!env.model.getters.isReadonly()">
+        <Section class="'pt-0'" title.translate="Replace">
+          <div class="o-input-search-container">
+            <input
+              type="text"
+              class="o-input o-input-without-count o-replace"
+              t-on-keydown="onKeydownReplace"
+              t-model="store.toReplace"
+              placeholder="e.g. 'replace me'"
+            />
+          </div>
+        </Section>
+        <Section>
+          <div class="o-sidePanelButtons">
+            <button
+              t-att-disabled="store.selectedMatchIndex === null"
+              t-on-click="() => store.replace()"
+              class="o-button o-replace">
+              Replace
+            </button>
+            <button
+              t-att-disabled="store.selectedMatchIndex === null"
+              t-on-click="() => store.replaceAll()"
+              class="o-button o-replace-all">
+              Replace all
+            </button>
+          </div>
+        </Section>
+      </t>
     </div>
   </t>
 
@@ -1655,8 +1845,8 @@
       t-on-click="onPreviewClick"
       t-ref="dvPreview">
       <div>
-        <div class="o-dv-preview-description o-fw-bold text-truncate" t-esc="descriptionString"/>
-        <div class="o-dv-preview-ranges text-truncate" t-esc="rangesString"/>
+        <div class="o-dv-preview-description o-fw-bold text-truncate" t-out="descriptionString"/>
+        <div class="o-dv-preview-ranges text-truncate" t-out="rangesString"/>
       </div>
       <div
         class="o-dv-delete-button d-flex align-items-center o-button-icon px-3"
@@ -1706,7 +1896,7 @@
 
       <Section>
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-dv-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-dv-cancel o-button">Discard</button>
           <button t-on-click="onSave" class="o-dv-save o-button primary">Save</button>
         </div>
       </Section>
@@ -1746,26 +1936,26 @@
   </t>
 
   <t t-name="o-spreadsheet-ListCriterionForm">
-    <t t-foreach="displayedValues" t-as="value" t-key="value_index">
+    <t t-foreach="this.state.items" t-as="item" t-key="item_index">
       <div class="o-dv-list-values d-flex align-items-center">
         <div class="me-1">
           <RoundColorPicker
-            currentColor="props.criterion.colors?.[value] || '#E7E9ED'"
-            onColorPicked="(c) => this.onColorChanged(c, value)"
+            currentColor="item.color || '#E7E9ED'"
+            onColorPicked="(c) => this.onColorChanged(item_index, c)"
           />
         </div>
         <CriterionInput
-          value="props.criterion.values[value_index]"
-          onValueChanged="(v) => this.onValueChanged(v, value_index)"
+          value="item.value"
+          onValueChanged="(v) => this.onValueChanged(item_index, v)"
           criterionType="props.criterion.type"
-          onKeyDown="(ev) => this.onKeyDown(ev, value_index)"
-          focused="value_index === state.focusedValueIndex"
+          onKeyDown="(ev) => this.onKeyDown(ev, item_index)"
+          focused="item_index === this.state.focusedValueIndex"
           onBlur.bind="onBlurInput"
           disableFormulas="props.disableFormulas"
         />
         <div
           class="o-dv-list-item-delete ms-2 o-button-icon"
-          t-on-click="() => this.removeItem(value_index)">
+          t-on-click="() => this.removeItem(item_index)">
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
       </div>
@@ -1933,10 +2123,10 @@
       <div class="o-cf-preview-description me-3 overflow-auto">
         <div class="o-cf-preview-ruletype">
           <div class="o-cf-preview-description-rule o-fw-bold text-truncate">
-            <t t-esc="description"/>
+            <t t-out="description"/>
           </div>
         </div>
-        <div class="o-cf-preview-range text-truncate" t-esc="cf.ranges"/>
+        <div class="o-cf-preview-range text-truncate" t-out="cf.ranges.join()"/>
       </div>
       <div class="o-cf-delete ms-auto">
         <div
@@ -1949,129 +2139,155 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-IconSets">
-    <div class="pb-2">
-      <div class="o-section-subtitle">Icons</div>
-      <div class="o-cf-iconsets d-flex flex-row">
-        <div
-          class="o-cf-iconset o-cf-clickable-icon d-flex flex-row justify-content-between border rounded"
-          t-foreach="['arrows', 'smiley', 'dots']"
-          t-as="iconSet"
-          t-key="iconSet"
-          t-on-click="() => store.setIconSet(iconSet)">
-          <div>
-            <t t-call="o-spreadsheet-Icon.{{icons[iconSets[iconSet].good].template}}"/>
-          </div>
-          <div>
-            <t t-call="o-spreadsheet-Icon.{{icons[iconSets[iconSet].neutral].template}}"/>
-          </div>
-          <div>
-            <t t-call="o-spreadsheet-Icon.{{icons[iconSets[iconSet].bad].template}}"/>
+  <t t-name="o-spreadsheet-IconSetRuleEditor">
+    <div class="o-cf-iconset-rule">
+      <div class="pb-2">
+        <div class="o-section-subtitle">Icons</div>
+        <div class="o-cf-iconsets d-flex flex-row">
+          <div
+            class="o-cf-iconset o-cf-clickable-icon d-flex flex-row justify-content-between border rounded"
+            t-foreach="['arrows', 'smiley', 'dots']"
+            t-as="iconSet"
+            t-key="iconSet"
+            t-on-click="() => this.props.store.setIconSet(iconSet)">
+            <div t-foreach="['good', 'neutral', 'bad']" t-as="iconType" t-key="iconType">
+              <t t-call="{{this.getIconTemplate(this.getIconName(iconSet, iconType))}}"/>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </t>
+      <div class="o-inflection mt-4">
+        <table class="w-100">
+          <tr>
+            <th class="o-cf-iconset-icons"/>
+            <th class="o-cf-iconset-text"/>
+            <th class="o-cf-iconset-operator"/>
+            <th/>
+            <th class="o-cf-iconset-type"/>
+          </tr>
 
-  <t t-name="o-spreadsheet-IconSetInflexionPointRow">
-    <tr>
-      <td>
-        <div t-on-click.stop="() => store.toggleMenu('iconSet-'+icon+'Icon')">
-          <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
-            <t t-call="o-spreadsheet-Icon.{{icons[iconValue].template}}"/>
-          </div>
-        </div>
-        <IconPicker
-          t-if="store.state.openedMenu === 'iconSet-'+icon+'Icon'"
-          onIconPicked="(i) => store.setIcon(icon, i)"
-        />
-      </td>
-      <td>When value is</td>
-      <td>
-        <Select
-          selectedValue="inflectionPointValue.operator"
-          name="'valueType'"
-          values="getIconSetOperatorSelectOptions()"
-          onChange.bind="(value) => store.setInflectionOperator(inflectionPoint, value)"
-        />
-      </td>
-      <td>
-        <div class="ms-2 me-2">
-          <input
-            type="text"
-            t-if="inflectionPointValue.type !== 'formula'"
-            class="o-input"
-            t-att-class="{ 'o-invalid': isInflectionPointInvalid(inflectionPoint) }"
-            t-att-value="rule[inflectionPoint].value"
-            t-on-change="(ev) => store.setInflectionValue(inflectionPoint, ev.target.value)"
-          />
-          <StandaloneComposer t-else="" t-props="getColorIconSetComposerProps(inflectionPoint)"/>
-        </div>
-      </td>
-      <td>
-        <Select
-          selectedValue="inflectionPointValue.type"
-          popoverClass="'o-icon-set-type-select-dropdown'"
-          name="'valueType'"
-          values="getThresholdTypeSelectOptions('iconSet')"
-          onChange.bind="(value) => store.setInflectionType(inflectionPoint, value)"
-        />
-      </td>
-    </tr>
-  </t>
-
-  <t t-name="o-spreadsheet-IconSetInflexionPoints">
-    <div class="o-inflection mt-4">
-      <table class="w-100">
-        <tr>
-          <th class="o-cf-iconset-icons"/>
-          <th class="o-cf-iconset-text"/>
-          <th class="o-cf-iconset-operator"/>
-          <th/>
-          <th class="o-cf-iconset-type"/>
-        </tr>
-        <t t-call="o-spreadsheet-IconSetInflexionPointRow">
-          <t t-set="iconValue" t-value="rule.icons.upper"/>
-          <t t-set="icon" t-value="'upper'"/>
-          <t t-set="inflectionPointValue" t-value="rule.upperInflectionPoint"/>
-          <t t-set="inflectionPoint" t-value="'upperInflectionPoint'"/>
-        </t>
-        <t t-call="o-spreadsheet-IconSetInflexionPointRow">
-          <t t-set="iconValue" t-value="rule.icons.middle"/>
-          <t t-set="icon" t-value="'middle'"/>
-          <t t-set="inflectionPointValue" t-value="rule.lowerInflectionPoint"/>
-          <t t-set="inflectionPoint" t-value="'lowerInflectionPoint'"/>
-        </t>
-        <tr>
-          <td>
-            <div t-on-click.stop="() => store.toggleMenu('iconSet-lowerIcon')">
-              <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
-                <t t-call="o-spreadsheet-Icon.{{icons[rule.icons.lower].template}}"/>
+          <!-- Upper -->
+          <tr>
+            <td>
+              <div t-on-click.stop="() => this.props.store.toggleMenu('iconSet-upperIcon')">
+                <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
+                  <t t-call="{{this.getIconTemplate(this.rule.icons.upper)}}"/>
+                </div>
               </div>
-            </div>
-            <IconPicker
-              t-if="store.state.openedMenu === 'iconSet-lowerIcon'"
-              onIconPicked="(icon) => store.setIcon('lower', icon)"
-            />
-          </td>
-          <td>Else</td>
-          <td/>
-          <td/>
-          <td/>
-        </tr>
-      </table>
-    </div>
-  </t>
-  <t t-name="o-spreadsheet-IconSetEditor">
-    <div class="o-cf-iconset-rule">
-      <t t-set="icons" t-value="store.icons"/>
-      <t t-set="iconSets" t-value="store.iconSets"/>
-      <t t-call="o-spreadsheet-IconSets"/>
-      <t t-call="o-spreadsheet-IconSetInflexionPoints"/>
+              <IconPicker
+                t-if="this.props.store.state.openedMenu === 'iconSet-upperIcon'"
+                onIconPicked="(i) => this.props.store.setIcon(('upper'), i)"
+              />
+            </td>
+            <td>When value is</td>
+            <td>
+              <Select
+                selectedValue="this.rule.upperInflectionPoint.operator"
+                name="'valueType'"
+                values="this.getIconSetOperatorSelectOptions()"
+                onChange.bind="(value) => this.props.store.setInflectionOperator('upperInflectionPoint', value)"
+              />
+            </td>
+            <td>
+              <div class="ms-2 me-2">
+                <input
+                  type="text"
+                  t-if="this.rule.upperInflectionPoint.type !== 'formula'"
+                  class="o-input"
+                  t-att-class="{ 'o-invalid': this.isInflectionPointInvalid('upperInflectionPoint') }"
+                  t-att-value="this.rule['upperInflectionPoint'].value"
+                  t-on-change="(ev) => this.props.store.setInflectionValue('upperInflectionPoint', ev.target.value)"
+                />
+                <StandaloneComposer
+                  t-else=""
+                  t-props="this.getColorIconSetComposerProps('upperInflectionPoint')"
+                />
+              </div>
+            </td>
+            <td>
+              <Select
+                selectedValue="this.rule.upperInflectionPoint.type"
+                popoverClass="'o-icon-set-type-select-dropdown'"
+                name="'valueType'"
+                values="this.getThresholdTypeSelectOptions()"
+                onChange.bind="(value) => this.props.store.setInflectionType('upperInflectionPoint', value)"
+              />
+            </td>
+          </tr>
+
+          <!-- Middle -->
+          <tr>
+            <td>
+              <div t-on-click.stop="() => this.props.store.toggleMenu('iconSet-middleIcon')">
+                <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
+                  <t t-call="{{this.getIconTemplate(this.rule.icons.middle)}}"/>
+                </div>
+              </div>
+              <IconPicker
+                t-if="this.props.store.state.openedMenu === 'iconSet-middleIcon'"
+                onIconPicked="(i) => this.props.store.setIcon('middle', i)"
+              />
+            </td>
+            <td>When value is</td>
+            <td>
+              <Select
+                selectedValue="this.rule.lowerInflectionPoint.operator"
+                name="'valueType'"
+                values="this.getIconSetOperatorSelectOptions()"
+                onChange.bind="(value) => this.props.store.setInflectionOperator('lowerInflectionPoint', value)"
+              />
+            </td>
+            <td>
+              <div class="ms-2 me-2">
+                <input
+                  type="text"
+                  t-if="this.rule.lowerInflectionPoint.type !== 'formula'"
+                  class="o-input"
+                  t-att-class="{ 'o-invalid': this.isInflectionPointInvalid('lowerInflectionPoint') }"
+                  t-att-value="this.rule['lowerInflectionPoint'].value"
+                  t-on-change="(ev) => this.props.store.setInflectionValue('lowerInflectionPoint', ev.target.value)"
+                />
+                <StandaloneComposer
+                  t-else=""
+                  t-props="this.getColorIconSetComposerProps('lowerInflectionPoint')"
+                />
+              </div>
+            </td>
+            <td>
+              <Select
+                selectedValue="this.rule.lowerInflectionPoint.type"
+                popoverClass="'o-icon-set-type-select-dropdown'"
+                name="'valueType'"
+                values="this.getThresholdTypeSelectOptions()"
+                onChange.bind="(value) => this.props.store.setInflectionType('lowerInflectionPoint', value)"
+              />
+            </td>
+          </tr>
+
+          <!-- Lower -->
+          <tr>
+            <td>
+              <div t-on-click.stop="() => this.props.store.toggleMenu('iconSet-lowerIcon')">
+                <div class="o-cf-icon-button o-cf-clickable-icon me-3 border rounded">
+                  <t t-call="{{this.getIconTemplate(this.rule.icons.lower)}}"/>
+                </div>
+              </div>
+              <IconPicker
+                t-if="this.props.store.state.openedMenu === 'iconSet-lowerIcon'"
+                onIconPicked="(icon) => this.props.store.setIcon('lower', icon)"
+              />
+            </td>
+            <td>Else</td>
+            <td/>
+            <td/>
+            <td/>
+          </tr>
+        </table>
+      </div>
       <div class="d-flex flex-row">
         <div
           class="o-button-link py-1 ps-0 o-cf-iconset-reverse d-flex align-items-center"
-          t-on-click="() => store.reverseIcons()">
+          t-on-click="() => this.props.store.reverseIcons()">
           <t t-call="o-spreadsheet-Icon.REFRESH"/>
           <div class="ms-1">Reverse icons</div>
         </div>
@@ -2079,65 +2295,64 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataBarEditor">
+  <t t-name="o-spreadsheet-DataBarRuleEditor">
     <div class="o-cf-data-bar-editor">
       <div class="o-section-subtitle">Color</div>
       <RoundColorPicker
-        currentColor="colorNumberToHex(rule.color)"
-        onColorPicked="(color) => store.updateDataBarColor(color)"
+        currentColor="this.colorNumberToHex(this.rule.color)"
+        onColorPicked="(color) => this.props.store.updateDataBarColor(color)"
         disableNoColor="true"
       />
       <div class="o-section-subtitle">Range of values</div>
       <SelectionInput
-        ranges="store.rangeValues"
+        ranges="this.props.store.rangeValues"
         class="'o-range'"
         isInvalid="false"
         hasSingleRange="true"
-        onSelectionChanged="(ranges) => store.onDataBarRangeUpdate(ranges)"
-        onSelectionConfirmed="() => store.onDataBarRangeChange()"
+        onSelectionChanged="(ranges) => this.props.store.onDataBarRangeUpdate(ranges)"
+        onSelectionConfirmed="() => this.props.store.onDataBarRangeChange()"
         required="false"
       />
     </div>
   </t>
 
   <t t-name="o-spreadsheet-ColorScaleRuleEditorThreshold">
-    <t t-set="fill_color">Fill Color</t>
     <div
-      t-attf-class="o-threshold o-threshold-{{thresholdType}} d-flex align-items-center flex-row">
-      <t t-if="thresholdType === 'midpoint'">
+      t-attf-class="o-threshold o-threshold-{{this.props.thresholdType}} d-flex align-items-center flex-row">
+      <t t-if="this.props.thresholdType === 'midpoint'">
         <Select
-          selectedValue="threshold?.type || 'none'"
-          class="'me-2'  + (threshold and threshold.type !== 'value' ? ' o-select-with-input' : '')"
+          selectedValue="this.threshold?.type || 'none'"
+          class="'me-2'  + (this.threshold and this.threshold.type !== 'value' ? ' o-select-with-input' : '')"
           name="'valueType'"
-          values="getThresholdTypeSelectOptions(thresholdType)"
-          onChange.bind="(value) => store.onMidpointChange(value)"
+          values="this.getThresholdTypeSelectOptions()"
+          onChange.bind="(value) => this.props.store.onMidpointChange(value)"
         />
       </t>
       <t t-else="">
         <Select
-          selectedValue="threshold?.type || 'none'"
-          class="'me-2'  + (threshold and threshold.type !== 'value' ? ' o-select-with-input' : '')"
+          selectedValue="this.threshold?.type || 'none'"
+          class="'me-2'  + (this.threshold and this.threshold.type !== 'value' ? ' o-select-with-input' : '')"
           name="'valueType'"
-          values="getThresholdTypeSelectOptions(thresholdType)"
-          onChange.bind="(value) => store.updateThresholdType(thresholdType, value)"
+          values="this.getThresholdTypeSelectOptions()"
+          onChange.bind="(value) => this.props.store.updateThresholdType(this.props.thresholdType, value)"
         />
       </t>
-      <div class="o-threshold-value me-2" t-if="threshold and threshold.type !== 'value'">
+      <div class="o-threshold-value me-2" t-if="this.threshold and this.threshold.type !== 'value'">
         <input
-          t-if="threshold.type !== 'formula'"
+          t-if="this.threshold.type !== 'formula'"
           type="text"
           class="o-input"
-          t-att-value="threshold.value"
-          t-on-change="(ev) => store.updateThresholdValue(thresholdType, ev.target.value)"
-          t-att-class="{ 'o-invalid': isValueInvalid(thresholdType), 'invisible': threshold === undefined }"
+          t-att-value="this.threshold.value"
+          t-on-change="(ev) => this.props.store.updateThresholdValue(this.props.thresholdType, ev.target.value)"
+          t-att-class="{ 'o-invalid': this.isValueInvalid(), 'invisible': this.threshold === undefined }"
         />
-        <StandaloneComposer t-else="" t-props="getColorScaleComposerProps(thresholdType)"/>
+        <StandaloneComposer t-else="" t-props="this.getColorScaleComposerProps()"/>
       </div>
-      <div t-attf-class="flex-shrink-0 ms-1 {{ threshold === undefined ? 'invisible' : ''}}">
+      <div t-attf-class="flex-shrink-0 ms-1 {{ this.threshold === undefined ? 'invisible' : ''}}">
         <RoundColorPicker
-          currentColor="getThresholdColor(threshold)"
-          onColorPicked="(color) => store.setColorScaleColor(thresholdType, color)"
-          title="fill_color"
+          currentColor="this.getThresholdColor(this.threshold)"
+          onColorPicked="(color) => this.props.store.setColorScaleColor(this.props.thresholdType, color)"
+          title.translate="Fill Color"
           disableNoColor="true"
         />
       </div>
@@ -2147,38 +2362,28 @@
   <t t-name="o-spreadsheet-ColorScaleRuleEditor">
     <div class="o-cf-color-scale-editor">
       <div class="o-section-subtitle">Preview</div>
-      <div class="o-cf-preview-display mb-4" t-attf-style="{{store.previewGradient}}">
+      <div class="o-cf-preview-display mb-4" t-attf-style="{{this.props.store.previewGradient}}">
         Preview text
       </div>
       <div class="o-section-subtitle">Minpoint</div>
-      <t t-call="o-spreadsheet-ColorScaleRuleEditorThreshold">
-        <t t-set="threshold" t-value="rule.minimum"/>
-        <t t-set="thresholdType" t-value="'minimum'"/>
-      </t>
+      <ColorScaleRuleEditorThreshold store="this.props.store" thresholdType="'minimum'"/>
       <div class="o-section-subtitle">MidPoint</div>
-      <t t-call="o-spreadsheet-ColorScaleRuleEditorThreshold">
-        <t t-set="threshold" t-value="rule.midpoint"/>
-        <t t-set="thresholdType" t-value="'midpoint'"/>
-      </t>
+      <ColorScaleRuleEditorThreshold store="this.props.store" thresholdType="'midpoint'"/>
       <div class="o-section-subtitle">MaxPoint</div>
-      <t t-call="o-spreadsheet-ColorScaleRuleEditorThreshold">
-        <t t-set="threshold" t-value="rule.maximum"/>
-        <t t-set="thresholdType" t-value="'maximum'"/>
-      </t>
+      <ColorScaleRuleEditorThreshold store="this.props.store" thresholdType="'maximum'"/>
     </div>
   </t>
 
   <t t-name="o-spreadsheet-ConditionalFormattingEditor">
     <div class="o-cf-editor">
-      <t t-set="state" t-value="store.state"/>
       <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
         <div class="o-selection-cf">
           <SelectionInput
-            ranges="state.ranges"
+            ranges="this.store.state.ranges"
             class="'o-range'"
-            isInvalid="store.isRangeValid"
-            onSelectionChanged="(ranges) => store.onRangeUpdate(ranges)"
-            onSelectionConfirmed="() => store.onRangeConfirmed()"
+            isInvalid="this.store.isRangeValid"
+            onSelectionChanged="(ranges) => this.store.onRangeUpdate(ranges)"
+            onSelectionConfirmed="() => this.store.onRangeConfirmed()"
             required="true"
           />
         </div>
@@ -2186,130 +2391,123 @@
       <Section class="'pb-0'" title.translate="Format rules">
         <div class="o-cf-type-selector">
           <BadgeSelection
-            choices="cfTypesValues"
-            onChange="(ruleType) => store.changeRuleType(ruleType)"
-            selectedValue="state.currentCFType"
+            choices="this.cfTypesValues"
+            onChange="(ruleType) => this.store.changeRuleType(ruleType)"
+            selectedValue="this.store.state.currentCFType"
           />
         </div>
       </Section>
       <Section>
-        <t t-if="state.currentCFType === 'CellIsRule'" t-call="o-spreadsheet-CellIsRuleEditor">
-          <t t-set="rule" t-value="state.rules.cellIs"/>
-        </t>
-        <t
-          t-if="state.currentCFType === 'ColorScaleRule'"
-          t-call="o-spreadsheet-ColorScaleRuleEditor">
-          <t t-set="rule" t-value="state.rules.colorScale"/>
-        </t>
-        <t t-if="state.currentCFType === 'IconSetRule'" t-call="o-spreadsheet-IconSetEditor">
-          <t t-set="rule" t-value="state.rules.iconSet"/>
-        </t>
-        <t t-if="state.currentCFType === 'DataBarRule'" t-call="o-spreadsheet-DataBarEditor">
-          <t t-set="rule" t-value="state.rules.dataBar"/>
-        </t>
+        <CellIsRuleEditor
+          t-if="this.store.state.currentCFType === 'CellIsRule'"
+          store="this.store"
+        />
+        <ColorScaleRuleEditor
+          t-if="this.store.state.currentCFType === 'ColorScaleRule'"
+          store="this.store"
+        />
+        <IconSetRuleEditor
+          t-if="this.store.state.currentCFType === 'IconSetRule'"
+          store="this.store"
+        />
+        <DataBarRuleEditor
+          t-if="this.store.state.currentCFType === 'DataBarRule'"
+          store="this.store"
+        />
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-button o-cf-cancel">Cancel</button>
+          <button t-on-click="this.onCancel" class="o-button o-cf-cancel">Discard</button>
           <button
-            t-on-click="onSave"
+            t-on-click="this.onSave"
             class="o-button primary o-cf-save"
-            t-att-disabled="state.errors.length !== 0">
+            t-att-disabled="this.store.state.errors.length !== 0">
             Save
           </button>
         </div>
       </Section>
       <Section>
-        <ValidationMessages messages="store.errorMessages" msgType="'error'"/>
+        <ValidationMessages messages="this.store.errorMessages" msgType="'error'"/>
       </Section>
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-CellIsRuleEditorPreview">
-    <div
-      class="o-cf-preview-display border"
-      t-attf-style="font-weight:{{currentStyle.bold ?'bold':'normal'}};
-                       text-decoration:{{getTextDecoration(currentStyle)}};
-                       font-style:{{currentStyle.italic?'italic':'normal'}};
-                       color:{{currentStyle.textColor || '#000'}};
-                       background-color:{{currentStyle.fillColor}};">
-      <t t-if="previewText" t-esc="previewText"/>
-      <t t-else="">Preview text</t>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-CellIsRuleEditor">
-    <t t-set="fill_color">Fill Color</t>
-    <t t-set="text_color">Text Color</t>
-    <t t-set="state" t-value="store.state"/>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
       <Select
         class="'o-cell-is-operator mb-2'"
-        values="store.cfCriterions"
-        selectedValue="state.rules.cellIs.operator"
-        onChange="(operator) => store.editOperator(operator)"
+        values="this.props.store.cfCriterions"
+        selectedValue="this.rule.operator"
+        onChange="(operator) => this.props.store.editOperator(operator)"
       />
 
       <t
-        t-if="store.criterionComponent"
-        t-component="store.criterionComponent"
-        t-key="state.rules.cellIs.operator"
-        criterion="store.genericCriterion"
-        onCriterionChanged="(rule) => store.onRuleValuesChanged(rule)"
-        autofocus="store.state.hasEditedCf"
+        t-if="this.props.store.criterionComponent"
+        t-component="this.props.store.criterionComponent"
+        t-key="this.rule.operator"
+        criterion="this.props.store.genericCriterion"
+        onCriterionChanged="(rule) => this.props.store.onRuleValuesChanged(rule)"
+        autofocus="this.props.store.state.hasEditedCf"
       />
 
       <div class="o-section-subtitle pt-3">Formatting style</div>
 
-      <t t-call="o-spreadsheet-CellIsRuleEditorPreview">
-        <t t-set="currentStyle" t-value="rule.style"/>
-      </t>
+      <div
+        class="o-cf-preview-display border"
+        t-attf-style="font-weight:{{this.rule.style.bold ?'bold':'normal'}};
+                       text-decoration:{{this.getTextDecoration(this.rule.style)}};
+                       font-style:{{this.rule.style.italic?'italic':'normal'}};
+                       color:{{this.rule.style.textColor || '#000'}};
+                       background-color:{{this.rule.style.fillColor}};">
+        <t t-if="previewText" t-out="previewText"/>
+        <t t-else="">Preview text</t>
+      </div>
       <div class="o-sidePanel-tools d-flex">
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Bold"
-          t-att-class="{active:rule.style.bold}"
-          t-on-click="() => store.toggleStyle('bold')">
+          t-att-class="{active:this.rule.style.bold}"
+          t-on-click="() => this.props.store.toggleStyle('bold')">
           <t t-call="o-spreadsheet-Icon.BOLD"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Italic"
-          t-att-class="{active:rule.style.italic}"
-          t-on-click="() => store.toggleStyle('italic')">
+          t-att-class="{active:this.rule.style.italic}"
+          t-on-click="() => this.props.store.toggleStyle('italic')">
           <t t-call="o-spreadsheet-Icon.ITALIC"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Underline"
-          t-att-class="{active:rule.style.underline}"
-          t-on-click="(ev) => store.toggleStyle('underline', ev)">
+          t-att-class="{active:this.rule.style.underline}"
+          t-on-click="(ev) => this.props.store.toggleStyle('underline', ev)">
           <t t-call="o-spreadsheet-Icon.UNDERLINE"/>
         </div>
         <div
           class="o-hoverable-button o-menu-item-button"
           title="Strikethrough"
-          t-att-class="{active:rule.style.strikethrough}"
-          t-on-click="(ev) => store.toggleStyle('strikethrough', ev)">
+          t-att-class="{active:this.rule.style.strikethrough}"
+          t-on-click="(ev) => this.props.store.toggleStyle('strikethrough', ev)">
           <t t-call="o-spreadsheet-Icon.STRIKE"/>
         </div>
         <ColorPickerWidget
-          currentColor="rule.style.textColor || '#000000'"
-          toggleColorPicker="() => store.toggleMenu('cellIsRule-textColor')"
-          showColorPicker="state.openedMenu === 'cellIsRule-textColor'"
-          onColorPicked="(color) => store.setColor('textColor', color)"
-          title="text_color"
+          currentColor="this.rule.style.textColor || '#000000'"
+          toggleColorPicker="() => this.props.store.toggleMenu('cellIsRule-textColor')"
+          showColorPicker="this.props.store.state.openedMenu === 'cellIsRule-textColor'"
+          onColorPicked="(color) => this.props.store.setColor('textColor', color)"
+          title.translate="Text Color"
           icon="'o-spreadsheet-Icon.TEXT_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
         />
         <div class="o-divider border-end"/>
         <ColorPickerWidget
-          currentColor="rule.style.fillColor"
-          toggleColorPicker="() => store.toggleMenu('cellIsRule-fillColor')"
-          showColorPicker="state.openedMenu === 'cellIsRule-fillColor'"
-          onColorPicked="(color) => store.setColor('fillColor', color)"
-          title="fill_color"
+          currentColor="this.rule.style.fillColor"
+          toggleColorPicker="() => this.props.store.toggleMenu('cellIsRule-fillColor')"
+          showColorPicker="this.props.store.state.openedMenu === 'cellIsRule-fillColor'"
+          onColorPicked="(color) => this.props.store.setColor('fillColor', color)"
+          title.translate="Fill Color"
           icon="'o-spreadsheet-Icon.FILL_COLOR'"
           class="'o-hoverable-button o-menu-item-button'"
         />
@@ -2321,7 +2519,7 @@
     <div class="o-section" t-att-class="props.class">
       <t t-if="props.slots.title or props.title">
         <div class="o-section-title">
-          <t t-esc="props.title"/>
+          <t t-out="props.title"/>
           <t t-slot="title"/>
         </div>
       </t>
@@ -2365,7 +2563,7 @@
             t-att-checked="choice.value === props.selectedValue"
             t-on-change="() => props.onChange(choice.value)"
           />
-          <t t-esc="choice.label"/>
+          <t t-out="choice.label"/>
         </label>
       </t>
     </div>
@@ -2382,7 +2580,7 @@
           <span class="collapsor-arrow">
             <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
           </span>
-          <div class="ps-2" t-esc="props.title"/>
+          <div class="ps-2" t-out="props.title"/>
         </div>
       </div>
       <Collapse isCollapsed="state.isCollapsed">
@@ -2431,7 +2629,7 @@
         t-on-change="onChange"
         t-on-click.stop=""
       />
-      <span class="text-truncate" t-if="props.label" t-esc="props.label"/>
+      <span class="text-truncate" t-if="props.label" t-out="props.label"/>
     </label>
   </t>
 
@@ -2440,11 +2638,105 @@
       <t t-foreach="props.choices" t-as="choice" t-key="choice.value">
         <button
           class="flex-grow-1 o-button"
-          t-esc="choice.label"
           t-att-class="{ 'selected': props.selectedValue === choice.value }"
           t-on-click="() => props.onChange(choice.value)"
-          t-att-data-id="choice.value"
-        />
+          t-att-data-id="choice.value">
+          <t t-if="choice.icon" t-call="{{choice.icon}}"/>
+          <t t-out="choice.label"/>
+        </button>
+      </t>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-ColumnStatsPanel">
+    <div class="o-column-stats-panel">
+      <t t-if="store.hasSingleColumn">
+        <Section>
+          <div class="d-flex justify-content-between align-items-center o-panel-header mb-1">
+            <span class="o-fw-bold w-100 o-column-stats-title" t-out="columnLabel"/>
+            <span
+              class="p-1 o-row-switcher"
+              data-test-id="previous-column-button"
+              title="Switch to previous column"
+              t-on-click="store.selectPreviousColumn">
+              <t t-call="o-spreadsheet-Icon.ANGLE_LEFT"/>
+            </span>
+            <span
+              class="p-1 o-row-switcher"
+              title="Switch to next column"
+              data-test-id="next-column-button"
+              t-on-click="store.selectNextColumn">
+              <t t-call="o-spreadsheet-Icon.ANGLE_RIGHT"/>
+            </span>
+          </div>
+          <div class="mt-3">
+            <div class="o-sidePanel-label mb-1">Rows to ignore</div>
+            <NumberInput
+              value="store.ignoredRows"
+              class="'o-ignored-rows-input'"
+              min="0"
+              onChange.bind="updateIgnoredRows"
+            />
+          </div>
+        </Section>
+        <SidePanelCollapsible title.translate="Data visualization" isInitiallyCollapsed="false">
+          <t t-set-slot="content">
+            <Section class="'pt-0'">
+              <BadgeSelection
+                choices="charts"
+                onChange.bind="switchChart"
+                selectedValue="state.currentChart"
+              />
+              <t t-if="shouldShowChart">
+                <div class="o-column-stats-chart mx-2 mt-2">
+                  <canvas class="w-100 h-100" t-ref="columnStatsChart"/>
+                </div>
+              </t>
+              <t t-else="">
+                <div class="o-column-stats-no-data text-muted mt-4" t-out="chartErrorMessage"/>
+              </t>
+            </Section>
+          </t>
+        </SidePanelCollapsible>
+        <SidePanelCollapsible title.translate="General statistics" isInitiallyCollapsed="false">
+          <t t-set-slot="content">
+            <Section class="'o-column-global-stats d-flex flex-column gap-2 pt-0'">
+              <t t-foreach="store.statItems" t-as="stat" t-key="stat.name">
+                <div class="o-column-stats-row d-flex justify-content-between">
+                  <span class="text-muted" t-out="stat.name"/>
+                  <span class="o-fw-bold" t-att-data-test-id="stat.name" t-out="stat.value"/>
+                </div>
+              </t>
+            </Section>
+          </t>
+        </SidePanelCollapsible>
+        <SidePanelCollapsible title.translate="Frequency" isInitiallyCollapsed="true">
+          <t t-set-slot="content">
+            <div class="mx-4 mb-2">
+              <BadgeSelection
+                choices="frequencyOrders"
+                onChange.bind="switchFrequencyOrder"
+                selectedValue="state.currentFrequencyOrder"
+              />
+            </div>
+            <div class="o-column-global-stats d-flex flex-column mx-4 mb-2">
+              <t t-foreach="valueFrequencies" t-as="value" t-key="value.value">
+                <div
+                  class="o-column-stats-row o-column-frequencies-row d-flex justify-content-between"
+                  t-on-mouseenter="() => this.highlightFrequencyPositions(value.positions)"
+                  t-on-mouseleave="() => this.clearHighlights()">
+                  <span class="frequency-label text-muted" t-out="value.value"/>
+                  <span class="frequency-value o-fw-bold" t-out="value.count"/>
+                </div>
+              </t>
+            </div>
+          </t>
+        </SidePanelCollapsible>
+      </t>
+      <t t-else="">
+        <div class="o-column-stats-empty text-muted p-4">
+          Select a single column to view statistics.
+        </div>
       </t>
     </div>
   </t>
@@ -2689,8 +2981,8 @@
             onColorPicked="(color) => this.onGroupColorChanged(group_index, color)"
           />
           <span class="ps-2">
-            <span t-esc="'(#' + (group_index +1 ) + ')'" class="o-text-bolder pe-1"/>
-            <span class="text-muted" t-esc="group.label"/>
+            <span t-out="'(#' + (group_index +1 ) + ')'" class="o-text-bolder pe-1"/>
+            <span class="text-muted" t-out="group.label"/>
           </span>
         </div>
       </t>
@@ -2725,8 +3017,8 @@
                 onColorPicked="(color) => this.onGroupColorChanged(item_index, color)"
               />
               <span class="ps-2">
-                <span t-esc="'(#' + (item_index +1 ) + ')'" class="o-text-bolder pe-1"/>
-                <span class="text-muted" t-esc="item.label"/>
+                <span t-out="'(#' + (item_index +1 ) + ')'" class="o-text-bolder pe-1"/>
+                <span class="text-muted" t-out="item.label"/>
               </span>
             </div>
           </t>
@@ -2843,22 +3135,13 @@
 
   <t t-name="o-spreadsheet-ScatterConfigPanel">
     <div>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        canChangeDatasetOrientation="canChangeDatasetOrientation"
-        datasetOrientation="datasetOrientation"
-        onFlipAxis.bind="setDatasetOrientation"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged.bind="onLabelRangeChanged"
-        onSelectionConfirmed.bind="onLabelRangeConfirmed"
-        options="this.getLabelRangeOptions()"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
+        getLabelRangeOptions.bind="getLabelRangeOptions"
       />
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -2884,7 +3167,7 @@
   <t t-name="o-spreadsheet-PieChartDesignPanel">
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <ChartLegend t-props="props"/>
+        <ChartLegend t-props="props" isDisabled="isLegendDisabled"/>
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
@@ -2898,6 +3181,25 @@
         />
       </t>
     </GeneralDesignEditor>
+
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Pie Slice">
+      <t t-set-slot="content">
+        <Section class="'py-0'">
+          <Select
+            class="'o-pie-slice-selector'"
+            selectedValue="state.index.toString()"
+            values="pieSliceOptions"
+            onChange="(value) => this.updateEditedValues(value)"
+          />
+        </Section>
+        <Section class="'py-4'">
+          <div class="d-flex align-items-center">
+            <span class="o-section-title mb-0 pe-2">Series color</span>
+            <RoundColorPicker currentColor="sliceColor" onColorPicked.bind="updateSliceColor"/>
+          </div>
+        </Section>
+      </t>
+    </SidePanelCollapsible>
   </t>
 
   <t t-name="o-spreadsheet-ChartPanel">
@@ -2920,27 +3222,31 @@
       </div>
 
       <t t-set="definition" t-value="getChartDefinition(this.chartId)"/>
-      <div class="o-panel-content" t-ref="panelContent">
-        <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
-          <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
-          <t
-            t-component="chartPanel.configuration"
-            definition="definition"
-            chartId="chartId"
-            updateChart.bind="updateChart"
-            canUpdateChart.bind="canUpdateChart"
-            t-key="chartId + definition.type"
-          />
+      <div class="o-panel-content h-100 overflow-y-hidden">
+        <div class="h-100" t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
+          <div class="h-100 overflow-y-auto">
+            <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
+            <t
+              t-component="chartPanel.configuration"
+              definition="definition"
+              chartId="chartId"
+              updateChart.bind="updateChart"
+              canUpdateChart.bind="canUpdateChart"
+              t-key="chartId + definition.type"
+            />
+          </div>
         </div>
-        <div t-att-class="store.panel !== 'design' ? 'd-none' : ''">
-          <t
-            t-component="chartPanel.design"
-            definition="definition"
-            chartId="chartId"
-            updateChart.bind="updateChart"
-            canUpdateChart.bind="canUpdateChart"
-            t-key="chartId + definition.type"
-          />
+        <div class="h-100" t-att-class="store.panel !== 'design' ? 'd-none' : ''">
+          <div class="h-100 overflow-y-auto">
+            <t
+              t-component="chartPanel.design"
+              definition="definition"
+              chartId="chartId"
+              updateChart.bind="updateChart"
+              canUpdateChart.bind="canUpdateChart"
+              t-key="chartId + definition.type"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -2998,22 +3304,13 @@
           onChange.bind="onUpdateCumulative"
         />
       </Section>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        canChangeDatasetOrientation="canChangeDatasetOrientation"
-        datasetOrientation="datasetOrientation"
-        onFlipAxis.bind="setDatasetOrientation"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged.bind="onLabelRangeChanged"
-        onSelectionConfirmed.bind="onLabelRangeConfirmed"
-        options="this.getLabelRangeOptions()"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
+        getLabelRangeOptions.bind="getLabelRangeOptions"
       />
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -3022,21 +3319,15 @@
 
   <t t-name="o-spreadsheet-HierarchicalChartConfigPanel">
     <div>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        title.translate="Hierarchy"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged.bind="onLabelRangeChanged"
-        onSelectionConfirmed.bind="onLabelRangeConfirmed"
-        options="this.getLabelRangeOptions()"
-        title.translate="Values"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
+        getLabelRangeOptions.bind="getLabelRangeOptions"
+        dataSeriesTitle.translate="Hierarchy"
+        labelRangeTitle.translate="Values"
       />
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -3095,24 +3386,14 @@
         updateChart="props.updateChart"
       />
 
-      <ChartDataSeries
-        ranges="dataRanges"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        maxNumberOfUsedRanges="maxNumberOfUsedRanges"
-        canChangeDatasetOrientation="canChangeDatasetOrientation"
-        datasetOrientation="datasetOrientation"
-        onFlipAxis.bind="setDatasetOrientation"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged="(ranges) => this.onLabelRangeChanged(ranges)"
-        onSelectionConfirmed="() => this.onLabelRangeConfirmed()"
-        options="this.getLabelRangeOptions()"
-        title.translate="Territories"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
+        getLabelRangeOptions.bind="getLabelRangeOptions"
+        labelRangeTitle.translate="Territories"
       />
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -3155,96 +3436,100 @@
         </Section>
 
         <Section title.translate="Thresholds">
-          <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
-            <t t-set="sectionRule" t-value="state.sectionRule"/>
-          </t>
-        </Section>
-
-        <ChartErrorSection t-if="designErrorMessages.length" messages="designErrorMessages"/>
-      </t>
-    </SidePanelCollapsible>
-  </t>
-
-  <t t-name="o-spreadsheet-GaugeChartColorSectionTemplate">
-    <div class="o-gauge-color-set">
-      <table>
-        <tr>
-          <th class="o-gauge-color-set-colorPicker"/>
-          <th class="o-gauge-color-set-text"/>
-          <th class="o-gauge-color-set-operator"/>
-          <th class="o-gauge-color-set-value">Value</th>
-          <th class="o-gauge-color-set-type">Type</th>
-        </tr>
-
-        <t t-call="o-spreadsheet-GaugeChartColorSectionTemplateRow">
-          <t t-set="sectionColor" t-value="sectionRule.colors.lowerColor"/>
-          <t t-set="sectionType" t-value="'lowerColor'"/>
-          <t t-set="inflectionPoint" t-value="'lowerInflectionPoint'"/>
-          <t t-set="isInvalid" t-value="isLowerInflectionPointInvalid"/>
-          <t t-set="inflectionPointName" t-value="'lowerInflectionPoint'"/>
-        </t>
+          <div class="o-gauge-color-set">
+            <table>
+              <tr>
+                <th class="o-gauge-color-set-colorPicker"/>
+                <th class="o-gauge-color-set-text"/>
+                <th class="o-gauge-color-set-operator"/>
+                <th class="o-gauge-color-set-value">Value</th>
+                <th class="o-gauge-color-set-type">Type</th>
+              </tr>
 
-        <t t-call="o-spreadsheet-GaugeChartColorSectionTemplateRow">
-          <t t-set="sectionColor" t-value="sectionRule.colors.middleColor"/>
-          <t t-set="sectionType" t-value="'middleColor'"/>
-          <t t-set="inflectionPoint" t-value="'upperInflectionPoint'"/>
-          <t t-set="isInvalid" t-value="isUpperInflectionPointInvalid"/>
-          <t t-set="inflectionPointName" t-value="'upperInflectionPoint'"/>
-        </t>
+              <tr>
+                <td>
+                  <RoundColorPicker
+                    currentColor="state.sectionRule.colors.lowerColor"
+                    onColorPicked="(color) => this.updateSectionColor('lowerColor', color)"
+                  />
+                </td>
+                <td>When value is</td>
+                <td class="pe-2">
+                  <Select
+                    selectedValue="state.sectionRule['lowerInflectionPoint'].operator"
+                    name="'operatorType'"
+                    values="inflectionPointOperators"
+                    onChange.bind="(value) => this.updateSectionRuleOperator('lowerInflectionPoint', value)"
+                  />
+                </td>
+                <td class="pe-2">
+                  <StandaloneComposer t-props="getGaugeInflectionComposerProps('lowerColor')"/>
+                </td>
+                <td>
+                  <Select
+                    selectedValue="state.sectionRule['lowerInflectionPoint'].type"
+                    name="'valueType'"
+                    values="inflectionPointTypes"
+                    onChange.bind="(value) => this.updateSectionRulePointType('lowerInflectionPoint', value)"
+                  />
+                </td>
+              </tr>
 
-        <tr>
-          <td>
-            <RoundColorPicker
-              currentColor="sectionRule.colors.upperColor"
-              onColorPicked="(color) => this.updateSectionColor('upperColor', color)"
-            />
-          </td>
-          <td>Else</td>
-          <td/>
-          <td/>
-          <td/>
-        </tr>
-      </table>
-    </div>
-  </t>
+              <tr>
+                <td>
+                  <RoundColorPicker
+                    currentColor="state.sectionRule.colors.middleColor"
+                    onColorPicked="(color) => this.updateSectionColor('middleColor', color)"
+                  />
+                </td>
+                <td>When value is</td>
+                <td class="pe-2">
+                  <Select
+                    selectedValue="state.sectionRule['upperInflectionPoint'].operator"
+                    name="'operatorType'"
+                    values="inflectionPointOperators"
+                    onChange.bind="(value) => this.updateSectionRuleOperator('upperInflectionPoint', value)"
+                  />
+                </td>
+                <td class="pe-2">
+                  <StandaloneComposer t-props="getGaugeInflectionComposerProps('middleColor')"/>
+                </td>
+                <td>
+                  <Select
+                    selectedValue="state.sectionRule['upperInflectionPoint'].type"
+                    name="'valueType'"
+                    values="inflectionPointTypes"
+                    onChange.bind="(value) => this.updateSectionRulePointType('upperInflectionPoint', value)"
+                  />
+                </td>
+              </tr>
 
-  <t t-name="o-spreadsheet-GaugeChartColorSectionTemplateRow">
-    <tr>
-      <td>
-        <RoundColorPicker
-          currentColor="sectionColor"
-          onColorPicked="(color) => this.updateSectionColor(sectionType, color)"
-        />
-      </td>
-      <td>When value is</td>
-      <td class="pe-2">
-        <t t-set="below">below</t>
-        <t t-set="belowOrEqualTo">below or equal to</t>
-        <Select
-          selectedValue="sectionRule[inflectionPoint].operator"
-          name="'operatorType'"
-          values="inflectionPointOperators"
-          onChange.bind="(value) => this.updateSectionRuleOperator(inflectionPoint, value)"
-        />
-      </td>
-      <td class="pe-2">
-        <StandaloneComposer t-props="getGaugeInflectionComposerProps(sectionType)"/>
-      </td>
-      <td>
-        <Select
-          selectedValue="sectionRule[inflectionPoint].type"
-          name="'valueType'"
-          values="inflectionPointTypes"
-          onChange.bind="(value) => this.updateSectionRulePointType(inflectionPoint, value)"
-        />
-      </td>
-    </tr>
+              <tr>
+                <td>
+                  <RoundColorPicker
+                    currentColor="state.sectionRule.colors.upperColor"
+                    onColorPicked="(color) => this.updateSectionColor('upperColor', color)"
+                  />
+                </td>
+                <td>Else</td>
+                <td/>
+                <td/>
+                <td/>
+              </tr>
+            </table>
+          </div>
+        </Section>
+
+        <ChartErrorSection t-if="designErrorMessages.length" messages="designErrorMessages"/>
+      </t>
+    </SidePanelCollapsible>
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
         ranges="[this.getDataRange()]"
+        dataSetStyles="{}"
         onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
         onSelectionConfirmed="() => this.updateDataRange()"
         hasSingleRange="true"
@@ -3278,7 +3563,7 @@
                 currentColor="item.color"
                 onColorPicked="(color) => this.updateFunnelItemColor(item_index, color)"
               />
-              <span class="ps-2" t-esc="item.label"/>
+              <span class="ps-2" t-out="item.label"/>
             </div>
           </t>
         </Section>
@@ -3310,13 +3595,13 @@
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props">
       <t t-set-slot="general-extension" t-slot-scope="scope">
-        <t t-set="index" t-value="scope.index"/>
+        <t t-set="dataSetId" t-value="scope.dataSetId"/>
         <Section class="'pt-0 o-series-type-selection'" title.translate="Serie type">
           <RadioSelection
             choices="seriesTypeChoices"
-            selectedValue="getDataSeriesType(index)"
+            selectedValue="getDataSeriesType(dataSetId)"
             name="'seriesType'"
-            onChange="(type) => this.updateDataSeriesType(index, type)"
+            onChange="(type) => this.updateDataSeriesType(dataSetId, type)"
           />
         </Section>
       </t>
@@ -3362,15 +3647,12 @@
     <t t-set="selectedChartProperties" t-value="getSelectedChartSubtypeProperties()"/>
     <Section title.translate="Chart type">
       <div class="position-relative">
-        <select
-          class="o-input o-type-selector"
+        <div
+          class="o-select o-input o-type-selector"
           t-ref="selectRef"
           t-on-pointerdown.prevent="onPointerDown">
-          <option
-            t-esc="selectedChartProperties.displayName"
-            t-att-value="selectedChartProperties.chartSubtype"
-          />
-        </select>
+          <t t-out="selectedChartProperties.displayName"/>
+        </div>
         <div class="o-type-selector-preview position-absolute">
           <t t-call="{{selectedChartProperties.preview}}"/>
         </div>
@@ -3379,11 +3661,11 @@
     <Popover t-if="state.popoverProps" t-props="state.popoverProps">
       <div
         t-ref="popoverRef"
-        class="o-chart-select-popover px-3 pb-4 bg-white"
+        class="o-chart-select-popover px-3 pb-4"
         t-att-style="state.popoverStyle">
         <t t-foreach="categories" t-as="category" t-key="category">
           <t t-if="chartTypeByCategories[category]">
-            <h5 class="my-3" t-esc="category_value"/>
+            <h5 class="my-3" t-out="category_value"/>
             <div class="d-flex flex-wrap">
               <t
                 t-foreach="chartTypeByCategories[category]"
@@ -3842,22 +4124,14 @@
 
   <t t-name="o-spreadsheet-CalendarChartConfigPanel">
     <div>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        maxNumberOfUsedRanges="1"
-        canChangeDatasetOrientation="false"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged.bind="onLabelRangeChanged"
-        onSelectionConfirmed.bind="onLabelRangeConfirmed"
-        options="this.getLabelRangeOptions()"
-        title.translate="Date range"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
+        getLabelRangeOptions.bind="getLabelRangeOptions"
+        labelRangeTitle.translate="Date range"
       />
 
       <Section title.translate="Fields to group by">
@@ -3983,8 +4257,8 @@
   <t t-name="o-spreadsheet-SeriesWithAxisDesignEditor">
     <SeriesDesignEditor t-props="props">
       <t t-set-slot="data-series-extension" t-slot-scope="scope">
-        <t t-set="index" t-value="scope.index"/>
-        <t t-slot="general-extension" index="index"/>
+        <t t-set="dataSetId" t-value="scope.dataSetId"/>
+        <t t-slot="general-extension" dataSetId="dataSetId"/>
         <Section class="'pt-0 pb-0'">
           <Section
             class="'pt-0 px-0 o-vertical-axis-selection'"
@@ -3992,9 +4266,9 @@
             title.translate="Vertical axis">
             <RadioSelection
               choices="axisChoices"
-              selectedValue="getDataSerieAxis(index)"
+              selectedValue="getDataSerieAxis(dataSetId)"
               name="'axis'"
-              onChange="(value) => this.updateDataSeriesAxis(index, value)"
+              onChange="(value) => this.updateDataSeriesAxis(dataSetId, value)"
             />
           </Section>
           <Section
@@ -4002,13 +4276,13 @@
             t-if="!props.definition.horizontal"
             title.translate="Trend line">
             <t t-set="showTrendLineLabel">Show trend line</t>
-            <t t-set="trend" t-value="getTrendLineConfiguration(index)"/>
+            <t t-set="trend" t-value="getTrendLineConfiguration(dataSetId)"/>
             <t t-set="trendType" t-value="getTrendType(trend)"/>
             <Checkbox
               name="'showTrendLine'"
               label="showTrendLineLabel"
               value="trend !== undefined and trend.display"
-              onChange="(display) => this.toggleDataTrend(index, display)"
+              onChange="(display) => this.toggleDataTrend(dataSetId, display)"
             />
             <div t-if="trend !== undefined and trend.display">
               <div class="d-flex py-2">
@@ -4018,7 +4292,7 @@
                     selectedValue="trendType"
                     values="trendOptions"
                     class="'trend-type-selector'"
-                    onChange="(value) => this.onChangeTrendType(index, value)"
+                    onChange="(value) => this.onChangeTrendType(dataSetId, value)"
                   />
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'trailingMovingAverage'">
@@ -4027,24 +4301,24 @@
                     value="trend.window || this.defaultWindowSize"
                     class="'w-100 trend-window-input'"
                     min="2"
-                    onChange="(value) => this.onChangeMovingAverageWindow(index, value)"
+                    onChange="(value) => this.onChangeMovingAverageWindow(dataSetId, value)"
                   />
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
                   <span class="o-section-subtitle">Degree</span>
                   <Select
                     selectedValue="trend.order.toString()"
-                    values="getPolynomialDegrees(index)"
+                    values="getPolynomialDegrees(dataSetId)"
                     class="'trend-order-input'"
-                    onChange="(value) => this.onChangePolynomialDegree(index, value)"
+                    onChange="(value) => this.onChangePolynomialDegree(dataSetId, value)"
                   />
                 </div>
               </div>
               <div class="d-flex align-items-center">
                 <span class="o-section-subtitle my-0 pe-2">Trend line color</span>
                 <RoundColorPicker
-                  currentColor="getTrendLineColor(index)"
-                  onColorPicked="(ev) => this.updateTrendLineColor(index, ev)"
+                  currentColor="getTrendLineColor(dataSetId)"
+                  onColorPicked="(ev) => this.updateTrendLineColor(dataSetId, ev)"
                 />
               </div>
             </div>
@@ -4059,7 +4333,7 @@
       <t t-set-slot="content">
         <Section class="'pt-0 pb-0'">
           <Select
-            selectedValue="state.index.toString()"
+            selectedValue="state.dataSetId"
             values="selectOptions"
             class="'data-series-selector'"
             onChange.bind="this.updateEditedSeries"
@@ -4082,11 +4356,35 @@
             />
           </Section>
         </Section>
-        <t t-slot="data-series-extension" index="state.index"/>
+        <t t-slot="data-series-extension" dataSetId="state.dataSetId"/>
       </t>
     </SidePanelCollapsible>
   </t>
 
+  <t t-name="o-spreadsheet-ChartRangeDataSource">
+    <ChartDataSeries
+      ranges="this.getDataSeriesRanges()"
+      dataSetStyles="this.props.definition.dataSetStyles"
+      onSelectionChanged.bind="onDataSeriesRangesChanged"
+      onSelectionConfirmed.bind="onDataSeriesConfirmed"
+      onSelectionReordered.bind="onDataSeriesReordered"
+      onSelectionRemoved.bind="onDataSeriesRemoved"
+      maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+      datasetOrientation="datasetOrientation"
+      canChangeDatasetOrientation="canChangeDatasetOrientation"
+      onFlipAxis.bind="setDatasetOrientation"
+      title="props.dataSeriesTitle"
+    />
+    <ChartLabelRange
+      range="this.getLabelRange()"
+      isInvalid="isLabelInvalid"
+      onSelectionChanged.bind="onLabelRangeChanged"
+      onSelectionConfirmed.bind="onLabelRangeConfirmed"
+      options="this.getLabelRangeOptions()"
+      title="props.labelRangeTitle"
+    />
+  </t>
+
   <t t-name="o-spreadsheet.PieHoleSize">
     <Section class="'pt-0'" title.translate="Center radius">
       <div class="d-flex flex-row">
@@ -4104,12 +4402,15 @@
 
   <t t-name="o-spreadsheet-ChartLegend">
     <Section class="'pt-0'" title.translate="Legend position">
-      <Select
-        selectedValue="props.definition.legendPosition ?? 'top'"
-        values="legendValues"
-        class="'o-chart-legend-position'"
-        onChange.bind="this.updateLegendPosition"
-      />
+      <div t-if="!props.isDisabled" class="mb-2">
+        <Select
+          selectedValue="props.definition.legendPosition ?? 'top'"
+          values="legendValues"
+          class="'o-chart-legend-position'"
+          onChange.bind="this.updateLegendPosition"
+        />
+      </div>
+      <div t-else="" title="No legend available">None</div>
     </Section>
   </t>
 
@@ -4147,23 +4448,13 @@
 
   <t t-name="o-spreadsheet-GenericChartConfigPanel">
     <div>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        maxNumberOfUsedRanges="maxNumberOfUsedRanges"
-        datasetOrientation="datasetOrientation"
-        canChangeDatasetOrientation="canChangeDatasetOrientation"
-        onFlipAxis.bind="setDatasetOrientation"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged.bind="onLabelRangeChanged"
-        onSelectionConfirmed.bind="onLabelRangeConfirmed"
-        options="this.getLabelRangeOptions()"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        getLabelRangeOptions.bind="getLabelRangeOptions"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
       />
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -4199,11 +4490,19 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartDataSourceComponent">
+    <t
+      t-component="DataSourceComponent"
+      t-props="this.props"
+      dataSource="this.props.definition.dataSource"
+    />
+  </t>
+
   <t t-name="o-spreadsheet.ChartDataSeries">
     <Section class="'o-data-series'">
       <t t-set-slot="title">
         <div class="d-flex flex-row justify-content-between">
-          <t t-esc="title"/>
+          <t t-out="title"/>
           <div t-if="props.onFlipAxis and props.canChangeDatasetOrientation" class="d-flex">
             <span
               t-if="props.datasetOrientation !== 'rows'"
@@ -4244,7 +4543,7 @@
           class="color-scale-container d-flex justify-content-end"
           t-on-click.stop="onPointerDown">
           <span class="color-scale-label">
-            <t t-esc="currentColorScaleLabel"/>
+            <t t-out="currentColorScaleLabel"/>
           </span>
           <div
             class="color-scale-preview w-100"
@@ -4256,7 +4555,7 @@
           </span>
         </div>
         <Popover t-if="state.popoverProps" t-props="state.popoverProps">
-          <table t-ref="popoverRef" class="bg-white" t-att-style="state.popoverStyle">
+          <table t-ref="popoverRef" t-att-style="state.popoverStyle">
             <tr
               class="color-scale-container custom-color-scale-container"
               t-on-click="() => this.onColorScaleChange('custom')">
@@ -4274,7 +4573,7 @@
                 t-on-click="() => this.onColorScaleChange(colorScale.value)"
                 t-att-title="colorScale.label">
                 <td class="p-1 text-end">
-                  <t t-esc="colorScale.label"/>
+                  <t t-out="colorScale.label"/>
                 </td>
                 <td class="w-100 p-1">
                   <div
@@ -4351,6 +4650,59 @@
       placeholder.translate="Add a Title"
       defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
+    <Section
+      t-if="!isCategoricalAxis"
+      class="'pt-0 o-axis-bounds-section'"
+      title.translate="Axis range">
+      <div class="d-flex">
+        <div class="w-50">
+          <span class="o-section-subtitle my-0">Minimum</span>
+          <DateInput
+            t-if="isTimeAxis"
+            class="'o-input w-100 time-axis-min-input'"
+            value="axisMin"
+            onChange.bind="updateTimeAxisMin"
+          />
+          <NumberInput
+            t-else=""
+            class="'o-input w-100 axis-min-input'"
+            value="axisMin"
+            onChange.bind="updateAxisMin"
+            placeholder.translate="Lower bound value"
+          />
+        </div>
+        <div class="w-50 ms-3">
+          <span class="o-section-subtitle my-0">Maximum</span>
+          <DateInput
+            t-if="isTimeAxis"
+            class="'o-input w-100 time-axis-max-input'"
+            value="axisMax"
+            onChange.bind="updateTimeAxisMax"
+          />
+          <NumberInput
+            t-else=""
+            class="'o-input w-100 axis-max-input'"
+            value="axisMax"
+            onChange.bind="updateAxisMax"
+            placeholder.translate="Upper bound value"
+          />
+        </div>
+      </div>
+    </Section>
+    <Section class="'pt-0'" t-if="!isCategoricalAxis" title.translate="Gridlines">
+      <Checkbox
+        className="'o-axis-grid-major'"
+        label="majorGridLabel"
+        value="isMajorGridEnabled"
+        onChange.bind="toggleMajorGrid"
+      />
+      <Checkbox
+        className="'o-axis-grid-minor'"
+        label="minorGridLabel"
+        value="isMinorGridEnabled"
+        onChange.bind="toggleMinorGrid"
+      />
+    </Section>
   </t>
 
   <t t-name="o-spreadsheet-BarChartDesignPanel">
@@ -4397,22 +4749,12 @@
           onChange.bind="onUpdateStacked"
         />
       </Section>
-      <ChartDataSeries
-        ranges="this.getDataSeriesRanges()"
-        onSelectionChanged.bind="onDataSeriesRangesChanged"
-        onSelectionConfirmed.bind="onDataSeriesConfirmed"
-        onSelectionReordered.bind="onDataSeriesReordered"
-        onSelectionRemoved.bind="onDataSeriesRemoved"
-        canChangeDatasetOrientation="canChangeDatasetOrientation"
-        datasetOrientation="datasetOrientation"
-        onFlipAxis.bind="setDatasetOrientation"
-      />
-      <ChartLabelRange
-        range="this.getLabelRange()"
-        isInvalid="isLabelInvalid"
-        onSelectionChanged.bind="onLabelRangeChanged"
-        onSelectionConfirmed.bind="onLabelRangeConfirmed"
-        options="this.getLabelRangeOptions()"
+      <ChartDataSourceComponent
+        chartId="props.chartId"
+        definition="props.definition"
+        updateChart="props.updateChart"
+        canUpdateChart="props.canUpdateChart"
+        onErrorMessagesChanged.bind="onErrorMessagesChanged"
       />
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -4509,7 +4851,7 @@
             spellcheck="false"
             placeholder="e.g. A1:A2"
             t-on-input="(ev) => this.onInputChanged(range.id, ev)"
-            t-on-focus="() => this.focus(range.id)"
+            t-on-click="() => this.focus(range.id)"
             t-on-keydown="onKeydown"
             t-att-value="range.xc"
             t-att-style="getColor(range)"
@@ -4518,7 +4860,7 @@
               'o-disabled-ranges' : range.disabled and !range.isFocused,
               'o-focused' : range.isFocused,
               'o-invalid border-danger position-relative': isInvalid || !range.isValidRange,
-              'text-decoration-underline': range.xc and range.isFocused and state.mode === 'select-range'
+              'text-decoration-underline': range.xc and range.isFocused and store.mode === 'select-range'
             }"
             t-ref="{{range.isFocused ? 'focusedInput' : 'unfocusedInput' + range_index}}"
           />
@@ -4546,13 +4888,12 @@
         <button class="o-button o-add-selection" t-if="canAddRange" t-on-click="addEmptyInput">
           Add range
         </button>
-        <div class="ms-auto" t-if="store.hasFocus">
+        <div class="ms-auto" t-if="store.hasFocus or isResettable">
           <button class="o-button o-selection-ko" t-if="isResettable" t-on-click="reset">
             Reset
           </button>
           <button
             class="o-button primary ms-2 o-selection-ok"
-            t-if="store.hasFocus"
             t-att-disabled="!isConfirmable"
             t-on-click="confirm">
             Confirm
@@ -4573,14 +4914,15 @@
       class="o-input o-select"
       t-att-class="props.class"
       t-att-name="props.name"
+      t-att-title="props.title"
       t-on-pointerdown="onMouseDown"
       t-on-keydown="onKeyDown"
-      t-esc="selectedLabel"
+      t-out="selectedLabel"
     />
 
     <Popover t-if="state.isPopoverOpen" t-props="popoverProps">
       <div
-        class="o-select-dropdown bg-white overflow-hidden py-2"
+        class="o-select-dropdown overflow-hidden py-2"
         t-att-class="props.popoverClass"
         t-ref="dropdownRef">
         <t t-foreach="props.values" t-as="value" t-key="value_index">
@@ -4590,7 +4932,7 @@
               'o-active': value.value === activeValue
             }"
             t-att-data-id="value.value"
-            t-esc="value.label"
+            t-out="value.label"
             t-att-title="value.label"
             t-on-click="() => this.onOptionClick(value.value)"
             t-on-mouseenter="() => this.onOptionHover(value.value)"
@@ -4645,7 +4987,7 @@
               t-att-style="cell.style"
               t-att-class="{ o_missing_value: cell.isMissing }"
               t-on-click="() => props.onCellClicked(cell.formula)">
-              <t t-esc="cell.value"/>
+              <t t-out="cell.value"/>
             </th>
           </t>
         </tr>
@@ -4655,13 +4997,13 @@
               t-att-style="row.style"
               t-att-class="{ o_missing_value: row.isMissing }"
               t-on-click="() => props.onCellClicked(row.formula)">
-              <t t-esc="row.value"/>
+              <t t-out="row.value"/>
             </th>
             <t t-foreach="tableData.values" t-as="col" t-key="col_index">
               <td
                 t-att-class="{ o_missing_value: col[row_index].isMissing }"
                 t-on-click="() => props.onCellClicked(col[row_index].formula)">
-                <t t-esc="col[row_index].value"/>
+                <t t-out="col[row_index].value"/>
               </td>
             </t>
           </tr>
@@ -4675,7 +5017,7 @@
     <span
       class="o-menu-item-button"
       title="Paint Format"
-      t-att-class="{active: isActive}"
+      t-att-class="{'active': isActive, 'o-disabled': env.model.getters.isCurrentSheetLocked()}"
       t-attf-class="{{props.class}}"
       t-on-click="togglePaintFormat"
       t-on-dblclick="onDblClick">
@@ -4721,17 +5063,17 @@
           t-on-change="setValueFromInput"
           t-ref="inputNumber"
         />
-        <t t-esc="props.valueIcon"/>
+        <t t-out="props.valueIcon"/>
         <span>
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
       </div>
       <Popover t-if="dropdown.isOpen" t-props="popoverProps">
-        <div class="o-text-options bg-white" t-on-click.stop="" t-ref="numberList">
+        <div class="o-text-options" t-on-click.stop="" t-ref="numberList">
           <t t-foreach="props.valueList" t-as="value" t-key="value">
             <div t-att-data-size="value" t-on-click="() => this.setValueFromList(value)">
-              <t t-esc="value"/>
-              <t t-esc="props.valueIcon"/>
+              <t t-out="value"/>
+              <t t-out="props.valueIcon"/>
             </div>
           </t>
         </div>
@@ -4739,12 +5081,46 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-NamedRangeSelector">
+    <div
+      class="o-named-range-selector d-flex align-items-center rounded p-1 my-1"
+      t-ref="namedRangeSelectorRef"
+      t-att-class="{
+          'selected': topBarToolStore.isActive,
+        }">
+      <TextInput
+        t-key="selectionKey"
+        value="inputValue"
+        onChange.bind="changeInputValue"
+        onInput.bind="onInput"
+        selectContentOnFocus="true"
+        onFocused.bind="onInputFocused"
+        onBlur.bind="onInputBlur"
+        resetOnBlur="true"
+      />
+      <div class="o-hoverable-button" t-on-click.stop="openDropdown">
+        <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
+      </div>
+    </div>
+
+    <MenuPopover
+      t-if="topBarToolStore.isActive"
+      disableKeyboardNavigation="true"
+      anchorRect="menuState.anchorRect"
+      menuItems="menuState.menuItems"
+      onClose="() => {}"
+      popoverPositioning="'bottom-left'"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-Menu-Popover">
-    <Popover t-if="props.menuItems" t-props="popoverProps">
+    <Popover t-if="menuItems.length" t-props="popoverProps">
       <div
         t-ref="menu"
-        class="o-menu-wrapper bg-white"
-        t-on-mouseover="() => this.onMouseOverMainMenu()">
+        tabIndex="-1"
+        class="o-menu-wrapper"
+        t-on-mouseover="() => this.onMouseOverMainMenu()"
+        t-on-keydown="this.onKeydown">
         <Menu t-props="menuProps"/>
       </div>
       <MenuPopover
@@ -4759,6 +5135,8 @@
         menuId="props.menuId"
         onMouseOver.bind="onMouseOverChildMenu"
         width="props.width"
+        autoSelectFirstItem="subMenu.autoSelectFirstItem"
+        onKeyboardNavigation.bind="this.onKeydown"
       />
     </Popover>
   </t>
@@ -4766,28 +5144,28 @@
   <t t-name="o-spreadsheet-Menu">
     <div
       t-ref="menu"
-      class="o-menu bg-white"
+      class="o-menu"
       t-att-style="menuStyle"
       t-on-scroll="props.onScroll"
       t-on-wheel.stop=""
       t-on-pointerdown.prevent=""
-      t-on-click.stop=""
-      t-on-contextmenu.prevent="">
-      <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
+      t-on-click.stop="">
+      <t t-foreach="props.menuItems" t-as="menuItem" t-key="menuItem_index">
         <div t-if="menuItem === 'separator'" class="o-separator border-bottom"/>
         <t t-else="">
           <t t-set="isMenuRoot" t-value="isRoot(menuItem)"/>
           <t t-set="isMenuEnabled" t-value="isEnabled(menuItem)"/>
           <div
+            tabIndex="-1"
             t-att-title="getName(menuItem)"
             t-att-data-name="menuItem.id"
             t-on-click="(ev) => this.onClickMenu(menuItem, ev)"
             t-on-auxclick="(ev) => this.onClickMenu(menuItem, ev)"
-            t-on-mouseover="(ev) => this.props.onMouseOver?.(menuItem, ev)"
-            t-on-mouseenter="(ev) => this.onMouseEnter?.(menuItem, ev)"
-            t-on-mouseleave="(ev) => this.onMouseLeave?.(menuItem)"
+            t-on-mouseenter="(ev) => this.props.onMouseEnter?.(menuItem, ev)"
+            t-on-mouseleave="(ev) => this.props.onMouseLeave?.(menuItem)"
+            t-on-keydown="(ev) => props.onKeyDown?.(ev)"
             class="o-menu-item d-flex justify-content-between align-items-center"
-            t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': props.isActive?.(menuItem)}"
+            t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': menuItem.id === props.hoveredMenuId}"
             t-att-style="getColor(menuItem)">
             <div class="d-flex w-100">
               <div
@@ -4796,24 +5174,20 @@
                 t-att-style="getIconColor(menuItem)">
                 <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
               </div>
-              <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
-              <t t-set="description" t-value="menuItem.description(env)"/>
+              <div class="o-menu-item-name align-middle text-truncate" t-out="getName(menuItem)"/>
+              <t t-set="description" t-value="menuItem.description(env) or menuItem.shortcut"/>
               <div
                 t-if="description"
                 class="o-menu-item-description ms-auto text-truncate"
-                t-esc="description"
+                t-out="description"
               />
               <t t-set="secondaryIcon" t-value="menuItem.secondaryIcon(env)"/>
               <div
-                t-if="isMenuRoot"
-                class="o-menu-item-root ms-auto align-items-center d-flex"
-                t-call="o-spreadsheet-Icon.CARET_RIGHT"
-              />
-              <div
-                t-elif="secondaryIcon"
-                class="o-menu-item-root ms-auto align-items-center d-flex"
-                t-call="{{secondaryIcon}}"
-              />
+                t-if="isMenuRoot || secondaryIcon"
+                class="o-menu-item-root ms-auto align-items-center d-flex gap-1">
+                <t t-if="secondaryIcon" t-call="{{secondaryIcon}}"/>
+                <t t-if="isMenuRoot" t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
+              </div>
             </div>
           </div>
         </t>
@@ -4823,10 +5197,11 @@
 
   <t t-name="o-spreadsheet-LinkEditor">
     <div
-      class="o-link-editor bg-white rounded"
-      t-on-click.stop="() => this.menu.isOpen=false"
+      class="o-link-editor rounded h-100"
+      t-on-scroll.stop=""
+      t-on-wheel.stop=""
       t-on-keydown="onKeyDown">
-      <div class="o-section">
+      <div class="o-section mb-4 h-100">
         <div class="o-section-title">Text</div>
         <div class="d-flex">
           <input
@@ -4834,20 +5209,25 @@
             title="Link label"
             placeholder="e.g. 'Link label'"
             class="o-input"
-            t-model="link.label"
+            t-model="this.state.label"
           />
         </div>
 
         <div class="o-section-title mt-3">Link</div>
-        <div class="o-link-url">
-          <t t-if="link.isUrlEditable">
+        <div
+          class="o-link-url"
+          t-ref="urlInputContainer"
+          tabindex="-1"
+          t-on-keydown="this.onInputKeyDown">
+          <t t-if="this.state.isUrlEditable">
             <input
               class="o-input"
               type="text"
               placeholder="e.g. 'http://www.odoo.com'"
               title="Link URL"
               t-ref="urlInput"
-              t-model="link.url"
+              t-model="this.state.url"
+              t-on-input="this.computeLinks"
             />
           </t>
           <t t-else="">
@@ -4855,32 +5235,52 @@
               type="text"
               class="o-input"
               title="Link URL"
-              t-att-value="getUrlRepresentation(link)"
+              t-att-value="this.getUrlRepresentation(this.state)"
               disabled="1"
             />
           </t>
-          <button t-if="link.url" t-on-click="removeLink" class="o-remove-url o-button-icon">
-            ✖
-          </button>
           <button
-            t-if="!link.url"
-            t-on-click.stop="openMenu"
-            class="o-special-link o-button-icon bg-white"
-            t-ref="linkEditorMenuButton">
-            <t t-call="o-spreadsheet-Icon.LIST"/>
+            t-if="this.state.url"
+            t-on-click="this.removeLink"
+            class="o-remove-url o-button-icon"
+            t-translation="off">
+            <i class="fa fa-times"/>
           </button>
         </div>
       </div>
-      <MenuPopover
-        t-if="menu.isOpen"
-        anchorRect="menuButtonRect"
-        menuItems="menuItems"
-        onMenuClicked="(ev) => this.onSpecialLink(ev)"
-        onClose="() => this.menu.isOpen=false"
-      />
+
+      <div class="suggestions border rounded user-select-none" t-ref="suggestionList">
+        <t t-foreach="this.state.linksByCategory" t-as="proposalCategory" t-key="proposalCategory">
+          <t t-set="categoryTitle" t-value="proposalCategory"/>
+          <t t-set="proposals" t-value="proposalCategory_value"/>
+          <div class="o-section my-1">
+            <div class="o-section-title ps-2" t-esc="categoryTitle"/>
+            <div
+              t-foreach="proposals"
+              t-as="proposal"
+              t-key="categoryTitle + proposal_index"
+              t-att-data-index="proposal.index"
+              class="suggestion-item ps-3 d-flex align-items-center justify-content-start"
+              t-att-class="{ 'selected' : proposal.index === this.state.selectedIndex }"
+              t-on-click="proposal.onSelect"
+              t-on-dblclick="this.save">
+              <span class="me-1" t-if="proposal.icon" t-call="{{proposal.icon}}"/>
+              <span class="text-truncate" t-esc="proposal.text"/>
+            </div>
+          </div>
+        </t>
+        <div
+          t-if="!this.state.linksList.length"
+          class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 text-muted fst-italic">
+          No results
+        </div>
+      </div>
       <div class="o-buttons">
-        <button t-on-click="cancel" class="o-button o-cancel me-2">Cancel</button>
-        <button t-on-click="save" class="o-button primary o-save" t-att-disabled="!link.url">
+        <button t-on-click="this.cancel" class="o-button o-cancel me-2">Discard</button>
+        <button
+          t-on-click="this.save"
+          class="o-button primary o-save"
+          t-att-disabled="!this.state.url">
           Confirm
         </button>
       </div>
@@ -4888,7 +5288,7 @@
   </t>
 
   <t t-name="o-spreadsheet-LinkDisplay">
-    <div class="o-link-tool d-flex align-items-center bg-white rounded">
+    <div class="o-link-tool d-flex align-items-center rounded">
       <!-- t-key to prevent owl from re-using the previous img element when the link changes.
     The wrong/previous image would be displayed while the new one loads -->
       <img
@@ -4903,7 +5303,7 @@
         target="_blank"
         t-on-click.prevent="openLink"
         t-att-title="link.url">
-        <t t-esc="getUrlRepresentation(link)"/>
+        <t t-out="getUrlRepresentation(link)"/>
       </a>
       <a
         t-else=""
@@ -4911,7 +5311,7 @@
         t-on-click.prevent="openLink"
         t-on-auxclick.prevent="openLink"
         t-att-title="getUrlRepresentation(link)">
-        <t t-esc="getUrlRepresentation(link)"/>
+        <t t-out="getUrlRepresentation(link)"/>
       </a>
       <span
         t-if="!env.model.getters.isReadonly()"
@@ -4931,7 +5331,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Icon.CLEAR_AND_RELOAD">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M14 15H4V3h6v3h4M4 1.5A1.5 1.5 0 0 0 2.5 3v12a1.5 1.5 0 0 0 1.4 1.5h10a1.5 1.5 0 0 0 1.5-1.5V5l-3.5-3.5
@@ -4940,7 +5340,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.EXPORT_XLSX">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M0 1a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1m4-4V1H1v3m7 0V1H5v3M4 8V5H1v3m7 0V5H5v3m-3.5 2h2v4h3v-1.5l3 2.5-3 2.5V16h-5m9.5-6h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1m1.7 7 1.3-2 1.3 2h2l-2-3 2-3h-2L14 13l-1.3-2h-2l2 3-2 3"
@@ -4948,7 +5348,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.OPEN_READ_ONLY">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M13 7V5c0-2.5-2-4-4-4S5 2.5 5 5v2h-.5C3.5 7 3 7.5 3 8.5v7c0 1 .5 1.5 1.5 1.5h9c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5m-7-2c0-1.5 1-2.5 2.5-2.5s2.5 1 2.5 2.5v2h-5V5m1 7a1.5 1.5 0 0 1 3 0 1.5 1.5 0 0 1-3 0"
@@ -4956,7 +5356,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.OPEN_DASHBOARD">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M13 2.07A8 8 0 1 0 15.93 5L14.2 6A6 6 0 1 1 12 3.8m-2 3.47a2 2 0 1 0 .73.73l5.5-5.5-.6-.6M9.3 3.8a.6.6 0 1 1-.01-.01m1.81.51a.6.6 0 1 1-.01-.01M7.5 4.3a.6.6 0 1 1-.01-.01M5.9 5.4a.6.6 0 1 1-.01-.01M4.8 6.9a.6.6 0 1 1-.01-.01m8.71.61a.6.6 0 1 0-.01 0"
@@ -4964,7 +5364,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.OPEN_READ_WRITE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M13 7V5a4 4 0 0 0-8 0v2h-.5C3.5 7 3 7.5 3 8.5v7c0 1 .5 1.5 1.5 1.5h9c1 0 1.5-.5 1.5-1.5v-7c0-1-.5-1.5-1.5-1.5m-7-2a2 2 0 0 1 5 0v2h-5m1 5a1.5 1.5 0 0 1 3 0 1.5 1.5 0 0 1-3 0m6 3.5h-9v-7h9"
@@ -4972,7 +5372,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.IMPORT_XLSX">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M9 10a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1m4-4v-3h-3v3m7 0v-3h-3v3m-1 4v-3h-3v3m7 0v-3h-3v3M.5 9h2v4h3v-1.5l3 2.5-3 2.5V15h-5M1 0h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1m1.7 7L4 5l1.3 2h2l-2-3 2-3h-2L4 3 2.7 1h-2l2 3-2 3"
@@ -4980,7 +5380,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNDO">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M5.43 9.43 8 12H1V5l2.96 2.958A8.29 8.29 0 0 1 9.32 6c3.46 0 6.42 2.11 7.68 5l-2 1c-.94-2.39-3.13-3.92-5.68-4a6.57 6.57 0 0 0-3.89 1.43"
@@ -4988,7 +5388,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.REDO">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M12.57 9.43 10 12h7V5l-2.96 2.96A8.29 8.29 0 0 0 8.68 6C5.22 6 2.26 8.11 1 11l2 1c.94-2.39 3.13-3.92 5.68-4a6.58 6.58 0 0 1 3.89 1.43"
@@ -5006,7 +5406,7 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.CUT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M3 2v2l4.5 5-1.2 1.3c-.4-.2-.8-.3-1.3-.3-1.7 0-3 1.3-3 3s1.3 3 3 3 3-1.3 3-3c0-.5-.1-.9-.3-1.3L9 10.4l1.3 1.3c-.2.4-.3.8-.3 1.3 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3c-.5 0-.9.1-1.3.3L10.4 9 15 4.4V2h-.4L9 7.6 3.4 2H3Zm2 12.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5Zm9.5-1.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5.7-1.5 1.5-1.5 1.5.7 1.5 1.5ZM9 8.5c.3 0 .5.2.5.5s-.2.5-.5.5-.5-.2-.5-.5.2-.5.5-.5"
@@ -5014,7 +5414,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.COPY_AS_IMAGE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="m 14,15 v 1.5 H 2.5147386 c -0.5522847,0 -1,-0.447715 -1,-1 V 3 H 3 V 14 c 0,0.552285 0.4477153,1 1,1 h 10"
@@ -5027,7 +5427,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PASTE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M14.5 2.5H11C10.7 1.6 10 1 9 1s-1.5.5-2 1.5H3.5C2.5 2.5 2 3 2 4v11c0 1 .5 1.5 1.5 1.5h11c1 0 1.5-.5 1.5-1.5V4c0-1-.5-1.5-1.5-1.5Zm-4.75.75c0 .5-.34.75-.75.75s-.75-.34-.75-.75.34-.75.75-.75.75.34.75.75ZM14.5 15h-11V4H5v2.5h8V4h1.5v11"
@@ -5035,7 +5435,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.CLEAR">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M1.5 15a.75.75 0 0 0 0 1.5h15a.75.75 0 0 0 0-1.5M5.3 12.75c.1.1.3.2.5.2h4c.2 0 .4-.1.5-.2l5.5-5.5c.2-.3.2-.6 0-.8l-4.4-4.4c-.3-.2-.6-.2-.8 0l-4.8 4.8c-2.7 2.9-3.1 2.8-2.4 4M7 7.25l3.6 3.6-1 1-3.6.1-1.8-1.9"
@@ -5043,7 +5443,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.FREEZE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 17.5h16a1 1 0 0 0 1-1v-15a1 1 0 0 0-1-1h-15a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1m9-10.5v4.5H6V7m0 9v-3.5h4.5V16M5 16H3.5L5 14.5M5 13l-3 3v-1.5l3-3M2 13v-2l3-3v2m-3-.5v-2l3-3v2M2 6V4l2-2h1v1m11 13h-4.5v-3.5H16m0-1h-4.5V7H16m0-5v4h-4.5V2m-1 4H6V2h4.5"
@@ -5051,7 +5451,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNFREEZE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 17.5h16a1 1 0 0 0 1-1v-15a1 1 0 0 0-1-1h-15a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1M5 6H2V2h3m0 9.5H2V7h3m0 9H2v-3.5h3M10.5 7v4.5H6V7m0 9v-3.5h4.5V16m5.5 0h-4.5v-3.5H16m0-1h-4.5V7H16m0-5v4h-4.5V2m-1 4H6V2h4.5"
@@ -5064,7 +5464,7 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.FORMULA">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M7 14.25q-.25.75-.75 1.25T5 16q-.75 0-1.5-.5Q3 15 3 14.25q0-.5.25-.75t.75-.25q.25 0 .25.75v.5H5q.5 0 .5-.5l1.25-6.5H5V6h2l.5-2.25q.25-.75.75-1.25T9.5 2q1 0 1.5.5t.5 1q0 .5-.25.75t-.5.25q-.5 0-.75-.25t-.25-.5V3H9.5q-.25 0-.5.5L8.5 6H10v1.5H8.25m1.25 1H15v1h-4l2 2-2 2h4v1H9V14l2.5-2.5L9 9"
@@ -5072,7 +5472,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.HIDE_ROW">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v3.5h14V2H2v9h14V7H2v9h14v-3.5H2M1 12l4-5h2l-4 5m2 0 4-5h2l-4 5m2 0 4-5h2l-4 5m2 0 4-5v4"
@@ -5080,7 +5480,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNHIDE_ROW">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M17.5 16a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2zH16v-3.5H2V16h14V2H2v3.5h14"
@@ -5088,7 +5488,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.HIDE_COL">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M16 .5A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2A1.5 1.5 0 0 1 2 .5h14V2h-3.5v14H16V2H7v14h4V2H2v14h3.5V2M6 1l5 4v2L6 3m0 2 5 4v2L6 7m0 2 5 4v2l-5-4"
@@ -5096,7 +5496,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNHIDE_COL">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M16 .5A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2A1.5 1.5 0 0 1 2 .5h14V2h-3.5v14H16V2H2V16h3.5V2"
@@ -5104,7 +5504,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_ROW">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v3.5h14V2H2v9h14V7H2v9h14v-3.5H2"
@@ -5112,7 +5512,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_ROW_BEFORE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M3.5 14.5A1.5 1.5 0 0 0 5 16h10a1.5 1.5 0 0 0 1.5-1.5v-7h-3V5h3V1.5A1.5 1.5 0 0 0 15 0H5a1.5 1.5 0 0 0-1.5 1.5v2h-3V9h3M15 12.5v2H5v-2M15 9v2H5V9m10-7.5v2H5v-2M12 5v2.5H2V5"
@@ -5120,7 +5520,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_ROW_AFTER">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M3.5 1.5A1.5 1.5 0 0 1 5 0h10a1.5 1.5 0 0 1 1.5 1.5v7h-3V11h3v3.5A1.5 1.5 0 0 1 15 16H5a1.5 1.5 0 0 1-1.5-1.5v-2h-3V7h3M15 3.5v-2H5v2M15 7V5H5v2m10 7.5v-2H5v2m7-3.5V8.5H2V11"
@@ -5128,7 +5528,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_COL">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h3.5V2H2h5v14h4V2H2h10.5v14H16V2H2"
@@ -5136,7 +5536,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_COL_AFTER">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.5 3A1.5 1.5 0 0 0 1 4.5v10A1.5 1.5 0 0 0 2.5 16h7v-3H12v3h3.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 15.5 3h-2V0H8v3M4.5 14.5h-2v-10h2m3.5 10H6v-10h2m7.5 10h-2v-10h2m-3.5 7H9.5v-10H12"
@@ -5144,7 +5544,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_COL_BEFORE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M15.5 3A1.5 1.5 0 0 1 17 4.5v10a1.5 1.5 0 0 1-1.5 1.5h-7v-3H6v3H2.5A1.5 1.5 0 0 1 1 14.5v-10A1.5 1.5 0 0 1 2.5 3h2V0H10v3m3.5 11.5h2v-10h-2m-3.5 10h2v-10h-2m-7.5 10h2v-10h-2m3.5 7h2.5v-10H6"
@@ -5152,7 +5552,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CELL">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v14a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2H2v14h14V2H2"
@@ -5160,7 +5560,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CELL_SHIFT_DOWN">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M5 2.5A1.5 1.5 0 0 1 6.5 1h10A1.5 1.5 0 0 1 18 2.5v13a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5 15.5v-5h5.25v-3H5m11.5-2v-3h-4.75v3m-1.5 0v-3H6.5v3m10 5v-3h-4.75v3m-1.5 5v-3H6.5v3m10 0v-3h-4.75v3M0 12.5l2.5 4 2.5-4H3.25v-6h-1.5v6"
@@ -5168,7 +5568,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_CELL_SHIFT_RIGHT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.5 5A1.5 1.5 0 0 0 1 6.5v10A1.5 1.5 0 0 0 2.5 18h13a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 15.5 5h-5v5.25h-3V5m-2 11.5h-3v-4.75h3m0-1.5h-3V6.5h3m5 10h-3v-4.75h3m5-1.5h-3V6.5h3m0 10h-3v-4.75h3M12.5 0l4 2.5-4 2.5V3.25h-6v-1.5h6"
@@ -5176,7 +5576,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.DELETE_CELL_SHIFT_UP">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M5 2.5A1.5 1.5 0 0 1 6.5 1h10A1.5 1.5 0 0 1 18 2.5v13a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5 15.5v-5h5.25v-3H5m11.5-2v-3h-4.75v3m-1.5 0v-3H6.5v3m10 5v-3h-4.75v3m-1.5 5v-3H6.5v3m10 0v-3h-4.75v3M0 10l2.5-4L5 10H3.25v6h-1.5v-6"
@@ -5184,7 +5584,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.DELETE_CELL_SHIFT_LEFT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.5 5A1.5 1.5 0 0 0 1 6.5v10A1.5 1.5 0 0 0 2.5 18h13a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 15.5 5h-5v5.25h-3V5m-2 11.5h-3v-4.75h3m0-1.5h-3V6.5h3m5 10h-3v-4.75h3m5-1.5h-3V6.5h3m0 10h-3v-4.75h3M10 0 6 2.5 10 5V3.25h6v-1.5h-6"
@@ -5212,7 +5612,7 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_DROPDOWN">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M6 3.5a5 5.5 0 0 0 0 11h6a5 5.5 0 0 0 0-11H6V5h6a3.5 4 0 0 1 0 8H6a3.5 4 0 0 1 0-8m5 6 3-3H8"
@@ -5220,14 +5620,14 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.INSERT_SHEET">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M17.5 5.5V16a1.5 1.5 0 0 1-1.5 1.5H2A1.5 1.5 0 0 1 .5 16V2A1.5 1.5 0 0 1 2 .5h10.5M2 5.5h3.5V2H2m5.25 3.5h3.5V2h-3.5M2 10.75h3.5v-3.5H2m5.25 3.5h3.5v-3.5h-3.5m5.25 3.5H16v-3.5h-3.5M2 16h3.5v-3.5H2M7.25 16h3.5v-3.5h-3.5M12.5 16H16v-3.5h-3.5"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PAINT_FORMAT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M9,0 L1,0 C0.45,0 0,0.45 0,1 L0,4 C0,4.55 0.45,5 1,5 L9,5 C9.55,5 10,4.55 10,4 L10,3 L11,3 L11,6 L4,6 L4,14 L6,14 L6,8 L13,8 L13,2 L10,2 L10,1 C10,0.45 9.55,0 9,0 Z"
@@ -5236,7 +5636,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.CONDITIONAL_FORMAT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M12.25.5c2 0 3.5 1.5 3.5 3.5v6.5c0 .5 0 2-2 2h-2.5v4c0 .5-.5 1-1 1h-2.5c-.5 0-1-.5-1-1v-4h-2.5c-1 0-2-1-2-2V.5m12 3a1.5 1.5 0 0 0-1.5-1.5h-3v2h-1.5V2h-1v4h-2V2h-1.5v8.5h10.5m-12-3h12.5V9H2.25"
@@ -5244,7 +5644,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.CLEAR_FORMAT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.12 4.05 7.28 9.2l-2.43 5.3h2.5l1.64-3.58 4.59 4.58 1.27-1.27L3.4 2.77 2.12 4.05ZM5.67 2.5l2 2h1.76l-.55 1.21 1.71 1.71 1.34-2.92h3.92v-2H5.67"
@@ -5252,7 +5652,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BOLD">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M13.5 6.5C13.5 4.57 11.93 3 10 3H4.5v12h6.25c1.79 0 3.25-1.46 3.25-3.25 0-1.3-.77-2.41-1.87-2.93.83-.58 1.37-1.44 1.37-2.32M9.5 5c.83 0 1.5.67 1.5 1.5S10.33 8 9.5 8h-2V5h2m-2 8v-3H10c.83 0 1.5.67 1.5 1.5S10.83 13 10 13H7.5"
@@ -5260,12 +5660,12 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ITALIC">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path fill="currentColor" d="M7 3v2h2.58l-3.66 8H3v2h8v-2H8.42l3.66-8H15V3"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNDERLINE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M9 15c2.76 0 5-2.24 5-5V3h-2v7c0 1.75-1.5 3-3 3s-3-1.242-3-3V3H4v7c0 2.76 2.24 5 5 5Zm-6 1v2h12v-2H3"
@@ -5273,7 +5673,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.STRIKE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M4.89 6.06c0-.46.1-.87.3-1.25.2-.38.46-.7.84-.97s.78-.47 1.28-.62A5.71 5.71 0 0 1 8.93 3c.61 0 1.16.08 1.65.25.5.17.92.4 1.27.7.35.3.62.66.81 1.07.19.41.28.87.28 1.36h-2.26a1.85 1.85 0 0 0-.11-.64 1.26 1.26 0 0 0-.33-.51 1.53 1.53 0 0 0-.56-.33A2.42 2.42 0 0 0 8.89 4.8c-.3 0-.55.03-.77.1a1.52 1.52 0 0 0-.54.27 1.14 1.14 0 0 0-.43.9c0 .36.18.66.55.91l.06.04C8.02 7.19 8.5 7.5 9 8H6s-.79-.62-.82-.69c-.19-.36-.29-.77-.29-1.25M16 9H2v2h7.22c.14.05.3.1.41.15.28.12.5.26.65.38.16.13.26.27.32.42.06.15.08.33.08.51 0 .18-.03.34-.1.49a1.02 1.02 0 0 1-.31.39 1.6 1.6 0 0 1-.53.26 2.71 2.71 0 0 1-.76.09c-.33 0-.62-.03-.89-.1a1.8 1.8 0 0 1-.68-.31 1.45 1.45 0 0 1-.44-.56c-.11-.23-.19-.57-.19-.74H4.55c0 .25.06.69.18 1.02a3.15 3.15 0 0 0 1.22 1.6c.28.2.58.36.92.49.33.13.67.23 1.04.29.36.06.72.09 1.08.09.6 0 1.15-.07 1.64-.21a3.88 3.88 0 0 0 1.25-.59 2.69 2.69 0 0 0 .8-.95c.19-.38.28-.81.28-1.29 0-.45-.08-.86-.23-1.211a2.26 2.26 0 0 0-.13-.25L16 11V9"
@@ -5281,7 +5681,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.TEXT_COLOR">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M10 1H8L3.5 13h2l1.12-3h4.75l1.12 3h2L10 1ZM7.38 8 9 3.67 10.62 8H7.38"
@@ -5289,7 +5689,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.FILL_COLOR">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M14.5 8.87S13 10.49 13 11.49c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5c0-.99-1.5-2.62-1.5-2.62m-1.79-2.08L5.91 0 4.85 1.06l1.59 1.59-4.15 4.14a.996.996 0 0 0 0 1.41l4.5 4.5c.2.2.45.3.71.3.26 0 .51-.1.71-.29l4.5-4.5c.39-.39.39-1.03 0-1.42M4.21 7 7.5 3.71 10.79 7H4.21"
@@ -5297,7 +5697,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.MERGE_CELL">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M3 6H1V2h7v2H3v2m7-2V2h7v4h-2V4h-5m0 10h5v-2h2v4h-7v-2m-9-2h2v2h5v2H1v-4m0-4h4V6l3 3-3 3v-2H1V8m9 1 3-3v2h4v2h-4v2l-3-3"
@@ -5305,12 +5705,12 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_LEFT">
-    <svg class="o-icon align-left">
+    <svg class="o-icon align-left" viewBox="0 0 18 18">
       <path fill="currentColor" d="M2 16h10v-2H2v2M12 6H2v2h10V6M2 2v2h14V2H2m0 10h14v-2H2v2"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_CENTER">
-    <svg class="o-icon align-center">
+    <svg class="o-icon align-center" viewBox="0 0 18 18">
       <path fill="currentColor" d="M4 14v2h10v-2H4m0-8v2h10V6H4m-2 6h14v-2H2v2M2 2v2h14V2H2"/>
     </svg>
   </t>
@@ -5320,17 +5720,17 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_RIGHT">
-    <svg class="o-icon align-right">
+    <svg class="o-icon align-right" viewBox="0 0 18 18">
       <path fill="currentColor" d="M6 16h10v-2H6v2m-4-4h14v-2H2v2M2 2v2h14V2H2m4 6h10V6H6v2"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_TOP">
-    <svg class="o-icon align-top">
+    <svg class="o-icon align-top" viewBox="0 0 18 18">
       <path d="M3 2h12v2H3m2.5 5H8v7h2V9h2.5L9 5.5" fill="currentColor"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_MIDDLE">
-    <svg class="o-icon align-middle">
+    <svg class="o-icon align-middle" viewBox="0 0 18 18">
       <path
         d="M12.5 3H10V0H8v3H5.5L9 6.5M5.5 15H8v3h2v-3h2.5L9 11.5M3 8v2h12V8"
         fill="currentColor"
@@ -5338,17 +5738,17 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ALIGN_BOTTOM">
-    <svg class="o-icon align-bottom">
+    <svg class="o-icon align-bottom" viewBox="0 0 18 18">
       <path d="M5.5 9H8V2h2v7h2.5L9 12.5M3 14v2h12v-2" fill="currentColor"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.WRAPPING_OVERFLOW">
-    <svg class="o-icon wrapping-overflow">
+    <svg class="o-icon wrapping-overflow" viewBox="0 0 18 18">
       <path d="M13 8H6v2h7v2l3-3-3-3M2 2h2v14H2M9 2h2v4H9m0 6h2v4H9" fill="currentColor"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.WRAPPING_WRAP">
-    <svg class="o-icon wrapping-wrap">
+    <svg class="o-icon wrapping-wrap" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M6 5v2h3.75c.75 0 1.5.67 1.5 1.5 0 .75-.75 1.5-1.5 1.5H8V8l-3 3 3 3v-2h1.5c2 0 3.5-1.5 3.5-3.5S11.5 5 9.5 5M2 2h2v14H2M14 2M14,2,h2v14h-2"
@@ -5356,12 +5756,12 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.WRAPPING_CLIP">
-    <svg class="o-icon wrapping-clip">
+    <svg class="o-icon wrapping-clip" viewBox="0 0 18 18">
       <path fill="currentColor" d="M2 2h2v14H2M14 2h2v14h-2v-6H6V8h8"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDERS">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2 2v14h14V2H2m6 12H4v-4h4v4m0-6H4V4h4v4m6 6h-4v-4h4v4m0-6h-4V4h4v4"
@@ -5369,7 +5769,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_HV">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M2 16h2v-2H2v2M4 5H2v2h2V5m1 11h2v-2H5v2m8-14h-2v2h2V2M4 2H2v2h2V2m3 0H5v2h2V2M2 13h2v-2H2v2m9 3h2v-2h-2v2m3-14v2h2V2h-2m0 5h2V5h-2v2m0 9h2v-2h-2v2m0-3h2v-2h-2v2"
         opacity=".54"
@@ -5378,7 +5778,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_H">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M8 16h2v-2H8v2M5 4h2V2H5v2m3 9h2v-2H8v2m-3 3h2v-2H5v2M2 7h2V5H2v2m0 9h2v-2H2v2M2 4h2V2H2v2m0 9h2v-2H2v2m12 0h2v-2h-2v2m0 3h2v-2h-2v2m0-9h2V5h-2v2m0-5v2h2V2h-2M8 4h2V2H8v2m3 0h2V2h-2v2M8 7h2V5H8v2m3 9h2v-2h-2v2"
         opacity=".54"
@@ -5387,7 +5787,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_V">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M5 16h2v-2H5v2M2 7h2V5H2v2m0-3h2V2H2v2m3 6h2V8H5v2m0-6h2V2H5v2M2 16h2v-2H2v2m0-6h2V8H2v2m0 3h2v-2H2v2M14 2v2h2V2h-2m0 8h2V8h-2v2m0 6h2v-2h-2v2m0-9h2V5h-2v2m0 6h2v-2h-2v2m-3 3h2v-2h-2v2m0-6h2V8h-2v2m0-6h2V2h-2v2"
         opacity=".54"
@@ -5396,13 +5796,13 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_EXTERNAL">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path d="M10 5H8v2h2V5m3 3h-2v2h2V8m-3 0H8v2h2V8m0 3H8v2h2v-2M7 8H5v2h2V8" opacity=".54"/>
       <path d="M2 2h14v14H2V2m12 12V4H4v10h10"/>
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_LEFT">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M8 10h2V8H8v2m0-3h2V5H8v2m0 6h2v-2H8v2m0 3h2v-2H8v2m-3 0h2v-2H5v2M5 4h2V2H5v2m0 6h2V8H5v2m9 6h2v-2h-2v2m0-6h2V8h-2v2m0 3h2v-2h-2v2m0-6h2V5h-2v2M8 4h2V2H8v2m6-2v2h2V2h-2m-3 14h2v-2h-2v2m0-6h2V8h-2v2m0-6h2V2h-2v2"
         opacity=".54"
@@ -5411,7 +5811,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_TOP">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M5 10h2V8H5v2m-3 6h2v-2H2v2m6 0h2v-2H8v2m0-3h2v-2H8v2m-3 3h2v-2H5v2m-3-3h2v-2H2v2m6-3h2V8H8v2M2 7h2V5H2v2m0 3h2V8H2v2m12 0h2V8h-2v2m0 3h2v-2h-2v2m0-6h2V5h-2v2M8 7h2V5H8v2m3 9h2v-2h-2v2m0-6h2V8h-2v2m3 6h2v-2h-2v2"
         opacity=".54"
@@ -5420,7 +5820,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_RIGHT">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M2 4h2V2H2v2m3 0h2V2H5v2m0 6h2V8H5v2m0 6h2v-2H5v2M2 7h2V5H2v2m0 3h2V8H2v2m0 6h2v-2H2v2m0-3h2v-2H2v2m9-3h2V8h-2v2m-3 6h2v-2H8v2m3 0h2v-2h-2v2M8 4h2V2H8v2m3 0h2V2h-2v2m-3 9h2v-2H8v2m0-6h2V5H8v2m0 3h2V8H8v2"
         opacity=".54"
@@ -5429,7 +5829,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_BOTTOM">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M7 2H5v2h2V2m3 6H8v2h2V8m0 3H8v2h2v-2m3-3h-2v2h2V8M7 8H5v2h2V8m6-6h-2v2h2V2m-3 3H8v2h2V5m0-3H8v2h2V2m-6 9H2v2h2v-2m10 2h2v-2h-2v2m0-6h2V5h-2v2m0 3h2V8h-2v2m0-8v2h2V2h-2M4 2H2v2h2V2m0 3H2v2h2V5m0 3H2v2h2V8"
         opacity=".54"
@@ -5438,7 +5838,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_CLEAR">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M8 16h2v-2H8v2m-3-6h2V8H5v2m0-6h2V2H5v2m3 9h2v-2H8v2m-3 3h2v-2H5v2M2 7h2V5H2v2m0 9h2v-2H2v2M2 4h2V2H2v2m0 6h2V8H2v2m6 0h2V8H8v2m-6 3h2v-2H2v2m12 0h2v-2h-2v2m0 3h2v-2h-2v2m0-6h2V8h-2v2m0-3h2V5h-2v2m0-5v2h2V2h-2M8 4h2V2H8v2m3 0h2V2h-2v2M8 7h2V5H8v2m3 9h2v-2h-2v2m0-6h2V8h-2v2"
@@ -5447,7 +5847,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_TYPE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <g fill="currentColor" transform="translate(2 2)">
         <polygon points="0 0 0 2 14 2 14 0"/>
         <polygon points="0 6 0 8 5 8 5 6"/>
@@ -5460,7 +5860,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_COLOR">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <g fill="currentColor" transform="translate(4 2)">
         <polygon points="0 12 0 9 7 2 10 5 3 12"/>
         <polygon points="8 1 9 0 12 3 11 4"/>
@@ -5468,7 +5868,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.BORDER_NO_COLOR">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <g fill="currentColor">
         <polygon points="4 12 4 9 11 2 14 5 7 12"/>
         <polygon points="12 1 13 0 16 3 15 4"/>
@@ -5637,8 +6037,13 @@
       <circle fill="currentColor" cx="14" cy="9" r="4"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.CARET_SORT">
+    <svg class="o-icon" viewBox="0 0 512 512">
+      <path fill="currentColor" d="M40 240 h320 l-160 -160 M40 280 h320 l-160 160"/>
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.SORT_RANGE">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M9 3.5h8v2H9M9 8h6v2H9m0 2.5h3v2H9M6 6l1-1-3-3-3 3 1 1 1-1v8l-1-1-1 1 3 3 3-3-1-1-1 1V5"
@@ -5701,14 +6106,14 @@
     <span class="o-text-icon">.00</span>
   </t>
   <t t-name="o-spreadsheet-Icon.NUMBER_FORMATS">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <path
         d="M0 6h2v8h2V4H0m9 0H5v2h4v2H6.5A1.5 1.5 0 0 0 5 9.5V14h6v-2H7v-2h2.5A1.5 1.5 0 0 0 11 8.5v-3A1.5 1.5 0 0 0 9.5 4M12 4v2h4v2h-2v2h2v2h-4v2h4.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 16.5 9 1.5 1.5 0 0 0 18 7.5v-2A1.5 1.5 0 0 0 16.5 4"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.FONT_SIZE">
-    <svg class="o-icon" fill="currentColor">
+    <svg class="o-icon" fill="currentColor" viewBox="0 0 18 18">
       <text x="2" y="15" class="small-text">A</text>
       <text x="6" y="15" class="heavy-text">A</text>
     </svg>
@@ -5719,7 +6124,7 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.SPLIT_TEXT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M14 6v2h-4v2h4v2l3-3m-9 1V8H4V6L1 9l3 3v-2m3.5-6.5h3V7H12V3.5h3V2H3v1.5h3V7h1.5m3 7.5h-3V11H6v3.5H3V16h12v-1.5h-3V11h-1.5"
@@ -5732,7 +6137,7 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
-    <svg class="o-icon" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.75.5h16.5v17H.75m1.5-12H.75V7h1.5v1.5H.75V10h1.5v1.5H.75V13h1.5v1.5H.75V16h1.5v1.5h1.5V16h1.5v1.5h1.5V16h1.5v1.5h1.5V16h1.5v1.5h1.5V16h1.5v1.5h1.5V16h1.5v-1.5h-1.5V13h1.5v-1.5h-1.5V10h1.5V8.5h-1.5V7h1.5V5.5M2.75 2.25v1.5h2v-1.5m2.5 0v1.5h7v-1.5"
@@ -5750,7 +6155,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PLUS_IN_BOX">
-    <svg class="o-icon" width="18" height="18" style="">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="
@@ -5762,7 +6167,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.MINUS_IN_BOX">
-    <svg class="o-icon" width="18" height="18" style="">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="
@@ -5773,7 +6178,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.GROUP_ROWS">
-    <svg class="o-icon" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M6 2.5A1.5 1.5 0 0 1 7.5 1H16a1.5 1.5 0 0 1 1.5 1.5V15a1.5 1.5 0 0 1-1.5 1.5H7.5A1.5 1.5 0 0 1 6 15M7.5 2.5v2H16v-2M7.5 6v2H16V6M7.5 9.5v2H16v-2M7.5 13v2H16v-2M2 5.75V13h3v-1.5H3.5V5.75h1.25V3l-1 1v.75H3M.25 1.25v4.5h4.5v-4.5m-3.5 1h2.5v2.5h-2.5"
@@ -5781,7 +6186,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNGROUP_ROWS">
-    <svg class="o-icon" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M6 2.5A1.5 1.5 0 0 1 7.5 1H16a1.5 1.5 0 0 1 1.5 1.5V15a1.5 1.5 0 0 1-1.5 1.5H7.5A1.5 1.5 0 0 1 6 15M7.5 2.5v2H16v-2M7.5 6v2H16V6M7.5 9.5v2H16v-2M7.5 13v2H16v-2M2 5.75V13h3v-1.5H3.5V5.75M0 5.25.75 6l2-2 2 2 .75-.75-2-2 2-2L4.75.5l-2 2-2-2-.75.75 2 2"
@@ -5789,7 +6194,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.GROUP_COLUMNS">
-    <svg class="o-icon" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.75 6a1.5 1.5 0 0 0-1.5 1.5V16a1.5 1.5 0 0 0 1.5 1.5h12.5a1.5 1.5 0 0 0 1.5-1.5V7.5a1.5 1.5 0 0 0-1.5-1.5M2.75 7.5h2V16h-2m3.5-8.5h2V16h-2m3.5-8.5h2V16h-2m3.5-8.5h2V16h-2M6 2h7.25v3h-1.5V3.5H6v1.25H3.25l1-1H5V3M1.5.25H6v4.5H1.5m1-3.5v2.5H5v-2.5"
@@ -5797,7 +6202,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.UNGROUP_COLUMNS">
-    <svg class="o-icon" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.75 6a1.5 1.5 0 0 0-1.5 1.5V16a1.5 1.5 0 0 0 1.5 1.5h12.5a1.5 1.5 0 0 0 1.5-1.5V7.5a1.5 1.5 0 0 0-1.5-1.5M2.75 7.5h2V16h-2m3.5-8.5h2V16h-2m3.5-8.5h2V16h-2m3.5-8.5h2V16h-2M6 2h7.25v3h-1.5V3.5H6M5.5 0l.75.75-2 2 2 2-.75.75-2-2-2 2-.75-.75 2-2-2-2L1.5 0l2 2"
@@ -5805,7 +6210,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.DATA_VALIDATION">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M.5 2A1.5 1.5 0 0 1 2 .5h14A1.5 1.5 0 0 1 17.5 2v7H11V7H7v4s-.5 0-1.5 1h-1v5h-3a1.5 1.5 0 0 1-1-1M6 6V2H2v4m9 0V2H7v4m9 0V2h-4v4m-6 5V7H2v4m14-2V7h-4v2m-7.5 6.5V12H2v3.5"
@@ -5833,7 +6238,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.EDIT_TABLE">
-    <svg class="o-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15H7l1.5-1.5H7v-2.75h3.5v.75l2.25-2.25H12v-2.5h3.5v.75c.1-.2.45-.05.5.02l1 1V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3M7 6.75h3.5v2.5H7m-4.5 1.5h3v2.75h-3 M8.2 15.7v1.8h1.8l5.4-5.4-1.8-1.8-5.4 5.4Zm8.8-5.2a.5.5 0 0 0 0-.7l-1.1-1.1a.5.5 0 0 0-.7 0l-.9.9 1.8 1.8.9-.9Z"
@@ -5841,7 +6246,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.DELETE_TABLE">
-    <svg class="o-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15H7l1.5-1.5H7V6.75h3.5v.75L12 9V6.75h3.5l1.5 1.5V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3m0 1.5h3v2.75h-3m10-2.25 3-3 1.5 1.5-3 3 3 3-1.5 1.5-3-3-3 3-1.5-1.5 3-3-3-3 1.5-1.5"
@@ -5849,7 +6254,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PAINT_TABLE">
-    <svg class="o-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h5c0-.5 0-1 .5-1.5H7v-2.75h3.5v.75l2.25-2.25H12v-2.5h3.5v.75c1-.7 1.5-.4 1.5-.4V2.5A1.5 1.5 0 0 0 15.5 1m-13 1.5h13v2.75h-13m0 1.5h3v2.5h-3M7 6.75h3.5v2.5H7m-4.5 1.5h3v2.75h-3m7.5-.3c.7-.3 1.5-.1 2.1.6.6.7.8 1.4.5 1.9-.6 1.4-3.7 1.6-4 1.7l-.6.1.3-.5s.5-.8.5-2.1c0-.7.5-1.4 1.1-1.7Zm6.7-5.1a.9.9 0 0 1 1 1c-.1 1.3-2.5 3.7-4.3 5.3a3.9 3.9 0 0 0-.6-1.1c-.4-.4-.8-.7-1.3-.8 1.5-1.7 4-4.3 5.4-4.4"
@@ -5865,10 +6270,10 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PIVOT">
-    <svg class="o-icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
-        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+        d="M15.5 2A1.5 1.5 0 0 1 17 3.5V14a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 1 14V7.5A1.5 1.5 0 0 1 2.5 6H5V3.5A1.5 1.5 0 0 1 6.5 2H17m-1.5 1.5h-9V6h9m-13 1.5V10H5V7.5m-2.5 4V14H5v-2.5m1.5-4V10h9V7.5m-9 4V14h9v-2.5"
       />
     </svg>
   </t>
@@ -5888,8 +6293,28 @@
       </svg>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.ANGLE_RIGHT">
+    <div class="o-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
+        <path
+          fill="currentColor"
+          d="M161 139c6-6 6-16 0-23L81 36c-6-6-16-6-23 0s-6 16 0 23l69 69-69 69c-6 6-6 16 0 23s16 6 23 0l80-80z"
+        />
+      </svg>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ANGLE_LEFT">
+    <div class="o-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 256">
+        <path
+          fill="currentColor"
+          d="M59 116c-6 6-6 16 0 23l80 80c6 6 16 6 23 0s6-16 0-23L93 127l69-69c6-6 6-16 0-23s-16-6-23 0l-80 80z"
+        />
+      </svg>
+    </div>
+  </t>
   <t t-name="o-spreadsheet-Icon.INSERT_PIVOT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <defs>
         <mask id="a">
           <path fill="#fff" d="M0 0h18v18H0z"/>
@@ -5898,8 +6323,7 @@
       </defs>
       <path
         fill="currentColor"
-        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
-        mask="url(#a)"
+        d="M15.5 2A1.5 1.5 0 0 1 17 3.5V14a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 1 14V7.5A1.5 1.5 0 0 1 2.5 6H5V3.5A1.5 1.5 0 0 1 6.5 2H17m-1.5 1.5h-9V6h9m-13 1.5V10H5V7.5m-2.5 4V14H5v-2.5m1.5-4V10h9V7.5m-9 4V14h9v-2.5"
       />
       <path
         fill="currentColor"
@@ -5949,7 +6373,7 @@
     <svg class="o-icon" viewBox="0 0 122.88 99.75">
       <path
         fill="currentColor"
-        d="M29.09,0h64.7A5.21,5.21,0,0,1,99,5.18v89.4a5.19,5.19,0,0,1-5.18,5.17H29.09a5.19,5.19,0,0,1-5.17-5.18V5.18A5.21,5.21,0,0,1,29.09,0Zm78.52,12.46,10.59-1.52a4.71,4.71,0,0,1,4.68,4.69v68.5a4.71,4.71,0,0,1-4.68,4.68L107.77,88a1.35,1.35,0,0,1-1.31-1.34V83.14a1.34,1.34,0,0,1,1.44-1.23l8.91.73V17.22l-9,1.34a1.34,1.34,0,0,1-1.34-1.34V13.78a1.34,1.34,0,0,1,1.15-1.32ZM5,11l10.31,1.49a1.33,1.33,0,0,1,1.14,1.32v3.44a1.34,1.34,0,0,1-1.34,1.34l-9-1.34V82.64L15,81.91a1.33,1.33,0,0,1,1.43,1.23v3.49A1.35,1.35,0,0,1,15.11,88l-10.43.84A4.71,4.71,0,0,1,0,84.13V15.63a4.73,4.73,0,0,1,4.68-4.69L5,11Zm87.93-4.9H30v87.6h62.9V6.07Z"
+        d="M29.09 0h65.7A5.2 5.2 0 0 1 99 5.2v89.4a5.2 5.2 0 0 1-5.2 5.2H29.1a5.2 5.2 0 0 1-5.2-5.2V5.2A5.2 5.2 0 0 1 29.1 0m89 9a4.7 4.7 0 0 1 4.7 4.7v71a4.7 4.7 0 0 1-4.7 4.7L106.8 91a1.4 1.35 0 0 1-1.3-1.3V81a1.3 1.3 0 0 1 1.4-1.2l6.9.7V17.2l-7 1a1.3 1.3 0 0 1-1.3-1.3V9a1.3 1.3 0 0 1 1.2-1.3ZM5 9l11.3-1a1.3 1.3 0 0 1 1.1 1.3v7.4a1.3 1.3 0 0 1-1.3 1.3l-7-1v64l6.9-1a1.3 1.3 0 0 1 1.4 1.2v9.5a1.4 1.4 0 0 1-2.3.3L4.7 89.2a4.7 4.7 0 0 1-4.7-5V13.7A4.7 4.7 0 0 1 4.7 9zm83 1H35v78h53Z"
       />
     </svg>
   </t>
@@ -5991,47 +6415,42 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-0">
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      transform="rotate(270)"
-      xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        d="M1.5 14v-2h11v-2l4 3-4 3v-2m-4-8V4h4V2l4 3-4 3V6m-11 3 2.8-7h1.2l2.8 7-1.12.43-.7-1.9H3.3l-.7 1.9L1.48 9m2.25-2.7h2.3l-1.1-2.8z"
         fill="currentColor"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-45">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="m1.95 6.879.707-.707 8.485 8.485 1.06-1.06v2.828H9.375l1.061-1.061m.706-7.778.707-.707 3.536 3.535 1.06-1.06v2.828h-2.828l1.06-1.06M4.071 4.757l6.93-2.97.848.849-2.97 6.93-1.096-.488.849-1.839-2.249-2.248-1.838.848-.488-1.096m3.5-.318 1.626 1.626 1.203-2.757z"
+        d="m.743 7.086 1.414-1.414 7.778 7.778 1.414-1.414.707 4.95-4.95-.708 1.415-1.414m2.121-7.778 1.414-1.414L14.885 8.5l1.414-1.414.707 4.95-4.95-.708 1.415-1.414m-9.9-5.657 6.93-2.97.848.849-2.97 6.93-1.096-.488.849-1.839-2.249-2.248-1.838.848-.488-1.096m3.5-.318 1.626 1.626 1.203-2.757z"
         fill="currentColor"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-90">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        d="M4 1.5h2v11h2l-3 4-3-4h2m8-4h2v4h2l-3 4-3-4h2m-3-11 7 2.8v1.2L9 8.3l-.43-1.12 1.9-.7V3.3l-1.9-.7L9 1.48m2.7 2.25v2.3l2.8-1.1z"
         fill="currentColor"
       />
     </svg>
   </t>
 
   <t t-name="o-spreadsheet-Icon.ROTATION-270">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="M13 16h-1V4h-1.5l2-2 2 2H13M7 9H6V4H4.5l2-2 2 2H7m3 12-7-2.8V12l7-2.8.43 1.12-1.9.7v3.18l1.9.7-.43 1.12m-2.7-2.25v-2.3l-2.8 1.1z"
+        d="M14 16.5h-2v-11h-2l3-4 3 4h-2m-8 4H4v-4H2l3-4 3 4H6m3 11-7-2.8v-1.2l7-2.8.43 1.12-1.9.7v3.18l1.9.7L9 16.52m-2.7-2.25v-2.3l-2.8 1.1z"
         fill="currentColor"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-315">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="m6.879 16.55-.707-.707 8.485-8.485-1.06-1.06h2.828v2.828l-1.061-1.061m-7.778-.707-.707-.707 3.535-3.536-1.06-1.06h2.828v2.828l-1.06-1.06M4.757 14.429l-2.97-6.93.849-.848 6.93 2.97-.488 1.096-1.839-.849-2.248 2.249.848 1.838-1.096.488m-.318-3.5 1.626-1.626-2.757-1.203z"
+        d="m6.836 17.257-1.414-1.414L13.2 8.065l-1.414-1.414 4.95-.707-.708 4.95-1.414-1.415M6.836 7.358 5.422 5.944 8.25 3.115 6.836 1.701l4.95-.707-.708 4.95-1.414-1.415m-5.657 9.9-2.97-6.93.849-.848 6.93 2.97-.488 1.096-1.839-.849-2.248 2.249.848 1.838-1.096.488m-.318-3.5 1.626-1.626-2.757-1.203z"
         fill="currentColor"
       />
     </svg>
@@ -6041,6 +6460,64 @@
       <i class="fa fa-thumb-tack"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.LOCK">
+    <div class="o-icon">
+      <i class="fa fa-lock"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.UNLOCK">
+    <div class="o-icon">
+      <i class="fa fa-unlock"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.PRINT">
+    <div class="o-icon">
+      <i class="fa fa-print"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.COLUMN_STATS">
+    <svg width="18px" height="18px" viewBox="0 0 512 512">
+      <path
+        d="M319 174c71 0 129 58 129 129 0 27-8 52-23 73l66 66-33 33-66-66c-21 14-46 23-73 23-71 0-129-58-129-129s57-129 129-129m0 47c-45 0-82 37-82 82s36 82 82 82 82-37 82-82-37-82-82-82m-152 70a155 155 0 0 0 0 12c0 12 1 24 4 35H25v-47zM119 33v235H49V33zm94 94v66c-21 20-36 46-43 75h-28V127zm94-47v71a152 152 0 0 0-70 24V80zm94 23v71a152 152 0 0 0-70-24v-47z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.DESCENDING_SORT">
+    <svg width="20px" height="16px" viewBox="0 0 20 16">
+      <path
+        d="M9.9 11.4h3.9a.9.9 0 0 0 .9-.9V6.24a.9.9 0 0 0-1.8 0V8.4L8.1 3.6s-.6-.6-1.2 0L5.1 5.4 1.5 1.8A.9.9 0 0 0 .3 3l4.2 4.2s.6.6 1.2 0l1.8-1.8 4.2 4.2H9.6a.9.9 0 0 0 0 1.8z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.ASCENDING_SORT">
+    <svg width="20px" height="16px" viewBox="0 0 20 16">
+      <path
+        d="M9.9 3h3.9a.9.9 0 0 1 .9.9v4.26a.9.9 0 0 1-1.8 0V6l-4.8 4.8s-.6.6-1.2 0L5.1 9l-3.6 3.6a.9.9 0 0 1-1.2-1.2l4.2-4.2s.6-.6 1.2 0L7.5 9l4.2-4.2H9.6a.9.9 0 0 1 0-1.8z"
+        fill="currentColor"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.COUNT_CHART">
+    <svg width="20px" height="16px" viewBox="0 0 20 16">
+      <path
+        fill="currentColor"
+        d="M.747 1.05h2.24v9.707H.747zM4.48 5.53h2.24v5.227H4.48zm7.467-1.493h2.24v6.72h-2.24zM8.213 2.543h2.24v8.214h-2.24zM0 11.503h14.933v1.494H0z"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-Icon.NAMED_RANGE">
+    <svg
+      class="o-icon"
+      fill="currentColor"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1023.98 416.272l-.001-338.367c0-42.944-34.944-77.904-77.872-77.904H600.73c-21.68 0-54.496 0-75.92 21.44L18.875 527.393c-12.16 12.16-18.88 28.304-18.88 45.487 0 17.216 6.689 33.376 18.849 45.537l386.8 386.72C417.756 1017.312 433.916 1024 451.1 1024s33.36-6.689 45.487-18.849l505.952-505.968c21.696-21.648 21.569-52.816 21.441-82.912zm-66.685 37.666L450.878 959.874 64.126 572.658 569.518 67.154c5.088-3.152 23.408-3.152 30.992-3.152l14.4.048 331.2-.048c7.665 0 13.873 6.24 13.873 13.904V416.53c.064 12.176.129 32.544-2.688 37.408zM768.014 128.001c-70.689 0-128 57.311-128 128s57.312 128 128 128 128-57.312 128-128-57.312-128-128-128zm0 192c-35.344 0-64-28.656-64-64s28.656-64 64-64 64 28.656 64 64-28.656 64-64 64z M400,760 l300,-300 l30,30 l-300,300 M250,600 l300,-300 l30,30 l-300,300"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
@@ -6095,7 +6572,7 @@
   <t t-name="o-spreadsheet-Corner">
     <div
       class="o-corner d-flex justify-content-center align-items-center"
-      t-on-pointerdown.prevent="onMouseDown"
+      t-on-pointerdown.prevent.stop="onMouseDown"
       t-on-touchstart.prevent.stop=""
       t-att-style="handlerStyle">
       <div
@@ -6226,7 +6703,6 @@
           class="o-handle"
           t-on-pointerdown="onMouseDown"
           t-on-dblclick="onDblClick"
-          t-on-contextmenu.prevent=""
           t-attf-style="top:{{state.draggerLinePosition - 2}}px;">
           <div class="dragging-resizer" t-if="state.isResizing"/>
         </div>
@@ -6269,7 +6745,6 @@
           class="o-handle"
           t-on-pointerdown="onMouseDown"
           t-on-dblclick="onDblClick"
-          t-on-contextmenu.prevent=""
           t-attf-style="left:{{state.draggerLinePosition - 2}}px;">
           <div class="dragging-resizer" t-if="state.isResizing"/>
         </div>
@@ -6386,7 +6861,7 @@
       t-if="cellPopover.isOpen"
       positioning="cellPopover.cellCorner"
       maxHeight="cellPopover.Component.size and cellPopover.Component.size.maxHeight"
-      maxWidth="cellPopover.Component.size and cellPopover.Component.size.maxHidth"
+      maxWidth="cellPopover.Component.size and cellPopover.Component.size.maxWidth"
       anchorRect="cellPopover.anchorRect"
       containerRect="env.getPopoverContainerRect()"
       onMouseWheel="props.onMouseWheel"
@@ -6506,7 +6981,11 @@
         anchorRect="menuState.anchorRect"
         onClose="() => this.closeMenu()"
       />
-      <t t-foreach="staticTables" t-as="table" t-key="table.id">
+      <t
+        t-if="!env.model.getters.isReadonly()"
+        t-foreach="staticTables"
+        t-as="table"
+        t-key="table.id">
         <TableResizer table="table"/>
       </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
@@ -6563,8 +7042,8 @@
 
   <t t-name="o-spreadsheet-FilterMenuValueList">
     <div class="o-filter-menu-actions d-flex">
-      <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
-      <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
+      <div class="o-button-link me-4" t-on-click="this.selectAll">Select all</div>
+      <div class="o-button-link me-4" t-on-click="this.clearAll">Clear</div>
     </div>
     <div class="position-relative">
       <input
@@ -6616,7 +7095,7 @@
       t-att-class="{'selected': this.props.isSelected}">
       <t t-set="value">
         <t t-if="this.props.value === ''">(Blanks)</t>
-        <t t-else="" t-esc="this.props.value"/>
+        <t t-else="" t-out="this.props.value"/>
       </t>
       <!-- toString because t-set with a body creates a LazyValue instead of a string -->
       <Checkbox
@@ -6650,23 +7129,19 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterMenu">
-    <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
-      <t t-if="isSortable">
-        <div>
-          <div
-            class="o-filter-menu-item o-sort-item py-2 mb-1"
-            t-on-click="() => this.sortFilterZone('asc')">
-            Sort ascending (A ⟶ Z)
-          </div>
-          <div
-            class="o-filter-menu-item o-sort-item py-2"
-            t-on-click="() => this.sortFilterZone('desc')">
-            Sort descending (Z ⟶ A)
-          </div>
+    <div class="o-filter-menu d-flex flex-column py-3" t-on-wheel.stop="">
+      <div t-if="isSortable" class="o-filter-menu-content">
+        <div
+          class="o-filter-menu-item py-2 ps-4 mb-1"
+          t-on-click="() => this.sortFilterZone('asc')">
+          Sort ascending (A ⟶ Z)
+        </div>
+        <div class="o-filter-menu-item py-2 ps-4" t-on-click="() => this.sortFilterZone('desc')">
+          Sort descending (Z ⟶ A)
         </div>
-      </t>
-      <div class="o-filter-menu-content">
         <div class="o-separator border-bottom"/>
+      </div>
+      <div class="o-filter-menu-content">
         <SidePanelCollapsible
           isInitiallyCollapsed="filterValueType !== 'criterion'"
           title.translate="Filter by criterion">
@@ -6692,7 +7167,7 @@
         </SidePanelCollapsible>
 
         <div class="o-filter-menu-buttons d-flex justify-content-end">
-          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
+          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Discard</button>
           <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">
             Confirm
           </button>
@@ -6770,7 +7245,7 @@
         t-att-style="headerStyle">
         <div
           class="o-carousel-title text-truncate flex-shrink-0 pe-2"
-          t-esc="title"
+          t-out="title"
           t-att-title="title"
           t-att-style="titleStyle"
         />
@@ -6780,7 +7255,7 @@
               class="o-carousel-tab text-truncate px-2 mt-1 flex-shrink-0"
               t-att-class="{ 'selected': isItemSelected(item) }"
               t-att-data-type="item.type"
-              t-esc="getItemTitle(item)"
+              t-out="getItemTitle(item)"
               t-on-click.stop="() => this.onCarouselTabClick(item)"
             />
           </t>
@@ -6859,7 +7334,7 @@
         t-att-style="props.style"
         t-att-data-id="props.figureUI.id"
         tabindex="0"
-        t-on-keydown="(ev) => this.onKeyDown(ev)"
+        t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
         t-on-keyup.stop="">
         <t
           t-component="figureRegistry.get(props.figureUI.tag).Component"
@@ -6907,7 +7382,7 @@
           />
         </div>
       </div>
-      <t t-if="isSelected and !env.isMobile()">
+      <t t-if="isFigureResizable">
         <div
           class="o-fig-anchor o-top pe-auto"
           t-att-style="this.getResizerPosition('top')"
@@ -6967,6 +7442,15 @@
   <t t-name="o-spreadsheet-ChartDashboardMenu">
     <div class="o-dashboard-chart-select position-absolute top-0 end-0" t-on-click.stop="">
       <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
+        <t t-if="regionOptions.length > 1">
+          <Select
+            class="'o-chart-dashboard-item w-auto py-0 px-1 text-muted text-nowrap rounded border-0'"
+            popoverClass="'w-auto'"
+            values="regionOptions"
+            selectedValue="selectedRegion"
+            onChange.bind="onRegionSelected"
+          />
+        </t>
         <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
           <div
             t-attf-class=" {{item.class}}"
@@ -6992,7 +7476,7 @@
   </t>
 
   <t t-name="o-spreadsheet-ChartJsComponent">
-    <canvas class="o-figure-canvas w-100 h-100" t-att-style="canvasStyle" t-ref="graphContainer"/>
+    <canvas class="o-figure-canvas w-100 h-100" t-ref="graphContainer"/>
   </t>
 
   <t t-name="o-spreadsheet-ZoomableChartJsComponent">
@@ -7009,7 +7493,7 @@
           t-ref="masterChartCanvas"
           t-on-dblclick="onMasterChartDoubleClick"
           t-on-pointerdown="onMasterChartPointerDown"
-          t-on-pointermove="onMasterChartPointerMove"
+          t-on-pointermove="updateMasterChartCursor"
           t-on-mouseleave="onMasterChartMouseLeave"
         />
       </div>
@@ -7017,33 +7501,63 @@
   </t>
 
   <t t-name="o-spreadsheet-ErrorToolTip">
-    <div class="o-error-tooltip bg-white">
+    <div class="o-error-tooltip">
       <t t-if="evaluationError">
         <div class="o-error-tooltip-title fw-bold text-danger">Error</div>
         <div class="o-error-tooltip-message">
-          <t t-esc="evaluationError.message"/>
+          <t t-out="evaluationError.message"/>
           <div class="fst-italic" t-if="errorOriginPositionString">
             Caused by
             <span
-              t-esc="errorOriginPositionString"
+              t-out="errorOriginPositionString"
               class="o-button-link"
               t-on-click="selectCell"
               title="Click to select the cell"
             />
           </div>
+          <t t-set="missingHeadersForSpread" t-value="getMissingHeadersForSpread()"/>
+          <div
+            t-if="missingHeadersForSpread"
+            id="missing-headers"
+            class="o-button-link mt-4"
+            t-on-click="() => this.addMissingHeaders(missingHeadersForSpread)"
+            t-out="getAddMissingHeadersButtonText(missingHeadersForSpread)"
+          />
         </div>
       </t>
       <t t-if="dataValidationErrorMessage">
         <div class="o-error-tooltip-title fw-bold text-danger">Invalid</div>
         <div class="o-error-tooltip-message">
-          <t t-esc="dataValidationErrorMessage"/>
+          <t t-out="dataValidationErrorMessage"/>
         </div>
       </t>
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-DateInput">
+    <input
+      type="date"
+      t-ref="{{refName}}"
+      t-att-class="inputClass"
+      t-att-id="props.id"
+      t-att-placeholder="props.placeholder"
+      t-on-change="save"
+      t-on-blur="save"
+      t-on-pointerdown="onMouseDown"
+      t-on-pointerup="onMouseUp"
+      t-on-keydown="onKeyDown"
+      t-att-min="props.min"
+      t-att-max="props.max"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
+    <div
+      class="o-grid o-two-columns o-zoomable"
+      t-ref="dashboard"
+      tabindex="-1"
+      t-on-wheel="onMouseWheel"
+      t-att-style="dashboardStyle">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onGridResized.bind="onGridResized"
@@ -7057,7 +7571,6 @@
             t-att-title="clickableCell.title"
             t-on-click="(ev) => this.selectClickableCell(ev, clickableCell)"
             t-on-auxclick="(ev) => this.selectClickableCell(ev, clickableCell)"
-            t-on-contextmenu.prevent=""
             t-att-style="getCellClickableStyle(clickableCell.coordinates)">
             <t
               t-if="clickableCell.component"
@@ -7083,9 +7596,9 @@
     <div class="w-100 h-100 d-flex flex-column align-items-end" t-att-class="verticalJustifyClass">
       <span
         t-if="props.sortDirection === 'none'"
-        class="o-icon sorting-icon pb-1"
+        class="o-icon sorting-icon mb-1"
         t-att-style="style">
-        <i class="fa fa-small fa-sort"/>
+        <t t-call="o-spreadsheet-Icon.CARET_SORT"/>
       </span>
     </div>
   </t>
@@ -7134,7 +7647,7 @@
   <t t-name="o-spreadsheet-SpeechBubble">
     <t t-portal="'.o-spreadsheet'">
       <div class="o-speech-bubble position-absolute px-3 border" t-ref="bubble">
-        <div class="o-speech-content text-truncate pb-1" t-esc="props.content"/>
+        <div class="o-speech-content text-truncate pb-1" t-out="props.content"/>
       </div>
     </t>
   </t>
@@ -7144,7 +7657,7 @@
       class="o-cell-reference rounded"
       t-if="shouldDisplayCellReference"
       t-att-style="cellReferenceStyle"
-      t-esc="cellReference"
+      t-out="cellReference"
     />
     <div class="o-grid-composer" t-att-style="containerStyle" t-ref="gridComposer">
       <Composer t-props="composerProps"/>
@@ -7165,7 +7678,7 @@
           <div>
             <t t-foreach="formulaHeaderContent" t-as="part" t-key="part_index">
               <span
-                t-esc="part.content"
+                t-out="part.content"
                 t-att-class="part.focused ? 'o-formula-assistant-focus' : ''"
               />
             </t>
@@ -7184,7 +7697,7 @@
         <Collapse isCollapsed="state.isCollapsed">
           <div class="o-formula-assistant-core pb-3 m-3 border-bottom">
             <div class="o-formula-assistant-gray">ABOUT</div>
-            <div t-esc="context.functionDescription.description"/>
+            <div t-out="context.functionDescription.description"/>
           </div>
 
           <t
@@ -7199,19 +7712,19 @@
               <div
                 t-att-class="{'o-formula-assistant-focus': context.argsToFocus.includes(arg_index)}">
                 <span t-if="arg.repeating">
-                  <span t-esc="arg.name + (context.repeatingArgGroupIndex + 1)"/>
+                  <span t-out="arg.name + (context.repeatingArgGroupIndex + 1)"/>
                 </span>
                 <span t-else="">
-                  <span t-esc="arg.name"/>
+                  <span t-out="arg.name"/>
                 </span>
                 <span
                   t-if="arg.optional || arg.default || (arg.repeating and (firstRepeatableGroupOptional or context.repeatingArgGroupIndex > 0))">&#xA0;- [optional]&#xA0;</span>
                 <span t-if="arg.default">
                   <span>default:&#xA0;</span>
-                  <t t-esc="arg.defaultValue"/>
+                  <t t-out="arg.defaultValue"/>
                 </span>
               </div>
-              <div class="o-formula-assistant-arg-description" t-esc="arg.description"/>
+              <div class="o-formula-assistant-arg-description" t-out="arg.description"/>
             </div>
           </t>
         </Collapse>
@@ -7315,27 +7828,30 @@
       t-ref="autoCompleteList"
       t-on-pointerdown.prevent=""
       t-att-class="{
-          'o-autocomplete-dropdown bg-white': props.proposals.length}">
+          'o-autocomplete-dropdown': props.proposals.length}">
       <t t-foreach="props.proposals" t-as="proposal" t-key="proposal.text + proposal_index">
         <div
-          class="d-flex flex-column text-start"
+          class="o-autocomplete-content d-flex flex-column text-start"
           t-att-class="{'o-autocomplete-value-focus': props.selectedIndex === proposal_index}"
-          t-on-click="() => this.props.onValueSelected(proposal.text)"
+          t-on-click="() => this.props.onValueSelected(proposal)"
           t-on-pointermove="() => this.props.onValueHovered(proposal_index)">
-          <div class="o-autocomplete-value text-truncate">
-            <t t-set="htmlContent" t-value="proposal.htmlContent || [{ value: proposal.text}]"/>
-            <span
-              t-foreach="htmlContent"
-              t-as="content"
-              t-key="content_index"
-              t-att-class="content.classes?.join(' ')"
-              t-att-style="getCss(content)"
-              t-esc="content.value"
-            />
+          <div class="d-flex align-items-center gap-2">
+            <div t-if="proposal.icon" t-call="{{proposal.icon}}"/>
+            <div class="o-autocomplete-value text-truncate">
+              <t t-set="htmlContent" t-value="proposal.htmlContent || [{ value: proposal.text}]"/>
+              <span
+                t-foreach="htmlContent"
+                t-as="content"
+                t-key="content_index"
+                t-att-class="content.classes?.join(' ')"
+                t-att-style="getCss(content)"
+                t-out="content.value"
+              />
+            </div>
           </div>
           <div
             class="o-autocomplete-description text-truncate"
-            t-esc="proposal.description"
+            t-out="proposal.description"
             t-if="props.selectedIndex === proposal_index || proposal.alwaysExpanded"
           />
         </div>
@@ -7368,7 +7884,7 @@
 
   <t t-name="o-spreadsheet-ColorPicker">
     <Popover t-props="popoverProps">
-      <div class="o-color-picker bg-white" t-on-click.stop="" t-att-style="colorPickerStyle">
+      <div class="o-color-picker" t-on-click.stop="" t-att-style="colorPickerStyle">
         <div class="o-color-picker-section-name">Standard</div>
         <div class="colors-grid">
           <div
@@ -7462,15 +7978,14 @@
   </t>
 
   <t t-name="o-spreadsheet-ClientTag">
-    <div t-if="props.active" class="o-client-tag" t-att-style="tagStyle" t-esc="props.name"/>
+    <div t-if="props.active" class="o-client-tag" t-att-style="tagStyle" t-out="props.name"/>
   </t>
 
   <t t-name="o-spreadsheet-BottomBar">
     <div
       class="o-spreadsheet-bottom-bar o-two-columns d-flex flex-fill align-items-center overflow-hidden border-top"
       t-on-click="props.onClick"
-      t-ref="bottomBar"
-      t-on-contextmenu.prevent="">
+      t-ref="bottomBar">
       <Ripple class="'add-sheet-container'">
         <div
           class="o-sheet-item o-add-sheet me-2 p-1"
@@ -7568,7 +8083,7 @@
       <div
         class="o-selection-statistic text-truncate user-select-none me-4 bg-white rounded shadow d-flex align-items-center"
         t-on-click="listSelectionStatistics">
-        <t t-esc="selectedStatistic"/>
+        <t t-out="selectedStatistic"/>
         <span class="ms-2">
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
@@ -7584,18 +8099,21 @@
         composerFocusableElement="true"
         t-on-pointerdown="(ev) => this.onMouseDown(ev)"
         t-on-click="onClick"
-        t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)"
+        t-on-contextmenu="(ev) => this.onContextMenu(ev)"
         t-ref="sheetDiv"
         t-key="sheetName"
         t-att-style="props.style"
         t-att-title="sheetName"
         t-att-data-id="props.sheetId"
         t-att-class="{active: isSheetActive}">
+        <span t-if="isSheetLocked" class="me-1">
+          <t t-call="o-spreadsheet-Icon.LOCK"/>
+        </span>
         <span
           class="o-sheet-name"
           t-att-class="{'o-sheet-name-editable': state.isEditing }"
           t-ref="sheetNameSpan"
-          t-esc="sheetName"
+          t-out="sheetName"
           t-on-pointerdown="(ev) => this.onMouseEventSheetName(ev)"
           t-on-click="(ev) => this.onMouseEventSheetName(ev)"
           t-on-dblclick="() => this.onDblClick()"
@@ -7604,8 +8122,9 @@
           t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
         />
         <span
-          class="o-sheet-icon ms-1"
+          class="o-sheet-icon ms-1 rounded"
           tabindex="-1"
+          t-ref="icon"
           t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
@@ -7625,7 +8144,10 @@
   </t>
 
   <t t-name="o-spreadsheet-BorderEditorWidget">
-    <div class="d-flex position-relative" title="Borders">
+    <div
+      class="d-flex position-relative"
+      t-att-class="{'o-disabled': env.model.getters.isCurrentSheetLocked()}"
+      title="Borders">
       <span
         t-ref="borderEditorButton"
         t-on-click.stop="toggleBorderEditor"
@@ -7653,7 +8175,7 @@
     <t t-set="border_color">Border Color</t>
     <Popover t-props="popoverProps">
       <div
-        class="d-flex o-border-selector bg-white"
+        class="d-flex o-border-selector"
         t-on-click.stop=""
         t-att-class="props.class ? props.class : ''">
         <div class="o-border-selector-section">
@@ -7702,7 +8224,7 @@
             <Popover
               t-props="lineStylePickerPopoverProps"
               t-if="state.activeTool === 'borderTypeTool'">
-              <div class="o-border-style-dropdown bg-white">
+              <div class="o-border-style-dropdown">
                 <t t-foreach="borderStyles" t-as="borderStyle" t-key="borderStyle">
                   <div
                     t-att-title="borderStyle"