@odoo/o-spreadsheet 19.2.0-alpha.3 → 19.2.11

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 19.2.0-alpha.3
- @date 2026-01-14T10:03:04.642Z
- @hash e5cbf18
+ @version 19.2.11
+ @date 2026-05-11T13:51:07.177Z
+ @hash 7fa6ba6
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -58,12 +58,12 @@
         t-att-class="{'o-topbar-responsive': !env.model.getters.isReadonly()}"
         t-ref="toolBarContainer">
         <div
-          class="o-topbar-toolbar d-flex"
+          class="o-topbar-toolbar d-flex flex-grow-1"
           t-att-class="{'flex-shrink-0': env.model.getters.isReadonly()}">
           <!-- Toolbar -->
           <div
             t-if="env.model.getters.isReadonly()"
-            class="o-readonly-toolbar d-flex align-items-center text-muted">
+            class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
             <span>
               <i class="fa fa-eye"/>
               Readonly Access
@@ -188,7 +188,7 @@
     <FontSizeEditor
       currentFontSize="currentFontSize"
       onFontSizeChanged.bind="this.setFontSize"
-      class="props.class"
+      class="class"
       onToggle.bind="this.onToggle"
       onFocusInput.bind="this.onFocusInput"
     />
@@ -217,7 +217,9 @@
   </div>
 
   <t t-name="o-spreadsheet-ColorEditor">
-    <div class="d-flex align-items-center">
+    <div
+      class="d-flex align-items-center"
+      t-att-class="{'o-disabled': env.model.getters.isCurrentSheetLocked() }">
       <ColorPickerWidget
         currentColor="currentColor"
         toggleColorPicker.bind="onClick"
@@ -364,12 +366,12 @@
   </t>
 
   <t t-name="o-spreadsheet-TableDropdownButton">
-    <div class="o-table-widget d-flex align-item-center" t-att-class="props.class">
+    <div class="o-table-widget d-flex align-item-center" t-att-class="class">
       <ActionButton
         action="action"
         hasTriangleDownIcon="true"
         t-on-click="onClick"
-        class="'o-hoverable-button'"
+        class="'opacity-100'"
       />
     </div>
     <TableStylesPopover
@@ -524,7 +526,7 @@
             class="o-delete o-button-danger o-button">
             Delete
           </button>
-          <button t-on-click="onCancel" class="o-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-cancel o-button">Discard</button>
           <button t-on-click="onConfirm" class="o-confirm o-button primary">Confirm</button>
         </div>
       </Section>
@@ -651,16 +653,12 @@
   <t t-name="o-spreadsheet-SplitIntoColumnsPanel">
     <div class="o-split-to-cols-panel">
       <Section title.translate="Separator">
-        <select class="o-input mb-3" t-on-change="(ev) => this.onSeparatorChange(ev.target.value)">
-          <option
-            t-foreach="separators"
-            t-as="separator"
-            t-key="separator.value"
-            t-att-value="separator.value"
-            t-esc="separator.name"
-            t-att-selected="state.separatorValue === separator.value"
-          />
-        </select>
+        <Select
+          class="'mb-3'"
+          values="separators"
+          selectedValue="state.separatorValue"
+          onChange.bind="onSeparatorChange"
+        />
 
         <input
           class="o-input mb-3"
@@ -722,11 +720,9 @@
         </div>
         <div class="o-sidePanelTitle o-fw-bold ms-2" t-esc="getTitle()"/>
         <div
-          t-if="props.onTogglePinPanel"
-          class="o-pin-panel o-sidePanelAction ms-auto rounded"
-          t-att-class="{'active': props.isPinned}"
-          t-on-click="props.onTogglePinPanel"
-          t-att-title="pinInfoMessage">
+          t-if="props.isPinned"
+          class="o-pin-panel o-sidePanelAction ms-auto rounded active"
+          t-on-click="props.onTogglePinPanel">
           <i class="fa fa-thumb-tack"/>
         </div>
         <div class="o-sidePanelClose o-sidePanelAction rounded" t-on-click="props.onCloseSidePanel">
@@ -767,11 +763,9 @@
           <i class="fa fa-angle-double-left"/>
         </div>
         <div
-          t-if="props.onTogglePinPanel"
-          class="o-pin-panel o-sidePanelAction rounded mb-1"
-          t-att-class="{'active': props.isPinned}"
-          t-on-click.stop="props.onTogglePinPanel"
-          t-att-title="pinInfoMessage">
+          t-if="props.isPinned"
+          class="o-pin-panel o-sidePanelAction ms-auto rounded active"
+          t-on-click="props.onTogglePinPanel">
           <i class="fa fa-thumb-tack"/>
         </div>
         <div
@@ -788,16 +782,11 @@
   <t t-name="o-spreadsheet-SettingsPanel">
     <div class="o-settings-panel">
       <Section title.translate="Locale">
-        <select class="o-input" t-on-change="(ev) => this.onLocaleChange(ev.target.value)">
-          <option
-            t-foreach="supportedLocales"
-            t-as="locale"
-            t-key="locale.code"
-            t-att-value="locale.code"
-            t-esc="locale.name"
-            t-att-selected="currentLocale.code === locale.code"
-          />
-        </select>
+        <Select
+          selectedValue="currentLocale.code"
+          values="selectOptions"
+          onChange="(value) => this.onLocaleChange(value)"
+        />
         <div class="o-locale-preview mt-4 p-3 rounded border">
           <div>
             <span class="o-fw-bold me-1">Number:</span>
@@ -825,24 +814,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-SelectMenu">
-    <select
-      t-att-class="props.class"
-      t-ref="select"
-      t-on-pointerdown.stop.prevent=""
-      t-on-click="onClick">
-      <option selected="true" t-esc="props.selectedValue"/>
-    </select>
-    <MenuPopover
-      t-if="state.isMenuOpen"
-      menuItems="props.menuItems"
-      anchorRect="menuAnchorRect"
-      onClose.bind="onMenuClosed"
-      menuId="menuId"
-      popoverPositioning="'bottom-left'"
-    />
-  </t>
-
   <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>
@@ -929,15 +900,15 @@
         </div>
       </div>
 
-      <div class="o-panel-content overflow-y-auto h-100" t-ref="panelContent">
-        <div class="h-100" t-att-class="{ 'd-none': state.panel !== 'configuration' }">
+      <div class="o-panel-content overflow-hidden h-100">
+        <div class="h-100" t-att-class="state.panel !== 'configuration' ? 'd-none' : ''">
           <t
             t-component="sidePanelEditor"
             pivotId="props.pivotId"
             onCloseSidePanel="props.onCloseSidePanel"
           />
         </div>
-        <div t-att-class="state.panel !== 'design' ? 'd-none' : ''">
+        <div class="h-100" t-att-class="state.panel !== 'design' ? 'd-none' : ''">
           <PivotDesignPanel pivotId="props.pivotId"/>
         </div>
       </div>
@@ -994,120 +965,117 @@
   </t>
 
   <t t-name="o-spreadsheet-PivotDesignPanel">
-    <Section class="'o-pivot-design'" title.translate="Display options">
-      <div>
-        <div class="container-fluid p-0 pt-2">
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Max rows:</div>
-            <div class="col-6 d-flex align-items-center">
-              <NumberInput
-                value="pivotStyle.numberOfRows ?? ''"
-                class="'o-pivot-n-of-rows'"
-                placeholder.translate="e.g. 10"
-                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
-              />
+    <div class="h-100 overflow-y-auto">
+      <Section class="'o-pivot-design'" title.translate="Display options">
+        <div>
+          <div class="container-fluid p-0 pt-2">
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Max rows:</div>
+              <div class="col-6 d-flex align-items-center">
+                <NumberInput
+                  value="pivotStyle.numberOfRows ?? ''"
+                  class="'o-pivot-n-of-rows'"
+                  placeholder.translate="e.g. 10"
+                  onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfRows')"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Max columns:</div>
-            <div class="col-6 d-flex align-items-center">
-              <NumberInput
-                value="pivotStyle.numberOfColumns ?? ''"
-                class="'o-pivot-n-of-columns'"
-                placeholder.translate="e.g. 5"
-                onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Max columns:</div>
+              <div class="col-6 d-flex align-items-center">
+                <NumberInput
+                  value="pivotStyle.numberOfColumns ?? ''"
+                  class="'o-pivot-n-of-columns'"
+                  placeholder.translate="e.g. 5"
+                  onChange="(value) => this.updatePivotStyleNumberProperty(value, 'numberOfColumns')"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show totals:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayTotals'"
-                value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
-                onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show totals:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayTotals'"
+                  value="pivotStyle.displayTotals ?? defaultStyle.displayTotals"
+                  onChange="(val) => this.updatePivotStyleProperty('displayTotals', val)"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show column titles:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayColumnHeaders'"
-                value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
-                onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show column titles:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayColumnHeaders'"
+                  value="pivotStyle.displayColumnHeaders ?? defaultStyle.displayColumnHeaders"
+                  onChange="(val) => this.updatePivotStyleProperty('displayColumnHeaders', val)"
+                />
+              </div>
             </div>
