@wpic/ui 0.8.9 → 0.9.1

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/COMPONENTS.md +48 -0
  3. package/dist/legacy.css +154 -0
  4. package/dist/wpic-ui.cjs +151 -151
  5. package/dist/wpic-ui.css +112 -108
  6. package/dist/wpic-ui.js +4721 -4717
  7. package/package.json +9 -3
  8. package/src/style.css +110 -106
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wpic/ui",
3
- "version": "0.8.9",
3
+ "version": "0.9.1",
4
4
  "type": "module",
5
5
  "description": "WPIC shared Vue 3 component library",
6
6
  "publishConfig": {
@@ -23,14 +23,18 @@
23
23
  "require": "./dist/wpic-ui.cjs"
24
24
  },
25
25
  "./style.css": "./dist/wpic-ui.css",
26
- "./dist/wpic-ui.css": "./dist/wpic-ui.css"
26
+ "./dist/wpic-ui.css": "./dist/wpic-ui.css",
27
+ "./legacy.css": "./dist/legacy.css"
27
28
  },
28
29
  "scripts": {
29
30
  "build": "vue-tsc --noEmit && vite build",
30
31
  "dev": "vite build --watch",
31
32
  "test:ui": "vite --config test-ui/vite.config.ts",
32
33
  "postbuild": "node scripts/postbuild.js && node scripts/verify-package.js",
33
- "test:semantic": "playwright test"
34
+ "test:semantic": "playwright test",
35
+ "test:production": "vite build --config test-ui/vite.config.ts && WPIC_TEST_MODE=preview playwright test",
36
+ "test:consumers": "playwright test --config playwright.consumers.config.ts",
37
+ "prepack": "npm run build"
34
38
  },
