@guiexpert/table 1.1.98 → 1.1.99

package/README.md

@@ -61,6 +61,15 @@ This is the UI-agnostic table component for your next web app. 😊
 - Right-to-left (Arabic, Hebrew, Persian, Urdu): `tableOptions.direction: "rtl"` (or `"auto"` from the page) mirrors
   the whole table – first column on the right, horizontal scrolling, fixed columns, tree indent, resize handles, fill
   handle, row drag, master/detail, arrow keys; right-to-left Excel sheet – since 1.1.98
+- Excel-style editing (`tableOptions.editing`): type to overwrite, F2, Enter/Tab, Delete, Ctrl+Enter, Ctrl+arrow to
+  the data edge, IME; copy, cut and paste with Excel and Google Sheets (`clipboard`); undo and redo of every change
+  (`undo`, `tableApi.undo()`) – since 1.1.99
+- Spreadsheet cell formulas (`tableOptions.cellFormulas`): `=B2*C2`, `$A$1`, ranges, 70 Excel functions, a dependency
+  graph that recalculates only dependent cells, colored references and pointing while typing, Excel export with real
+  formulas – own parser, no `eval`. `SheetEngine` works without a table – since 1.1.99
+- Spreadsheet mode: `SpreadsheetFactory.create({ data })` builds column letters, row numbers, a sparse body (a million
+  empty rows cost nothing) and all of the above; `FormulaBar`, insert/delete rows and columns with adjusted references;
+  `spreadsheet: true` for an existing table – since 1.1.99
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events

package/css/main.css

@@ -280,6 +280,47 @@
     animation: none; /* a still ring segment and the text */
   }
 }
+/* Copy, cut and paste (since 1.1.99, tableOptions.clipboard) */
+
+/* the hidden text field that gets the focus for the moment of Ctrl/⌘+C, X, V (the browser fires its clipboard event there) */
+.ge-table-clipboard-proxy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  overflow: hidden;
+  resize: none;
+  pointer-events: none;
+  font-size: 16px; /* iOS zooms into a focused field with a smaller font */
+}
+
+/* cut cells: a dashed frame ("marching ants") until they are pasted, Escape or another change */
+.ge-table-cut-range {
+  position: absolute;
+  display: none;
+  z-index: 8998; /* below the fill preview (8999) and the editor (9500) */
+  box-sizing: border-box;
+  pointer-events: none;
+  border: 2px dashed var(--ge-table-cut-range-border);
+  animation: ge-table-cut-range-ants 0.8s linear infinite;
+}
+
+@keyframes ge-table-cut-range-ants {
+  50% {
+    border-color: var(--ge-table-cut-range-border-alt);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ge-table-cut-range {
+    animation: none; /* the dashed frame alone */
+  }
+}
 
 
 .ge-table { background-color: var(--ge-table-bg); }
@@ -517,6 +558,34 @@
   --ge-table-detail-border: #c9d1db;
   --ge-table-detail-toggle-color: #5f6368;
   --ge-table-detail-toggle-hover-bg: rgba(128, 128, 128, 0.15);
+
+  /* Excel-style editing (since 1.1.99): the editor above the cell */
+  --ge-table-cell-editor-bg: #fff;
+  --ge-table-cell-editor-text: #111;
+  --ge-table-cell-editor-border: #0a6ebd;
+  --ge-table-cell-editor-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --ge-table-cell-editor-invalid-border: #d93025;
+  --ge-table-cut-range-border: #0a6ebd;
+  --ge-table-cut-range-border-alt: #9ec9ec;
+  /* formula input (since 1.1.99): colors of the references 0–7, function list and hint */
+  --ge-table-formula-ref-0: #1a73e8;
+  --ge-table-formula-ref-1: #d93025;
+  --ge-table-formula-ref-2: #7b1fa2;
+  --ge-table-formula-ref-3: #188038;
+  --ge-table-formula-ref-4: #c26401;
+  --ge-table-formula-ref-5: #00838f;
+  --ge-table-formula-ref-6: #c2185b;
+  --ge-table-formula-ref-7: #5d4037;
+  --ge-table-formula-popup-bg: #fff;
+  --ge-table-formula-popup-text: #111;
+  --ge-table-formula-popup-muted: #5f6368;
+  --ge-table-formula-popup-border: #c4c7c5;
+  --ge-table-formula-popup-active-bg: #e8f0fe;
+  /* formula bar (since 1.1.99) */
+  --ge-table-formula-bar-bg: #fff;
+  --ge-table-formula-bar-text: #111;
+  --ge-table-formula-bar-muted: #5f6368;
+  --ge-table-formula-bar-border: #c4c7c5;
 }
 
 