-          </div>
-          <div class="row mb-2 align-items-center">
-            <div class="col-6">Show measure titles:</div>
-            <div class="col-6 d-flex align-items-center">
-              <Checkbox
-                name="'displayMeasuresRow'"
-                value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
-                onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
-              />
+            <div class="row mb-2 align-items-center">
+              <div class="col-6">Show measure titles:</div>
+              <div class="col-6 d-flex align-items-center">
+                <Checkbox
+                  name="'displayMeasuresRow'"
+                  value="pivotStyle.displayMeasuresRow ?? defaultStyle.displayMeasuresRow"
+                  onChange="(val) => this.updatePivotStyleProperty('displayMeasuresRow', val)"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </Section>
+      </Section>
 
-    <Section class="'o-pivot-table-style'" title.translate="Pivot table style">
-      <div class="row mb-2 align-items-center pt-2">
-        <div class="col-6">Banded rows:</div>
-        <div class="col-6 d-flex align-items-center">
-          <Checkbox
-            name="'bandedRows'"
-            value="pivotStyle.bandedRows ?? defaultStyle.bandedRows"
-            onChange="(val) => this.updatePivotStyleProperty('bandedRows', val)"
-          />
+      <Section class="'o-pivot-table-style'" title.translate="Pivot table style">
+        <div class="row mb-2 align-items-center pt-2">
+          <div class="col-6">Banded rows:</div>
+          <div class="col-6 d-flex align-items-center">
+            <Checkbox
+              name="'bandedRows'"
+              value="pivotStyle.bandedRows ?? defaultStyle.bandedRows"
+              onChange="(val) => this.updatePivotStyleProperty('bandedRows', val)"
+            />
+          </div>
         </div>
-      </div>
-      <div class="row mb-2 align-items-center">
-        <div class="col-6">Banded columns</div>
-        <div class="col-6 d-flex align-items-center">
-          <Checkbox
-            name="'bandedColumns'"
-            value="pivotStyle.bandedColumns ?? defaultStyle.bandedColumns"
-            onChange="(val) => this.updatePivotStyleProperty('bandedColumns', val)"
-          />
+        <div class="row mb-2 align-items-center">
+          <div class="col-6">Banded columns</div>
+          <div class="col-6 d-flex align-items-center">
+            <Checkbox
+              name="'bandedColumns'"
+              value="pivotStyle.bandedColumns ?? defaultStyle.bandedColumns"
+              onChange="(val) => this.updatePivotStyleProperty('bandedColumns', val)"
+            />
+          </div>
         </div>
-      </div>
-      <div class="row mb-2 align-items-center">
-        <div class="col-6">Filter button</div>
-        <div class="col-6 d-flex align-items-center">
-          <Checkbox
-            name="'hasFilters'"
-            value="pivotStyle.hasFilters ?? defaultStyle.hasFilters"
-            onChange="(val) => this.updatePivotStyleProperty('hasFilters', val)"
+        <div class="row mb-2 align-items-center">
+          <div class="col-6">Filter button</div>
+          <div class="col-6 d-flex align-items-center">
+            <Checkbox
+              name="'hasFilters'"
+              value="pivotStyle.hasFilters ?? defaultStyle.hasFilters"
+              onChange="(val) => this.updatePivotStyleProperty('hasFilters', val)"
+            />
+          </div>
+        </div>
+        <div class="mt-4">
+          <TableStylePicker
+            tableConfig="tableConfig"
+            onStylePicked.bind="onStylePicked"
+            tableStyles="tableStyles"
+            type="'pivot'"
           />
         </div>
-      </div>
-      <div class="mt-4">
-        <TableStylePicker
-          tableConfig="tableConfig"
-          onStylePicked.bind="onStylePicked"
-          tableStyles="tableStyles"
-          type="'pivot'"
-        />
-      </div>
-    </Section>
+      </Section>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-PivotMeasureDisplayPanel">
     <Section title.translate="Show measure as:">
-      <select
-        class="o-pivot-measure-display-type o-input"
-        t-on-change="(ev) => this.store.updateMeasureDisplayType(ev.target.value)">
-        <t t-foreach="measureDisplayTypeLabels" t-as="measureType" t-key="measureType">
-          <option
-            t-att-value="measureType"
-            t-att-selected="measureType === store.measureDisplay.type"
-            t-esc="measureType_value"
-          />
-        </t>
-      </select>
+      <Select
+        class="'o-pivot-measure-display-type'"
+        values="measureDisplayTypeOptions"
+        selectedValue="store.measureDisplay.type"
+        onChange="(value) => this.store.updateMeasureDisplayType(value)"
+      />
       <div
         class="o-pivot-measure-display-description mt-3 ps-3 border-start"
         t-esc="measureDisplayDescription[store.measureDisplay.type]"
@@ -1146,7 +1114,7 @@
 
     <Section>
       <div class="o-sidePanelButtons">
-        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Cancel</button>
+        <button t-on-click="onCancel" class="o-pivot-measure-cancel o-button">Discard</button>
         <button t-on-click="onSave" class="o-pivot-measure-save o-button primary">Save</button>
       </div>
     </Section>
@@ -1321,24 +1289,17 @@
       <div class="d-flex flex-row">
         <div class="d-flex py-1 px-2 w-100 small">
           <div class="pivot-dim-operator-label">Aggregated by</div>
-          <select
-            class="o-input flex-grow-1"
-            t-on-change="(ev) => this.updateAggregator(ev.target.value)">
-            <option
-              t-foreach="Object.keys(props.aggregators[measure.type])"
-              t-as="agg"
-              t-key="agg"
-              t-att-value="agg"
-              t-att-selected="agg === measure.aggregator"
-              t-esc="props.aggregators[measure.type][agg]"
-            />
-            <option
-              t-if="measure.computedBy"
-              t-att-value="''"
-              t-att-selected="'' === measure.aggregator">
-              Compute from totals
-            </option>
-          </select>
+          <Select
+            class="'flex-grow-1'"
+            values="aggregatorOptions"
+            selectedValue="props.measure.aggregator"
+            onChange.bind="updateAggregator"
+          />
+        </div>
+      </div>
+      <div class="d-flex flex-row">
+        <div class="d-flex py-1 px-2 w-100 small text-muted o-measure-description">
+          <i t-esc="getMeasureDescription(measure)"/>
         </div>
       </div>
     </PivotDimension>
@@ -1348,18 +1309,12 @@
     <div class="d-flex">
       <div class="d-flex py-1 px-2 w-100 small">
         <div class="pivot-dim-operator-label">Order by</div>
-        <select
-          class="o-input flex-grow-1"
-          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
-          <option value="asc" t-att-selected="props.dimension.order === 'asc'">Ascending</option>
-          <option value="desc" t-att-selected="props.dimension.order === 'desc'">Descending</option>
-          <option
-            t-if="props.dimension.type !== 'date'"
-            value=""
-            t-att-selected="props.dimension.order === undefined">
-            Unsorted
-          </option>
-        </select>
+        <Select
+          class="'flex-grow-1'"
+          values="orderSelectOptions"
+          selectedValue="props.dimension.order || ''"
+          onChange="(value) => props.onUpdated(props.dimension, value)"
+        />
       </div>
     </div>
   </t>
