@capillaryjs/capillary-viz 1.0.0 → 1.2.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/CHANGELOG.md +36 -10
- package/dist/components/BlockGraph.d.ts.map +1 -1
- package/dist/components/CategoryHidePanel.d.ts.map +1 -1
- package/dist/components/SplitSelectionPanel.d.ts.map +1 -1
- package/dist/grouping.d.ts +3 -3
- package/dist/grouping.d.ts.map +1 -1
- package/dist/index.js +1038 -762
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
- package/styles/structural.css +312 -156
package/styles/structural.css
CHANGED
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
align-items: stretch;
|
|
31
31
|
min-inline-size: 0;
|
|
32
32
|
min-block-size: 0;
|
|
33
|
+
gap: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px));
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
.cap-layout-horizontal {
|
|
@@ -51,11 +52,55 @@
|
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
.cap-scroll {
|
|
55
|
+
/* Move the clip into the surrounding gutter without moving the
|
|
56
|
+
* content. The inherited allowance is owned by the parent layout,
|
|
57
|
+
* so local gaps and nested scrollports do not add extra spacing. */
|
|
58
|
+
--_cap-scroll-gutter: calc(var(--_cap-island-flow, 0) * var(--_cap-island-gutter, 0px));
|
|
59
|
+
margin: calc(-1 * var(--_cap-scroll-gutter));
|
|
60
|
+
padding: var(--_cap-scroll-gutter);
|
|
54
61
|
overflow: auto;
|
|
55
62
|
min-inline-size: 0;
|
|
56
63
|
min-block-size: 0;
|
|
57
64
|
}
|
|
58
65
|
|
|
66
|
+
/* The mode crosses wrappers; each layout resolves its own public gap.
|
|
67
|
+
* Only the first enabled scope contributes a perimeter inset. */
|
|
68
|
+
.cap-island-layout {
|
|
69
|
+
--_cap-island-flow: 1;
|
|
70
|
+
--_cap-island-margin: 0px;
|
|
71
|
+
--_cap-island-separator-background: transparent;
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
padding: var(--_cap-island-outer-inset, var(--island-inset, 0px));
|
|
74
|
+
gap: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.cap-island-layout > * {
|
|
78
|
+
--_cap-island-outer-inset: 0px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.cap-layout-horizontal > *,
|
|
82
|
+
.cap-layout-vertical > *,
|
|
83
|
+
.cap-island-layout > * {
|
|
84
|
+
--_cap-island-gutter: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px) / 2);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.cap-island-layout.cap-scroll {
|
|
88
|
+
padding: calc(var(--_cap-island-outer-inset, var(--island-inset, 0px))
|
|
89
|
+
+ var(--_cap-scroll-gutter));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.cap-island-layout-off {
|
|
93
|
+
--_cap-island-flow: 0;
|
|
94
|
+
--_cap-island-margin: initial;
|
|
95
|
+
--_cap-island-separator-background: initial;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.cap-island-layout-off > *,
|
|
99
|
+
.island > * {
|
|
100
|
+
--_cap-island-outer-inset: initial;
|
|
101
|
+
--_cap-island-gutter: 0px;
|
|
102
|
+
}
|
|
103
|
+
|
|
59
104
|
.colored {
|
|
60
105
|
--colored-base-bg:
|
|
61
106
|
linear-gradient(
|
|
@@ -73,10 +118,12 @@
|
|
|
73
118
|
|
|
74
119
|
.app-footer.island,
|
|
75
120
|
.island {
|
|
121
|
+
--_cap-island-flow: 0;
|
|
122
|
+
--_cap-island-separator-background: initial;
|
|
76
123
|
box-sizing: border-box;
|
|
77
124
|
min-width: 0;
|
|
78
125
|
min-height: 0;
|
|
79
|
-
margin: var(--island-margin);
|
|
126
|
+
margin: var(--_cap-island-margin, var(--island-margin));
|
|
80
127
|
padding: var(--island-padding);
|
|
81
128
|
background: var(--island-background);
|
|
82
129
|
border: var(--island-border);
|
|
@@ -86,13 +133,13 @@
|
|
|
86
133
|
|
|
87
134
|
.cap-fill-horizontal.island,
|
|
88
135
|
.cap-fill-horizontal .island {
|
|
89
|
-
max-width: calc(100% - (2 * var(--island-margin)));
|
|
136
|
+
max-width: calc(100% - (2 * var(--_cap-island-margin, var(--island-margin))));
|
|
90
137
|
overflow-x: auto;
|
|
91
138
|
}
|
|
92
139
|
|
|
93
140
|
.cap-fill-vertical.island,
|
|
94
141
|
.cap-fill-vertical .island {
|
|
95
|
-
max-height: calc(100% - (2 * var(--island-margin)));
|
|
142
|
+
max-height: calc(100% - (2 * var(--_cap-island-margin, var(--island-margin))));
|
|
96
143
|
overflow-y: auto;
|
|
97
144
|
}
|
|
98
145
|
|
|
@@ -206,9 +253,8 @@ cap-blockgraph {
|
|
|
206
253
|
inset-block-start: 0;
|
|
207
254
|
inset-inline-start: 0;
|
|
208
255
|
box-sizing: border-box;
|
|
209
|
-
display:
|
|
210
|
-
|
|
211
|
-
grid-template-areas: "label count";
|
|
256
|
+
display: flex;
|
|
257
|
+
flex-flow: row nowrap;
|
|
212
258
|
align-items: center;
|
|
213
259
|
gap: 0 0.35rem;
|
|
214
260
|
width: 100%;
|
|
@@ -232,9 +278,9 @@ cap-blockgraph {
|
|
|
232
278
|
}
|
|
233
279
|
|
|
234
280
|
cap-blockgraph cap-blocklabel > cap-blockname {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
281
|
+
display: flex;
|
|
282
|
+
flex: 1 1 auto;
|
|
283
|
+
flex-flow: row nowrap;
|
|
238
284
|
align-items: baseline;
|
|
239
285
|
gap: 0.2rem;
|
|
240
286
|
min-width: 0;
|
|
@@ -243,6 +289,7 @@ cap-blockgraph {
|
|
|
243
289
|
}
|
|
244
290
|
|
|
245
291
|
cap-blockgraph cap-blockname > small {
|
|
292
|
+
flex: 0 1 auto;
|
|
246
293
|
overflow: hidden;
|
|
247
294
|
font-size: 0.68rem;
|
|
248
295
|
opacity: 0.82;
|
|
@@ -251,6 +298,7 @@ cap-blockgraph {
|
|
|
251
298
|
}
|
|
252
299
|
|
|
253
300
|
cap-blockgraph cap-blockname > strong {
|
|
301
|
+
flex: 1 1 auto;
|
|
254
302
|
min-width: 0;
|
|
255
303
|
overflow: hidden;
|
|
256
304
|
text-overflow: ellipsis;
|
|
@@ -258,7 +306,7 @@ cap-blockgraph {
|
|
|
258
306
|
}
|
|
259
307
|
|
|
260
308
|
cap-blockgraph cap-blocklabel > data {
|
|
261
|
-
|
|
309
|
+
flex: 0 0 auto;
|
|
262
310
|
align-self: center;
|
|
263
311
|
font-weight: 750;
|
|
264
312
|
}
|
|
@@ -289,17 +337,30 @@ cap-blockgraph {
|
|
|
289
337
|
}
|
|
290
338
|
}
|
|
291
339
|
|
|
340
|
+
cap-button,
|
|
341
|
+
cap-checkbox {
|
|
342
|
+
--_cap-control-row-min: var(--_cap-control-compact-min,
|
|
343
|
+
max(var(--control-min-height, 2em), var(--control-row-min-height, 0px)));
|
|
344
|
+
min-height: calc(var(--_cap-control-row-min)
|
|
345
|
+
+ 2 * var(--control-row-padding-block, .25em));
|
|
346
|
+
padding-block: var(--control-row-padding-block, .25em);
|
|
347
|
+
box-sizing: border-box;
|
|
348
|
+
font-family: inherit;
|
|
349
|
+
font-size: var(--ui-font-size);
|
|
350
|
+
line-height: 1.2;
|
|
351
|
+
}
|
|
352
|
+
|
|
292
353
|
cap-button > button {
|
|
293
354
|
display: inline-flex;
|
|
294
355
|
align-items: center;
|
|
295
356
|
justify-content: center;
|
|
296
357
|
min-height: var(--control-min-height, 2em);
|
|
297
358
|
margin: 0;
|
|
298
|
-
padding:
|
|
359
|
+
padding: var(--ui-control-padding);
|
|
299
360
|
color: var(--button-color);
|
|
300
361
|
background: var(--button-background);
|
|
301
362
|
border: var(--button-border);
|
|
302
|
-
border-radius: var(--radius
|
|
363
|
+
border-radius: var(--ui-border-radius);
|
|
303
364
|
box-shadow: var(--button-shadow);
|
|
304
365
|
box-sizing: border-box;
|
|
305
366
|
cursor: default;
|
|
@@ -314,9 +375,6 @@ cap-button > button {
|
|
|
314
375
|
flex-flow: row wrap;
|
|
315
376
|
align-items: center;
|
|
316
377
|
align-content: center;
|
|
317
|
-
font-family: inherit;
|
|
318
|
-
font-size: var(--ui-font-size);
|
|
319
|
-
line-height: 1.2;
|
|
320
378
|
}
|
|
321
379
|
|
|
322
380
|
cap-button > button:hover:not(:disabled, [aria-disabled="true"]) {
|
|
@@ -335,8 +393,8 @@ cap-button > button {
|
|
|
335
393
|
box-shadow: var(--focus-ring);
|
|
336
394
|
}
|
|
337
395
|
|
|
338
|
-
cap-button > button:disabled,
|
|
339
|
-
cap-button > button[aria-disabled="true"] {
|
|
396
|
+
cap-button > button:disabled:not([aria-busy="true"]),
|
|
397
|
+
cap-button > button[aria-disabled="true"]:not([aria-busy="true"]) {
|
|
340
398
|
color: var(--input-color-disabled);
|
|
341
399
|
background: var(--button-background-disabled);
|
|
342
400
|
border-color: var(--button-border-disabled);
|
|
@@ -345,14 +403,17 @@ cap-button > button {
|
|
|
345
403
|
}
|
|
346
404
|
|
|
347
405
|
cap-button > button[aria-busy="true"]:not([aria-invalid="true"]) {
|
|
348
|
-
|
|
406
|
+
/* Busy is unavailable for activation, but remains a normal button
|
|
407
|
+
* surface with the loading texture layered on top. */
|
|
408
|
+
background: var(--working-background-image), var(--button-background);
|
|
349
409
|
background-repeat: repeat, no-repeat;
|
|
350
410
|
background-size: 2rem 2rem, 100% 100%;
|
|
351
411
|
animation: cap-working-progress .55s linear infinite;
|
|
352
412
|
}
|
|
353
413
|
|
|
354
414
|
cap-button > button[aria-invalid="true"] {
|
|
355
|
-
border-color: var(--error-
|
|
415
|
+
border-color: var(--error-control-border);
|
|
416
|
+
box-shadow: var(--error-control-shadow);
|
|
356
417
|
}
|
|
357
418
|
|
|
358
419
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -371,8 +432,8 @@ cap-button > button {
|
|
|
371
432
|
cap-error {
|
|
372
433
|
position: absolute;
|
|
373
434
|
z-index: 1200;
|
|
374
|
-
inset-block-start: -.
|
|
375
|
-
inset-inline-end: -.
|
|
435
|
+
inset-block-start: -.5rem;
|
|
436
|
+
inset-inline-end: -.5rem;
|
|
376
437
|
display: block;
|
|
377
438
|
width: 1.25em;
|
|
378
439
|
height: 1.25em;
|
|
@@ -386,18 +447,20 @@ cap-error {
|
|
|
386
447
|
|
|
387
448
|
cap-error > cap-erroricon {
|
|
388
449
|
position: absolute;
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
450
|
+
display: flex;
|
|
451
|
+
width: 1rem;
|
|
452
|
+
height: 1rem;
|
|
453
|
+
font-size: .9rem;
|
|
393
454
|
color: var(--error-contrast);
|
|
394
455
|
background: var(--error-color);
|
|
395
|
-
border:
|
|
456
|
+
border: var(--error-icon-border);
|
|
396
457
|
border-radius: 50%;
|
|
458
|
+
box-shadow: var(--error-icon-shadow);
|
|
397
459
|
box-sizing: border-box;
|
|
398
|
-
font-weight:
|
|
399
|
-
|
|
400
|
-
|
|
460
|
+
font-weight: bold;
|
|
461
|
+
justify-content: center;
|
|
462
|
+
align-items: center;
|
|
463
|
+
|
|
401
464
|
}
|
|
402
465
|
|
|
403
466
|
cap-error > cap-erroricon::before {
|
|
@@ -416,8 +479,8 @@ cap-error {
|
|
|
416
479
|
padding: var(--space-xs) var(--space-sm);
|
|
417
480
|
color: var(--ui-color);
|
|
418
481
|
background: var(--error-bg-neutral, var(--application-background));
|
|
419
|
-
border: 1px solid var(--error-
|
|
420
|
-
border-radius: var(--radius
|
|
482
|
+
border: 1px solid var(--error-control-border);
|
|
483
|
+
border-radius: var(--ui-border-radius);
|
|
421
484
|
box-shadow: var(--ui-shadow);
|
|
422
485
|
opacity: 0;
|
|
423
486
|
overflow-wrap: anywhere;
|
|
@@ -539,22 +602,18 @@ cap-groupbox {
|
|
|
539
602
|
|
|
540
603
|
cap-categoryhidepanel > cap-content,
|
|
541
604
|
cap-groupbox > cap-content {
|
|
542
|
-
display:
|
|
605
|
+
display: flex;
|
|
606
|
+
flex-flow: column nowrap;
|
|
607
|
+
justify-content: flex-start;
|
|
608
|
+
align-content: flex-start;
|
|
609
|
+
align-items: flex-start;
|
|
610
|
+
gap: var(--groupbox-content-gap, .5rem);
|
|
543
611
|
min-width: 0;
|
|
544
612
|
min-height: 0;
|
|
545
613
|
margin-left: var(--cap-groupbox-content-margin, .25em);
|
|
546
614
|
flex: 1 1 auto;
|
|
547
615
|
}
|
|
548
616
|
|
|
549
|
-
cap-categoryhidepanel > cap-content > cap-layout,
|
|
550
|
-
cap-groupbox > cap-content > cap-layout {
|
|
551
|
-
gap: .5rem;
|
|
552
|
-
justify-content: flex-start;
|
|
553
|
-
align-content: flex-start;
|
|
554
|
-
justify-items: flex-start;
|
|
555
|
-
align-items: flex-start;
|
|
556
|
-
}
|
|
557
|
-
|
|
558
617
|
/* Presentation contexts: each marker sets the complete context-sensitive
|
|
559
618
|
property set, so the nearest marked ancestor wins through ordinary
|
|
560
619
|
custom-property inheritance. Unmarked containers keep the control
|
|
@@ -628,7 +687,7 @@ cap-groupbox {
|
|
|
628
687
|
grid-column: 2;
|
|
629
688
|
grid-row: 1;
|
|
630
689
|
align-self: center;
|
|
631
|
-
border-block-start:
|
|
690
|
+
border-block-start: var(--groupbox-section-separator);
|
|
632
691
|
}
|
|
633
692
|
|
|
634
693
|
cap-categoryhidepanel.cap-groupbox-section > cap-header,
|
|
@@ -642,7 +701,7 @@ cap-groupbox {
|
|
|
642
701
|
min-height: 0;
|
|
643
702
|
padding: 0 0.5rem 0 0;
|
|
644
703
|
border-radius: 0;
|
|
645
|
-
color: var(--
|
|
704
|
+
color: var(--groupbox-section-header-color);
|
|
646
705
|
background: transparent;
|
|
647
706
|
box-shadow: none;
|
|
648
707
|
writing-mode: horizontal-tb;
|
|
@@ -655,6 +714,7 @@ cap-groupbox {
|
|
|
655
714
|
cap-groupbox.cap-groupbox-section > cap-content {
|
|
656
715
|
grid-column: 1 / -1;
|
|
657
716
|
grid-row: 2;
|
|
717
|
+
flex-flow: row nowrap;
|
|
658
718
|
margin-left: 0;
|
|
659
719
|
padding-block: 0.75rem;
|
|
660
720
|
min-width: 0;
|
|
@@ -673,7 +733,7 @@ cap-groupbox {
|
|
|
673
733
|
justify-self: stretch;
|
|
674
734
|
align-self: stretch;
|
|
675
735
|
border-block-start: 0;
|
|
676
|
-
border-inline-end:
|
|
736
|
+
border-inline-end: var(--groupbox-section-separator);
|
|
677
737
|
}
|
|
678
738
|
|
|
679
739
|
.cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-section > cap-header,
|
|
@@ -710,7 +770,7 @@ cap-groupbox {
|
|
|
710
770
|
padding: 0;
|
|
711
771
|
margin-block-end: 0.75rem;
|
|
712
772
|
border-radius: 0;
|
|
713
|
-
color: var(--
|
|
773
|
+
color: var(--groupbox-column-header-color);
|
|
714
774
|
background: transparent;
|
|
715
775
|
box-shadow: none;
|
|
716
776
|
writing-mode: horizontal-tb;
|
|
@@ -724,6 +784,34 @@ cap-groupbox {
|
|
|
724
784
|
margin-left: 0;
|
|
725
785
|
}
|
|
726
786
|
|
|
787
|
+
/* A section's own content body is the ordinary horizontal column row.
|
|
788
|
+
Preserve the same stretch, edge padding, and separators formerly
|
|
789
|
+
provided when an application inserted a Layout just for that row. */
|
|
790
|
+
cap-categoryhidepanel.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column,
|
|
791
|
+
/* A section's own content body is the ordinary horizontal column row.
|
|
792
|
+
Preserve the same stretch, edge padding, and separators formerly
|
|
793
|
+
provided when an application inserted a Layout just for that row. */
|
|
794
|
+
cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column {
|
|
795
|
+
align-self: stretch;
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
cap-categoryhidepanel.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column
|
|
799
|
+
+ cap-groupbox.cap-groupbox-column,
|
|
800
|
+
cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column
|
|
801
|
+
+ cap-groupbox.cap-groupbox-column {
|
|
802
|
+
border-inline-start: var(--groupbox-column-separator);
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
cap-categoryhidepanel.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:first-child,
|
|
806
|
+
cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:first-child {
|
|
807
|
+
padding-inline-start: 0;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
cap-categoryhidepanel.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:last-child,
|
|
811
|
+
cap-groupbox.cap-groupbox-section > cap-content > cap-groupbox.cap-groupbox-column:last-child {
|
|
812
|
+
padding-inline-end: 0;
|
|
813
|
+
}
|
|
814
|
+
|
|
727
815
|
.cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column,
|
|
728
816
|
.cap-layout-horizontal > cap-groupbox.cap-groupbox-column,
|
|
729
817
|
.cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column,
|
|
@@ -733,7 +821,7 @@ cap-groupbox {
|
|
|
733
821
|
|
|
734
822
|
.cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column + cap-categoryhidepanel.cap-groupbox-column,
|
|
735
823
|
.cap-layout-horizontal > cap-groupbox.cap-groupbox-column + cap-groupbox.cap-groupbox-column {
|
|
736
|
-
border-inline-start:
|
|
824
|
+
border-inline-start: var(--groupbox-column-separator);
|
|
737
825
|
}
|
|
738
826
|
|
|
739
827
|
.cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column:first-child,
|
|
@@ -754,7 +842,7 @@ cap-groupbox {
|
|
|
754
842
|
|
|
755
843
|
.cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column + cap-categoryhidepanel.cap-groupbox-column,
|
|
756
844
|
.cap-layout-vertical > cap-groupbox.cap-groupbox-column + cap-groupbox.cap-groupbox-column {
|
|
757
|
-
border-block-start:
|
|
845
|
+
border-block-start: var(--groupbox-column-separator);
|
|
758
846
|
}
|
|
759
847
|
|
|
760
848
|
.cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column:first-child,
|
|
@@ -767,15 +855,20 @@ cap-groupbox {
|
|
|
767
855
|
padding-block-end: 0;
|
|
768
856
|
}
|
|
769
857
|
|
|
770
|
-
cap-categoryhidepanel
|
|
858
|
+
cap-categoryhidepanel {
|
|
859
|
+
--_cap-control-compact-min: 0px;
|
|
860
|
+
--control-row-padding-block: 0px;
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
cap-categoryhidepanel > cap-content {
|
|
771
864
|
display: flex;
|
|
772
865
|
flex-direction: column;
|
|
773
866
|
align-self: stretch;
|
|
774
867
|
flex: 1 1 0;
|
|
775
|
-
gap:
|
|
868
|
+
gap: 2px;
|
|
776
869
|
}
|
|
777
870
|
|
|
778
|
-
cap-categoryhidepanel > cap-content
|
|
871
|
+
cap-categoryhidepanel > cap-content cap-optiongroup > fieldset > legend {
|
|
779
872
|
display: flex;
|
|
780
873
|
justify-content: space-between;
|
|
781
874
|
align-items: center;
|
|
@@ -784,23 +877,30 @@ cap-categoryhidepanel > cap-content {
|
|
|
784
877
|
color: var(--palette-neutral-950);
|
|
785
878
|
gap: 0.5rem;
|
|
786
879
|
width: 100%;
|
|
787
|
-
padding: 0 0
|
|
788
|
-
margin-bottom:
|
|
880
|
+
padding: 0 0 1px;
|
|
881
|
+
margin-bottom: 1px;
|
|
789
882
|
border-bottom: 1px solid var(--ui-border-color);
|
|
790
883
|
user-select: none;
|
|
791
884
|
}
|
|
792
885
|
|
|
793
|
-
cap-categoryhidepanel > cap-content
|
|
886
|
+
cap-categoryhidepanel > cap-content cap-optiongroup > fieldset {
|
|
794
887
|
display: flex;
|
|
795
|
-
flex-flow: column;
|
|
888
|
+
flex-flow: column nowrap;
|
|
796
889
|
justify-content: stretch;
|
|
797
890
|
justify-items: stretch;
|
|
798
891
|
align-items: stretch;
|
|
799
892
|
align-content: stretch;
|
|
800
893
|
box-sizing: border-box;
|
|
801
894
|
width: 100%;
|
|
802
|
-
gap:
|
|
803
|
-
padding:
|
|
895
|
+
gap: 2px;
|
|
896
|
+
padding: 1px 0 2px;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
/* OptionsBox is deliberately a dense, vertical filter surface. Keep
|
|
900
|
+
RadioGroup in the same rhythm as checkbox options, regardless of
|
|
901
|
+
theme-level RadioGroup spacing. */
|
|
902
|
+
cap-categoryhidepanel > cap-content cap-radiogroup > fieldset {
|
|
903
|
+
gap: 2px;
|
|
804
904
|
}
|
|
805
905
|
|
|
806
906
|
cap-categoryhidepanel {
|
|
@@ -810,8 +910,9 @@ cap-categoryhidepanel {
|
|
|
810
910
|
}
|
|
811
911
|
|
|
812
912
|
cap-categoryhidepanel > cap-content > cap-categoryhidecontent {
|
|
813
|
-
display:
|
|
814
|
-
|
|
913
|
+
display: flex;
|
|
914
|
+
flex-flow: column nowrap;
|
|
915
|
+
align-items: stretch;
|
|
815
916
|
gap: var(--viz-space, 0.6rem);
|
|
816
917
|
min-width: 0;
|
|
817
918
|
}
|
|
@@ -823,7 +924,8 @@ cap-categoryhidepanel {
|
|
|
823
924
|
}
|
|
824
925
|
|
|
825
926
|
cap-categoryhidepanel > cap-content > cap-categoryhidecontent > cap-criteriongroups {
|
|
826
|
-
display:
|
|
927
|
+
display: flex;
|
|
928
|
+
flex-flow: column nowrap;
|
|
827
929
|
gap: 1em;
|
|
828
930
|
min-width: 0;
|
|
829
931
|
}
|
|
@@ -881,6 +983,7 @@ cap-header {
|
|
|
881
983
|
display: block;
|
|
882
984
|
color: var(--section-header-color);
|
|
883
985
|
font-size: var(--section-header-font-size);
|
|
986
|
+
font-weight: var(--section-header-font-weight);
|
|
884
987
|
border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
|
|
885
988
|
padding: .25em;
|
|
886
989
|
background: var(--section-header-background);
|
|
@@ -899,29 +1002,102 @@ cap-header {
|
|
|
899
1002
|
font: inherit;
|
|
900
1003
|
}
|
|
901
1004
|
|
|
1005
|
+
cap-optiongroup,
|
|
1006
|
+
cap-collapsibleoptiongroup {
|
|
1007
|
+
display: block;
|
|
1008
|
+
position: relative;
|
|
1009
|
+
min-width: 0;
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
cap-optiongroup > fieldset,
|
|
1013
|
+
cap-collapsibleoptiongroup > fieldset {
|
|
1014
|
+
margin: 0;
|
|
1015
|
+
padding: 0;
|
|
1016
|
+
min-inline-size: 0;
|
|
1017
|
+
border: 0;
|
|
1018
|
+
width: 100%;
|
|
1019
|
+
box-sizing: border-box;
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
cap-optiongroup > fieldset > legend,
|
|
1023
|
+
cap-collapsibleoptiongroup > fieldset > legend {
|
|
1024
|
+
display: flex;
|
|
1025
|
+
justify-content: space-between;
|
|
1026
|
+
align-items: center;
|
|
1027
|
+
box-sizing: border-box;
|
|
1028
|
+
gap: 0.5rem;
|
|
1029
|
+
width: 100%;
|
|
1030
|
+
padding: 0 0 0.25em;
|
|
1031
|
+
margin-bottom: 0.5em;
|
|
1032
|
+
border-bottom: 1px solid var(--ui-border-color);
|
|
1033
|
+
font: inherit;
|
|
1034
|
+
user-select: none;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
cap-optiongroup > fieldset > legend > span,
|
|
1038
|
+
cap-collapsibleoptiongroup > fieldset > legend > span {
|
|
1039
|
+
flex: 1;
|
|
1040
|
+
min-width: 0;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
cap-optiongroup > fieldset[aria-busy="true"]:not([aria-invalid="true"]),
|
|
1044
|
+
cap-collapsibleoptiongroup > fieldset[aria-busy="true"]:not([aria-invalid="true"]) {
|
|
1045
|
+
background-image: var(--working-background-image);
|
|
1046
|
+
background-repeat: repeat;
|
|
1047
|
+
background-size: 2rem 2rem;
|
|
1048
|
+
animation: cap-working-progress .55s linear infinite;
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
cap-optiongroup > fieldset[aria-invalid="true"],
|
|
1052
|
+
cap-collapsibleoptiongroup > fieldset[aria-invalid="true"] {
|
|
1053
|
+
border: 1px solid var(--error-control-border);
|
|
1054
|
+
border-radius: var(--ui-border-radius);
|
|
1055
|
+
box-shadow: var(--error-control-shadow);
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1059
|
+
cap-optiongroup > fieldset[aria-busy="true"],
|
|
1060
|
+
cap-collapsibleoptiongroup > fieldset[aria-busy="true"] {
|
|
1061
|
+
animation: none !important;
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
@media (forced-colors: active) {
|
|
1066
|
+
cap-optiongroup > fieldset[aria-invalid="true"],
|
|
1067
|
+
cap-collapsibleoptiongroup > fieldset[aria-invalid="true"] {
|
|
1068
|
+
outline: 2px solid Mark;
|
|
1069
|
+
outline-offset: 1px;
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
|
|
902
1073
|
cap-checkbox {
|
|
903
1074
|
display: inline-flex;
|
|
904
1075
|
position: relative;
|
|
905
1076
|
flex-flow: row wrap;
|
|
906
1077
|
align-items: center;
|
|
907
1078
|
align-content: center;
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
1079
|
+
--_cap-checkable-label-color: var(--ui-text-color);
|
|
1080
|
+
--_cap-checkable-cursor: pointer;
|
|
1081
|
+
--_cap-checkable-box-background: var(--checkbox-box-background,
|
|
1082
|
+
var(--ui-input-bg, transparent));
|
|
1083
|
+
--_cap-checkable-box-border: var(--checkbox-box-border,
|
|
1084
|
+
var(--cbx-o-border, 1px solid currentColor));
|
|
1085
|
+
--_cap-checkable-box-shadow: var(--checkbox-box-shadow);
|
|
1086
|
+
--_cap-checkable-box-filter: none;
|
|
911
1087
|
}
|
|
912
1088
|
|
|
913
1089
|
cap-checkbox > label {
|
|
914
1090
|
display: flex;
|
|
915
1091
|
flex-flow: row nowrap;
|
|
916
1092
|
position: relative;
|
|
917
|
-
min-height:
|
|
1093
|
+
min-height: var(--_cap-control-row-min);
|
|
918
1094
|
margin: 0;
|
|
919
|
-
color: var(--
|
|
1095
|
+
color: var(--_cap-checkable-label-color);
|
|
920
1096
|
border-radius: var(--ui-border-radius);
|
|
921
1097
|
box-sizing: border-box;
|
|
922
1098
|
align-items: center;
|
|
923
1099
|
gap: .3em;
|
|
924
|
-
cursor:
|
|
1100
|
+
cursor: var(--_cap-checkable-cursor);
|
|
925
1101
|
user-select: none;
|
|
926
1102
|
}
|
|
927
1103
|
|
|
@@ -930,6 +1106,15 @@ cap-checkbox {
|
|
|
930
1106
|
cursor: not-allowed;
|
|
931
1107
|
}
|
|
932
1108
|
|
|
1109
|
+
cap-checkbox > label:has(> input[aria-readonly="true"]:not(:disabled)) {
|
|
1110
|
+
--_cap-checkable-label-color: var(--checkable-label-color-readonly);
|
|
1111
|
+
--_cap-checkable-cursor: default;
|
|
1112
|
+
--_cap-checkable-box-background: var(--checkbox-box-background-readonly);
|
|
1113
|
+
--_cap-checkable-box-border: var(--checkbox-box-border-readonly);
|
|
1114
|
+
--_cap-checkable-box-shadow: var(--checkbox-box-shadow-readonly);
|
|
1115
|
+
--_cap-checkable-box-filter: saturate(.78);
|
|
1116
|
+
}
|
|
1117
|
+
|
|
933
1118
|
cap-checkbox > label > input {
|
|
934
1119
|
position: absolute;
|
|
935
1120
|
width: 1px;
|
|
@@ -946,31 +1131,74 @@ cap-checkbox {
|
|
|
946
1131
|
|
|
947
1132
|
cap-checkbox > label > input + cap-checkshell {
|
|
948
1133
|
position: relative;
|
|
949
|
-
display:
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
1134
|
+
display: flex;
|
|
1135
|
+
align-items: center;
|
|
1136
|
+
justify-content: center;
|
|
1137
|
+
width: var(--checkbox-box-size, 1em);
|
|
1138
|
+
height: var(--checkbox-box-size, 1em);
|
|
1139
|
+
flex: 0 0 var(--checkbox-box-size, 1em);
|
|
953
1140
|
box-sizing: border-box;
|
|
954
1141
|
text-align: center;
|
|
955
1142
|
line-height: 1;
|
|
956
1143
|
color: var(--input-color, var(--ui-text-color, currentColor));
|
|
957
|
-
background: var(--
|
|
958
|
-
border: var(--
|
|
959
|
-
border-radius: var(--
|
|
960
|
-
|
|
1144
|
+
background: var(--_cap-checkable-box-background);
|
|
1145
|
+
border: var(--_cap-checkable-box-border);
|
|
1146
|
+
border-radius: var(--checkbox-box-radius,
|
|
1147
|
+
var(--cbx-border-radius, var(--radius-sm, 0.2rem)));
|
|
1148
|
+
box-shadow: var(--_cap-checkable-box-shadow);
|
|
1149
|
+
filter: var(--_cap-checkable-box-filter);
|
|
961
1150
|
font-family: inherit;
|
|
962
1151
|
font-size: 1em;
|
|
963
1152
|
user-select: none;
|
|
964
|
-
place-items: center;
|
|
965
1153
|
}
|
|
966
1154
|
|
|
967
1155
|
cap-checkbox > label > input:checked + cap-checkshell {
|
|
968
1156
|
color: var(--checkbox-symbol-color, var(--selection-color, currentColor));
|
|
969
1157
|
background: var(--checkbox-box-background-checked,
|
|
970
1158
|
var(--selection-background, var(--ui-accent-color, Highlight)));
|
|
1159
|
+
border: var(--checkbox-box-border-checked, var(--checkbox-box-border,
|
|
1160
|
+
var(--cbx-o-border, 1px solid currentColor)));
|
|
971
1161
|
box-shadow: var(--checkbox-box-shadow-checked);
|
|
972
1162
|
}
|
|
973
1163
|
|
|
1164
|
+
|
|
1165
|
+
|
|
1166
|
+
cap-checkbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::before {
|
|
1167
|
+
content: "";
|
|
1168
|
+
position: absolute;
|
|
1169
|
+
z-index: 0;
|
|
1170
|
+
inset-block: -4px;
|
|
1171
|
+
inset-inline-start: -4px;
|
|
1172
|
+
inset-inline-end: calc(-4px - 1em);
|
|
1173
|
+
border: 1px dashed var(--required-color);
|
|
1174
|
+
border-radius: inherit;
|
|
1175
|
+
pointer-events: none;
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
|
|
1179
|
+
cap-checkbox > label:has(> input:required:invalid:not(:disabled):not([aria-invalid="true"]))::after {
|
|
1180
|
+
content: "✲";
|
|
1181
|
+
position: absolute;
|
|
1182
|
+
z-index: 1;
|
|
1183
|
+
inset-block-start: -.5em;
|
|
1184
|
+
inset-inline-end: -1em;
|
|
1185
|
+
display: flex;
|
|
1186
|
+
inline-size: 1rem;
|
|
1187
|
+
block-size: 1rem;
|
|
1188
|
+
align-items: center;
|
|
1189
|
+
justify-content: center;
|
|
1190
|
+
color: var(--required-indicator-color);
|
|
1191
|
+
background: var(--required-indicator-background);
|
|
1192
|
+
font-size: .75rem;
|
|
1193
|
+
font-weight: 700;
|
|
1194
|
+
line-height: 1;
|
|
1195
|
+
pointer-events: none;
|
|
1196
|
+
}
|
|
1197
|
+
|
|
1198
|
+
cap-checkbox > label:has(> input[aria-invalid="true"]) {
|
|
1199
|
+
box-shadow: var(--error-control-shadow);
|
|
1200
|
+
}
|
|
1201
|
+
|
|
974
1202
|
cap-checkbox > label > input:focus-visible + cap-checkshell {
|
|
975
1203
|
outline: 2px solid var(--focus-color, var(--ui-accent-color, Highlight));
|
|
976
1204
|
outline-offset: 1px;
|
|
@@ -989,12 +1217,9 @@ cap-checkbox {
|
|
|
989
1217
|
animation: cap-working-progress .55s linear infinite;
|
|
990
1218
|
}
|
|
991
1219
|
|
|
992
|
-
cap-checkbox > label:has(> input[aria-invalid="true"]) {
|
|
993
|
-
color: var(--error-color);
|
|
994
|
-
}
|
|
995
|
-
|
|
996
1220
|
cap-checkbox > label > input[aria-invalid="true"] + cap-checkshell {
|
|
997
|
-
border-color: var(--error-
|
|
1221
|
+
border-color: var(--error-control-border);
|
|
1222
|
+
box-shadow: none;
|
|
998
1223
|
}
|
|
999
1224
|
|
|
1000
1225
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -1004,78 +1229,7 @@ cap-checkbox {
|
|
|
1004
1229
|
}
|
|
1005
1230
|
|
|
1006
1231
|
@media (forced-colors: active) {
|
|
1007
|
-
cap-checkbox > label
|
|
1008
|
-
outline: 2px solid Mark;
|
|
1009
|
-
outline-offset: 1px;
|
|
1010
|
-
}
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
cap-checkbox > label > input[value="require"] + cap-checkshell {
|
|
1014
|
-
color: var(--palette-contrast-light);
|
|
1015
|
-
background: var(--palette-green);
|
|
1016
|
-
box-shadow: var(--checkbox-box-shadow-checked);
|
|
1017
|
-
}
|
|
1018
|
-
|
|
1019
|
-
cap-checkbox > label > input[value="deny"] + cap-checkshell {
|
|
1020
|
-
color: var(--palette-contrast-light);
|
|
1021
|
-
background: var(--palette-red);
|
|
1022
|
-
box-shadow: var(--checkbox-box-shadow-checked);
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
cap-collapsibleoptiongroup {
|
|
1026
|
-
display: block;
|
|
1027
|
-
position: relative;
|
|
1028
|
-
min-width: 0;
|
|
1029
|
-
}
|
|
1030
|
-
|
|
1031
|
-
cap-collapsibleoptiongroup > fieldset {
|
|
1032
|
-
margin: 0;
|
|
1033
|
-
padding: 0;
|
|
1034
|
-
min-inline-size: 0;
|
|
1035
|
-
border: 0;
|
|
1036
|
-
width: 100%;
|
|
1037
|
-
box-sizing: border-box;
|
|
1038
|
-
}
|
|
1039
|
-
|
|
1040
|
-
cap-collapsibleoptiongroup > fieldset > legend {
|
|
1041
|
-
display: flex;
|
|
1042
|
-
justify-content: space-between;
|
|
1043
|
-
align-items: center;
|
|
1044
|
-
box-sizing: border-box;
|
|
1045
|
-
gap: 0.5rem;
|
|
1046
|
-
width: 100%;
|
|
1047
|
-
padding: 0 0 0.25em;
|
|
1048
|
-
margin-bottom: 0.5em;
|
|
1049
|
-
border-bottom: 1px solid var(--ui-border-color);
|
|
1050
|
-
font: inherit;
|
|
1051
|
-
user-select: none;
|
|
1052
|
-
}
|
|
1053
|
-
|
|
1054
|
-
cap-collapsibleoptiongroup > fieldset > legend > span {
|
|
1055
|
-
flex: 1;
|
|
1056
|
-
min-width: 0;
|
|
1057
|
-
}
|
|
1058
|
-
|
|
1059
|
-
cap-collapsibleoptiongroup > fieldset[aria-busy="true"]:not([aria-invalid="true"]) {
|
|
1060
|
-
background-image: var(--working-background-image);
|
|
1061
|
-
background-repeat: repeat;
|
|
1062
|
-
background-size: 2rem 2rem;
|
|
1063
|
-
animation: cap-working-progress .55s linear infinite;
|
|
1064
|
-
}
|
|
1065
|
-
|
|
1066
|
-
cap-collapsibleoptiongroup > fieldset[aria-invalid="true"] {
|
|
1067
|
-
border: 1px solid var(--error-color);
|
|
1068
|
-
border-radius: var(--radius-md);
|
|
1069
|
-
}
|
|
1070
|
-
|
|
1071
|
-
@media (prefers-reduced-motion: reduce) {
|
|
1072
|
-
cap-collapsibleoptiongroup > fieldset[aria-busy="true"] {
|
|
1073
|
-
animation: none !important;
|
|
1074
|
-
}
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
@media (forced-colors: active) {
|
|
1078
|
-
cap-collapsibleoptiongroup > fieldset[aria-invalid="true"] {
|
|
1232
|
+
cap-checkbox > label:has(> input[aria-invalid="true"]) {
|
|
1079
1233
|
outline: 2px solid Mark;
|
|
1080
1234
|
outline-offset: 1px;
|
|
1081
1235
|
}
|
|
@@ -1216,7 +1370,8 @@ cap-linegraph {
|
|
|
1216
1370
|
}
|
|
1217
1371
|
|
|
1218
1372
|
cap-splitselectionpanel {
|
|
1219
|
-
display:
|
|
1373
|
+
display: flex;
|
|
1374
|
+
flex-flow: column nowrap;
|
|
1220
1375
|
gap: var(--viz-space, 0.6rem);
|
|
1221
1376
|
min-width: 0;
|
|
1222
1377
|
user-select: none;
|
|
@@ -1244,10 +1399,10 @@ cap-splitselectionpanel {
|
|
|
1244
1399
|
}
|
|
1245
1400
|
|
|
1246
1401
|
cap-splitselectionpanel > cap-groupbox > cap-content > cap-presets {
|
|
1247
|
-
display:
|
|
1402
|
+
display: flex;
|
|
1403
|
+
flex-flow: column nowrap;
|
|
1248
1404
|
gap: 0.35rem;
|
|
1249
|
-
align-
|
|
1250
|
-
justify-content: stretch;
|
|
1405
|
+
align-items: stretch;
|
|
1251
1406
|
}
|
|
1252
1407
|
|
|
1253
1408
|
cap-splitselectionpanel > cap-groupbox > cap-content > cap-presets > cap-button {
|
|
@@ -1257,7 +1412,8 @@ cap-splitselectionpanel {
|
|
|
1257
1412
|
}
|
|
1258
1413
|
|
|
1259
1414
|
cap-splitselectionpanel ol {
|
|
1260
|
-
display:
|
|
1415
|
+
display: flex;
|
|
1416
|
+
flex-flow: column nowrap;
|
|
1261
1417
|
gap: .33rem;
|
|
1262
1418
|
padding: 0;
|
|
1263
1419
|
list-style: none;
|