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

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.0-alpha.4
- * @date 2026-01-21T11:09:21.385Z
- * @hash fa080c2
+ * @version 19.3.2
+ * @date 2026-05-11T13:52:26.747Z
+ * @hash 14395f7
  */
 :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-300));
 
   --os-default-font: "Roboto", "Arial";
   --os-default-font-size: 10px;
@@ -41,11 +42,12 @@
   --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 */
   --os-composer-assistant-background: light-dark(#f2f2f2, var(--os-gray-200));
-  --os-composer-highlight-flag-color: #e6edf3;
+  --os-composer-highlight-flag-color: light-dark(var(--os-gray-200), var(--os-gray-400));
   --os-composer-selector-flag-color: #a9a9a9;
 
   --os-selection-border-color: #3266ca; /* SELECTION_BORDER_COLOR */
@@ -55,7 +57,6 @@
   --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-separator-color: var(--os-gray-300);
   --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));
@@ -96,7 +97,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;
@@ -190,7 +191,7 @@
   .o-topbar-divider {
     width: 0;
     margin: 0 6px;
-    height: 30px;
+    height: 100%;
   }
 
   .o-toolbar-button {
@@ -208,12 +209,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);
           }
         }
       }
@@ -245,6 +248,10 @@
       .o-toolbar-tools {
         cursor: default;
       }
+
+      .o-named-range-selector-container {
+        width: 100px;
+      }
     }
   }
 
@@ -255,6 +262,7 @@
     .o-topbar-divider {
       border-width: 2px !important;
       border-radius: 4px;
+      height: 30px;
     }
 
     .o-toolbar-button {
@@ -449,6 +457,56 @@
   }
 }
 
+/* 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;
+        }
+      }
+    }
+  }
+}
+
 /* Originates from src/components/spreadsheet/spreadsheet.css */
 .o-spreadsheet {
   .border {
@@ -470,7 +528,7 @@
   .border-end {
     border-right: 1px solid var(--os-border-color) !important;
   }
-
+  touch-action: pan-y;
   color: var(--os-text-body);
 
   .bg-white {
@@ -544,7 +602,6 @@
 
   .o-grid-container {
     display: grid;
-    background-color: var(--os-header-grouping-background-color);
 
     .o-top-left {
       border: 1px solid var(--os-grid-border-color);
@@ -588,14 +645,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 {
@@ -610,6 +680,7 @@
   }
 
   .o-input[type="number"],
+  .o-input[type="date"],
   .o-number-input {
     border-width: 0 0 1px 0;
     /* Remove number input arrows */
@@ -728,16 +799,7 @@
   }
 
   .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");
-  }
-}
-
-.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;
+    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>");
   }
 }
 
@@ -1054,10 +1116,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;
@@ -1065,6 +1129,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 */
@@ -1098,6 +1174,25 @@
   }
 }
 
+/* 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 {
@@ -1482,6 +1577,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 {
@@ -1525,7 +1646,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;
@@ -1542,13 +1663,13 @@
   .o-popover .o-chart-select-popover {
     .o-chart-type-item {
       cursor: pointer;
-      padding: 3px 6px;
+      padding: 2px 5px;
       margin: 1px 2px;
+      border: 1px solid transparent;
       &.selected,
       &:hover {
-        border: 1px solid var(--os-action-color);
+        border-color: var(--os-action-color);
         background: var(--os-badge-selected-color);
-        padding: 2px 5px;
       }
       .o-chart-preview {
         width: 48px;
@@ -1701,6 +1822,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;
 
@@ -1708,13 +1834,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);
       }
     }
@@ -1747,6 +1873,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);
   }
 }
 
@@ -1817,10 +1944,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;
   }
 }
 
@@ -1829,6 +1974,7 @@
   .o-menu {
     user-select: none;
     .o-menu-item {
+      outline: none;
       cursor: pointer;
       user-select: none;
       height: var(--os-desktop-menu-item-height);
@@ -1840,16 +1986,10 @@
         );
       }
       & {
-        &: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-icon {
-          .o-icon {
-            color: var(--os-icons-color);
-          }
-        }
         .o-menu-item-description {
           color: grey;
         }
@@ -1879,7 +2019,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;
@@ -1892,6 +2032,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;
@@ -1902,6 +2057,7 @@
       padding: 0 23px 4px 0;
     }
     .o-link-url {
+      outline: none;
       position: relative;
       flex-grow: 1;
       button {
@@ -1914,8 +2070,6 @@
         background-color: var(--os-white-bg);
         margin: 2px 3px 1px 0px;
         padding: 0px 1px 0px 0px;
-      }
-      button:hover {
         cursor: pointer;
       }
     }
@@ -2301,17 +2455,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;
@@ -2339,7 +2488,7 @@
 
       &.selected,
       &:hover {
-        background-color: var(--os-button-active-bg);
+        background-color: var(--os-hovered-menu-item-color);
       }
     }
 
@@ -2349,6 +2498,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;
+        }
+      }
     }
   }
 }
@@ -2581,7 +2737,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 {
@@ -2643,17 +2799,14 @@
 /* Originates from src/components/dashboard/clickable_cell_sort_icon/clickable_cell_sort_icon.css */
 .o-spreadsheet {
   .sorting-icon {
-    margin: 1px;
-
-    .fa-sort-desc {
-      transform: translateY(-2px);
-    }
-    .fa-sort-asc {
-      transform: translateY(4px);
+    margin-right: 1px;
+    .o-icon {
+      width: 100%;
+      height: 100%;
     }
   }
 
-  div:not(:hover) > .sorting-icon:has(> .fa-sort) {
+  div:not(:hover) > .sorting-icon:has(> .o-icon) {
     display: none;
   }
 }
@@ -2894,16 +3047,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);
+    }
   }
 }