@@ -1369,19 +1324,12 @@
       <div class="d-flex flex-row py-1 px-2 w-100 small">
         <t t-set="granularityProps" t-value="props.dimension.granularity || 'month'"/>
         <div class="pivot-dim-operator-label">Granularity</div>
-        <select
-          class="o-input flex-grow-1"
-          t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
-          <option
-            t-foreach="props.allGranularities"
-            t-as="granularity"
-            t-key="granularity"
-            t-if="props.availableGranularities.has(granularity) || granularity === granularityProps"
-            t-att-value="granularity"
-            t-esc="periods[granularity]"
-            t-att-selected="granularity === granularityProps or (granularity === 'month' and !granularityProps)"
-          />
-        </select>
+        <Select
+          class="'flex-grow-1'"
+          values="granularityOptions"
+          selectedValue="props.dimension.granularity || 'month'"
+          onChange="(value) => props.onUpdated(props.dimension, value)"
+        />
       </div>
     </div>
   </t>
@@ -1391,7 +1339,9 @@
       class="py-1 px-2 d-flex flex-column shadow-sm pivot-dimension border rounded"
       t-att-class="{'pivot-dimension-invalid': !props.dimension.isValid}">
       <div class="d-flex flex-row justify-content-between align-items-center">
-        <div class="d-flex align-items-center overflow-hidden text-nowrap">
+        <div
+          class="d-flex align-items-center overflow-hidden text-nowrap"
+          t-att-title="props.dimension.displayName">
           <span class="text-danger me-1" t-if="!props.dimension.isValid">
             <t t-call="o-spreadsheet-Icon.TRIANGLE_EXCLAMATION"/>
           </span>
@@ -1402,7 +1352,7 @@
             class="'o-fw-bold'"
             selectContentOnFocus="true"
           />
-          <span t-else="1" class="o-fw-bold" t-esc="props.dimension.displayName"/>
+          <span t-else="1" class="o-fw-bold text-truncate" t-esc="dimensionDisplayName"/>
         </div>
         <div class="d-flex flex-rows" t-on-pointerdown.stop="">
           <t t-slot="upper-right-icons"/>
@@ -1556,17 +1506,12 @@
   <t t-name="o-spreadsheet-CustomCurrencySection">
     <t t-set="availableCurrencies" t-value="store.availableCurrencies"/>
     <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
-      <select
-        class="o-input o-available-currencies"
-        t-on-change="(ev) => this.updateSelectCurrency(ev)">
-        <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
-          <option
-            t-att-value="currency_index"
-            t-esc="currencyDisplayName(currency)"
-            t-att-selected="currency_index === store.selectedCurrencyIndex"
-          />
-        </t>
-      </select>
+      <Select
+        class="'o-available-currencies'"
+        values="availableCurrenciesOptions"
+        selectedValue="store.selectedCurrencyIndex.toString()"
+        onChange.bind="updateSelectCurrency"
+      />
     </Section>
     <Section>
       <div class="o-subsection-left">
@@ -1598,7 +1543,7 @@
   </t>
 
   <t t-name="o-spreadsheet-FindAndReplacePanel">
-    <div class="o-find-and-replace">
+    <div class="o-find-and-replace" t-on-keydown="onKeydownPanel">
       <Section title.translate="Search">
         <div class="o-input-search-container">
           <input
@@ -1631,14 +1576,13 @@
             </button>
           </div>
         </div>
-        <select
-          class="o-input o-type-range-selector mt-3 mb-3"
-          t-on-change="changeSearchScope"
-          t-att-value="searchOptions.searchScope">
-          <option value="allSheets">All sheets</option>
-          <option value="activeSheet">Current sheet</option>
-          <option value="specificRange">Specific range</option>
-        </select>
+        <Select
+          class="'o-type-range-selector mt-3 mb-3'"
+          values="searchScopeOptions"
+          selectedValue="searchOptions.searchScope"
+          onChange.bind="changeSearchScope"
+        />
+
         <div t-if="searchOptions.searchScope === 'specificRange'">
           <SelectionInput
             t-key="selectionInputKey"
@@ -1675,33 +1619,35 @@
           <ValidationMessages msgType="'info'" messages="searchInfo" singleBox="true"/>
         </div>
       </Section>
-      <Section class="'pt-0'" t-if="!env.model.getters.isReadonly()" title.translate="Replace">
-        <div class="o-input-search-container">
-          <input
-            type="text"
-            class="o-input o-input-without-count o-replace"
-            t-on-keydown="onKeydownReplace"
-            t-model="store.toReplace"
-            placeholder="e.g. 'replace me'"
-          />
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons" t-if="!env.model.getters.isReadonly()">
-          <button
-            t-att-disabled="store.selectedMatchIndex === null"
-            t-on-click="() => store.replace()"
-            class="o-button o-replace">
-            Replace
-          </button>
-          <button
-            t-att-disabled="store.selectedMatchIndex === null"
-            t-on-click="() => store.replaceAll()"
-            class="o-button o-replace-all">
-            Replace all
-          </button>
-        </div>
-      </Section>
+      <t t-if="!env.model.getters.isReadonly()">
+        <Section class="'pt-0'" title.translate="Replace">
+          <div class="o-input-search-container">
+            <input
+              type="text"
+              class="o-input o-input-without-count o-replace"
+              t-on-keydown="onKeydownReplace"
+              t-model="store.toReplace"
+              placeholder="e.g. 'replace me'"
+            />
+          </div>
+        </Section>
+        <Section>
+          <div class="o-sidePanelButtons">
+            <button
+              t-att-disabled="store.selectedMatchIndex === null"
+              t-on-click="() => store.replace()"
+              class="o-button o-replace">
+              Replace
+            </button>
+            <button
+              t-att-disabled="store.selectedMatchIndex === null"
+              t-on-click="() => store.replaceAll()"
+              class="o-button o-replace-all">
+              Replace all
+            </button>
+          </div>
+        </Section>
+      </t>
     </div>
   </t>
 
@@ -1745,12 +1691,12 @@
       <Section class="'pt-0'">
         <div class="o-subsection o-dv-settings">
           <div class="o-section-title">Criteria</div>
-          <SelectMenu
-            class="'o-dv-type o-input mb-2'"
-            menuItems="dvCriterionMenuItems"
-            selectedValue="selectedCriterionName"
+          <Select
+            class="'o-dv-type mb-2'"
+            values="dvCriterionOptions"
+            selectedValue="state.rule.criterion.type"
+            onChange.bind="onCriterionTypeChanged"
           />
-
           <t
             t-if="criterionComponent"
             t-component="criterionComponent"
@@ -1763,15 +1709,17 @@
       </Section>
 
       <Section class="'o-dv-invalid-option pt-0'" title.translate="If the data is invalid">
-        <select class="o-dv-reject-input o-input" t-on-change="changeRuleIsBlocking">
-          <option t-att-selected="!state.rule.isBlocking" value="false">Show a warning</option>
-          <option t-att-selected="state.rule.isBlocking" value="true">Reject the input</option>
-        </select>
+        <Select
+          class="'o-dv-reject-input pt-0'"
+          values="isRuleBlockingSelectOptions"
+          selectedValue="state.rule.isBlocking ? 'true' : 'false'"
+          onChange.bind="changeRuleIsBlocking"
+        />
       </Section>
 
       <Section>
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-dv-cancel o-button">Cancel</button>
+          <button t-on-click="onCancel" class="o-dv-cancel o-button">Discard</button>
           <button t-on-click="onSave" class="o-dv-save o-button primary">Save</button>
         </div>
       </Section>
@@ -1802,36 +1750,35 @@
     </t>
 
     <div class="o-section-subtitle mt-4">Display style</div>
