@toolbox-web/grid 1.6.0 → 1.6.2

package/lib/plugins/selection/index.js

@@ -381,7 +381,7 @@ function w(r, e) {
   const t = u(r), s = u(e);
   return t.startRow === s.startRow && t.startCol === s.startCol && t.endRow === s.endRow && t.endCol === s.endCol;
 }
-const k = "@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row[data-selectable=false].row-focus{background-color:var(--tbw-color-row-alt)}tbw-grid .data-grid-row>.cell[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row>.cell[data-selectable=false].selected{background-color:var(--tbw-color-warning-bg, rgba(255, 243, 205, .5))}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";
+const k = "@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row[data-selectable=false].row-focus{background-color:var(--tbw-color-row-alt)}tbw-grid .data-grid-row>.cell[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row>.cell[data-selectable=false].selected{background-color:var(--tbw-selection-warning-bg, rgba(from var(--tbw-color-error) r g b / 50%))}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";
 function K(r, e, t) {
   if (r === "cell" && e.selectedCell)
     return {

package/lib/plugins/visibility/index.js

@@ -311,8 +311,8 @@ class C {
   }
   // #endregion
 }
-const y = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}}';
-function f(b) {
+const y = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}}';
+function p(b) {
   const e = b.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
@@ -508,7 +508,7 @@ class g extends C {
     const r = this.grid.getAllColumns().filter((s) => !s.utility);
     for (let s = 0; s < r.length; s++) {
       const i = r[s], a = i.header || i.field, n = document.createElement("div");
-      n.className = i.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", i.field), n.setAttribute("data-index", String(s)), t && f(i) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, i.field, s, e));
+      n.className = i.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", i.field), n.setAttribute("data-index", String(s)), t && p(i) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, i.field, s, e));
       const l = document.createElement("label");
       l.className = "tbw-visibility-label";
       const o = document.createElement("input");
@@ -516,7 +516,7 @@ class g extends C {
         this.grid.toggleColumnVisibility(i.field), setTimeout(() => this.rebuildToggles(e), 0);
       });
       const d = document.createElement("span");
-      if (d.textContent = a, l.appendChild(o), l.appendChild(d), t && f(i)) {
+      if (d.textContent = a, l.appendChild(o), l.appendChild(d), t && p(i)) {
         const c = document.createElement("span");
         c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", n.appendChild(c);
       }
@@ -547,13 +547,13 @@ class g extends C {
         return;
       const o = l > n ? l - 1 : l;
       if (o !== n) {
-        const d = this.grid.getAllColumns(), h = d.filter((u) => !u.utility)[o]?.field, p = h ? d.findIndex((u) => u.field === h) : d.length, v = {
+        const d = this.grid.getAllColumns(), h = d.filter((u) => !u.utility)[o]?.field, v = h ? d.findIndex((u) => u.field === h) : d.length, f = {
           field: a,
           fromIndex: n,
           // Not used by ReorderPlugin, just for info
-          toIndex: p
+          toIndex: v
         };
-        this.emit("column-reorder-request", v), setTimeout(() => {
+        this.emit("column-reorder-request", f), setTimeout(() => {
           this.rebuildToggles(s);
         }, 0);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Zero-dependency, framework-agnostic data grid web component with virtualization, sorting, filtering, editing, and 20+ plugins. Works in vanilla JS, React, Vue, Angular, and any framework.",
   "type": "module",
   "main": "./index.js",

package/themes/dg-theme-bootstrap.css

@@ -1,13 +1,13 @@
 /*
- * Bootstrap 5 Table Theme
- * Matches the look of Bootstrap's .table component
+ * Bootstrap 5 Theme
+ * Matches the look of Bootstrap 5's table component with enhanced interactions.
  * https://getbootstrap.com/docs/5.3/content/tables/
  */
 @layer tbw-theme {
   tbw-grid {
-    /* Bootstrap surface colors */
+    /* ========== Core Palette ========== */
     --tbw-color-bg: light-dark(#ffffff, #212529);
-    --tbw-color-panel-bg: light-dark(#ffffff, #212529);
+    --tbw-color-panel-bg: light-dark(#f8f9fa, #2b3035);
     --tbw-color-fg: light-dark(#212529, #dee2e6);
     --tbw-color-fg-muted: light-dark(#6c757d, #adb5bd);
 
@@ -23,51 +23,78 @@
     /* Bootstrap primary (blue) */
     --tbw-color-accent: light-dark(#0d6efd, #6ea8fe);
     --tbw-color-accent-fg: #ffffff;
+    --tbw-color-success: light-dark(#198754, #75b798);
+    --tbw-color-error: light-dark(#dc3545, #ea868f);
 
-    /* Selection & interaction - Bootstrap's table-active */
-    --tbw-color-selection: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.075));
-    --tbw-color-row-alt: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); /* Striped rows */
-    --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.075));
-    --tbw-color-active-row-bg: light-dark(rgba(13, 110, 253, 0.1), rgba(110, 168, 254, 0.15));
+    /* Selection & interaction */
+    --tbw-color-selection: light-dark(rgba(13, 110, 253, 0.1), rgba(110, 168, 254, 0.15));
+    --tbw-color-row-alt: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
+    --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.05));
+    --tbw-color-active-row-bg: light-dark(rgba(13, 110, 253, 0.12), rgba(110, 168, 254, 0.18));
 
-    /* Header - slightly darker background */
+    /* Header */
     --tbw-color-header-bg: light-dark(#f8f9fa, #343a40);
     --tbw-color-header-fg: light-dark(#212529, #dee2e6);
+    --tbw-color-header-separator: light-dark(#adb5bd, #495057);
 
-    /* No border radius - Bootstrap tables are rectangular */
-    --tbw-border-radius: 0;
-
-    /* Focus styling */
-    --tbw-focus-outline: 3px solid light-dark(rgba(13, 110, 253, 0.25), rgba(110, 168, 254, 0.5));
-    --tbw-focus-outline-offset: -3px;
-    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    /* Shadow for modals/panels */
+    --tbw-color-shadow: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
 
-    /* Bootstrap typography */
+    /* ========== Typography ========== */
     --tbw-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     --tbw-font-size: 1rem;
     --tbw-font-size-header: 1rem;
-    --tbw-font-weight-header: bold;
+    --tbw-font-weight-header: 600;
     --tbw-header-text-transform: none;
+    --tbw-header-letter-spacing: normal;
+
+    /* ========== Dimensions ========== */
+    --tbw-cell-padding: 8px 12px;
+    --tbw-cell-padding-header: 8px 12px;
+    --tbw-row-height: 44px;
+    --tbw-header-height: 48px;
+
+    /* Bootstrap uses rectangular tables */
+    --tbw-border-radius: 0.375rem;
+
+    /* ========== Motion ========== */
+    --tbw-transition-duration: 150ms;
+    --tbw-transition-ease: ease-in-out;
+    --tbw-animation-duration: 200ms;
+    --tbw-animation-easing: ease-in-out;
+
+    /* ========== Focus & Selection ========== */
+    /* Bootstrap's focus ring style */
+    --tbw-focus-outline: 0 0 0 0.25rem rgba(from var(--tbw-color-accent) r g b / 25%);
+    --tbw-focus-outline-offset: 0;
+    --tbw-focus-background: transparent;
 
-    /* Bootstrap table padding */
-    --tbw-cell-padding: 8px 8px;
-    --tbw-cell-padding-header: 8px 8px;
-    --tbw-row-height: 40px;
-    --tbw-header-height: 44px;
+    --tbw-range-border-color: var(--tbw-color-accent);
+    --tbw-range-selection-bg: rgba(from var(--tbw-color-accent) r g b / 12%);
 
-    /* Sort indicator */
+    /* ========== Resize Handle ========== */
+    --tbw-resize-handle-color: transparent;
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+
+    /* ========== Sort Indicators ========== */
     --tbw-sort-indicator-color: light-dark(#6c757d, #adb5bd);
     --tbw-sort-indicator-active-color: light-dark(#212529, #dee2e6);
 
-    /* Header border - thicker bottom border like Bootstrap */
-    --tbw-border-header: 2px solid light-dark(#212529, #dee2e6);
-
-    /* Input styling */
+    /* ========== Borders ========== */
+    /* Bootstrap's thicker header bottom border */
+    --tbw-border-header: 2px solid light-dark(currentColor, #dee2e6);
     --tbw-border-input: 1px solid light-dark(#ced4da, #495057);
-    --tbw-editing-bg: light-dark(#ffffff, #212529);
-    --tbw-editing-border: 1px solid var(--tbw-color-accent);
+    --tbw-editing-border: 2px solid var(--tbw-color-accent);
 
-    /* Success color for checkmarks etc */
-    --tbw-color-success: light-dark(#198754, #75b798);
+    /* ========== Scrollbar ========== */
+    --tbw-scrollbar-thumb: light-dark(#adb5bd, #495057);
+    --tbw-scrollbar-track: transparent;
+
+    /* ========== Tool Panel ========== */
+    --tbw-tool-panel-bg: light-dark(#f8f9fa, #2b3035);
+    --tbw-shell-header-bg: light-dark(#f8f9fa, #343a40);
+
+    /* ========== Row Animations ========== */
+    --tbw-row-change-color: rgba(from var(--tbw-color-accent) r g b / 20%);
   }
 } /* End @layer tbw-theme */

package/themes/dg-theme-material.css

@@ -1,71 +1,102 @@
 /*
- * Angular Material Table Theme
- * Matches the clean, minimal look of Angular Material's mat-table
- * https://material.angular.io/components/table/overview
+ * Material Design 3 Theme
+ * Inspired by Material Design 3 / Material You with modern polish.
+ * Clean surfaces, subtle elevation, smooth motion, and refined typography.
+ * https://m3.material.io/
  */
 @layer tbw-theme {
   tbw-grid {
-    /* Clean white/dark surface - no tinting */
-    --tbw-color-bg: light-dark(#ffffff, #272727);
-    --tbw-color-panel-bg: light-dark(#ffffff, #272727);
-    --tbw-color-fg: light-dark(rgba(0, 0, 0, 0.87), #ffffff);
-    --tbw-color-fg-muted: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
-
-    /* Minimal borders - only horizontal row dividers */
-    --tbw-color-border: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
-    --tbw-color-border-strong: light-dark(rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.5));
-    --tbw-color-border-cell: transparent; /* No vertical cell borders */
-    --tbw-color-border-header: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
-
-    /* Row divider - thin horizontal line only */
-    --tbw-row-divider: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
-
-    /* Angular Material accent colors */
-    --tbw-color-accent: light-dark(#3f51b5, #7986cb); /* Indigo primary */
-    --tbw-color-accent-fg: #ffffff;
-
-    /* Selection & interaction */
-    --tbw-color-selection: light-dark(rgba(63, 81, 181, 0.08), rgba(121, 134, 203, 0.16));
-    --tbw-color-row-alt: transparent; /* No zebra striping in Material */
-    --tbw-color-row-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
-    --tbw-color-active-row-bg: light-dark(rgba(63, 81, 181, 0.08), rgba(121, 134, 203, 0.16));
-
-    /* Header - same as body, no distinct background */
-    --tbw-color-header-bg: light-dark(#ffffff, #272727);
-    --tbw-color-header-fg: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
-
-    /* No outer border or radius - clean rectangular look */
-    --tbw-border-radius: 0;
-
-    /* Focus styling */
-    --tbw-focus-outline: 2px solid var(--tbw-color-accent);
-    --tbw-focus-outline-offset: -2px;
-    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    /* ========== Core Palette ========== */
+    /* M3 surface colors with subtle tonal variation */
+    --tbw-color-bg: light-dark(#fffbff, #1c1b1f);
+    --tbw-color-panel-bg: light-dark(#f7f2fa, #2b2930);
+    --tbw-color-fg: light-dark(#1c1b1f, #e6e1e5);
+    --tbw-color-fg-muted: light-dark(#49454f, #cac4d0);
+
+    /* Subtle borders for clean look */
+    --tbw-color-border: light-dark(#e7e0ec, #49454f);
+    --tbw-color-border-strong: light-dark(#79747e, #938f99);
+    --tbw-color-border-cell: transparent;
+    --tbw-color-border-header: light-dark(#e7e0ec, #49454f);
+
+    /* Row divider - subtle horizontal line */
+    --tbw-row-divider: 1px solid light-dark(#e7e0ec, #49454f);
+
+    /* M3 Primary - Purple/Violet */
+    --tbw-color-accent: light-dark(#6750a4, #d0bcff);
+    --tbw-color-accent-fg: light-dark(#ffffff, #381e72);
+    --tbw-color-success: light-dark(#146c2e, #6dd58c);
+    --tbw-color-error: light-dark(#b3261e, #f2b8b5);
 
-    /* Roboto typography - Material standard */
-    --tbw-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+    /* Selection & interaction with tonal surfaces */
+    --tbw-color-selection: light-dark(#e8def8, #4a4458);
+    --tbw-color-row-alt: transparent;
+    --tbw-color-row-hover: light-dark(rgba(103, 80, 164, 0.08), rgba(208, 188, 255, 0.08));
+    --tbw-color-active-row-bg: light-dark(rgba(103, 80, 164, 0.12), rgba(208, 188, 255, 0.12));
+
+    /* Header with subtle surface tint */
+    --tbw-color-header-bg: light-dark(#fffbff, #1c1b1f);
+    --tbw-color-header-fg: light-dark(#49454f, #cac4d0);
+
+    /* Elevation shadow for panels */
+    --tbw-color-shadow: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
+
+    /* ========== Typography ========== */
+    --tbw-font-family: 'Roboto Flex', 'Roboto', system-ui, sans-serif;
     --tbw-font-size: 14px;
     --tbw-font-size-header: 12px;
     --tbw-font-weight-header: 500;
     --tbw-header-text-transform: none;
-    --tbw-header-letter-spacing: normal;
+    --tbw-header-letter-spacing: 0.01em;
 
-    /* Generous padding like Material tables */
+    /* ========== Spacing & Dimensions ========== */
+    /* M3 uses generous whitespace */
     --tbw-cell-padding: 4px 16px;
     --tbw-cell-padding-header: 4px 16px;
-    --tbw-row-height: 48px;
+    --tbw-row-height: 52px;
     --tbw-header-height: 56px;
 
-    /* Sort indicator styling */
-    --tbw-sort-indicator-color: light-dark(rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.7));
-    --tbw-sort-indicator-active-color: light-dark(rgba(0, 0, 0, 0.87), #ffffff);
+    /* M3 uses larger corner radii */
+    --tbw-border-radius: 12px;
 
-    /* Header border - only bottom */
-    --tbw-border-header: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
+    /* ========== Motion ========== */
+    /* M3 emphasizing motion - smooth, intentional transitions */
+    --tbw-transition-duration: 200ms;
+    --tbw-transition-ease: cubic-bezier(0.2, 0, 0, 1);
+    --tbw-animation-duration: 300ms;
+    --tbw-animation-easing: cubic-bezier(0.2, 0, 0, 1);
 
-    /* Input styling for editing */
-    --tbw-border-input: 1px solid light-dark(rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.5));
-    --tbw-editing-bg: transparent;
+    /* ========== Focus & Selection ========== */
+    --tbw-focus-outline: 2px solid var(--tbw-color-accent);
+    --tbw-focus-outline-offset: 2px;
+    --tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);
+
+    --tbw-range-border-color: var(--tbw-color-accent);
+    --tbw-range-selection-bg: rgba(from var(--tbw-color-accent) r g b / 12%);
+
+    /* ========== Resize Handle ========== */
+    --tbw-resize-handle-color: transparent;
+    --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    --tbw-resize-handle-border-radius: 4px;
+
+    /* ========== Sort Indicators ========== */
+    --tbw-sort-indicator-color: light-dark(#49454f, #cac4d0);
+    --tbw-sort-indicator-active-color: var(--tbw-color-accent);
+
+    /* ========== Borders ========== */
+    --tbw-border-header: 1px solid light-dark(#e7e0ec, #49454f);
+    --tbw-border-input: 1px solid light-dark(#79747e, #938f99);
     --tbw-editing-border: 2px solid var(--tbw-color-accent);
+
+    /* ========== Scrollbar ========== */
+    --tbw-scrollbar-thumb: light-dark(#d0d0d8, #49454f);
+    --tbw-scrollbar-track: transparent;
+
+    /* ========== Tool Panel ========== */
+    --tbw-tool-panel-bg: light-dark(#f7f2fa, #2b2930);
+    --tbw-shell-header-bg: light-dark(#fffbff, #1c1b1f);
+
+    /* ========== Row Animations ========== */
+    --tbw-row-change-color: rgba(from var(--tbw-color-accent) r g b / 20%);
   }
 } /* End @layer tbw-theme */

package/themes/dg-theme-standard.css

@@ -1,20 +1,88 @@
-/* Standard balanced theme with light-dark() adaptive palette */
+/*
+ * Standard Theme
+ * A polished, balanced theme suitable for most applications.
+ * Clean lines, subtle depth, and professional aesthetics.
+ */
 @layer tbw-theme {
   tbw-grid {
-    --tbw-color-bg: light-dark(#ffffff, #1f2125);
-    --tbw-color-fg: light-dark(#1f2329, #e5e7eb);
-    --tbw-color-fg-muted: light-dark(#586069, #9ca3af);
-    --tbw-color-border: light-dark(#d0d4d9, #3a3d44);
-    --tbw-color-border-strong: light-dark(#888d94, #5a5f66);
+    /* ========== Core Palette ========== */
+    --tbw-color-bg: light-dark(#ffffff, #1a1c20);
+    --tbw-color-panel-bg: light-dark(#f8f9fa, #232528);
+    --tbw-color-fg: light-dark(#1f2937, #e5e7eb);
+    --tbw-color-fg-muted: light-dark(#6b7280, #9ca3af);
+
+    /* Refined borders */
+    --tbw-color-border: light-dark(#e5e7eb, #374151);
+    --tbw-color-border-strong: light-dark(#9ca3af, #6b7280);
+    --tbw-color-border-cell: light-dark(#f3f4f6, #2d3138);
+    --tbw-color-border-header: light-dark(#d1d5db, #3f4550);
+
+    /* Row divider */
+    --tbw-row-divider: 1px solid light-dark(#e5e7eb, #2d3138);
+
+    /* Modern blue accent */
     --tbw-color-accent: light-dark(#2563eb, #3b82f6);
     --tbw-color-accent-fg: #ffffff;
-    --tbw-color-selection: light-dark(#fff7d6, #374151);
-    --tbw-color-row-alt: light-dark(#f8f9fa, #252830);
-    --tbw-color-row-hover: light-dark(#eef6ff, #2d313b);
-    --tbw-color-header-bg: light-dark(#f5f6f8, #262a30);
-    --tbw-color-border-cell: light-dark(#eee, #333);
-    --tbw-color-border-header: light-dark(#ccc, #444);
+    --tbw-color-success: light-dark(#059669, #34d399);
+    --tbw-color-error: light-dark(#dc2626, #f87171);
+
+    /* Selection & interaction */
+    --tbw-color-selection: light-dark(#eff6ff, #1e3a5f);
+    --tbw-color-row-alt: light-dark(#f9fafb, #1f2225);
+    --tbw-color-row-hover: light-dark(#f0f7ff, #252a32);
+    --tbw-color-active-row-bg: light-dark(#dbeafe, #1e3a5f);
+
+    /* Header with subtle distinction */
+    --tbw-color-header-bg: light-dark(#f8fafc, #21242a);
+    --tbw-color-header-fg: light-dark(#374151, #d1d5db);
+    --tbw-color-header-separator: light-dark(#d1d5db, #3f4550);
+
+    /* Subtle shadow for depth */
+    --tbw-color-shadow: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.25));
+
+    /* ========== Typography ========== */
+    --tbw-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --tbw-font-weight-header: 600;
+    --tbw-header-text-transform: none;
+    --tbw-header-letter-spacing: -0.01em;
+
+    /* ========== Visual Polish ========== */
+    --tbw-border-radius: 0.375em;
+
+    /* Smooth transitions */
+    --tbw-transition-duration: 150ms;
+    --tbw-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
+    --tbw-animation-duration: 200ms;
+    --tbw-animation-easing: ease-out;
+
+    /* ========== Focus & Selection ========== */
+    --tbw-focus-outline: 2px solid var(--tbw-color-accent);
+    --tbw-focus-outline-offset: -2px;
+    --tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 8%);
+
+    --tbw-range-border-color: var(--tbw-color-accent);
+    --tbw-range-selection-bg: rgba(from var(--tbw-color-accent) r g b / 10%);
+
+    /* ========== Resize Handle ========== */
+    --tbw-resize-handle-color: transparent;
     --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+
+    /* ========== Sort Indicators ========== */
+    --tbw-sort-indicator-color: var(--tbw-color-fg-muted);
+    --tbw-sort-indicator-active-color: var(--tbw-color-accent);
+
+    /* ========== Scrollbar ========== */
+    --tbw-scrollbar-thumb: light-dark(#c5c8ce, #4b5058);
+    --tbw-scrollbar-track: transparent;
+
+    /* ========== Tool Panel ========== */
+    --tbw-tool-panel-bg: light-dark(#f8f9fa, #232528);
+    --tbw-shell-header-bg: light-dark(#f8fafc, #21242a);
+
+    /* ========== Column Header Groups ========== */
     --tbw-align-header-group: center;
+
+    /* ========== Row Animations ========== */
+    --tbw-row-change-color: rgba(from var(--tbw-color-accent) r g b / 20%);
   }
 } /* End @layer tbw-theme */

package/themes/dg-theme-vibrant.css

@@ -1,17 +1,86 @@
-/* Vibrant colorful theme (keeps good contrast) */
+/*
+ * Vibrant Theme
+ * A bold, colorful theme with rich purples and smooth interactions.
+ * Features subtle gradients, glowing accents, and polished transitions.
+ */
 @layer tbw-theme {
   tbw-grid {
-    --tbw-color-bg: light-dark(#fcfcff, #1a1c24);
+    /* ========== Core Palette ========== */
+    --tbw-color-bg: light-dark(#fafaff, #12141c);
+    --tbw-color-panel-bg: light-dark(#f0f0ff, #1a1d28);
     --tbw-color-fg: light-dark(#1e2430, #f1f5f9);
     --tbw-color-fg-muted: light-dark(#5d6473, #9ba4b4);
-    --tbw-color-border: light-dark(#d6daf2, #3a4153);
-    --tbw-color-border-strong: light-dark(#8a93b5, #596380);
-    --tbw-color-accent: light-dark(#6366f1, #818cf8);
+    --tbw-color-border: light-dark(#ddddf8, #2e3344);
+    --tbw-color-border-strong: light-dark(#9093c5, #505878);
+    --tbw-color-border-cell: light-dark(#e8e8f8, #252838);
+    --tbw-color-border-header: light-dark(#d0d0ec, #3a3f55);
+
+    /* Vibrant purple accent with glow potential */
+    --tbw-color-accent: light-dark(#7c3aed, #a78bfa);
     --tbw-color-accent-fg: #ffffff;
-    --tbw-color-selection: light-dark(#edeaff, #374062);
-    --tbw-color-row-alt: light-dark(#f4f3ff, #232a3a);
-    --tbw-color-row-hover: light-dark(#eef2ff, #2b3447);
-    --tbw-color-header-bg: light-dark(#eff1ff, #242b3b);
+    --tbw-color-success: light-dark(#059669, #34d399);
+    --tbw-color-error: light-dark(#dc2626, #f87171);
+
+    /* Selection & interaction - subtle purple tint */
+    --tbw-color-selection: light-dark(#ede9fe, #312e5a);
+    --tbw-color-row-alt: light-dark(#f8f7ff, #1e2130);
+    --tbw-color-row-hover: light-dark(#f0edff, #262a40);
+    --tbw-color-active-row-bg: light-dark(#e9e4ff, #352f5c);
+
+    /* Header with subtle gradient feel */
+    --tbw-color-header-bg: light-dark(#f5f3ff, #1f2235);
+    --tbw-color-header-fg: light-dark(#3730a3, #c4b5fd);
+    --tbw-color-header-separator: light-dark(#c7c3f0, #3d4260);
+
+    /* Enhanced shadows for depth */
+    --tbw-color-shadow: light-dark(rgba(124, 58, 237, 0.12), rgba(0, 0, 0, 0.4));
+
+    /* ========== Typography ========== */
+    --tbw-font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    --tbw-font-weight-header: 600;
+    --tbw-header-text-transform: none;
+    --tbw-header-letter-spacing: -0.01em;
+
+    /* ========== Visual Polish ========== */
+    --tbw-border-radius: 0.5em;
+
+    /* Smooth, refined transitions */
+    --tbw-transition-duration: 150ms;
+    --tbw-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
+    --tbw-animation-duration: 250ms;
+    --tbw-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* ========== Focus & Selection Styling ========== */
+    --tbw-focus-outline: 2px solid var(--tbw-color-accent);
+    --tbw-focus-outline-offset: -2px;
+    --tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 10%);
+
+    /* Range selection with accent glow */
+    --tbw-range-border-color: var(--tbw-color-accent);
+    --tbw-range-selection-bg: rgba(from var(--tbw-color-accent) r g b / 15%);
+
+    /* Subtle hover outline for rows */
+    --tbw-row-hover-outline: 1px solid rgba(from var(--tbw-color-accent) r g b / 20%);
+    --tbw-active-row-outline: 2px solid rgba(from var(--tbw-color-accent) r g b / 40%);
+
+    /* ========== Resize Handle ========== */
+    --tbw-resize-handle-color: transparent;
     --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+    --tbw-resize-handle-border-radius: 2px;
+    --tbw-resize-indicator-color: var(--tbw-color-accent);
+
+    /* ========== Sorting Indicators ========== */
+    --tbw-sort-indicator-color: light-dark(#a5a8c8, #6b7094);
+    --tbw-sort-indicator-active-color: var(--tbw-color-accent);
+
+    /* ========== Scrollbar ========== */
+    --tbw-scrollbar-thumb: light-dark(#c4c3e8, #3d4260);
+    --tbw-scrollbar-track: var(--tbw-color-bg);
+
+    /* ========== Tool Panel ========== */
+    --tbw-tool-panel-bg: light-dark(#f8f7ff, #181a24);
+
+    /* ========== Row Animations ========== */
+    --tbw-row-change-color: rgba(from var(--tbw-color-accent) r g b / 30%);
   }
 } /* End @layer tbw-theme */