@odoo/o-spreadsheet 19.2.11 → 19.4.0-alpha.4

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.11
- @date 2026-05-11T13:51:07.177Z
- @hash 7fa6ba6
+ @version 19.4.0-alpha.4
+ @date 2026-05-11T13:50:07.021Z
+ @hash 4f00b68
 -->
 <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>
@@ -69,9 +69,19 @@
               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"
@@ -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"/>
@@ -241,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
@@ -258,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">
@@ -270,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
@@ -306,7 +322,7 @@
       t-on-click="props.onClick"
       t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
       <div class="o-table-preview">
-        <canvas t-ref="canvas" class="w-100 h-100"/>
+        <canvas t-ref="canvas" class="w-100 h-100 os-theme-dependant"/>
       </div>
       <div
         class="o-table-style-edit-button position-absolute d-none bg-white border"
@@ -384,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>
@@ -454,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)"
@@ -482,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"
@@ -618,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
@@ -718,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"
@@ -774,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>
@@ -790,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>
@@ -935,7 +1054,7 @@
             <span
               class="text-danger sp_range_error_message"
               t-if="shouldDisplayInvalidRangeError"
-              t-esc="pivot.invalidRangeMessage"
+              t-out="pivot.invalidRangeMessage"
             />
           </Section>
 
@@ -1022,6 +1141,16 @@
               </div>
             </div>
           </div>
+          <div class="row mb-2 align-items-center">
+            <div class="col-6">Use tabular form:</div>
+            <div class="col-6 d-flex align-items-center">
+              <Checkbox
+                name="'tabularForm'"
+                value="pivotStyle.tabularForm ?? defaultStyle.tabularForm"
+                onChange="(val) => this.updatePivotStyleProperty('tabularForm', val)"
+              />
+            </div>
+          </div>
         </div>
       </Section>
 
@@ -1078,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>
 
@@ -1241,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>
@@ -1299,7 +1428,7 @@
       </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-esc="getMeasureDescription(measure)"/>
+          <i t-out="getMeasureDescription(measure)"/>
         </div>
       </div>
     </PivotDimension>
@@ -1352,7 +1481,7 @@
             class="'o-fw-bold'"
             selectContentOnFocus="true"
           />
-          <span t-else="1" class="o-fw-bold text-truncate" t-esc="dimensionDisplayName"/>
+          <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"/>
@@ -1369,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>
@@ -1454,6 +1582,132 @@
     </SidePanelCollapsible>
   </t>
 
