mnfst 0.5.121 → 0.5.123

package/lib/manifest.theme.css

@@ -19,7 +19,7 @@
     --color-field-surface-hover: var(--color-neutral-400);
     --color-field-inverse: var(--color-content-stark);
     --color-popover-surface: var(--color-page);
-    --color-line: color-mix(var(--color-content-stark) 11%, transparent);
+    --color-line: color-mix(in oklch, var(--color-content-stark) 11%, transparent);
     --color-brand-surface: var(--color-yellow-300);
     --color-brand-surface-hover: var(--color-yellow-400);
     --color-brand-inverse: var(--color-yellow-700);
@@ -58,8 +58,10 @@
 
     /* Icons */
     --icon-accordion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E");
-    --icon-checkbox: 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");
-    --icon-toast-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");
+    --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");
+    --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");
+    --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");
+    --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");
 }
 
 /* Dark mode overrides */
@@ -118,6 +120,6 @@
     /* Focus state */
     :where(:focus-visible, label:has(input[type=search], input[type=file]):focus-within) {
         outline: none;
-        box-shadow: 0 0 0 2px color-mix(var(--color-content-stark) 30%, transparent)
+        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
     }
 }

package/lib/manifest.toast.css

@@ -59,7 +59,7 @@
                 width: 50%;
                 height: 50%;
                 background-color: var(--color-field-inverse, oklch(43.9% 0 0));
