@keenmate/web-grid 1.0.0-rc09 → 1.0.0-rc10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/grid.d.ts +61 -65
- package/dist/modules/navigation/index.d.ts +1 -1
- package/dist/types.d.ts +34 -34
- package/dist/web-component.d.ts +39 -42
- package/dist/web-grid.js +5130 -5118
- package/dist/web-grid.umd.js +237 -233
- package/package.json +78 -78
- package/src/css/_cells.css +13 -2
- package/src/css/_dialogs.css +2 -2
- package/src/css/_dropdown.css +33 -3
- package/src/css/_freeze.css +2 -2
- package/src/css/_header.css +46 -8
- package/src/css/_toolbar.css +7 -7
- package/src/css/_variables.css +35 -5
package/package.json
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@keenmate/web-grid",
|
|
3
|
-
"version": "1.0.0-
|
|
4
|
-
"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/web-grid.umd.js",
|
|
7
|
-
"module": "./dist/web-grid.js",
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/web-grid.js",
|
|
13
|
-
"require": "./dist/web-grid.umd.js",
|
|
14
|
-
"default": "./dist/web-grid.js"
|
|
15
|
-
},
|
|
16
|
-
"./css": "./src/css/main.css",
|
|
17
|
-
"./manifest": "./component-variables.manifest.json",
|
|
18
|
-
"./dist/*": "./dist/*",
|
|
19
|
-
"./src/css/*": "./src/css/*",
|
|
20
|
-
"./package.json": "./package.json"
|
|
21
|
-
},
|
|
22
|
-
"sideEffects": [
|
|
23
|
-
"./dist/web-grid.js",
|
|
24
|
-
"./dist/web-grid.umd.js",
|
|
25
|
-
"*.css"
|
|
26
|
-
],
|
|
27
|
-
"files": [
|
|
28
|
-
"dist",
|
|
29
|
-
"src/css",
|
|
30
|
-
"component-variables.manifest.json"
|
|
31
|
-
],
|
|
32
|
-
"scripts": {
|
|
33
|
-
"dev": "vite --port 12500",
|
|
34
|
-
"build": "npm run clean:dist && tsc && vite build",
|
|
35
|
-
"build:types": "tsc",
|
|
36
|
-
"preview": "vite preview",
|
|
37
|
-
"clean": "rimraf dist --glob \"*.tgz\"",
|
|
38
|
-
"clean:dist": "rimraf dist"
|
|
39
|
-
},
|
|
40
|
-
"keywords": [
|
|
41
|
-
"grid",
|
|
42
|
-
"data-grid",
|
|
43
|
-
"table",
|
|
44
|
-
"datagrid",
|
|
45
|
-
"editable",
|
|
46
|
-
"sortable",
|
|
47
|
-
"filterable",
|
|
48
|
-
"pagination",
|
|
49
|
-
"inline-editing",
|
|
50
|
-
"web-component",
|
|
51
|
-
"custom-element",
|
|
52
|
-
"shadow-dom",
|
|
53
|
-
"typescript",
|
|
54
|
-
"dark-mode",
|
|
55
|
-
"context-menu",
|
|
56
|
-
"row-toolbar",
|
|
57
|
-
"keyboard-navigation",
|
|
58
|
-
"keenmate"
|
|
59
|
-
],
|
|
60
|
-
"author": "KeenMate",
|
|
61
|
-
"license": "MIT",
|
|
62
|
-
"repository": {
|
|
63
|
-
"type": "git",
|
|
64
|
-
"url": "git+https://github.com/KeenMate/web-grid.git"
|
|
65
|
-
},
|
|
66
|
-
"bugs": {
|
|
67
|
-
"url": "https://github.com/KeenMate/web-grid/issues"
|
|
68
|
-
},
|
|
69
|
-
"homepage": "https://github.com/KeenMate/web-grid#readme",
|
|
70
|
-
"devDependencies": {
|
|
71
|
-
"rimraf": "^5.0.5",
|
|
72
|
-
"typescript": "^5.3.3",
|
|
73
|
-
"vite": "^5.0.8"
|
|
74
|
-
},
|
|
75
|
-
"dependencies": {
|
|
76
|
-
"@floating-ui/dom": "^1.7.4"
|
|
77
|
-
}
|
|
78
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@keenmate/web-grid",
|
|
3
|
+
"version": "1.0.0-rc10",
|
|
4
|
+
"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/web-grid.umd.js",
|
|
7
|
+
"module": "./dist/web-grid.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/web-grid.js",
|
|
13
|
+
"require": "./dist/web-grid.umd.js",
|
|
14
|
+
"default": "./dist/web-grid.js"
|
|
15
|
+
},
|
|
16
|
+
"./css": "./src/css/main.css",
|
|
17
|
+
"./manifest": "./component-variables.manifest.json",
|
|
18
|
+
"./dist/*": "./dist/*",
|
|
19
|
+
"./src/css/*": "./src/css/*",
|
|
20
|
+
"./package.json": "./package.json"
|
|
21
|
+
},
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"./dist/web-grid.js",
|
|
24
|
+
"./dist/web-grid.umd.js",
|
|
25
|
+
"*.css"
|
|
26
|
+
],
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"src/css",
|
|
30
|
+
"component-variables.manifest.json"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"dev": "vite --port 12500",
|
|
34
|
+
"build": "npm run clean:dist && tsc && vite build",
|
|
35
|
+
"build:types": "tsc",
|
|
36
|
+
"preview": "vite preview",
|
|
37
|
+
"clean": "rimraf dist --glob \"*.tgz\"",
|
|
38
|
+
"clean:dist": "rimraf dist"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [
|
|
41
|
+
"grid",
|
|
42
|
+
"data-grid",
|
|
43
|
+
"table",
|
|
44
|
+
"datagrid",
|
|
45
|
+
"editable",
|
|
46
|
+
"sortable",
|
|
47
|
+
"filterable",
|
|
48
|
+
"pagination",
|
|
49
|
+
"inline-editing",
|
|
50
|
+
"web-component",
|
|
51
|
+
"custom-element",
|
|
52
|
+
"shadow-dom",
|
|
53
|
+
"typescript",
|
|
54
|
+
"dark-mode",
|
|
55
|
+
"context-menu",
|
|
56
|
+
"row-toolbar",
|
|
57
|
+
"keyboard-navigation",
|
|
58
|
+
"keenmate"
|
|
59
|
+
],
|
|
60
|
+
"author": "KeenMate",
|
|
61
|
+
"license": "MIT",
|
|
62
|
+
"repository": {
|
|
63
|
+
"type": "git",
|
|
64
|
+
"url": "git+https://github.com/KeenMate/web-grid.git"
|
|
65
|
+
},
|
|
66
|
+
"bugs": {
|
|
67
|
+
"url": "https://github.com/KeenMate/web-grid/issues"
|
|
68
|
+
},
|
|
69
|
+
"homepage": "https://github.com/KeenMate/web-grid#readme",
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"rimraf": "^5.0.5",
|
|
72
|
+
"typescript": "^5.3.3",
|
|
73
|
+
"vite": "^5.0.8"
|
|
74
|
+
},
|
|
75
|
+
"dependencies": {
|
|
76
|
+
"@floating-ui/dom": "^1.7.4"
|
|
77
|
+
}
|
|
78
|
+
}
|
package/src/css/_cells.css
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
.wg__cell {
|
|
8
8
|
padding: var(--wg-cell-padding);
|
|
9
9
|
color: var(--wg-cell-color);
|
|
10
|
+
height: var(--wg-row-min-height); /* In table layout, height acts as min-height */
|
|
11
|
+
max-height: var(--wg-row-max-height); /* Cap row height when set */
|
|
10
12
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
11
13
|
/* Account for sticky header when scrolling into view */
|
|
12
14
|
scroll-margin-top: 3rem;
|
|
@@ -22,13 +24,22 @@
|
|
|
22
24
|
user-select: none;
|
|
23
25
|
}
|
|
24
26
|
|
|
25
|
-
/* Text overflow ellipsis */
|
|
26
|
-
|
|
27
|
+
/* Text overflow ellipsis - applied to inner text element */
|
|
28
|
+
/* This allows the cell itself to have overflow:visible for frozen column shadows */
|
|
29
|
+
.wg__cell--ellipsis .wg__cell-text {
|
|
30
|
+
display: block;
|
|
27
31
|
overflow: hidden;
|
|
28
32
|
text-overflow: ellipsis;
|
|
29
33
|
white-space: nowrap;
|
|
30
34
|
}
|
|
31
35
|
|
|
36
|
+
/* Line clamp - limit visible lines with ellipsis */
|
|
37
|
+
.wg__cell--line-clamp .wg__cell-text {
|
|
38
|
+
display: -webkit-box;
|
|
39
|
+
-webkit-box-orient: vertical;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
}
|
|
42
|
+
|
|
32
43
|
/* ==============================================================================
|
|
33
44
|
EDITABLE CELLS
|
|
34
45
|
============================================================================== */
|
package/src/css/_dialogs.css
CHANGED
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
position: fixed;
|
|
6
6
|
z-index: var(--wg-z-tooltip);
|
|
7
7
|
max-width: 300px;
|
|
8
|
-
padding:
|
|
8
|
+
padding: var(--wg-tooltip-padding);
|
|
9
9
|
background: var(--wg-tooltip-bg, #333);
|
|
10
10
|
color: var(--wg-tooltip-color, #fff);
|
|
11
11
|
font-size: var(--wg-font-size-sm);
|
|
12
12
|
line-height: 1.4;
|
|
13
13
|
border-radius: var(--wg-border-radius-sm);
|
|
14
|
-
box-shadow:
|
|
14
|
+
box-shadow: var(--wg-tooltip-shadow);
|
|
15
15
|
pointer-events: none;
|
|
16
16
|
opacity: 0;
|
|
17
17
|
transition: opacity var(--wg-transition-fast);
|
package/src/css/_dropdown.css
CHANGED
|
@@ -136,8 +136,8 @@
|
|
|
136
136
|
.wg__dropdown-option {
|
|
137
137
|
display: flex;
|
|
138
138
|
align-items: center;
|
|
139
|
-
gap: var(--wg-
|
|
140
|
-
padding:
|
|
139
|
+
gap: var(--wg-dropdown-option-gap);
|
|
140
|
+
padding: var(--wg-dropdown-option-padding);
|
|
141
141
|
cursor: pointer;
|
|
142
142
|
color: var(--wg-text-color-1);
|
|
143
143
|
}
|
|
@@ -145,6 +145,7 @@
|
|
|
145
145
|
.wg__dropdown-option:hover,
|
|
146
146
|
.wg__dropdown-option--highlighted {
|
|
147
147
|
background: var(--wg-hover-bg, #f0f0f0);
|
|
148
|
+
box-shadow: inset 0 0 0 2px var(--wg-accent-color, #0078d4);
|
|
148
149
|
}
|
|
149
150
|
|
|
150
151
|
.wg__dropdown-option--selected {
|
|
@@ -186,8 +187,37 @@
|
|
|
186
187
|
}
|
|
187
188
|
|
|
188
189
|
.wg__dropdown-empty {
|
|
189
|
-
padding:
|
|
190
|
+
padding: var(--wg-dropdown-empty-padding);
|
|
190
191
|
color: var(--wg-text-color-2);
|
|
191
192
|
font-style: italic;
|
|
192
193
|
text-align: center;
|
|
193
194
|
}
|
|
195
|
+
|
|
196
|
+
/* Dropdown option alignment modifiers - inherit from column.align */
|
|
197
|
+
.wg__dropdown-option--align-left {
|
|
198
|
+
justify-content: flex-start;
|
|
199
|
+
}
|
|
200
|
+
.wg__dropdown-option--align-left .wg__dropdown-option-content {
|
|
201
|
+
text-align: left;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.wg__dropdown-option--align-center {
|
|
205
|
+
justify-content: center;
|
|
206
|
+
}
|
|
207
|
+
.wg__dropdown-option--align-center .wg__dropdown-option-content {
|
|
208
|
+
text-align: center;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.wg__dropdown-option--align-right {
|
|
212
|
+
justify-content: flex-end;
|
|
213
|
+
}
|
|
214
|
+
.wg__dropdown-option--align-right .wg__dropdown-option-content {
|
|
215
|
+
text-align: right;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.wg__dropdown-option--align-justify {
|
|
219
|
+
justify-content: flex-start; /* Justify doesn't apply to single-line options */
|
|
220
|
+
}
|
|
221
|
+
.wg__dropdown-option--align-justify .wg__dropdown-option-content {
|
|
222
|
+
text-align: justify;
|
|
223
|
+
}
|
package/src/css/_freeze.css
CHANGED
|
@@ -66,8 +66,8 @@
|
|
|
66
66
|
SCROLL-AWARE FROZEN COLUMN INDICATOR
|
|
67
67
|
========================================================================== */
|
|
68
68
|
|
|
69
|
-
/* Last frozen column needs overflow:visible for ::after to
|
|
70
|
-
/*
|
|
69
|
+
/* Last frozen column needs overflow:visible for ::after shadow to extend outside */
|
|
70
|
+
/* Text ellipsis is handled by the inner .wg__cell-text element */
|
|
71
71
|
.wg__header.wg__header--frozen-last,
|
|
72
72
|
.wg__cell.wg__cell--frozen-last {
|
|
73
73
|
overflow: visible;
|
package/src/css/_header.css
CHANGED
|
@@ -12,11 +12,12 @@
|
|
|
12
12
|
color: var(--wg-header-color);
|
|
13
13
|
font-weight: var(--wg-header-font-weight);
|
|
14
14
|
padding: var(--wg-header-padding);
|
|
15
|
+
height: var(--wg-header-min-height); /* In table layout, height acts as min-height */
|
|
15
16
|
border-bottom: var(--wg-header-border);
|
|
16
17
|
/* Use box-shadow instead of border-right to avoid flicker with sticky + border-collapse */
|
|
17
18
|
box-shadow: inset -1px 0 0 var(--wg-border-color);
|
|
18
19
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
19
|
-
text-align
|
|
20
|
+
/* text-align set by inline style from column.headerAlign or column.align */
|
|
20
21
|
user-select: none;
|
|
21
22
|
overflow: hidden; /* Required for text-overflow to work in table cells */
|
|
22
23
|
}
|
|
@@ -38,30 +39,67 @@
|
|
|
38
39
|
background: var(--wg-header-bg-sorted);
|
|
39
40
|
}
|
|
40
41
|
|
|
41
|
-
/* Header
|
|
42
|
+
/* Header Container - flex layout for content + controls */
|
|
43
|
+
.wg__header-container {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: stretch; /* Children take full height */
|
|
46
|
+
gap: 4px;
|
|
47
|
+
height: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Header Content - takes remaining space */
|
|
42
51
|
.wg__header-content {
|
|
52
|
+
flex: 1;
|
|
53
|
+
min-width: 0; /* Allow shrinking */
|
|
43
54
|
display: flex;
|
|
55
|
+
align-items: center; /* Vertically center title */
|
|
56
|
+
justify-content: flex-start; /* Default: left */
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Horizontal alignment modifiers */
|
|
60
|
+
.wg__header-content--align-left {
|
|
61
|
+
justify-content: flex-start;
|
|
62
|
+
}
|
|
63
|
+
.wg__header-content--align-center {
|
|
64
|
+
justify-content: center;
|
|
65
|
+
}
|
|
66
|
+
.wg__header-content--align-right {
|
|
67
|
+
justify-content: flex-end;
|
|
68
|
+
}
|
|
69
|
+
.wg__header-content--align-justify {
|
|
70
|
+
justify-content: flex-start; /* Justify doesn't apply to single-line headers, fallback to left */
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Vertical alignment modifiers */
|
|
74
|
+
.wg__header-content--valign-top {
|
|
75
|
+
align-items: flex-start;
|
|
76
|
+
}
|
|
77
|
+
.wg__header-content--valign-middle {
|
|
44
78
|
align-items: center;
|
|
45
|
-
|
|
46
|
-
|
|
79
|
+
}
|
|
80
|
+
.wg__header-content--valign-bottom {
|
|
81
|
+
align-items: flex-end;
|
|
47
82
|
}
|
|
48
83
|
|
|
49
84
|
.wg__header-title {
|
|
50
|
-
flex: 1;
|
|
51
|
-
min-width: 0; /* Allow shrinking in flexbox */
|
|
52
85
|
overflow: hidden;
|
|
53
86
|
text-overflow: ellipsis;
|
|
54
87
|
white-space: nowrap;
|
|
55
88
|
}
|
|
56
89
|
|
|
90
|
+
/* Header Controls - fixed space for sort indicator */
|
|
91
|
+
.wg__header-controls {
|
|
92
|
+
flex-shrink: 0;
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center; /* Vertically center sort indicator */
|
|
95
|
+
}
|
|
96
|
+
|
|
57
97
|
/* Sort Indicator */
|
|
58
98
|
.wg__sort-indicator {
|
|
59
99
|
font-size: var(--wg-sort-indicator-size);
|
|
60
100
|
opacity: var(--wg-sort-indicator-opacity);
|
|
61
101
|
min-width: 16px;
|
|
62
102
|
text-align: center;
|
|
63
|
-
display: inline-flex;
|
|
64
|
-
align-items: center;
|
|
65
103
|
}
|
|
66
104
|
|
|
67
105
|
.wg__sort-placeholder {
|
package/src/css/_toolbar.css
CHANGED
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
|
|
22
22
|
.wg__toolbar-row {
|
|
23
23
|
display: flex;
|
|
24
|
-
gap:
|
|
24
|
+
gap: var(--wg-toolbar-row-gap);
|
|
25
25
|
align-items: center;
|
|
26
26
|
/* Match grid row height: vertical padding (design-unit * 2 * 2) + line-height (~21px) */
|
|
27
27
|
height: var(--wg-toolbar-row-height);
|
|
28
|
-
padding:
|
|
28
|
+
padding: var(--wg-toolbar-row-padding);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
.wg__toolbar-row + .wg__toolbar-row {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
display: flex;
|
|
52
52
|
align-items: center;
|
|
53
53
|
justify-content: center;
|
|
54
|
-
gap:
|
|
54
|
+
gap: var(--wg-toolbar-btn-gap);
|
|
55
55
|
font-family: inherit; /* Form elements don't inherit font by default */
|
|
56
56
|
font-size: var(--wg-font-size-base);
|
|
57
57
|
font-weight: 500;
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
.wg__toolbar-label {
|
|
85
|
-
font-size:
|
|
85
|
+
font-size: var(--wg-toolbar-label-font-size);
|
|
86
86
|
white-space: nowrap;
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
width: 1%; /* Shrink to content */
|
|
150
150
|
white-space: nowrap;
|
|
151
151
|
text-align: center;
|
|
152
|
-
padding: var(--wg-
|
|
152
|
+
padding: var(--wg-inline-actions-padding);
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
.wg__inline-actions-header {
|
|
@@ -159,13 +159,13 @@
|
|
|
159
159
|
.wg__inline-actions-wrap {
|
|
160
160
|
display: flex;
|
|
161
161
|
flex-direction: column;
|
|
162
|
-
gap:
|
|
162
|
+
gap: var(--wg-inline-actions-gap);
|
|
163
163
|
align-items: center;
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
.wg__inline-actions-row {
|
|
167
167
|
display: flex;
|
|
168
|
-
gap:
|
|
168
|
+
gap: var(--wg-inline-actions-gap);
|
|
169
169
|
align-items: center;
|
|
170
170
|
justify-content: center;
|
|
171
171
|
}
|
package/src/css/_variables.css
CHANGED
|
@@ -124,15 +124,18 @@
|
|
|
124
124
|
--wg-header-color: var(--wg-text-color-1);
|
|
125
125
|
--wg-header-border: 2px solid var(--wg-border-color);
|
|
126
126
|
--wg-header-separator: 1px solid var(--wg-border-color); /* Vertical separator between headers */
|
|
127
|
-
--wg-header-padding: var(--wg-spacing-sm)
|
|
127
|
+
--wg-header-padding: var(--wg-spacing-sm);
|
|
128
128
|
--wg-header-font-weight: var(--wg-font-weight-semibold);
|
|
129
|
+
--wg-header-min-height: auto; /* Set to e.g. 40px for consistent header height */
|
|
129
130
|
|
|
130
131
|
/* ==========================================================================
|
|
131
132
|
CELL COMPONENT
|
|
132
133
|
========================================================================== */
|
|
133
|
-
--wg-cell-padding: var(--wg-spacing-sm)
|
|
134
|
+
--wg-cell-padding: var(--wg-spacing-sm);
|
|
134
135
|
--wg-cell-padding-block: var(--wg-spacing-sm);
|
|
135
|
-
--wg-cell-padding-inline: var(--wg-spacing-
|
|
136
|
+
--wg-cell-padding-inline: var(--wg-spacing-sm);
|
|
137
|
+
--wg-row-min-height: auto; /* Set to e.g. 40px for consistent row heights */
|
|
138
|
+
--wg-row-max-height: none; /* Set to e.g. 100px to cap row height (overflow hidden) */
|
|
136
139
|
--wg-cell-color: var(--wg-text-color-1);
|
|
137
140
|
--wg-cell-border: 1px solid var(--wg-border-color);
|
|
138
141
|
--wg-cell-bg-hover: var(--wg-hover-bg);
|
|
@@ -211,7 +214,7 @@
|
|
|
211
214
|
--wg-editor-validating-opacity: 0.7;
|
|
212
215
|
|
|
213
216
|
/* Dropdown Toggle */
|
|
214
|
-
--wg-dropdown-toggle-right: var(--wg-spacing-
|
|
217
|
+
--wg-dropdown-toggle-right: var(--wg-spacing-sm);
|
|
215
218
|
--wg-dropdown-toggle-size: calc(1.2 * var(--wg-rem));
|
|
216
219
|
--wg-dropdown-toggle-hitbox: calc(2.4 * var(--wg-rem));
|
|
217
220
|
|
|
@@ -296,7 +299,7 @@
|
|
|
296
299
|
FILL HANDLE (Excel-like autofill)
|
|
297
300
|
========================================================================== */
|
|
298
301
|
--wg-fill-handle-size: 8px;
|
|
299
|
-
--wg-fill-handle-bg: var(--wg-
|
|
302
|
+
--wg-fill-handle-bg: var(--wg-surface-1);
|
|
300
303
|
--wg-fill-handle-border-color: var(--wg-accent-color);
|
|
301
304
|
--wg-fill-handle-border-width: 2px;
|
|
302
305
|
--wg-fill-range-bg: color-mix(in srgb, var(--wg-accent-color) 15%, transparent);
|
|
@@ -308,4 +311,31 @@
|
|
|
308
311
|
--wg-selection-bg: color-mix(in srgb, var(--wg-accent-color) 15%, transparent);
|
|
309
312
|
--wg-selection-row-number-bg: var(--wg-accent-color);
|
|
310
313
|
--wg-selection-row-number-color: var(--base-text-inverted, #fff);
|
|
314
|
+
|
|
315
|
+
/* ==========================================================================
|
|
316
|
+
DROPDOWN MENU (Component-Specific)
|
|
317
|
+
========================================================================== */
|
|
318
|
+
--wg-dropdown-option-gap: var(--wg-spacing-sm);
|
|
319
|
+
--wg-dropdown-option-padding: calc(0.6 * var(--wg-rem)) var(--wg-spacing-sm) calc(0.6 * var(--wg-rem)) calc(var(--wg-spacing-sm) - 1px);
|
|
320
|
+
--wg-dropdown-empty-padding: calc(0.8 * var(--wg-rem)) var(--wg-spacing-sm) calc(0.8 * var(--wg-rem)) calc(var(--wg-spacing-sm) - 1px);
|
|
321
|
+
|
|
322
|
+
/* ==========================================================================
|
|
323
|
+
INLINE ACTIONS (Component-Specific)
|
|
324
|
+
========================================================================== */
|
|
325
|
+
--wg-inline-actions-padding: var(--wg-spacing-xs) var(--wg-spacing-sm);
|
|
326
|
+
--wg-inline-actions-gap: calc(0.2 * var(--wg-rem));
|
|
327
|
+
|
|
328
|
+
/* ==========================================================================
|
|
329
|
+
TOOLBAR EXTRAS (Component-Specific)
|
|
330
|
+
========================================================================== */
|
|
331
|
+
--wg-toolbar-row-gap: calc(0.2 * var(--wg-rem));
|
|
332
|
+
--wg-toolbar-row-padding: 0 calc(0.4 * var(--wg-rem));
|
|
333
|
+
--wg-toolbar-label-font-size: var(--wg-font-size-sm);
|
|
334
|
+
--wg-toolbar-btn-gap: calc(0.4 * var(--wg-rem));
|
|
335
|
+
|
|
336
|
+
/* ==========================================================================
|
|
337
|
+
TOOLTIP EXTRAS (Component-Specific)
|
|
338
|
+
========================================================================== */
|
|
339
|
+
--wg-tooltip-padding: calc(0.6 * var(--wg-rem)) calc(1.0 * var(--wg-rem));
|
|
340
|
+
--wg-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
311
341
|
}
|