+  <t t-name="o-spreadsheet-PerfProfilePanel">
+    <div class="o-perf-profile-panel">
+      <t t-if="!this.perfProfile">
+        <Section>
+          <div class="d-flex justify-content-center mt-3">
+            <button class="o-button primary" t-on-click="this.startProfiling">
+              Analyze performance
+            </button>
+          </div>
+          <small class="text-muted d-flex justify-content-center mt-2">
+            This may take a while.
+          </small>
+        </Section>
+      </t>
+      <t t-else="">
+        <Section>
+          <div class="d-flex flex-column gap-1">
+            <div class="d-flex justify-content-center mb-3">
+              <button class="o-button" t-on-click="this.startProfiling">
+                <i class="fa fa-refresh me-1"/>
+                Re-analyze
+              </button>
+            </div>
+            <div class="d-flex justify-content-between">
+              <span class="text-muted">Total time</span>
+              <span class="fw-bold" t-esc="this.formatTime(this.perfProfile.totalTime)"/>
+            </div>
+            <div class="d-flex justify-content-between">
+              <span class="text-muted">Cells</span>
+              <span
+                t-esc="this.humanize(this.perfProfile.totalCells)"
+                t-att-title="this.perfProfile.totalCells"
+              />
+            </div>
+            <div class="d-flex justify-content-between">
+              <span class="text-muted">Function calls</span>
+              <span
+                t-esc="this.humanize(this.perfProfile.totalFunctionCalls)"
+                t-att-title="this.perfProfile.totalFunctionCalls"
+              />
+            </div>
+          </div>
+        </Section>
+        <Section>
+          <div class="d-flex flex-column gap-1">
+            <t t-foreach="this.perfProfile.entries.slice(0, 500)" t-as="entry" t-key="entry_index">
+              <t t-if="entry.time > 0">
+                <div
+                  class="o-perf-range-entry position-relative overflow-hidden rounded"
+                  t-att-class="{ 'o-perf-entry-selected': this.isSelected(entry_index) }"
+                  t-on-click="() => this.selectEntry(entry_index)">
+                  <div
+                    class="o-perf-bar position-absolute top-0 start-0 bottom-0"
+                    t-attf-style="width: {{ this.barWidth(entry) }}%"
+                  />
+                  <div
+                    class="position-relative d-flex justify-content-between py-1 px-2 text-nowrap">
+                    <span class="text-truncate me-2">
+                      <t t-esc="entry.functionName"/>
+                      <small class="text-muted ms-1" t-esc="this.stringifyRange(entry)"/>
+                    </span>
+                    <small class="flex-shrink-0 text-muted">
+                      <t t-esc="this.formatTime(entry.time)"/>
+                      (
+                      <t t-esc="this.formatPercent(entry.time)"/>
+                      )
+                    </small>
+                  </div>
+                </div>
+              </t>
+            </t>
+          </div>
+        </Section>
+      </t>
+    </div>
+  </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">
@@ -1493,8 +1747,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>
@@ -1556,9 +1810,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
@@ -1668,8 +1922,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"
@@ -1930,7 +2184,7 @@
       </div>
       <t t-if="cf.rule.type==='IconSetRule'">
         <div
-          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 bg-white border">
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 border os-theme-dependant">
           <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.upper].template}}"/>
           <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.middle].template}}"/>
           <t t-call="o-spreadsheet-Icon.{{icons[cf.rule.icons.lower].template}}"/>
@@ -1939,17 +2193,17 @@
       <t t-else="">
         <div
           t-att-style="previewImageStyle"
-          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0 border">
+          class="o-cf-preview-icon d-flex justify-content-around align-items-center me-3 flex-shrink-0 border os-theme-dependant">
           123
         </div>
       </t>
       <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
@@ -1962,129 +2216,156 @@
     </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 os-theme-dependant"
+            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 os-theme-dependant">
+                  <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>
@@ -2092,65 +2373,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>
@@ -2160,38 +2440,30 @@
   <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 os-theme-dependant"
+        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>
@@ -2199,130 +2471,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">Discard</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 os-theme-dependant"
+        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'"
         />
@@ -2334,7 +2599,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>
@@ -2344,7 +2609,7 @@
 
   <t t-name="o-spreadsheet.RoundColorPicker">
     <div
-      class="o-round-color-picker-button rounded-circle border"
+      class="o-round-color-picker-button rounded-circle border os-theme-dependant"
       t-ref="colorPickerButton"
       t-on-click.stop="togglePicker"
       t-att-title="props.title"
@@ -2378,7 +2643,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>
@@ -2395,7 +2660,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">
@@ -2444,7 +2709,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>
 
@@ -2453,11 +2718,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>
@@ -2702,8 +3061,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>
@@ -2738,8 +3097,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>
@@ -2856,22 +3215,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"/>
@@ -2897,7 +3247,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>
@@ -2911,6 +3261,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">
@@ -3015,22 +3384,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"/>
@@ -3039,21 +3399,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"/>
@@ -3112,24 +3466,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"/>
@@ -3172,9 +3516,88 @@
         </Section>
 
         <Section title.translate="Thresholds">
-          <t t-call="o-spreadsheet-GaugeChartColorSectionTemplate">
-            <t t-set="sectionRule" t-value="state.sectionRule"/>
-          </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>
+
+              <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="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>
+
+              <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"/>
@@ -3182,86 +3605,11 @@
     </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>