-    <select class="o-dv-display-style o-input" t-on-change="onChangedDisplayStyle">
-      <option t-att-selected="props.criterion.displayStyle === 'chip'" value="chip">Chip</option>
-      <option t-att-selected="props.criterion.displayStyle === 'arrow'" value="arrow">Arrow</option>
-      <option t-att-selected="props.criterion.displayStyle === 'plainText'" value="plainText">
-        Plain text
-      </option>
-    </select>
+    <Select
+      class="'o-dv-display-style'"
+      values="displayTypeOptions"
+      selectedValue="props.criterion.displayStyle"
+      onChange.bind="onChangedDisplayStyle"
+    />
   </t>
 
   <t t-name="o-spreadsheet-ListCriterionForm">
-    <t t-foreach="displayedValues" t-as="value" t-key="value_index">
+    <t t-foreach="this.state.items" t-as="item" t-key="item_index">
       <div class="o-dv-list-values d-flex align-items-center">
         <div class="me-1">
           <RoundColorPicker
-            currentColor="props.criterion.colors?.[value] || '#E7E9ED'"
-            onColorPicked="(c) => this.onColorChanged(c, value)"
+            currentColor="item.color || '#E7E9ED'"
+            onColorPicked="(c) => this.onColorChanged(item_index, c)"
           />
         </div>
         <CriterionInput
-          value="props.criterion.values[value_index]"
-          onValueChanged="(v) => this.onValueChanged(v, value_index)"
+          value="item.value"
+          onValueChanged="(v) => this.onValueChanged(item_index, v)"
           criterionType="props.criterion.type"
-          onKeyDown="(ev) => this.onKeyDown(ev, value_index)"
-          focused="value_index === state.focusedValueIndex"
+          onKeyDown="(ev) => this.onKeyDown(ev, item_index)"
+          focused="item_index === this.state.focusedValueIndex"
           onBlur.bind="onBlurInput"
           disableFormulas="props.disableFormulas"
         />
         <div
           class="o-dv-list-item-delete ms-2 o-button-icon"
-          t-on-click="() => this.removeItem(value_index)">
+          t-on-click="() => this.removeItem(item_index)">
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </div>
       </div>
@@ -1842,21 +1789,22 @@
     </button>
 
     <div class="o-section-subtitle">Display style</div>
-    <select class="o-dv-display-style o-input" t-on-change="onChangedDisplayStyle">
-      <option t-att-selected="props.criterion.displayStyle === 'chip'" value="chip">Chip</option>
-      <option t-att-selected="props.criterion.displayStyle === 'arrow'" value="arrow">Arrow</option>
-      <option t-att-selected="props.criterion.displayStyle === 'plainText'" value="plainText">
-        Plain text
-      </option>
-    </select>
+    <Select
+      class="'o-dv-display-style'"
+      values="displayTypeOptions"
+      selectedValue="props.criterion.displayStyle"
+      onChange.bind="onChangedDisplayStyle"
+    />
   </t>
 
   <t t-name="o-spreadsheet-Top10CriterionForm">
     <div class="o-top-10-criterion d-flex flex-row align-items-center gap-2 w-100 mt-2">
-      <select class="o-top-10-select-values o-input flex-shrink-0" t-on-change="updateIsBottom">
-        <option value="top" t-att-selected="!props.criterion.isBottom">Top</option>
-        <option value="bottom" t-att-selected="props.criterion.isBottom">Bottom</option>
-      </select>
+      <Select
+        class="'o-top-10-select-values flex-shrink-0'"
+        values="isBottomSelectOptions"
+        selectedValue="props.criterion.isBottom ? 'bottom' : 'top'"
+        onChange.bind="updateIsBottom"
+      />
       <CriterionInput
         value="props.criterion.values[0]"
         onValueChanged.bind="onValueChanged"
@@ -1864,10 +1812,12 @@
         disableFormulas="true"
         focused="props.autofocus"
       />
-      <select class="o-top-10-select-mode o-input flex-shrink-0" t-on-change="updateIsPercent">
-        <option value="values" t-att-selected="!props.criterion.isPercent">Values</option>
-        <option value="percent" t-att-selected="props.criterion.isPercent">Percent</option>
-      </select>
+      <Select
+        class="'o-top-10-select-mode flex-shrink-0'"
+        values="isPercentSelectOptions"
+        selectedValue="props.criterion.isPercent ? 'percent' : 'values'"
+        onChange.bind="updateIsPercent"
+      />
     </div>
   </t>
 
@@ -1898,16 +1848,12 @@
   </t>
 
   <t t-name="o-spreadsheet-DataValidationDateCriterion">
-    <select class="o-dv-date-value o-input mb-4" t-on-change="onDateValueChanged">
-      <option
-        t-foreach="dateValues"
-        t-as="dateValue"
-        t-key="dateValue.value"
-        t-att-value="dateValue.value"
-        t-esc="dateValue.title"
-        t-att-selected="dateValue.value === currentDateValue"
-      />
-    </select>
+    <Select
+      class="'o-dv-date-value mb-4'"
+      values="dateValues"
+      selectedValue="currentDateValue"
+      onChange.bind="onDateValueChanged"
+    />
 
     <CriterionInput
       t-if="currentDateValue === 'exactDate'"
@@ -2055,17 +2001,12 @@
       </td>
       <td>When value is</td>
       <td>
-        <select
-          class="o-input"
-          name="valueType"
-          t-on-change="(ev) => store.setInflectionOperator(inflectionPoint, ev.target.value)">
-          <option value="gt" t-att-selected="inflectionPointValue.operator === 'gt'">
-            <span>&#62;</span>
-          </option>
-          <option value="ge" t-att-selected="inflectionPointValue.operator === 'ge'">
-            <span>&#8805;</span>
-          </option>
-        </select>
+        <Select
+          selectedValue="inflectionPointValue.operator"
+          name="'valueType'"
+          values="getIconSetOperatorSelectOptions()"
+          onChange.bind="(value) => store.setInflectionOperator(inflectionPoint, value)"
+        />
       </td>
       <td>
         <div class="ms-2 me-2">
@@ -2081,23 +2022,13 @@
         </div>
       </td>
       <td>
-        <select
-          class="o-input"
-          name="valueType"
-          t-on-change="(ev) => store.setInflectionType(inflectionPoint, ev.target.value)">
-          <option value="number" t-att-selected="inflectionPointValue.type === 'number'">
-            Number
-          </option>
-          <option value="percentage" t-att-selected="inflectionPointValue.type === 'percentage'">
-            Percentage
-          </option>
-          <option value="percentile" t-att-selected="inflectionPointValue.type === 'percentile'">
-            Percentile
-          </option>
-          <option value="formula" t-att-selected="inflectionPointValue.type === 'formula'">
-            Formula
-          </option>
-        </select>
+        <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>
@@ -2187,37 +2118,22 @@
     <div
       t-attf-class="o-threshold o-threshold-{{thresholdType}} d-flex align-items-center flex-row">
       <t t-if="thresholdType === 'midpoint'">
-        <t t-set="type" t-value="threshold and threshold.type"/>
-        <select
-          class="o-input me-2"
-          name="valueType"
-          t-on-change="(ev) => store.onMidpointChange(ev.target.value)"
-          t-att-class="{ 'o-select-with-input': threshold and threshold.type !== 'value' }"
-          t-on-click="() => store.closeMenus()">
-          <option value="none" t-att-selected="threshold === undefined">None</option>
-          <option value="number" t-att-selected="type === 'number'">Fixed Number</option>
-          <option value="percentage" t-att-selected="type === 'percentage'">Percentage</option>
-          <option value="percentile" t-att-selected="type === 'percentile'">Percentile</option>
-          <option value="formula" t-att-selected="type === 'formula'">Formula</option>
-        </select>
+        <Select
+          selectedValue="threshold?.type || 'none'"
+          class="'me-2'  + (threshold and threshold.type !== 'value' ? ' o-select-with-input' : '')"
+          name="'valueType'"
+          values="getThresholdTypeSelectOptions(thresholdType)"
+          onChange.bind="(value) => store.onMidpointChange(value)"
+        />
       </t>
       <t t-else="">