35
39
  "peerDependencies": {
36
40
  "@floating-ui/vue": ">=1",
@@ -45,6 +49,8 @@
45
49
  "@vitejs/plugin-vue": "^6.0.0",
46
50
  "lucide-vue-next": "^0.577.0",
47
51
  "pinia": "^3.0.4",
52
+ "postcss": "^8.5.28",
53
+ "postcss-selector-parser": "^7.1.6",
48
54
  "tailwindcss": "^4.2.1",
49
55
  "typescript": "^5.0.0",
50
56
  "vite": "^7.3.1",
package/src/style.css CHANGED
@@ -11,55 +11,55 @@
11
11
 
12
12
  :root {
13
13
  /* Surfaces */
14
- --bg-main: #fafafa;
15
- --bg-card: #ffffff;
16
- --bg-input: #f4f4f5;
14
+ --wpic-legacy-bg-main: #fafafa;
15
+ --wpic-legacy-bg-card: #ffffff;
16
+ --wpic-legacy-bg-input: #f4f4f5;
17
17
 
18
18
  /* Borders */
19
- --border-subtle: rgba(0, 0, 0, 0.05);
20
- --border-strong: #e4e4e7;
21
- --border-hover: #d4d4d8;
19
+ --wpic-legacy-border-subtle: rgba(0, 0, 0, 0.05);
20
+ --wpic-legacy-border-strong: #e4e4e7;
21
+ --wpic-legacy-border-hover: #d4d4d8;
22
22
 
23
23
  /* Text */
24
- --text-main: #18181b;
25
- --text-muted: #52525b;
26
- --text-dim: #a1a1aa;
24
+ --wpic-legacy-text-main: #18181b;
25
+ --wpic-legacy-text-muted: #52525b;
26
+ --wpic-legacy-text-dim: #a1a1aa;
27
27
 
28
28
  /* Accents */
29
- --color-indigo-neon: #6366f1;
30
- --color-rose-neon: #f43f5e;
31
- --color-teal-neon: #10b981;
32
- --color-wpic-green: #85C531;
29
+ --wpic-legacy-color-indigo-neon: #6366f1;
30
+ --wpic-legacy-color-rose-neon: #f43f5e;
31
+ --wpic-legacy-color-teal-neon: #10b981;
32
+ --wpic-legacy-color-wpic-green: #85C531;
33
33
  }
34
34
 
35
35
  .dark {
36
- --bg-main: #09090b;
37
- --bg-card: #0c0c0e;
38
- --bg-input: #111113;
36
+ --wpic-legacy-bg-main: #09090b;
37
+ --wpic-legacy-bg-card: #0c0c0e;
38
+ --wpic-legacy-bg-input: #111113;
39
39
 
40
- --border-subtle: rgba(255, 255, 255, 0.04);
41
- --border-strong: #1d1d20;
42
- --border-hover: #27272a;
40
+ --wpic-legacy-border-subtle: rgba(255, 255, 255, 0.04);
41
+ --wpic-legacy-border-strong: #1d1d20;
42
+ --wpic-legacy-border-hover: #27272a;
43
43
 
44
- --text-main: #f4f4f5;
45
- --text-muted: #a1a1aa;
46
- --text-dim: #52525b;
44
+ --wpic-legacy-text-main: #f4f4f5;
45
+ --wpic-legacy-text-muted: #a1a1aa;
46
+ --wpic-legacy-text-dim: #52525b;
47
47
  }
48
48
 
49
49
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
50
- .bg-main { background-color: var(--bg-main); }
51
- .bg-card { background-color: var(--bg-card); }
52
- .bg-input { background-color: var(--bg-input); }
50
+ .wpic-legacy-bg-main { background-color: var(--wpic-legacy-bg-main); }
51
+ .wpic-legacy-bg-card { background-color: var(--wpic-legacy-bg-card); }
52
+ .wpic-legacy-bg-input { background-color: var(--wpic-legacy-bg-input); }
53
53
 
54
54
  /* ── Borders ──────────────────────────────────────────────────────────── */
55
- .border-subtle { border-color: var(--border-subtle); }
56
- .border-strong { border-color: var(--border-strong); }
57
- .border-hover { border-color: var(--border-hover); }
55
+ .wpic-legacy-border-subtle { border-color: var(--wpic-legacy-border-subtle); }
56
+ .wpic-legacy-border-strong { border-color: var(--wpic-legacy-border-strong); }
57
+ .wpic-legacy-border-hover { border-color: var(--wpic-legacy-border-hover); }
58
58
 
59
59
  /* WCard owns its border colors. This avoids a missing host Tailwind utility
60
60
  falling back to currentColor and producing a black header separator. */
61
61
  .wpic-card--bordered {
62
- border: 1px solid var(--border-strong);
62
+ border: 1px solid var(--wpic-legacy-border-strong);
63
63
  }
64
64
  .wpic-card--borderless {
65
65
  border: 0;
@@ -67,6 +67,10 @@
67
67
  .wpic-card--padding-sm { --wpic-card-padding-x: 0.75rem; --wpic-card-padding-y: 0.75rem; --wpic-card-empty-padding-y: 0.75rem; }
68
68
  .wpic-card--padding-md { --wpic-card-padding-x: 1rem; --wpic-card-padding-y: 1rem; --wpic-card-empty-padding-y: 1rem; }
69
69
  .wpic-card--padding-lg { --wpic-card-padding-x: 1.5rem; --wpic-card-padding-y: 1.5rem; --wpic-card-empty-padding-y: 1.5rem; }
70
+ .wpic-card__title > :where(h1, h2, h3, h4, h5, h6) {
71
+ font: inherit;
72
+ margin: 0;
73
+ }
70
74
  .wpic-card__header {
71
75
  padding: 0.75rem var(--wpic-card-padding-x);
72
76
  }
@@ -80,13 +84,13 @@
80
84
  padding: 0.75rem var(--wpic-card-padding-x);
81
85
  }
82
86
  .wpic-card__header--divided {
83
- border-bottom: 1px solid var(--border-subtle);
87
+ border-bottom: 1px solid var(--wpic-legacy-border-subtle);
84
88
  }
85
89
  .wpic-card__header--undivided {
86
90
  border-bottom: 0;
87
91
  }
88
92
  .wpic-card__footer {
89
- border-top: 1px solid var(--border-subtle);
93
+ border-top: 1px solid var(--wpic-legacy-border-subtle);
90
94
  }
91
95
 
92
96
  /* ── Shared surface padding scale ─────────────────────────────────────────
@@ -110,49 +114,49 @@
110
114
  }
111
115
 
112
116
  /* ── Text ─────────────────────────────────────────────────────────────── */
113
- .text-main { color: var(--text-main); }
114
- .text-muted { color: var(--text-muted); }
115
- .text-dim { color: var(--text-dim); }
117
+ .wpic-legacy-text-main { color: var(--wpic-legacy-text-main); }
118
+ .wpic-legacy-text-muted { color: var(--wpic-legacy-text-muted); }
119
+ .wpic-legacy-text-dim { color: var(--wpic-legacy-text-dim); }
116
120
 
117
121
  /* ── Typography ───────────────────────────────────────────────────────── */
118
- .label-xs {
122
+ .wpic-legacy-label-xs {
119
123
  font-size: 11px;
120
124
  font-weight: 500;
121
125
  letter-spacing: 0.01em;
122
- color: var(--text-dim);
126
+ color: var(--wpic-legacy-text-dim);
123
127
  }
124
- .heading-sm {
128
+ .wpic-legacy-heading-sm {
125
129
  font-size: 0.875rem;
126
130
  font-weight: 600;
127
131
  letter-spacing: -0.025em;
128
- color: var(--text-main);
132
+ color: var(--wpic-legacy-text-main);
129
133
  }
130
134
 
131
135
  /* ── Status badges ────────────────────────────────────────────────────── */
132
- .status-ok { color: rgb(52 211 153); background-color: rgb(52 211 153 / 0.05); border: 1px solid rgb(52 211 153 / 0.1); }
133
- .status-low { color: rgb(251 191 36); background-color: rgb(251 191 36 / 0.05); border: 1px solid rgb(251 191 36 / 0.1); }
134
- .status-error { color: rgb(251 113 133); background-color: rgb(251 113 133 / 0.05); border: 1px solid rgb(251 113 133 / 0.1); }
136
+ .wpic-legacy-status-ok { color: rgb(52 211 153); background-color: rgb(52 211 153 / 0.05); border: 1px solid rgb(52 211 153 / 0.1); }
137
+ .wpic-legacy-status-low { color: rgb(251 191 36); background-color: rgb(251 191 36 / 0.05); border: 1px solid rgb(251 191 36 / 0.1); }
138
+ .wpic-legacy-status-error { color: rgb(251 113 133); background-color: rgb(251 113 133 / 0.05); border: 1px solid rgb(251 113 133 / 0.1); }
135
139
 
136
140
  /* ── Glass surface ────────────────────────────────────────────────────── */
137
- .glass {
141
+ .wpic-legacy-glass {
138
142
  backdrop-filter: blur(12px);
139
143
  -webkit-backdrop-filter: blur(12px);
140
144
  background-color: rgba(255, 255, 255, 0.05);
141
145
  }
142
146
 
143
147
  /* ── Table header ─────────────────────────────────────────────────────── */
144
- .th {
148
+ .wpic-legacy-th {
145
149
  font-size: 11px;
146
150
  font-weight: 600;
147
151
  letter-spacing: 0.01em;
148
- color: var(--text-dim);
152
+ color: var(--wpic-legacy-text-dim);
149
153
  padding: 0.75rem 1rem;
150
- border-bottom: 1px solid var(--border-subtle);
154
+ border-bottom: 1px solid var(--wpic-legacy-border-subtle);
151
155
  text-align: left;
152
156
  }
153
157
 
154
158
  /* ── Buttons ──────────────────────────────────────────────────────────── */
155
- .btn-primary {
159
+ .wpic-legacy-btn-primary {
156
160
  display: inline-flex; align-items: center; justify-content: center;
157
161
  height: 2rem; padding: 0 0.75rem;
158
162
  border-radius: 0.5rem;
@@ -162,23 +166,23 @@
162
166
  transition: background-color 0.15s;
163
167
  cursor: pointer;
164
168
  }
165
- .btn-primary:hover { background-color: #ffffff; }
166
- .dark .btn-primary { background-color: #27272a; color: #f4f4f5; }
167
- .dark .btn-primary:hover { background-color: #3f3f46; }
169
+ .wpic-legacy-btn-primary:hover { background-color: #ffffff; }
170
+ .dark .wpic-legacy-btn-primary { background-color: #27272a; color: #f4f4f5; }
171
+ .dark .wpic-legacy-btn-primary:hover { background-color: #3f3f46; }
168
172
 
169
- .btn-secondary {
173
+ .wpic-legacy-btn-secondary {
170
174
  display: inline-flex; align-items: center; justify-content: center;
171
175
  height: 2rem; padding: 0 0.75rem;
172
176
  border-radius: 0.5rem;
173
- border: 1px solid var(--border-subtle);
174
- color: var(--text-muted);
177
+ border: 1px solid var(--wpic-legacy-border-subtle);
178
+ color: var(--wpic-legacy-text-muted);
175
179
  font-size: 0.875rem; font-weight: 500;
176
180
  transition: all 0.15s;
177
181
  cursor: pointer;
178
182
  }
179
- .btn-secondary:hover { color: var(--text-main); background-color: rgba(255,255,255,0.05); }
183
+ .wpic-legacy-btn-secondary:hover { color: var(--wpic-legacy-text-main); background-color: rgba(255,255,255,0.05); }
180
184
 
181
- .btn-indigo {
185
+ .wpic-legacy-btn-indigo {
182
186
  display: inline-flex; align-items: center; justify-content: center;
183
187
  height: 2rem; padding: 0 0.75rem;
184
188
  border-radius: 0.5rem;
@@ -189,25 +193,25 @@
189
193
  transition: background-color 0.15s;
190
194
  cursor: pointer;
191
195
  }
192
- .btn-indigo:hover { background-color: #6366f1; }
196
+ .wpic-legacy-btn-indigo:hover { background-color: #6366f1; }
193
197
 
194
- .btn-destructive {
198
+ .wpic-legacy-btn-destructive {
195
199
  display: inline-flex; align-items: center; justify-content: center;
196
200
  background-color: #dc2626; color: #ffffff;
197
201
  font-size: 0.875rem; font-weight: 600;
198
202
  border-radius: 0.5rem;
199
203
  cursor: pointer;
200
204
  }
201
- .btn-destructive:hover { background-color: #ef4444; }
202
- .btn-destructive:active { background-color: #b91c1c; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }
205
+ .wpic-legacy-btn-destructive:hover { background-color: #ef4444; }
206
+ .wpic-legacy-btn-destructive:active { background-color: #b91c1c; box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); }
203
207
 
204
208
  /* ── Spinner ──────────────────────────────────────────────────────────── */
205
209
  @keyframes wpic-spin { to { transform: rotate(360deg); } }
206
210
 
207
- .spinner {
211
+ .wpic-legacy-spinner {
208
212
  width: 1.25rem; height: 1.25rem;
209
213
  border-radius: 9999px;
210
- border: 2px solid var(--border-strong);
214
+ border: 2px solid var(--wpic-legacy-border-strong);
211
215
  border-top-color: transparent;
212
216
  animation: wpic-spin 0.7s linear infinite;
213
217
  }
@@ -223,12 +227,12 @@
223
227
  .wpic-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
224
228
 
225
229
  /* ── Range slider ─────────────────────────────────────────────────────── */
226
- input[type="range"].slider-themed {
230
+ input[type="range"].wpic-legacy-slider-themed {
227
231
  -webkit-appearance: none; appearance: none;
228
232
  height: 4px; border-radius: 2px;
229
- background: var(--border-strong); outline: none;
233
+ background: var(--wpic-legacy-border-strong); outline: none;
230
234
  }
231
- input[type="range"].slider-themed::-webkit-slider-thumb {
235
+ input[type="range"].wpic-legacy-slider-themed::-webkit-slider-thumb {
232
236
  -webkit-appearance: none;
233
237
  width: 14px; height: 14px;
234
238
  border-radius: 50%; background: #85C531; cursor: pointer;
@@ -238,39 +242,39 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
238
242
  LEGACY — v0.2 wpic-prefixed classes (backward compat)
239
243
  ═══════════════════════════════════════════════════════════════════════════ */
240
244
 
241
- .bg-wpic-black { background-color: var(--bg-main); }
242
- .bg-wpic-dark { background-color: var(--bg-main); }
243
- .bg-wpic-card { background-color: var(--bg-card); }
244
- .bg-wpic-input { background-color: var(--bg-input); }
245
- .bg-wpic-nav-active { background-color: var(--bg-input); }
246
- .bg-wpic-border { background-color: var(--border-strong); }
247
-
248
- .bg-wpic-card-30 { background-color: color-mix(in srgb, var(--bg-card) 30%, transparent); }
249
- .bg-wpic-card-50 { background-color: color-mix(in srgb, var(--bg-card) 50%, transparent); }
250
- .bg-wpic-card-80 { background-color: color-mix(in srgb, var(--bg-card) 80%, transparent); }
251
- .bg-wpic-dark-50 { background-color: color-mix(in srgb, var(--bg-main) 50%, transparent); }
252
- .bg-wpic-input-50 { background-color: color-mix(in srgb, var(--bg-input) 50%, transparent); }
253
- .bg-wpic-border-30 { background-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
254
- .bg-wpic-border-40 { background-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
255
- .bg-wpic-border-50 { background-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
256
-
257
- .border-wpic-border { border-color: var(--border-strong); }
258
- .border-wpic-border-30 { border-color: color-mix(in srgb, var(--border-strong) 30%, transparent); }
259
- .border-wpic-border-40 { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
260
- .border-wpic-border-50 { border-color: color-mix(in srgb, var(--border-strong) 50%, transparent); }
261
- .border-wpic-border-60 { border-color: color-mix(in srgb, var(--border-strong) 60%, transparent); }
262
- .border-wpic-border-80 { border-color: color-mix(in srgb, var(--border-strong) 80%, transparent); }
263
- .border-wpic-border-hover { border-color: var(--border-hover); }
264
- .divide-wpic-border-40 > * + * { border-color: color-mix(in srgb, var(--border-strong) 40%, transparent); }
265
-
266
- .text-wpic-text { color: var(--text-main); }
267
- .text-wpic-muted { color: var(--text-muted); }
268
- .text-wpic-dim { color: var(--text-dim); }
269
- .text-wpic-dim-20 { color: color-mix(in srgb, var(--text-dim) 20%, transparent); }
270
- .text-wpic-dim-30 { color: color-mix(in srgb, var(--text-dim) 30%, transparent); }
271
- .text-wpic-dim-40 { color: color-mix(in srgb, var(--text-dim) 40%, transparent); }
272
- .text-wpic-dim-50 { color: color-mix(in srgb, var(--text-dim) 50%, transparent); }
273
- .text-wpic-dim-60 { color: color-mix(in srgb, var(--text-dim) 60%, transparent); }
245
+ .bg-wpic-black { background-color: var(--wpic-legacy-bg-main); }
246
+ .bg-wpic-dark { background-color: var(--wpic-legacy-bg-main); }
247
+ .bg-wpic-card { background-color: var(--wpic-legacy-bg-card); }
248
+ .bg-wpic-input { background-color: var(--wpic-legacy-bg-input); }
249
+ .bg-wpic-nav-active { background-color: var(--wpic-legacy-bg-input); }
250
+ .bg-wpic-border { background-color: var(--wpic-legacy-border-strong); }
251
+
252
+ .bg-wpic-card-30 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-card) 30%, transparent); }
253
+ .bg-wpic-card-50 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-card) 50%, transparent); }
254
+ .bg-wpic-card-80 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-card) 80%, transparent); }
255
+ .bg-wpic-dark-50 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-main) 50%, transparent); }
256
+ .bg-wpic-input-50 { background-color: color-mix(in srgb, var(--wpic-legacy-bg-input) 50%, transparent); }
257
+ .bg-wpic-border-30 { background-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 30%, transparent); }
258
+ .bg-wpic-border-40 { background-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 40%, transparent); }
259
+ .bg-wpic-border-50 { background-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 50%, transparent); }
260
+
261
+ .border-wpic-border { border-color: var(--wpic-legacy-border-strong); }
262
+ .border-wpic-border-30 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 30%, transparent); }
263
+ .border-wpic-border-40 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 40%, transparent); }
264
+ .border-wpic-border-50 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 50%, transparent); }
265
+ .border-wpic-border-60 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 60%, transparent); }
266
+ .border-wpic-border-80 { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 80%, transparent); }
267
+ .border-wpic-border-hover { border-color: var(--wpic-legacy-border-hover); }
268
+ .divide-wpic-border-40 > * + * { border-color: color-mix(in srgb, var(--wpic-legacy-border-strong) 40%, transparent); }
269
+
270
+ .text-wpic-text { color: var(--wpic-legacy-text-main); }
271
+ .text-wpic-muted { color: var(--wpic-legacy-text-muted); }
272
+ .text-wpic-dim { color: var(--wpic-legacy-text-dim); }
273
+ .text-wpic-dim-20 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 20%, transparent); }
274
+ .text-wpic-dim-30 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 30%, transparent); }
275
+ .text-wpic-dim-40 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 40%, transparent); }
276
+ .text-wpic-dim-50 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 50%, transparent); }
277
+ .text-wpic-dim-60 { color: color-mix(in srgb, var(--wpic-legacy-text-dim) 60%, transparent); }
274
278
 
