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

package/dist/o_spreadsheet.css

@@ -2,9 +2,9 @@
 /*
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 19.2.11
- * @date 2026-05-11T13:51:07.978Z
- * @hash 7fa6ba6
+ * @version 19.4.0-alpha.4
+ * @date 2026-05-11T13:50:07.806Z
+ * @hash 4f00b68
  */
 :root {
   --os-gray-100: light-dark(#f9fafb, #1b1d26);
@@ -20,6 +20,7 @@
   --os-white: light-dark(#ffffff, #000000);
   --os-black: light-dark(#000000, #ffffff);
   --os-white-bg: light-dark(#ffffff, var(--os-gray-200));
+  --os-popover-bg: light-dark(#ffffff, var(--os-gray-200));
 
   --os-default-font: "Roboto", "Arial";
   --os-default-font-size: 10px;
@@ -41,6 +42,7 @@
   --os-action-color: var(--os-link-color); /* ACTION_COLOR */
   --os-action-color-hover: var(--os-link-hover-color);
   --os-border-color: light-dark(var(--os-gray-300), var(--os-gray-400));
+  --os-hovered-menu-item-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
 
   --os-composer-placeholder-color: light-dark(#bdbdbd, #757a89);
   --os-composer-assistant-color: #9b359b; /* COMPOSER_ASSISTANT_COLOR */
@@ -54,7 +56,11 @@
   --os-background-gray-color: light-dark(#f5f5f5, var(--os-white-bg));
   --os-background-gray-color-hover: light-dark(rgba(0, 0, 0, 0.08), #ffffff40);
   --os-frozen-pane-header-border-color: #bcbcbc; /* FROZEN_PANE_HEADER_BORDER_COLOR */
-  --os-grid-border-color: light-dark(#e2e3e3, var(--os-gray-200));
+  --os-grid-border-color: light-dark(#e2e3e3, var(--os-gray-400));
+  --os-canvas-border-color: light-dark(
+    #e2e3e3,
+    var(--os-gray-800)
+  ); /* CANVAS_BORDER_COLOR: Dark mode color will be inverted */
   --os-green-arrow-color: #6aa84f; /* Same color as CF arrow icon */
   --os-red-arrow-color: #e06666; /* Same color as CF arrow icon */
   --os-active-sheet-bg: light-dark(#ffffff, var(--os-gray-300));
@@ -75,6 +81,8 @@
   --os-chart-preview-orange-dark: light-dark(#a34c00, #c96a1e);
   --os-chart-preview-blue-line: light-dark(#0074d9, #4cb3ff);
   --os-chart-preview-blue-fill: light-dark(#c4e4ff, #003e73);
+  --os-chart-preview-green-line: light-dark(#00701e, #00a82d);
+  --os-chart-preview-green-fill: light-dark(#ddffab, #385e00);
 
   --os-header-height: 26px;
   --os-header-width: 48px;
@@ -95,7 +103,7 @@
   --os-mobile-menu-item-height: 35px;
   --os-menu-item-padding-vertical: 4px;
   --os-menu-item-padding-horizontal: 11px;
-  --os-menu-vertical-padding: 6px;
+  --os-menu-vertical-padding: 8px;
   --os-line-vertical-padding: 1px;
   --os-picker-padding: 8px;
   --os-item-border-width: 1px;
@@ -115,6 +123,7 @@
   --os-menu-separator-padding: 5px;
 
   --os-components-importance-grid: 0;
+  --os-components-importance-grid-overlay: 1;
   --os-components-importance-highlight: 5;
   --os-components-importance-header-grouping-button: 6;
   --os-components-importance-figure: 10;
@@ -189,7 +198,7 @@
   .o-topbar-divider {
     width: 0;
     margin: 0 6px;
-    height: 30px;
+    height: 100%;
   }
 
   .o-toolbar-button {
@@ -207,12 +216,14 @@
       /* Menus */
       .o-topbar-topleft {
         .o-topbar-menu {
-          padding: 4px 6px;
+          padding: 3px 5px;
           margin: 0 2px;
+          border: 1px solid transparent;
 
           &.active {
             background-color: var(--os-button-active-bg);
             color: var(--os-button-active-text-color);
+            border-color: var(--os-link-color);
           }
         }
       }
@@ -244,6 +255,10 @@
       .o-toolbar-tools {
         cursor: default;
       }
+
+      .o-named-range-selector-container {
+        width: 100px;
+      }
     }
   }
 
@@ -254,6 +269,7 @@
     .o-topbar-divider {
       border-width: 2px !important;
       border-radius: 4px;
+      height: 30px;
     }
 
     .o-toolbar-button {
@@ -445,6 +461,57 @@
     border-bottom: 3px solid var(--os-gray-500);
     border-right: 3px solid var(--os-gray-500);
     cursor: nwse-resize;
+    z-index: var(--os-components-importance-grid-overlay);
+  }
+}
+
+/* Originates from src/components/spreadsheet_print/spreadsheet_print.css */
+.o-spreadsheet .o-spreadsheet-print {
+  .o-print-header {
+    background-color: light-dark(var(--os-gray-600), var(--os-gray-400));
+
+    button {
+      width: 100px;
+    }
+  }
+
+  .o-print-preview {
+    background-color: light-dark(var(--os-gray-200), var(--os-gray-100));
+
+    .o-print-page {
+      /* Don't use css variable to keep white on dark mode */
+      background-color: #ffffff;
+    }
+  }
+
+  .o-sidePanel {
+    width: 350px;
+  }
+
+  @media print {
+    .o-print-container {
+      overflow: visible !important;
+      height: 100% !important;
+    }
+
+    .o-print-preview {
+      box-shadow: none !important;
+      overflow: visible !important;
+      height: 100% !important;
+
+      .o-print-page {
+        box-shadow: none !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        break-after: page;
+
+        &:last-child {
+          break-after: auto;
+        }
+      }
+    }
   }
 }
 
@@ -586,14 +653,27 @@
     cursor: pointer;
     border-style: solid;
     border-width: 0 0 1px 0;
-    padding: 1px 6px 1px 0px;
+    padding: 1px 0px 1px 0px;
+
+    display: flex;
+    align-items: center;
 
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    background: transparent
-      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%277%27%20height%3D%274%27%20viewBox%3D%270%200%207%204%27%3E%3Cpolygon%20fill%3D%27%23374151%27%20points%3D%273.5%204%207%200%200%200%27/%3E%3C/svg%3E")
-      no-repeat right center;
+
+    &:after {
+      content: "";
+      background-color: currentColor;
+      mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'><polygon fill='currentColor' points='3.5 4 7 0 0 0'/></svg>")
+        no-repeat right;
+      width: 7px;
+      height: 4px;
+      margin-left: auto;
+      margin-right: 1px;
+      padding-left: 10px;
+    }
+    background: transparent;
     text-overflow: ellipsis;
 
     &:disabled {
@@ -608,6 +688,7 @@
   }
 
   .o-input[type="number"],
+  .o-input[type="date"],
   .o-number-input {
     border-width: 0 0 1px 0;
     /* Remove number input arrows */
@@ -630,20 +711,21 @@
   .o-grid {
     position: relative;
     overflow: hidden;
-    background-color: var(--os-background-gray-color);
+    background-color: light-dark(var(--os-background-gray-color), #1e1f29);
     &:focus {
       outline: none;
     }
 
     > canvas {
       box-sizing: content-box;
-      border-bottom: 1px solid var(--os-grid-border-color);
-      border-right: 1px solid var(--os-grid-border-color);
+      border-bottom: 1px solid var(--os-canvas-border-color);
+      border-right: 1px solid var(--os-canvas-border-color);
     }
 
     .o-grid-overlay {
       position: absolute;
       outline: none;
+      z-index: var(--os-components-importance-grid-overlay);
     }
   }
 
@@ -726,16 +808,12 @@
   }
 
   .o-checkers-background {
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23d9d9d9%22%20d%3D%22M5%205h5v5H5zH0V0h5%22/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path fill='#d9d9d9' d='M5 5h5v5H5zH0V0h5'/></svg>");
   }
-}
-
-.o-spreadsheet.dark {
-  select.o-input,
-  .o-select {
-    background: transparent
-      url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%277%27%20height%3D%274%27%20viewBox%3D%270%200%207%204%27%3E%3Cpolygon%20fill%3D%27%23e4e4e4%27%20points%3D%273.5%204%207%200%200%200%27/%3E%3C/svg%3E")
-      no-repeat right center;
+  &.dark {
+    .os-theme-dependant {
+      filter: var(--os-dark-mode-filter);
+    }
   }
 }
 
@@ -1052,10 +1130,12 @@
   input.pivot-dimension-search-field:focus {
     outline: none;
   }
+
   .pivot-dimension-search-field-icon svg {
     width: 13px;
     height: 13px;
   }
+
   .add-dimension.o-button {
     padding: 2px 7px;
     font-weight: 400;
@@ -1063,6 +1143,18 @@
     flex-grow: 0;
     height: inherit;
   }
+
+  .o-pivot-add-dimension-popover {
+    .o-autocomplete-dropdown {
+      padding-bottom: var(--os-menu-item-padding-vertical);
+      .o-autocomplete-content {
+        padding: var(--os-menu-item-padding-vertical) 20px;
+        &:hover {
+          background-color: var(--os-hovered-menu-item-color);
+        }
+      }
+    }
+  }
 }
 
 /* Originates from src/components/side_panel/pivot/pivot_defer_update/pivot_defer_update.css */
@@ -1096,6 +1188,41 @@
   }
 }
 
+/* Originates from src/components/side_panel/perf_profile/perf_profile_panel.css */
+.o-spreadsheet {
+  .o-perf-range-entry {
+    cursor: pointer;
+  }
+  .o-perf-bar {
+    background-color: color-mix(in srgb, var(--os-link-color) 25%, transparent);
+  }
+  .o-perf-range-entry:hover .o-perf-bar {
+    background-color: color-mix(in srgb, var(--os-link-color) 35%, transparent);
+  }
+  .o-perf-entry-selected {
+    background-color: color-mix(in srgb, var(--os-link-color) 10%, transparent);
+  }
+}
+
+/* Originates from src/components/side_panel/named_ranges_panel/named_range_preview/named_range_preview.css */
+.o-spreadsheet {
+  .o-sidePanel {
+    .o-named-range-preview {
+      input {
+        padding-left: 0px;
+      }
+
+      .o-selection-input input:not(.o-focused):not(:hover) {
+        border-color: transparent;
+      }
+
+      &:hover:not(:focus-within):not(.o-focused) .o-named-range-edit {
+        display: flex !important;
+      }
+    }
+  }
+}
+
 /* Originates from src/components/side_panel/more_formats/more_formats.css */
 .o-spreadsheet {
   .o-more-formats-panel {
@@ -1480,6 +1607,32 @@
   }
 }
 
+/* Originates from src/components/side_panel/column_stats/column_stats_panel.css */
+.o-spreadsheet {
+  .o-column-stats-title {
+    font-size: 16px;
+  }
+  .o-row-switcher {
+    cursor: pointer;
+  }
+  .o-column-stats-row {
+    padding: 1px 0;
+  }
+  .o-column-stats-row:nth-child(even) {
+    background: var(--os-gray-100);
+  }
+  .o-column-frequencies-row {
+    cursor: pointer;
+  }
+  .o-column-frequencies-row:hover span {
+    font-weight: bold;
+  }
+
+  .o-column-stats-chart {
+    height: 200px;
+  }
+}
+
 /* Originates from src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.css */
 .o-spreadsheet {
   .o-gauge-color-set {
@@ -1523,7 +1676,7 @@
 
 /* Originates from src/components/side_panel/chart/chart_type_picker/chart_type_picker.css */
 .o-spreadsheet {
-  .o-section .o-input.o-type-selector {
+  .o-section .o-select.o-type-selector {
     height: 30px;
     padding-left: 35px;
     padding-top: 5px;
@@ -1699,6 +1852,11 @@
 
 /* Originates from src/components/select/select.css */
 .o-spreadsheet {
+  /* Add a non-breaking space when the select is empty to keep the height consistent */
+  .o-select:empty::before {
+    content: "\00a0";
+  }
+
   .o-select-dropdown {
     min-width: 40px;
 
@@ -1706,13 +1864,13 @@
       cursor: pointer;
       user-select: none;
       height: var(--os-desktop-menu-item-height);
-      padding: var(--os-menu-item-padding-vertical) var(--os-menu-item-padding-horizontal);
+      padding: var(--os-menu-item-padding-vertical) 20px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 
       &.o-active {
-        background-color: var(--os-button-active-bg);
+        background-color: var(--os-hovered-menu-item-color);
         color: var(--os-button-active-text-color);
       }
     }
@@ -1745,6 +1903,7 @@
     box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, 0.15);
     width: fit-content;
     height: fit-content;
+    background-color: var(--os-popover-bg);
   }
 }
 
@@ -1815,10 +1974,28 @@
   }
 }
 
+/* Originates from src/components/named_range_selector/named_range_selector.css */
+.o-spreadsheet {
+  .o-named-range-selector {
+    font-size: 13px;
+
+    &.selected,
+    &:hover {
+      background-color: var(--os-button-hover-bg);
+      color: var(--os-button-hover-text-color);
+
+      .o-icon {
+        color: var(--os-button-hover-text-color);
+      }
+    }
+  }
+}
+
 /* Originates from src/components/menu_popover/menu_popover.css */
 .o-spreadsheet {
   .o-menu-wrapper {
     padding: var(--os-menu-vertical-padding) 0px;
+    outline: none;
   }
 }
 
@@ -1827,6 +2004,7 @@
   .o-menu {
     user-select: none;
     .o-menu-item {
+      outline: none;
       cursor: pointer;
       user-select: none;
       height: var(--os-desktop-menu-item-height);
@@ -1838,9 +2016,8 @@
         );
       }
       & {
-        &:hover,
         &.o-menu-item-active {
-          background-color: var(--os-button-active-bg);
+          background-color: var(--os-hovered-menu-item-color);
           color: var(--os-button-active-text-color);
         }
         .o-menu-item-description {
@@ -1872,7 +2049,7 @@
 /* Originates from src/components/link/link_editor/link_editor.css */
 .o-spreadsheet {
   .o-link-editor {
-    font-size: 13px;
+    width: 330px;
     box-shadow: 0 1px 4px 3px rgba(60, 64, 67, 0.15);
     padding: 12px;
     display: flex;
@@ -1885,6 +2062,21 @@
         margin-bottom: 5px;
       }
     }
+    .o-icon {
+      --os-icon-edge-length: 15px;
+    }
+    .suggestions {
+      height: 150px;
+      overflow-y: auto;
+    }
+    .suggestion-item {
+      &:hover,
+      &.selected {
+        background-color: var(--os-hovered-menu-item-color);
+      }
+      cursor: pointer;
+    }
+
     .o-buttons {
       padding-left: 16px;
       padding-top: 16px;
@@ -1895,6 +2087,7 @@
       padding: 0 23px 4px 0;
     }
     .o-link-url {
+      outline: none;
       position: relative;
       flex-grow: 1;
       button {
@@ -1907,8 +2100,6 @@
         background-color: var(--os-white-bg);
         margin: 2px 3px 1px 0px;
         padding: 0px 1px 0px 0px;
-      }
-      button:hover {
         cursor: pointer;
       }
     }
@@ -2011,7 +2202,7 @@
 
 /* Originates from src/components/highlight/highlight/highlight.css */
 .o-spreadsheet {
-  .o-highlight {
+  .o-highlight > * {
     z-index: var(--os-components-importance-highlight);
   }
 }
@@ -2294,17 +2485,12 @@
 .o-spreadsheet {
   .o-filter-menu {
     width: 245px;
-    padding: 8px 0;
     user-select: none;
 
     .o-filter-menu-content {
       padding: 0 16px;
     }
 
-    .o-sort-item {
-      padding-left: 34px;
-    }
-
     .o_side_panel_collapsible_title {
       font-size: inherit;
       padding: 0 0 4px 0 !important;
@@ -2332,7 +2518,7 @@
 
       &.selected,
       &:hover {
-        background-color: var(--os-button-active-bg);
+        background-color: var(--os-hovered-menu-item-color);
       }
     }
 
@@ -2342,6 +2528,13 @@
       .o-button {
         height: 26px;
       }
+
+      .o-filter-menu-cancel {
+        background-color: light-dark(var(--os-button-bg), var(--os-gray-400));
+        &:hover {
+          background-color: var(--os-gray-500) !important;
+        }
+      }
     }
   }
 }
@@ -2574,7 +2767,7 @@
       &:hover,
       &:target {
         color: var(--os-gray-900) !important;
-        background: var(--os-background-gray-color-hover);
+        background-color: var(--os-background-gray-color-hover);
       }
 
       .o-chart-preview {
@@ -2884,16 +3077,24 @@
     cursor: pointer;
     max-width: 400px;
     z-index: 1;
+    background-color: var(--os-popover-bg);
     .o-autocomplete-value-focus {
-      background-color: var(--os-composer-assistant-background);
+      background-color: var(--os-hovered-menu-item-color);
     }
-    & > div {
+    .o-autocomplete-content {
       padding: 1px 5px 5px 5px;
       .o-autocomplete-description {
         padding-left: 5px;
         font-size: 11px;
       }
     }
+
+    .o-icon {
+      width: 13px;
+      height: 13px;
+      font-size: 13px;
+      color: var(--os-text-body-muted);
+    }
   }
 }
 
@@ -2919,11 +3120,11 @@
     }
 
     .o-color-picker-button {
-      > span {
-        border-bottom: 4px solid;
+      > div {
         height: 20px;
-        margin-top: 2px;
-        display: block;
+      }
+      .o-colored-border {
+        border-bottom: 4px solid;
       }
       &[disabled] {
         pointer-events: none;
@@ -2972,7 +3173,7 @@
       height: calc(var(--os-item-edge-length) + (2 * var(--os-item-border-width)));
       margin: 0px;
       border-radius: 50px;
-      border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), transparent);
+      border: var(--os-item-border-width) solid light-dark(var(--os-gray-600), #c0c0c0);
       padding: 0px;
       font-size: 16px;
       &:hover {
@@ -3023,7 +3224,7 @@
         z-index: 2;
       }
       .saturation {
-        background: linear-gradient(to right, var(--os-white) 0%, transparent 100%);
+        background: linear-gradient(to right, #fff 0%, transparent 100%);
       }
       .lightness {
         background: linear-gradient(to top, #000 0%, transparent 100%);
@@ -3307,6 +3508,7 @@
     position: absolute;
     height: var(--os-autofill-edge-length);
     width: var(--os-autofill-edge-length);
+    z-index: var(--os-components-importance-grid-overlay);
     &:hover {
       cursor: crosshair;
     }