@capillaryjs/capillary-viz 1.0.0-alpha.1 → 1.0.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/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "type": "module",
3
3
  "name": "@capillaryjs/capillary-viz",
4
4
  "private": false,
5
- "version": "1.0.0-alpha.1",
5
+ "version": "1.0.0",
6
6
  "description": "Reactive analytical controls, block mosaics, and history charts for Capillary UI applications.",
7
7
  "license": "Apache-2.0",
8
8
  "author": {
@@ -60,12 +60,12 @@
60
60
  "watch": "vite build --watch"
61
61
  },
62
62
  "peerDependencies": {
63
- "@capillaryjs/capillary": "^1.0.0-alpha.1",
64
- "@capillaryjs/capillary-ui": "^1.0.0-alpha.1"
63
+ "@capillaryjs/capillary": "^1.0.0",
64
+ "@capillaryjs/capillary-ui": "^1.0.0"
65
65
  },
66
66
  "devDependencies": {
67
- "@capillaryjs/capillary": "^1.0.0-alpha.1",
68
- "@capillaryjs/capillary-ui": "^1.0.0-alpha.1",
67
+ "@capillaryjs/capillary": "^1.0.0",
68
+ "@capillaryjs/capillary-ui": "^1.0.0",
69
69
  "vite": "^6.3.5"
70
70
  },