275
279
  .text-wpic-green { color: #85C531; }
276
280
  .bg-wpic-green { background-color: #85C531; }
@@ -385,10 +389,10 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
385
389
  border-color: var(--wpic-border);
386
390
  color: var(--wpic-text);
387
391
  }
388
- .wpic-theme.wpic-popover-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
389
- .wpic-theme.wpic-popover-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
390
- .wpic-theme.wpic-popover-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
391
- .wpic-theme.wpic-popover-panel :is(.border-zinc-100, .border-zinc-200) { border-color: var(--wpic-border); }
392
+ .wpic-theme.wpic-popover-panel :is(.wpic\:text-zinc-900, .wpic\:text-zinc-800, .wpic\:text-zinc-700, .wpic\:text-zinc-200, .wpic\:text-zinc-100) { color: var(--wpic-text); }
393
+ .wpic-theme.wpic-popover-panel :is(.wpic\:text-zinc-500, .wpic\:text-zinc-400) { color: var(--wpic-dim); }
394
+ .wpic-theme.wpic-popover-panel :is(.wpic\:bg-zinc-100, .wpic\:bg-zinc-800) { background: var(--wpic-raised); }
395
+ .wpic-theme.wpic-popover-panel :is(.wpic\:border-zinc-100, .wpic\:border-zinc-200) { border-color: var(--wpic-border); }
392
396
  .wpic-theme .wpic-select-option:hover:not(:disabled) { background: var(--wpic-raised); }
393
397
  .wpic-theme .wpic-calendar-day[aria-pressed="true"] { background: var(--wpic-accent); color: var(--wpic-on-accent); }
394
398
  .wpic-theme .wpic-calendar-day:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--wpic-raised); }
