@design.estate/dees-catalog 3.69.0 → 3.70.0

package/dist_bundle/bundle.js

@@ -163904,6 +163904,69 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
 ]}
         ></dees-table>
       </div>
+
+      <dees-demowrapper .runAfterRender=${async (elementArg) => {
+  const tableEl = elementArg.querySelector("#demoLiveFlash");
+  if (!tableEl) return;
+  if (tableEl.__liveFlashTimerId) {
+    window.clearInterval(tableEl.__liveFlashTimerId);
+  }
+  const tick = /* @__PURE__ */ __name(() => {
+    if (!Array.isArray(tableEl.data) || tableEl.data.length === 0) return;
+    const next2 = tableEl.data.map((r11) => ({ ...r11 }));
+    const count2 = 1 + Math.floor(Math.random() * 3);
+    for (let i11 = 0; i11 < count2; i11++) {
+      const idx = Math.floor(Math.random() * next2.length);
+      const delta = +((Math.random() * 2 - 1) * 3).toFixed(2);
+      const newPrice = Math.max(1, +(next2[idx].price + delta).toFixed(2));
+      next2[idx] = {
+        ...next2[idx],
+        price: newPrice,
+        change: delta,
+        updatedAt: (/* @__PURE__ */ new Date()).toLocaleTimeString()
+      };
+    }
+    tableEl.data = next2;
+  }, "tick");
+  tableEl.__liveFlashTimerId = window.setInterval(tick, 1500);
+}}>
+        <div class="demo-section">
+          <h2 class="demo-title">Live Updates with Flash Highlighting</h2>
+          <p class="demo-description">
+            Opt-in cell-flash via <code>highlight-updates="flash"</code>. The ticker below mutates
+            random rows every 1.5s and reassigns <code>.data</code>. Updated cells briefly flash
+            amber and fade out. Requires <code>rowKey</code> (here <code>"symbol"</code>). Honors
+            <code>prefers-reduced-motion</code>. Row selection persists across updates — click a
+            row, then watch it stay selected as the data churns.
+          </p>
+          <dees-table
+            id="demoLiveFlash"
+            .rowKey=${"symbol"}
+            highlight-updates="flash"
+            .selectionMode=${"multi"}
+            heading1="Live Market Feed"
+            heading2="Flashing cells indicate updated values"
+            .columns=${[
+  { key: "symbol", header: "Symbol", sortable: true },
+  { key: "price", header: "Price", sortable: true },
+  { key: "change", header: "\u0394", sortable: true },
+  { key: "updatedAt", header: "Updated" }
+]}
+            .data=${[
+  { symbol: "AAPL", price: 182.52, change: 0, updatedAt: "\u2014" },
+  { symbol: "MSFT", price: 414.18, change: 0, updatedAt: "\u2014" },
+  { symbol: "GOOG", price: 168.74, change: 0, updatedAt: "\u2014" },
+  { symbol: "AMZN", price: 186.13, change: 0, updatedAt: "\u2014" },
+  { symbol: "TSLA", price: 248.5, change: 0, updatedAt: "\u2014" },
+  { symbol: "NVDA", price: 877.35, change: 0, updatedAt: "\u2014" },
+  { symbol: "META", price: 492.96, change: 0, updatedAt: "\u2014" },
+  { symbol: "NFLX", price: 605.88, change: 0, updatedAt: "\u2014" },
+  { symbol: "AMD", price: 165.24, change: 0, updatedAt: "\u2014" },
+  { symbol: "INTC", price: 42.15, change: 0, updatedAt: "\u2014" }
+]}
+          ></dees-table>
+        </div>
+      </dees-demowrapper>
     </div>
   </div>
 `, "demoFunc");
@@ -164282,6 +164345,72 @@ var tableStyles = [
         line-height: 24px;
       }
 
+      /* ---- Cell flash highlighting (opt-in via highlight-updates="flash") ----
+         Bloomberg/TradingView-style: the text itself briefly takes an accent
+         color then fades back to the default. No background tint, no layout
+         shift, no weight change. Readable, modern, subtle.
+         Consumers can override per instance:
+           dees-table#myTable { --dees-table-flash-color: hsl(142 76% 40%); }
+      */
+      :host {
+        --dees-table-flash-color: ${cssManager.bdTheme(
+    "hsl(32 95% 44%)",
+    "hsl(45 93% 62%)"
+  )};
+        --dees-table-flash-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
+      }
+
+      .innerCellContainer.flashing {
+        animation: dees-table-cell-flash
+                   var(--dees-table-flash-duration, 900ms)
+                   var(--dees-table-flash-easing);
+      }
+
+      /* Hold the accent color briefly, then fade back to the theme's default
+         text color. Inherits to child text and to SVG icons that use
+         currentColor. Cells with explicit color overrides in renderers are
+         intentionally unaffected. */
+      @keyframes dees-table-cell-flash {
+        0%,
+        35% { color: var(--dees-table-flash-color); }
+        100% { color: var(--dees-color-text-primary); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .innerCellContainer.flashing {
+          animation: none;
+          color: var(--dees-table-flash-color);
+        }
+      }
+
+      /* Dev-time warning banner shown when highlight-updates="flash" but
+         rowKey is missing. Consumers should never ship this to production. */
+      .flashConfigWarning {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 8px 16px 0;
+        padding: 8px 12px;
+        border-left: 3px solid ${cssManager.bdTheme("hsl(38 92% 50%)", "hsl(48 96% 63%)")};
+        background: ${cssManager.bdTheme("hsl(48 96% 89% / 0.6)", "hsl(48 96% 30% / 0.15)")};
+        color: ${cssManager.bdTheme("hsl(32 81% 29%)", "hsl(48 96% 80%)")};
+        font-size: 12px;
+        line-height: 1.4;
+        border-radius: 4px;
+      }
+      .flashConfigWarning dees-icon {
+        width: 14px;
+        height: 14px;
+        flex: 0 0 auto;
+      }
+      .flashConfigWarning code {
+        padding: 1px 4px;
+        border-radius: 3px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100% / 0.6)", "hsl(0 0% 0% / 0.3)")};
+        font-family: ${cssGeistFontFamily};
+        font-size: 11px;
+      }
+
       /* Editable cell affordances */
       td.editable {
         cursor: text;
@@ -164664,7 +164793,7 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var ___virtualRange_dec, ___floatingActive_dec, ___editingCell_dec, ___focusedCell_dec, _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _virtualOverscan_dec, _virtualized_dec, _showSelectionCheckbox_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _showSelectionCheckbox, _virtualized, _virtualOverscan, _fixedHeight, _searchMode, _selectionMode, _selectedIds, ___focusedCell, ___editingCell, ___floatingActive, ___virtualRange;
+var ___virtualRange_dec, ___flashingCells_dec, ___floatingActive_dec, ___editingCell_dec, ___focusedCell_dec, _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _fixedHeight_dec, _highlightDuration_dec, _highlightUpdates_dec, _virtualOverscan_dec, _virtualized_dec, _showSelectionCheckbox_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _selectedDataRow_dec, _reverseDisplayFunction_dec, _displayFunction_dec, _augmentFromDisplayFunction_dec, _rowKey_dec, _columns_dec, _dataActions_dec, _searchable_dec, _dataName_dec, _required_dec3, _disabled_dec3, _label_dec3, _key_dec2, _data_dec, _heading2_dec, _heading1_dec, _a42, _DeesTable_decorators, _init39, _heading1, _heading22, _data, _key2, _label3, _disabled3, _required3, _dataName, _searchable, _dataActions, _columns, _rowKey, _augmentFromDisplayFunction, _displayFunction, _reverseDisplayFunction, _selectedDataRow, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _showSelectionCheckbox, _virtualized, _virtualOverscan, _highlightUpdates, _highlightDuration, _fixedHeight, _searchMode, _selectionMode, _selectedIds, ___focusedCell, ___editingCell, ___floatingActive, ___flashingCells, ___virtualRange;
 function ordinalLabel(n12) {
   const s10 = ["th", "st", "nd", "rd"];
   const v5 = n12 % 100;
@@ -164711,7 +164840,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   type: Boolean,
   reflect: true,
   attribute: "show-grid"
-})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _showSelectionCheckbox_dec = [n5({ type: Boolean, reflect: true, attribute: "show-selection-checkbox" })], _virtualized_dec = [n5({ type: Boolean, reflect: true, attribute: "virtualized" })], _virtualOverscan_dec = [n5({ type: Number, attribute: "virtual-overscan" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], ___focusedCell_dec = [r5()], ___editingCell_dec = [r5()], ___floatingActive_dec = [r5()], ___virtualRange_dec = [r5()], _a42) {
+})], _sortBy_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _showSelectionCheckbox_dec = [n5({ type: Boolean, reflect: true, attribute: "show-selection-checkbox" })], _virtualized_dec = [n5({ type: Boolean, reflect: true, attribute: "virtualized" })], _virtualOverscan_dec = [n5({ type: Number, attribute: "virtual-overscan" })], _highlightUpdates_dec = [n5({ type: String, attribute: "highlight-updates" })], _highlightDuration_dec = [n5({ type: Number, attribute: "highlight-duration" })], _fixedHeight_dec = [n5({ type: Boolean, reflect: true, attribute: "fixed-height" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], ___focusedCell_dec = [r5()], ___editingCell_dec = [r5()], ___floatingActive_dec = [r5()], ___flashingCells_dec = [r5()], ___virtualRange_dec = [r5()], _a42) {
   constructor() {
     super();
     __privateAdd(this, _heading1, __runInitializers(_init39, 8, this, "heading 1")), __runInitializers(_init39, 11, this);
@@ -164744,12 +164873,14 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __privateAdd(this, _showSelectionCheckbox, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
     __privateAdd(this, _virtualized, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
     __privateAdd(this, _virtualOverscan, __runInitializers(_init39, 108, this, 8)), __runInitializers(_init39, 111, this);
-    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 112, this, false)), __runInitializers(_init39, 115, this);
-    __privateAdd(this, _searchMode, __runInitializers(_init39, 116, this, "table")), __runInitializers(_init39, 119, this);
+    __privateAdd(this, _highlightUpdates, __runInitializers(_init39, 112, this, "none")), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _highlightDuration, __runInitializers(_init39, 116, this, 900)), __runInitializers(_init39, 119, this);
+    __privateAdd(this, _fixedHeight, __runInitializers(_init39, 120, this, false)), __runInitializers(_init39, 123, this);
+    __privateAdd(this, _searchMode, __runInitializers(_init39, 124, this, "table")), __runInitializers(_init39, 127, this);
     __publicField(this, "__searchTextSub");
     __publicField(this, "__searchModeSub");
-    __privateAdd(this, _selectionMode, __runInitializers(_init39, 120, this, "none")), __runInitializers(_init39, 123, this);
-    __privateAdd(this, _selectedIds, __runInitializers(_init39, 124, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 127, this);
+    __privateAdd(this, _selectionMode, __runInitializers(_init39, 128, this, "none")), __runInitializers(_init39, 131, this);
+    __privateAdd(this, _selectedIds, __runInitializers(_init39, 132, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 135, this);
     __publicField(this, "_rowIdMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_rowIdCounter", 0);
     /**
@@ -164758,9 +164889,18 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
      * can compute a contiguous range from this anchor.
      */
     __publicField(this, "__selectionAnchorId");
-    __privateAdd(this, ___focusedCell, __runInitializers(_init39, 128, this)), __runInitializers(_init39, 131, this);
-    __privateAdd(this, ___editingCell, __runInitializers(_init39, 132, this)), __runInitializers(_init39, 135, this);
-    __privateAdd(this, ___floatingActive, __runInitializers(_init39, 136, this, false)), __runInitializers(_init39, 139, this);
+    __privateAdd(this, ___focusedCell, __runInitializers(_init39, 136, this)), __runInitializers(_init39, 139, this);
+    __privateAdd(this, ___editingCell, __runInitializers(_init39, 140, this)), __runInitializers(_init39, 143, this);
+    __privateAdd(this, ___floatingActive, __runInitializers(_init39, 144, this, false)), __runInitializers(_init39, 147, this);
+    __privateAdd(this, ___flashingCells, __runInitializers(_init39, 148, this, /* @__PURE__ */ new Map())), __runInitializers(_init39, 151, this);
+    /** rowId → (colKey → last-seen resolved cell value). Populated per diff pass. */
+    __publicField(this, "__prevSnapshot");
+    /** Single shared timer that clears __flashingCells after highlightDuration ms. */
+    __publicField(this, "__flashClearTimer");
+    /** Monotonic counter bumped each flash batch so directives.keyed recreates the cell node and restarts the animation. */
+    __publicField(this, "__flashTick", 0);
+    /** One-shot console.warn gate for missing rowKey in flash mode. */
+    __publicField(this, "__flashWarnedNoRowKey", false);
     // ─── Render memoization ──────────────────────────────────────────────
     // These caches let render() short-circuit when the relevant inputs
     // (by reference) haven't changed. They are NOT @state — mutating them
@@ -164774,7 +164914,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __publicField(this, "__rowHeight", 36);
     /** True once we've measured `__rowHeight` from a real DOM row. */
     __publicField(this, "__rowHeightMeasured", false);
-    __privateAdd(this, ___virtualRange, __runInitializers(_init39, 140, this, { start: 0, end: 0 })), __runInitializers(_init39, 143, this);
+    __privateAdd(this, ___virtualRange, __runInitializers(_init39, 152, this, { start: 0, end: 0 })), __runInitializers(_init39, 155, this);
     /**
      * Ctrl/Cmd+C copies the currently selected rows as a JSON array. Falls
      * back to copying the focused-row (`selectedDataRow`) if no multi
@@ -165099,6 +165239,13 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
           </div>
         </div>
         <div class="headingSeparation"></div>
+        ${this.highlightUpdates === "flash" && !this.rowKey ? b2`<div class="flashConfigWarning" role="alert">
+              <dees-icon .icon=${"lucide:triangleAlert"}></dees-icon>
+              <span>
+                <code>highlight-updates="flash"</code> requires
+                <code>rowKey</code> to be set. Flash is disabled.
+              </span>
+            </div>` : b2``}
         <div class="searchGrid hidden">
           <dees-input-text
             .label=${"lucene syntax search"}
@@ -165145,10 +165292,14 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                   @drop=${this.__onTbodyDrop}
                 >
                   ${useVirtual && topSpacerHeight > 0 ? b2`<tr aria-hidden="true" style="height:${topSpacerHeight}px"><td></td></tr>` : b2``}
-                  ${renderRows.map((itemArg, sliceIdx) => {
-      const rowIndex = renderStart + sliceIdx;
-      const rowId = this.getRowId(itemArg);
-      return b2`
+                  ${directives_exports.repeat(
+      renderRows,
+      (itemArg, sliceIdx) => `${this.getRowId(itemArg)}::${renderStart + sliceIdx}`,
+      (itemArg, sliceIdx) => {
+        const rowIndex = renderStart + sliceIdx;
+        const rowId = this.getRowId(itemArg);
+        const flashSet = this.__flashingCells.get(rowId);
+        return b2`
                       <tr
                         data-row-idx=${rowIndex}
                         class="${itemArg === this.selectedDataRow || this.isRowSelected(itemArg) ? "selected" : ""}"
@@ -165157,59 +165308,67 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                               <dees-input-checkbox
                                 .value=${this.isRowSelected(itemArg)}
                                 @newValue=${(e11) => {
-        e11.stopPropagation();
-        this.setRowSelected(itemArg, e11.detail === true);
-      }}
+          e11.stopPropagation();
+          this.setRowSelected(itemArg, e11.detail === true);
+        }}
                               ></dees-input-checkbox>
                             </td>` : b2``}
                         ${effectiveColumns.filter((c11) => !c11.hidden).map((col, colIndex) => {
-        const value2 = getCellValue(itemArg, col, this.displayFunction);
-        const content3 = col.renderer ? col.renderer(value2, itemArg, { rowIndex, colIndex, column: col }) : value2;
-        const editKey = String(col.key);
-        const isEditable = !!(col.editable || col.editor);
-        const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
-        const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
-        const cellClasses = [
-          isEditable ? "editable" : "",
-          isFocused && !isEditing ? "focused" : "",
-          isEditing ? "editingCell" : ""
-        ].filter(Boolean).join(" ");
-        return b2`
+          const value2 = getCellValue(itemArg, col, this.displayFunction);
+          const content3 = col.renderer ? col.renderer(value2, itemArg, { rowIndex, colIndex, column: col }) : value2;
+          const editKey = String(col.key);
+          const isEditable = !!(col.editable || col.editor);
+          const isFocused = this.__focusedCell?.rowId === rowId && this.__focusedCell?.colKey === editKey;
+          const isEditing = this.__editingCell?.rowId === rowId && this.__editingCell?.colKey === editKey;
+          const isFlashing = !!flashSet?.has(editKey);
+          const cellClasses = [
+            isEditable ? "editable" : "",
+            isFocused && !isEditing ? "focused" : "",
+            isEditing ? "editingCell" : ""
+          ].filter(Boolean).join(" ");
+          const innerHtml = b2`<div
+                              class=${isFlashing ? "innerCellContainer flashing" : "innerCellContainer"}
+                            >
+                              ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
+                            </div>`;
+          return b2`
                               <td
                                 class=${cellClasses}
                                 data-col-key=${editKey}
                               >
-                                <div class="innerCellContainer">
-                                  ${isEditing ? this.renderCellEditor(itemArg, col) : content3}
-                                </div>
+                                ${isFlashing ? directives_exports.keyed(
+            `${rowId}:${editKey}:${this.__flashTick}`,
+            innerHtml
+          ) : innerHtml}
                               </td>
                             `;
-      })}
+        })}
                         ${(() => {
-        if (this.dataActions && this.dataActions.length > 0) {
-          return b2`
+          if (this.dataActions && this.dataActions.length > 0) {
+            return b2`
                               <td class="actionsCol">
                                 <div class="actionsContainer">
                                   ${this.getActionsForType("inRow").map(
-            (actionArg) => b2`
+              (actionArg) => b2`
                                       <div
                                         class="action"
                                         @click=${() => actionArg.actionFunc({
-              item: itemArg,
-              table: this
-            })}
+                item: itemArg,
+                table: this
+              })}
                                       >
                                         ${actionArg.iconName ? b2` <dees-icon .icon=${actionArg.iconName}></dees-icon> ` : actionArg.name}
                                       </div>
                                     `
-          )}
+            )}
                                 </div>
                               </td>
                             `;
-        }
-      })()}
+          }
+        })()}
                       </tr>`;
-    })}
+      }
+    )}
                   ${useVirtual && bottomSpacerHeight > 0 ? b2`<tr aria-hidden="true" style="height:${bottomSpacerHeight}px"><td></td></tr>` : b2``}
                 </tbody>
               </table>