-        <select
-          class="o-input me-2"
-          name="valueType"
-          t-on-change="(ev) => store.updateThresholdType(thresholdType, ev.target.value)"
-          t-on-click="() => store.closeMenus()"
-          t-att-class="{ 'o-select-with-input': threshold?.type !== 'value' }">
-          <option value="value" t-att-selected="threshold.type === 'value'">Cell values</option>
-          <option value="number" t-att-selected="threshold.type === 'number'">Number</option>
-          <option value="percentage" t-att-selected="threshold.type === 'percentage'">
-            Percentage
-          </option>
-          <option value="percentile" t-att-selected="threshold.type === 'percentile'">
-            Percentile
-          </option>
-          <option value="formula" t-att-selected="threshold.type === 'formula'">Formula</option>
-        </select>
+        <Select
+          selectedValue="threshold?.type || 'none'"
+          class="'me-2'  + (threshold and threshold.type !== 'value' ? ' o-select-with-input' : '')"
+          name="'valueType'"
+          values="getThresholdTypeSelectOptions(thresholdType)"
+          onChange.bind="(value) => store.updateThresholdType(thresholdType, value)"
+        />
       </t>
       <div class="o-threshold-value me-2" t-if="threshold and threshold.type !== 'value'">
         <input
@@ -2307,7 +2223,7 @@
       </Section>
       <Section class="'pt-1'">
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-button o-cf-cancel">Cancel</button>
+          <button t-on-click="onCancel" class="o-button o-cf-cancel">Discard</button>
           <button
             t-on-click="onSave"
             class="o-button primary o-cf-save"
@@ -2341,10 +2257,11 @@
     <t t-set="state" t-value="store.state"/>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
-      <SelectMenu
-        class="'o-cell-is-operator o-input mb-2'"
-        menuItems="store.cfCriterionMenuItems"
-        selectedValue="store.selectedCriterionName"
+      <Select
+        class="'o-cell-is-operator mb-2'"
+        values="store.cfCriterions"
+        selectedValue="state.rules.cellIs.operator"
+        onChange="(operator) => store.editOperator(operator)"
       />
 
       <t
@@ -2926,15 +2843,11 @@
           onSelectionConfirmed="() => this.updateBaselineRange()"
         />
         <div class="o-section-subtitle">Format</div>
-        <select
-          t-att-value="props.definition.baselineMode"
-          class="o-input"
-          t-on-change="(ev) => this.updateBaselineMode(ev)">
-          <option value="text">Absolute value</option>
-          <option value="difference">Value change from key value</option>
-          <option value="percentage">Percentage change from key value</option>
-          <option value="progress">Progress bar</option>
-        </select>
+        <Select
+          selectedValue="props.definition.baselineMode"
+          values="baselineModeOptions"
+          onChange.bind="this.updateBaselineMode"
+        />
       </Section>
 
       <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
@@ -3020,27 +2933,31 @@
       </div>
 
       <t t-set="definition" t-value="getChartDefinition(this.chartId)"/>
-      <div class="o-panel-content" t-ref="panelContent">
-        <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
-          <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
-          <t
-            t-component="chartPanel.configuration"
-            definition="definition"
-            chartId="chartId"
-            updateChart.bind="updateChart"
-            canUpdateChart.bind="canUpdateChart"
-            t-key="chartId + definition.type"
-          />
+      <div class="o-panel-content h-100 overflow-y-hidden">
+        <div class="h-100" t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
+          <div class="h-100 overflow-y-auto">
+            <ChartTypePicker chartId="chartId" chartPanelStore="store"/>
+            <t
+              t-component="chartPanel.configuration"
+              definition="definition"
+              chartId="chartId"
+              updateChart.bind="updateChart"
+              canUpdateChart.bind="canUpdateChart"
+              t-key="chartId + definition.type"
+            />
+          </div>
         </div>
-        <div t-att-class="store.panel !== 'design' ? 'd-none' : ''">
-          <t
-            t-component="chartPanel.design"
-            definition="definition"
-            chartId="chartId"
-            updateChart.bind="updateChart"
-            canUpdateChart.bind="canUpdateChart"
-            t-key="chartId + definition.type"
-          />
+        <div class="h-100" t-att-class="store.panel !== 'design' ? 'd-none' : ''">
+          <div class="h-100 overflow-y-auto">
+            <t
+              t-component="chartPanel.design"
+              definition="definition"
+              chartId="chartId"
+              updateChart.bind="updateChart"
+              canUpdateChart.bind="canUpdateChart"
+              t-key="chartId + definition.type"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -3145,15 +3062,11 @@
 
   <t t-name="o-spreadsheet-GeoChartRegionSelectSection">
     <Section class="'o-geo-region'" title.translate="Region">
-      <select class="o-input" t-on-change="this.updateSelectedRegion">
-        <t t-foreach="availableRegions" t-as="region" t-key="region.id">
-          <option
-            t-att-value="region.id"
-            t-esc="region.label"
-            t-att-selected="region.id === selectedRegion"
-          />
-        </t>
-      </select>
+      <Select
+        selectedValue="selectedRegion"
+        values="regionOptions"
+        onChange.bind="this.updateSelectedRegion"
+      />
     </Section>
   </t>
 
@@ -3161,16 +3074,12 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'bottom-left'"
-            class="o-input o-chart-legend-position"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="top">Top left</option>
-            <option value="right">Top right</option>
-            <option value="bottom">Bottom right</option>
-            <option value="left">Bottom left</option>
-          </select>
+          <Select
+            selectedValue="props.definition.legendPosition ?? 'bottom'"
+            values="legendValues"
+            class="'o-chart-legend-position'"
+            onChange.bind="this.updateLegendPosition"
+          />
         </Section>
         <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
@@ -3287,7 +3196,7 @@
         <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="sectionRule.lowerInflectionPoint"/>
+          <t t-set="inflectionPoint" t-value="'lowerInflectionPoint'"/>
           <t t-set="isInvalid" t-value="isLowerInflectionPointInvalid"/>
           <t t-set="inflectionPointName" t-value="'lowerInflectionPoint'"/>
         </t>
@@ -3295,7 +3204,7 @@
         <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="sectionRule.upperInflectionPoint"/>
+          <t t-set="inflectionPoint" t-value="'upperInflectionPoint'"/>
           <t t-set="isInvalid" t-value="isUpperInflectionPointInvalid"/>
           <t t-set="inflectionPointName" t-value="'upperInflectionPoint'"/>
         </t>
@@ -3328,28 +3237,23 @@
       <td class="pe-2">
         <t t-set="below">below</t>
         <t t-set="belowOrEqualTo">below or equal to</t>
-        <select
-          class="o-input"
-          name="operatorType"
-          t-att-title="inflectionPoint.operator === '&lt;' ? below : belowOrEqualTo"
-          t-model="inflectionPoint.operator"
-          t-on-change="() => this.updateSectionRule(state.sectionRule)">
-          <option title="below" value="&lt;">&lt;</option>
-          <option title="below or equal to" value="&lt;=">&lt;=</option>
-        </select>
+        <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
-          class="o-input"
-          name="valueType"
-          t-model="inflectionPoint.type"
-          t-on-change="(ev) => this.updateSectionRule(state.sectionRule)">
-          <option value="number">Number</option>
-          <option value="percentage">Percentage</option>
-        </select>
+        <Select
+          selectedValue="sectionRule[inflectionPoint].type"
+          name="'valueType'"
+          values="inflectionPointTypes"
+          onChange.bind="(value) => this.updateSectionRulePointType(inflectionPoint, value)"
+        />
       </td>
     </tr>
   </t>
@@ -3918,14 +3822,12 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'pt-0'" title.translate="Legend position">
-          <select
-            t-att-value="props.definition.legendPosition ?? 'bottom-left'"
-            class="o-input o-chart-legend-position"
-            t-on-change="this.updateLegendPosition">
-            <option value="none">None</option>
-            <option value="right">Right</option>
-            <option value="left">Left</option>
-          </select>
+          <Select
+            selectedValue="props.definition.legendPosition ?? 'left'"
+            values="legendValues"
+            class="'o-chart-legend-position'"
+            onChange.bind="this.updateLegendPosition"
+          />
         </Section>
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
@@ -3978,33 +3880,21 @@
       <Section title.translate="Fields to group by">
         <div class="d-flex">
           <span class="w-100">Horizontal axis</span>
