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

package/component-variables.manifest.json

@@ -3,191 +3,201 @@
   "component": "@keenmate/web-grid",
   "prefix": "wg",
   "baseVariables": [
-    { "name": "base-accent-color", "required": true, "usage": "Focus rings, active states, editor outline" },
-    { "name": "base-accent-color-hover", "required": false, "usage": "Hover states for accent elements" },
-    { "name": "base-accent-color-active", "required": false, "usage": "Active/pressed states" },
-    { "name": "base-accent-color-light", "required": false, "usage": "Light accent backgrounds" },
-    { "name": "base-text-color-1", "required": true, "usage": "Primary cell and header text" },
-    { "name": "base-text-color-2", "required": false, "usage": "Secondary text, subtitles" },
-    { "name": "base-text-color-3", "required": false, "usage": "Placeholder, disabled, empty state text" },
-    { "name": "base-text-color-on-accent", "required": false, "usage": "Text on accent backgrounds" },
-    { "name": "base-main-bg", "required": true, "usage": "Table background, cell background, inputs" },
-    { "name": "base-elevated-bg", "required": true, "usage": "Header background, striped rows, pagination buttons" },
-    { "name": "base-hover-bg", "required": false, "usage": "Hover states, sorted header, active buttons" },
-    { "name": "base-disabled-bg", "required": false, "usage": "Readonly/disabled cell backgrounds" },
-    { "name": "base-dropdown-bg", "required": false, "usage": "Toolbar, context menu, floating surfaces" },
-    { "name": "base-border-color", "required": true, "usage": "Table, cell, header, toolbar borders" },
-    { "name": "base-input-bg", "required": false, "usage": "Filter input, editor backgrounds" },
-    { "name": "base-input-color", "required": false, "usage": "Input text color" },
-    { "name": "base-input-border", "required": false, "usage": "Filter input border" },
-    { "name": "base-input-border-hover", "required": false, "usage": "Input border on hover" },
-    { "name": "base-input-border-focus", "required": false, "usage": "Focused input border" },
-    { "name": "base-input-placeholder-color", "required": false, "usage": "Placeholder text color" },
-    { "name": "base-dropdown-box-shadow", "required": false, "usage": "Toolbar, dropdown shadows" },
-    { "name": "base-danger-color", "required": false, "usage": "Validation error text, indicators" },
-    { "name": "base-danger-bg-light", "required": false, "usage": "Error cell background, danger button hover" },
-    { "name": "base-tooltip-bg", "required": false, "usage": "Tooltip background" },
-    { "name": "base-font-family", "required": false, "usage": "All text in grid" },
-    { "name": "base-font-size-base", "required": false, "usage": "Cell text, editor text (multiplier)" },
-    { "name": "base-font-size-sm", "required": false, "usage": "Filter input, pagination, labels (multiplier)" },
-    { "name": "base-font-size-xs", "required": false, "usage": "Error messages (multiplier)" },
-    { "name": "base-font-size-lg", "required": false, "usage": "Large text elements (multiplier)" },
-    { "name": "base-font-weight-normal", "required": false, "usage": "Normal text weight" },
-    { "name": "base-font-weight-semibold", "required": false, "usage": "Header text weight" },
-    { "name": "base-line-height-normal", "required": false, "usage": "Default line height (multiplier)" },
-    { "name": "base-border-radius-sm", "required": false, "usage": "Buttons, inputs, toolbar (multiplier)" },
-    { "name": "base-border-radius-md", "required": false, "usage": "Cards, larger elements (multiplier)" },
-    { "name": "base-border-radius-lg", "required": false, "usage": "Large rounded elements (multiplier)" }
+    { "name": "base-accent-color", "required": true, "usage": "Editor focus outline, active sort indicator, selected pagination button" },
+    { "name": "base-accent-color-hover", "required": false, "usage": "Hover state for accent-colored elements" },
+    { "name": "base-accent-color-active", "required": false, "usage": "Pressed/active state for accent-colored elements" },
+    { "name": "base-accent-color-light", "required": false, "usage": "Light accent for selected row backgrounds" },
+    { "name": "base-text-color-1", "required": true, "usage": "Primary text in cells, headers, and labels" },
+    { "name": "base-text-color-2", "required": false, "usage": "Secondary text like row numbers and help labels" },
+    { "name": "base-text-color-3", "required": false, "usage": "Muted text for placeholders, disabled states, empty messages" },
+    { "name": "base-text-color-on-accent", "required": false, "usage": "Text color on accent-colored backgrounds" },
+    { "name": "base-main-bg", "required": true, "usage": "Table body background, cell backgrounds, input fields" },
+    { "name": "base-elevated-bg", "required": true, "usage": "Header row, striped even rows, pagination bar" },
+    { "name": "base-hover-bg", "required": false, "usage": "Row hover, sorted column header, button hover states" },
+    { "name": "base-disabled-bg", "required": false, "usage": "Read-only and disabled cell backgrounds" },
+    { "name": "base-dropdown-bg", "required": false, "usage": "Floating toolbar, context menu, dropdown panels" },
+    { "name": "base-border-color", "required": true, "usage": "Table border, cell borders, header separators" },
+    { "name": "base-input-bg", "required": false, "usage": "Filter input fields, editor text inputs" },
+    { "name": "base-input-color", "required": false, "usage": "Text color in filter and editor inputs" },
+    { "name": "base-input-border", "required": false, "usage": "Filter input border (full shorthand)" },
+    { "name": "base-input-border-hover", "required": false, "usage": "Filter input border on hover" },
+    { "name": "base-input-border-focus", "required": false, "usage": "Filter input border when focused" },
+    { "name": "base-input-placeholder-color", "required": false, "usage": "Placeholder text in filter inputs" },
+    { "name": "base-dropdown-box-shadow", "required": false, "usage": "Shadow for floating toolbar, context menu" },
+    { "name": "base-danger-color", "required": false, "usage": "Validation error text, error indicator icon, danger button text" },
+    { "name": "base-danger-bg-light", "required": false, "usage": "Invalid cell background, danger button hover" },
+    { "name": "base-tooltip-bg", "required": false, "usage": "Tooltip and validation message background" },
+    { "name": "base-tooltip-color", "required": false, "usage": "Tooltip and validation message text" },
+    { "name": "base-font-family", "required": false, "usage": "All text in grid (cells, headers, buttons)" },
+    { "name": "base-font-size-base", "required": false, "usage": "Large text elements (16px default scale)" },
+    { "name": "base-font-size-sm", "required": false, "usage": "Cell text, editor text (14px default scale)" },
+    { "name": "base-font-size-xs", "required": false, "usage": "Filter input, pagination labels (12px default scale)" },
+    { "name": "base-font-size-2xs", "required": false, "usage": "Error messages, small labels (11px default scale)" },
+    { "name": "base-font-weight-normal", "required": false, "usage": "Normal text weight (400)" },
+    { "name": "base-font-weight-semibold", "required": false, "usage": "Header text, bold labels (600)" },
+    { "name": "base-line-height-normal", "required": false, "usage": "Base line height multiplier (1.5)" },
+    { "name": "base-border-radius-sm", "required": false, "usage": "Buttons, inputs, toolbar corners (4px scale)" },
+    { "name": "base-border-radius-md", "required": false, "usage": "Dialogs, cards (6px scale)" },
+    { "name": "base-border-radius-lg", "required": false, "usage": "Large rounded elements (8px scale)" }
   ],
   "componentVariables": [
-    { "name": "wg-rem", "category": "sizing", "usage": "Base sizing unit for proportional scaling (default: 10px)" },
-
-    { "name": "wg-accent-color", "category": "accent", "usage": "Primary accent color for interactive elements" },
-    { "name": "wg-accent-color-hover", "category": "accent", "usage": "Accent color on hover" },
-    { "name": "wg-accent-color-active", "category": "accent", "usage": "Accent color when pressed/active" },
-    { "name": "wg-accent-color-light", "category": "accent", "usage": "Light accent for subtle backgrounds" },
-
-    { "name": "wg-text-color-1", "category": "text", "usage": "Primary text color (headers, cell content)" },
-    { "name": "wg-text-color-2", "category": "text", "usage": "Secondary text color" },
-    { "name": "wg-text-color-3", "category": "text", "usage": "Tertiary text (placeholders, disabled)" },
-    { "name": "wg-text-on-accent", "category": "text", "usage": "Text color on accent backgrounds" },
-
-    { "name": "wg-surface-1", "category": "surface", "usage": "Primary background (table, cells)" },
-    { "name": "wg-surface-2", "category": "surface", "usage": "Secondary background (headers, striped rows)" },
-    { "name": "wg-surface-3", "category": "surface", "usage": "Tertiary background (hover states)" },
-    { "name": "wg-surface-floating", "category": "surface", "usage": "Floating elements (toolbar, dropdowns)" },
-
-    { "name": "wg-border-color", "category": "border", "usage": "Default border color" },
-    { "name": "wg-border-color-hover", "category": "border", "usage": "Border color on hover" },
-
-    { "name": "wg-input-bg", "category": "input", "usage": "Input field background" },
-    { "name": "wg-input-color", "category": "input", "usage": "Input text color" },
-    { "name": "wg-input-border", "category": "input", "usage": "Input border (full shorthand)" },
-    { "name": "wg-input-border-hover", "category": "input", "usage": "Input border on hover" },
-    { "name": "wg-input-border-focus", "category": "input", "usage": "Input border when focused" },
-    { "name": "wg-input-placeholder-color", "category": "input", "usage": "Input placeholder text color" },
-
-    { "name": "wg-danger-color", "category": "danger", "usage": "Error/danger text and icons" },
-    { "name": "wg-danger-bg-light", "category": "danger", "usage": "Light danger background" },
-
-    { "name": "wg-hover-bg", "category": "state", "usage": "Generic hover background" },
-    { "name": "wg-active-bg", "category": "state", "usage": "Generic active/pressed background" },
-
-    { "name": "wg-font-size-base", "category": "typography", "usage": "Base font size" },
-    { "name": "wg-font-size-sm", "category": "typography", "usage": "Small font size" },
-    { "name": "wg-font-size-xs", "category": "typography", "usage": "Extra small font size" },
-    { "name": "wg-font-size-lg", "category": "typography", "usage": "Large font size" },
-    { "name": "wg-line-height-base", "category": "typography", "usage": "Base line height" },
-    { "name": "wg-font-weight-normal", "category": "typography", "usage": "Normal font weight" },
-    { "name": "wg-font-weight-semibold", "category": "typography", "usage": "Semibold font weight" },
-
-    { "name": "wg-border-radius-sm", "category": "radius", "usage": "Small border radius" },
-    { "name": "wg-border-radius-md", "category": "radius", "usage": "Medium border radius" },
-    { "name": "wg-border-radius-lg", "category": "radius", "usage": "Large border radius" },
-
-    { "name": "wg-spacing-xs", "category": "spacing", "usage": "Extra small spacing (4px)" },
-    { "name": "wg-spacing-sm", "category": "spacing", "usage": "Small spacing (8px)" },
-    { "name": "wg-spacing-md", "category": "spacing", "usage": "Medium spacing (12px)" },
-    { "name": "wg-spacing-lg", "category": "spacing", "usage": "Large spacing (16px)" },
-    { "name": "wg-spacing-xl", "category": "spacing", "usage": "Extra large spacing (24px)" },
-
-    { "name": "wg-table-bg", "category": "table", "usage": "Table background color" },
-    { "name": "wg-table-border", "category": "table", "usage": "Table outer border" },
-
-    { "name": "wg-header-bg", "category": "header", "usage": "Header row background" },
-    { "name": "wg-header-bg-hover", "category": "header", "usage": "Header cell hover background" },
-    { "name": "wg-header-bg-sorted", "category": "header", "usage": "Sorted column header background" },
+    { "name": "wg-rem", "category": "sizing", "usage": "Base sizing unit for proportional scaling (default 10px, set to 1rem for Pure Admin)" },
+
+    { "name": "wg-accent-color", "category": "accent", "usage": "Editor focus outline, active pagination, sorted column indicator" },
+    { "name": "wg-accent-color-hover", "category": "accent", "usage": "Hover state for Go button in dialogs" },
+    { "name": "wg-accent-color-active", "category": "accent", "usage": "Active/pressed state for accent elements" },
+    { "name": "wg-accent-color-light", "category": "accent", "usage": "Light accent for subtle selected backgrounds" },
+
+    { "name": "wg-text-color-1", "category": "text", "usage": "Primary text in cells, headers, toolbar buttons" },
+    { "name": "wg-text-color-2", "category": "text", "usage": "Row numbers, shortcut help labels, secondary info" },
+    { "name": "wg-text-color-3", "category": "text", "usage": "Placeholder text, disabled text, empty state message, date trigger" },
+    { "name": "wg-text-on-accent", "category": "text", "usage": "Text on accent backgrounds (Go button, active pagination)" },
+
+    { "name": "wg-surface-1", "category": "surface", "usage": "Table body, cell backgrounds, filter input background" },
+    { "name": "wg-surface-2", "category": "surface", "usage": "Header row, striped even rows, read-only cells, shortcut key badges" },
+    { "name": "wg-surface-3", "category": "surface", "usage": "Row hover background, sorted header, pagination button hover" },
+    { "name": "wg-surface-floating", "category": "surface", "usage": "Floating toolbar background, context menu, dropdown panels" },
+
+    { "name": "wg-border-color", "category": "border", "usage": "Table border, cell borders, header bottom, toolbar dividers" },
+    { "name": "wg-border-color-hover", "category": "border", "usage": "Pagination button border on hover" },
+
+    { "name": "wg-input-bg", "category": "input", "usage": "Filter input background, editor backgrounds" },
+    { "name": "wg-input-color", "category": "input", "usage": "Text color in filter inputs and editors" },
+    { "name": "wg-input-border", "category": "input", "usage": "Filter input border (1px solid color)" },
+    { "name": "wg-input-border-hover", "category": "input", "usage": "Filter input border on mouse hover" },
+    { "name": "wg-input-border-focus", "category": "input", "usage": "Filter input border when focused (accent color)" },
+    { "name": "wg-input-placeholder-color", "category": "input", "usage": "Placeholder text in filter and editor inputs" },
+
+    { "name": "wg-danger-color", "category": "danger", "usage": "Validation error text, error indicator triangle, delete button" },
+    { "name": "wg-danger-bg-light", "category": "danger", "usage": "Invalid cell background tint, danger button hover" },
+
+    { "name": "wg-hover-bg", "category": "state", "usage": "Generic hover background for buttons, rows, cells" },
+    { "name": "wg-active-bg", "category": "state", "usage": "Generic active/pressed background for buttons" },
+
+    { "name": "wg-font-family", "category": "typography", "usage": "Font family for all grid text (cells, headers, inputs)" },
+    { "name": "wg-font-size-base", "category": "typography", "usage": "Cell text, editor text, dialog labels (14px)" },
+    { "name": "wg-font-size-sm", "category": "typography", "usage": "Filter input, pagination text, row numbers (12px)" },
+    { "name": "wg-font-size-xs", "category": "typography", "usage": "Error messages, shortcut key badges (11px)" },
+    { "name": "wg-font-size-lg", "category": "typography", "usage": "Large text elements (16px)" },
+    { "name": "wg-line-height-base", "category": "typography", "usage": "Base line height for all text (1.5 multiplier)" },
+    { "name": "wg-font-weight-normal", "category": "typography", "usage": "Normal text weight for cell content (400)" },
+    { "name": "wg-font-weight-semibold", "category": "typography", "usage": "Header text, shortcut keys, dialog titles (600)" },
+    { "name": "wg-font-family-mono", "category": "typography", "usage": "Keyboard shortcut key badges (monospace)" },
+
+    { "name": "wg-border-radius-sm", "category": "radius", "usage": "Toolbar buttons, inputs, filter fields (4px)" },
+    { "name": "wg-border-radius-md", "category": "radius", "usage": "Go-to dialog, context menu (6px)" },
+    { "name": "wg-border-radius-lg", "category": "radius", "usage": "Large rounded elements (8px)" },
+
+    { "name": "wg-spacing-xs", "category": "spacing", "usage": "Tight gaps: filter padding, shortcut help position (4px)" },
+    { "name": "wg-spacing-sm", "category": "spacing", "usage": "Standard gaps: cell padding vertical, header padding vertical (8px)" },
+    { "name": "wg-spacing-md", "category": "spacing", "usage": "Comfortable gaps: cell padding horizontal, shortcut item gap (12px)" },
+    { "name": "wg-spacing-lg", "category": "spacing", "usage": "Large gaps: dialog padding, shortcut overlay padding (16px)" },
+    { "name": "wg-spacing-xl", "category": "spacing", "usage": "Extra large gaps: empty state padding (24px)" },
+
+    { "name": "wg-table-bg", "category": "table", "usage": "Table container background color" },
+    { "name": "wg-table-border", "category": "table", "usage": "Table outer border (1px solid)" },
+
+    { "name": "wg-header-bg", "category": "header", "usage": "Column header row background, row number cells" },
+    { "name": "wg-header-bg-hover", "category": "header", "usage": "Sortable column header on hover" },
+    { "name": "wg-header-bg-sorted", "category": "header", "usage": "Currently sorted column header background" },
     { "name": "wg-header-color", "category": "header", "usage": "Header text color" },
-    { "name": "wg-header-border", "category": "header", "usage": "Header bottom border" },
-    { "name": "wg-header-padding", "category": "header", "usage": "Header cell padding" },
-    { "name": "wg-header-font-weight", "category": "header", "usage": "Header text weight" },
-
-    { "name": "wg-cell-padding", "category": "cell", "usage": "Cell content padding" },
-    { "name": "wg-cell-color", "category": "cell", "usage": "Cell text color" },
-    { "name": "wg-cell-border", "category": "cell", "usage": "Cell border" },
-    { "name": "wg-cell-bg-hover", "category": "cell", "usage": "Cell hover background" },
-    { "name": "wg-cell-bg-editing", "category": "cell", "usage": "Cell background when editing" },
-    { "name": "wg-cell-readonly-bg", "category": "cell", "usage": "Read-only cell background" },
-
-    { "name": "wg-row-border", "category": "row", "usage": "Row border" },
-    { "name": "wg-row-bg-even", "category": "row", "usage": "Even row background (striped)" },
-    { "name": "wg-row-bg-hover", "category": "row", "usage": "Row hover background" },
+    { "name": "wg-header-border", "category": "header", "usage": "Bottom border below header row (2px solid)" },
+    { "name": "wg-header-padding", "category": "header", "usage": "Header cell padding (8px 12px)" },
+    { "name": "wg-header-font-weight", "category": "header", "usage": "Header text weight (semibold)" },
+
+    { "name": "wg-cell-padding", "category": "cell", "usage": "Cell content padding shorthand (8px 12px)" },
+    { "name": "wg-cell-padding-block", "category": "cell", "usage": "Cell vertical padding for editors (8px)" },
+    { "name": "wg-cell-padding-inline", "category": "cell", "usage": "Cell horizontal padding for editors (12px)" },
+    { "name": "wg-cell-color", "category": "cell", "usage": "Default cell text color" },
+    { "name": "wg-cell-border", "category": "cell", "usage": "Cell border (1px solid)" },
+    { "name": "wg-cell-bg-hover", "category": "cell", "usage": "Cell background on row hover" },
+    { "name": "wg-cell-bg-editing", "category": "cell", "usage": "Cell background when in edit mode" },
+    { "name": "wg-cell-readonly-bg", "category": "cell", "usage": "Read-only column cell background (disabled tint)" },
+
+    { "name": "wg-row-border", "category": "row", "usage": "Border between rows (1px solid)" },
+    { "name": "wg-row-bg-even", "category": "row", "usage": "Even row background in striped mode" },
+    { "name": "wg-row-bg-hover", "category": "row", "usage": "Row background on hover when hoverable enabled" },
 
     { "name": "wg-filter-bg", "category": "filter", "usage": "Filter row background" },
-    { "name": "wg-filter-border", "category": "filter", "usage": "Filter row border" },
-    { "name": "wg-filter-padding", "category": "filter", "usage": "Filter cell padding" },
-    { "name": "wg-filter-input-padding", "category": "filter", "usage": "Filter input padding" },
-    { "name": "wg-filter-input-bg", "category": "filter", "usage": "Filter input background" },
-    { "name": "wg-filter-input-border", "category": "filter", "usage": "Filter input border" },
-    { "name": "wg-filter-input-border-focus", "category": "filter", "usage": "Filter input focus border" },
-    { "name": "wg-filter-input-border-radius", "category": "filter", "usage": "Filter input border radius" },
-    { "name": "wg-filter-input-font-size", "category": "filter", "usage": "Filter input font size" },
-
-    { "name": "wg-sort-indicator-size", "category": "sort", "usage": "Sort arrow icon size" },
-    { "name": "wg-sort-indicator-opacity", "category": "sort", "usage": "Active sort indicator opacity" },
-    { "name": "wg-sort-placeholder-opacity", "category": "sort", "usage": "Inactive sort indicator opacity" },
-    { "name": "wg-sort-priority-size", "category": "sort", "usage": "Multi-sort priority number size" },
-
-    { "name": "wg-pagination-padding", "category": "pagination", "usage": "Pagination bar padding" },
-    { "name": "wg-pagination-gap", "category": "pagination", "usage": "Gap between pagination elements" },
+    { "name": "wg-filter-border", "category": "filter", "usage": "Filter row bottom border" },
+    { "name": "wg-filter-padding", "category": "filter", "usage": "Filter cell padding around input (4px 8px)" },
+    { "name": "wg-filter-input-padding", "category": "filter", "usage": "Padding inside filter text input (4px 8px)" },
+    { "name": "wg-filter-input-bg", "category": "filter", "usage": "Filter input background color" },
+    { "name": "wg-filter-input-border", "category": "filter", "usage": "Filter input border style" },
+    { "name": "wg-filter-input-border-focus", "category": "filter", "usage": "Filter input border when focused (accent)" },
+    { "name": "wg-filter-input-border-radius", "category": "filter", "usage": "Filter input corner radius" },
+    { "name": "wg-filter-input-font-size", "category": "filter", "usage": "Filter input text size (12px)" },
+
+    { "name": "wg-sort-indicator-size", "category": "sort", "usage": "Sort arrow icon size (14px)" },
+    { "name": "wg-sort-indicator-opacity", "category": "sort", "usage": "Active sort arrow opacity (0.9)" },
+    { "name": "wg-sort-placeholder-opacity", "category": "sort", "usage": "Inactive sortable arrow opacity (0.3)" },
+    { "name": "wg-sort-priority-size", "category": "sort", "usage": "Multi-sort priority number size (11px)" },
+
+    { "name": "wg-pagination-padding", "category": "pagination", "usage": "Pagination bar padding (12px)" },
+    { "name": "wg-pagination-gap", "category": "pagination", "usage": "Gap between pagination elements (16px)" },
     { "name": "wg-pagination-bg", "category": "pagination", "usage": "Pagination bar background" },
-    { "name": "wg-pagination-border", "category": "pagination", "usage": "Pagination bar border" },
-    { "name": "wg-pagination-btn-padding", "category": "pagination", "usage": "Pagination button padding" },
-    { "name": "wg-pagination-btn-bg", "category": "pagination", "usage": "Pagination button background" },
+    { "name": "wg-pagination-border", "category": "pagination", "usage": "Pagination bar top border" },
+    { "name": "wg-pagination-btn-padding", "category": "pagination", "usage": "Pagination button padding (6px 16px)" },
+    { "name": "wg-pagination-btn-bg", "category": "pagination", "usage": "Pagination button default background" },
     { "name": "wg-pagination-btn-bg-hover", "category": "pagination", "usage": "Pagination button hover background" },
-    { "name": "wg-pagination-btn-bg-active", "category": "pagination", "usage": "Pagination button active background" },
+    { "name": "wg-pagination-btn-bg-active", "category": "pagination", "usage": "Current page button background" },
     { "name": "wg-pagination-btn-border", "category": "pagination", "usage": "Pagination button border" },
-    { "name": "wg-pagination-btn-border-hover", "category": "pagination", "usage": "Pagination button hover border" },
-    { "name": "wg-pagination-btn-border-radius", "category": "pagination", "usage": "Pagination button border radius" },
-    { "name": "wg-pagination-btn-disabled-opacity", "category": "pagination", "usage": "Disabled button opacity" },
-
-    { "name": "wg-empty-padding", "category": "empty", "usage": "Empty state message padding" },
-    { "name": "wg-empty-color", "category": "empty", "usage": "Empty state text color" },
-
-    { "name": "wg-error-cell-bg", "category": "error", "usage": "Error cell background" },
-    { "name": "wg-error-cell-border", "category": "error", "usage": "Error cell border" },
-    { "name": "wg-error-message-color", "category": "error", "usage": "Error message text color" },
-    { "name": "wg-error-message-font-size", "category": "error", "usage": "Error message font size" },
-    { "name": "wg-error-indicator-color", "category": "error", "usage": "Error indicator icon color" },
-
-    { "name": "wg-editor-bg", "category": "editor", "usage": "Editor cell background" },
-    { "name": "wg-editor-outline", "category": "editor", "usage": "Editor focus outline" },
-    { "name": "wg-editor-outline-offset", "category": "editor", "usage": "Editor outline offset" },
-    { "name": "wg-editor-validating-opacity", "category": "editor", "usage": "Opacity during validation" },
-
-    { "name": "wg-dropdown-toggle-right", "category": "dropdown", "usage": "Dropdown toggle right position" },
-    { "name": "wg-dropdown-toggle-size", "category": "dropdown", "usage": "Dropdown toggle icon size" },
-    { "name": "wg-dropdown-toggle-hitbox", "category": "dropdown", "usage": "Dropdown toggle click area" },
-
-    { "name": "wg-toolbar-bg", "category": "toolbar", "usage": "Row toolbar background" },
-    { "name": "wg-toolbar-border", "category": "toolbar", "usage": "Row toolbar border" },
-    { "name": "wg-toolbar-border-radius", "category": "toolbar", "usage": "Row toolbar border radius" },
-    { "name": "wg-toolbar-shadow", "category": "toolbar", "usage": "Row toolbar shadow" },
-    { "name": "wg-toolbar-divider-color", "category": "toolbar", "usage": "Toolbar divider color" },
-    { "name": "wg-toolbar-btn-min-width", "category": "toolbar", "usage": "Toolbar button minimum width" },
-    { "name": "wg-toolbar-btn-padding", "category": "toolbar", "usage": "Toolbar button padding" },
-    { "name": "wg-toolbar-btn-border-radius", "category": "toolbar", "usage": "Toolbar button border radius" },
+    { "name": "wg-pagination-btn-border-hover", "category": "pagination", "usage": "Pagination button border on hover" },
+    { "name": "wg-pagination-btn-border-radius", "category": "pagination", "usage": "Pagination button corner radius" },
+    { "name": "wg-pagination-btn-disabled-opacity", "category": "pagination", "usage": "Disabled prev/next button opacity (0.4)" },
+
+    { "name": "wg-empty-padding", "category": "empty", "usage": "Empty state message padding (24px)" },
+    { "name": "wg-empty-color", "category": "empty", "usage": "Empty state 'No data' text color (muted)" },
+
+    { "name": "wg-error-cell-bg", "category": "error", "usage": "Invalid cell background (light red tint)" },
+    { "name": "wg-error-cell-border", "category": "error", "usage": "Invalid cell border (red)" },
+    { "name": "wg-error-message-color", "category": "error", "usage": "Validation error message text color (red)" },
+    { "name": "wg-error-message-font-size", "category": "error", "usage": "Validation error message font size (11px)" },
+    { "name": "wg-error-indicator-color", "category": "error", "usage": "Error triangle indicator color (red)" },
+
+    { "name": "wg-editor-bg", "category": "editor", "usage": "Cell background when editing" },
+    { "name": "wg-editor-outline", "category": "editor", "usage": "Active editor cell outline (2px solid accent)" },
+    { "name": "wg-editor-outline-offset", "category": "editor", "usage": "Editor outline offset (-2px inset)" },
+    { "name": "wg-editor-validating-opacity", "category": "editor", "usage": "Cell opacity during async validation (0.7)" },
+
+    { "name": "wg-dropdown-toggle-right", "category": "dropdown", "usage": "Dropdown arrow right position (12px from edge)" },
+    { "name": "wg-dropdown-toggle-size", "category": "dropdown", "usage": "Dropdown arrow icon size (12px)" },
+    { "name": "wg-dropdown-toggle-hitbox", "category": "dropdown", "usage": "Dropdown arrow clickable area (24px)" },
+
+    { "name": "wg-date-trigger-size", "category": "editor", "usage": "Date picker calendar icon button width (28px)" },
+
+    { "name": "wg-toolbar-bg", "category": "toolbar", "usage": "Floating row toolbar background" },
+    { "name": "wg-toolbar-border", "category": "toolbar", "usage": "Floating row toolbar border" },
+    { "name": "wg-toolbar-border-radius", "category": "toolbar", "usage": "Floating row toolbar corner radius" },
+    { "name": "wg-toolbar-shadow", "category": "toolbar", "usage": "Floating row toolbar drop shadow" },
+    { "name": "wg-toolbar-divider-color", "category": "toolbar", "usage": "Vertical divider between toolbar button groups" },
+    { "name": "wg-toolbar-row-height", "category": "toolbar", "usage": "Toolbar row height for multi-row toolbars (37px)" },
+    { "name": "wg-toolbar-btn-min-width", "category": "toolbar", "usage": "Toolbar button minimum width (24px)" },
+    { "name": "wg-toolbar-btn-padding", "category": "toolbar", "usage": "Toolbar button padding (0 4px)" },
+    { "name": "wg-toolbar-btn-border-radius", "category": "toolbar", "usage": "Toolbar button corner radius" },
     { "name": "wg-toolbar-btn-bg-hover", "category": "toolbar", "usage": "Toolbar button hover background" },
-    { "name": "wg-toolbar-btn-bg-active", "category": "toolbar", "usage": "Toolbar button active background" },
-    { "name": "wg-toolbar-btn-color", "category": "toolbar", "usage": "Toolbar button icon/text color" },
-    { "name": "wg-toolbar-trigger-color", "category": "toolbar", "usage": "Toolbar trigger button color" },
-    { "name": "wg-toolbar-trigger-color-hover", "category": "toolbar", "usage": "Toolbar trigger hover color" },
-    { "name": "wg-toolbar-trigger-bg-hover", "category": "toolbar", "usage": "Toolbar trigger hover background" },
+    { "name": "wg-toolbar-btn-bg-active", "category": "toolbar", "usage": "Toolbar button active/pressed background" },
+    { "name": "wg-toolbar-btn-color", "category": "toolbar", "usage": "Toolbar button icon and text color" },
+    { "name": "wg-toolbar-trigger-color", "category": "toolbar", "usage": "Toolbar trigger button (3-dot) default color" },
+    { "name": "wg-toolbar-trigger-color-hover", "category": "toolbar", "usage": "Toolbar trigger button color on hover" },
+    { "name": "wg-toolbar-trigger-bg-hover", "category": "toolbar", "usage": "Toolbar trigger button background on hover" },
 
-    { "name": "wg-tooltip-bg", "category": "tooltip", "usage": "Tooltip background color" },
+    { "name": "wg-tooltip-bg", "category": "tooltip", "usage": "Tooltip and validation message popup background (dark)" },
+    { "name": "wg-tooltip-color", "category": "tooltip", "usage": "Tooltip and validation message text color (white)" },
 
-    { "name": "wg-context-menu-z-index", "category": "context-menu", "usage": "Context menu z-index" },
-    { "name": "wg-context-menu-min-width", "category": "context-menu", "usage": "Context menu minimum width" },
+    { "name": "wg-context-menu-z-index", "category": "context-menu", "usage": "Context menu stacking order (1001)" },
+    { "name": "wg-context-menu-min-width", "category": "context-menu", "usage": "Context menu minimum width (160px)" },
 
-    { "name": "wg-focus-outline", "category": "focus", "usage": "Navigate mode focus outline" },
-    { "name": "wg-focus-outline-offset", "category": "focus", "usage": "Focus outline offset" },
-    { "name": "wg-focus-bg", "category": "focus", "usage": "Focused cell background" },
+    { "name": "wg-focus-outline", "category": "focus", "usage": "Navigate mode focused cell outline (2px solid accent)" },
+    { "name": "wg-focus-outline-offset", "category": "focus", "usage": "Focused cell outline offset (-2px inset)" },
+    { "name": "wg-focus-bg", "category": "focus", "usage": "Focused cell background tint" },
 
-    { "name": "wg-transition-fast", "category": "transition", "usage": "Fast transition duration" },
-    { "name": "wg-transition-normal", "category": "transition", "usage": "Normal transition duration" },
+    { "name": "wg-transition-fast", "category": "transition", "usage": "Fast animations like hover effects (0.1s)" },
+    { "name": "wg-transition-normal", "category": "transition", "usage": "Standard animations like pagination (0.15s)" },
 
-    { "name": "wg-z-dropdown", "category": "z-index", "usage": "Dropdown z-index layer" },
-    { "name": "wg-z-toolbar", "category": "z-index", "usage": "Toolbar z-index layer" },
-    { "name": "wg-z-context-menu", "category": "z-index", "usage": "Context menu z-index layer" }
+    { "name": "wg-z-dropdown", "category": "z-index", "usage": "Dropdown/combobox popup stacking (9999)" },
+    { "name": "wg-z-toolbar", "category": "z-index", "usage": "Floating row toolbar stacking (1000)" },
+    { "name": "wg-z-context-menu", "category": "z-index", "usage": "Context menu stacking (1001)" },
+    { "name": "wg-z-tooltip", "category": "z-index", "usage": "Tooltip stacking - highest layer (10000)" }
   ]
 }