mnfst 0.5.119 → 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 +762 -36
- 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 +12 -19
- package/lib/manifest.dropdown.css +12 -19
- 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 +14 -19
- 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 +52 -30
- 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,29 +272,22 @@
|
|
|
272
272
|
}
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
|
|
279
|
-
transition-behavior: allow-discrete;
|
|
280
|
-
|
|
281
|
-
&:popover-open {
|
|
282
|
-
display: flex
|
|
275
|
+
@keyframes mnfst-popover-in {
|
|
276
|
+
from {
|
|
277
|
+
transform: scale(.9);
|
|
283
278
|
}
|
|
284
279
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
scale: .9;
|
|
288
|
-
opacity: 0;
|
|
280
|
+
to {
|
|
281
|
+
transform: none;
|
|
289
282
|
}
|
|
283
|
+
}
|
|
290
284
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
transition-timing-function: ease-out
|
|
285
|
+
:where([popover]) {
|
|
286
|
+
display: none;
|
|
287
|
+
|
|
288
|
+
&:popover-open {
|
|
289
|
+
display: flex;
|
|
290
|
+
animation: mnfst-popover-in .15s ease-in both;
|
|
298
291
|
}
|
|
299
292
|
}
|
|
300
293
|
|
|
@@ -651,6 +644,202 @@
|
|
|
651
644
|
}
|
|
652
645
|
}
|
|
653
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
|
+
|
|
654
843
|
/* Manifest Checkboxes */
|
|
655
844
|
|
|
656
845
|
@layer components {
|
|
@@ -688,8 +877,8 @@
|
|
|
688
877
|
width: 60%;
|
|
689
878
|
height: 60%;
|
|
690
879
|
background-color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
691
|
-
-webkit-mask-image: var(--icon-
|
|
692
|
-
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"));
|
|
693
882
|
-webkit-mask-repeat: no-repeat;
|
|
694
883
|
mask-repeat: no-repeat;
|
|
695
884
|
-webkit-mask-size: 100% 100%;
|
|
@@ -1217,6 +1406,511 @@
|
|
|
1217
1406
|
}
|
|
1218
1407
|
}
|
|
1219
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
|
+
|
|
1220
1914
|
/* Manifest Dialogs */
|
|
1221
1915
|
|
|
1222
1916
|
@layer components {
|
|
@@ -2426,6 +3120,8 @@
|
|
|
2426
3120
|
overflow-y: auto;
|
|
2427
3121
|
z-index: 200;
|
|
2428
3122
|
background-color: var(--color-popover-surface, oklch(98.5% 0 0));
|
|
3123
|
+
/* Opt out of the base scale-pop; sidebars slide instead. */
|
|
3124
|
+
animation: none;
|
|
2429
3125
|
transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
|
|
2430
3126
|
transition-behavior: allow-discrete;
|
|
2431
3127
|
|
|
@@ -2747,7 +3443,7 @@
|
|
|
2747
3443
|
width: 50%;
|
|
2748
3444
|
height: 50%;
|
|
2749
3445
|
background-color: var(--color-field-inverse, oklch(43.9% 0 0));
|
|
2750
|
-
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"));
|
|
2751
3447
|
mask-repeat: no-repeat;
|
|
2752
3448
|
mask-size: 100% 100%;
|
|
2753
3449
|
transform-origin: center;
|
|
@@ -2783,15 +3479,10 @@
|
|
|
2783
3479
|
|
|
2784
3480
|
@layer utilities {
|
|
2785
3481
|
|
|
2786
|
-
|
|
2787
|
-
|
|
2788
|
-
|
|
2789
|
-
position-area: bottom;
|
|
2790
|
-
inset: auto;
|
|
2791
|
-
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) {
|
|
2792
3485
|
width: fit-content;
|
|
2793
|
-
max-width: 200px;
|
|
2794
|
-
margin: var(--spacing-popover-offset, 0.5rem) 0;
|
|
2795
3486
|
padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
|
|
2796
3487
|
font-size: 0.875rem;
|
|
2797
3488
|
color: var(--color-page, oklch(98.5% 0 0));
|
|
@@ -2800,16 +3491,50 @@
|
|
|
2800
3491
|
border-radius: var(--radius, 0.5rem);
|
|
2801
3492
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
2802
3493
|
|
|
2803
|
-
&:hover {
|
|
2804
|
-
transition-delay: var(--tooltip-hover-delay, .5s)
|
|
2805
|
-
}
|
|
2806
|
-
|
|
2807
3494
|
/* Leading icon */
|
|
2808
3495
|
& [x-icon]:first-child {
|
|
2809
3496
|
margin-inline-end: 0.25rem
|
|
2810
3497
|
}
|
|
2811
3498
|
}
|
|
2812
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
|
+
|
|
2813
3538
|
/* Top alignment */
|
|
2814
3539
|
:where(.tooltip.top) {
|
|
2815
3540
|
position-area: top;
|
|
@@ -3659,10 +4384,11 @@
|
|
|
3659
4384
|
|
|
3660
4385
|
/* Ghost */
|
|
3661
4386
|
:where(.ghost) {
|
|
4387
|
+
color: var(--color-content-neutral, oklch(43.9% 0 0));
|
|
3662
4388
|
background-color: transparent;
|
|
3663
4389
|
|
|
3664
4390
|
&:hover {
|
|
3665
|
-
background-color: var(--color-field-surface,
|
|
4391
|
+
background-color: color-mix(in oklch, var(--color-field-surface, oklch(37.1% 0 0)) 50%, transparent)
|
|
3666
4392
|
}
|
|
3667
4393
|
}
|
|
3668
4394
|
|
|
@@ -3862,7 +4588,7 @@
|
|
|
3862
4588
|
padding: calc(var(--spacing, 0.25rem) * 4);
|
|
3863
4589
|
font-family: var(--font-sans);
|
|
3864
4590
|
font-size: initial;
|
|
3865
|
-
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);
|
|
3866
4592
|
border: 0 none;
|
|
3867
4593
|
border-radius: 0
|
|
3868
4594
|
}
|