-          <select
-            t-att-value="getGroupByType('horizontal')"
-            class="o-input o-horizontal-group-by"
-            t-on-change="ev => this.updateGroupBy('horizontal', ev.target.value)">
-            <t t-foreach="getGroupByOptions()" t-as="groupBy" t-key="groupBy.value">
-              <option
-                t-att-selected="getGroupByType('horizontal') === groupBy.value"
-                t-att-value="groupBy.value">
-                <t t-esc="groupBy.label"/>
-              </option>
-            </t>
-          </select>
+          <Select
+            selectedValue="getGroupByType('horizontal') || ''"
+            values="getGroupByOptions()"
+            class="'o-horizontal-group-by'"
+            onChange="(value) => this.updateGroupBy('horizontal', value)"
+          />
         </div>
         <div class="d-flex">
           <span class="w-100">Vertical axis</span>
-          <select
-            t-att-value="getGroupByType('vertical')"
-            class="o-input o-vertical-group-by"
-            t-on-change="ev => this.updateGroupBy('vertical', ev.target.value)">
-            <t t-foreach="getGroupByOptions()" t-as="groupBy" t-key="groupBy.value">
-              <option
-                t-att-selected="getGroupByType('vertical') === groupBy.value"
-                t-att-value="groupBy.value">
-                <t t-esc="groupBy.label"/>
-              </option>
-            </t>
-          </select>
+          <Select
+            selectedValue="getGroupByType('vertical') || ''"
+            values="getGroupByOptions()"
+            class="'o-vertical-group-by'"
+            onChange="(value) => this.updateGroupBy('vertical', value)"
+          />
         </div>
       </Section>
 
@@ -4141,25 +4031,12 @@
               <div class="d-flex py-2">
                 <div class="w-100">
                   <span class="o-section-subtitle">Type</span>
-                  <select
-                    class="o-input trend-type-selector"
-                    t-on-change="(ev) => this.onChangeTrendType(index, ev)">
-                    <option value="linear" t-att-selected="trendType === 'linear'">Linear</option>
-                    <option value="exponential" t-att-selected="trendType === 'exponential'">
-                      Exponential
-                    </option>
-                    <option value="polynomial" t-att-selected="trendType === 'polynomial'">
-                      Polynomial
-                    </option>
-                    <option value="logarithmic" t-att-selected="trendType === 'logarithmic'">
-                      Logarithmic
-                    </option>
-                    <option
-                      value="trailingMovingAverage"
-                      t-att-selected="trendType === 'trailingMovingAverage'">
-                      Trailing moving average
-                    </option>
-                  </select>
+                  <Select
+                    selectedValue="trendType"
+                    values="trendOptions"
+                    class="'trend-type-selector'"
+                    onChange="(value) => this.onChangeTrendType(index, value)"
+                  />
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'trailingMovingAverage'">
                   <span class="o-section-subtitle">Window</span>
@@ -4172,16 +4049,12 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
                   <span class="o-section-subtitle">Degree</span>
-                  <select
-                    t-att-value="trend.order"
-                    class="o-input trend-order-input"
-                    t-on-change="(ev) => this.onChangePolynomialDegree(index, ev)">
-                    <t t-foreach="getPolynomialDegrees(index)" t-as="degree" t-key="degree">
-                      <option t-att-value="degree">
-                        <t t-esc="degree"/>
-                      </option>
-                    </t>
-                  </select>
+                  <Select
+                    selectedValue="trend.order.toString()"
+                    values="getPolynomialDegrees(index)"
+                    class="'trend-order-input'"
+                    onChange="(value) => this.onChangePolynomialDegree(index, value)"
+                  />
                 </div>
               </div>
               <div class="d-flex align-items-center">
@@ -4202,18 +4075,12 @@
     <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Data Series">
       <t t-set-slot="content">
         <Section class="'pt-0 pb-0'">
-          <select
-            class="o-input data-series-selector"
-            t-model="state.label"
-            t-on-change="(ev) => this.updateEditedSeries(ev)">
-            <t t-foreach="getDataSeries()" t-as="serie" t-key="serie_index">
-              <option
-                t-att-value="serie"
-                t-att-selected="state.index === serie_index"
-                t-esc="serie"
-              />
-            </t>
-          </select>
+          <Select
+            selectedValue="state.index.toString()"
+            values="selectOptions"
+            class="'data-series-selector'"
+            onChange.bind="this.updateEditedSeries"
+          />
           <Section class="'px-0'">
             <div class="d-flex align-items-center">
               <span class="o-section-title mb-0 pe-2">Series color</span>
@@ -4254,16 +4121,12 @@
 
   <t t-name="o-spreadsheet-ChartLegend">
     <Section class="'pt-0'" title.translate="Legend position">
-      <select
-        t-att-value="props.definition.legendPosition ?? 'top'"
-        class="o-input o-chart-legend-position"
-        t-on-change="this.updateLegendPosition">
-        <option value="none">None</option>
-        <option value="top">Top</option>
-        <option value="bottom">Bottom</option>
-        <option value="left">Left</option>
-        <option value="right">Right</option>
-      </select>
+      <Select
+        selectedValue="props.definition.legendPosition ?? 'top'"
+        values="legendValues"
+        class="'o-chart-legend-position'"
+        onChange.bind="this.updateLegendPosition"
+      />
     </Section>
   </t>
 
@@ -4663,7 +4526,7 @@
             spellcheck="false"
             placeholder="e.g. A1:A2"
             t-on-input="(ev) => this.onInputChanged(range.id, ev)"
-            t-on-focus="() => this.focus(range.id)"
+            t-on-click="() => this.focus(range.id)"
             t-on-keydown="onKeydown"
             t-att-value="range.xc"
             t-att-style="getColor(range)"
@@ -4672,7 +4535,7 @@
               'o-disabled-ranges' : range.disabled and !range.isFocused,
               'o-focused' : range.isFocused,
               'o-invalid border-danger position-relative': isInvalid || !range.isValidRange,
-              'text-decoration-underline': range.xc and range.isFocused and state.mode === 'select-range'
+              'text-decoration-underline': range.xc and range.isFocused and store.mode === 'select-range'
             }"
             t-ref="{{range.isFocused ? 'focusedInput' : 'unfocusedInput' + range_index}}"
           />
@@ -4700,13 +4563,12 @@
         <button class="o-button o-add-selection" t-if="canAddRange" t-on-click="addEmptyInput">
           Add range
         </button>
-        <div class="ms-auto" t-if="store.hasFocus">
+        <div class="ms-auto" t-if="store.hasFocus or isResettable">
           <button class="o-button o-selection-ko" t-if="isResettable" t-on-click="reset">
             Reset
           </button>
           <button
             class="o-button primary ms-2 o-selection-ok"
-            t-if="store.hasFocus"
             t-att-disabled="!isConfirmable"
             t-on-click="confirm">
             Confirm
@@ -4720,6 +4582,41 @@
     <Highlight t-props="highlightProps"/>
   </t>
 
+  <t t-name="o-spreadsheet-Select">
+    <div
+      tabIndex="0"
+      t-ref="selectRef"
+      class="o-input o-select"
+      t-att-class="props.class"
+      t-att-name="props.name"
+      t-on-pointerdown="onMouseDown"
+      t-on-keydown="onKeyDown"
+      t-esc="selectedLabel"
+    />
+
+    <Popover t-if="state.isPopoverOpen" t-props="popoverProps">
+      <div
+        class="o-select-dropdown bg-white overflow-hidden py-2"
+        t-att-class="props.popoverClass"
+        t-ref="dropdownRef">
+        <t t-foreach="props.values" t-as="value" t-key="value_index">
+          <div
+            class="o-select-option"
+            t-att-class="{
+              'o-active': value.value === activeValue
+            }"
+            t-att-data-id="value.value"
+            t-esc="value.label"
+            t-att-title="value.label"
+            t-on-click="() => this.onOptionClick(value.value)"
+            t-on-mouseenter="() => this.onOptionHover(value.value)"
+          />
+          <div t-if="value.separator and !value_last" class="o-separator border-bottom"/>
+        </t>
+      </div>
+    </Popover>
+  </t>
+
   <t t-name="o-spreadsheet-ScrollBar">
     <div class="o-scrollbar" t-on-scroll="onScroll" t-ref="scrollbar" t-att-style="positionCss">
       <div t-att-style="sizeCss"/>
