secure-ui-components 0.2.6 → 0.2.7
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/README.md +43 -24
- package/dist/components/secure-form/secure-form.d.ts.map +1 -1
- package/dist/components/secure-form/secure-form.js +1 -1
- package/dist/components/secure-form/secure-form.js.map +1 -1
- package/dist/components/secure-table/secure-table.d.ts.map +1 -1
- package/dist/components/secure-table/secure-table.js +23 -30
- package/dist/components/secure-table/secure-table.js.map +1 -1
- package/dist/core/base-component.d.ts +14 -8
- package/dist/core/base-component.d.ts.map +1 -1
- package/dist/core/base-component.js +1 -1
- package/dist/core/base-component.js.map +1 -1
- package/dist/package.json +8 -4
- package/dist/secure-ui.bundle.js +384 -0
- package/dist/styles/secure-ui.css +2 -0
- package/dist/styles/shared.css +399 -0
- package/package.json +8 -4
|
@@ -0,0 +1,399 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared Styles for Secure-UI Pages
|
|
3
|
+
* Basic, clean styling for documentation and test pages
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Reset and Base Styles */
|
|
7
|
+
@import 'tokens.css';
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
16
|
+
line-height: 1.6;
|
|
17
|
+
color: #333;
|
|
18
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
padding: 20px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Container */
|
|
24
|
+
.container {
|
|
25
|
+
/* max-width: 900px; */
|
|
26
|
+
width: min(100%, 1024px);
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Header Styles */
|
|
31
|
+
header {
|
|
32
|
+
text-align: center;
|
|
33
|
+
color: white;
|
|
34
|
+
margin-bottom: 40px;
|
|
35
|
+
padding: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
header h1 {
|
|
39
|
+
font-size: 2.5rem;
|
|
40
|
+
margin-bottom: 10px;
|
|
41
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
header .subtitle {
|
|
45
|
+
font-size: 1.1rem;
|
|
46
|
+
opacity: 0.95;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Card Styles */
|
|
50
|
+
.card {
|
|
51
|
+
background: white;
|
|
52
|
+
border-radius: 12px;
|
|
53
|
+
padding: 32px;
|
|
54
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
55
|
+
margin-bottom: 24px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Section Styles */
|
|
59
|
+
.section {
|
|
60
|
+
margin-bottom: 32px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.section:last-child {
|
|
64
|
+
margin-bottom: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.section h2 {
|
|
68
|
+
font-size: 1.5rem;
|
|
69
|
+
color: #2c3e50;
|
|
70
|
+
margin-bottom: 16px;
|
|
71
|
+
padding-bottom: 8px;
|
|
72
|
+
border-bottom: 2px solid #e0e0e0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.section h3 {
|
|
76
|
+
font-size: 1.2rem;
|
|
77
|
+
color: #34495e;
|
|
78
|
+
margin: 20px 0 12px 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.section p {
|
|
82
|
+
margin-bottom: 12px;
|
|
83
|
+
color: #555;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Info Boxes */
|
|
87
|
+
.info-box {
|
|
88
|
+
background: #e3f2fd;
|
|
89
|
+
border-left: 4px solid #2196F3;
|
|
90
|
+
padding: 16px;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
margin-bottom: 24px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.info-box.warning {
|
|
96
|
+
background: #fff3e0;
|
|
97
|
+
border-left-color: #ff9800;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.info-box.success {
|
|
101
|
+
background: #e8f5e9;
|
|
102
|
+
border-left-color: #4caf50;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.info-box.danger {
|
|
106
|
+
background: #ffebee;
|
|
107
|
+
border-left-color: #f44336;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.info-box strong {
|
|
111
|
+
display: block;
|
|
112
|
+
margin-bottom: 8px;
|
|
113
|
+
color: #1976D2;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.info-box.warning strong {
|
|
117
|
+
color: #f57c00;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.info-box.success strong {
|
|
121
|
+
color: #388e3c;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.info-box.danger strong {
|
|
125
|
+
color: #d32f2f;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.info-box p {
|
|
129
|
+
margin: 8px 0;
|
|
130
|
+
color: #555;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.info-box ul {
|
|
134
|
+
margin-left: 20px;
|
|
135
|
+
color: #555;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.info-box li {
|
|
139
|
+
margin-bottom: 4px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Code and Pre */
|
|
143
|
+
code {
|
|
144
|
+
background: #f5f5f5;
|
|
145
|
+
padding: 2px 6px;
|
|
146
|
+
border-radius: 3px;
|
|
147
|
+
font-family: 'Courier New', Courier, monospace;
|
|
148
|
+
font-size: 0.9em;
|
|
149
|
+
color: #d63384;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
pre {
|
|
153
|
+
background: #2d2d2d;
|
|
154
|
+
color: #f8f8f2;
|
|
155
|
+
padding: 16px;
|
|
156
|
+
border-radius: 6px;
|
|
157
|
+
overflow-x: auto;
|
|
158
|
+
margin: 16px 0;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
pre code {
|
|
162
|
+
background: transparent;
|
|
163
|
+
color: inherit;
|
|
164
|
+
padding: 0;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* Output Box */
|
|
168
|
+
.output-box {
|
|
169
|
+
background: #f8f9fa;
|
|
170
|
+
border: 1px solid #dee2e6;
|
|
171
|
+
border-radius: 6px;
|
|
172
|
+
padding: 16px;
|
|
173
|
+
font-family: 'Courier New', monospace;
|
|
174
|
+
font-size: 0.9rem;
|
|
175
|
+
max-height: 300px;
|
|
176
|
+
overflow-y: auto;
|
|
177
|
+
white-space: pre-wrap;
|
|
178
|
+
word-break: break-all;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.output-box.empty {
|
|
182
|
+
color: #999;
|
|
183
|
+
font-style: italic;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Button Styles */
|
|
187
|
+
button {
|
|
188
|
+
padding: 12px 24px;
|
|
189
|
+
border: none;
|
|
190
|
+
border-radius: 6px;
|
|
191
|
+
font-size: 1rem;
|
|
192
|
+
font-weight: 600;
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
transition: all 0.2s ease;
|
|
195
|
+
font-family: inherit;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
button:hover {
|
|
199
|
+
transform: translateY(-2px);
|
|
200
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
button:active {
|
|
204
|
+
transform: translateY(0);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
button:disabled {
|
|
208
|
+
opacity: 0.6;
|
|
209
|
+
cursor: not-allowed;
|
|
210
|
+
transform: none;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
button.primary {
|
|
214
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
215
|
+
color: white;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
button.secondary {
|
|
219
|
+
background: #f5f5f5;
|
|
220
|
+
color: #333;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
button.secondary:hover {
|
|
224
|
+
background: #e0e0e0;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
button.success {
|
|
228
|
+
background: #4caf50;
|
|
229
|
+
color: white;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
button.danger {
|
|
233
|
+
background: #f44336;
|
|
234
|
+
color: white;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* Form Styles */
|
|
238
|
+
form {
|
|
239
|
+
margin: 20px 0;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.form-actions {
|
|
243
|
+
margin-top: 24px;
|
|
244
|
+
display: flex;
|
|
245
|
+
gap: 12px;
|
|
246
|
+
flex-wrap: wrap;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* Badge Styles */
|
|
250
|
+
.badge {
|
|
251
|
+
display: inline-block;
|
|
252
|
+
padding: 4px 8px;
|
|
253
|
+
border-radius: 4px;
|
|
254
|
+
font-size: 0.85rem;
|
|
255
|
+
font-weight: 600;
|
|
256
|
+
text-transform: uppercase;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.badge.public {
|
|
260
|
+
background: #e0e0e0;
|
|
261
|
+
color: #666;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.badge.authenticated {
|
|
265
|
+
background: #e3f2fd;
|
|
266
|
+
color: #1976d2;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.badge.sensitive {
|
|
270
|
+
background: #fff3e0;
|
|
271
|
+
color: #f57c00;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.badge.critical {
|
|
275
|
+
background: #ffebee;
|
|
276
|
+
color: #d32f2f;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Tier Icons */
|
|
280
|
+
.tier-icon {
|
|
281
|
+
width: 40px;
|
|
282
|
+
height: 40px;
|
|
283
|
+
border-radius: 50%;
|
|
284
|
+
display: inline-flex;
|
|
285
|
+
align-items: center;
|
|
286
|
+
justify-content: center;
|
|
287
|
+
font-size: 20px;
|
|
288
|
+
margin-right: 12px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.tier-icon.public {
|
|
292
|
+
background: #e0e0e0;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.tier-icon.authenticated {
|
|
296
|
+
background: #e3f2fd;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.tier-icon.sensitive {
|
|
300
|
+
background: #fff3e0;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.tier-icon.critical {
|
|
304
|
+
background: #ffebee;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* List Styles */
|
|
308
|
+
ul {
|
|
309
|
+
margin: 16px 0 16px 24px;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
ol {
|
|
313
|
+
margin: 16px 0 16px 24px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
li {
|
|
317
|
+
margin-bottom: 8px;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* Link Styles */
|
|
321
|
+
a {
|
|
322
|
+
color: #667eea;
|
|
323
|
+
text-decoration: none;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
a:hover {
|
|
327
|
+
text-decoration: underline;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* Table Styles */
|
|
331
|
+
table {
|
|
332
|
+
width: 100%;
|
|
333
|
+
border-collapse: collapse;
|
|
334
|
+
margin: 16px 0;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
th {
|
|
338
|
+
background: #f5f5f5;
|
|
339
|
+
padding: 12px;
|
|
340
|
+
text-align: left;
|
|
341
|
+
font-weight: 600;
|
|
342
|
+
border-bottom: 2px solid #ddd;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
td {
|
|
346
|
+
padding: 12px;
|
|
347
|
+
border-bottom: 1px solid #eee;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
tr:hover {
|
|
351
|
+
background: #f9f9f9;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
/* Utility Classes */
|
|
355
|
+
.text-center {
|
|
356
|
+
text-align: center;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.text-right {
|
|
360
|
+
text-align: right;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.mt-1 { margin-top: 8px; }
|
|
364
|
+
.mt-2 { margin-top: 16px; }
|
|
365
|
+
.mt-3 { margin-top: 24px; }
|
|
366
|
+
.mt-4 { margin-top: 32px; }
|
|
367
|
+
|
|
368
|
+
.mb-1 { margin-bottom: 8px; }
|
|
369
|
+
.mb-2 { margin-bottom: 16px; }
|
|
370
|
+
.mb-3 { margin-bottom: 24px; }
|
|
371
|
+
.mb-4 { margin-bottom: 32px; }
|
|
372
|
+
|
|
373
|
+
.p-1 { padding: 8px; }
|
|
374
|
+
.p-2 { padding: 16px; }
|
|
375
|
+
.p-3 { padding: 24px; }
|
|
376
|
+
.p-4 { padding: 32px; }
|
|
377
|
+
|
|
378
|
+
/* Responsive */
|
|
379
|
+
@media (max-width: 768px) {
|
|
380
|
+
body {
|
|
381
|
+
padding: 10px;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
header h1 {
|
|
385
|
+
font-size: 2rem;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.card {
|
|
389
|
+
padding: 20px;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.form-actions {
|
|
393
|
+
flex-direction: column;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
button {
|
|
397
|
+
width: 100%;
|
|
398
|
+
}
|
|
399
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "secure-ui-components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.7",
|
|
4
4
|
"description": "Security-first web component library with zero dependencies",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -63,7 +63,9 @@
|
|
|
63
63
|
"types": "./dist/core/security-config.d.ts",
|
|
64
64
|
"import": "./dist/core/security-config.js"
|
|
65
65
|
},
|
|
66
|
-
"./tokens.css": "./dist/styles/tokens.css"
|
|
66
|
+
"./tokens.css": "./dist/styles/tokens.css",
|
|
67
|
+
"./secure-ui.css": "./dist/styles/secure-ui.css",
|
|
68
|
+
"./bundle": "./dist/secure-ui.bundle.js"
|
|
67
69
|
},
|
|
68
70
|
"files": [
|
|
69
71
|
"dist",
|
|
@@ -76,7 +78,8 @@
|
|
|
76
78
|
"build:ts": "tsc",
|
|
77
79
|
"build:css": "node build/css-inliner.js",
|
|
78
80
|
"build:minify": "node build/js-minifier.js",
|
|
79
|
-
"build": "
|
|
81
|
+
"build:bundle": "node build/bundler.js",
|
|
82
|
+
"build": "npm run clean && npm run build:ts && npm run build:css && npm run build:minify && npm run build:bundle",
|
|
80
83
|
"build:dev": "npm run build:ts && node build/dev-build.js",
|
|
81
84
|
"serve": "node server.js",
|
|
82
85
|
"serve:dev": "node --watch server.js",
|
|
@@ -87,12 +90,13 @@
|
|
|
87
90
|
"test": "vitest run",
|
|
88
91
|
"test:watch": "vitest",
|
|
89
92
|
"test:coverage": "vitest run --coverage",
|
|
93
|
+
"test:build": "vitest run --config vitest.build.config.ts",
|
|
90
94
|
"size": "size-limit",
|
|
91
95
|
"audit:check": "npm audit --audit-level=high",
|
|
92
96
|
"test:e2e": "npm run build:ts && npx playwright test",
|
|
93
97
|
"test:e2e:headed": "npm run build:ts && npx playwright test --headed",
|
|
94
98
|
"test:e2e:ui": "npx playwright test --ui",
|
|
95
|
-
"prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build"
|
|
99
|
+
"prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build && npm run test:build"
|
|
96
100
|
},
|
|
97
101
|
"keywords": [
|
|
98
102
|
"web-components",
|