-
-        <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="sectionRule.colors.upperColor"
-              onColorPicked="(color) => this.updateSectionColor('upperColor', color)"
-            />
-          </td>
-          <td>Else</td>
-          <td/>
-          <td/>
-          <td/>
-        </tr>
-      </table>
-    </div>
-  </t>
-
-  <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>
-  </t>
-
   <t t-name="o-spreadsheet-GaugeChartConfigPanel">
     <div>
       <ChartDataSeries
         ranges="[this.getDataRange()]"
+        dataSetStyles="{}"
         onSelectionChanged="(ranges) => this.onDataRangeChanged(ranges)"
         onSelectionConfirmed="() => this.updateDataRange()"
         hasSingleRange="true"
@@ -3295,7 +3643,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>
@@ -3327,13 +3675,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>
@@ -3379,15 +3727,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>
@@ -3396,11 +3741,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]"
@@ -3612,6 +3957,47 @@
       <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-ChartPreview.BUBBLE_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <circle
+        stroke="var(--os-chart-preview-blue-line)"
+        fill="var(--os-chart-preview-blue-fill)"
+        cx="12"
+        cy="32"
+        r="4"
+      />
+      <circle
+        stroke="var(--os-chart-preview-blue-line)"
+        fill="var(--os-chart-preview-blue-fill)"
+        cx="22"
+        cy="16"
+        r="3"
+      />
+      <circle
+        stroke="var(--os-chart-preview-orange-line)"
+        fill="var(--os-chart-preview-orange-fill)"
+        cx="30"
+        cy="26"
+        r="5"
+      />
+      <circle
+        stroke="var(--os-chart-preview-orange-line)"
+        fill="var(--os-chart-preview-orange-fill)"
+        cx="18"
+        cy="24"
+        r="2.5"
+      />
+      <circle
+        stroke="var(--os-chart-preview-green-line)"
+        fill="var(--os-chart-preview-green-fill)"
+        cx="36"
+        cy="14"
+        r="6"
+        opacity="0.8"
+      />
+      <path fill="var(--os-gray-600)" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-ChartPreview.GAUGE_CHART">
     <svg
       viewBox="0 0 48 48"
@@ -3859,22 +4245,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">
@@ -4000,8 +4378,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'"
@@ -4009,9 +4387,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
@@ -4019,13 +4397,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">
@@ -4035,7 +4413,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'">
@@ -4044,24 +4422,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>
@@ -4076,7 +4454,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"
@@ -4099,11 +4477,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">
@@ -4121,17 +4523,22 @@
 
   <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">
+        <span class="o-disabled">None</span>
+      </div>
     </Section>
   </t>
 
   <t t-name="o-spreadsheet.ChartLabelRange">
-    <Section class="'o-data-labels'" title="props.title">
+    <Section class="sectionClass" title="props.title">
       <SelectionInput
         ranges="[props.range]"
         isInvalid="props.isInvalid"
@@ -4164,23 +4571,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"/>
@@ -4216,11 +4613,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'"
@@ -4261,10 +4666,10 @@
           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"
+            class="color-scale-preview w-100 os-theme-dependant"
             t-att-data-test-colorscale="selectedColorScale"
             t-att-style="currentColorScaleStyle"
           />
@@ -4273,14 +4678,14 @@
           </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')">
               <td class="p-1 text-end">Custom</td>
               <td class="w-100 p-1">
                 <div
-                  class="color-scale-preview o-checkers-background"
+                  class="color-scale-preview o-checkers-background os-theme-dependant"
                   data-test-id="custom-color-scale"
                 />
               </td>
@@ -4291,11 +4696,11 @@
                 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
-                    class="color-scale-preview"
+                    class="color-scale-preview os-theme-dependant"
                     t-att-data-test-id="colorScale.className"
                     t-att-style="colorScalePreviewStyle(colorScale.value)"
                   />
