@keenmate/web-grid 1.0.0-rc07 → 1.0.0-rc08

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/web-grid",
-	"version": "1.0.0-rc07",
+	"version": "1.0.0-rc08",
 	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
 	"type": "module",
 	"main": "./dist/web-grid.umd.js",

package/src/css/_cells.css

@@ -7,6 +7,7 @@
 .wg__cell {
   padding: var(--wg-cell-padding);
   color: var(--wg-cell-color);
+  box-sizing: border-box;  /* Include padding in width calculation */
   /* Account for sticky header when scrolling into view */
   scroll-margin-top: 3rem;
   scroll-margin-bottom: 0.5rem;

package/src/css/_fill-handle.css

@@ -0,0 +1,50 @@
+/* ==============================================================================
+   FILL HANDLE (Excel-like autofill)
+   ==============================================================================
+   Small handle at bottom-right of focused cell for drag-to-fill operations
+*/
+
+/* Fill handle - small square at bottom-right corner of focused cell */
+.wg__fill-handle {
+  position: absolute;
+  width: var(--wg-fill-handle-size);
+  height: var(--wg-fill-handle-size);
+  background: var(--wg-fill-handle-bg);
+  border: var(--wg-fill-handle-border-width) solid var(--wg-fill-handle-border-color);
+  cursor: crosshair;
+  z-index: 10;
+  pointer-events: auto;
+  box-sizing: border-box;
+}
+
+/* Hover state - slightly larger */
+.wg__fill-handle:hover {
+  transform: scale(1.2);
+}
+
+/* Fill range overlay - shows which cells will be filled */
+.wg__fill-range {
+  position: absolute;
+  background: var(--wg-fill-range-bg);
+  border: 1px dashed var(--wg-fill-range-border-color);
+  pointer-events: none;
+  z-index: 5;
+  box-sizing: border-box;
+}
+
+/* Container state during fill drag */
+.wg--filling {
+  cursor: crosshair;
+  user-select: none;
+}
+
+/* Override all cell cursors during fill */
+.wg--filling .wg__cell,
+.wg--filling .wg__header {
+  cursor: crosshair;
+}
+
+/* Hide fill handle during edit mode */
+.wg__cell--editing .wg__fill-handle {
+  display: none;
+}

package/src/css/_freeze.css

@@ -0,0 +1,88 @@
+/* ==============================================================================
+   FREEZE PANES (Sticky Columns)
+   ==============================================================================
+   Styles for frozen/sticky columns during horizontal scroll
+*/
+
+/* ==========================================================================
+   FROZEN HEADER CELLS
+   ========================================================================== */
+
+.wg__header--frozen {
+  background: var(--wg-frozen-header-bg, var(--wg-header-bg));
+  /* Shadow on right edge to indicate frozen state */
+  box-shadow: var(--wg-frozen-column-shadow, 2px 0 4px rgba(0, 0, 0, 0.1));
+}
+
+/* Corner cell (row number header when sticky) - highest z-index */
+.wg__row-number-header.wg__header--frozen {
+  z-index: 4 !important;
+}
+
+/* ==========================================================================
+   FROZEN BODY CELLS
+   ========================================================================== */
+
+.wg__cell--frozen {
+  background: var(--wg-frozen-column-bg, var(--wg-surface-1));
+  /* Shadow on right edge */
+  box-shadow: var(--wg-frozen-column-shadow, 2px 0 4px rgba(0, 0, 0, 0.1));
+}
+
+/* Row number cells when sticky */
+.wg__row-number.wg__cell--frozen {
+  background: var(--wg-header-bg);
+  z-index: 2 !important;
+  /* Combine border shadow with frozen shadow */
+  box-shadow: inset -1px 0 0 var(--wg-border-color), var(--wg-frozen-column-shadow, 2px 0 4px rgba(0, 0, 0, 0.1));
+}
+
+/* ==========================================================================
+   STRIPED ROWS WITH FROZEN COLUMNS
+   ========================================================================== */
+
+/* Ensure frozen cells maintain striped pattern */
+.wg--striped tbody tr:nth-child(even) .wg__cell--frozen {
+  background: var(--wg-row-bg-even);
+}
+
+/* ==========================================================================
+   HOVER STATES FOR FROZEN COLUMNS
+   ========================================================================== */
+
+.wg--hoverable tbody tr:hover .wg__cell--frozen {
+  background: var(--wg-row-bg-hover);
+}
+
+/* ==========================================================================
+   FOCUSED/SELECTED ROW WITH FROZEN COLUMNS
+   ========================================================================== */
+
+/* When a row is focused (navigate mode) */
+.wg__row--focused .wg__cell--frozen {
+  background: var(--wg-focus-bg);
+}
+
+/* ==========================================================================
+   SCROLL-AWARE FROZEN COLUMN INDICATOR
+   ========================================================================== */
+
+/* Last frozen column needs overflow:visible for ::after to show outside cell */
+/* Higher specificity to override .wg__cell { overflow: hidden } */
+.wg__header.wg__header--frozen-last,
+.wg__cell.wg__cell--frozen-last {
+  overflow: visible;
+}
+
+/* Shadow indicator on the last frozen column when scrolled */
+.wg--scrolled-horizontal .wg__header--frozen-last::after,
+.wg--scrolled-horizontal .wg__cell--frozen-last::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -8px;
+  bottom: 0;
+  width: 8px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
+  pointer-events: none;
+}

