@keenmate/web-grid 1.1.0 → 1.2.0-rc02

package/src/css/{_shortcuts.css → shortcuts.css}

@@ -25,7 +25,7 @@
 	padding: 0;
 	border: none;
 	border-radius: 50%;
-	background: var(--wg-surface-1);
+	background: var(--wg-main-bg);
 	color: var(--wg-text-color-2);
 	cursor: pointer;
 	opacity: 0.7;
@@ -33,7 +33,7 @@
 
 .wg__shortcuts-help-icon:hover {
 	opacity: 1;
-	background: var(--wg-surface-2);
+	background: var(--wg-elevated-bg);
 }
 
 .wg__shortcuts-help-icon svg {
@@ -49,7 +49,7 @@
 	right: 0;
 	margin-top: var(--wg-spacing-xs);
 	padding: var(--wg-spacing-md);
-	background: var(--wg-surface-1);
+	background: var(--wg-main-bg);
 	border: 1px solid var(--wg-border-color);
 	border-radius: var(--wg-border-radius-md);
 	box-shadow: var(--wg-dialog-shadow);
@@ -113,7 +113,7 @@
 	font-size: var(--wg-font-size-xs);
 	font-weight: var(--wg-font-weight-semibold);
 	color: var(--wg-text-color-1);
-	background: var(--wg-surface-2);
+	background: var(--wg-elevated-bg);
 	border: 1px solid var(--wg-border-color);
 	border-radius: var(--wg-border-radius-sm);
 }

package/src/css/{_modifiers.css → states.css}

@@ -1,9 +1,15 @@
 /* ==============================================================================
-   MODIFIERS
+   STATES — Tier-2 canonical concern
    ==============================================================================
-   Table style modifiers: striped rows, hoverable rows, empty state
+   Cross-feature state and presentation modifiers: striped rows, row hover,
+   empty state, loading state. Feature-specific state modifiers (cell focused,
+   cell dirty, cell editing) live in their feature files.
 */
 
+/* ==============================================================================
+   ROW VARIANTS
+   ============================================================================== */
+
 /* Striped rows */
 .wg--striped tbody tr:nth-child(even) {
   background: var(--wg-row-bg-even);

package/src/css/tree.css

@@ -0,0 +1,71 @@
+/* ==============================================================================
+   TREE COLUMN
+   ==============================================================================
+   Indent + chevron rendered inside a cell when column.isTree is true.
+   Inline-flex wrapper: chevron (or leaf spacer) + cell-body sit on one row.
+   Per-level depth comes from `padding-inline-start: level * --wg-tree-indent`,
+   set inline by JS.
+*/
+
+:host {
+  --wg-tree-indent: 1.25rem;             /* per-level indent */
+  --wg-tree-chevron-size: 1rem;          /* chevron width/height (also used for leaf spacer) */
+  --wg-tree-chevron-color: var(--wg-text-color-2);
+  --wg-tree-chevron-gap: 4px;            /* gap between chevron and content */
+}
+
+.wg__tree-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wg-tree-chevron-gap);
+  /* `padding-inline-start: level * --wg-tree-indent` is set inline by JS */
+}
+
+.wg__tree-cell-body {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: inherit;
+  white-space: inherit;
+}
+
+.wg__tree-chevron {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wg-tree-chevron-size);
+  height: var(--wg-tree-chevron-size);
+  border-radius: 2px;
+  font-size: 0.85em;
+  line-height: 1;
+  color: var(--wg-tree-chevron-color);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.12s ease, background 0.1s ease;
+}
+
+.wg__tree-chevron:hover:not(.wg__tree-chevron--leaf) {
+  background: var(--wg-hover-bg);
+}
+
+.wg__tree-chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.wg__tree-leaf-spacer {
+  display: inline-block;
+  width: var(--wg-tree-chevron-size);
+  height: var(--wg-tree-chevron-size);
+  flex-shrink: 0;
+}
+
+/* While the cell is being edited, let the editor absolute-fill the <td> as it
+   normally does. The chevron/indent are visual aids for display mode; they come
+   back when editing ends. */
+.wg__cell--editing .wg__tree-chevron,
+.wg__cell--editing .wg__tree-leaf-spacer {
+  display: none;
+}
+.wg__cell--editing .wg__tree-cell {
+  display: contents;  /* wrapper disappears from layout */
+}

package/src/css/{_variables.css → variables.css}

@@ -49,36 +49,46 @@
   --wg-accent-color-light: var(--base-accent-color-light, color-mix(in srgb, var(--wg-accent-color) 15%, transparent));
 
   /* Text Color Levels (FluentUI-style hierarchy) */
