@design.estate/dees-catalog 3.61.2 → 3.62.0

package/dist_bundle/bundle.js

@@ -163645,6 +163645,44 @@ var demoFunc29 = /* @__PURE__ */ __name(() => b2`
         ></dees-table>
       </div>
 
+      <div class="demo-section">
+        <h2 class="demo-title">Multi-Column Sort</h2>
+        <p class="demo-description">
+          Click any column header for a single-column sort. Hold Shift while clicking to add the
+          column to a multi-sort cascade (or cycle its direction). Right-click any sortable header
+          to open a menu where you can pin a column to a specific priority slot, remove it, or
+          clear the cascade.
+        </p>
+        <dees-table
+          heading1="People Directory"
+          heading2="Pre-seeded with department ▲ 1, name ▲ 2"
+          .sortBy=${[
+  { key: "department", dir: "asc" },
+  { key: "name", dir: "asc" }
+]}
+          .columns=${[
+  { key: "department", header: "Department", sortable: true },
+  { key: "name", header: "Name", sortable: true },
+  { key: "role", header: "Role", sortable: true },
+  { key: "createdAt", header: "Created", sortable: true },
+  { key: "location", header: "Location", sortable: true },
+  { key: "status", header: "Status", sortable: true }
+]}
+          .data=${[
+  { department: "R&D", name: "Alice Johnson", role: "Engineer", createdAt: "2023-01-12", location: "Berlin", status: "Active" },
+  { department: "R&D", name: "Diana Martinez", role: "Engineer", createdAt: "2020-06-30", location: "Madrid", status: "Active" },
+  { department: "R&D", name: "Mark Lee", role: "Engineer", createdAt: "2024-03-04", location: "Berlin", status: "Active" },
+  { department: "Design", name: "Bob Smith", role: "Designer", createdAt: "2022-11-05", location: "Paris", status: "Active" },
+  { department: "Design", name: "Sara Kim", role: "Designer", createdAt: "2021-08-19", location: "Paris", status: "On Leave" },
+  { department: "Ops", name: "Charlie Davis", role: "Manager", createdAt: "2021-04-21", location: "London", status: "On Leave" },
+  { department: "Ops", name: "Helena Voss", role: "SRE", createdAt: "2023-07-22", location: "London", status: "Active" },
+  { department: "QA", name: "Fiona Clark", role: "QA", createdAt: "2022-03-14", location: "Vienna", status: "Active" },
+  { department: "QA", name: "Tom\xE1s Rivera", role: "QA", createdAt: "2024-01-09", location: "Madrid", status: "Active" },
+  { department: "CS", name: "Ethan Brown", role: "Support", createdAt: "2019-09-18", location: "Rome", status: "Inactive" }
+]}
+        ></dees-table>
+      </div>
+
       <div class="demo-section">
         <h2 class="demo-title">Wide Properties + Many Actions</h2>
         <p class="demo-description">A table with many columns and rich actions to stress test layout and sticky Actions.</p>
@@ -164038,6 +164076,32 @@ var tableStyles = [
         color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
         letter-spacing: -0.01em;
       }
+
+      th[role='columnheader']:hover {
+        color: var(--dees-color-text-primary);
+      }
+
+      th .sortArrow {
+        display: inline-block;
+        margin-left: 6px;
+        font-size: 10px;
+        line-height: 1;
+        opacity: 0.7;
+        vertical-align: middle;
+      }
+
+      th .sortBadge {
+        display: inline-block;
+        margin-left: 3px;
+        padding: 1px 5px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 1;
+        color: ${cssManager.bdTheme("hsl(222.2 47.4% 30%)", "hsl(217.2 91.2% 75%)")};
+        background: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.12)", "hsl(217.2 91.2% 59.8% / 0.18)")};
+        border-radius: 999px;
+        vertical-align: middle;
+      }
       
       :host([show-vertical-lines]) th {
         border-right: 1px solid var(--dees-color-border-default);
@@ -164229,7 +164293,23 @@ function getCellValue(row, col, displayFunction) {
   return col.value ? col.value(row) : row[col.key];
 }
 __name(getCellValue, "getCellValue");
-function getViewData(data, effectiveColumns, sortKey, sortDir, filterText, columnFilters, filterMode = "table", lucenePredicate) {
+function compareCellValues(va, vb) {
+  if (va == null && vb == null) return 0;
+  if (va == null) return -1;
+  if (vb == null) return 1;
+  if (typeof va === "number" && typeof vb === "number") {
+    if (va < vb) return -1;
+    if (va > vb) return 1;
+    return 0;
+  }
+  const sa = String(va).toLowerCase();
+  const sb = String(vb).toLowerCase();
+  if (sa < sb) return -1;
+  if (sa > sb) return 1;
+  return 0;
+}
+__name(compareCellValues, "compareCellValues");
+function getViewData(data, effectiveColumns, sortBy, filterText, columnFilters, filterMode = "table", lucenePredicate) {
   let arr = data.slice();
   const ft = (filterText || "").trim().toLowerCase();
   const cf = columnFilters || {};
@@ -164243,9 +164323,9 @@ function getViewData(data, effectiveColumns, sortKey, sortDir, filterText, colum
           const needle = String(cf[k4]).toLowerCase();
           if (!s10.includes(needle)) return false;
         } else {
-          const col2 = effectiveColumns.find((c11) => String(c11.key) === k4);
-          if (!col2 || col2.hidden || col2.filterable === false) continue;
-          const val = getCellValue(row, col2);
+          const col = effectiveColumns.find((c11) => String(c11.key) === k4);
+          if (!col || col.hidden || col.filterable === false) continue;
+          const val = getCellValue(row, col);
           const s10 = String(val ?? "").toLowerCase();
           const needle = String(cf[k4]).toLowerCase();
           if (!s10.includes(needle)) return false;
@@ -164266,9 +164346,9 @@ function getViewData(data, effectiveColumns, sortKey, sortDir, filterText, colum
             }
           }
         } else {
-          for (const col2 of effectiveColumns) {
-            if (col2.hidden) continue;
-            const val = getCellValue(row, col2);
+          for (const col of effectiveColumns) {
+            if (col.hidden) continue;
+            const val = getCellValue(row, col);
             const s10 = String(val ?? "").toLowerCase();
             if (s10.includes(ft)) {
               any = true;
@@ -164281,21 +164361,14 @@ function getViewData(data, effectiveColumns, sortKey, sortDir, filterText, colum
       return true;
     });
   }
-  if (!sortKey || !sortDir) return arr;
-  const col = effectiveColumns.find((c11) => String(c11.key) === sortKey);
-  if (!col) return arr;
-  const dir = sortDir === "asc" ? 1 : -1;
+  if (!sortBy || sortBy.length === 0) return arr;
+  const resolved2 = sortBy.map((desc) => ({ desc, col: effectiveColumns.find((c11) => String(c11.key) === desc.key) })).filter((entry) => !!entry.col);
+  if (resolved2.length === 0) return arr;
   arr.sort((a5, b5) => {
-    const va = getCellValue(a5, col);
-    const vb = getCellValue(b5, col);
-    if (va == null && vb == null) return 0;
-    if (va == null) return -1 * dir;
-    if (vb == null) return 1 * dir;
-    if (typeof va === "number" && typeof vb === "number") return (va - vb) * dir;
-    const sa = String(va).toLowerCase();
-    const sb = String(vb).toLowerCase();
-    if (sa < sb) return -1 * dir;
-    if (sa > sb) return 1 * dir;
+    for (const { desc, col } of resolved2) {
+      const cmp2 = compareCellValues(getCellValue(a5, col), getCellValue(b5, col));
+      if (cmp2 !== 0) return desc.dir === "asc" ? cmp2 : -cmp2;
+    }
     return 0;
   });
   return arr;
@@ -164448,7 +164521,13 @@ __name(compileLucenePredicate, "compileLucenePredicate");
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _stickyHeader_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortDir_dec, _sortKey_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _editableFields_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, _editableFields, _showVerticalLines, _showHorizontalLines, _showGrid, _sortKey, _sortDir, _filterText, _columnFilters, _showColumnFilters, _stickyHeader, _searchMode, _selectionMode, _selectedIds;
+var _selectedIds_dec, _selectionMode_dec, _searchMode_dec, _stickyHeader_dec, _showColumnFilters_dec, _columnFilters_dec, _filterText_dec, _sortBy_dec, _showGrid_dec, _showHorizontalLines_dec, _showVerticalLines_dec, _editableFields_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, _editableFields, _showVerticalLines, _showHorizontalLines, _showGrid, _sortBy, _filterText, _columnFilters, _showColumnFilters, _stickyHeader, _searchMode, _selectionMode, _selectedIds;
+function ordinalLabel(n12) {
+  const s10 = ["th", "st", "nd", "rd"];
+  const v5 = n12 % 100;
+  return n12 + (s10[(v5 - 20) % 10] || s10[v5] || s10[0]);
+}
+__name(ordinalLabel, "ordinalLabel");
 _DeesTable_decorators = [customElement("dees-table")];
 var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [n5({
   type: String
@@ -164491,7 +164570,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
   type: Boolean,
   reflect: true,
   attribute: "show-grid"
-})], _sortKey_dec = [n5({ attribute: false })], _sortDir_dec = [n5({ attribute: false })], _filterText_dec = [n5({ type: String })], _columnFilters_dec = [n5({ attribute: false })], _showColumnFilters_dec = [n5({ type: Boolean, attribute: "show-column-filters" })], _stickyHeader_dec = [n5({ type: Boolean, reflect: true, attribute: "sticky-header" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], _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" })], _stickyHeader_dec = [n5({ type: Boolean, reflect: true, attribute: "sticky-header" })], _searchMode_dec = [n5({ type: String })], _selectionMode_dec = [n5({ type: String })], _selectedIds_dec = [n5({ attribute: false })], _a42) {
   constructor() {
     super();
     __privateAdd(this, _heading1, __runInitializers(_init39, 8, this, "heading 1")), __runInitializers(_init39, 11, this);
@@ -164518,17 +164597,16 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     __publicField(this, "files", []);
     __publicField(this, "fileWeakMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "dataChangeSubject", new domtools_pluginexports_exports.smartrx.rxjs.Subject());
-    __privateAdd(this, _sortKey, __runInitializers(_init39, 88, this)), __runInitializers(_init39, 91, this);
-    __privateAdd(this, _sortDir, __runInitializers(_init39, 92, this, null)), __runInitializers(_init39, 95, this);
-    __privateAdd(this, _filterText, __runInitializers(_init39, 96, this, "")), __runInitializers(_init39, 99, this);
-    __privateAdd(this, _columnFilters, __runInitializers(_init39, 100, this, {})), __runInitializers(_init39, 103, this);
-    __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
-    __privateAdd(this, _stickyHeader, __runInitializers(_init39, 108, this, false)), __runInitializers(_init39, 111, this);
-    __privateAdd(this, _searchMode, __runInitializers(_init39, 112, this, "table")), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _sortBy, __runInitializers(_init39, 88, this, [])), __runInitializers(_init39, 91, this);
+    __privateAdd(this, _filterText, __runInitializers(_init39, 92, this, "")), __runInitializers(_init39, 95, this);
+    __privateAdd(this, _columnFilters, __runInitializers(_init39, 96, this, {})), __runInitializers(_init39, 99, this);
+    __privateAdd(this, _showColumnFilters, __runInitializers(_init39, 100, this, false)), __runInitializers(_init39, 103, this);
+    __privateAdd(this, _stickyHeader, __runInitializers(_init39, 104, this, false)), __runInitializers(_init39, 107, this);
+    __privateAdd(this, _searchMode, __runInitializers(_init39, 108, this, "table")), __runInitializers(_init39, 111, this);
     __publicField(this, "__searchTextSub");
     __publicField(this, "__searchModeSub");
-    __privateAdd(this, _selectionMode, __runInitializers(_init39, 116, this, "none")), __runInitializers(_init39, 119, this);
-    __privateAdd(this, _selectedIds, __runInitializers(_init39, 120, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 123, this);
+    __privateAdd(this, _selectionMode, __runInitializers(_init39, 112, this, "none")), __runInitializers(_init39, 115, this);
+    __privateAdd(this, _selectedIds, __runInitializers(_init39, 116, this, /* @__PURE__ */ new Set())), __runInitializers(_init39, 119, this);
     __publicField(this, "_rowIdMap", /* @__PURE__ */ new WeakMap());
     __publicField(this, "_rowIdCounter", 0);
     __publicField(this, "__debounceTimer");
@@ -164549,8 +164627,7 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     const viewData = getViewData(
       this.data,
       effectiveColumns,
-      this.sortKey,
-      this.sortDir,
+      this.sortBy,
       this.filterText,
       this.columnFilters,
       this.searchMode === "data" ? "data" : "table",
@@ -164645,7 +164722,8 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
                             role="columnheader"
                             aria-sort=${ariaSort}
                             style="${isSortable ? "cursor: pointer;" : ""}"
-                            @click=${() => isSortable ? this.toggleSort(col) : null}
+                            @click=${(eventArg) => isSortable ? this.handleHeaderClick(eventArg, col, effectiveColumns) : null}
+                            @contextmenu=${(eventArg) => isSortable ? this.openHeaderContextMenu(eventArg, col, effectiveColumns) : null}
                           >
                             ${col.header ?? col.key}
                             ${this.renderSortIndicator(col)}
@@ -164941,33 +165019,302 @@ var _DeesTable = class _DeesTable extends (_a42 = DeesElement, _heading1_dec = [
     table2.style.tableLayout = "fixed";
   }
   // compute helpers moved to ./data.ts
-  toggleSort(col) {
-    const key2 = String(col.key);
-    if (this.sortKey !== key2) {
-      this.sortKey = key2;
-      this.sortDir = "asc";
-    } else {
-      if (this.sortDir === "asc") this.sortDir = "desc";
-      else if (this.sortDir === "desc") {
-        this.sortDir = null;
-        this.sortKey = void 0;
-      } else this.sortDir = "asc";
-    }
+  // ─── sort: public API ────────────────────────────────────────────────
+  /** Returns the descriptor for `key` if the column is currently in the cascade. */
+  getSortDescriptor(key2) {
+    return this.sortBy.find((d6) => d6.key === key2);
+  }
+  /** Returns the 0-based priority of `key` in the cascade, or -1 if not present. */
+  getSortPriority(key2) {
+    return this.sortBy.findIndex((d6) => d6.key === key2);
+  }
+  /** Replaces the cascade with a single sort entry. */
+  setSort(key2, dir) {
+    this.sortBy = [{ key: key2, dir }];
+    this.emitSortChange();
+    this.requestUpdate();
+  }
+  /**
+   * Inserts (or moves) `key` to a 0-based position in the cascade. If the key is
+   * already present elsewhere, its previous entry is removed before insertion so
+   * a column appears at most once.
+   */
+  addSortAt(key2, position3, dir) {
+    const next2 = this.sortBy.filter((d6) => d6.key !== key2);
+    const clamped = Math.max(0, Math.min(position3, next2.length));
+    next2.splice(clamped, 0, { key: key2, dir });
+    this.sortBy = next2;
+    this.emitSortChange();
+    this.requestUpdate();
+  }
+  /** Appends `key` to the end of the cascade (or moves it there if already present). */
+  appendSort(key2, dir) {
+    const next2 = this.sortBy.filter((d6) => d6.key !== key2);
+    next2.push({ key: key2, dir });
+    this.sortBy = next2;
+    this.emitSortChange();
+    this.requestUpdate();
+  }
+  /** Removes `key` from the cascade. No-op if not present. */
+  removeSort(key2) {
+    if (!this.sortBy.some((d6) => d6.key === key2)) return;
+    this.sortBy = this.sortBy.filter((d6) => d6.key !== key2);
+    this.emitSortChange();
+    this.requestUpdate();
+  }
+  /** Empties the cascade. */
+  clearSorts() {
+    if (this.sortBy.length === 0) return;
+    this.sortBy = [];
+    this.emitSortChange();
+    this.requestUpdate();
+  }
+  emitSortChange() {
     this.dispatchEvent(
       new CustomEvent("sortChange", {
-        detail: { key: this.sortKey, dir: this.sortDir },
+        detail: { sortBy: this.sortBy.map((d6) => ({ ...d6 })) },
         bubbles: true
       })
     );
-    this.requestUpdate();
   }
+  // ─── sort: header interaction handlers ───────────────────────────────
+  /**
+   * Plain left-click on a sortable header. Cycles `none → asc → desc → none`
+   * collapsing the cascade to a single column. If a multi-column cascade is
+   * active, asks the user to confirm the destructive replacement first. A
+   * Shift+click bypasses the modal and routes through the multi-sort cycle.
+   */
+  async handleHeaderClick(eventArg, col, _effectiveColumns) {
+    if (eventArg.shiftKey) {
+      this.handleHeaderShiftClick(col);
+      return;
+    }
+    const proceed = await this.confirmReplaceCascade(col);
+    if (!proceed) return;
+    this.cycleSingleSort(col);
+  }
+  /**
+   * Cycles a single column through `none → asc → desc → none`, collapsing the
+   * cascade. Used by both plain click and the menu's "Sort Ascending/Descending"
+   * shortcuts (after confirmation).
+   */
+  cycleSingleSort(col) {
+    const key2 = String(col.key);
+    const current = this.sortBy.length === 1 && this.sortBy[0].key === key2 ? this.sortBy[0].dir : null;
+    if (current === "asc") this.setSort(key2, "desc");
+    else if (current === "desc") this.clearSorts();
+    else this.setSort(key2, "asc");
+  }
+  /**
+   * Shift+click cycle on a sortable header. Edits the cascade in place without
+   * destroying other sort keys: append → flip dir → remove.
+   */
+  handleHeaderShiftClick(col) {
+    const key2 = String(col.key);
+    const existing = this.getSortDescriptor(key2);
+    if (!existing) {
+      this.appendSort(key2, "asc");
+    } else if (existing.dir === "asc") {
+      this.sortBy = this.sortBy.map((d6) => d6.key === key2 ? { key: key2, dir: "desc" } : d6);
+      this.emitSortChange();
+      this.requestUpdate();
+    } else {
+      this.removeSort(key2);
+    }
+  }
+  /**
+   * Opens a confirmation modal when the cascade has more than one entry and the
+   * user attempts a destructive single-sort replacement. Resolves to `true` if
+   * the user accepts, `false` if they cancel. If the cascade has 0 or 1 entries
+   * the modal is skipped and we resolve to `true` immediately.
+   */
+  confirmReplaceCascade(targetCol) {
+    if (this.sortBy.length <= 1) return Promise.resolve(true);
+    return new Promise((resolve2) => {
+      let settled = false;
+      const settle = /* @__PURE__ */ __name((result) => {
+        if (settled) return;
+        settled = true;
+        resolve2(result);
+      }, "settle");
+      const summary = this.sortBy.map((d6, i11) => {
+        const c11 = this._lookupColumnByKey?.(d6.key);
+        const label = c11?.header ?? d6.key;
+        return b2`<li>${i11 + 1}. ${label} ${d6.dir === "asc" ? "\u25B2" : "\u25BC"}</li>`;
+      });
+      DeesModal.createAndShow({
+        heading: "Replace multi-column sort?",
+        width: "small",
+        showCloseButton: true,
+        content: b2`
+          <div style="font-size:13px; line-height:1.55;">
+            <p style="margin:0 0 8px;">
+              You currently have a ${this.sortBy.length}-column sort active:
+            </p>
+            <ul style="margin:0 0 12px; padding-left:18px;">${summary}</ul>
+            <p style="margin:0;">
+              Continuing will discard the cascade and replace it with a single sort on
+              <strong>${targetCol.header ?? String(targetCol.key)}</strong>.
+            </p>
+          </div>
+        `,
+        menuOptions: [
+          {
+            name: "Cancel",
+            iconName: "lucide:x",
+            action: /* @__PURE__ */ __name(async (modal) => {
+              settle(false);
+              await modal.destroy();
+              return null;
+            }, "action")
+          },
+          {
+            name: "Replace",
+            iconName: "lucide:check",
+            action: /* @__PURE__ */ __name(async (modal) => {
+              settle(true);
+              await modal.destroy();
+              return null;
+            }, "action")
+          }
+        ]
+      });
+    });
+  }
+  /**
+   * Looks up a column by its string key in the currently effective column set.
+   * Used by the modal helper to render human-friendly labels.
+   */
+  _lookupColumnByKey(key2) {
+    const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
+    const effective = usingColumns ? computeEffectiveColumns(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data) : computeColumnsFromDisplayFunction(this.displayFunction, this.data);
+    return effective.find((c11) => String(c11.key) === key2);
+  }
+  /**
+   * Opens the header context menu for explicit multi-sort priority control.
+   */
+  openHeaderContextMenu(eventArg, col, effectiveColumns) {
+    const items = this.buildHeaderMenuItems(col, effectiveColumns);
+    DeesContextmenu.openContextMenuWithOptions(eventArg, items);
+  }
+  /**
+   * Builds the dynamic context-menu structure for a single column header.
+   */
+  buildHeaderMenuItems(col, effectiveColumns) {
+    const key2 = String(col.key);
+    const existing = this.getSortDescriptor(key2);
+    const cascadeLen = this.sortBy.length;
+    const sortableColumnCount = effectiveColumns.filter((c11) => !!c11.sortable).length;
+    const maxSlot = Math.min(
+      Math.max(cascadeLen + (existing ? 0 : 1), 1),
+      Math.max(sortableColumnCount, 1)
+    );
+    const items = [];
+    items.push({
+      name: "Sort Ascending",
+      iconName: cascadeLen === 1 && existing?.dir === "asc" ? "lucide:check" : "lucide:arrowUp",
+      action: /* @__PURE__ */ __name(async () => {
+        if (await this.confirmReplaceCascade(col)) this.setSort(key2, "asc");
+        return null;
+      }, "action")
+    });
+    items.push({
+      name: "Sort Descending",
+      iconName: cascadeLen === 1 && existing?.dir === "desc" ? "lucide:check" : "lucide:arrowDown",
+      action: /* @__PURE__ */ __name(async () => {
+        if (await this.confirmReplaceCascade(col)) this.setSort(key2, "desc");
+        return null;
+      }, "action")
+    });
+    items.push({ divider: true });
+    for (let slot = 1; slot <= maxSlot; slot++) {
+      const ordinal = ordinalLabel(slot);
+      const isCurrentSlot = existing && this.getSortPriority(key2) === slot - 1;
+      items.push({
+        name: `Set as ${ordinal} sort`,
+        iconName: isCurrentSlot ? "lucide:check" : "lucide:listOrdered",
+        submenu: [
+          {
+            name: "Ascending",
+            iconName: "lucide:arrowUp",
+            action: /* @__PURE__ */ __name(async () => {
+              this.addSortAt(key2, slot - 1, "asc");
+              return null;
+            }, "action")
+          },
+          {
+            name: "Descending",
+            iconName: "lucide:arrowDown",
+            action: /* @__PURE__ */ __name(async () => {
+              this.addSortAt(key2, slot - 1, "desc");
+              return null;
+            }, "action")
+          }
+        ]
+      });
+    }
+    items.push({ divider: true });
+    items.push({
+      name: "Append to sort",
+      iconName: "lucide:plus",
+      submenu: [
+        {
+          name: "Ascending",
+          iconName: "lucide:arrowUp",
+          action: /* @__PURE__ */ __name(async () => {
+            this.appendSort(key2, "asc");
+            return null;
+          }, "action")
+        },
+        {
+          name: "Descending",
+          iconName: "lucide:arrowDown",
+          action: /* @__PURE__ */ __name(async () => {
+            this.appendSort(key2, "desc");
+            return null;
+          }, "action")
+        }
+      ]
+    });
+    if (existing) {
+      items.push({ divider: true });
+      items.push({
+        name: "Remove from sort",
+        iconName: "lucide:minus",
+        action: /* @__PURE__ */ __name(async () => {
+          this.removeSort(key2);
+          return null;
+        }, "action")
+      });
+    }
+    if (cascadeLen > 0) {
+      if (!existing) items.push({ divider: true });
+      items.push({
+        name: "Clear all sorts",
+        iconName: "lucide:trash",
+        action: /* @__PURE__ */ __name(async () => {
+          this.clearSorts();
+          return null;
+        }, "action")
+      });
+    }
+    return items;
+  }
+  // ─── sort: indicator + ARIA ──────────────────────────────────────────
   getAriaSort(col) {
-    if (String(col.key) !== this.sortKey || !this.sortDir) return "none";
-    return this.sortDir === "asc" ? "ascending" : "descending";
+    const primary = this.sortBy[0];
+    if (!primary || primary.key !== String(col.key)) return "none";
+    return primary.dir === "asc" ? "ascending" : "descending";
   }
   renderSortIndicator(col) {
-    if (String(col.key) !== this.sortKey || !this.sortDir) return b2``;
-    return b2`<span style="margin-left:6px; opacity:0.7;">${this.sortDir === "asc" ? "\u25B2" : "\u25BC"}</span>`;
+    const idx = this.getSortPriority(String(col.key));
+    if (idx < 0) return b2``;
+    const desc = this.sortBy[idx];
+    const arrow2 = desc.dir === "asc" ? "\u25B2" : "\u25BC";
+    if (this.sortBy.length === 1) {
+      return b2`<span class="sortArrow">${arrow2}</span>`;
+    }
+    return b2`<span class="sortArrow">${arrow2}</span><span class="sortBadge">${idx + 1}</span>`;
   }
   // filtering helpers
   setFilterText(value2) {
@@ -165132,8 +165479,7 @@ _editableFields = new WeakMap();
 _showVerticalLines = new WeakMap();
 _showHorizontalLines = new WeakMap();
 _showGrid = new WeakMap();
-_sortKey = new WeakMap();
-_sortDir = new WeakMap();
+_sortBy = new WeakMap();
 _filterText = new WeakMap();
 _columnFilters = new WeakMap();
 _showColumnFilters = new WeakMap();
@@ -165161,8 +165507,7 @@ __decorateElement(_init39, 4, "editableFields", _editableFields_dec, _DeesTable,
 __decorateElement(_init39, 4, "showVerticalLines", _showVerticalLines_dec, _DeesTable, _showVerticalLines);
 __decorateElement(_init39, 4, "showHorizontalLines", _showHorizontalLines_dec, _DeesTable, _showHorizontalLines);
 __decorateElement(_init39, 4, "showGrid", _showGrid_dec, _DeesTable, _showGrid);
-__decorateElement(_init39, 4, "sortKey", _sortKey_dec, _DeesTable, _sortKey);
-__decorateElement(_init39, 4, "sortDir", _sortDir_dec, _DeesTable, _sortDir);
+__decorateElement(_init39, 4, "sortBy", _sortBy_dec, _DeesTable, _sortBy);
 __decorateElement(_init39, 4, "filterText", _filterText_dec, _DeesTable, _filterText);
 __decorateElement(_init39, 4, "columnFilters", _columnFilters_dec, _DeesTable, _columnFilters);
 __decorateElement(_init39, 4, "showColumnFilters", _showColumnFilters_dec, _DeesTable, _showColumnFilters);
@@ -199016,7 +199361,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.61.2",
+  version: "3.62.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -200989,4 +201334,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775472094927.js.map
+//# sourceMappingURL=bundle-1775564414196.js.map

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.61.2',
+    version: '3.62.0',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-dataview/dees-table/data.d.ts

@@ -1,5 +1,11 @@
-import type { Column, TDisplayFunction } from './types.js';
+import type { Column, ISortDescriptor, TDisplayFunction } from './types.js';
 export declare function computeColumnsFromDisplayFunction<T>(displayFunction: TDisplayFunction<T>, data: T[]): Column<T>[];
 export declare function computeEffectiveColumns<T>(columns: Column<T>[] | undefined, augmentFromDisplayFunction: boolean, displayFunction: TDisplayFunction<T>, data: T[]): Column<T>[];
 export declare function getCellValue<T>(row: T, col: Column<T>, displayFunction?: TDisplayFunction<T>): any;
-export declare function getViewData<T>(data: T[], effectiveColumns: Column<T>[], sortKey?: string, sortDir?: 'asc' | 'desc' | null, filterText?: string, columnFilters?: Record<string, string>, filterMode?: 'table' | 'data', lucenePredicate?: (row: T) => boolean): T[];
+/**
+ * Compares two cell values in ascending order. Returns -1, 0, or 1.
+ * Null/undefined values sort before defined values. Numbers compare numerically;
+ * everything else compares as case-insensitive strings.
+ */
+export declare function compareCellValues(va: any, vb: any): number;
+export declare function getViewData<T>(data: T[], effectiveColumns: Column<T>[], sortBy: ISortDescriptor[], filterText?: string, columnFilters?: Record<string, string>, filterMode?: 'table' | 'data', lucenePredicate?: (row: T) => boolean): T[];