package/src/css/_header.css

@@ -13,10 +13,17 @@
   font-weight: var(--wg-header-font-weight);
   padding: var(--wg-header-padding);
   border-bottom: var(--wg-header-border);
+  border-right: var(--wg-header-separator);  /* Column separator */
+  box-sizing: border-box;  /* Include padding in width calculation */
   text-align: left;
   user-select: none;
 }
 
+/* Remove separator from last header */
+.wg__header:last-child {
+  border-right: none;
+}
+
 .wg__header--sortable {
   cursor: pointer;
 }

package/src/css/_reorder.css

@@ -0,0 +1,73 @@
+/* ==============================================================================
+   COLUMN REORDER
+   ==============================================================================
+   Drag-and-drop column reordering styles
+*/
+
+/* Dragging header - reduced opacity */
+.wg__header--dragging {
+  opacity: 0.5;
+}
+
+/* Ghost element that follows cursor */
+.wg__reorder-ghost {
+  position: absolute;
+  z-index: 1000;
+  background: var(--wg-header-bg);
+  border: 2px solid var(--wg-accent-color);
+  border-radius: var(--wg-border-radius-sm);
+  padding: 0.4em 0.8em;
+  font-size: var(--wg-font-size-sm);
+  font-weight: var(--wg-header-font-weight);
+  color: var(--wg-header-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0.95;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Drop indicator line */
+.wg__drop-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--wg-accent-color);
+  z-index: 999;
+  pointer-events: none;
+  display: none;
+}
+
+/* Add arrow indicator at top */
+.wg__drop-indicator::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 8px solid var(--wg-accent-color);
+}
+
+/* Container during reorder */
+.wg--reordering {
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* Override all cell cursors during reorder */
+.wg--reordering .wg__cell,
+.wg--reordering .wg__header {
+  cursor: grabbing;
+}
+
+/* Make non-frozen headers show grab cursor on hover (only when reorder is enabled) */
+.wg--reorderable .wg__header:not(.wg__header--frozen):hover {
+  cursor: grab;
+}
+
+/* Frozen headers don't get grab cursor */
+.wg__header--frozen {
+  cursor: default;
+}

package/src/css/_resize.css

@@ -0,0 +1,77 @@
+/* ==============================================================================
+   COLUMN RESIZE
+   ==============================================================================
+   Resize handles for column width adjustment
+*/
+
+/* Header needs position:relative for absolute positioning of resize handle */
+.wg__header {
+  position: relative;  /* Adds to existing sticky positioning in _header.css */
+}
+
+/* Resize handle - invisible by default, appears on hover */
+.wg__resize-handle {
+  position: absolute;
+  top: 0;
+  right: var(--wg-resize-handle-offset);
+  bottom: 0;
+  width: var(--wg-resize-handle-width);
+  cursor: col-resize;
+  z-index: 2;  /* Above header content but below frozen column headers */
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+/* Show resize handle on header hover */
+.wg__header:hover .wg__resize-handle {
+  opacity: 1;
+}
+
+/* Visual indicator line */
+.wg__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 25%;
+  bottom: 25%;
+  left: 50%;
+  width: var(--wg-resize-handle-line-width);
+  background: var(--wg-resize-handle-color);
+  transform: translateX(-50%);
+  border-radius: 1px;
+}
+
+/* Hover state - more prominent */
+.wg__resize-handle:hover::after {
+  background: var(--wg-resize-handle-active-color);
+  top: 15%;
+  bottom: 15%;
+}
+
+/* Active state during drag */
+.wg__resize-handle--active::after {
+  background: var(--wg-resize-handle-active-color);
+  top: 0;
+  bottom: 0;
+}
+
+/* Keep handle visible during drag */
+.wg--resizing .wg__resize-handle {
+  opacity: 1;
+}
+
+/* Prevent text selection during resize */
+.wg--resizing {
+  user-select: none;
+  cursor: col-resize;
+}
+
+/* Override all cell cursors during resize */
+.wg--resizing .wg__cell,
+.wg--resizing .wg__header {
+  cursor: col-resize;
+}
+
+/* Allow table to shrink during resize (only override min-width, not width) */
+.wg--resizing .wg__table {
+  min-width: 0 !important;
+}

package/src/css/_selection.css

@@ -0,0 +1,45 @@
+/* =============================================================================
+   ROW SELECTION STYLES
+   Multi-row selection via row number cells
+   ============================================================================= */
+
+/* Selected row highlighting */
+.wg__row--selected > .wg__cell {
+  background: var(--wg-selection-bg);
+}
+
+/* Selected row number cell - accent colored */
+.wg__row--selected > .wg__row-number {
+  background: var(--wg-selection-row-number-bg);
+  color: var(--wg-selection-row-number-color);
+}
+
+/* Row number cells are clickable for selection */
+.wg__row-number[data-row-number] {
+  cursor: pointer;
+  user-select: none;
+}
+
+.wg__row-number[data-row-number]:hover {
+  background: var(--wg-hover-bg);
+}
+
+/* When already selected, hover doesn't change background */
+.wg__row--selected > .wg__row-number:hover {
+  background: var(--wg-selection-row-number-bg);
+}
+
+/* Container state during drag selection */
+.wg--selecting {
+  cursor: default;
+  user-select: none;
+}
+
+.wg--selecting * {
+  user-select: none;
+}
+
+/* Hide focus outline on container (focused for keyboard shortcuts only) */
+.wg:focus {
+  outline: none;
+}

package/src/css/_table.css

@@ -34,7 +34,7 @@ web-grid:not(:defined) {
    ============================================================================== */
 .wg__table {
   width: max-content;
-  min-width: 100%;
+  min-width: max-content;  /* Prevent columns from shrinking below their specified widths */
   border-collapse: collapse;
   table-layout: fixed;
   background: var(--wg-table-bg);
@@ -57,6 +57,7 @@ web-grid:not(:defined) {
   width: 40px;
   min-width: 40px;
   max-width: 40px;
+  box-sizing: border-box;  /* Include padding in width calculation */
   text-align: center;
   color: var(--wg-text-color-2);
   background: var(--wg-header-bg);
@@ -65,7 +66,8 @@ web-grid:not(:defined) {
 }
 
 .wg__row-number {
-  border-right: var(--wg-cell-border);
+  /* Use box-shadow instead of border to avoid flicker during sticky scroll */
+  box-shadow: inset -1px 0 0 var(--wg-border-color);
 }
 
 /* ==============================================================================

package/src/css/_variables.css

@@ -123,6 +123,7 @@
   --wg-header-bg-sorted: var(--wg-surface-3);
   --wg-header-color: var(--wg-text-color-1);
   --wg-header-border: 2px solid var(--wg-border-color);
+  --wg-header-separator: 1px solid var(--wg-border-color);  /* Vertical separator between headers */
   --wg-header-padding: var(--wg-spacing-sm) var(--wg-spacing-md);
   --wg-header-font-weight: var(--wg-font-weight-semibold);
 
@@ -272,4 +273,39 @@
   --wg-z-toolbar: 1000;
   --wg-z-context-menu: 1001;
   --wg-z-tooltip: 10000;
+
+  /* ==========================================================================
+     FREEZE PANES (Sticky Columns)
+     ========================================================================== */
+  --wg-frozen-column-bg: var(--wg-surface-1);
+  --wg-frozen-header-bg: var(--wg-header-bg);
+  --wg-frozen-column-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  --wg-frozen-column-shadow-active: 6px 0 12px rgba(0, 0, 0, 0.25);  /* Enhanced shadow when scrolled */
+  --wg-frozen-column-border: 2px solid var(--wg-border-color);
+
+  /* ==========================================================================
+     COLUMN RESIZE
+     ========================================================================== */
+  --wg-resize-handle-width: 8px;
+  --wg-resize-handle-offset: -4px;  /* Centered on column border */
+  --wg-resize-handle-line-width: 2px;
+  --wg-resize-handle-color: var(--wg-border-color);
+  --wg-resize-handle-active-color: var(--wg-accent-color);
+
+  /* ==========================================================================
+     FILL HANDLE (Excel-like autofill)
+     ========================================================================== */
+  --wg-fill-handle-size: 8px;
+  --wg-fill-handle-bg: var(--wg-background);
+  --wg-fill-handle-border-color: var(--wg-accent-color);
+  --wg-fill-handle-border-width: 2px;
+  --wg-fill-range-bg: color-mix(in srgb, var(--wg-accent-color) 15%, transparent);
+  --wg-fill-range-border-color: var(--wg-accent-color);
+
+  /* ==========================================================================
+     ROW SELECTION
+     ========================================================================== */
+  --wg-selection-bg: color-mix(in srgb, var(--wg-accent-color) 15%, transparent);
+  --wg-selection-row-number-bg: var(--wg-accent-color);
+  --wg-selection-row-number-color: var(--base-text-inverted, #fff);
 }

package/src/css/main.css

@@ -7,6 +7,11 @@
    - _variables.css    : All CSS custom properties at :host level (for theming)
    - _table.css        : FOUC prevention, container, table, rows
    - _header.css       : Header, sort indicators, filter row
+   - _resize.css       : Column resize handles
+   - _reorder.css      : Column reorder drag-and-drop
+   - _fill-handle.css  : Fill handle (Excel-like autofill)
+   - _selection.css    : Row selection via row numbers
+   - _freeze.css       : Freeze panes (sticky columns)
    - _cells.css        : Cells, editable states, editing, validation
    - _editors.css      : All editor types (text, number, date, combobox, etc)
    - _dropdown.css     : Dropdown menus, select triggers
@@ -24,6 +29,11 @@
 @import '_variables.css';
 @import '_table.css';
 @import '_header.css';
+@import '_resize.css';
+@import '_reorder.css';
+@import '_fill-handle.css';
+@import '_selection.css';
+@import '_freeze.css';
 @import '_cells.css';
 @import '_row-locking.css';
 @import '_editors.css';