mnfst 0.5.121 → 0.5.122
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 +755 -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 +7 -4
- package/lib/manifest.dropdown.css +7 -10
- 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 +7 -6
- 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 +48 -16
- 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,6 +1406,511 @@
|
|
|
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 */
|
|
1211
1915
|
|
|
1212
1916
|
@layer components {
|
|
@@ -2739,7 +3443,7 @@
|
|
|
2739
3443
|
width: 50%;
|
|
2740
3444
|
height: 50%;
|
|
2741
3445
|
background-color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
2742
|
-
mask-image: var(--icon-
|
|
3446
|
+
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
3447
|
mask-repeat: no-repeat;
|
|
2744
3448
|
mask-size: 100% 100%;
|
|
2745
3449
|
transform-origin: center;
|
|
@@ -2775,15 +3479,10 @@
|
|
|
2775
3479
|
|
|
2776
3480
|
@layer utilities {
|
|
2777
3481
|
|
|
2778
|
-
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
position-area: bottom;
|
|
2782
|
-
inset: auto;
|
|
2783
|
-
display: block;
|
|
3482
|
+
/* Shared chrome — anchored x-tooltip popovers AND non-popover tooltips
|
|
3483
|
+
(e.g. the charts plugin's cursor-following tip) */
|
|
3484
|
+
:where(.tooltip) {
|
|
2784
3485
|
width: fit-content;
|
|
2785
|
-
max-width: 200px;
|
|
2786
|
-
margin: var(--spacing-popover-offset, 0.5rem) 0;
|
|
2787
3486
|
padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
|
|
2788
3487
|
font-size: 0.875rem;
|
|
2789
3488
|
color: var(--color-page, oklch(98.5% 0 0));
|
|
@@ -2792,16 +3491,50 @@
|
|
|
2792
3491
|
border-radius: var(--radius, 0.5rem);
|
|
2793
3492
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
2794
3493
|
|
|
2795
|
-
&:hover {
|
|
2796
|
-
transition-delay: var(--tooltip-hover-delay, .5s)
|
|
2797
|
-
}
|
|
2798
|
-
|
|
2799
3494
|
/* Leading icon */
|
|
2800
3495
|
& [x-icon]:first-child {
|
|
2801
3496
|
margin-inline-end: 0.25rem
|
|
2802
3497
|
}
|
|
2803
3498
|
}
|
|
2804
3499
|
|
|
3500
|
+
/* Anchored popover positioning + open/close behavior */
|
|
3501
|
+
:where(.tooltip[popover]) {
|
|
3502
|
+
position: absolute;
|
|
3503
|
+
position-try-fallbacks: flip-inline, flip-block, flip-start;
|
|
3504
|
+
position-area: bottom;
|
|
3505
|
+
inset: auto;
|
|
3506
|
+
display: block;
|
|
3507
|
+
max-width: 200px;
|
|
3508
|
+
margin: var(--spacing-popover-offset, 0.5rem) 0;
|
|
3509
|
+
|
|
3510
|
+
/* Tooltips keep their original transition-based fade/scale rather than the
|
|
3511
|
+
shared scale-pop: the hover delay below needs a transition to act on,
|
|
3512
|
+
and the `display: none` close (overriding `display: block` above) is
|
|
3513
|
+
what hides them on mouse-off. */
|
|
3514
|
+
animation: none;
|
|
3515
|
+
transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
|
|
3516
|
+
transition-behavior: allow-discrete;
|
|
3517
|
+
|
|
3518
|
+
/* Opening state */
|
|
3519
|
+
@starting-style {
|
|
3520
|
+
scale: .9;
|
|
3521
|
+
opacity: 0
|
|
3522
|
+
}
|
|
3523
|
+
|
|
3524
|
+
/* Closing state */
|
|
3525
|
+
&:not(:popover-open) {
|
|
3526
|
+
display: none !important;
|
|
3527
|
+
scale: 1;
|
|
3528
|
+
opacity: 0;
|
|
3529
|
+
transition-duration: .15s;
|
|
3530
|
+
transition-timing-function: ease-out
|
|
3531
|
+
}
|
|
3532
|
+
|
|
3533
|
+
&:hover {
|
|
3534
|
+
transition-delay: var(--tooltip-hover-delay, .5s)
|
|
3535
|
+
}
|
|
3536
|
+
}
|
|
3537
|
+
|
|
2805
3538
|
/* Top alignment */
|
|
2806
3539
|
:where(.tooltip.top) {
|
|
2807
3540
|
position-area: top;
|
|
@@ -3651,10 +4384,11 @@
|
|
|
3651
4384
|
|
|
3652
4385
|
/* Ghost */
|
|
3653
4386
|
:where(.ghost) {
|
|
4387
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
3654
4388
|
background-color: transparent;
|
|
3655
4389
|
|
|
3656
4390
|
&:hover {
|
|
3657
|
-
background-color: var(--color-field-surface,
|
|
4391
|
+
background-color: color-mix(in oklch, var(--color-field-surface, oklch(37.1% 0 0)) 50%, transparent)
|
|
3658
4392
|
}
|
|
3659
4393
|
}
|
|
3660
4394
|
|
|
@@ -3854,7 +4588,7 @@
|
|
|
3854
4588
|
padding: calc(var(--spacing, 0.25rem) * 4);
|
|
3855
4589
|
font-family: var(--font-sans);
|
|
3856
4590
|
font-size: initial;
|
|
3857
|
-
background-color: color-mix(var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
|
|
4591
|
+
background-color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
|
|
3858
4592
|
border: 0 none;
|
|
3859
4593
|
border-radius: 0
|
|
3860
4594
|
}
|