@duskmoon-dev/core 1.2.0 → 1.3.0
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/components/collapse.css +208 -8
- package/dist/components/index.css +401 -8
- package/dist/components/navigation.css +193 -0
- package/dist/esm/components/collapse.js +208 -8
- package/dist/esm/components/navigation.js +193 -0
- package/dist/index.css +401 -8
- package/package.json +1 -1
|
@@ -7,18 +7,93 @@ export const css = `/**
|
|
|
7
7
|
@layer components {
|
|
8
8
|
/* Base Collapse */
|
|
9
9
|
.collapse {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
border-radius: 0.5rem;
|
|
13
|
+
background-color: var(--color-surface);
|
|
14
|
+
/* Override Tailwind's visibility: collapse utility */
|
|
15
|
+
visibility: visible !important;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Collapse Trigger */
|
|
19
|
+
.collapse-trigger {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: space-between;
|
|
23
|
+
width: 100%;
|
|
24
|
+
padding: 0.75rem 1rem;
|
|
25
|
+
font-size: 1rem;
|
|
26
|
+
font-weight: 500;
|
|
27
|
+
color: var(--color-on-surface);
|
|
28
|
+
background-color: transparent;
|
|
29
|
+
border: none;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
transition: background-color 150ms ease-in-out;
|
|
32
|
+
text-align: left;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.collapse-trigger:hover {
|
|
36
|
+
background-color: var(--color-surface-container);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.collapse-trigger:focus-visible {
|
|
40
|
+
outline: 2px solid var(--color-primary);
|
|
41
|
+
outline-offset: -2px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Collapse Icon */
|
|
45
|
+
.collapse-icon {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
width: 1.5rem;
|
|
50
|
+
height: 1.5rem;
|
|
51
|
+
transition: transform 300ms ease-in-out;
|
|
52
|
+
flex-shrink: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Collapse Content - hidden by default */
|
|
56
|
+
.collapse-content {
|
|
10
57
|
display: grid;
|
|
11
58
|
grid-template-rows: 0fr;
|
|
12
59
|
transition: grid-template-rows 300ms ease-in-out;
|
|
60
|
+
overflow: hidden;
|
|
13
61
|
}
|
|
14
62
|
|
|
15
|
-
.collapse
|
|
63
|
+
.collapse-content > * {
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
padding: 0 1rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Open State */
|
|
69
|
+
.collapse-open .collapse-content {
|
|
16
70
|
grid-template-rows: 1fr;
|
|
17
71
|
}
|
|
18
72
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
73
|
+
.collapse-open .collapse-content > * {
|
|
74
|
+
padding: 0 1rem 1rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.collapse-open .collapse-icon {
|
|
78
|
+
transform: rotate(180deg);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Closed State (explicit) */
|
|
82
|
+
.collapse-closed .collapse-content {
|
|
83
|
+
grid-template-rows: 0fr;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Legacy show class for backwards compatibility */
|
|
87
|
+
.collapse.show .collapse-content {
|
|
88
|
+
grid-template-rows: 1fr;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.collapse.show .collapse-content > * {
|
|
92
|
+
padding: 0 1rem 1rem;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.collapse.show .collapse-icon {
|
|
96
|
+
transform: rotate(180deg);
|
|
22
97
|
}
|
|
23
98
|
|
|
24
99
|
/* Collapse Inner (for padding) */
|
|
@@ -82,9 +157,11 @@ export const css = `/**
|
|
|
82
157
|
border: 1px solid var(--color-outline-variant);
|
|
83
158
|
border-radius: 0.75rem;
|
|
84
159
|
overflow: hidden;
|
|
160
|
+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
|
85
161
|
}
|
|
86
162
|
|
|
87
|
-
.collapse-card .collapse-toggle
|
|
163
|
+
.collapse-card .collapse-toggle,
|
|
164
|
+
.collapse-card .collapse-trigger {
|
|
88
165
|
width: 100%;
|
|
89
166
|
justify-content: space-between;
|
|
90
167
|
padding: 1rem;
|
|
@@ -92,15 +169,132 @@ export const css = `/**
|
|
|
92
169
|
color: var(--color-on-surface);
|
|
93
170
|
}
|
|
94
171
|
|
|
95
|
-
.collapse-card .collapse-toggle:hover
|
|
172
|
+
.collapse-card .collapse-toggle:hover,
|
|
173
|
+
.collapse-card .collapse-trigger:hover {
|
|
96
174
|
background-color: var(--color-surface-container);
|
|
97
175
|
}
|
|
98
176
|
|
|
99
|
-
.collapse-card .collapse-inner
|
|
177
|
+
.collapse-card .collapse-inner,
|
|
178
|
+
.collapse-card .collapse-content > * {
|
|
100
179
|
padding: 0 1rem 1rem;
|
|
101
180
|
color: var(--color-on-surface-variant);
|
|
102
181
|
}
|
|
103
182
|
|
|
183
|
+
/* Bordered Variant */
|
|
184
|
+
.collapse-bordered {
|
|
185
|
+
border: 1px solid var(--color-outline-variant);
|
|
186
|
+
border-radius: 0.5rem;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* Ghost Variant */
|
|
190
|
+
.collapse-ghost {
|
|
191
|
+
background-color: transparent;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.collapse-ghost .collapse-trigger:hover {
|
|
195
|
+
background-color: color-mix(in oklch, var(--color-on-surface) 5%, transparent);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Color Variants */
|
|
199
|
+
.collapse-primary .collapse-trigger {
|
|
200
|
+
color: var(--color-primary);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.collapse-primary .collapse-trigger:hover {
|
|
204
|
+
background-color: var(--color-primary-container);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.collapse-secondary .collapse-trigger {
|
|
208
|
+
color: var(--color-secondary);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.collapse-secondary .collapse-trigger:hover {
|
|
212
|
+
background-color: var(--color-secondary-container);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.collapse-tertiary .collapse-trigger {
|
|
216
|
+
color: var(--color-tertiary);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.collapse-tertiary .collapse-trigger:hover {
|
|
220
|
+
background-color: var(--color-tertiary-container);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Size Variants */
|
|
224
|
+
.collapse-sm .collapse-trigger {
|
|
225
|
+
padding: 0.5rem 0.75rem;
|
|
226
|
+
font-size: 0.875rem;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.collapse-sm .collapse-content > * {
|
|
230
|
+
padding: 0 0.75rem;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.collapse-sm.collapse-open .collapse-content > * {
|
|
234
|
+
padding: 0 0.75rem 0.75rem;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.collapse-lg .collapse-trigger {
|
|
238
|
+
padding: 1rem 1.25rem;
|
|
239
|
+
font-size: 1.125rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.collapse-lg .collapse-content > * {
|
|
243
|
+
padding: 0 1.25rem;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.collapse-lg.collapse-open .collapse-content > * {
|
|
247
|
+
padding: 0 1.25rem 1.25rem;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* Divider Variant */
|
|
251
|
+
.collapse-divider .collapse-trigger {
|
|
252
|
+
border-bottom: 1px solid var(--color-outline-variant);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.collapse-divider.collapse-open .collapse-trigger {
|
|
256
|
+
border-bottom-color: var(--color-outline-variant);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* Disabled State */
|
|
260
|
+
.collapse-disabled {
|
|
261
|
+
opacity: 0.5;
|
|
262
|
+
pointer-events: none;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.collapse-disabled .collapse-trigger {
|
|
266
|
+
cursor: not-allowed;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/* Loading State */
|
|
270
|
+
.collapse-loading .collapse-trigger::after {
|
|
271
|
+
content: '';
|
|
272
|
+
display: inline-block;
|
|
273
|
+
width: 1rem;
|
|
274
|
+
height: 1rem;
|
|
275
|
+
margin-left: 0.5rem;
|
|
276
|
+
border: 2px solid var(--color-outline);
|
|
277
|
+
border-top-color: var(--color-primary);
|
|
278
|
+
border-radius: 50%;
|
|
279
|
+
animation: collapse-spin 0.8s linear infinite;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
@keyframes collapse-spin {
|
|
283
|
+
to { transform: rotate(360deg); }
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* Slide Animation */
|
|
287
|
+
.collapse-slide .collapse-content > * {
|
|
288
|
+
transform: translateY(-0.5rem);
|
|
289
|
+
opacity: 0;
|
|
290
|
+
transition: transform 300ms ease-in-out, opacity 200ms ease-in-out;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.collapse-slide.collapse-open .collapse-content > * {
|
|
294
|
+
transform: translateY(0);
|
|
295
|
+
opacity: 1;
|
|
296
|
+
}
|
|
297
|
+
|
|
104
298
|
/* Horizontal Collapse */
|
|
105
299
|
.collapse-horizontal {
|
|
106
300
|
display: grid;
|
|
@@ -243,14 +437,20 @@ export const css = `/**
|
|
|
243
437
|
/* Reduce Motion */
|
|
244
438
|
@media (prefers-reduced-motion: reduce) {
|
|
245
439
|
.collapse,
|
|
440
|
+
.collapse-content,
|
|
441
|
+
.collapse-icon,
|
|
246
442
|
.collapse-fade,
|
|
247
443
|
.collapse-horizontal,
|
|
248
444
|
.collapse-horizontal-fixed,
|
|
249
445
|
.collapse-toggle-icon,
|
|
250
446
|
.collapse-maxheight,
|
|
251
|
-
.collapse-animating
|
|
447
|
+
.collapse-animating,
|
|
448
|
+
.collapse-slide .collapse-content > * {
|
|
252
449
|
transition: none;
|
|
253
450
|
}
|
|
451
|
+
.collapse-loading .collapse-trigger::after {
|
|
452
|
+
animation: none;
|
|
453
|
+
}
|
|
254
454
|
}
|
|
255
455
|
}
|
|
256
456
|
`;
|
|
@@ -150,6 +150,7 @@ export const css = `/**
|
|
|
150
150
|
font-size: 0.875rem;
|
|
151
151
|
}
|
|
152
152
|
|
|
153
|
+
/* List-based breadcrumbs (legacy) */
|
|
153
154
|
.breadcrumbs li {
|
|
154
155
|
display: flex;
|
|
155
156
|
align-items: center;
|
|
@@ -180,6 +181,198 @@ export const css = `/**
|
|
|
180
181
|
color: var(--color-on-surface-variant);
|
|
181
182
|
}
|
|
182
183
|
|
|
184
|
+
/* Span-based breadcrumbs */
|
|
185
|
+
.breadcrumb-item {
|
|
186
|
+
display: inline-flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
gap: 0.375rem;
|
|
189
|
+
color: var(--color-on-surface-variant);
|
|
190
|
+
text-decoration: none;
|
|
191
|
+
transition: color 150ms ease-in-out;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.breadcrumb-item:hover {
|
|
195
|
+
color: var(--color-on-surface);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.breadcrumb-item-active {
|
|
199
|
+
color: var(--color-on-surface);
|
|
200
|
+
font-weight: 500;
|
|
201
|
+
pointer-events: none;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.breadcrumb-link {
|
|
205
|
+
display: inline-flex;
|
|
206
|
+
align-items: center;
|
|
207
|
+
gap: 0.375rem;
|
|
208
|
+
color: var(--color-on-surface-variant);
|
|
209
|
+
text-decoration: none;
|
|
210
|
+
transition: color 150ms ease-in-out;
|
|
211
|
+
cursor: pointer;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.breadcrumb-link:hover {
|
|
215
|
+
color: var(--color-primary);
|
|
216
|
+
text-decoration: underline;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.breadcrumb-link:focus-visible {
|
|
220
|
+
outline: 2px solid var(--color-primary);
|
|
221
|
+
outline-offset: 2px;
|
|
222
|
+
border-radius: 0.25rem;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* Separator - Default shows "/" */
|
|
226
|
+
.breadcrumb-separator {
|
|
227
|
+
display: inline-flex;
|
|
228
|
+
align-items: center;
|
|
229
|
+
color: var(--color-on-surface-variant);
|
|
230
|
+
font-size: 0.875rem;
|
|
231
|
+
user-select: none;
|
|
232
|
+
opacity: 0.6;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.breadcrumb-separator::before {
|
|
236
|
+
content: "/";
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* Separator Variants */
|
|
240
|
+
.breadcrumbs-slash .breadcrumb-separator::before {
|
|
241
|
+
content: "/";
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.breadcrumbs-chevron .breadcrumb-separator::before {
|
|
245
|
+
content: "›";
|
|
246
|
+
font-size: 1.125rem;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.breadcrumbs-dot .breadcrumb-separator::before {
|
|
250
|
+
content: "•";
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.breadcrumbs-arrow .breadcrumb-separator::before {
|
|
254
|
+
content: "→";
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.breadcrumbs-pipe .breadcrumb-separator::before {
|
|
258
|
+
content: "|";
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Breadcrumb Icon */
|
|
262
|
+
.breadcrumb-icon {
|
|
263
|
+
display: inline-flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
width: 1rem;
|
|
267
|
+
height: 1rem;
|
|
268
|
+
flex-shrink: 0;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.breadcrumb-icon svg {
|
|
272
|
+
width: 100%;
|
|
273
|
+
height: 100%;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* Home Icon Link */
|
|
277
|
+
.breadcrumb-home {
|
|
278
|
+
display: inline-flex;
|
|
279
|
+
align-items: center;
|
|
280
|
+
justify-content: center;
|
|
281
|
+
color: var(--color-on-surface-variant);
|
|
282
|
+
text-decoration: none;
|
|
283
|
+
transition: color 150ms ease-in-out;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.breadcrumb-home:hover {
|
|
287
|
+
color: var(--color-primary);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.breadcrumb-home-icon {
|
|
291
|
+
width: 1.125rem;
|
|
292
|
+
height: 1.125rem;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* Collapsed Breadcrumbs (with ellipsis) */
|
|
296
|
+
.breadcrumb-ellipsis {
|
|
297
|
+
display: inline-flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
justify-content: center;
|
|
300
|
+
padding: 0.25rem 0.5rem;
|
|
301
|
+
color: var(--color-on-surface-variant);
|
|
302
|
+
background-color: transparent;
|
|
303
|
+
border: none;
|
|
304
|
+
border-radius: 0.25rem;
|
|
305
|
+
cursor: pointer;
|
|
306
|
+
transition: background-color 150ms ease-in-out;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.breadcrumb-ellipsis::before {
|
|
310
|
+
content: "...";
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.breadcrumb-ellipsis:hover {
|
|
314
|
+
background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* Color Variants */
|
|
318
|
+
.breadcrumbs-primary .breadcrumb-link:hover,
|
|
319
|
+
.breadcrumbs-primary .breadcrumb-item-active {
|
|
320
|
+
color: var(--color-primary);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.breadcrumbs-secondary .breadcrumb-link:hover,
|
|
324
|
+
.breadcrumbs-secondary .breadcrumb-item-active {
|
|
325
|
+
color: var(--color-secondary);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.breadcrumbs-tertiary .breadcrumb-link:hover,
|
|
329
|
+
.breadcrumbs-tertiary .breadcrumb-item-active {
|
|
330
|
+
color: var(--color-tertiary);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/* Size Variants */
|
|
334
|
+
.breadcrumbs-sm {
|
|
335
|
+
font-size: 0.75rem;
|
|
336
|
+
gap: 0.375rem;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.breadcrumbs-sm .breadcrumb-icon,
|
|
340
|
+
.breadcrumbs-sm .breadcrumb-home-icon {
|
|
341
|
+
width: 0.875rem;
|
|
342
|
+
height: 0.875rem;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.breadcrumbs-lg {
|
|
346
|
+
font-size: 1rem;
|
|
347
|
+
gap: 0.625rem;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.breadcrumbs-lg .breadcrumb-icon,
|
|
351
|
+
.breadcrumbs-lg .breadcrumb-home-icon {
|
|
352
|
+
width: 1.25rem;
|
|
353
|
+
height: 1.25rem;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
/* Contained Variant (with background) */
|
|
357
|
+
.breadcrumbs-contained {
|
|
358
|
+
padding: 0.75rem 1rem;
|
|
359
|
+
background-color: var(--color-surface-container);
|
|
360
|
+
border-radius: 0.5rem;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* No Wrap Variant */
|
|
364
|
+
.breadcrumbs-nowrap {
|
|
365
|
+
flex-wrap: nowrap;
|
|
366
|
+
overflow-x: auto;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/* Disabled Breadcrumb Item */
|
|
370
|
+
.breadcrumb-item-disabled {
|
|
371
|
+
opacity: 0.38;
|
|
372
|
+
pointer-events: none;
|
|
373
|
+
cursor: not-allowed;
|
|
374
|
+
}
|
|
375
|
+
|
|
183
376
|
/* Tabs */
|
|
184
377
|
.tabs {
|
|
185
378
|
display: flex;
|