@@ -4350,24 +4755,174 @@
     </Section>
   </t>
 
-  <t t-name="o-spreadsheet-AxisDesignEditor">
-    <t t-set="editor_label">Axis title</t>
-    <Section class="'py-0'">
-      <BadgeSelection
-        choices="badgeAxes"
-        onChange.bind="(value) => state.currentAxis = value"
-        selectedValue="state.currentAxis"
+  <t t-name="o-spreadsheet-AxisDesignEditor">
+    <t t-set="editor_label">Axis title</t>
+    <Section class="'py-0'">
+      <BadgeSelection
+        choices="badgeAxes"
+        onChange.bind="(value) => state.currentAxis = value"
+        selectedValue="state.currentAxis"
+      />
+    </Section>
+    <ChartTitle
+      title="this.getAxisTitle()"
+      updateTitle.bind="updateAxisTitle"
+      updateStyle.bind="updateAxisTitleStyle"
+      name="editor_label"
+      style="axisTitleStyle"
+      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-BubbleChartDesignPanel">
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <ChartLegend t-props="props" isDisabled="colorMode == 'single'"/>
+        <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
+          <RadioSelection
+            choices="axisChoices"
+            selectedValue="verticalAxisPosition"
+            name="'axis'"
+            onChange.bind="updateVerticalAxisPosition"
+          />
+        </Section>
+        <Section class="'pt-0'" title.translate="Values">
+          <ChartShowValues t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Bubble chart design">
+      <t t-set-slot="content">
+        <Section class="'pt-0'" title.translate="Color mode">
+          <RadioSelection
+            choices="colorModeChoices"
+            selectedValue="colorMode"
+            name="'bubble-color-mode'"
+            onChange.bind="onColorModeChange"
+          />
+          <Checkbox
+            name="'areBubblesTransparent'"
+            value="areBubblesTransparent"
+            onChange.bind="updateBubbleTransparency"
+            className="'w-100 pt-2'"
+            label.translate="Show semi-transparent bubbles"
+          />
+        </Section>
+        <Section t-if="colorMode == 'single'" class="'pt-0'" title.translate="Bubble color">
+          <RoundColorPicker
+            currentColor="currentBubbleColor"
+            onColorPicked.bind="updateBubbleColor"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          chartId="props.chartId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
+  <t t-name="o-spreadsheet-BubbleChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        dataSetStyles="{}"
+        onSelectionChanged.bind="onDataSeriesRangesChanged"
+        onSelectionConfirmed.bind="onDataSeriesConfirmed"
+        onSelectionReordered.bind="onDataSeriesReordered"
+        onSelectionRemoved.bind="onDataSeriesRemoved"
+        maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        datasetOrientation="datasetOrientation"
+        canChangeDatasetOrientation="false"
       />
-    </Section>
-    <ChartTitle
-      title="this.getAxisTitle()"
-      updateTitle.bind="updateAxisTitle"
-      updateStyle.bind="updateAxisTitleStyle"
-      name="editor_label"
-      style="axisTitleStyle"
-      placeholder.translate="Add a Title"
-      defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
-    />
+      <ChartLabelRange
+        title.translate="Horizontal axis values"
+        range="xRange || ''"
+        isInvalid="isXDataInvalid"
+        onSelectionChanged.bind="onXDataRangeChanged"
+        onSelectionConfirmed.bind="onXDataRangeConfirmed"
+        class="'pt-0'"
+      />
+      <ChartLabelRange
+        title.translate="Bubble labels"
+        range="labelRange || ''"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged.bind="onLabelRangeChanged"
+        onSelectionConfirmed.bind="onLabelRangeConfirmed"
+        class="'pt-0'"
+      />
+      <ChartLabelRange
+        title.translate="Bubble sizes"
+        range="sizeRange || ''"
+        isInvalid="isBubbleSizeRangeInvalid"
+        onSelectionChanged.bind="onBubbleSizeRangeChanged"
+        onSelectionConfirmed.bind="onBubbleSizeRangeConfirmed"
+        class="'pt-0'"
+        options="this.getLabelRangeOptions()"
+      />
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-BarChartDesignPanel">
@@ -4414,22 +4969,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"/>
@@ -4589,14 +5134,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">
@@ -4606,7 +5152,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)"
@@ -4661,7 +5207,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>
@@ -4671,13 +5217,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>
@@ -4737,17 +5283,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>
@@ -4755,12 +5301,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="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
@@ -4775,6 +5355,8 @@
         menuId="props.menuId"
         onMouseOver.bind="onMouseOverChildMenu"
         width="props.width"