@@ -4794,7 +4691,7 @@
     <span
       class="o-menu-item-button"
       title="Paint Format"
-      t-att-class="{active: isActive}"
+      t-att-class="{'active': isActive, 'o-disabled': env.model.getters.isCurrentSheetLocked()}"
       t-attf-class="{{props.class}}"
       t-on-click="togglePaintFormat"
       t-on-dblclick="onDblClick">
@@ -4859,7 +4756,7 @@
   </t>
 
   <t t-name="o-spreadsheet-Menu-Popover">
-    <Popover t-if="props.menuItems" t-props="popoverProps">
+    <Popover t-if="menuItems.length" t-props="popoverProps">
       <div
         t-ref="menu"
         class="o-menu-wrapper bg-white"
@@ -4892,7 +4789,7 @@
       t-on-pointerdown.prevent=""
       t-on-click.stop=""
       t-on-contextmenu.prevent="">
-      <t t-foreach="menuItemsAndSeparators" t-as="menuItem" t-key="menuItem_index">
+      <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)"/>
@@ -4916,7 +4813,7 @@
                 <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
               </div>
               <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
-              <t t-set="description" t-value="menuItem.description(env)"/>
+              <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"
@@ -4998,7 +4895,7 @@
         onClose="() => this.menu.isOpen=false"
       />
       <div class="o-buttons">
-        <button t-on-click="cancel" class="o-button o-cancel me-2">Cancel</button>
+        <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">
           Confirm
         </button>
@@ -5756,6 +5653,11 @@
       <circle fill="currentColor" cx="14" cy="9" r="4"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.CARET_SORT">
+    <svg class="o-icon" viewBox="0 0 512 512">
+      <path fill="currentColor" d="M40 240 h320 l-160 -160 M40 280 h320 l-160 160"/>
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.SORT_RANGE">
     <svg class="o-icon">
       <path
@@ -5984,10 +5886,10 @@
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.PIVOT">
-    <svg class="o-icon" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon">
       <path
         fill="currentColor"
-        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+        d="M15.5 2A1.5 1.5 0 0 1 17 3.5V14a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 1 14V7.5A1.5 1.5 0 0 1 2.5 6H5V3.5A1.5 1.5 0 0 1 6.5 2H17m-1.5 1.5h-9V6h9m-13 1.5V10H5V7.5m-2.5 4V14H5v-2.5m1.5-4V10h9V7.5m-9 4V14h9v-2.5"
       />
     </svg>
   </t>
@@ -6017,7 +5919,7 @@
       </defs>
       <path
         fill="currentColor"
-        d="M17 2v14H1V6h4V2h12m-1 1H6v3h10M2 7v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2m1-6v2h6V7m-6 3v2h6v-2m-6 3v2h6v-2m1-6v2h3V7m-3 3v2h3v-2m-3 3v2h3v-2"
+        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
@@ -6068,7 +5970,7 @@
     <svg class="o-icon" viewBox="0 0 122.88 99.75">
       <path
         fill="currentColor"
-        d="M29.09,0h64.7A5.21,5.21,0,0,1,99,5.18v89.4a5.19,5.19,0,0,1-5.18,5.17H29.09a5.19,5.19,0,0,1-5.17-5.18V5.18A5.21,5.21,0,0,1,29.09,0Zm78.52,12.46,10.59-1.52a4.71,4.71,0,0,1,4.68,4.69v68.5a4.71,4.71,0,0,1-4.68,4.68L107.77,88a1.35,1.35,0,0,1-1.31-1.34V83.14a1.34,1.34,0,0,1,1.44-1.23l8.91.73V17.22l-9,1.34a1.34,1.34,0,0,1-1.34-1.34V13.78a1.34,1.34,0,0,1,1.15-1.32ZM5,11l10.31,1.49a1.33,1.33,0,0,1,1.14,1.32v3.44a1.34,1.34,0,0,1-1.34,1.34l-9-1.34V82.64L15,81.91a1.33,1.33,0,0,1,1.43,1.23v3.49A1.35,1.35,0,0,1,15.11,88l-10.43.84A4.71,4.71,0,0,1,0,84.13V15.63a4.73,4.73,0,0,1,4.68-4.69L5,11Zm87.93-4.9H30v87.6h62.9V6.07Z"
+        d="M29.09 0h65.7A5.2 5.2 0 0 1 99 5.2v89.4a5.2 5.2 0 0 1-5.2 5.2H29.1a5.2 5.2 0 0 1-5.2-5.2V5.2A5.2 5.2 0 0 1 29.1 0m89 9a4.7 4.7 0 0 1 4.7 4.7v71a4.7 4.7 0 0 1-4.7 4.7L106.8 91a1.4 1.35 0 0 1-1.3-1.3V81a1.3 1.3 0 0 1 1.4-1.2l6.9.7V17.2l-7 1a1.3 1.3 0 0 1-1.3-1.3V9a1.3 1.3 0 0 1 1.2-1.3ZM5 9l11.3-1a1.3 1.3 0 0 1 1.1 1.3v7.4a1.3 1.3 0 0 1-1.3 1.3l-7-1v64l6.9-1a1.3 1.3 0 0 1 1.4 1.2v9.5a1.4 1.4 0 0 1-2.3.3L4.7 89.2a4.7 4.7 0 0 1-4.7-5V13.7A4.7 4.7 0 0 1 4.7 9zm83 1H35v78h53Z"
       />
     </svg>
   </t>
@@ -6110,51 +6012,61 @@
     </div>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-0">
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      transform="rotate(270)"
-      xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        d="M1.5 14v-2h11v-2l4 3-4 3v-2m-4-8V4h4V2l4 3-4 3V6m-11 3 2.8-7h1.2l2.8 7-1.12.43-.7-1.9H3.3l-.7 1.9L1.48 9m2.25-2.7h2.3l-1.1-2.8z"
         fill="currentColor"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-45">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="m1.95 6.879.707-.707 8.485 8.485 1.06-1.06v2.828H9.375l1.061-1.061m.706-7.778.707-.707 3.536 3.535 1.06-1.06v2.828h-2.828l1.06-1.06M4.071 4.757l6.93-2.97.848.849-2.97 6.93-1.096-.488.849-1.839-2.249-2.248-1.838.848-.488-1.096m3.5-.318 1.626 1.626 1.203-2.757z"
+        d="m.743 7.086 1.414-1.414 7.778 7.778 1.414-1.414.707 4.95-4.95-.708 1.415-1.414m2.121-7.778 1.414-1.414L14.885 8.5l1.414-1.414.707 4.95-4.95-.708 1.415-1.414m-9.9-5.657 6.93-2.97.848.849-2.97 6.93-1.096-.488.849-1.839-2.249-2.248-1.838.848-.488-1.096m3.5-.318 1.626 1.626 1.203-2.757z"
         fill="currentColor"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-90">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="M5 2h1v12h1.5l-2 2-2-2H5m6-5h1v5h1.5l-2 2-2-2H11M8 2l7 2.8V6L8 8.8l-.43-1.12 1.9-.7V3.8l-1.9-.7L8 1.98m2.7 2.25v2.3l2.8-1.1z"
+        d="M4 1.5h2v11h2l-3 4-3-4h2m8-4h2v4h2l-3 4-3-4h2m-3-11 7 2.8v1.2L9 8.3l-.43-1.12 1.9-.7V3.3l-1.9-.7L9 1.48m2.7 2.25v2.3l2.8-1.1z"
         fill="currentColor"
       />
     </svg>
   </t>
 
   <t t-name="o-spreadsheet-Icon.ROTATION-270">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="M13 16h-1V4h-1.5l2-2 2 2H13M7 9H6V4H4.5l2-2 2 2H7m3 12-7-2.8V12l7-2.8.43 1.12-1.9.7v3.18l1.9.7-.43 1.12m-2.7-2.25v-2.3l-2.8 1.1z"
