@keenmate/web-grid 1.0.0-rc02

package/src/css/_variables.css

@@ -0,0 +1,265 @@
+/* ==============================================================================
+   CSS CUSTOM PROPERTIES (:host level)
+   ==============================================================================
+   This file defines all CSS custom properties at the :host level, making them:
+   - Inspectable in browser DevTools
+   - Overridable from outside Shadow DOM
+   - Self-documenting in compiled CSS
+
+   Usage from outside Shadow DOM:
+     web-grid {
+       --wg-accent-color: #0078d4;
+       --wg-header-bg: #f5f5f5;
+     }
+   ============================================================================== */
+
+:host {
+  /* ==========================================================================
+     BASE SIZING UNIT
+     ==========================================================================
+     All sizing values are based on this unit for consistent scaling.
+     Default: 10px produces standard pixel values
+     Pure Admin: Set to 1rem (inherits from html { font-size: 10px })
+     Custom: Set to any value to scale all sizes proportionally */
+  --wg-rem: 10px;
+
+  /* ==========================================================================
+     FONT FAMILY (set at :host so all shadow DOM content inherits)
+     ========================================================================== */
+  font-family: var(--wg-font-family, var(--base-font-family, system-ui, -apple-system, sans-serif));
+
+  /* ==========================================================================
+     HOST ELEMENT SIZING
+     ========================================================================== */
+  display: block;
+
+  /* ==========================================================================
+     COLORS & THEME
+     ==========================================================================
+     Color variables follow this priority chain:
+       1. External override: --wg-accent-color: #custom
+       2. Base theme value: var(--base-accent-color)
+       3. Hardcoded default fallback */
+
+  /* Accent Colors */
+  --wg-accent-color: var(--base-accent-color, #0078d4);
+  --wg-accent-color-hover: var(--base-accent-color-hover, #106ebe);
+  --wg-accent-color-active: var(--base-accent-color-active, #005a9e);
+  --wg-accent-color-light: var(--base-accent-color-light, #e6f2ff);
+
+  /* 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);
+  --wg-text-on-accent: var(--base-text-on-accent, #ffffff);
+
+  /* Background/Surface Colors */
+  --wg-surface-1: var(--base-surface-1, #ffffff);
+  --wg-surface-2: var(--base-surface-2, #f5f5f5);
+  --wg-surface-3: var(--base-surface-3, #ebebeb);
+  --wg-surface-floating: var(--base-dropdown-bg, var(--base-surface-1, #ffffff));
+
+  /* Border Colors */
+  --wg-border-color: var(--base-border-color, #e0e0e0);
+  --wg-border-color-hover: var(--base-border-color, #d1d1d1);
+
+  /* Input Colors */
+  --wg-input-bg: var(--base-input-bg, #ffffff);
+  --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-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);
+
+  /* Danger/Error Colors */
+  --wg-danger-color: var(--base-danger-color, #d13438);
+  --wg-danger-bg-light: var(--base-danger-bg-light, #fde7e9);
+
+  /* Hover/Active States */
+  --wg-hover-bg: var(--base-surface-3, #f0f0f0);
+  --wg-active-bg: var(--base-surface-3, #e0e0e0);
+
+  /* ==========================================================================
+     TYPOGRAPHY
+     ========================================================================== */
+  --wg-font-size-base: calc(var(--base-font-size-base, 1.4) * var(--wg-rem));
+  --wg-font-size-sm: calc(var(--base-font-size-sm, 1.2) * var(--wg-rem));
+  --wg-font-size-xs: calc(var(--base-font-size-xs, 1.1) * var(--wg-rem));
+  --wg-font-size-lg: calc(var(--base-font-size-lg, 1.6) * var(--wg-rem));
+
+  --wg-line-height-base: calc(var(--base-line-height-normal, 2) * var(--wg-rem));
+  --wg-font-weight-normal: var(--base-font-weight-normal, 400);
+  --wg-font-weight-semibold: var(--base-font-weight-semibold, 600);
+
+  /* ==========================================================================
+     BORDER RADIUS
+     ========================================================================== */
+  --wg-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * var(--wg-rem));
+  --wg-border-radius-md: calc(var(--base-border-radius-md, 0.6) * var(--wg-rem));
+  --wg-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * var(--wg-rem));
+
+  /* ==========================================================================
+     SPACING (10px-based for clean pixel values)
+     ========================================================================== */
+  --wg-spacing-xs: calc(0.4 * var(--wg-rem));   /* 4px */
+  --wg-spacing-sm: calc(0.8 * var(--wg-rem));   /* 8px */
+  --wg-spacing-md: calc(1.2 * var(--wg-rem));   /* 12px */
+  --wg-spacing-lg: calc(1.6 * var(--wg-rem));   /* 16px */
+  --wg-spacing-xl: calc(2.4 * var(--wg-rem));   /* 24px */
+
+  /* ==========================================================================
+     TABLE COMPONENT
+     ========================================================================== */
+  --wg-table-bg: var(--wg-surface-1);
+  --wg-table-border: 1px solid var(--wg-border-color);
+
+  /* ==========================================================================
+     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-color: var(--wg-text-color-1);
+  --wg-header-border: 2px solid var(--wg-border-color);
+  --wg-header-padding: var(--wg-spacing-sm) var(--wg-spacing-md);
+  --wg-header-font-weight: var(--wg-font-weight-semibold);
+
+  /* ==========================================================================
+     CELL COMPONENT
+     ========================================================================== */
+  --wg-cell-padding: var(--wg-spacing-sm) var(--wg-spacing-md);
+  --wg-cell-color: var(--wg-text-color-1);
+  --wg-cell-border: 1px solid var(--wg-border-color);
+  --wg-cell-bg-hover: var(--wg-hover-bg);
+  --wg-cell-bg-editing: var(--wg-surface-1);
+  --wg-cell-readonly-bg: var(--wg-surface-2);
+
+  /* ==========================================================================
+     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);
+
+  /* ==========================================================================
+     FILTER ROW
+     ========================================================================== */
+  --wg-filter-bg: var(--wg-surface-1);
+  --wg-filter-border: 1px solid var(--wg-border-color);
+  --wg-filter-padding: var(--wg-spacing-xs) var(--wg-spacing-sm);
+
+  /* Filter Input */
+  --wg-filter-input-padding: calc(0.4 * var(--wg-rem)) calc(0.8 * var(--wg-rem));
+  --wg-filter-input-bg: var(--wg-input-bg);
+  --wg-filter-input-border: var(--wg-input-border);
+  --wg-filter-input-border-focus: var(--wg-input-border-focus);
+  --wg-filter-input-border-radius: var(--wg-border-radius-sm);
+  --wg-filter-input-font-size: var(--wg-font-size-sm);
+
+  /* ==========================================================================
+     SORT INDICATOR
+     ========================================================================== */
+  --wg-sort-indicator-size: calc(1.4 * var(--wg-rem));
+  --wg-sort-indicator-opacity: 0.9;
+  --wg-sort-placeholder-opacity: 0.3;
+  --wg-sort-priority-size: calc(1.1 * var(--wg-rem));
+
+  /* ==========================================================================
+     PAGINATION
+     ========================================================================== */
+  --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-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-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);
+  --wg-pagination-btn-disabled-opacity: 0.4;
+
+  /* ==========================================================================
+     EMPTY STATE
+     ========================================================================== */
+  --wg-empty-padding: var(--wg-spacing-xl);
+  --wg-empty-color: var(--wg-text-color-3);
+
+  /* ==========================================================================
+     VALIDATION / ERROR
+     ========================================================================== */
+  --wg-error-cell-bg: var(--wg-danger-bg-light);
+  --wg-error-cell-border: 1px solid var(--wg-danger-color);
+  --wg-error-message-color: var(--wg-danger-color);
+  --wg-error-message-font-size: var(--wg-font-size-xs);
+  --wg-error-indicator-color: var(--wg-danger-color);
+
+  /* ==========================================================================
+     EDITOR
+     ========================================================================== */
+  --wg-editor-bg: var(--wg-surface-1);
+  --wg-editor-outline: 2px solid var(--wg-accent-color);
+  --wg-editor-outline-offset: -2px;
+  --wg-editor-validating-opacity: 0.7;
+
+  /* Dropdown Toggle */
+  --wg-dropdown-toggle-right: var(--wg-spacing-md);
+  --wg-dropdown-toggle-size: calc(1.2 * var(--wg-rem));
+  --wg-dropdown-toggle-hitbox: calc(2.4 * var(--wg-rem));
+
+  /* ==========================================================================
+     ROW TOOLBAR
+     ========================================================================== */
+  --wg-toolbar-bg: var(--wg-surface-floating);
+  --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));
+  --wg-toolbar-divider-color: var(--wg-border-color);
+
+  /* Toolbar Button */
+  --wg-toolbar-btn-min-width: calc(2.4 * var(--wg-rem));
+  --wg-toolbar-btn-padding: 0 calc(0.4 * var(--wg-rem));
+  --wg-toolbar-btn-border-radius: var(--wg-border-radius-sm);
+  --wg-toolbar-btn-bg-hover: var(--wg-hover-bg);
+  --wg-toolbar-btn-bg-active: var(--wg-active-bg);
+  --wg-toolbar-btn-color: var(--wg-text-color-1);
+
+  /* Toolbar Trigger Button */
+  --wg-toolbar-trigger-color: var(--wg-text-color-3);
+  --wg-toolbar-trigger-color-hover: var(--wg-text-color-1);
+  --wg-toolbar-trigger-bg-hover: var(--wg-hover-bg);
+
+  /* ==========================================================================
+     TOOLTIP
+     ========================================================================== */
+  --wg-tooltip-bg: var(--base-tooltip-bg, #333);
+
+  /* ==========================================================================
+     CONTEXT MENU
+     ========================================================================== */
+  --wg-context-menu-z-index: 1001;
+  --wg-context-menu-min-width: calc(16 * var(--wg-rem));
+
+  /* ==========================================================================
+     NAVIGATE MODE
+     ========================================================================== */
+  --wg-focus-outline: 2px solid var(--wg-accent-color);
+  --wg-focus-outline-offset: -2px;
+  --wg-focus-bg: var(--wg-hover-bg);
+
+  /* ==========================================================================
+     TRANSITIONS
+     ========================================================================== */
+  --wg-transition-fast: 0.1s ease;
+  --wg-transition-normal: 0.15s ease;
+
+  /* ==========================================================================
+     Z-INDEX LAYERS
+     ========================================================================== */
+  --wg-z-dropdown: 9999;
+  --wg-z-toolbar: 1000;
+  --wg-z-context-menu: 1001;
+}

package/src/css/_virtual-scroll.css

@@ -0,0 +1,24 @@
+/* ==============================================================================
+   VIRTUAL SCROLL
+   ==============================================================================
+   Virtualization support for large datasets
+*/
+
+.wg--virtual-scroll {
+  /* No special container styles needed, spacers handle sizing */
+}
+
+/* Spacer rows - invisible rows that maintain scroll height */
+.wg__spacer-top,
+.wg__spacer-bottom {
+  /* Height is set inline via style attribute */
+}
+
+.wg__spacer-top td,
+.wg__spacer-bottom td {
+  padding: 0;
+  border: none;
+  background: transparent;
+  height: inherit;  /* Inherit height from parent TR */
+  line-height: 0;   /* Prevent any text/content from affecting height */
+}

package/src/css/main.css

@@ -0,0 +1,35 @@
+/* ==============================================================================
+   WEB GRID COMPONENT - MAIN ENTRY POINT
+   ==============================================================================
+   Framework-agnostic data grid web component
+
+   File structure:
+   - _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
+   - _cells.css        : Cells, editable states, editing, validation
+   - _editors.css      : All editor types (text, number, date, combobox, etc)
+   - _dropdown.css     : Dropdown menus, select triggers
+   - _navigation.css   : Keyboard navigation, focus states
+   - _pagination.css   : Pagination controls, summary, footer
+   - _toolbar.css      : Row toolbar styles
+   - _modifiers.css    : Striped rows, hover effects, empty state
+   - _dialogs.css      : Tooltips, go-to dialog
+   - _virtual-scroll.css : Virtual scroll support
+   - _dark-mode.css    : Dark mode overrides
+*/
+
+/* Import all partials in dependency order */
+@import '_variables.css';
+@import '_table.css';
+@import '_header.css';
+@import '_cells.css';
+@import '_editors.css';
+@import '_dropdown.css';
+@import '_navigation.css';
+@import '_pagination.css';
+@import '_toolbar.css';
+@import '_modifiers.css';
+@import '_dialogs.css';
+@import '_virtual-scroll.css';
+@import '_dark-mode.css';