@@ -644,6 +713,34 @@ html[data-theme="dark"] {
   --ge-table-detail-border: #3c434d;
   --ge-table-detail-toggle-color: #bdc1c6;
   --ge-table-detail-toggle-hover-bg: rgba(255, 255, 255, 0.12);
+
+  /* Excel-style editing (since 1.1.99) */
+  --ge-table-cell-editor-bg: #1f2937;
+  --ge-table-cell-editor-text: #f3f4f6;
+  --ge-table-cell-editor-border: #8ab4f8;
+  --ge-table-cell-editor-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
+  --ge-table-cell-editor-invalid-border: #f28b82;
+  --ge-table-cut-range-border: #8ab4f8;
+  --ge-table-cut-range-border-alt: #3c5a85;
+  /* formula input (since 1.1.99) */
+  --ge-table-formula-ref-0: #8ab4f8;
+  --ge-table-formula-ref-1: #f28b82;
+  --ge-table-formula-ref-2: #d7aefb;
+  --ge-table-formula-ref-3: #81c995;
+  --ge-table-formula-ref-4: #fcad70;
+  --ge-table-formula-ref-5: #78d9ec;
+  --ge-table-formula-ref-6: #ff8bcb;
+  --ge-table-formula-ref-7: #d7ccc8;
+  --ge-table-formula-popup-bg: #1f2937;
+  --ge-table-formula-popup-text: #f3f4f6;
+  --ge-table-formula-popup-muted: #9aa0a6;
+  --ge-table-formula-popup-border: #4b5563;
+  --ge-table-formula-popup-active-bg: #374151;
+  /* formula bar (since 1.1.99) */
+  --ge-table-formula-bar-bg: #1f2937;
+  --ge-table-formula-bar-text: #f3f4f6;
+  --ge-table-formula-bar-muted: #9aa0a6;
+  --ge-table-formula-bar-border: #4b5563;
 }
 /* Fill handle and batch edit (since 1.1.96) – colors in table-color-vars.css (--ge-table-fill-*, --ge-table-cell-*) */
 
@@ -973,6 +1070,205 @@ html[data-theme="dark"] {
   font-variant-numeric: tabular-nums;
   font-weight: var(--ge-table-row-group-label-font-weight);
 }