+        autoSelectFirstItem="subMenu.autoSelectFirstItem"
+        onKeyboardNavigation.bind="this.onKeydown"
       />
     </Popover>
   </t>
@@ -4782,28 +5364,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-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
@@ -4812,24 +5394,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)"/>
+              <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>
@@ -4839,10 +5417,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
@@ -4850,20 +5429,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="">
@@ -4871,32 +5455,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">Discard</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>
@@ -4904,7 +5508,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
@@ -4919,7 +5523,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=""
@@ -4927,7 +5531,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()"
@@ -4947,7 +5551,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
@@ -4956,7 +5560,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"
@@ -4964,7 +5568,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"
@@ -4972,7 +5576,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"
@@ -4980,7 +5584,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"
@@ -4988,7 +5592,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"
@@ -4996,7 +5600,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"
@@ -5004,7 +5608,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"
@@ -5022,7 +5626,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"
@@ -5030,7 +5634,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"
@@ -5043,7 +5647,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"
@@ -5051,7 +5655,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"
@@ -5059,7 +5663,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"
@@ -5067,7 +5671,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"
@@ -5080,7 +5684,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"
@@ -5088,7 +5692,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"
@@ -5096,7 +5700,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"
@@ -5104,7 +5708,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"
@@ -5112,7 +5716,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"
@@ -5120,7 +5724,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"
@@ -5128,7 +5732,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"
@@ -5136,7 +5740,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"
@@ -5144,7 +5748,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"
@@ -5152,7 +5756,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"
@@ -5160,7 +5764,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"
@@ -5168,7 +5772,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"
@@ -5176,7 +5780,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"
@@ -5184,7 +5788,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"
@@ -5192,7 +5796,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"
@@ -5200,7 +5804,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"
@@ -5228,7 +5832,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"
@@ -5236,14 +5840,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"
@@ -5252,7 +5856,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"
@@ -5260,7 +5864,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"
@@ -5268,7 +5872,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"
@@ -5276,12 +5880,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"
@@ -5289,7 +5893,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"
@@ -5297,7 +5901,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"
@@ -5305,7 +5909,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"
@@ -5313,7 +5917,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"
@@ -5321,12 +5925,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>
@@ -5336,17 +5940,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"
@@ -5354,17 +5958,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"
@@ -5372,12 +5976,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"
@@ -5385,7 +5989,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"
@@ -5394,7 +5998,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"
@@ -5403,7 +6007,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"
@@ -5412,13 +6016,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"
@@ -5427,7 +6031,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"
@@ -5436,7 +6040,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"
@@ -5445,7 +6049,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"
@@ -5454,7 +6058,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"
@@ -5463,7 +6067,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"/>
@@ -5476,7 +6080,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"/>
@@ -5484,7 +6088,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"/>
@@ -5659,7 +6263,7 @@
     </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"
@@ -5722,14 +6326,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>
@@ -5740,7 +6344,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"
@@ -5753,7 +6357,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"
@@ -5771,7 +6375,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="
@@ -5783,7 +6387,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="
@@ -5794,7 +6398,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"
@@ -5802,7 +6406,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"
@@ -5810,7 +6414,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"
@@ -5818,7 +6422,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"
@@ -5826,7 +6430,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"
@@ -5854,7 +6458,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"
@@ -5862,7 +6466,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"
@@ -5870,7 +6474,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"
@@ -5886,7 +6490,7 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PIVOT">
-    <svg class="o-icon">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
         fill="currentColor"
         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"