@@ -437,18 +441,18 @@ input[type="range"].slider-themed::-webkit-slider-thumb {
437
441
  background: #090a05;
438
442
  border: 0;
439
443
  }
440
- .wpic-theme .wpic-modal-panel :is(.text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-200, .text-zinc-100) { color: var(--wpic-text); }
441
- .wpic-theme .wpic-modal-panel :is(.text-zinc-500, .text-zinc-400) { color: var(--wpic-dim); }
442
- .wpic-theme .wpic-modal-panel :is(.bg-zinc-100, .bg-zinc-800) { background: var(--wpic-raised); }
443
- .wpic-theme .wpic-modal-panel :is(.border-zinc-100, .border-zinc-200) { border-color: var(--wpic-border); }
444
+ .wpic-theme .wpic-modal-panel :is(.wpic\:text-zinc-900, .wpic\:text-zinc-800, .wpic\:text-zinc-700, .wpic\:text-zinc-200, .wpic\:text-zinc-100) { color: var(--wpic-text); }
445
+ .wpic-theme .wpic-modal-panel :is(.wpic\:text-zinc-500, .wpic\:text-zinc-400) { color: var(--wpic-dim); }
446
+ .wpic-theme .wpic-modal-panel :is(.wpic\:bg-zinc-100, .wpic\:bg-zinc-800) { background: var(--wpic-raised); }
447
+ .wpic-theme .wpic-modal-panel :is(.wpic\:border-zinc-100, .wpic\:border-zinc-200) { border-color: var(--wpic-border); }
444
448
 
445
449
  /* Opaque row surfaces prevent scrolled content showing through fixed cells.
446
450
  Keep header, summary and hover surfaces in sync with the fixed column. */
447
451
  .wpic-table__scroll { isolation: isolate; }
448
452
  .wpic-table__header,
449
- .wpic-table__row { background: var(--wpic-surface, var(--bg-card)); }
453
+ .wpic-table__row { background: var(--wpic-surface, var(--wpic-legacy-bg-card)); }
450
454
  .wpic-table__summary,
451
- .wpic-table__row:hover { background: var(--wpic-raised, var(--bg-input)); }
455
+ .wpic-table__row:hover { background: var(--wpic-raised, var(--wpic-legacy-bg-input)); }
452
456
  .wpic-table__sticky {
453
457
  background: inherit;
454
458
  }