-                mask-image: var(--icon-toast-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"));
+                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"));
                 mask-repeat: no-repeat;
                 mask-size: 100% 100%;
                 transform-origin: center;

package/lib/manifest.tooltip.css

@@ -1,35 +1,37 @@
 /* Manifest Tooltips */
 
+/* A closed popover stays hidden even when a layout utility (.col/.row/.grid,
+   Tailwind flex) sets display on it — UNLAYERED so it outranks those utilities
+   in any cascade layer, in any cherry-picked bundle. Only the closed state is
+   forced; an open popover's display is left to its layout classes. */
+[popover]:not(.unstyle):not(:popover-open) {
+    display: none;
+}
+
 @layer base {
 
-    /* Base popover styles: scale-only pop-in, no opacity animation (avoids the
-       see-through artifact + Safari bounce). See manifest.dropdown.css. */
     @keyframes mnfst-popover-in {
-        from { transform: scale(.9); }
-        to { transform: none; }
-    }
-
-    :where([popover]):not(.unstyle) {
-        display: none;
+        from {
+            transform: scale(.9);
+        }
 
-        &:popover-open {
-            display: flex;
-            animation: mnfst-popover-in .15s ease-in both;
+        to {
+            transform: none;
         }
     }
+
+    :where([popover]):not(.unstyle):popover-open {
+        display: flex;
+        animation: mnfst-popover-in .15s ease-in both;
+    }
 }
 
 @layer utilities {
 
-    :where(.tooltip[popover]) {
-        position: absolute;
-        position-try-fallbacks: flip-inline, flip-block, flip-start;
-        position-area: bottom;
-        inset: auto;
-        display: block;
+    /* Shared chrome — anchored x-tooltip popovers AND non-popover tooltips
+       (e.g. the charts plugin's cursor-following tip) */
+    :where(.tooltip) {
         width: fit-content;
-        max-width: 200px;
-        margin: var(--spacing-popover-offset, 0.5rem) 0;
         padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
         font-size: 0.875rem;
         color: var(--color-page, oklch(98.5% 0 0));
@@ -38,16 +40,50 @@
         border-radius: var(--radius, 0.5rem);
         box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
-        &:hover {
-            transition-delay: var(--tooltip-hover-delay, .5s)
-        }
-
         /* Leading icon */
         & [x-icon]:first-child {
             margin-inline-end: 0.25rem
         }
     }
 
+    /* Anchored popover positioning + open/close behavior */
+    :where(.tooltip[popover]) {
+        position: absolute;
+        position-try-fallbacks: flip-inline, flip-block, flip-start;
+        position-area: bottom;
+        inset: auto;
+        display: block;
+        max-width: 200px;
+        margin: var(--spacing-popover-offset, 0.5rem) 0;
+
+        /* Tooltips keep their original transition-based fade/scale rather than the
+           shared scale-pop: the hover delay below needs a transition to act on,
+           and the `display: none` close (overriding `display: block` above) is
+           what hides them on mouse-off. */
+        animation: none;
+        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
+        transition-behavior: allow-discrete;
+
+        /* Opening state */
+        @starting-style {
+            scale: .9;
+            opacity: 0
+        }
+
+        /* Closing state */
+        &:not(:popover-open) {
+            display: none !important;
+            scale: 1;
+            opacity: 0;
+            transition-duration: .15s;
+            transition-timing-function: ease-out
+        }
+
+        &:hover {
+            transition-delay: var(--tooltip-hover-delay, .5s)
+        }
+    }
+
     /* Top alignment */
     :where(.tooltip.top) {
         position-area: top;

package/lib/manifest.utilities.css

@@ -43,10 +43,11 @@
 
     /* Ghost */
     :where(.ghost) {
+        color: var(--color-content-neutral, oklch(43.9% 0 0));
         background-color: transparent;
 
         &:hover {
-            background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            background-color: color-mix(in oklch, var(--color-field-surface, oklch(37.1% 0 0)) 50%, transparent)
         }
     }
 
@@ -246,7 +247,7 @@
             padding: calc(var(--spacing, 0.25rem) * 4);
             font-family: var(--font-sans);
             font-size: initial;
-            background-color: color-mix(var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
+            background-color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
             border: 0 none;
             border-radius: 0
         }

package/lib/manifest.utilities.js

@@ -795,8 +795,19 @@ TailwindCompiler.prototype.addCriticalBlockingStylesSync = function () {
         }
 
         // 4. From computed styles (if :root is available)
+        // Run even while document.readyState === 'loading'. This method is the
+        // constructor's only origin-independent variable source: getComputedStyle
+        // reads the resolved cascade regardless of stylesheet origin, whereas
+        // method 3 (CSSOM cssRules) throws on cross-origin sheets (e.g. the CDN
+        // build at cdn.jsdelivr.net). The classic <script> blocks on preceding
+        // stylesheets, so :root variables are already resolved here. Skipping
+        // this during 'loading' meant a CDN-hosted page captured zero variables
+        // synchronously, so the critical "all colors" fallback never ran and
+        // variable-derived utilities (bg-line, border-line, …) fell back to
+        // currentColor — pure white in dark mode / black in light — until the
+        // async compile finished.
         try {
-            if (document.documentElement && document.readyState !== 'loading') {
+            if (document.documentElement) {
                 const rootStyles = getComputedStyle(document.documentElement);
                 let computedVars = 0;
                 for (let i = 0; i < rootStyles.length; i++) {
@@ -1021,8 +1032,13 @@ TailwindCompiler.prototype.generateSynchronousUtilities = function () {
         }
 
         // Method 3: Check computed styles from :root (if available)
+        // Run even during readyState === 'loading' — getComputedStyle resolves
+        // the cascade from cross-origin stylesheets (CDN builds) that the CSSOM
+        // methods above cannot read. See addCriticalBlockingStylesSync for the
+        // full rationale: without this, CDN-hosted pages capture no variables
+        // synchronously and variable-derived utilities flash as currentColor.
         try {
-            if (document.readyState !== 'loading') {
+            if (document.documentElement) {
                 const rootStyles = getComputedStyle(document.documentElement);
                 // Extract all CSS variables, not just color ones
                 const allProps = rootStyles.length;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.121",
+    "version": "0.5.123",
     "private": false,
     "workspaces": [
         "templates/starter",
@@ -37,6 +37,8 @@
         "release:all": "npm run release:run && npm run release:render && npm run release:types && npm run release:test && npm run release:export && npm run release:starter && npm run release",
         "prepublishOnly": "npm run build",
         "test": "vitest run",
+        "test:e2e": "node tests/e2e/payments.e2e.mjs",
+        "test:e2e:sdk": "node tests/e2e/payments.sdk.e2e.mjs",
         "lint": "echo 'No linting configured'"
     },
     "devDependencies": {