@@ -5909,8 +6513,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"/>
@@ -5920,7 +6544,6 @@
       <path
         fill="currentColor"
         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"
-        mask="url(#a)"
       />
       <path
         fill="currentColor"
@@ -6067,11 +6690,72 @@
       <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-Icon.AVG_TIME">
+    <svg
+      class="o-icon"
+      fill="currentColor"
+      viewBox="0 -960 960 960"
+      xmlns="http://www.w3.org/2000/svg">
+      <!-- Material icon avg_time.
+      TODO remove when we use Material icons directly -->
+      <path
+        d="M203-480h117q11 0 21 5.5t15 16.5l44 88 124-248q11-23 36-23t36 23l69 138h92q-15-102-93-171t-184-69q-106 0-184 69t-93 171Zm461 251q78-69 93-171H640q-11 0-21-5.5T604-422l-44-88-124 248q-11 23-36 23t-36-23l-69-138h-92q15 102 93 171t184 69q106 0 184-69ZM340.5-108.5Q275-137 226-186t-77.5-114.5Q120-366 120-440h80q0 116 82 198t198 82q116 0 198-82t82-198h80q0 74-28.5 139.5T734-186q-49 49-114.5 77.5T480-80q-74 0-139.5-28.5ZM120-440q0-74 28.5-139.5T226-694q49-49 114.5-77.5T480-800q62 0 119 20t107 58l56-56 56 56-56 56q38 50 58 107t20 119h-80q0-116-82-198t-198-82q-116 0-198 82t-82 198h-80Zm240-400v-80h240v80H360Zm-78 598q-82-82-82-198t82-198q82-82 198-82t198 82q82 82 82 198t-82 198q-82 82-198 82t-198-82Zm198-198Z"
+      />
+    </svg>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
       <t t-foreach="iconSets" t-as="iconSet" t-key="iconSet">
-        <div class="o-cf-icon-line">
+        <div class="o-cf-icon-line os-theme-dependant">
           <div
             class="o-icon-picker-item p-1"
             t-on-click="() => this.onIconClick(iconSets[iconSet].good)">
@@ -6252,7 +6936,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>
@@ -6295,7 +6978,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>
@@ -6412,7 +7094,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"
@@ -6448,7 +7130,7 @@
 
   <t t-name="o-spreadsheet-GridAddRowsFooter">
     <div
-      class="o-grid-add-rows mt-2 ms-2 w-100 d-flex position-relative align-items-center"
+      class="o-grid-add-rows mt-2 ms-2 w-100 d-flex position-relative align-items-center os-theme-dependant"
       t-att-style="addRowsPosition"
       t-on-pointerdown.stop.prevent="">
       <button
@@ -6496,7 +7178,7 @@
         gridDims="env.model.getters.getSheetViewDimensionWithHeaders()"
         onInputContextMenu.bind="onInputContextMenu"
       />
-      <canvas t-ref="canvas"/>
+      <canvas t-ref="canvas" class="os-theme-dependant pe-none"/>
       <t t-set="focused" t-value="focusedClients"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
@@ -6559,7 +7241,7 @@
       </button>
       <div class="flex-fill">
         <div
-          class="o-fullscreen-figure o-figure position-relative border rounded shadow"
+          class="o-fullscreen-figure os-theme-dependant o-figure position-relative border rounded shadow"
           tabindex="1"
           t-ref="fullScreenFigure"
           t-on-click.stop=""
@@ -6646,7 +7328,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
@@ -6680,23 +7362,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">
@@ -6800,7 +7478,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"
         />
@@ -6810,7 +7488,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>
@@ -6875,7 +7553,7 @@
 
   <t t-name="o-spreadsheet-FigureComponent">
     <div