+        d="M14 16.5h-2v-11h-2l3-4 3 4h-2m-8 4H4v-4H2l3-4 3 4H6m3 11-7-2.8v-1.2l7-2.8.43 1.12-1.9.7v3.18l1.9.7L9 16.52m-2.7-2.25v-2.3l-2.8 1.1z"
         fill="currentColor"
       />
     </svg>
   </t>
   <t t-name="o-spreadsheet-Icon.ROTATION-315">
-    <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <svg class="o-icon" viewBox="0 0 18 18">
       <path
-        d="m6.879 16.55-.707-.707 8.485-8.485-1.06-1.06h2.828v2.828l-1.061-1.061m-7.778-.707-.707-.707 3.535-3.536-1.06-1.06h2.828v2.828l-1.06-1.06M4.757 14.429l-2.97-6.93.849-.848 6.93 2.97-.488 1.096-1.839-.849-2.248 2.249.848 1.838-1.096.488m-.318-3.5 1.626-1.626-2.757-1.203z"
+        d="m6.836 17.257-1.414-1.414L13.2 8.065l-1.414-1.414 4.95-.707-.708 4.95-1.414-1.415M6.836 7.358 5.422 5.944 8.25 3.115 6.836 1.701l4.95-.707-.708 4.95-1.414-1.415m-5.657 9.9-2.97-6.93.849-.848 6.93 2.97-.488 1.096-1.839-.849-2.248 2.249.848 1.838-1.096.488m-.318-3.5 1.626-1.626-2.757-1.203z"
         fill="currentColor"
       />
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.THUMB_TACK">
+    <div class="o-icon">
+      <i class="fa fa-thumb-tack"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.LOCK">
+    <div class="o-icon">
+      <i class="fa fa-lock"/>
+    </div>
+  </t>
+  <t t-name="o-spreadsheet-Icon.UNLOCK">
+    <div class="o-icon">
+      <i class="fa fa-unlock"/>
+    </div>
+  </t>
 
   <t t-name="o-spreadsheet-IconPicker">
     <div class="o-icon-picker bg-white">
@@ -6209,7 +6121,7 @@
   <t t-name="o-spreadsheet-Corner">
     <div
       class="o-corner d-flex justify-content-center align-items-center"
-      t-on-pointerdown.prevent="onMouseDown"
+      t-on-pointerdown.prevent.stop="onMouseDown"
       t-on-touchstart.prevent.stop=""
       t-att-style="handlerStyle">
       <div
@@ -6620,7 +6532,11 @@
         anchorRect="menuState.anchorRect"
         onClose="() => this.closeMenu()"
       />
-      <t t-foreach="staticTables" t-as="table" t-key="table.id">
+      <t
+        t-if="!env.model.getters.isReadonly()"
+        t-foreach="staticTables"
+        t-as="table"
+        t-key="table.id">
         <TableResizer table="table"/>
       </t>
       <VerticalScrollBar topOffset="HEADER_HEIGHT"/>
@@ -6677,8 +6593,8 @@
 
   <t t-name="o-spreadsheet-FilterMenuValueList">
     <div class="o-filter-menu-actions d-flex">
-      <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
-      <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
+      <div class="o-button-link me-4" t-on-click="this.selectAll">Select all</div>
+      <div class="o-button-link me-4" t-on-click="this.clearAll">Clear</div>
     </div>
     <div class="position-relative">
       <input
@@ -6745,10 +6661,11 @@
   </t>
 
   <t t-name="o-spreadsheet-FilterMenuCriterion">
-    <SelectMenu
-      class="'o-filter-criterion-type o-input m-1 mb-2'"
-      menuItems="criterionMenuItems"
-      selectedValue="selectedCriterionName"
+    <Select
+      class="'o-filter-criterion-type m-1 mb-2'"
+      values="criterionOptions"
+      selectedValue="state.criterion.type"
+      onChange.bind="onCriterionTypeChange"
     />
 
     <t
@@ -6805,7 +6722,7 @@
         </SidePanelCollapsible>
 
         <div class="o-filter-menu-buttons d-flex justify-content-end">
-          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
+          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Discard</button>
           <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">
             Confirm
           </button>
@@ -6972,7 +6889,7 @@
         t-att-style="props.style"
         t-att-data-id="props.figureUI.id"
         tabindex="0"
-        t-on-keydown="(ev) => this.onKeyDown(ev)"
+        t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
         t-on-keyup.stop="">
         <t
           t-component="figureRegistry.get(props.figureUI.tag).Component"
@@ -7020,7 +6937,7 @@
           />
         </div>
       </div>
-      <t t-if="isSelected and !env.isMobile()">
+      <t t-if="isFigureResizable">
         <div
           class="o-fig-anchor o-top pe-auto"
           t-att-style="this.getResizerPosition('top')"
@@ -7105,7 +7022,7 @@
   </t>
 
   <t t-name="o-spreadsheet-ChartJsComponent">
-    <canvas class="o-figure-canvas w-100 h-100" t-att-style="canvasStyle" t-ref="graphContainer"/>
+    <canvas class="o-figure-canvas w-100 h-100" t-ref="graphContainer"/>
   </t>
 
   <t t-name="o-spreadsheet-ZoomableChartJsComponent">
@@ -7122,7 +7039,7 @@
           t-ref="masterChartCanvas"
           t-on-dblclick="onMasterChartDoubleClick"
           t-on-pointerdown="onMasterChartPointerDown"
-          t-on-pointermove="onMasterChartPointerMove"
+          t-on-pointermove="updateMasterChartCursor"
           t-on-mouseleave="onMasterChartMouseLeave"
         />
       </div>
@@ -7156,7 +7073,12 @@
   </t>
 
   <t t-name="o-spreadsheet-SpreadsheetDashboard">
-    <div class="o-grid o-two-columns" t-ref="dashboard" tabindex="-1" t-on-wheel="onMouseWheel">
+    <div
+      class="o-grid o-two-columns o-zoomable"
+      t-ref="dashboard"
+      tabindex="-1"
+      t-on-wheel="onMouseWheel"
+      t-att-style="dashboardStyle">
       <div class="mx-auto h-100 position-relative" t-ref="grid" t-att-style="gridContainer">
         <GridOverlay
           onGridResized.bind="onGridResized"
@@ -7196,9 +7118,9 @@
     <div class="w-100 h-100 d-flex flex-column align-items-end" t-att-class="verticalJustifyClass">
       <span
         t-if="props.sortDirection === 'none'"
-        class="o-icon sorting-icon pb-1"
+        class="o-icon sorting-icon mb-1"
         t-att-style="style">
-        <i class="fa fa-small fa-sort"/>
+        <t t-call="o-spreadsheet-Icon.CARET_SORT"/>
       </span>
     </div>
   </t>
@@ -7704,6 +7626,9 @@
         t-att-title="sheetName"
         t-att-data-id="props.sheetId"
         t-att-class="{active: isSheetActive}">
+        <span t-if="isSheetLocked" class="me-1">
+          <t t-call="o-spreadsheet-Icon.LOCK"/>
+        </span>
         <span
           class="o-sheet-name"
           t-att-class="{'o-sheet-name-editable': state.isEditing }"
@@ -7717,8 +7642,9 @@
           t-att-contenteditable="state.isEditing ? 'plaintext-only': 'false'"
         />
         <span
-          class="o-sheet-icon ms-1"
+          class="o-sheet-icon ms-1 rounded"
           tabindex="-1"
+          t-ref="icon"
           t-on-click.stop="(ev) => this.onIconClick(ev)">
           <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
         </span>
@@ -7738,7 +7664,10 @@
   </t>
 
   <t t-name="o-spreadsheet-BorderEditorWidget">
-    <div class="d-flex position-relative" title="Borders">
+    <div
+      class="d-flex position-relative"
+      t-att-class="{'o-disabled': env.model.getters.isCurrentSheetLocked()}"
+      title="Borders">
       <span
         t-ref="borderEditorButton"
         t-on-click.stop="toggleBorderEditor"