-  --wg-text-color-1: var(--base-text-color-1, #242424);
-  --wg-text-color-2: var(--base-text-color-2, #424242);
-  --wg-text-color-3: var(--base-text-color-3, #707070);
+  /* light-dark() fallbacks activate when the consumer sets `color-scheme: dark`
+     (or `light dark`) on the page — typically via `body { color-scheme: dark }`.
+     The framework-class dark-mode blocks in dark-mode.css remain the primary
+     mechanism for data-theme="dark" / data-bs-theme="dark" / .dark switches. */
+  --wg-text-color-1: var(--base-text-color-1, light-dark(#242424, #f5f5f5));
+  --wg-text-color-2: var(--base-text-color-2, light-dark(#424242, #d4d4d4));
+  --wg-text-color-3: var(--base-text-color-3, light-dark(#707070, #a3a3a3));
   --wg-text-on-accent: var(--base-text-color-on-accent, #ffffff);
 
-  /* Background/Surface Colors */
-  --wg-surface-1: var(--base-main-bg, #ffffff);
-  --wg-surface-2: var(--base-elevated-bg, #f5f5f5);
-  --wg-surface-3: var(--base-hover-bg, #ebebeb);
-  --wg-surface-floating: var(--base-dropdown-bg, var(--base-main-bg, #ffffff));
+  /* Background Colors (semantic taxonomy matching pure-admin's --base-* names) */
+  --wg-main-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
+  --wg-elevated-bg: var(--base-elevated-bg, light-dark(#f5f5f5, #2b2b2b));
+  /* Dropdown / floating surface (toolbar, context menu, dropdown panels):
+     primary lookup is --base-dropdown-bg; falls back through --base-elevated-bg
+     so theme-designer's elevated-bg also covers floating UI. */
+  --wg-dropdown-bg: var(--base-dropdown-bg, var(--base-elevated-bg, var(--base-main-bg, light-dark(#ffffff, #2b2b2b))));
 
   /* Border Colors */
-  --wg-border-color: var(--base-border-color, #e0e0e0);
-  --wg-border-color-hover: var(--base-border-color, #d1d1d1);
+  --wg-border-color: var(--base-border-color, light-dark(#e0e0e0, #3d3d3d));
+  --wg-border-color-hover: var(--base-border-color, light-dark(#d1d1d1, #5a5a5a));
 
   /* Input Colors */
-  --wg-input-bg: var(--base-input-bg, #ffffff);
+  --wg-input-bg: var(--base-input-bg, light-dark(#ffffff, #1f1f1f));
   --wg-input-color: var(--base-input-color, var(--wg-text-color-1));
-  --wg-input-border: var(--base-input-border, 1px solid #d1d1d1);
+  --wg-input-border: var(--base-input-border, 1px solid light-dark(#d1d1d1, #5a5a5a));
   --wg-input-border-hover: var(--base-input-border-hover, 1px solid #0078d4);
   --wg-input-border-focus: var(--base-input-border-focus, 1px solid #0078d4);
-  --wg-input-placeholder-color: var(--base-input-placeholder-color, #707070);
+  --wg-input-placeholder-color: var(--base-input-placeholder-color, light-dark(#707070, #a3a3a3));
 
   /* Danger/Error Colors */
-  --wg-danger-color: var(--base-danger-color, #d13438);
-  --wg-danger-bg-light: var(--base-danger-bg-light, #fde7e9);
+  --wg-danger-color: var(--base-danger-color, light-dark(#d13438, #f87c86));
+  --wg-danger-bg-light: var(--base-danger-bg-light, light-dark(#fde7e9, #442726));
 
-  /* Hover/Active States */
-  --wg-hover-bg: var(--base-hover-bg, #f0f0f0);
-  --wg-active-bg: var(--base-hover-bg, #e0e0e0);
+  /* Hover/Active States
+     Adaptive via color-mix so the highlight stays visible in both light and dark
+     modes (always steps toward the text color). The flat-color fallback in
+     --base-main-bg ensures the mix has a valid second operand even when the
+     consumer hasn't set any --base-* vars. */
+  --wg-hover-bg: var(--base-hover-bg, color-mix(in srgb, var(--wg-text-color-1) 8%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));
+  --wg-active-bg: var(--base-active-bg, color-mix(in srgb, var(--wg-text-color-1) 14%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));
 
   /* ==========================================================================
      TYPOGRAPHY
@@ -113,7 +123,7 @@
   /* ==========================================================================
      TABLE COMPONENT
      ========================================================================== */
-  --wg-table-bg: var(--wg-surface-1);
+  --wg-table-bg: var(--wg-main-bg);
   --wg-table-border: 1px solid var(--wg-border-color);
   --wg-row-number-width: calc(4.0 * var(--wg-rem));
   --wg-actions-column-width: calc(3.2 * var(--wg-rem));
@@ -121,9 +131,9 @@
   /* ==========================================================================
      HEADER COMPONENT
      ========================================================================== */
-  --wg-header-bg: var(--wg-surface-2);
-  --wg-header-bg-hover: var(--wg-surface-3);
-  --wg-header-bg-sorted: var(--wg-surface-3);
+  --wg-header-bg: var(--wg-elevated-bg);
+  --wg-header-bg-hover: var(--wg-hover-bg);
+  --wg-header-bg-sorted: var(--wg-hover-bg);
   --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 */
@@ -143,20 +153,20 @@
   --wg-cell-splitter-color: var(--wg-border-color);
   --wg-cell-splitter-width: 1px;
   --wg-cell-bg-hover: var(--wg-hover-bg);
-  --wg-cell-bg-editing: var(--wg-surface-1);
-  --wg-cell-readonly-bg: var(--base-disabled-bg, var(--wg-surface-2));
+  --wg-cell-bg-editing: var(--wg-main-bg);
+  --wg-cell-readonly-bg: var(--base-disabled-bg, var(--wg-elevated-bg));
 
   /* ==========================================================================
      ROW COMPONENT
      ========================================================================== */
   --wg-row-border: 1px solid var(--wg-border-color);
-  --wg-row-bg-even: var(--wg-surface-2);
-  --wg-row-bg-hover: var(--wg-surface-3);
+  --wg-row-bg-even: var(--wg-elevated-bg);
+  --wg-row-bg-hover: var(--wg-hover-bg);
 
   /* ==========================================================================
      FILTER ROW
      ========================================================================== */
-  --wg-filter-bg: var(--wg-surface-1);
+  --wg-filter-bg: var(--wg-main-bg);
   --wg-filter-border: 1px solid var(--wg-border-color);
   --wg-filter-padding: var(--wg-spacing-xs) var(--wg-spacing-sm);
 
@@ -181,14 +191,14 @@
      ========================================================================== */
   --wg-pagination-padding: var(--wg-spacing-md);
   --wg-pagination-gap: calc(1.6 * var(--wg-rem));
-  --wg-pagination-bg: var(--wg-surface-1);
+  --wg-pagination-bg: var(--wg-main-bg);
   --wg-pagination-border: 1px solid var(--wg-border-color);
 
   /* Pagination Button */
   --wg-pagination-btn-padding: calc(0.6 * var(--wg-rem)) calc(1.6 * var(--wg-rem));
-  --wg-pagination-btn-bg: var(--wg-surface-1);
-  --wg-pagination-btn-bg-hover: var(--wg-surface-2);
-  --wg-pagination-btn-bg-active: var(--wg-surface-3);
+  --wg-pagination-btn-bg: var(--wg-main-bg);
+  --wg-pagination-btn-bg-hover: var(--wg-elevated-bg);
+  --wg-pagination-btn-bg-active: var(--wg-hover-bg);
   --wg-pagination-btn-border: 1px solid var(--wg-border-color);
   --wg-pagination-btn-border-hover: 1px solid var(--wg-border-color-hover);
   --wg-pagination-btn-border-radius: var(--wg-border-radius-sm);
@@ -212,15 +222,15 @@
   /* ==========================================================================
      DIRTY INDICATOR (unsaved changes)
      ========================================================================== */
-  --wg-dirty-indicator-color: #ed8b00;
+  --wg-dirty-indicator-color: light-dark(#ed8b00, #ffa940);
   --wg-dirty-indicator-size: 6px;
-  --wg-dirty-cell-bg: rgba(237, 139, 0, 0.08);
-  --wg-dirty-row-number-border-color: #ed8b00;
+  --wg-dirty-cell-bg: light-dark(rgba(237, 139, 0, 0.08), rgba(255, 169, 64, 0.12));
+  --wg-dirty-row-number-border-color: light-dark(#ed8b00, #ffa940);
 
   /* ==========================================================================
      EDITOR
      ========================================================================== */
-  --wg-editor-bg: var(--wg-surface-1);
+  --wg-editor-bg: var(--wg-main-bg);
   --wg-editor-outline: 2px solid var(--wg-accent-color);
   --wg-editor-outline-offset: -2px;
   --wg-editor-validating-opacity: 0.7;
@@ -242,7 +252,7 @@
   /* ==========================================================================
      ROW TOOLBAR
      ========================================================================== */
-  --wg-toolbar-bg: var(--wg-surface-floating);
+  --wg-toolbar-bg: var(--wg-dropdown-bg);
   --wg-toolbar-border: 1px solid var(--wg-border-color);
   --wg-toolbar-border-radius: var(--wg-border-radius-sm);
   --wg-toolbar-shadow: var(--base-dropdown-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
@@ -272,9 +282,12 @@
 
   /* ==========================================================================
      TOOLTIP
-     ========================================================================== */
-  --wg-tooltip-bg: var(--base-tooltip-bg, #333);
-  --wg-tooltip-color: var(--base-tooltip-color, #fff);
+     ==========================================================================
+     Tooltip is inverse-colored (light text on dark bg in light mode; flips in
+     dark mode). Primary lookup is --base-tooltip-bg; falls back through the
+     new --base-inverse-bg from the unified cross-component taxonomy. */
+  --wg-tooltip-bg: var(--base-tooltip-bg, var(--base-inverse-bg, light-dark(#333333, #f5f5f5)));
+  --wg-tooltip-color: var(--base-tooltip-color, light-dark(#ffffff, #1a1a1a));
   --wg-tooltip-max-width: 300px;
   --wg-tooltip-arrow-size: 8px;
 
@@ -324,13 +337,13 @@
   /* ==========================================================================
      ROW LOCKING
      ========================================================================== */
-  --wg-row-locked-bg: var(--base-disabled-bg, var(--wg-surface-2));
+  --wg-row-locked-bg: var(--base-disabled-bg, var(--wg-elevated-bg));
   --wg-row-locked-opacity: 0.7;
 
   /* ==========================================================================
      FREEZE PANES (Sticky Columns)
      ========================================================================== */
-  --wg-frozen-column-bg: var(--wg-surface-1);
+  --wg-frozen-column-bg: var(--wg-main-bg);
   --wg-frozen-header-bg: color-mix(in srgb, var(--wg-accent-color) 8%, 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 */
@@ -351,7 +364,7 @@
      FILL HANDLE (Excel-like autofill)
      ========================================================================== */
   --wg-fill-handle-size: 8px;
-  --wg-fill-handle-bg: var(--wg-surface-1);
+  --wg-fill-handle-bg: var(--wg-main-bg);
   --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);

package/src/css/_dark-mode.css

@@ -1,93 +0,0 @@
-/* ==============================================================================
-   DARK MODE / LIGHT MODE SUPPORT
-   ==============================================================================
-   Dark mode is controlled by:
-   1. OS preference: @media (prefers-color-scheme: dark)
-   2. data-theme="dark" on host or ancestor (via :host-context)
-   3. data-bs-theme="dark" (Bootstrap 5.3+) on host or ancestor
-   4. .dark class on host or ancestor (Tailwind CSS convention)
-
-   Light mode override (overrides OS dark preference):
-   1. data-theme="light" on host or ancestor (via :host-context)
-   2. data-bs-theme="light" (Bootstrap 5.3+) on host or ancestor
-   3. .light class on host or ancestor (Tailwind CSS convention)
-
-   NOTE: Ancestor matching uses :host-context() because shadow DOM stylesheets
-   cannot see elements outside the shadow boundary with regular selectors.
-*/
-@media (prefers-color-scheme: dark) {
-  :host {
-    --wg-surface-1: #1f1f1f;
-    --wg-surface-2: #2b2b2b;
-    --wg-surface-3: #333333;
-    --wg-surface-floating: #2b2b2b;
-    --wg-text-color-1: #e0e0e0;
-    --wg-text-color-2: #c0c0c0;
-    --wg-text-color-3: #a0a0a0;
-    --wg-border-color: #3d3d3d;
-    --wg-border-color-hover: #5a5a5a;
-    --wg-input-bg: #1f1f1f;
-    --wg-input-border: 1px solid #5a5a5a;
-    --wg-hover-bg: #3a3a3a;
-    --wg-active-bg: #4a4a4a;
-    --wg-danger-bg-light: #442726;
-    --wg-danger-color: #f87c86;
-    --wg-dirty-indicator-color: #ffa940;
-    --wg-dirty-cell-bg: rgba(255, 169, 64, 0.12);
-    --wg-dirty-row-number-border-color: #ffa940;
-  }
-}
-
-/* Explicit dark mode via data-theme, data-bs-theme attribute, or .dark class */
-:host([data-theme="dark"]),
-:host-context([data-theme="dark"]),
-:host([data-bs-theme="dark"]),
-:host-context([data-bs-theme="dark"]),
-:host-context(.dark) {
-  --wg-surface-1: #1f1f1f;
-  --wg-surface-2: #2b2b2b;
-  --wg-surface-3: #333333;
-  --wg-surface-floating: #2b2b2b;
-  --wg-text-color-1: #e0e0e0;
-  --wg-text-color-2: #c0c0c0;
-  --wg-text-color-3: #a0a0a0;
-  --wg-border-color: #3d3d3d;
-  --wg-border-color-hover: #5a5a5a;
-  --wg-input-bg: #1f1f1f;
-  --wg-input-border: 1px solid #5a5a5a;
-  --wg-hover-bg: #3a3a3a;
-  --wg-active-bg: #4a4a4a;
-  --wg-danger-bg-light: #442726;
-  --wg-danger-color: #f87c86;
-  --wg-dirty-indicator-color: #ffa940;
-  --wg-dirty-row-number-border-color: #ffa940;
-}
-
-/* ==============================================================================
-   EXPLICIT LIGHT MODE OVERRIDE
-   ==============================================================================
-   When the app forces light mode (e.g. via data-theme="light" on <html> or <body>),
-   these selectors override the OS dark mode media query above by restoring the
-   --base-* fallback chain from _variables.css.
-*/
-:host([data-theme="light"]),
-:host-context([data-theme="light"]),
-:host([data-bs-theme="light"]),
-:host-context([data-bs-theme="light"]),
-:host-context(.light) {
-  --wg-surface-1: var(--base-main-bg, #ffffff);
-  --wg-surface-2: var(--base-elevated-bg, #f5f5f5);
-  --wg-surface-3: var(--base-hover-bg, #ebebeb);
-  --wg-surface-floating: var(--base-dropdown-bg, var(--base-main-bg, #ffffff));
-  --wg-text-color-1: var(--base-text-color-1, #242424);
-  --wg-text-color-2: var(--base-text-color-2, #424242);
-  --wg-text-color-3: var(--base-text-color-3, #707070);
-  --wg-border-color: var(--base-border-color, #e0e0e0);
-  --wg-border-color-hover: var(--base-border-color, #d1d1d1);
-  --wg-input-bg: var(--base-input-bg, #ffffff);
-  --wg-input-border: var(--base-input-border, 1px solid #d1d1d1);
-  --wg-hover-bg: var(--base-hover-bg, #f0f0f0);
-  --wg-active-bg: var(--base-hover-bg, #e0e0e0);
-  --wg-danger-bg-light: var(--base-danger-bg-light, #fde7e9);
-  --wg-danger-color: var(--base-danger-color, #d13438);
-}

package/src/css/_tree.css

@@ -1,73 +0,0 @@
-/* ==============================================================================
-   TREE COLUMN
-   ==============================================================================
-   Indent + chevron rendered inside a cell when column.isTree is true.
-   The chevron is absolutely positioned so it can't affect row height; the
-   wrapper's padding-left reserves space for (level * indent + chevron + gap).
-*/
-
-:host {
-  --wg-tree-indent: 1.6rem;        /* per-level indent */
-  --wg-tree-chevron-size: 1.6rem;  /* chevron width/height */
-  --wg-tree-chevron-color: var(--wg-text-color-2);
-  --wg-tree-chevron-gap: var(--wg-spacing-xs);
-}
-
-.wg__tree-cell {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  /* padding-left + width: 100% would overflow the cell with content-box; force
-     padding to be included in the width so the wrapper exactly fills the cell. */
-  box-sizing: border-box;
-  /* Fill the cell vertically so clicks anywhere inside the cell land on the
-     wrapper, not the cell's padding band. Helps for the dblclick-toggle hit area. */
-  min-height: 100%;
-}
-
-.wg__tree-cell-content {
-  overflow: hidden;
-  text-overflow: inherit;
-  white-space: inherit;
-}
-
-.wg__tree-chevron {
-  position: absolute;
-  top: 50%;
-  /* `left` is set inline by JS = level * indent */
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--wg-tree-chevron-size);
-  height: var(--wg-tree-chevron-size);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--wg-tree-chevron-color);
-  font-size: 0.9em;
-  line-height: 1;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 3px;
-}
-
-.wg__tree-chevron:hover:not(.wg__tree-chevron--leaf) {
-  background: var(--wg-hover-bg);
-}
-
-.wg__tree-chevron--leaf {
-  cursor: default;
-  pointer-events: none;
-  background: transparent;
-}
-
-/* While the cell is being edited, let the editor absolute-fill the <td> as it
-   normally does. The chevron/indent are visual aids for display mode; they come
-   back when editing ends. */
-.wg__cell--editing .wg__tree-chevron {
-  display: none;
-}
-.wg__cell--editing .wg__tree-cell {
-  display: contents;  /* wrapper disappears from layout */
-}