-      class="o-figure-wrapper"
+      class="o-figure-wrapper os-theme-dependant"
       t-att-class="{'o-figure-selected': isSelected}"
       t-att-style="wrapperStyle"
       t-ref="figureWrapper">
@@ -6997,6 +7675,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}}"
@@ -7047,34 +7734,59 @@
   </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 o-zoomable"
+      class="o-grid o-two-columns o-zoomable bg-white"
       t-ref="dashboard"
       tabindex="-1"
       t-on-wheel="onMouseWheel"
@@ -7092,7 +7804,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"
@@ -7101,7 +7812,7 @@
             />
           </div>
         </GridOverlay>
-        <canvas t-ref="canvas"/>
+        <canvas t-ref="canvas" class="os-theme-dependant"/>
         <GridPopover
           gridRect="getGridRect()"
           onMouseWheel.bind="onMouseWheel"
@@ -7169,7 +7880,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>
@@ -7179,7 +7890,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"/>
@@ -7200,7 +7911,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>
@@ -7219,7 +7930,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
@@ -7234,19 +7945,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>
@@ -7350,27 +8061,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>
@@ -7387,9 +8101,13 @@
         t-att-title="props.title"
         t-att-class="props.class ? props.class : 'o-color-picker-button-style'"
         t-att-disabled="props.disabled">
-        <span t-att-style="iconStyle">
+        <div class="position-relative">
           <t t-call="{{props.icon}}"/>
-        </span>
+          <div
+            class="o-colored-border position-absolute bottom-0 w-100 os-theme-dependant"
+            t-att-style="iconStyle"
+          />
+        </div>
       </span>
       <ColorPicker
         t-if="props.showColorPicker"
@@ -7403,14 +8121,14 @@
 
   <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
             t-foreach="COLORS"
             t-as="color"
             t-key="color"
-            class="o-color-picker-line-item"
+            class="o-color-picker-line-item os-theme-dependant"
             t-att-data-color="color"
             t-on-click="() => this.onColorClick(color)"
             t-attf-style="background-color:{{color}};">
@@ -7438,7 +8156,7 @@
             t-foreach="env.model.getters.getCustomColors()"
             t-as="color"
             t-key="color"
-            class="o-color-picker-line-item"
+            class="o-color-picker-line-item os-theme-dependant"
             t-att-data-color="color"
             t-attf-style="background-color:{{color}};"
             t-on-click="() => this.onColorClick(color)">
@@ -7452,7 +8170,7 @@
         </div>
         <div t-if="state.showGradient" class="o-custom-selector">
           <div
-            class="o-gradient"
+            class="o-gradient os-theme-dependant"
             t-on-click.stop=""
             t-on-pointerdown="dragGradientPointer"
             t-att-style="gradientHueStyle">
@@ -7462,7 +8180,7 @@
           </div>
           <div class="o-hue-container" t-on-pointerdown="dragHuePointer">
             <div class="o-hue-picker border rounded" t-on-click.stop=""/>
-            <div class="o-hue-slider pe-none" t-att-style="sliderStyle">
+            <div class="o-hue-slider pe-none os-theme-dependant" t-att-style="sliderStyle">
               <t t-call="o-spreadsheet-Icon.CARET_UP"/>
             </div>
           </div>
@@ -7475,7 +8193,10 @@
               t-att-value="state.customHexColor"
               t-on-input="setHexColor"
             />
-            <div class="o-color-preview border rounded" t-att-style="colorPreviewStyle"/>
+            <div
+              class="o-color-preview border rounded os-theme-dependant"
+              t-att-style="colorPreviewStyle"
+            />
           </div>
           <div class="o-custom-input-buttons">
             <button
@@ -7497,15 +8218,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"
@@ -7603,7 +8323,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>
@@ -7619,7 +8339,7 @@
         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"
@@ -7633,7 +8353,7 @@
           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()"
@@ -7695,7 +8415,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">
@@ -7744,7 +8464,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"