@keenmate/web-grid 1.0.0-rc02

package/src/css/_header.css

@@ -0,0 +1,105 @@
+/* ==============================================================================
+   HEADER
+   ==============================================================================
+   Table header, sorting indicators, and filter row
+*/
+
+.wg__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--wg-header-bg);
+  color: var(--wg-header-color);
+  font-weight: var(--wg-header-font-weight);
+  padding: var(--wg-header-padding);
+  border-bottom: var(--wg-header-border);
+  text-align: left;
+  user-select: none;
+}
+
+.wg__header--sortable {
+  cursor: pointer;
+}
+
+.wg__header--sortable:hover {
+  background: var(--wg-header-bg-hover);
+}
+
+.wg__header--sorted {
+  background: var(--wg-header-bg-sorted);
+}
+
+/* Header Content Layout */
+.wg__header-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: space-between;
+}
+
+.wg__header-title {
+  flex: 1;
+}
+
+/* Sort Indicator */
+.wg__sort-indicator {
+  font-size: var(--wg-sort-indicator-size);
+  opacity: var(--wg-sort-indicator-opacity);
+  min-width: 16px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+}
+
+.wg__sort-placeholder {
+  opacity: var(--wg-sort-placeholder-opacity);
+}
+
+.wg__sort-priority {
+  font-size: var(--wg-sort-priority-size);
+  font-weight: 600;
+  margin-left: 2px;
+  vertical-align: super;
+  line-height: 1;
+}
+
+/* Header Info Icon */
+.wg__header-info {
+  display: inline-flex;
+  align-items: center;
+  color: var(--wg-accent-color);
+  cursor: help;
+  opacity: 0.7;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.wg__header-info:hover {
+  opacity: 1;
+}
+
+/* ==============================================================================
+   FILTER ROW
+   ============================================================================== */
+.wg__filter-row th {
+  padding: var(--wg-filter-padding);
+  background: var(--wg-filter-bg);
+  border-bottom: var(--wg-filter-border);
+}
+
+.wg__filter-input {
+  width: 100%;
+  padding: var(--wg-filter-input-padding);
+  border: var(--wg-filter-input-border);
+  border-radius: var(--wg-filter-input-border-radius);
+  background: var(--wg-surface-1);
+  color: var(--wg-text-color-1);
+  font-size: var(--wg-filter-input-font-size);
+  box-sizing: border-box;
+}
+
+.wg__filter-input:focus {
+  outline: none;
+  border: var(--wg-filter-input-border-focus);
+  box-shadow: 0 0 0 1px var(--wg-accent-color);
+}

package/src/css/_modifiers.css

@@ -0,0 +1,36 @@
+/* ==============================================================================
+   MODIFIERS
+   ==============================================================================
+   Table style modifiers: striped rows, hoverable rows, empty state
+*/
+
+/* Striped rows */
+.wg--striped tbody tr:nth-child(even) {
+  background: var(--wg-row-bg-even);
+}
+
+/* Hoverable rows */
+.wg--hoverable tbody tr:hover {
+  background: var(--wg-row-bg-hover);
+}
+
+/* ==============================================================================
+   EMPTY STATE
+   ============================================================================== */
+.wg__empty {
+  text-align: center;
+  padding: var(--wg-empty-padding);
+  color: var(--wg-empty-color);
+  font-style: italic;
+}
+
+/* ==============================================================================
+   LOADING STATE
+   ============================================================================== */
+/* Loading indicator at the bottom (optional - consumer can style their own) */
+.wg__loading-more {
+  text-align: center;
+  padding: var(--wg-cell-padding);
+  color: var(--wg-text-color-2);
+  font-size: var(--wg-font-size-sm);
+}

package/src/css/_navigation.css

@@ -0,0 +1,25 @@
+/* ==============================================================================
+   NAVIGATE MODE (keyboard navigation)
+   ==============================================================================
+   Excel-like keyboard navigation and focus states
+*/
+
+.wg--navigate-mode .wg__cell {
+  cursor: cell;
+}
+
+/* Remove browser default focus outline - we handle it with .wg__cell--focused */
+.wg--navigate-mode .wg__cell:focus {
+  outline: none;
+}
+
+/* Focused cell styling - Excel-like green border for ALL cells */
+.wg--navigate-mode .wg__cell.wg__cell--focused {
+  outline: 2px solid var(--wg-focus-border-color, #217346);
+  outline-offset: -2px;
+}
+
+/* Hide hover border when cell is focused */
+.wg__cell--focused::after {
+  display: none;
+}

package/src/css/_pagination.css

@@ -0,0 +1,156 @@
+/* ==============================================================================
+   PAGINATION
+   ==============================================================================
+   Pagination controls, summary, and footer wrapper
+*/
+
+.wg__pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wg-pagination-gap);
+  padding: var(--wg-pagination-padding);
+  border-top: var(--wg-pagination-border);
+  background: var(--wg-pagination-bg);
+}
+
+.wg__pagination-btn {
+  padding: var(--wg-pagination-btn-padding);
+  background: var(--wg-pagination-btn-bg);
+  border: var(--wg-pagination-btn-border);
+  border-radius: var(--wg-pagination-btn-border-radius);
+  color: var(--wg-cell-color);
+  font-size: var(--wg-font-size-base);
+  cursor: pointer;
+  transition: all var(--wg-transition-fast);
+}
+
+.wg__pagination-btn:hover:not(:disabled) {
+  background: var(--wg-pagination-btn-bg-hover);
+  border: var(--wg-pagination-btn-border-hover);
+}
+
+.wg__pagination-btn:active:not(:disabled) {
+  background: var(--wg-pagination-btn-bg-active);
+}
+
+.wg__pagination-btn:disabled {
+  opacity: var(--wg-pagination-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.wg__pagination-info {
+  font-size: var(--wg-font-size-base);
+  color: var(--wg-cell-color);
+}
+
+.wg__pagination-count {
+  font-size: var(--wg-font-size-sm);
+  color: var(--wg-text-color-3);
+  margin-left: 4px;
+}
+
+.wg__pagination-pagesize {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wg__pagination-select {
+  padding: 4px 8px;
+  background: var(--wg-pagination-btn-bg);
+  border: var(--wg-pagination-btn-border);
+  border-radius: var(--wg-pagination-btn-border-radius);
+  color: var(--wg-cell-color);
+  font-size: var(--wg-font-size-base);
+  cursor: pointer;
+}
+
+.wg__pagination-select:hover {
+  background: var(--wg-pagination-btn-bg-hover);
+  border: var(--wg-pagination-btn-border-hover);
+}
+
+.wg__pagination-select:focus {
+  outline: 2px solid var(--wg-accent-color);
+  outline-offset: -2px;
+}
+
+.wg__pagination-label {
+  font-size: var(--wg-font-size-sm);
+  color: var(--wg-text-color-3);
+}
+
+/* Pagination alignment modifiers */
+.wg__pagination--left {
+  justify-content: flex-start;
+}
+
+.wg__pagination--right {
+  justify-content: flex-end;
+}
+
+/* Top pagination: border on bottom instead of top */
+.wg__pagination--top {
+  border-top: none;
+  border-bottom: var(--wg-pagination-border);
+}
+
+/* ==============================================================================
+   SUMMARY
+   ============================================================================== */
+.wg__summary {
+  display: flex;
+  align-items: center;
+  padding: var(--wg-pagination-padding);
+  border-top: var(--wg-pagination-border);
+  background: var(--wg-pagination-bg);
+  font-size: var(--wg-font-size-base);
+  color: var(--wg-cell-color);
+}
+
+.wg__summary--left {
+  justify-content: flex-start;
+}
+
+.wg__summary--right {
+  justify-content: flex-end;
+}
+
+.wg__summary--top {
+  border-top: none;
+  border-bottom: var(--wg-pagination-border);
+}
+
+/* ==============================================================================
+   FOOTER (wrapper for summary + pagination at same position)
+   ============================================================================== */
+.wg__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: var(--wg-pagination-border);
+  background: var(--wg-pagination-bg);
+}
+
+.wg__footer--top {
+  border-top: none;
+  border-bottom: var(--wg-pagination-border);
+}
+
+/* When inside footer, remove individual borders */
+.wg__footer .wg__summary,
+.wg__footer .wg__pagination {
+  border: none;
+}
+
+/* Summary is on left in footer */
+.wg__footer .wg__summary {
+  flex: 0 0 auto;
+}
+
+/* Pagination aligns to right in footer */
+.wg__footer .wg__pagination {
+  flex: 0 0 auto;
+  margin-left: auto;
+}

package/src/css/_table.css

@@ -0,0 +1,90 @@
+/* ==============================================================================
+   TABLE STRUCTURE
+   ==============================================================================
+   Core table container and layout
+*/
+
+/* ==============================================================================
+   FOUC PREVENTION
+   ==============================================================================
+   Prevent Flash of Unstyled Content by hiding undefined custom elements
+   Keep element visible to prevent layout shift, but hide any text content
+*/
+web-grid:not(:defined) {
+  display: block;
+  min-height: calc(10 * var(--wg-rem));
+  color: transparent !important;
+  background: transparent;
+}
+
+/* ==============================================================================
+   CONTAINER
+   ============================================================================== */
+.wg {
+  position: relative;
+  width: 100%;
+  max-height: inherit;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: var(--wg-table-border);
+}
+
+/* ==============================================================================
+   TABLE
+   ============================================================================== */
+.wg__table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  background: var(--wg-table-bg);
+  font-size: var(--wg-font-size-base);
+  line-height: var(--wg-line-height-base);
+}
+
+/* ==============================================================================
+   ROWS
+   ============================================================================== */
+.wg__table tbody tr {
+  border-bottom: var(--wg-row-border);
+}
+
+/* ==============================================================================
+   ROW NUMBER COLUMN
+   ============================================================================== */
+.wg__row-number-header,
+.wg__row-number {
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  text-align: center;
+  color: var(--wg-text-color-secondary);
+  background: var(--wg-header-bg);
+  user-select: none;
+  font-size: var(--wg-font-size-sm);
+}
+
+.wg__row-number {
+  border-right: var(--wg-cell-border);
+}
+
+/* ==============================================================================
+   ACTIONS COLUMN (for button trigger mode)
+   ============================================================================== */
+.wg__actions-column {
+  width: 32px;
+  min-width: 32px;
+  max-width: 32px;
+  padding: 0 !important;
+  text-align: center;
+}
+
+thead .wg__actions-column {
+  background: var(--wg-header-bg);
+  border-bottom: var(--wg-header-border);
+}
+
+.wg__filter-row .wg__actions-column {
+  background: var(--wg-filter-bg);
+  border-bottom: var(--wg-filter-border);
+}

package/src/css/_toolbar.css

@@ -0,0 +1,139 @@
+/* ==============================================================================
+   ROW TOOLBAR STYLES
+   Floating row action toolbar
+   ============================================================================== */
+
+.wg__toolbar-container {
+	position: fixed;
+	z-index: var(--wg-z-toolbar, 1000);
+}
+
+.wg__toolbar {
+	display: flex;
+	flex-direction: column-reverse;
+	gap: 0;
+	padding: 0;
+	background: var(--wg-toolbar-bg);
+	border: var(--wg-toolbar-border);
+	border-radius: var(--wg-toolbar-border-radius);
+	box-shadow: var(--wg-toolbar-shadow);
+}
+
+.wg__toolbar-row {
+	display: flex;
+	gap: 2px;
+	align-items: center;
+	/* Match grid row height: vertical padding (design-unit * 2 * 2) + line-height (~21px) */
+	height: calc(var(--wg-design-unit, 4) * 4px + 21px);
+	padding: 0 4px;
+}
+
+.wg__toolbar-row + .wg__toolbar-row {
+	border-top: 1px solid var(--wg-toolbar-divider-color);
+}
+
+.wg__toolbar-divider {
+	width: 1px;
+	height: 16px;
+	background: var(--wg-toolbar-divider-color);
+	margin: 0 4px;
+	flex-shrink: 0;
+}
+
+.wg__toolbar-btn {
+	min-width: var(--wg-toolbar-btn-min-width);
+	height: 100%;
+	border: none;
+	border-radius: var(--wg-toolbar-btn-border-radius);
+	background: transparent;
+	color: var(--wg-toolbar-btn-color);
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	font-size: var(--wg-font-size-base);
+	font-weight: 500;
+	padding: var(--wg-toolbar-btn-padding);
+	transition: background 0.1s ease;
+}
+
+.wg__toolbar-btn:hover {
+	background: var(--wg-toolbar-btn-bg-hover);
+}
+
+.wg__toolbar-btn:active {
+	background: var(--wg-toolbar-btn-bg-active);
+}
+
+.wg__toolbar-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
+.wg__toolbar-btn:disabled:hover {
+	background: transparent;
+}
+
+.wg__toolbar-btn--danger:hover {
+	background: var(--wg-danger-bg-light);
+	color: var(--wg-danger-color);
+}
+
+.wg__toolbar-label {
+	font-size: 12px;
+	white-space: nowrap;
+}
+
+/* ==========================================================================
+   ACTIONS COLUMN (for button trigger mode)
+   ========================================================================== */
+
+.wg__actions-column {
+	width: 24px;
+	min-width: 24px;
+	max-width: 24px;
+	padding: 0 !important;
+	text-align: center;
+}
+
+.wg__header .wg__actions-column {
+	background: var(--wg-header-bg);
+}
+
+.wg__filter-row .wg__actions-column {
+	background: var(--wg-filter-bg);
+}
+
+/* ==========================================================================
+   TOOLBAR TRIGGER BUTTON (in each row for button mode)
+   ========================================================================== */
+
+.wg__toolbar-trigger {
+	position: relative;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: var(--wg-border-radius-sm);
+	cursor: pointer;
+	font-size: var(--wg-font-size-base);
+	line-height: 1;
+	color: var(--wg-toolbar-trigger-color);
+}
+
+/* Larger invisible hitbox for easier clicking */
+.wg__toolbar-trigger::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: var(--wg-dropdown-toggle-hitbox);
+	height: 48px;
+}
+
+.wg__toolbar-trigger:hover,
+.wg__toolbar-trigger--active {
+	color: var(--wg-toolbar-trigger-color-hover);
+	background: var(--wg-toolbar-trigger-bg-hover);
+}