mnfst 0.5.121 → 0.5.123
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/lib/manifest.chart.css +195 -0
- package/lib/manifest.charts.js +593 -0
- package/lib/manifest.checkbox.css +2 -2
- package/lib/manifest.colorpicker.js +198 -41
- package/lib/manifest.css +787 -21
- package/lib/manifest.data.js +35 -7
- package/lib/manifest.datepicker.css +504 -0
- package/lib/manifest.datepicker.js +1208 -0
- package/lib/manifest.dialog.css +18 -11
- package/lib/manifest.dropdown.css +18 -17
- package/lib/manifest.integrity.json +9 -5
- package/lib/manifest.js +18 -4
- package/lib/manifest.localization.js +5 -1
- package/lib/manifest.min.css +1 -1
- package/lib/manifest.payments.js +583 -0
- package/lib/manifest.schema.json +77 -0
- package/lib/manifest.sidebar.css +18 -13
- package/lib/manifest.status.js +680 -0
- package/lib/manifest.theme.css +6 -4
- package/lib/manifest.toast.css +1 -1
- package/lib/manifest.tooltip.css +59 -23
- package/lib/manifest.utilities.css +3 -2
- package/lib/manifest.utilities.js +18 -2
- package/package.json +3 -1
package/lib/manifest.css
CHANGED
|
@@ -272,11 +272,14 @@
|
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
-
/* Base popover styles: scale-only pop-in, no opacity animation (avoids the
|
|
276
|
-
see-through artifact + Safari bounce). See manifest.dropdown.css. */
|
|
277
275
|
@keyframes mnfst-popover-in {
|
|
278
|
-
from {
|
|
279
|
-
|
|
276
|
+
from {
|
|
277
|
+
transform: scale(.9);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
to {
|
|
281
|
+
transform: none;
|
|
282
|
+
}
|
|
280
283
|
}
|
|
281
284
|
|
|
282
285
|
:where([popover]) {
|
|
@@ -641,6 +644,202 @@
|
|
|
641
644
|
}
|
|
642
645
|
}
|
|
643
646
|
|
|
647
|
+
/* Manifest Charts */
|
|
648
|
+
|
|
649
|
+
:root {
|
|
650
|
+
/* Chart guidance */
|
|
651
|
+
--color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
|
|
652
|
+
--color-chart-label: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
653
|
+
|
|
654
|
+
/* Chart data segments */
|
|
655
|
+
--color-chart-1: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
|
|
656
|
+
--color-chart-2: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
|
|
657
|
+
--color-chart-3: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
|
|
658
|
+
--color-chart-4: var(--color-amber-400, oklch(82.8% 0.189 84.429));
|
|
659
|
+
--color-chart-5: var(--color-amber-500, oklch(76.9% 0.188 70.08));
|
|
660
|
+
--color-chart-6: var(--color-amber-600, oklch(66.6% 0.179 58.318));
|
|
661
|
+
--color-chart-7: var(--color-orange-400, oklch(75% 0.183 55.934));
|
|
662
|
+
--color-chart-8: var(--color-orange-500, oklch(70.5% 0.213 47.604));
|
|
663
|
+
--color-chart-9: var(--color-orange-600, oklch(64.6% 0.222 41.116));
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
@layer utilities {
|
|
667
|
+
|
|
668
|
+
:where([x-chart], .chart):not(.unstyle) {
|
|
669
|
+
display: flex;
|
|
670
|
+
flex-direction: column;
|
|
671
|
+
gap: 0.25rem;
|
|
672
|
+
width: 100%;
|
|
673
|
+
position: relative;
|
|
674
|
+
|
|
675
|
+
& svg {
|
|
676
|
+
display: block;
|
|
677
|
+
width: 100%;
|
|
678
|
+
overflow: visible
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
/* Grid lines */
|
|
682
|
+
& svg line {
|
|
683
|
+
stroke: var(--color-chart-grid);
|
|
684
|
+
stroke-width: 1;
|
|
685
|
+
shape-rendering: crispEdges
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
/* Axis labels */
|
|
689
|
+
& svg text {
|
|
690
|
+
fill: var(--color-chart-label);
|
|
691
|
+
font-size: 0.6875rem;
|
|
692
|
+
font-family: inherit
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
/* Line series */
|
|
696
|
+
& path.line {
|
|
697
|
+
stroke: var(--color-chart-color, var(--color-chart-1));
|
|
698
|
+
stroke-width: 2;
|
|
699
|
+
stroke-linecap: round;
|
|
700
|
+
stroke-linejoin: round
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
/* Area series */
|
|
704
|
+
& path.area {
|
|
705
|
+
fill: var(--color-chart-color, var(--color-chart-1));
|
|
706
|
+
opacity: 0.15
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
/* Points */
|
|
710
|
+
& circle {
|
|
711
|
+
fill: var(--color-chart-color, var(--color-chart-1));
|
|
712
|
+
stroke: var(--color-page, oklch(98.5% 0 0));
|
|
713
|
+
stroke-width: 1.5;
|
|
714
|
+
transition: r var(--transition-duration, .1s) ease;
|
|
715
|
+
|
|
716
|
+
&:hover {
|
|
717
|
+
r: 5
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
& circle.scatter {
|
|
722
|
+
opacity: 0.85
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
/* Bars */
|
|
726
|
+
& rect {
|
|
727
|
+
fill: var(--color-chart-color, var(--color-chart-1));
|
|
728
|
+
transition: opacity var(--transition-duration, .1s) ease;
|
|
729
|
+
|
|
730
|
+
&:hover {
|
|
731
|
+
opacity: 0.82
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
/* Candlesticks — wick <line> + body <rect> in a positive/negative <g> */
|
|
736
|
+
& g.positive,
|
|
737
|
+
& g.negative {
|
|
738
|
+
& line {
|
|
739
|
+
stroke: var(--color-chart-candle);
|
|
740
|
+
stroke-width: 1.5
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
& rect {
|
|
744
|
+
fill: var(--color-chart-candle)
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
& g.positive {
|
|
749
|
+
--color-chart-candle: var(--color-positive-content, oklch(60% 0.13 150))
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
& g.negative {
|
|
753
|
+
--color-chart-candle: var(--color-negative-content, oklch(60% 0.18 25))
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
/* Pie / donut slices */
|
|
757
|
+
& path.slice {
|
|
758
|
+
fill: var(--color-chart-color, var(--color-chart-1));
|
|
759
|
+
stroke: var(--color-page, oklch(98.5% 0 0));
|
|
760
|
+
stroke-width: 2;
|
|
761
|
+
transition: opacity var(--transition-duration, .1s) ease;
|
|
762
|
+
|
|
763
|
+
&:hover {
|
|
764
|
+
opacity: 0.85
|
|
765
|
+
}
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
/* Value labels drawn on/above segments */
|
|
769
|
+
& text.value {
|
|
770
|
+
fill: var(--color-content-stark, oklch(20.5% 0 0));
|
|
771
|
+
font-size: 0.6875rem;
|
|
772
|
+
font-weight: 600;
|
|
773
|
+
pointer-events: none;
|
|
774
|
+
|
|
775
|
+
/* On a filled segment (bar/slice center) — read against the fill */
|
|
776
|
+
&.inverse {
|
|
777
|
+
fill: black;
|
|
778
|
+
paint-order: stroke;
|
|
779
|
+
stroke: rgba(255, 255, 255, 0.75);
|
|
780
|
+
stroke-width: 1.5px
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
/* Legend — <footer> sibling below the SVG; <span> items, <i> swatches */
|
|
785
|
+
& footer {
|
|
786
|
+
display: flex;
|
|
787
|
+
flex-flow: row wrap;
|
|
788
|
+
align-items: center;
|
|
789
|
+
justify-content: center;
|
|
790
|
+
gap: 0.875rem;
|
|
791
|
+
margin-top: 0.5rem;
|
|
792
|
+
font-size: 0.75rem;
|
|
793
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
794
|
+
|
|
795
|
+
&>span {
|
|
796
|
+
display: inline-flex;
|
|
797
|
+
align-items: center;
|
|
798
|
+
gap: 0.375rem
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
& i {
|
|
802
|
+
width: 0.625rem;
|
|
803
|
+
height: 0.625rem;
|
|
804
|
+
border-radius: 2px;
|
|
805
|
+
background: var(--color-chart-color, var(--color-chart-1))
|
|
806
|
+
}
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
/* Cursor-following tooltip — chrome comes from manifest.tooltip.css
|
|
810
|
+
(.tooltip); only the pointer-tracking positioning lives here */
|
|
811
|
+
& .tooltip {
|
|
812
|
+
position: absolute;
|
|
813
|
+
left: 0;
|
|
814
|
+
top: 0;
|
|
815
|
+
z-index: 50;
|
|
816
|
+
transform: translate(-50%, calc(-100% - 0.625rem));
|
|
817
|
+
font-size: 0.75rem;
|
|
818
|
+
line-height: 1.3;
|
|
819
|
+
white-space: nowrap;
|
|
820
|
+
pointer-events: none;
|
|
821
|
+
opacity: 0;
|
|
822
|
+
transition: opacity .1s ease;
|
|
823
|
+
|
|
824
|
+
&.active {
|
|
825
|
+
opacity: 1
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/* Empty / error state */
|
|
830
|
+
&>small,
|
|
831
|
+
label {
|
|
832
|
+
display: flex;
|
|
833
|
+
align-items: center;
|
|
834
|
+
justify-content: center;
|
|
835
|
+
min-height: 6rem;
|
|
836
|
+
font-size: 0.875rem;
|
|
837
|
+
font-weight: 500;
|
|
838
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0))
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
}
|
|
842
|
+
|
|
644
843
|
/* Manifest Checkboxes */
|
|
645
844
|
|
|
646
845
|
@layer components {
|
|
@@ -678,8 +877,8 @@
|
|
|
678
877
|
width: 60%;
|
|
679
878
|
height: 60%;
|
|
680
879
|
background-color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
681
|
-
-webkit-mask-image: var(--icon-
|
|
682
|
-
mask-image: var(--icon-
|
|
880
|
+
-webkit-mask-image: var(--icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
|
|
881
|
+
mask-image: var(--icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
|
|
683
882
|
-webkit-mask-repeat: no-repeat;
|
|
684
883
|
mask-repeat: no-repeat;
|
|
685
884
|
-webkit-mask-size: 100% 100%;
|
|
@@ -1207,7 +1406,520 @@
|
|
|
1207
1406
|
}
|
|
1208
1407
|
}
|
|
1209
1408
|
|
|
1409
|
+
/* Manifest Date Picker */
|
|
1410
|
+
|
|
1411
|
+
@layer utilities {
|
|
1412
|
+
|
|
1413
|
+
:where([x-date], .date-picker):not(.unstyle) {
|
|
1414
|
+
width: fit-content;
|
|
1415
|
+
min-width: 17rem;
|
|
1416
|
+
background: var(--color-popover-surface, oklch(98.5% 0 0));
|
|
1417
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1418
|
+
border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
|
|
1419
|
+
border-radius: var(--radius, 0.5rem);
|
|
1420
|
+
|
|
1421
|
+
/* Shell */
|
|
1422
|
+
&>[role=group] {
|
|
1423
|
+
display: flex;
|
|
1424
|
+
flex-direction: column;
|
|
1425
|
+
width: 100%;
|
|
1426
|
+
padding: 0.5rem;
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
/* Header */
|
|
1430
|
+
& header {
|
|
1431
|
+
display: flex;
|
|
1432
|
+
align-items: center;
|
|
1433
|
+
justify-content: space-between;
|
|
1434
|
+
gap: 0.25rem;
|
|
1435
|
+
width: 100%;
|
|
1436
|
+
|
|
1437
|
+
& button {
|
|
1438
|
+
width: var(--spacing-field-height, 2.25rem);
|
|
1439
|
+
min-width: var(--spacing-field-height, 2.25rem);
|
|
1440
|
+
height: var(--spacing-field-height, 2.25rem);
|
|
1441
|
+
display: inline-flex;
|
|
1442
|
+
align-items: center;
|
|
1443
|
+
justify-content: center;
|
|
1444
|
+
padding: 0;
|
|
1445
|
+
background: transparent;
|
|
1446
|
+
border: none;
|
|
1447
|
+
border-radius: var(--radius, 0.5rem);
|
|
1448
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
1449
|
+
cursor: pointer;
|
|
1450
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1451
|
+
|
|
1452
|
+
&:hover {
|
|
1453
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
|
|
1454
|
+
color: var(--color-content-stark, oklch(20.5% 0 0))
|
|
1455
|
+
}
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1458
|
+
/* Heading (between nav arrows) — clickable view jump */
|
|
1459
|
+
& button:nth-child(2) {
|
|
1460
|
+
flex: 1;
|
|
1461
|
+
width: auto;
|
|
1462
|
+
padding: 0 0.5rem;
|
|
1463
|
+
text-align: center;
|
|
1464
|
+
font-weight: 600;
|
|
1465
|
+
color: inherit
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
/* Previous / next chevrons — baked-in masks, no icons plugin */
|
|
1469
|
+
& button:first-child::before,
|
|
1470
|
+
& button:last-child::before {
|
|
1471
|
+
content: "";
|
|
1472
|
+
width: 1rem;
|
|
1473
|
+
height: 1rem;
|
|
1474
|
+
background-color: currentColor;
|
|
1475
|
+
mask-repeat: no-repeat;
|
|
1476
|
+
mask-size: 100% 100%
|
|
1477
|
+
}
|
|
1478
|
+
|
|
1479
|
+
& button:first-child::before {
|
|
1480
|
+
mask-image: var(--icon-previous, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E"))
|
|
1481
|
+
}
|
|
1482
|
+
|
|
1483
|
+
& button:last-child::before {
|
|
1484
|
+
mask-image: var(--icon-next, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3E%3C/svg%3E"))
|
|
1485
|
+
}
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
/* Months row — one <section> per visible month, side by side */
|
|
1489
|
+
& div:has(> section) {
|
|
1490
|
+
display: flex;
|
|
1491
|
+
flex-flow: row nowrap;
|
|
1492
|
+
gap: 1rem
|
|
1493
|
+
}
|
|
1494
|
+
|
|
1495
|
+
& section {
|
|
1496
|
+
flex: 1;
|
|
1497
|
+
min-width: 14rem;
|
|
1498
|
+
|
|
1499
|
+
/* Month label (multi-month) */
|
|
1500
|
+
&>small {
|
|
1501
|
+
display: block;
|
|
1502
|
+
padding: 0.25rem 0;
|
|
1503
|
+
text-align: center;
|
|
1504
|
+
font-size: 0.8125rem;
|
|
1505
|
+
font-weight: 600;
|
|
1506
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0))
|
|
1507
|
+
}
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
/* Day grid */
|
|
1511
|
+
& [role=grid] {
|
|
1512
|
+
display: grid;
|
|
1513
|
+
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
1514
|
+
gap: 0;
|
|
1515
|
+
padding: 0.5rem 0;
|
|
1516
|
+
|
|
1517
|
+
/* Day names */
|
|
1518
|
+
& abbr {
|
|
1519
|
+
display: flex;
|
|
1520
|
+
align-items: center;
|
|
1521
|
+
justify-content: center;
|
|
1522
|
+
height: 1.75rem;
|
|
1523
|
+
font-size: 0.75rem;
|
|
1524
|
+
font-weight: 500;
|
|
1525
|
+
text-decoration: none;
|
|
1526
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0))
|
|
1527
|
+
}
|
|
1528
|
+
|
|
1529
|
+
/* Day buttons */
|
|
1530
|
+
& button {
|
|
1531
|
+
display: flex;
|
|
1532
|
+
align-items: center;
|
|
1533
|
+
justify-content: center;
|
|
1534
|
+
aspect-ratio: 1 / 1;
|
|
1535
|
+
padding: 0;
|
|
1536
|
+
font-size: 0.875rem;
|
|
1537
|
+
background: transparent;
|
|
1538
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1539
|
+
border: 1px solid transparent;
|
|
1540
|
+
border-radius: var(--radius, 0.5rem);
|
|
1541
|
+
cursor: pointer;
|
|
1542
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1543
|
+
|
|
1544
|
+
&:hover:not(:disabled):not([aria-selected=true]) {
|
|
1545
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
|
|
1546
|
+
}
|
|
1547
|
+
|
|
1548
|
+
&:focus-visible {
|
|
1549
|
+
outline: 2px solid var(--color-brand-content, oklch(60% 0.13 80));
|
|
1550
|
+
outline-offset: -2px
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1553
|
+
/* Other-month days */
|
|
1554
|
+
&.outside {
|
|
1555
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
1556
|
+
opacity: 0.55
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
/* Today marker */
|
|
1560
|
+
&[aria-current=date]:not([aria-selected=true]) {
|
|
1561
|
+
border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
|
|
1562
|
+
font-weight: 600
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
/* Selected day (also range endpoints) */
|
|
1566
|
+
&[aria-selected=true] {
|
|
1567
|
+
background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
|
|
1568
|
+
color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
|
|
1569
|
+
font-weight: 600
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
/* Days between range endpoints */
|
|
1573
|
+
&.in-range {
|
|
1574
|
+
background: color-mix(in oklch, var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0))) 30%, transparent);
|
|
1575
|
+
border-radius: 0
|
|
1576
|
+
}
|
|
1577
|
+
|
|
1578
|
+
/* Square inner edges so endpoints connect to the band */
|
|
1579
|
+
&.range-start:not(.range-end) {
|
|
1580
|
+
border-start-end-radius: 0;
|
|
1581
|
+
border-end-end-radius: 0
|
|
1582
|
+
}
|
|
1583
|
+
|
|
1584
|
+
&.range-end:not(.range-start) {
|
|
1585
|
+
border-start-start-radius: 0;
|
|
1586
|
+
border-end-start-radius: 0
|
|
1587
|
+
}
|
|
1588
|
+
|
|
1589
|
+
&:disabled {
|
|
1590
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
1591
|
+
opacity: 0.35;
|
|
1592
|
+
cursor: not-allowed;
|
|
1593
|
+
text-decoration: line-through
|
|
1594
|
+
}
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
|
|
1598
|
+
/* Month / year jump grid */
|
|
1599
|
+
& [role=listbox] {
|
|
1600
|
+
display: grid;
|
|
1601
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
1602
|
+
gap: 0.25rem;
|
|
1603
|
+
width: 100%;
|
|
1604
|
+
padding: 0.25rem 0;
|
|
1605
|
+
|
|
1606
|
+
& button {
|
|
1607
|
+
display: flex;
|
|
1608
|
+
align-items: center;
|
|
1609
|
+
justify-content: center;
|
|
1610
|
+
height: 2.75rem;
|
|
1611
|
+
width: 100%;
|
|
1612
|
+
padding: 0;
|
|
1613
|
+
font-size: 0.875rem;
|
|
1614
|
+
background: transparent;
|
|
1615
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1616
|
+
border: 1px solid transparent;
|
|
1617
|
+
border-radius: var(--radius, 0.5rem);
|
|
1618
|
+
cursor: pointer;
|
|
1619
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1620
|
+
|
|
1621
|
+
&:hover:not(:disabled) {
|
|
1622
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
|
|
1623
|
+
}
|
|
1624
|
+
|
|
1625
|
+
&[aria-current=true] {
|
|
1626
|
+
border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
|
|
1627
|
+
font-weight: 600
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
&[aria-selected=true] {
|
|
1631
|
+
background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
|
|
1632
|
+
color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
|
|
1633
|
+
font-weight: 600
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
&.outside {
|
|
1637
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
1638
|
+
opacity: 0.55
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
&:disabled {
|
|
1642
|
+
opacity: 0.35;
|
|
1643
|
+
cursor: not-allowed
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
/* Time-of-day row */
|
|
1649
|
+
& fieldset {
|
|
1650
|
+
display: flex;
|
|
1651
|
+
flex-direction: row;
|
|
1652
|
+
justify-content: space-between;
|
|
1653
|
+
align-items: center;
|
|
1654
|
+
gap: 0.5rem;
|
|
1655
|
+
width: 100%;
|
|
1656
|
+
min-width: 0;
|
|
1657
|
+
padding-top: 0.5rem;
|
|
1658
|
+
padding-bottom: 0.5rem;
|
|
1659
|
+
padding-inline-start: 0.5rem;
|
|
1660
|
+
border: none;
|
|
1661
|
+
border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
|
|
1662
|
+
|
|
1663
|
+
/* "Time" label — native invoker for the columns popover (for= the
|
|
1664
|
+
chevron button), so it needs width/height resets against
|
|
1665
|
+
dropdown.css's menu-item label styling */
|
|
1666
|
+
&>label {
|
|
1667
|
+
flex: none;
|
|
1668
|
+
width: auto;
|
|
1669
|
+
min-height: 0;
|
|
1670
|
+
padding: 0;
|
|
1671
|
+
font-size: 0.75rem;
|
|
1672
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
1673
|
+
cursor: pointer;
|
|
1674
|
+
|
|
1675
|
+
&:hover {
|
|
1676
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1677
|
+
background: transparent
|
|
1678
|
+
}
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
/* Segment group */
|
|
1682
|
+
&>[role=group] {
|
|
1683
|
+
display: flex;
|
|
1684
|
+
align-items: center;
|
|
1685
|
+
justify-content: end;
|
|
1686
|
+
height: var(--spacing-field-height, 2.25rem);
|
|
1687
|
+
padding-inline-start: 0.5rem;
|
|
1688
|
+
background: transparent;
|
|
1689
|
+
border: none;
|
|
1690
|
+
border-radius: var(--radius, 0.5rem);
|
|
1691
|
+
cursor: text;
|
|
1692
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1693
|
+
|
|
1694
|
+
/* Hour / minute segments */
|
|
1695
|
+
& input {
|
|
1696
|
+
box-sizing: content-box;
|
|
1697
|
+
width: 2ch;
|
|
1698
|
+
min-width: 0;
|
|
1699
|
+
margin: 0;
|
|
1700
|
+
padding: 0 0.25rem;
|
|
1701
|
+
font-size: 0.875rem;
|
|
1702
|
+
line-height: 1.5rem;
|
|
1703
|
+
font-variant-numeric: tabular-nums;
|
|
1704
|
+
text-align: center;
|
|
1705
|
+
background: transparent;
|
|
1706
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1707
|
+
border: none;
|
|
1708
|
+
border-radius: calc(var(--radius, 0.5rem) / 2);
|
|
1709
|
+
outline: none;
|
|
1710
|
+
appearance: none;
|
|
1711
|
+
|
|
1712
|
+
&:hover,
|
|
1713
|
+
&:focus {
|
|
1714
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
|
|
1715
|
+
}
|
|
1716
|
+
}
|
|
1717
|
+
|
|
1718
|
+
/* Separator */
|
|
1719
|
+
&>span {
|
|
1720
|
+
line-height: 1.5rem;
|
|
1721
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0))
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1724
|
+
/* AM/PM toggle */
|
|
1725
|
+
&>button {
|
|
1726
|
+
width: auto;
|
|
1727
|
+
min-width: 0;
|
|
1728
|
+
height: 1.5rem;
|
|
1729
|
+
padding: 0 0.375rem;
|
|
1730
|
+
font-size: 0.875rem;
|
|
1731
|
+
line-height: 1.5rem;
|
|
1732
|
+
background: transparent;
|
|
1733
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1734
|
+
border: none;
|
|
1735
|
+
border-radius: calc(var(--radius, 0.5rem) / 2);
|
|
1736
|
+
cursor: pointer;
|
|
1737
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1738
|
+
|
|
1739
|
+
&:hover {
|
|
1740
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1744
|
+
/* Chevron that invokes the columns popover — same glyph as
|
|
1745
|
+
select buttons (see buttons.css ::picker-icon) */
|
|
1746
|
+
&>button[popovertarget] {
|
|
1747
|
+
display: inline-flex;
|
|
1748
|
+
align-items: center;
|
|
1749
|
+
justify-content: center;
|
|
1750
|
+
width: 1.5rem;
|
|
1751
|
+
padding: 0;
|
|
1752
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
1753
|
+
|
|
1754
|
+
&:hover {
|
|
1755
|
+
color: var(--color-content-stark, oklch(20.5% 0 0))
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
&::before {
|
|
1759
|
+
content: "⌄";
|
|
1760
|
+
height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
|
|
1761
|
+
transform: scaleY(0.7);
|
|
1762
|
+
font-size: 20px;
|
|
1763
|
+
line-height: 0.4
|
|
1764
|
+
}
|
|
1765
|
+
}
|
|
1766
|
+
}
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
/* Standalone time picker — columns inline in the calendar */
|
|
1770
|
+
& div.time-options {
|
|
1771
|
+
display: flex;
|
|
1772
|
+
justify-content: center;
|
|
1773
|
+
width: 100%;
|
|
1774
|
+
max-height: 14rem;
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1777
|
+
/* Footer */
|
|
1778
|
+
& footer {
|
|
1779
|
+
display: flex;
|
|
1780
|
+
align-items: center;
|
|
1781
|
+
justify-content: space-between;
|
|
1782
|
+
gap: 0.25rem;
|
|
1783
|
+
width: 100%;
|
|
1784
|
+
padding: 0.5rem 0;
|
|
1785
|
+
border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
|
|
1786
|
+
|
|
1787
|
+
/* Today | Clear buttons */
|
|
1788
|
+
& button {
|
|
1789
|
+
width: fit-content
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
/* Preset chips */
|
|
1793
|
+
&>div {
|
|
1794
|
+
flex: 1;
|
|
1795
|
+
display: flex;
|
|
1796
|
+
flex-flow: row wrap;
|
|
1797
|
+
align-items: center;
|
|
1798
|
+
justify-content: center;
|
|
1799
|
+
gap: 0.25rem;
|
|
1800
|
+
|
|
1801
|
+
& button {
|
|
1802
|
+
height: auto;
|
|
1803
|
+
min-height: 0;
|
|
1804
|
+
padding: 0.25rem 0.625rem;
|
|
1805
|
+
font-size: 0.75rem;
|
|
1806
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
|
|
1807
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1808
|
+
border: none;
|
|
1809
|
+
border-radius: calc(var(--radius, 0.5rem) * 2);
|
|
1810
|
+
cursor: pointer;
|
|
1811
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1812
|
+
|
|
1813
|
+
&:hover {
|
|
1814
|
+
background: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 16%, transparent))
|
|
1815
|
+
}
|
|
1816
|
+
}
|
|
1817
|
+
}
|
|
1818
|
+
}
|
|
1819
|
+
}
|
|
1820
|
+
|
|
1821
|
+
/* Time dropdown */
|
|
1822
|
+
:where(menu.time-options):not(.unstyle) {
|
|
1823
|
+
position-area: end center;
|
|
1824
|
+
position-try-fallbacks: flip-block;
|
|
1825
|
+
width: max-content;
|
|
1826
|
+
min-width: 0;
|
|
1827
|
+
margin: 0;
|
|
1828
|
+
padding: 0.25rem;
|
|
1829
|
+
list-style: none;
|
|
1830
|
+
}
|
|
1831
|
+
|
|
1832
|
+
/* Time columns — hours / minutes / (AM-PM + actions) */
|
|
1833
|
+
.time-options {
|
|
1834
|
+
flex-flow: row nowrap;
|
|
1835
|
+
gap: 0.25rem;
|
|
1836
|
+
|
|
1837
|
+
/* Column */
|
|
1838
|
+
&>div {
|
|
1839
|
+
flex: 1;
|
|
1840
|
+
min-width: 2.75rem;
|
|
1841
|
+
max-height: 13rem;
|
|
1842
|
+
overflow-y: auto;
|
|
1843
|
+
display: flex;
|
|
1844
|
+
flex-direction: column;
|
|
1845
|
+
gap: 1px;
|
|
1846
|
+
scrollbar-width: thin;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
/* Option */
|
|
1850
|
+
& button {
|
|
1851
|
+
flex: none;
|
|
1852
|
+
width: auto;
|
|
1853
|
+
min-width: 0;
|
|
1854
|
+
height: auto;
|
|
1855
|
+
min-height: 0;
|
|
1856
|
+
padding: 0.25rem 0.5rem;
|
|
1857
|
+
font-size: 0.8125rem;
|
|
1858
|
+
font-variant-numeric: tabular-nums;
|
|
1859
|
+
text-align: center;
|
|
1860
|
+
justify-content: center;
|
|
1861
|
+
background: transparent;
|
|
1862
|
+
color: var(--color-content-stark, oklch(20.5% 0 0));
|
|
1863
|
+
border: none;
|
|
1864
|
+
border-radius: calc(var(--radius, 0.5rem) / 2);
|
|
1865
|
+
cursor: pointer;
|
|
1866
|
+
transition: var(--transition, all .05s ease-in-out);
|
|
1867
|
+
|
|
1868
|
+
&:hover {
|
|
1869
|
+
background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
&[aria-selected=true] {
|
|
1873
|
+
background: var(--color-brand-surface, var(--color-accent-surface, oklch(20.5% 0 0)));
|
|
1874
|
+
color: var(--color-brand-inverse, var(--color-accent-inverse, oklch(98.5% 0 0)));
|
|
1875
|
+
font-weight: 600
|
|
1876
|
+
}
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
/* Now / Clear actions */
|
|
1880
|
+
& button:not([value]) {
|
|
1881
|
+
font-size: 0.75rem;
|
|
1882
|
+
font-variant-numeric: normal;
|
|
1883
|
+
color: var(--color-content-subtle, oklch(55.6% 0 0));
|
|
1884
|
+
|
|
1885
|
+
&:hover {
|
|
1886
|
+
color: var(--color-content-stark, oklch(20.5% 0 0))
|
|
1887
|
+
}
|
|
1888
|
+
}
|
|
1889
|
+
|
|
1890
|
+
/* First action in a column drops to the bottom */
|
|
1891
|
+
& button[value]+button:not([value]),
|
|
1892
|
+
& button:not([value]):first-child {
|
|
1893
|
+
margin-top: auto
|
|
1894
|
+
}
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
/* Popover menu presentation */
|
|
1898
|
+
:where(menu[popover][x-date], menu[popover].date-picker):not(.unstyle) {
|
|
1899
|
+
margin: 0;
|
|
1900
|
+
padding: 0;
|
|
1901
|
+
list-style: none
|
|
1902
|
+
}
|
|
1903
|
+
|
|
1904
|
+
/* RTL support */
|
|
1905
|
+
[dir=rtl] :where([x-date], .date-picker):not(.unstyle) header {
|
|
1906
|
+
|
|
1907
|
+
& button:first-child::before,
|
|
1908
|
+
& button:last-child::before {
|
|
1909
|
+
transform: scaleX(-1)
|
|
1910
|
+
}
|
|
1911
|
+
}
|
|
1912
|
+
}
|
|
1913
|
+
|
|
1210
1914
|
/* Manifest Dialogs */
|
|
1915
|
+
/* A closed popover stays hidden even when a layout utility (.col/.row/.grid,
|
|
1916
|
+
Tailwind flex) sets display on it — UNLAYERED so it outranks those utilities
|
|
1917
|
+
in any cascade layer, in any cherry-picked bundle. Only the closed state is
|
|
1918
|
+
forced; an open popover's display is left to its layout classes. */
|
|
1919
|
+
[popover]:not(.unstyle):not(:popover-open) {
|
|
1920
|
+
display: none;
|
|
1921
|
+
}
|
|
1922
|
+
|
|
1211
1923
|
|
|
1212
1924
|
@layer components {
|
|
1213
1925
|
|
|
@@ -1388,6 +2100,14 @@
|
|
|
1388
2100
|
}
|
|
1389
2101
|
|
|
1390
2102
|
/* Manifest Dropdowns */
|
|
2103
|
+
/* A closed popover stays hidden even when a layout utility (.col/.row/.grid,
|
|
2104
|
+
Tailwind flex) sets display on it — UNLAYERED so it outranks those utilities
|
|
2105
|
+
in any cascade layer, in any cherry-picked bundle. Only the closed state is
|
|
2106
|
+
forced; an open popover's display is left to its layout classes. */
|
|
2107
|
+
[popover]:not(.unstyle):not(:popover-open) {
|
|
2108
|
+
display: none;
|
|
2109
|
+
}
|
|
2110
|
+
|
|
1391
2111
|
|
|
1392
2112
|
@layer components {
|
|
1393
2113
|
|
|
@@ -2403,6 +3123,14 @@
|
|
|
2403
3123
|
}
|
|
2404
3124
|
|
|
2405
3125
|
/* Manifest Sidebars */
|
|
3126
|
+
/* A closed popover stays hidden even when a layout utility (.col/.row/.grid,
|
|
3127
|
+
Tailwind flex) sets display on it — UNLAYERED so it outranks those utilities
|
|
3128
|
+
in any cascade layer, in any cherry-picked bundle. Only the closed state is
|
|
3129
|
+
forced; an open popover's display is left to its layout classes. */
|
|
3130
|
+
[popover]:not(.unstyle):not(:popover-open) {
|
|
3131
|
+
display: none;
|
|
3132
|
+
}
|
|
3133
|
+
|
|
2406
3134
|
|
|
2407
3135
|
@layer components {
|
|
2408
3136
|
|
|
@@ -2739,7 +3467,7 @@
|
|
|
2739
3467
|
width: 50%;
|
|
2740
3468
|
height: 50%;
|
|
2741
3469
|
background-color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
2742
|
-
mask-image: var(--icon-
|
|
3470
|
+
mask-image: var(--icon-dismiss, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"));
|
|
2743
3471
|
mask-repeat: no-repeat;
|
|
2744
3472
|
mask-size: 100% 100%;
|
|
2745
3473
|
transform-origin: center;
|
|
@@ -2772,18 +3500,21 @@
|
|
|
2772
3500
|
}
|
|
2773
3501
|
|
|
2774
3502
|
/* Manifest Tooltips */
|
|
3503
|
+
/* A closed popover stays hidden even when a layout utility (.col/.row/.grid,
|
|
3504
|
+
Tailwind flex) sets display on it — UNLAYERED so it outranks those utilities
|
|
3505
|
+
in any cascade layer, in any cherry-picked bundle. Only the closed state is
|
|
3506
|
+
forced; an open popover's display is left to its layout classes. */
|
|
3507
|
+
[popover]:not(.unstyle):not(:popover-open) {
|
|
3508
|
+
display: none;
|
|
3509
|
+
}
|
|
3510
|
+
|
|
2775
3511
|
|
|
2776
3512
|
@layer utilities {
|
|
2777
3513
|
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
position-area: bottom;
|
|
2782
|
-
inset: auto;
|
|
2783
|
-
display: block;
|
|
3514
|
+
/* Shared chrome — anchored x-tooltip popovers AND non-popover tooltips
|
|
3515
|
+
(e.g. the charts plugin's cursor-following tip) */
|
|
3516
|
+
:where(.tooltip) {
|
|
2784
3517
|
width: fit-content;
|
|
2785
|
-
max-width: 200px;
|
|
2786
|
-
margin: var(--spacing-popover-offset, 0.5rem) 0;
|
|
2787
3518
|
padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
|
|
2788
3519
|
font-size: 0.875rem;
|
|
2789
3520
|
color: var(--color-page, oklch(98.5% 0 0));
|
|
@@ -2792,16 +3523,50 @@
|
|
|
2792
3523
|
border-radius: var(--radius, 0.5rem);
|
|
2793
3524
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
2794
3525
|
|
|
2795
|
-
&:hover {
|
|
2796
|
-
transition-delay: var(--tooltip-hover-delay, .5s)
|
|
2797
|
-
}
|
|
2798
|
-
|
|
2799
3526
|
/* Leading icon */
|
|
2800
3527
|
& [x-icon]:first-child {
|
|
2801
3528
|
margin-inline-end: 0.25rem
|
|
2802
3529
|
}
|
|
2803
3530
|
}
|
|
2804
3531
|
|
|
3532
|
+
/* Anchored popover positioning + open/close behavior */
|
|
3533
|
+
:where(.tooltip[popover]) {
|
|
3534
|
+
position: absolute;
|
|
3535
|
+
position-try-fallbacks: flip-inline, flip-block, flip-start;
|
|
3536
|
+
position-area: bottom;
|
|
3537
|
+
inset: auto;
|
|
3538
|
+
display: block;
|
|
3539
|
+
max-width: 200px;
|
|
3540
|
+
margin: var(--spacing-popover-offset, 0.5rem) 0;
|
|
3541
|
+
|
|
3542
|
+
/* Tooltips keep their original transition-based fade/scale rather than the
|
|
3543
|
+
shared scale-pop: the hover delay below needs a transition to act on,
|
|
3544
|
+
and the `display: none` close (overriding `display: block` above) is
|
|
3545
|
+
what hides them on mouse-off. */
|
|
3546
|
+
animation: none;
|
|
3547
|
+
transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
|
|
3548
|
+
transition-behavior: allow-discrete;
|
|
3549
|
+
|
|
3550
|
+
/* Opening state */
|
|
3551
|
+
@starting-style {
|
|
3552
|
+
scale: .9;
|
|
3553
|
+
opacity: 0
|
|
3554
|
+
}
|
|
3555
|
+
|
|
3556
|
+
/* Closing state */
|
|
3557
|
+
&:not(:popover-open) {
|
|
3558
|
+
display: none !important;
|
|
3559
|
+
scale: 1;
|
|
3560
|
+
opacity: 0;
|
|
3561
|
+
transition-duration: .15s;
|
|
3562
|
+
transition-timing-function: ease-out
|
|
3563
|
+
}
|
|
3564
|
+
|
|
3565
|
+
&:hover {
|
|
3566
|
+
transition-delay: var(--tooltip-hover-delay, .5s)
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3569
|
+
|
|
2805
3570
|
/* Top alignment */
|
|
2806
3571
|
:where(.tooltip.top) {
|
|
2807
3572
|
position-area: top;
|
|
@@ -3651,10 +4416,11 @@
|
|
|
3651
4416
|
|
|
3652
4417
|
/* Ghost */
|
|
3653
4418
|
:where(.ghost) {
|
|
4419
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
3654
4420
|
background-color: transparent;
|
|
3655
4421
|
|
|
3656
4422
|
&:hover {
|
|
3657
|
-
background-color: var(--color-field-surface,
|
|
4423
|
+
background-color: color-mix(in oklch, var(--color-field-surface, oklch(37.1% 0 0)) 50%, transparent)
|
|
3658
4424
|
}
|
|
3659
4425
|
}
|
|
3660
4426
|
|
|
@@ -3854,7 +4620,7 @@
|
|
|
3854
4620
|
padding: calc(var(--spacing, 0.25rem) * 4);
|
|
3855
4621
|
font-family: var(--font-sans);
|
|
3856
4622
|
font-size: initial;
|
|
3857
|
-
background-color: color-mix(var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
|
|
4623
|
+
background-color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
|
|
3858
4624
|
border: 0 none;
|
|
3859
4625
|
border-radius: 0
|
|
3860
4626
|
}
|