handsontable 15.3.0 → 16.0.0-next-f486b48-20250702

package/styles/handsontable.css

@@ -25,16 +25,18 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 15.3.0
- * Release date: 29/04/2025 (built at 24/04/2025 10:59:02)
+ * Version: 16.0.0-next-f486b48-20250702
+ * Release date: 09/07/2025 (built at 02/07/2025 09:18:50)
  */
-.ht-wrapper:not([class*=ht-theme]) {
+.ht-root-wrapper:not([class*=ht-theme]),
+.ht-portal:not([class*=ht-theme]) {
   --ht-gap-size: 4px;
   --ht-checkbox-size: 16px;
   --ht-cell-horizontal-padding: 8px;
   --ht-cell-vertical-padding: 4px;
   --ht-font-size: 14px;
   --ht-line-height: 20px;
+  --ht-letter-spacing: 0;
   --ht-border-color: #222222;
   --ht-foreground-color: #222222;
   --ht-background-color: #ffffff;
@@ -52,22 +54,46 @@
   --ht-cell-selection-border-color: #1a42e8;
 }
 
+.ht-root-wrapper .htFocusCatcher {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  z-index: -1;
+}
+
 .handsontable {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial, sans-serif;
   position: relative;
   font-size: var(--ht-font-size);
   line-height: var(--ht-line-height);
   font-weight: var(--ht-font-weight);
-  letter-spacing: 0;
+  letter-spacing: var(--ht-letter-spacing);
   color: var(--ht-foreground-color);
   /* Miscellaneous */
   touch-action: manipulation;
   scrollbar-width: thin;
   scrollbar-color: var(--ht-scrollbar-thumb-color) var(--ht-scrollbar-track-color);
 }
-.handsontable::-webkit-scrollbar-track {
+.handsontable .wtHolder::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+.handsontable .wtHolder::-webkit-scrollbar-track {
+  background: var(--ht-scrollbar-track-color);
+  border-radius: var(--ht-scrollbar-border-radius);
+}
+.handsontable .wtHolder::-webkit-scrollbar-thumb {
+  background-color: var(--ht-scrollbar-thumb-color);
   border-radius: var(--ht-scrollbar-border-radius);
 }
+.handsontable .wtHolder::-webkit-scrollbar-corner {
+  background: var(--ht-scrollbar-track-color);
+  border-end-end-radius: var(--ht-scrollbar-border-radius);
+}
 .handsontable.ht-wrapper {
   border-radius: var(--ht-wrapper-border-radius, 0);
 }
@@ -304,15 +330,10 @@
   top: -99000px;
   visibility: hidden;
 }
-.handsontable .htFocusCatcher {
-  position: absolute;
-  width: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  opacity: 0;
-  z-index: -1;
+.handsontable .htTextEllipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .handsontable table,
 .handsontable tbody,
@@ -417,6 +438,11 @@
   left: -1px;
 }
 
+.htScrollbarSafariTest::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
 .handsontable.ht-wrapper:not(.htColumnHeaders) .ht_master .htCore tbody tr:first-child td:first-child {
   border-start-start-radius: var(--ht-wrapper-border-radius);
 }
@@ -703,6 +729,12 @@
   position: absolute;
   font-size: 0;
 }
+.handsontable .wtBorder:nth-child(1), .handsontable .wtBorder:nth-child(3) {
+  z-index: 2;
+}
+.handsontable .wtBorder:nth-child(2), .handsontable .wtBorder:nth-child(4) {
+  z-index: 1;
+}
 .handsontable .wtBorder.hidden {
   display: none !important;
 }
@@ -779,6 +811,7 @@
   vertical-align: middle;
   cursor: pointer;
   margin-top: -2px;