@@ -165300,7 +165459,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
       const key2 = String(col.key);
       if (col.filterable === false) return b2`<th></th>`;
       return b2`<th>
-                  <input type="text" placeholder="Filter..." .value=${this.columnFilters[key2] || ""}
+                  <input type="text" placeholder="Filter..." data-col-key=${key2} .value=${this.columnFilters[key2] || ""}
                     @input=${(e11) => this.setColumnFilter(key2, e11.target.value)} />
                 </th>`;
     })}
@@ -165422,6 +165581,79 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     const fh = this.__floatingHeaderEl;
     if (fh) fh.classList.remove("active");
   }
+  /**
+   * If a filter `<input>` inside the floating-header clone currently has
+   * focus, copy its value, caret, and selection range onto the matching
+   * input in the real header, then focus that real input. This lets the
+   * user keep typing uninterrupted when filter input causes the table to
+   * shrink below the viewport stick line and the floating header has to
+   * unmount.
+   *
+   * Safe to call at any time — it is a no-op unless an input inside the
+   * floating header is focused and has a `data-col-key` attribute that
+   * matches a real-header input.
+   */
+  __transferFocusToRealHeader() {
+    const fh = this.__floatingHeaderEl;
+    if (!fh) return;
+    const active = this.shadowRoot?.activeElement;
+    if (!active || !fh.contains(active)) return;
+    const colKey = active.getAttribute("data-col-key");
+    if (!colKey) return;
+    const fromInput = active;
+    const real = this.shadowRoot?.querySelector(
+      `.tableScroll > table > thead input[data-col-key="${CSS.escape(colKey)}"]`
+    );
+    if (!real || real === fromInput) return;
+    const selStart = fromInput.selectionStart;
+    const selEnd = fromInput.selectionEnd;
+    const selDir = fromInput.selectionDirection;
+    real.focus({ preventScroll: true });
+    try {
+      if (selStart != null && selEnd != null) {
+        real.setSelectionRange(selStart, selEnd, selDir || void 0);
+      }
+    } catch {
+    }
+  }
+  /**
+   * Symmetric counterpart to `__transferFocusToRealHeader`. When the
+   * floating header has just activated and a real-header filter input
+   * was focused (and is now scrolled off-screen behind the floating
+   * clone), move focus to the clone's matching input so the user keeps
+   * typing in the visible one.
+   *
+   * Called from `__syncFloatingHeader` inside the post-activation
+   * `updateComplete` callback — by then the clone subtree exists in the
+   * DOM and can receive focus.
+   */
+  __transferFocusToFloatingHeader() {
+    const fh = this.__floatingHeaderEl;
+    if (!fh || !this.__floatingActive) return;
+    const active = this.shadowRoot?.activeElement;
+    if (!active) return;
+    const realThead = this.shadowRoot?.querySelector(
+      ".tableScroll > table > thead"
+    );
+    if (!realThead || !realThead.contains(active)) return;
+    const colKey = active.getAttribute("data-col-key");
+    if (!colKey) return;
+    const fromInput = active;
+    const clone = fh.querySelector(
+      `input[data-col-key="${CSS.escape(colKey)}"]`
+    );
+    if (!clone || clone === fromInput) return;
+    const selStart = fromInput.selectionStart;
+    const selEnd = fromInput.selectionEnd;
+    const selDir = fromInput.selectionDirection;
+    clone.focus({ preventScroll: true });
+    try {
+      if (selStart != null && selEnd != null) {
+        clone.setSelectionRange(selStart, selEnd, selDir || void 0);
+      }
+    } catch {
+    }
+  }
   // ─── Virtualization ─────────────────────────────────────────────────
   /**
    * Computes the visible row range based on the table's position in its
@@ -165509,6 +165741,9 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     const distance = tableRect.bottom - stick.top;
     const shouldBeActive = tableRect.top < stick.top && distance > 0;
     if (shouldBeActive !== this.__floatingActive) {
+      if (!shouldBeActive) {
+        this.__transferFocusToRealHeader();
+      }
       this.__floatingActive = shouldBeActive;
       fh.classList.toggle("active", shouldBeActive);
       if (!shouldBeActive) {
@@ -165517,7 +165752,10 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
         if (ft) ft.style.transform = "";
       }
       if (shouldBeActive) {
-        this.updateComplete.then(() => this.__syncFloatingHeader());
+        this.updateComplete.then(() => {
+          this.__syncFloatingHeader();
+          this.__transferFocusToFloatingHeader();
+        });
         return;
       }
     }
@@ -165554,11 +165792,121 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   async disconnectedCallback() {
     super.disconnectedCallback();
     this.teardownFloatingHeader();
+    if (this.__flashClearTimer) {
+      clearTimeout(this.__flashClearTimer);
+      this.__flashClearTimer = void 0;
+    }
   }
   async firstUpdated() {
   }
+  /**
+   * Runs before each render. Drives two independent concerns:
+   *
+   * 1. **Selection rebind** — when `data` is reassigned to a fresh array
+   *    (typical live-data pattern), `selectedDataRow` still points at the
+   *    stale row object from the old array. We re-resolve it by rowKey so
+   *    consumers of `selectedDataRow` (footer indicator, header/footer
+   *    actions, copy fallback) see the live reference. `selectedIds`,
+   *    `__focusedCell`, `__editingCell`, `__selectionAnchorId` are all
+   *    keyed by string rowId and persist automatically — no change needed.
+   *    This runs regardless of `highlightUpdates` — it is a baseline
+   *    correctness fix for live data.
+   *
+   * 2. **Flash diff** — when `highlightUpdates === 'flash'`, diff the new
+   *    data against `__prevSnapshot` and populate `__flashingCells` with
+   *    the (rowId, colKey) pairs whose resolved cell value changed. A
+   *    single shared timer clears `__flashingCells` after
+   *    `highlightDuration` ms. Skipped if `rowKey` is missing (with a
+   *    one-shot console.warn; the render surface also shows a warning
+   *    banner).
+   */
+  willUpdate(changedProperties) {
+    if (changedProperties.has("data") && this.selectedDataRow && this.rowKey) {
+      const prevId = this.getRowId(this.selectedDataRow);
+      let found2;
+      for (const row of this.data) {
+        if (this.getRowId(row) === prevId) {
+          found2 = row;
+          break;
+        }
+      }
+      if (found2) {
+        if (found2 !== this.selectedDataRow) this.selectedDataRow = found2;
+      } else {
+        this.selectedDataRow = void 0;
+      }
+    }
+    if (this.highlightUpdates !== "flash") {
+      if (this.__prevSnapshot || this.__flashingCells.size > 0) {
+        this.__prevSnapshot = void 0;
+        if (this.__flashingCells.size > 0) this.__flashingCells = /* @__PURE__ */ new Map();
+        if (this.__flashClearTimer) {
+          clearTimeout(this.__flashClearTimer);
+          this.__flashClearTimer = void 0;
+        }
+      }
+      return;
+    }
+    if (!this.rowKey) {
+      if (!this.__flashWarnedNoRowKey) {
+        this.__flashWarnedNoRowKey = true;
+        console.warn(
+          '[dees-table] highlightUpdates="flash" requires `rowKey` to be set. Flash is disabled. Set the rowKey property/attribute to a stable identifier on your row data (e.g. `rowKey="id"`).'
+        );
+      }
+      return;
+    }
+    if (!changedProperties.has("data")) return;
+    const effectiveColumns = this.__getEffectiveColumns();
+    const visibleCols = effectiveColumns.filter((c11) => !c11.hidden);
+    const nextSnapshot = /* @__PURE__ */ new Map();
+    const newlyFlashing = /* @__PURE__ */ new Map();
+    for (const row of this.data) {
+      const rowId = this.getRowId(row);
+      const cellMap = /* @__PURE__ */ new Map();
+      for (const col of visibleCols) {
+        cellMap.set(String(col.key), getCellValue(row, col, this.displayFunction));
+      }
+      nextSnapshot.set(rowId, cellMap);
+      const prevCells = this.__prevSnapshot?.get(rowId);
+      if (!prevCells) continue;
+      for (const [colKey, nextVal] of cellMap) {
+        if (prevCells.get(colKey) !== nextVal) {
+          if (this.__editingCell && this.__editingCell.rowId === rowId && this.__editingCell.colKey === colKey) continue;
+          let set3 = newlyFlashing.get(rowId);
+          if (!set3) {
+            set3 = /* @__PURE__ */ new Set();
+            newlyFlashing.set(rowId, set3);
+          }
+          set3.add(colKey);
+        }
+      }
+    }
+    const hadPrev = !!this.__prevSnapshot;
+    this.__prevSnapshot = nextSnapshot;
+    if (!hadPrev) return;
+    if (newlyFlashing.size === 0) return;
+    for (const [rowId, cols] of newlyFlashing) {
+      const existing = this.__flashingCells.get(rowId);
+      if (existing) {
+        for (const c11 of cols) existing.add(c11);
+      } else {
+        this.__flashingCells.set(rowId, cols);
+      }
+    }
+    this.__flashTick++;
+    this.__flashingCells = new Map(this.__flashingCells);
+    if (this.__flashClearTimer) clearTimeout(this.__flashClearTimer);
+    this.__flashClearTimer = setTimeout(() => {
+      this.__flashingCells = /* @__PURE__ */ new Map();
+      this.__flashClearTimer = void 0;
+    }, Math.max(0, this.highlightDuration));
+  }
   async updated(changedProperties) {
     super.updated(changedProperties);
+    if (changedProperties.has("highlightDuration")) {
+      this.style.setProperty("--dees-table-flash-duration", `${this.highlightDuration}ms`);
+    }
     const dataOrColsChanged = !this.__columnsSizedFor || this.__columnsSizedFor.data !== this.data || this.__columnsSizedFor.columns !== this.columns;
     if (dataOrColsChanged) {
       this.__columnsSizedFor = { data: this.data, columns: this.columns };
@@ -166268,6 +166616,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     }
     if (parsed !== oldValue) {
       item[col.key] = parsed;
+      this.__recordCellInSnapshot(item, col);
       this.dispatchEvent(
         new CustomEvent("cellEdit", {
           detail: { row: item, key: key2, oldValue, newValue: parsed },
@@ -166280,6 +166629,23 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     this.__editingCell = void 0;
     this.requestUpdate();
   }
+  /**
+   * Updates the flash diff snapshot for a single cell to match its current
+   * resolved value. Called from `commitCellEdit` so a user-initiated edit
+   * does not register as an external change on the next diff pass.
+   * No-op when flash mode is off or no snapshot exists yet.
+   */
+  __recordCellInSnapshot(item, col) {
+    if (this.highlightUpdates !== "flash" || !this.__prevSnapshot) return;
+    if (!this.rowKey) return;
+    const rowId = this.getRowId(item);
+    let cellMap = this.__prevSnapshot.get(rowId);
+    if (!cellMap) {
+      cellMap = /* @__PURE__ */ new Map();
+      this.__prevSnapshot.set(rowId, cellMap);
+    }
+    cellMap.set(String(col.key), getCellValue(item, col, this.displayFunction));
+  }
   /** Renders the appropriate dees-input-* component for this column. */
   renderCellEditor(item, col) {
     const raw2 = item[col.key];
@@ -166433,6 +166799,8 @@ _showColumnFilters = new WeakMap();
 _showSelectionCheckbox = new WeakMap();
 _virtualized = new WeakMap();
 _virtualOverscan = new WeakMap();
+_highlightUpdates = new WeakMap();
+_highlightDuration = new WeakMap();
 _fixedHeight = new WeakMap();
 _searchMode = new WeakMap();
 _selectionMode = new WeakMap();
@@ -166440,6 +166808,7 @@ _selectedIds = new WeakMap();
 ___focusedCell = new WeakMap();
 ___editingCell = new WeakMap();
 ___floatingActive = new WeakMap();
+___flashingCells = new WeakMap();
 ___virtualRange = new WeakMap();
 __decorateElement(_init39, 4, "heading1", _heading1_dec, _DeesTable, _heading1);
 __decorateElement(_init39, 4, "heading2", _heading2_dec, _DeesTable, _heading22);
@@ -166467,6 +166836,8 @@ __decorateElement(_init39, 4, "showColumnFilters", _showColumnFilters_dec, _Dees
 __decorateElement(_init39, 4, "showSelectionCheckbox", _showSelectionCheckbox_dec, _DeesTable, _showSelectionCheckbox);
 __decorateElement(_init39, 4, "virtualized", _virtualized_dec, _DeesTable, _virtualized);
 __decorateElement(_init39, 4, "virtualOverscan", _virtualOverscan_dec, _DeesTable, _virtualOverscan);
+__decorateElement(_init39, 4, "highlightUpdates", _highlightUpdates_dec, _DeesTable, _highlightUpdates);
+__decorateElement(_init39, 4, "highlightDuration", _highlightDuration_dec, _DeesTable, _highlightDuration);
 __decorateElement(_init39, 4, "fixedHeight", _fixedHeight_dec, _DeesTable, _fixedHeight);
 __decorateElement(_init39, 4, "searchMode", _searchMode_dec, _DeesTable, _searchMode);
 __decorateElement(_init39, 4, "selectionMode", _selectionMode_dec, _DeesTable, _selectionMode);
@@ -166474,6 +166845,7 @@ __decorateElement(_init39, 4, "selectedIds", _selectedIds_dec, _DeesTable, _sele
 __decorateElement(_init39, 4, "__focusedCell", ___focusedCell_dec, _DeesTable, ___focusedCell);
 __decorateElement(_init39, 4, "__editingCell", ___editingCell_dec, _DeesTable, ___editingCell);
 __decorateElement(_init39, 4, "__floatingActive", ___floatingActive_dec, _DeesTable, ___floatingActive);
+__decorateElement(_init39, 4, "__flashingCells", ___flashingCells_dec, _DeesTable, ___flashingCells);
 __decorateElement(_init39, 4, "__virtualRange", ___virtualRange_dec, _DeesTable, ___virtualRange);
 _DeesTable = __decorateElement(_init39, 0, "DeesTable", _DeesTable_decorators, _DeesTable);
 __name(_DeesTable, "DeesTable");
@@ -186398,17 +186770,30 @@ __publicField(_DeesHeading, "styles", [
         display: block;
       }
 
-      /* Heading styles */
+      /* Heading styles.
+       * Color hierarchy: h1-h2 stay prominent with text-primary; h3-h6 step
+       * down to text-secondary so they read as subheadings instead of
+       * mini-h1s. Keeps the visual loudness out of smaller headings. */
       h1, h2, h3, h4, h5, h6 {
         font-weight: 600;
+      }
+      h1, h2 {
         color: var(--dees-color-text-primary);
       }
+      h3, h4, h5, h6 {
+        color: var(--dees-color-text-secondary);
+      }
 
       /* Per-level typography + spacing.
        * Margin scales with importance: h1 gets the most breathing room,
        * h6 the least. Top margin > bottom margin so headings group with
        * the content that follows them. */
       h1 {
+        /* h1 uses weight 500, not 600: the Cal Sans display font is
+         * already stylized enough that bold + max contrast + 32px stacks
+         * too much emphasis. 500 keeps the typographic impact without
+         * shouting. */
+        font-weight: 500;
         font-size: 32px;
         font-family: ${cssCalSansFontFamily};
         letter-spacing: 0.025em;
@@ -194069,26 +194454,31 @@ var _DeesSimpleAppDash = class _DeesSimpleAppDash extends (_a97 = DeesElement, _
                       <dees-icon class="chevron" .icon="${"lucide:chevronDown"}"></dees-icon>
                     ` : ""}
                   </div>
-                  ${hasSubs && groupActive ? b2`
-                    <div class="subViews">
-                      ${view.subViews.map(
+                  ${hasSubs ? b2`
+                    <div
+                      class="subViews ${groupActive ? "expanded" : ""}"
+                      ?inert=${!groupActive}
+                    >
+                      <div class="subViews-inner">
+                        ${view.subViews.map(
         (sub2) => b2`
-                          <div
-                            class="viewTab sub ${this.selectedView === sub2 ? "selected" : ""}"
-                            @click=${(e11) => {
+                            <div
+                              class="viewTab sub ${this.selectedView === sub2 ? "selected" : ""}"
+                              @click=${(e11) => {
           e11.stopPropagation();
           this.loadView(sub2);
         }}
-                          >
-                            ${sub2.iconName ? b2`
-                              <dees-icon .icon="${sub2.iconName.includes(":") ? sub2.iconName : `lucide:${sub2.iconName}`}"></dees-icon>
-                            ` : b2`
-                              <dees-icon .icon="${"lucide:dot"}"></dees-icon>
-                            `}
-                            <span>${sub2.name}</span>
-                          </div>
-                        `
+                            >
+                              ${sub2.iconName ? b2`
+                                <dees-icon .icon="${sub2.iconName.includes(":") ? sub2.iconName : `lucide:${sub2.iconName}`}"></dees-icon>
+                              ` : b2`
+                                <dees-icon .icon="${"lucide:dot"}"></dees-icon>
+                              `}
+                              <span>${sub2.name}</span>
+                            </div>
+                          `
       )}
+                      </div>
                     </div>
                   ` : ""}
                 `;
@@ -194502,12 +194892,20 @@ __publicField(_DeesSimpleAppDash, "styles", [
       }
 
       .subViews {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        margin: 2px 0 4px 12px;
-        padding-left: 12px;
+        display: grid;
+        grid-template-rows: 0fr;
+        margin-left: 12px;
         position: relative;
+        transition:
+          grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+          margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+          margin-bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .subViews.expanded {
+        grid-template-rows: 1fr;
+        margin-top: 2px;
+        margin-bottom: 4px;
       }
 
       .subViews::before {
@@ -194518,6 +194916,21 @@ __publicField(_DeesSimpleAppDash, "styles", [
         bottom: 4px;
         width: 1px;
         background: var(--dees-color-border-default);
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      .subViews.expanded::before {
+        opacity: 1;
+      }
+
+      .subViews-inner {
+        min-height: 0;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding-left: 12px;
       }
 
       .viewTab.sub {
@@ -200456,7 +200869,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.69.0",
+  version: "3.70.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -202429,4 +202842,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775638700514.js.map
+//# sourceMappingURL=bundle-1775659924128.js.map