+/* Excel-style editing (since 1.1.99): one editor element above the edited cell (tableOptions.editing) */
+.ge-table-cell-editor {
+  position: absolute;
+  display: none;
+  box-sizing: border-box;
+  z-index: 9500; /* above the cells, the detail layer (1000) and the fill preview (8999), below the focus frame (9999) and overlay (10000) */
+  background: var(--ge-table-cell-editor-bg);
+  box-shadow: var(--ge-table-cell-editor-shadow);
+}
+.ge-table-cell-editor.ge-table-cell-editor-clipped {
+  pointer-events: none; /* scrolled out of view: invisible, but still focused */
+  box-shadow: none;
+}
+.ge-table-cell-editor-field {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 6px;
+  border: 2px solid var(--ge-table-cell-editor-border);
+  border-radius: 0;
+  outline: none;
+  font: inherit;
+  color: var(--ge-table-cell-editor-text);
+  background: var(--ge-table-cell-editor-bg);
+}
+.ge-table-cell-editor-field[aria-invalid="true"] {
+  border-color: var(--ge-table-cell-editor-invalid-border);
+}
+.ge-table-cell-editor-number {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The editors inside the cell (InputCellRenderer, SelectCellRenderer) – before 1.1.99 these were inline styles,
+   which a strict Content-Security-Policy (style-src without 'unsafe-inline') blocks */
+input.ge-table-cell-editor-input {
+  width: calc(100% - 8px);
+  height: 100%;
+  border: 0;
+  padding: 0;
+  padding-inline-start: 8px;
+}
+select.ge-table-cell-editor-select {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  padding-inline-start: 8px;
+}
+
+/* Formula input (since 1.1.99, tableOptions.cellFormulas): colored references in the editor (a mirror behind the
+   transparent text of the input), frames around the referenced cells, function suggestions and the argument hint */
+.ge-table-formula-mirror {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  border: 2px solid transparent;
+  overflow: hidden;
+  white-space: pre;
+  pointer-events: none;
+  font: inherit;
+  color: var(--ge-table-cell-editor-text);
+  direction: ltr;
+  text-align: left;
+}
+.ge-table-cell-editor-field.ge-table-formula-input {
+  position: relative;
+  color: transparent;
+  caret-color: var(--ge-table-cell-editor-text);
+  background: transparent;
+  text-align: left; /* formulas read left to right (Excel), also in number columns and right-to-left tables */
+  direction: ltr;
+}
+.ge-table-cell-editor-field.ge-table-formula-input::selection {
+  color: transparent;
+  background: rgba(10, 110, 189, 0.3); /* the mirror's text stays readable under the selection */
+}
+.ge-table-formula-ref {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--ge-table-formula-ref-0);
+  pointer-events: none;
+  z-index: 9400; /* above the cells, below the editor (9500) */
+}
+.ge-table-formula-ref-text-0 { color: var(--ge-table-formula-ref-0); }
+.ge-table-formula-ref-text-1 { color: var(--ge-table-formula-ref-1); }
+.ge-table-formula-ref-text-2 { color: var(--ge-table-formula-ref-2); }
+.ge-table-formula-ref-text-3 { color: var(--ge-table-formula-ref-3); }
+.ge-table-formula-ref-text-4 { color: var(--ge-table-formula-ref-4); }
+.ge-table-formula-ref-text-5 { color: var(--ge-table-formula-ref-5); }
+.ge-table-formula-ref-text-6 { color: var(--ge-table-formula-ref-6); }
+.ge-table-formula-ref-text-7 { color: var(--ge-table-formula-ref-7); }
+.ge-table-formula-ref.ge-table-formula-ref-1 { border-color: var(--ge-table-formula-ref-1); }
+.ge-table-formula-ref.ge-table-formula-ref-2 { border-color: var(--ge-table-formula-ref-2); }
+.ge-table-formula-ref.ge-table-formula-ref-3 { border-color: var(--ge-table-formula-ref-3); }
+.ge-table-formula-ref.ge-table-formula-ref-4 { border-color: var(--ge-table-formula-ref-4); }
+.ge-table-formula-ref.ge-table-formula-ref-5 { border-color: var(--ge-table-formula-ref-5); }
+.ge-table-formula-ref.ge-table-formula-ref-6 { border-color: var(--ge-table-formula-ref-6); }
+.ge-table-formula-ref.ge-table-formula-ref-7 { border-color: var(--ge-table-formula-ref-7); }
+.ge-table-formula-list,
+.ge-table-formula-hint {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  margin-top: 2px;
+  box-sizing: border-box;
+  background: var(--ge-table-formula-popup-bg);
+  color: var(--ge-table-formula-popup-text);
+  border: 1px solid var(--ge-table-formula-popup-border);
+  box-shadow: var(--ge-table-cell-editor-shadow);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.ge-table-formula-list {
+  min-width: 260px;
+  max-width: 420px;
+  max-height: 216px;
+  overflow-y: auto;
+  padding: 2px 0;
+}
+.ge-table-formula-option {
+  display: flex;
+  gap: 8px;
+  padding: 1px 8px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ge-table-formula-option[aria-selected="true"] {
+  background: var(--ge-table-formula-popup-active-bg);
+}
+.ge-table-formula-option-name {
+  font-weight: 600;
+}
+.ge-table-formula-option-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ge-table-formula-popup-muted);
+}
+.ge-table-formula-hint {
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+.ge-table-formula-hint b {
+  font-weight: 700;
+}
+/* Spreadsheet mode (since 1.1.99): the formula bar (FormulaBar) */
+.ge-table-formula-bar {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  box-sizing: border-box;
+  height: 30px;
+  border: 1px solid var(--ge-table-formula-bar-border);
+  background: var(--ge-table-formula-bar-bg);
+  color: var(--ge-table-formula-bar-text);
+  font: inherit;
+}
+.ge-table-formula-bar-address,
+.ge-table-formula-bar-input {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 8px;
+  border: 0;
+  outline: none;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+}
+.ge-table-formula-bar-address {
+  flex: 0 0 96px;
+  width: 96px;
+  border-inline-end: 1px solid var(--ge-table-formula-bar-border);
+  font-variant-numeric: tabular-nums;
+}
+.ge-table-formula-bar-address[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-editor-invalid-border);
+}
+.ge-table-formula-bar-fx {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  font-style: italic;
+  color: var(--ge-table-formula-bar-muted);
+  border-inline-end: 1px solid var(--ge-table-formula-bar-border);
+}
+.ge-table-formula-bar-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  direction: ltr; /* formulas read left to right */
+  text-align: left;
+}
+.ge-table-formula-bar-address:focus-visible,
+.ge-table-formula-bar-input:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-editor-border);
+}
 /* Tree table */
 
 .ge-table-col-div.ge-table-col-div-0.ge-table-tree-cell {

package/css/table-clipboard.css

@@ -0,0 +1,41 @@
+/* Copy, cut and paste (since 1.1.99, tableOptions.clipboard) */
+
+/* the hidden text field that gets the focus for the moment of Ctrl/⌘+C, X, V (the browser fires its clipboard event there) */
+.ge-table-clipboard-proxy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  overflow: hidden;
+  resize: none;
+  pointer-events: none;
+  font-size: 16px; /* iOS zooms into a focused field with a smaller font */
+}
+
+/* cut cells: a dashed frame ("marching ants") until they are pasted, Escape or another change */
+.ge-table-cut-range {
+  position: absolute;
+  display: none;
+  z-index: 8998; /* below the fill preview (8999) and the editor (9500) */
+  box-sizing: border-box;
+  pointer-events: none;
+  border: 2px dashed var(--ge-table-cut-range-border);
+  animation: ge-table-cut-range-ants 0.8s linear infinite;
+}
+
+@keyframes ge-table-cut-range-ants {
+  50% {
+    border-color: var(--ge-table-cut-range-border-alt);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ge-table-cut-range {
+    animation: none; /* the dashed frame alone */
+  }
+}

package/css/table-color-vars.css

@@ -136,6 +136,34 @@ html, html[data-theme="light"] {
   --ge-table-detail-border: #c9d1db;
   --ge-table-detail-toggle-color: #5f6368;
   --ge-table-detail-toggle-hover-bg: rgba(128, 128, 128, 0.15);
+
+  /* Excel-style editing (since 1.1.99): the editor above the cell */
+  --ge-table-cell-editor-bg: #fff;
+  --ge-table-cell-editor-text: #111;
+  --ge-table-cell-editor-border: #0a6ebd;
+  --ge-table-cell-editor-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --ge-table-cell-editor-invalid-border: #d93025;
+  --ge-table-cut-range-border: #0a6ebd;
+  --ge-table-cut-range-border-alt: #9ec9ec;
+  /* formula input (since 1.1.99): colors of the references 0–7, function list and hint */
+  --ge-table-formula-ref-0: #1a73e8;
+  --ge-table-formula-ref-1: #d93025;
+  --ge-table-formula-ref-2: #7b1fa2;
+  --ge-table-formula-ref-3: #188038;
+  --ge-table-formula-ref-4: #c26401;
+  --ge-table-formula-ref-5: #00838f;
+  --ge-table-formula-ref-6: #c2185b;
+  --ge-table-formula-ref-7: #5d4037;
+  --ge-table-formula-popup-bg: #fff;
+  --ge-table-formula-popup-text: #111;
+  --ge-table-formula-popup-muted: #5f6368;
+  --ge-table-formula-popup-border: #c4c7c5;
+  --ge-table-formula-popup-active-bg: #e8f0fe;
+  /* formula bar (since 1.1.99) */
+  --ge-table-formula-bar-bg: #fff;
+  --ge-table-formula-bar-text: #111;
+  --ge-table-formula-bar-muted: #5f6368;
+  --ge-table-formula-bar-border: #c4c7c5;
 }
 
 
@@ -263,4 +291,32 @@ html[data-theme="dark"] {
   --ge-table-detail-border: #3c434d;
   --ge-table-detail-toggle-color: #bdc1c6;
   --ge-table-detail-toggle-hover-bg: rgba(255, 255, 255, 0.12);
+
+  /* Excel-style editing (since 1.1.99) */
+  --ge-table-cell-editor-bg: #1f2937;
+  --ge-table-cell-editor-text: #f3f4f6;
+  --ge-table-cell-editor-border: #8ab4f8;
+  --ge-table-cell-editor-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
+  --ge-table-cell-editor-invalid-border: #f28b82;
+  --ge-table-cut-range-border: #8ab4f8;
+  --ge-table-cut-range-border-alt: #3c5a85;
+  /* formula input (since 1.1.99) */
+  --ge-table-formula-ref-0: #8ab4f8;
+  --ge-table-formula-ref-1: #f28b82;
+  --ge-table-formula-ref-2: #d7aefb;
+  --ge-table-formula-ref-3: #81c995;
+  --ge-table-formula-ref-4: #fcad70;
+  --ge-table-formula-ref-5: #78d9ec;
+  --ge-table-formula-ref-6: #ff8bcb;
+  --ge-table-formula-ref-7: #d7ccc8;
+  --ge-table-formula-popup-bg: #1f2937;
+  --ge-table-formula-popup-text: #f3f4f6;
+  --ge-table-formula-popup-muted: #9aa0a6;
+  --ge-table-formula-popup-border: #4b5563;
+  --ge-table-formula-popup-active-bg: #374151;
+  /* formula bar (since 1.1.99) */
+  --ge-table-formula-bar-bg: #1f2937;
+  --ge-table-formula-bar-text: #f3f4f6;
+  --ge-table-formula-bar-muted: #9aa0a6;
+  --ge-table-formula-bar-border: #4b5563;
 }

package/css/table-sheet-editing.css

@@ -0,0 +1,149 @@
+/* Excel-style editing (since 1.1.99): one editor element above the edited cell (tableOptions.editing) */
+.ge-table-cell-editor {
+  position: absolute;
+  display: none;
+  box-sizing: border-box;
+  z-index: 9500; /* above the cells, the detail layer (1000) and the fill preview (8999), below the focus frame (9999) and overlay (10000) */
+  background: var(--ge-table-cell-editor-bg);
+  box-shadow: var(--ge-table-cell-editor-shadow);
+}
+.ge-table-cell-editor.ge-table-cell-editor-clipped {
+  pointer-events: none; /* scrolled out of view: invisible, but still focused */
+  box-shadow: none;
+}
+.ge-table-cell-editor-field {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 6px;
+  border: 2px solid var(--ge-table-cell-editor-border);
+  border-radius: 0;
+  outline: none;
+  font: inherit;
+  color: var(--ge-table-cell-editor-text);
+  background: var(--ge-table-cell-editor-bg);
+}
+.ge-table-cell-editor-field[aria-invalid="true"] {
+  border-color: var(--ge-table-cell-editor-invalid-border);
+}
+.ge-table-cell-editor-number {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The editors inside the cell (InputCellRenderer, SelectCellRenderer) – before 1.1.99 these were inline styles,
+   which a strict Content-Security-Policy (style-src without 'unsafe-inline') blocks */
+input.ge-table-cell-editor-input {
+  width: calc(100% - 8px);
+  height: 100%;
+  border: 0;
+  padding: 0;
+  padding-inline-start: 8px;
+}
+select.ge-table-cell-editor-select {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  padding-inline-start: 8px;
+}
+
+/* Formula input (since 1.1.99, tableOptions.cellFormulas): colored references in the editor (a mirror behind the
+   transparent text of the input), frames around the referenced cells, function suggestions and the argument hint */
+.ge-table-formula-mirror {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  border: 2px solid transparent;
+  overflow: hidden;
+  white-space: pre;
+  pointer-events: none;
+  font: inherit;
+  color: var(--ge-table-cell-editor-text);
+  direction: ltr;
+  text-align: left;
+}
+.ge-table-cell-editor-field.ge-table-formula-input {
+  position: relative;
+  color: transparent;
+  caret-color: var(--ge-table-cell-editor-text);
+  background: transparent;
+  text-align: left; /* formulas read left to right (Excel), also in number columns and right-to-left tables */
+  direction: ltr;
+}
+.ge-table-cell-editor-field.ge-table-formula-input::selection {
+  color: transparent;
+  background: rgba(10, 110, 189, 0.3); /* the mirror's text stays readable under the selection */
+}
+.ge-table-formula-ref {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--ge-table-formula-ref-0);
+  pointer-events: none;
+  z-index: 9400; /* above the cells, below the editor (9500) */
+}
+.ge-table-formula-ref-text-0 { color: var(--ge-table-formula-ref-0); }
+.ge-table-formula-ref-text-1 { color: var(--ge-table-formula-ref-1); }
+.ge-table-formula-ref-text-2 { color: var(--ge-table-formula-ref-2); }
+.ge-table-formula-ref-text-3 { color: var(--ge-table-formula-ref-3); }
+.ge-table-formula-ref-text-4 { color: var(--ge-table-formula-ref-4); }
+.ge-table-formula-ref-text-5 { color: var(--ge-table-formula-ref-5); }
+.ge-table-formula-ref-text-6 { color: var(--ge-table-formula-ref-6); }
+.ge-table-formula-ref-text-7 { color: var(--ge-table-formula-ref-7); }
+.ge-table-formula-ref.ge-table-formula-ref-1 { border-color: var(--ge-table-formula-ref-1); }
+.ge-table-formula-ref.ge-table-formula-ref-2 { border-color: var(--ge-table-formula-ref-2); }
+.ge-table-formula-ref.ge-table-formula-ref-3 { border-color: var(--ge-table-formula-ref-3); }
+.ge-table-formula-ref.ge-table-formula-ref-4 { border-color: var(--ge-table-formula-ref-4); }
+.ge-table-formula-ref.ge-table-formula-ref-5 { border-color: var(--ge-table-formula-ref-5); }
+.ge-table-formula-ref.ge-table-formula-ref-6 { border-color: var(--ge-table-formula-ref-6); }
+.ge-table-formula-ref.ge-table-formula-ref-7 { border-color: var(--ge-table-formula-ref-7); }
+.ge-table-formula-list,
+.ge-table-formula-hint {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  margin-top: 2px;
+  box-sizing: border-box;
+  background: var(--ge-table-formula-popup-bg);
+  color: var(--ge-table-formula-popup-text);
+  border: 1px solid var(--ge-table-formula-popup-border);
+  box-shadow: var(--ge-table-cell-editor-shadow);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.ge-table-formula-list {
+  min-width: 260px;
+  max-width: 420px;
+  max-height: 216px;
+  overflow-y: auto;
+  padding: 2px 0;
+}
+.ge-table-formula-option {
+  display: flex;
+  gap: 8px;
+  padding: 1px 8px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ge-table-formula-option[aria-selected="true"] {
+  background: var(--ge-table-formula-popup-active-bg);
+}
+.ge-table-formula-option-name {
+  font-weight: 600;
+}
+.ge-table-formula-option-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ge-table-formula-popup-muted);
+}
+.ge-table-formula-hint {
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+.ge-table-formula-hint b {
+  font-weight: 700;
+}

package/css/table-spreadsheet.css

@@ -0,0 +1,50 @@
+/* Spreadsheet mode (since 1.1.99): the formula bar (FormulaBar) */
+.ge-table-formula-bar {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  box-sizing: border-box;
+  height: 30px;
+  border: 1px solid var(--ge-table-formula-bar-border);
+  background: var(--ge-table-formula-bar-bg);
+  color: var(--ge-table-formula-bar-text);
+  font: inherit;
+}
+.ge-table-formula-bar-address,
+.ge-table-formula-bar-input {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 8px;
+  border: 0;
+  outline: none;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+}
+.ge-table-formula-bar-address {
+  flex: 0 0 96px;
+  width: 96px;
+  border-inline-end: 1px solid var(--ge-table-formula-bar-border);
+  font-variant-numeric: tabular-nums;
+}
+.ge-table-formula-bar-address[aria-invalid="true"] {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-editor-invalid-border);
+}
+.ge-table-formula-bar-fx {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  font-style: italic;
+  color: var(--ge-table-formula-bar-muted);
+  border-inline-end: 1px solid var(--ge-table-formula-bar-border);
+}
+.ge-table-formula-bar-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  direction: ltr; /* formulas read left to right */
+  text-align: left;
+}
+.ge-table-formula-bar-address:focus-visible,
+.ge-table-formula-bar-input:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ge-table-cell-editor-border);
+}