+  outline: none;
 }
 .handsontable .htCheckboxRendererInput:first-child {
   margin-inline-end: var(--ht-gap-size);
@@ -824,7 +857,6 @@
 .handsontable .htCheckboxRendererInput:checked:focus::before {
   border-color: var(--ht-checkbox-checked-focus-border-color);
   background-color: var(--ht-checkbox-checked-focus-background-color);
-  outline: 1px solid var(--ht-checkbox-checked-focus-ring-color);
 }
 .handsontable .htCheckboxRendererInput:checked:focus::after {
   color: var(--ht-checkbox-checked-focus-icon-color);
@@ -848,7 +880,25 @@
   color: var(--ht-checkbox-disabled-icon-color);
 }
 .handsontable .htCheckboxRendererInput:indeterminate::before {
-  background-color: red;
+  border-color: var(--ht-checkbox-indeterminate-border-color);
+  background-color: var(--ht-checkbox-indeterminate-background-color);
+}
+.handsontable .htCheckboxRendererInput:indeterminate::after {
+  color: var(--ht-checkbox-indeterminate-icon-color);
+}
+.handsontable .htCheckboxRendererInput:indeterminate:disabled::before {
+  border-color: var(--ht-checkbox-indeterminate-disabled-border-color);
+  background-color: var(--ht-checkbox-indeterminate-disabled-background-color);
+}
+.handsontable .htCheckboxRendererInput:indeterminate:disabled::after {
+  color: var(--ht-checkbox-indeterminate-disabled-icon-color);
+}
+.handsontable .htCheckboxRendererInput:indeterminate:focus::before {
+  border-color: var(--ht-checkbox-indeterminate-focus-border-color);
+  background-color: var(--ht-checkbox-indeterminate-focus-background-color);
+}
+.handsontable .htCheckboxRendererInput:indeterminate:focus::after {
+  color: var(--ht-checkbox-indeterminate-focus-icon-color);
 }
 .handsontable .htCheckboxRendererInput.noValue {
   opacity: 0.5;
@@ -870,7 +920,8 @@
   color: var(--ht-placeholder-color);
 }
 .handsontable .htDimmed {
-  color: var(--ht-read-only-color);
+  color: var(--ht-read-only-color) !important;
+  background-color: var(--ht-cell-read-only-background-color) !important;
 }
 .handsontable .htLeft {
   text-align: left;
@@ -901,7 +952,7 @@
   white-space: nowrap;
 }
 .handsontable .htSearchResult {
-  background: var(--ht-cell-success-background-color) !important;
+  background-color: var(--ht-cell-success-background-color) !important;
 }
 
 .handsontableInputHolder {
@@ -978,6 +1029,7 @@
 }
 .handsontable.listbox .wtHolder {
   overflow: auto;
+  border-radius: 0 !important;
 }
 .handsontable.listbox .wtHider, .handsontable.listbox .htCore {
   border-radius: 0 !important;
@@ -998,11 +1050,6 @@
   text-overflow: ellipsis;
   border-radius: 0 !important;
 }
-.handsontable.listbox table td.htDimmed {
-  cursor: default;
-  font-style: inherit;
-  color: inherit;
-}
 .handsontable.listbox table .wtBorder {
   visibility: hidden;
 }
@@ -1010,14 +1057,29 @@
   font-weight: bold;
   color: inherit;
 }