71
71
  "engines": {
@@ -136,6 +136,33 @@ cap-blockgraph {
136
136
  overflow: auto;
137
137
  }
138
138
 
139
+ cap-blockgraph > cap-blockskeleton {
140
+ display: flex;
141
+ flex: 1;
142
+ gap: var(--viz-space, 0.7rem);
143
+ min-block-size: 24rem;
144
+ }
145
+
146
+ cap-blockgraph cap-blockskeletoncolumn {
147
+ display: flex;
148
+ flex: 1;
149
+ flex-direction: column;
150
+ gap: var(--viz-space, 0.7rem);
151
+ }
152
+
153
+ cap-blockgraph cap-blockskeletoncolumn:nth-child(2) {
154
+ flex: 2;
155
+ }
156
+
157
+ cap-blockgraph cap-blockskeletoncolumn > cap-placeholder {
158
+ flex: 1;
159
+ block-size: auto;
160
+ }
161
+
162
+ cap-blockgraph cap-blockskeletoncolumn:nth-child(odd) > cap-placeholder:first-child {
163
+ flex: 2;
164
+ }
165
+
139
166
  cap-blockgraph cap-blocks,
140
167
  cap-blockgraph cap-blockgroup {
141
168
  display: flex;
@@ -263,8 +290,12 @@ cap-blockgraph {
263
290
  }
264
291
 
265
292
  cap-button > button {
266
- min-height: var(--control-min-height, 2rem);
267
- padding: var(--space-xs) var(--space-sm);
293
+ display: inline-flex;
294
+ align-items: center;
295
+ justify-content: center;
296
+ min-height: var(--control-min-height, 2em);
297
+ margin: 0;
298
+ padding: 0 5px;
268
299
  color: var(--button-color);
269
300
  background: var(--button-background);
270
301
  border: var(--button-border);
@@ -272,9 +303,7 @@ cap-button > button {
272
303
  box-shadow: var(--button-shadow);
273
304
  box-sizing: border-box;
274
305
  cursor: default;
275
- font-family: inherit;
276
- font-size: var(--ui-font-size);
277
- line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
306
+ font: inherit;
278
307
  user-select: none;
279
308
  white-space: nowrap;
280
309
  }
@@ -283,6 +312,11 @@ cap-button > button {
283
312
  display: inline-flex;
284
313
  position: relative;
285
314
  flex-flow: row wrap;
315
+ align-items: center;
316
+ align-content: center;
317
+ font-family: inherit;
318
+ font-size: var(--ui-font-size);
319
+ line-height: 1.2;
286
320
  }
287
321
 
288
322
  cap-button > button:hover:not(:disabled, [aria-disabled="true"]) {
@@ -305,7 +339,7 @@ cap-button > button {
305
339
  cap-button > button[aria-disabled="true"] {
306
340
  color: var(--input-color-disabled);
307
341
  background: var(--button-background-disabled);
308
- border: var(--button-border-disabled);
342
+ border-color: var(--button-border-disabled);
309
343
  cursor: not-allowed;
310
344
  pointer-events: none;
311
345
  }
@@ -421,6 +455,49 @@ cap-error {
421
455
  to { background-position: 2rem 0, 0 0; }
422
456
  }
423
457
 
458
+ cap-placeholder {
459
+ display: block;
460
+ width: 5em;
461
+ height: 1em;
462
+ background: #ccc;
463
+ border-radius: var(--ui-border-radius);
464
+ position: relative;
465
+ }
466
+
467
+ cap-placeholder::after {
468
+ content: "";
469
+ display: block;
470
+ position: absolute;
471
+ z-index: 1;
472
+ inset: 0;
473
+ margin: auto;
474
+ animation: cap-working-progress .55s linear infinite;
475
+ background-repeat: repeat;
476
+ background-size: 2rem 2rem;
477
+ background-image: var(--working-background-image);
478
+ border: 0 solid transparent;
479
+ border-radius: inherit;
480
+ box-sizing: border-box;
481
+ pointer-events: none;
482
+ }
483
+
484
+ @media (prefers-reduced-motion: reduce) {
485
+ cap-placeholder::after {
486
+ animation: none !important;
487
+ }
488
+ }
489
+
490
+ @media (forced-colors: active) {
491
+ cap-placeholder {
492
+ background: CanvasText;
493
+ forced-color-adjust: none;
494
+ }
495
+
496
+ cap-placeholder::after {
497
+ display: none;
498
+ }
499
+ }
500
+
424
501
  cap-categoryhidepanel,
425
502
  cap-groupbox {
426
503
  display: flex;
@@ -429,15 +506,20 @@ cap-groupbox {
429
506
  box-sizing: border-box;
430
507
  gap: var(--cap-groupbox-gap, 0 0.35rem);
431
508
  padding: var(--cap-groupbox-padding, 0.125rem 0.35rem 0.125rem 0.125rem);
509
+ padding-top: var(--cap-groupbox-padding-top, .125rem);
432
510
  border: var(--cap-groupbox-border, 1px solid var(--ui-border-color));
433
511
  border-radius: var(--ui-border-radius);
434
512
  position: relative;
435
513
  min-width: 0;
436
514
  min-height: 0;
515
+ flex: var(--cap-groupbox-flex, 0 1 auto);
437
516
  }
438
517
 
439
518
  cap-categoryhidepanel > cap-header,
440
519
  cap-groupbox > cap-header {
520
+ position: var(--cap-groupbox-header-position, static);
521
+ left: var(--cap-groupbox-header-inset, auto);
522
+ top: var(--cap-groupbox-header-inset, auto);
441
523
  display: grid;
442
524
  place-items: var(--cap-groupbox-header-align, center);
443
525
  box-sizing: border-box;
@@ -461,12 +543,11 @@ cap-groupbox {
461
543
  min-width: 0;
462
544
  min-height: 0;
463
545
  margin-left: var(--cap-groupbox-content-margin, .25em);
546
+ flex: 1 1 auto;
464
547
  }
465
548
 
466
- .cap-layout-horizontal cap-categoryhidepanel > cap-content > cap-layout,
467
- .cap-layout-horizontal cap-groupbox > cap-content > cap-layout,
468
- .cap-layout-vertical cap-categoryhidepanel > cap-content > cap-layout,
469
- .cap-layout-vertical cap-groupbox > cap-content > cap-layout {
549
+ cap-categoryhidepanel > cap-content > cap-layout,
550
+ cap-groupbox > cap-content > cap-layout {
470
551
  gap: .5rem;
471
552
  justify-content: flex-start;
472
553
  align-content: flex-start;
@@ -492,6 +573,10 @@ cap-groupbox {
492
573
  --cap-groupbox-header-writing: vertical-rl;
493
574
  --cap-groupbox-header-transform: rotate(180deg);
494
575
  --cap-groupbox-content-margin: .25em;
576
+ --cap-groupbox-flex: 0 1 auto;
577
+ --cap-groupbox-padding-top: .125rem;
578
+ --cap-groupbox-header-position: static;
579
+ --cap-groupbox-header-inset: auto;
495
580
  }
496
581
 
497
582
  [data-cap-context='form'] {
@@ -501,40 +586,185 @@ cap-groupbox {
501
586
  --cap-groupbox-border: 1px solid var(--ui-border-color);
502
587
  --cap-groupbox-header-align: center start;
503
588
  --cap-groupbox-header-width: auto;
504
- --cap-groupbox-header-padding: 0;
589
+ --cap-groupbox-header-padding: 2px 5px;
505
590
  --cap-groupbox-header-color: var(--text-color);
506
- --cap-groupbox-header-background: none;
591
+ --cap-groupbox-header-background: var(--panel-background);
507
592
  --cap-groupbox-header-shadow: none;
508
593
  --cap-groupbox-header-writing: horizontal-tb;
509
594
  --cap-groupbox-header-transform: none;
510
595
  --cap-groupbox-content-margin: 0;
596
+ --cap-groupbox-flex: 0 1 auto;
597
+ --cap-groupbox-padding-top: 1em;
598
+ --cap-groupbox-header-position: absolute;
599
+ --cap-groupbox-header-inset: calc(0px - var(--ui-font-size) / 2);
511
600
  }
512
601
 
513
- [data-cap-context='form'] cap-categoryhidepanel,
514
- [data-cap-context='form'] cap-groupbox {
515
- flex: 1 1 auto;
602
+ .cap-layout-horizontal > cap-categoryhidepanel,
603
+ .cap-layout-horizontal > cap-groupbox {
604
+ max-inline-size: max-content;
605
+ min-inline-size: min-content;
606
+ }
607
+
608
+ cap-categoryhidepanel.cap-groupbox-section,
609
+ cap-groupbox.cap-groupbox-section {
610
+ display: grid;
611
+ grid-template-columns: max-content minmax(0, 1fr);
612
+ grid-template-rows: max-content minmax(max-content, 1fr);
516
613
  align-self: stretch;
517
- padding-top: 1em;
614
+ align-items: start;
615
+ gap: 0;
616
+ padding: 0;
617
+ padding-top: 0;
618
+ border: 0;
619
+ border-radius: 0;
620
+ min-inline-size: 0;
621
+ max-inline-size: none;
622
+ flex: 0 0 auto;
623
+ }
624
+
625
+ cap-categoryhidepanel.cap-groupbox-section::before,
626
+ cap-groupbox.cap-groupbox-section::before {
627
+ content: "";
628
+ grid-column: 2;
629
+ grid-row: 1;
630
+ align-self: center;
631
+ border-block-start: 1px solid var(--ui-border-color);
518
632
  }
519
633
 
520
- .cap-layout-horizontal cap-categoryhidepanel,
521
- .cap-layout-horizontal cap-groupbox {
522
- max-width: 15rem;
634
+ cap-categoryhidepanel.cap-groupbox-section > cap-header,
635
+ cap-groupbox.cap-groupbox-section > cap-header {
636
+ position: static;
637
+ grid-column: 1;
638
+ grid-row: 1;
639
+ display: block;
640
+ width: auto;
641
+ min-width: 0;
642
+ min-height: 0;
643
+ padding: 0 0.5rem 0 0;
644
+ border-radius: 0;
645
+ color: var(--text-color);
646
+ background: transparent;
647
+ box-shadow: none;
648
+ writing-mode: horizontal-tb;
649
+ transform: none;
650
+ font-size: var(--groupbox-section-font-size, 1.2em);
651
+ font-weight: 600;
652
+ }
653
+
654
+ cap-categoryhidepanel.cap-groupbox-section > cap-content,
655
+ cap-groupbox.cap-groupbox-section > cap-content {
656
+ grid-column: 1 / -1;
657
+ grid-row: 2;
658
+ margin-left: 0;
659
+ padding-block: 0.75rem;
523
660
  min-width: 0;
524
661
  }
525
662
 
526
- .cap-layout-vertical cap-categoryhidepanel,
527
- .cap-layout-vertical cap-groupbox {
528
- max-height: 15rem;
663
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-section,
664
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-section {
665
+ grid-template-columns: max-content minmax(0, 1fr);
666
+ grid-template-rows: max-content minmax(max-content, 1fr);
667
+ }
668
+
669
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-section::before,
670
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-section::before {
671
+ grid-column: 1;
672
+ grid-row: 2;
673
+ justify-self: stretch;
674
+ align-self: stretch;
675
+ border-block-start: 0;
676
+ border-inline-end: 1px solid var(--ui-border-color);
677
+ }
678
+
679
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-section > cap-header,
680
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-section > cap-header {
681
+ padding: 0 0.5rem 0.5rem 0;
682
+ }
683
+
684
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-section > cap-content,
685
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-section > cap-content {
686
+ grid-column: 2;
687
+ grid-row: 1 / -1;
688
+ padding-block: 0;
689
+ padding-inline: 0.75rem;
690
+ min-block-size: 0;
691
+ }
692
+
693
+ cap-categoryhidepanel.cap-groupbox-column,
694
+ cap-groupbox.cap-groupbox-column {
695
+ gap: 0;
696
+ padding: 0 1rem;
697
+ padding-top: 0;
698
+ border: 0;
699
+ border-radius: 0;
700
+ flex: 0 1 auto;
701
+ }
702
+
703
+ cap-categoryhidepanel.cap-groupbox-column > cap-header,
704
+ cap-groupbox.cap-groupbox-column > cap-header {
705
+ position: static;
706
+ display: block;
707
+ width: auto;
708
+ min-width: 0;
529
709
  min-height: 0;
710
+ padding: 0;
711
+ margin-block-end: 0.75rem;
712
+ border-radius: 0;
713
+ color: var(--text-color);
714
+ background: transparent;
715
+ box-shadow: none;
716
+ writing-mode: horizontal-tb;
717
+ transform: none;
718
+ font-size: var(--ui-font-size);
719
+ font-weight: 600;
530
720
  }
531
721
 
532
- [data-cap-context='form'] cap-groupbox > cap-header {
533
- position: absolute;
534
- left: calc(0px - var(--ui-font-size) / 2);
535
- top: calc(0px - var(--ui-font-size) / 2);
536
- background: var(--panel-background);
537
- padding: 2px 5px;
722
+ cap-categoryhidepanel.cap-groupbox-column > cap-content,
723
+ cap-groupbox.cap-groupbox-column > cap-content {
724
+ margin-left: 0;
725
+ }
726
+
727
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column,
728
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-column,
729
+ .cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column,
730
+ .cap-layout-vertical > cap-groupbox.cap-groupbox-column {
731
+ align-self: stretch;
732
+ }
733
+
734
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column + cap-categoryhidepanel.cap-groupbox-column,
735
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-column + cap-groupbox.cap-groupbox-column {
736
+ border-inline-start: 1px solid var(--ui-border-color);
737
+ }
738
+
739
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column:first-child,
740
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-column:first-child {
741
+ padding-inline-start: 0;
742
+ }
743
+
744
+ .cap-layout-horizontal > cap-categoryhidepanel.cap-groupbox-column:last-child,
745
+ .cap-layout-horizontal > cap-groupbox.cap-groupbox-column:last-child {
746
+ padding-inline-end: 0;
747
+ }
748
+
749
+ .cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column,
750
+ .cap-layout-vertical > cap-groupbox.cap-groupbox-column {
751
+ padding-inline: 0;
752
+ padding-block: 1rem;
753
+ }
754
+
755
+ .cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column + cap-categoryhidepanel.cap-groupbox-column,
756
+ .cap-layout-vertical > cap-groupbox.cap-groupbox-column + cap-groupbox.cap-groupbox-column {
757
+ border-block-start: 1px solid var(--ui-border-color);
758
+ }
759
+
760
+ .cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column:first-child,
761
+ .cap-layout-vertical > cap-groupbox.cap-groupbox-column:first-child {
762
+ padding-block-start: 0;
763
+ }
764
+
765
+ .cap-layout-vertical > cap-categoryhidepanel.cap-groupbox-column:last-child,
766
+ .cap-layout-vertical > cap-groupbox.cap-groupbox-column:last-child {
767
+ padding-block-end: 0;
538
768
  }
539
769
 
540
770
  cap-categoryhidepanel > cap-content {
@@ -542,7 +772,7 @@ cap-categoryhidepanel > cap-content {
542
772
  flex-direction: column;
543
773
  align-self: stretch;
544
774
  flex: 1 1 0;
545
- gap: .5em;
775
+ gap: 1rem;
546
776
  }
547
777
 
548
778
  cap-categoryhidepanel > cap-content * > fieldset > legend {
@@ -554,8 +784,8 @@ cap-categoryhidepanel > cap-content {
554
784
  color: var(--palette-neutral-950);
555
785
  gap: 0.5rem;
556
786
  width: 100%;
557
- padding: 0 0 0.25em;
558
- margin-bottom: 0.25em;
787
+ padding: 0 0 0.25rem;
788
+ margin-bottom: 0.25rem;
559
789
  border-bottom: 1px solid var(--ui-border-color);
560
790
  user-select: none;
561
791
  }
@@ -569,7 +799,7 @@ cap-categoryhidepanel > cap-content {
569
799
  align-content: stretch;
570
800
  box-sizing: border-box;
571
801
  width: 100%;
572
- gap: 0;
802
+ gap: .33rem;
573
803
  padding: .25em 0 .5em 0;
574
804
  }
575
805
 
@@ -618,7 +848,7 @@ cap-categoryhidepanel {
618
848
  align-items: center;
619
849
  gap: 0.45rem;
620
850
  min-width: 0;
621
- max-height: 1em;
851
+
622
852
  }
623
853
 
624
854
  cap-categoryhidepanel cap-categoryswatch {
@@ -650,6 +880,7 @@ cap-categoryhidepanel {
650
880
  cap-header {
651
881
  display: block;
652
882
  color: var(--section-header-color);
883
+ font-size: var(--section-header-font-size);
653
884
  border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
654
885
  padding: .25em;
655
886
  background: var(--section-header-background);
@@ -672,24 +903,24 @@ cap-checkbox {
672
903
  display: inline-flex;
673
904
  position: relative;
674
905
  flex-flow: row wrap;
675
- line-height: 1;
906
+ align-items: center;
907
+ align-content: center;
908
+ font-family: inherit;
909
+ font-size: var(--ui-font-size);
910
+ line-height: 1.2;
676
911
  }
677
912
 
678
913
  cap-checkbox > label {
679
914
  display: flex;
680
915
  flex-flow: row nowrap;
681
916
  position: relative;
682
- line-height: calc(var(--ui-font-size) + var(--ui-padding) + var(--ui-padding));
683
- font-size: var(--ui-font-size);
684
- height: calc(var(--ui-font-size) + var(--ui-padding-h) + var(--ui-padding-h));
917
+ min-height: 1.2em;
918
+ margin: 0;
685
919
  color: var(--ui-text-color);
686
920
  border-radius: var(--ui-border-radius);
687
921
  box-sizing: border-box;
688
922
  align-items: center;
689
923
  gap: .3em;
690
- align-content: center;
691
- justify-content: center;
692
- justify-items: center;
693
924
  cursor: pointer;
694
925
  user-select: none;
695
926
  }
@@ -721,7 +952,7 @@ cap-checkbox {
721
952
  flex: 0 0 1em;
722
953
  box-sizing: border-box;
723
954
  text-align: center;
724
- line-height: 120%;
955
+ line-height: 1;
725
956
  color: var(--input-color, var(--ui-text-color, currentColor));
726
957
  background: var(--checkbox-box-background, var(--ui-input-bg, transparent));
727
958
  border: var(--checkbox-box-border, var(--cbx-o-border, 1px solid currentColor));
@@ -1027,7 +1258,7 @@ cap-splitselectionpanel {
1027
1258
 
1028
1259
  cap-splitselectionpanel ol {
1029
1260
  display: grid;
1030
- gap: 0.25rem;
1261
+ gap: .33rem;
1031
1262
  padding: 0;
1032
1263
  list-style: none;
1033
1264
  }
@@ -1039,7 +1270,7 @@ cap-splitselectionpanel {
1039
1270
  justify-content: space-between;
1040
1271
  gap: 0.35rem;
1041
1272
  min-width: 0;
1042
- padding: 0 .35rem;
1273
+ padding: .15rem .35rem;
1043
1274
  border-radius: var(--ui-border-radius);
1044
1275
  box-shadow: var(--box-shadow);
1045
1276
  }