@keenmate/web-grid 1.0.0-rc02

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 KeenMate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,243 @@
+# @keenmate/web-grid
+
+A feature-rich, framework-agnostic data grid web component with sorting, filtering, pagination, inline editing, row toolbar, and context menu support.
+
+## Installation
+
+```bash
+npm install @keenmate/web-grid
+```
+
+## Usage
+
+### ES Module (recommended)
+
+```html
+<script type="module">
+  import '@keenmate/web-grid'
+</script>
+
+<web-grid id="grid"></web-grid>
+
+<script type="module">
+  const grid = document.getElementById('grid')
+  grid.items = [
+    { id: 1, name: 'Alice', age: 28 },
+    { id: 2, name: 'Bob', age: 34 }
+  ]
+  grid.columns = [
+    { field: 'id', title: 'ID', width: '60px' },
+    { field: 'name', title: 'Name', sortable: true },
+    { field: 'age', title: 'Age', sortable: true }
+  ]
+</script>
+```
+
+### UMD (Script Tag)
+
+```html
+<script src="https://unpkg.com/@keenmate/web-grid"></script>
+<web-grid id="grid"></web-grid>
+```
+
+## Features
+
+- **Sorting** - Click column headers to sort ascending/descending
+- **Filtering** - Per-column text input filters
+- **Pagination** - Configurable page size with navigation
+- **Inline Editing** - 7 editor types with validation support
+- **Navigate Mode** - Spreadsheet-like keyboard navigation
+- **Row Toolbar** - Floating action buttons on hover
+- **Context Menu** - Right-click menu with dynamic options
+- **Dark Mode** - Built-in dark theme support via CSS variables
+- **Shadow DOM** - Encapsulated styles with CSS variable customization
+- **TypeScript** - Full type definitions included
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `items` | `Array` | `[]` | Data array to display |
+| `columns` | `Array<Column>` | `[]` | Column definitions |
+| `sortable` | `boolean` | `false` | Enable column sorting |
+| `filterable` | `boolean` | `false` | Enable column filtering |
+| `pageable` | `boolean` | `false` | Enable pagination |
+| `pageSize` | `number` | `10` | Rows per page |
+| `editable` | `boolean` | `false` | Enable cell editing |
+| `editTrigger` | `string` | `'dblclick'` | Edit trigger: `'click'`, `'dblclick'`, `'navigate'` |
+| `striped` | `boolean` | `false` | Alternate row colors |
+| `hoverable` | `boolean` | `false` | Highlight row on hover |
+| `showRowToolbar` | `boolean` | `false` | Show row action toolbar |
+| `rowToolbar` | `Array` | `[]` | Toolbar items configuration |
+| `toolbarTrigger` | `string` | `'hover'` | Toolbar trigger: `'hover'`, `'button'` |
+| `contextMenu` | `Array` | `[]` | Context menu items |
+
+## Column Definition
+
+```javascript
+{
+  field: 'fieldName',           // Data field name (required)
+  title: 'Column Title',        // Display title
+  width: '100px',               // Column width
+  minWidth: '50px',             // Minimum width
+  maxWidth: '300px',            // Maximum width
+  align: 'left',                // 'left', 'center', 'right'
+  textOverflow: 'wrap',         // 'wrap' or 'ellipsis'
+  sortable: true,               // Enable sorting
+  filterable: true,             // Enable filtering
+  editable: true,               // Enable editing
+  editor: 'text',               // Editor type
+  editorOptions: {},            // Editor configuration
+  formatCallback: (value, row) => '',        // Value formatter
+  templateCallback: (row, column) => '',     // Custom cell HTML
+  cellClassCallback: (value, row) => '',     // Dynamic CSS class
+  beforeCommitCallback: (ctx) => true        // Validation
+}
+```
+
+## Editor Types
+
+| Type | Description | Options |
+|------|-------------|---------|
+| `text` | Text input | `placeholder`, `maxLength`, `inputMode` |
+| `number` | Number input | `min`, `max`, `step` |
+| `checkbox` | Boolean toggle | - |
+| `select` | Dropdown list | `options`, `allowEmpty`, `emptyLabel` |
+| `combobox` | Filterable dropdown | `options`, `placeholder` |
+| `autocomplete` | Async search | `onSearchCallback(query)`, `placeholder`, `minSearchLength` |
+| `date` | Date picker | `min`, `max` |
+
+## Row Toolbar
+
+```javascript
+grid.showRowToolbar = true
+grid.rowToolbar = ['add', 'delete', 'duplicate', 'moveUp', 'moveDown']
+
+// Custom items
+grid.rowToolbar = [
+  'add',
+  {
+    id: 'custom',
+    icon: '🔧',
+    title: 'Custom Action',
+    danger: false,
+    onclick: ({ row, rowIndex }) => { /* ... */ }
+  }
+]
+```
+
+## Context Menu
+
+```javascript
+grid.contextMenu = [
+  {
+    id: 'view',
+    label: 'View Details',
+    icon: '👁️',
+    visible: (ctx) => true,
+    disabled: (ctx) => false,
+    danger: false,
+    onclick: (ctx) => {}
+  }
+]
+```
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `rowchange` | `{ rowIndex, field, oldValue, newValue, row }` | Cell value changed |
+| `roweditstart` | `{ rowIndex, field, row }` | Edit started |
+| `roweditend` | `{ rowIndex, field, row, committed }` | Edit ended |
+| `rowaction` | `{ action, rowIndex, row }` | Toolbar action |
+
+## Styling
+
+WebGrid uses CSS custom properties with a fallback chain:
+
+```css
+web-grid {
+  /* Override component variables directly */
+  --wg-accent-color: #10b981;
+  --wg-header-bg: #f5f5f5;
+}
+
+/* Or set base variables for all KeenMate components */
+:root {
+  --base-accent-color: #10b981;
+  --base-surface-1: #ffffff;
+}
+```
+
+### Key Variables
+
+| Variable | Description |
+|----------|-------------|
+| `--wg-accent-color` | Primary accent color |
+| `--wg-text-color-1` | Primary text color |
+| `--wg-surface-1` | Background color |
+| `--wg-surface-2` | Alternate row/header background |
+| `--wg-border-color` | Border color |
+
+### Component Variables Manifest
+
+A machine-readable manifest documenting all CSS variables is included in the package:
+
+```javascript
+import manifest from '@keenmate/web-grid/manifest'
+
+console.log(manifest.prefix)              // "wg"
+console.log(manifest.baseVariables)       // 34 --base-* variables consumed
+console.log(manifest.componentVariables)  // 121 --wg-* variables exposed
+```
+
+The manifest follows the [component-variables schema](https://raw.githubusercontent.com/keenmate/schemas/main/component-variables.schema.json) and contains:
+
+- **baseVariables** - Theme variables (`--base-*`) the component consumes from `@keenmate/theme-designer`
+- **componentVariables** - Component-specific variables (`--wg-*`) with category and usage descriptions
+
+Example entry:
+```json
+{
+  "name": "wg-header-bg",
+  "category": "header",
+  "usage": "Header row background color"
+}
+```
+
+### Dark Mode
+
+Dark mode is triggered automatically by:
+- OS preference: `@media (prefers-color-scheme: dark)`
+- Attribute: `data-theme="dark"` on ancestor
+- Bootstrap: `data-bs-theme="dark"` on ancestor
+- Class: `.dark` on ancestor (Tailwind CSS)
+
+## Dynamic Cell Styling
+
+```javascript
+// Per-cell styling via column callback
+grid.columns = [{
+  field: 'salary',
+  cellClassCallback: (value, row) => value > 90000 ? 'high-value' : null
+}]
+
+// Per-row styling
+grid.rowClassCallback = (row, index) => row.status === 'inactive' ? 'row-inactive' : null
+
+// Inject custom CSS into shadow DOM
+grid.customStylesCallback = () => `
+  .high-value { background: #d1fae5 !important; }
+  .row-inactive { opacity: 0.5; }
+`
+```
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+
+## License
+
+MIT

package/component-variables.manifest.json

@@ -0,0 +1,192 @@
+{
+  "$schema": "https://raw.githubusercontent.com/keenmate/schemas/main/component-variables.schema.json",
+  "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-on-accent", "required": false, "usage": "Text on accent backgrounds" },
+    { "name": "base-surface-1", "required": true, "usage": "Table background, cell background, inputs" },
+    { "name": "base-surface-2", "required": true, "usage": "Header background, striped rows, pagination buttons" },
+    { "name": "base-surface-3", "required": false, "usage": "Hover states, sorted header, active buttons" },
+    { "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)" }
+  ],
+  "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-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-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-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-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-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-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-tooltip-bg", "category": "tooltip", "usage": "Tooltip background color" },
+
+    { "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-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-transition-fast", "category": "transition", "usage": "Fast transition duration" },
+    { "name": "wg-transition-normal", "category": "transition", "usage": "Normal transition duration" },
+
+    { "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" }
+  ]
+}