-.handsontable.listbox table tr:hover td {
-  background: var(--ht-menu-item-hover-color, #e5e5e9);
+.handsontable.listbox table tr td:hover td {
+  background: var(--ht-menu-item-hover-color, #e5e5e9) !important;
   cursor: pointer;
+  box-shadow: none !important;
+}
+.handsontable.listbox table td {
+  transition: var(--ht-table-transition) background ease-in-out;
 }
-.handsontable.listbox table tr td:hover, .handsontable.listbox table tr td.current {
-  background: var(--ht-menu-item-hover-color, #e5e5e9);
+.handsontable.listbox table td:hover {
+  background-color: var(--ht-menu-item-hover-color, #e5e5e9) !important;
   cursor: pointer;
 }
+.handsontable.listbox table td.current:not([aria-expanded=true]) {
+  box-shadow: inset 0 0 0 1px var(--ht-accent-color);
+}
+.handsontable.listbox table td.htDimmed {
+  cursor: default;
+  font-style: inherit;
+  color: inherit !important;
+}
+.handsontable.listbox table td.htDimmed:not(.handsontable.listbox table td:hover) {
+  background-color: inherit !important;
+}
 .handsontable.listbox table thead th {
   height: auto !important;
   text-align: left;
@@ -1183,6 +1245,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  transition: var(--ht-table-transition) all ease-in-out;
 }
 .handsontable .htUISelectCaption::after {
   content: "";
@@ -1345,62 +1408,70 @@
 }
 .handsontable .htUIRadio > input[type=radio] {
   position: relative;
-  width: var(--ht-checkbox-size);
-  height: var(--ht-checkbox-size);
+  width: var(--ht-radio-size);
+  height: var(--ht-radio-size);
   margin: 0;
   appearance: none;
   cursor: pointer;
+  border-radius: calc(0.5 * var(--ht-radio-size));
+  outline: none;
 }
 .handsontable .htUIRadio > input[type=radio]::before {
   content: "";
   display: block;
   position: absolute;
   inset: 0;
-  border-radius: calc(0.5 * var(--ht-checkbox-size));
-  border: 1px solid var(--ht-checkbox-border-color);
-  background-color: var(--ht-checkbox-background-color);
+  border-radius: calc(0.5 * var(--ht-radio-size));
+  border: 1px solid var(--ht-radio-border-color);
+  background-color: var(--ht-radio-background-color);
 }
 .handsontable .htUIRadio > input[type=radio]::after {
   content: "";
   display: block;
   position: absolute;
-  color: var(--ht-checkbox-background-color);
+  color: var(--ht-radio-icon-color);
 }
 .handsontable .htUIRadio > input[type=radio]:checked::before {
-  border-color: var(--ht-checkbox-checked-border-color);
+  border-color: var(--ht-radio-checked-border-color);
+  background-color: var(--ht-radio-checked-background-color);
 }
 .handsontable .htUIRadio > input[type=radio]:checked::after {
-  color: var(--ht-checkbox-checked-background-color);
+  color: var(--ht-radio-checked-icon-color);
 }
 .handsontable .htUIRadio > input[type=radio]:checked:disabled {
   cursor: initial;
 }
 .handsontable .htUIRadio > input[type=radio]:checked:disabled::before {
-  border-color: var(--ht-checkbox-checked-disabled-border-color);
+  border-color: var(--ht-radio-checked-disabled-border-color);
+  background-color: var(--ht-radio-checked-disabled-background-color);
 }
 .handsontable .htUIRadio > input[type=radio]:checked:disabled::after {
-  color: var(--ht-checkbox-checked-disabled-background-color);
+  color: var(--ht-radio-checked-disabled-icon-color);
 }
 .handsontable .htUIRadio > input[type=radio]:checked:focus::before {
-  border-color: var(--ht-checkbox-checked-focus-background-color);
+  border-color: var(--ht-radio-checked-focus-border-color);
+  background-color: var(--ht-radio-checked-focus-background-color);
 }
 .handsontable .htUIRadio > input[type=radio]:checked:focus::after {
-  color: var(--ht-checkbox-checked-focus-background-color);
+  color: var(--ht-radio-checked-focus-icon-color);
 }
 .handsontable .htUIRadio > input[type=radio]:disabled {
   cursor: initial;
 }
 .handsontable .htUIRadio > input[type=radio]:disabled::before {
-  border-color: var(--ht-checkbox-disabled-border-color);
+  border-color: var(--ht-radio-disabled-border-color);
+  background-color: var(--ht-radio-disabled-background-color);
 }
 .handsontable .htUIRadio > input[type=radio]:disabled::after {
-  color: var(--ht-checkbox-disabled-background-color);
+  color: var(--ht-radio-disabled-icon-color);
 }
 .handsontable .htUIRadio > input[type=radio]:focus::before {
-  border-color: var(--ht-checkbox-focus-background-color);
+  border-color: var(--ht-radio-focus-border-color);
+  background-color: var(--ht-radio-focus-background-color);
+  outline: 1px solid var(--ht-radio-focus-ring-color);
 }
 .handsontable .htUIRadio > input[type=radio]:focus::after {
-  color: var(--ht-checkbox-focus-background-color);
+  color: var(--ht-radio-focus-icon-color);
 }
 .handsontable .htUIRadio label {
   vertical-align: middle;
@@ -1564,7 +1635,7 @@
   left: -2px;
 }
 .handsontable th.ht__active_highlight.beforeHiddenColumn::before, .handsontable th.ht__active_highlight.beforeHiddenColumn::after, .handsontable th.ht__active_highlight.afterHiddenColumn::before, .handsontable th.ht__active_highlight.afterHiddenColumn::after {
-  color: var(--ht-icon-active-button-icon-color);
+  color: var(--ht-icon-button-active-icon-color, var(--ht-icon-active-button-icon-color));
 }
 
 [dir=rtl].handsontable th.beforeHiddenColumn::after {
@@ -1600,7 +1671,7 @@
   top: -2px;
 }
 .handsontable th.ht__active_highlight.beforeHiddenRow::before, .handsontable th.ht__active_highlight.beforeHiddenRow::after, .handsontable th.ht__active_highlight.afterHiddenRow::before, .handsontable th.ht__active_highlight.afterHiddenRow::after {
-  color: var(--ht-icon-active-button-icon-color);
+  color: var(--ht-icon-button-active-icon-color, var(--ht-icon-active-button-icon-color));
 }
 
 .handsontable .changeType {
@@ -1638,18 +1709,18 @@
   color: var(--ht-icon-button-hover-icon-color);
 }
 .handsontable .ht__active_highlight .changeType {
-  box-shadow: 0 0 0 1px var(--ht-icon-active-button-border-color);
-  background-color: var(--ht-icon-active-button-background-color);
+  box-shadow: 0 0 0 1px var(--ht-icon-button-active-border-color, var(--ht-icon-active-button-border-color));
+  background-color: var(--ht-icon-button-active-background-color, var(--ht-icon-active-button-background-color));
 }
 .handsontable .ht__active_highlight .changeType::before {
-  color: var(--ht-icon-active-button-icon-color);
+  color: var(--ht-icon-button-active-icon-color, var(--ht-icon-active-button-icon-color));
 }
 .handsontable .ht__active_highlight .changeType:hover {
-  box-shadow: 0 0 0 1px var(--ht-icon-active-button-hover-border-color);
-  background-color: var(--ht-icon-active-button-hover-background-color);
+  box-shadow: 0 0 0 1px var(--ht-icon-button-active-hover-border-color, var(--ht-icon-active-button-hover-border-color));
+  background-color: var(--ht-icon-button-active-hover-background-color, var(--ht-icon-active-button-hover-background-color));
 }
 .handsontable .ht__active_highlight .changeType:hover::before {
-  color: var(--ht-icon-active-button-hover-icon-color);
+  color: var(--ht-icon-button-active-hover-icon-color, var(--ht-icon-active-button-hover-icon-color));
 }
 .handsontable th.htFiltersActive {
   background-color: var(--ht-header-filter-background-color);
@@ -1710,7 +1781,7 @@
   text-overflow: ellipsis;
   background: var(--ht-background-color, #ffffff);
   cursor: pointer;
-  transition: background calc(0.5 * var(--ht-table-transition)) ease-in-out;
+  transition: var(--ht-table-transition) background ease-in-out;
 }
 .handsontable.htDropdownMenu table tbody tr td:first-child, .handsontable.htContextMenu table tbody tr td:first-child, .handsontable.htFiltersConditionsMenu table tbody tr td:first-child {
   border-top-width: 0;
@@ -1720,12 +1791,16 @@
 }
 .handsontable.htDropdownMenu table tbody tr td.htDimmed, .handsontable.htContextMenu table tbody tr td.htDimmed, .handsontable.htFiltersConditionsMenu table tbody tr td.htDimmed {
   font-style: normal;
-  color: var(--ht-foreground-color);
+  color: inherit !important;
+  background-color: inherit !important;
 }
-.handsontable.htDropdownMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover, .handsontable.htDropdownMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current, .handsontable.htContextMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover, .handsontable.htContextMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current, .handsontable.htFiltersConditionsMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover, .handsontable.htFiltersConditionsMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current {
-  background: var(--ht-menu-item-hover-color, #e5e5e9);
+.handsontable.htDropdownMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover, .handsontable.htContextMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover, .handsontable.htFiltersConditionsMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled):hover {
+  background: var(--ht-menu-item-hover-color, #e5e5e9) !important;
   cursor: pointer;
 }
+.handsontable.htDropdownMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current:not([aria-expanded=true]), .handsontable.htContextMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current:not([aria-expanded=true]), .handsontable.htFiltersConditionsMenu table tbody tr td:not(.handsontable.htDropdownMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htDropdownMenu table tbody tr td.htDisabled, .handsontable.htContextMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htContextMenu table tbody tr td.htDisabled, .handsontable.htFiltersConditionsMenu table tbody tr td.htCustomMenuRenderer, .handsontable.htFiltersConditionsMenu table tbody tr td.htDisabled).current:not([aria-expanded=true]) {
+  box-shadow: inset 0 0 0 1px var(--ht-accent-color);
+}
 .handsontable.htDropdownMenu table tbody tr td.htSubmenu .htItemWrapper, .handsontable.htContextMenu table tbody tr td.htSubmenu .htItemWrapper, .handsontable.htFiltersConditionsMenu table tbody tr td.htSubmenu .htItemWrapper {
   margin-inline-end: calc(2 * var(--ht-gap-size, 4px) + var(--ht-icon-size));
 }
@@ -1796,6 +1871,7 @@
 .handsontable .htUIMultipleSelect .ht_master .wtHolder {
   overflow-y: scroll !important;
   background: transparent;
+  border-radius: 0 !important;
 }
 .handsontable .htUIMultipleSelect .ht_master .wtHolder .htCore {
   box-shadow: none;