mnfst 0.5.81 → 0.5.83

package/lib/manifest.theme.css

@@ -8,19 +8,19 @@
 ::selection {
 
     /* Default palette */
-    --color-50: oklch(100% 0 0);
-    --color-100: oklch(98.17% 0.0005 95.87);
-    --color-200: oklch(96.27% 0.0026 252.34);
-    --color-300: oklch(91.79% 0.0029 264.26);
-    --color-400: oklch(89.24% 0.0024 12.48);
-    --color-500: oklch(67.4% 0.0318 251.27);
-    --color-600: oklch(48.26% 0.0365 255.09);
-    --color-700: oklch(28.7% 0.030787 270.1);
-    --color-800: oklch(20.7% 0.026326 268.7);
-    --color-900: oklch(16.6% 0.026 267);
-    --color-950: oklch(3.89% 0.0181 262.25);
+    --color-50: white;
+    --color-100: whitesmoke;
+    --color-200: gainsboro;
+    --color-300: lightgray;
+    --color-400: silver;
+    --color-500: darkgray;
+    --color-600: gray;
+    --color-700: slategray;
+    --color-800: dimgray;
+    --color-900: darkslategray;
+    --color-950: black;
 
-    /* Light theme */
+    /* Light mode */
     --color-page: var(--color-50);
     --color-surface-1: var(--color-100);
     --color-surface-2: var(--color-200);
@@ -28,35 +28,35 @@
     --color-content-stark: var(--color-900);
     --color-content-neutral: var(--color-600);
     --color-content-subtle: var(--color-500);
-    --color-field-surface: var(--color-300);
-    --color-field-surface-hover: var(--color-400);
+    --color-field-surface: color-mix(var(--color-content-stark) 10%, transparent);
+    --color-field-surface-hover: color-mix(var(--color-content-stark) 15%, transparent);
     --color-field-inverse: var(--color-content-stark);
     --color-popover-surface: var(--color-page);
-    --color-line: color-mix(in oklch, var(--color-content-stark) 11%, transparent);
-    --color-brand-surface: #f6c07b;
-    --color-brand-surface-hover: #f19b46;
-    --color-brand-inverse: #763518;
-    --color-brand-content: #de6618;
-    --color-accent-surface: #ffccd3;
-    --color-accent-surface-hover: #ffa1ad;
-    --color-accent-inverse: #a50036;
-    --color-accent-content: #ff637e;
-    --color-positive-surface: #16a34a;
-    --color-positive-surface-hover: #166534;
-    --color-positive-inverse: white;
-    --color-positive-content: var(--color-positive-surface);
-    --color-negative-surface: #ef4444;
-    --color-negative-surface-hover: #dc2626;
-    --color-negative-inverse: white;
-    --color-negative-content: var(--color-negative-surface);
+    --color-line: color-mix(var(--color-content-stark) 10%, transparent);
+    --color-brand-surface: goldenrod;
+    --color-brand-surface-hover: darkgoldenrod;
+    --color-brand-inverse: white;
+    --color-brand-content: goldenrod;
+    --color-accent-surface: var(--color-content-stark);
+    --color-accent-surface-hover: color-mix(var(--color-content-stark) 90%, var(--color-page));
+    --color-accent-inverse: var(--color-page);
+    --color-accent-content: var(--color-content-stark);
+    --color-positive-surface: palegreen;
+    --color-positive-surface-hover: lightgreen;
+    --color-positive-inverse: darkgreen;
+    --color-positive-content: limegreen;
+    --color-negative-surface: salmon;
+    --color-negative-surface-hover: lightcoral;
+    --color-negative-inverse: maroon;
+    --color-negative-content: crimson;
 
     /* Fonts */
-    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
     /* Sizes */
     --radius: 0.5rem;
     --spacing: 0.25rem;
-    --spacing-content-width: 68.75rem;
+    --spacing-content-width: 74rem;
     --spacing-field-padding: calc(var(--spacing) * 2.5);
     --spacing-field-height: calc(var(--spacing) * 9);
     --spacing-popover-offset: calc(var(--spacing) * 2);
@@ -75,7 +75,7 @@
     --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");
 }
 
-/* Dark theme overrides */
+/* Dark mode overrides */
 .dark {
     --color-page: var(--color-950);
     --color-surface-1: var(--color-900);
@@ -83,20 +83,25 @@
     --color-surface-3: var(--color-700);
     --color-field-surface: var(--color-700);
     --color-field-surface-hover: var(--color-600);
-    --color-popover-surface: var(--color-700);
+    --color-popover-surface: var(--color-900);
     --color-content-stark: var(--color-50);
     --color-content-neutral: var(--color-400);
     --color-content-subtle: var(--color-500);
-    --color-brand-content: #f6c07b;
-    --color-accent-content: #ffa1ad;
 
     /* Popover form elements */
     :where([popover]) {
-        --color-field-surface: color-mix(in oklch, var(--color-600) 60%, var(--color-700));
-        --color-field-surface-hover: color-mix(in oklch, var(--color-600) 80%, var(--color-700));
+        --color-field-surface: color-mix(var(--color-600) 60%, var(--color-700));
+        --color-field-surface-hover: color-mix(var(--color-600) 80%, var(--color-700))
     }
 }
 
+@font-face {
+    font-family: 'Inter';
+    src: url('/assets/fonts/Inter.woff2') format('woff2');
+    font-weight: 400 500 600 700;
+    font-display: swap
+}
+
 @layer base {
 
     /* Default font and colors */
@@ -110,12 +115,12 @@
 
     /* Text selection */
     ::selection {
-        background-color: color-mix(in oklch, var(--color-content-stark) 90%, transparent);
+        background-color: color-mix(currentColor 25%, transparent)
     }
 
     /* 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(in oklch, var(--color-content-stark) 35%, transparent);
+        box-shadow: 0 0 0 2px color-mix(var(--color-content-stark) 30%, transparent)
     }
 }

package/lib/manifest.toast.css

@@ -17,8 +17,8 @@
     :where(.toast) {
         display: flex;
         max-width: 90vw;
-        background-color: var(--color-popover-surface, oklch(100% 0 0));
-        border: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
+        background-color: var(--color-popover-surface, white);
+        border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
         border-radius: calc(var(--radius, 0.5rem) * 2);
         box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         overflow: hidden;
@@ -47,7 +47,7 @@
         /* Dismiss button */
         :where(.toast-dismiss-button) {
             position: relative;
-            border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, oklch(16.6% 0.026 267)) 20%, transparent);
+            border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, darkslategray) 20%, transparent);
             border-radius: 0;
 
             /* Icon */
@@ -58,7 +58,7 @@
                 left: 50%;
                 width: 50%;
                 height: 50%;
-                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
+                background-color: var(--color-field-inverse, darkslategray);
                 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-repeat: no-repeat;
                 mask-size: 100% 100%;
@@ -70,11 +70,11 @@
 
     /* Brand, accent, positive, negative utility class overrides (see Utilities) */
     :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
-        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
-        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+        color: var(--color-field-inverse, darkslategray);
+        background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
 
         :where(.toast-dismiss-button) {
-            border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 20%, transparent);
+            border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, darkslategray) 20%, transparent);
         }
     }
 

package/lib/manifest.tooltip.css

@@ -42,14 +42,14 @@
         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(100% 0 0));
-        background-color: var(--color-content-stark, oklch(16.6% 0.026 267));
+        color: var(--color-page, white);
+        background-color: var(--color-content-stark, darkslategray);
         border: 0 none;
         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, 1s)
+            transition-delay: var(--tooltip-hover-delay, .5s)
         }
 
         /* Leading icon */

package/lib/manifest.tooltips.js

@@ -306,6 +306,47 @@ function initializeTooltipPlugin() {
         if (t.classList && t.classList.contains('tooltip') && t.getAttribute('popover') === 'hint') return;
         hideAnySingleton();
     }, true);
+
+    // ---- Public programmatic-show API ----
+    //
+    // Flash a tooltip in response to an action (e.g. the code plugin's inline
+    // copy confirmation) without requiring the trigger to carry an x-tooltip
+    // directive. The trigger element acts as the anchor; the singleton is
+    // reused, so this respects chain mode / focus behaviour just like a
+    // hover-shown tooltip would. Auto-hides after `durationMs`.
+    //
+    // `positions` accepts the same vocabulary as the x-tooltip directive's
+    // modifiers — array of any subset of ['top','bottom','start','end',
+    // 'center','corner']. Joined with '-' to form the position class
+    // (e.g. ['top','end'] → '.top-end'), matching what `x-tooltip.top.end`
+    // would emit.
+    window.ManifestTooltips = window.ManifestTooltips || {};
+    window.ManifestTooltips.showTransient = function (triggerEl, contentHtml, durationMs, positions) {
+        if (!triggerEl) return;
+        const duration = typeof durationMs === 'number' ? durationMs : 1500;
+        const validPositions = ['top', 'bottom', 'start', 'end', 'center', 'corner'];
+        let resolvedPositions = [];
+        if (Array.isArray(positions)) {
+            resolvedPositions = positions.filter(p => validPositions.includes(p));
+        } else if (typeof positions === 'string' && positions) {
+            resolvedPositions = positions.split(/[.\-\s]+/).filter(p => validPositions.includes(p));
+        }
+        cancelPendingShow();
+        cancelPendingHide();
+        showSingletonFor(triggerEl, contentHtml || '', resolvedPositions);
+        clearTimeout(triggerEl._tooltipTransientTimer);
+        triggerEl._tooltipTransientTimer = setTimeout(() => {
+            triggerEl._tooltipTransientTimer = null;
+            const host = getTooltipHostForTrigger(triggerEl);
+            const s = _singletons.get(host);
+            if (s && s.activeTrigger === triggerEl && s.el.matches(':popover-open')) {
+                try { s.el.hidePopover(); } catch { /* popover already closed */ }
+                s.activeTrigger = null;
+                markTooltipHidden();
+                scheduleAnchorRestore(triggerEl);
+            }
+        }, duration);
+    };
 }
 
 // ---- Plugin init boilerplate ----

package/lib/manifest.typography.css

@@ -13,8 +13,9 @@
     .paragraph,
     .small,
     .caption,
-    .label {
-        color: var(--color-content-stark);
+    .label,
+    .link {
+        color: var(--color-content-stark, darkslategray);
 
         /* Support inline icons */
         &:where(:has([x-icon])) {
@@ -78,19 +79,18 @@
     .h5 {
         font-size: 1rem;
         line-height: 1rem;
-        color: var(--color-content-neutral, black);
+        color: var(--color-content-neutral, gray);
 
         & a:hover {
-            color: var(--color-content-stark, black)
+            color: var(--color-content-stark, darkslategray)
         }
     }
 
     :where(h6):not(.unstyle),
     .h6 {
-        font-family: var(--font-mono);
         font-size: 0.8125rem;
         line-height: 1.4;
-        color: var(--color-brand-content, black)
+        color: var(--color-brand-content, goldenrod)
     }
 
     /* Paragraphs */
@@ -100,11 +100,15 @@
     }
 
     /* Links */
-    :where(a:not([role=button]), button.link):not(.unstyle) {
+    :where(a:not([role=button]), .link):not(.unstyle) {
         text-align: unset;
         text-decoration: none;
         cursor: pointer;
-        transition: var(--transition, all .05s ease-in-out)
+        transition: var(--transition, all .05s ease-in-out);
+
+        &:hover {
+            color: var(--color-content-neutral, gray)
+        }
     }
 
     :where(abbr, address, blockquote, code, del, figcaption, h1, h2, h3, h4, h5, h6, ins, legend, p, small, cite, q, .h1, .h2, .h3, .h4, .h5, .h6, .paragraph, .small, .caption, .label):not(.unstyle)>a {
@@ -112,6 +116,35 @@
         text-underline-offset: 2px
     }
 
+    /* Asides */
+    :where(aside):not(.unstyle) {
+        padding: calc(var(--spacing, 0.25rem) * 4);
+        border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
+        border-radius: var(--radius, 0.5rem)
+    }
+
+    /* Badges */
+    :where(.badge) {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.25rem;
+        width: fit-content;
+        height: fit-content;
+        padding: 0.35ch 0.65ch;
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 1;
+        color: var(--color-field-inverse, darkslategray);
+        background-color: var(--color-surface-2, gainsboro);
+        border-radius: 100px;
+
+        /* Solo icons */
+        &:has(svg:only-child) {
+            padding: 0.35ch
+        }
+    }
+
     /* Blockquotes */
     :where(blockquote):not(.unstyle) {
         display: block;
@@ -119,8 +152,8 @@
         max-width: 100%;
         margin: calc(var(--spacing, 0.25rem) * 4) 0;
         padding: 0 calc(var(--spacing, 0.25rem) * 4);
-        color: var(--color-content-stark, black);
-        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, black) 25%, transparent);
+        color: var(--color-content-stark, darkslategray);
+        border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, darkslategray) 25%, transparent);
         border-inline-end: none;
 
         & * {
@@ -128,7 +161,7 @@
         }
     }
 
-    /* Inline code */
+    /* Code */
     :where(code):not(.unstyle) {
         display: inline-block;
         width: fit-content;
@@ -137,20 +170,24 @@
         font-size: 82.5%;
         line-height: 1.4;
         word-wrap: break-word;
-        color: var(--color-content-neutral, grey);
-        background-color: color-mix(in oklch, var(--color-content-neutral, grey) 10%, transparent);
-        border: 1px solid color-mix(in oklch, var(--color-content-subtle, silver) 10%, transparent);
-        border-radius: var(--radius, 0.5rem)
+        color: var(--color-content-neutral, gray);
+        background-color: color-mix(in oklch, var(--color-content-neutral, gray) 10%, transparent);
+        border: 1px solid color-mix(in oklch, var(--color-content-subtle, darkgray) 10%, transparent);
+        border-radius: var(--radius, 0.5rem);
+
+        &[role="button"] {
+            cursor: pointer
+        }
     }
 
     /* Captions */
     :where(figcaption):not(.unstyle),
     .caption {
         font-size: 0.8125rem;
-        color: var(--color-content-neutral, grey);
+        color: var(--color-content-neutral, gray);
 
         & a:hover {
-            color: var(--color-content-stark, black)
+            color: var(--color-content-stark, darkslategray)
         }
     }
 
@@ -163,10 +200,10 @@
     :where(small):not(.unstyle),
     .small {
         font-size: 0.875rem;
-        color: var(--color-content-neutral, grey);
+        color: var(--color-content-neutral, gray);
 
         & a:hover {
-            color: var(--color-content-stark, black)
+            color: var(--color-content-stark, darkslategray)
         }
     }
 
@@ -194,8 +231,8 @@
         font-weight: 600;
         line-height: 1;
         text-align: center;
-        color: var(--color-content-neutral, grey);
-        background-color: color-mix(in oklch, var(--color-content-neutral, grey) 10%, transparent);
+        color: var(--color-content-neutral, gray);
+        background-color: color-mix(in oklch, var(--color-content-neutral, gray) 10%, transparent);
         border-radius: calc(var(--radius, 0.5rem) / 1.5);
 
         &:not(:last-of-type) {
@@ -225,43 +262,21 @@
         white-space: normal
     }
 
-    /* Badges */
-    :where(mark):not(.unstyle),
-    .badge {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        gap: 0.25rem;
-        width: fit-content;
-        height: fit-content;
-        padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1.5);
-        font-weight: 500;
-        font-size: 0.75rem;
-        line-height: 1;
-        color: var(--color-field-inverse, black);
-        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
-        border-radius: 100px;
-
-        /* Solo icons */
-        &:has(svg:only-child) {
-            padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 1);
-        }
-    }
-
     /* Lists */
-    :where(ol):not(nav ol):not(menu ol):not(.unstyle) {
+    :where(ol):not(.unstyle) {
         list-style-type: decimal;
     }
 
-    :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
+    :where(ul):not(.unstyle) {
         list-style-type: disc;
     }
 
-    :where(ol):not(nav ol):not(menu ol):not(.unstyle),
-    :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
+    :where(ol):not(.unstyle),
+    :where(ul):not(.unstyle) {
+        padding-inline-start: 1.75ch;
 
-        &:not(:has(input[type=checkbox])) {
-            padding-inline-start: 1.75ch;
+        &:has(input[type=checkbox]) {
+            padding-inline-start: 0
         }
 
         /* Offset items so markers align inside the element frame  */
@@ -301,6 +316,18 @@
         }
     }
 
+    :where(nav, menu):not(.unstyle) ul,
+    :where(nav, menu):not(.unstyle) ol {
+        list-style: none;
+        padding: 0;
+
+        & li,
+        li:not(:last-of-type) {
+            margin: 0;
+            padding: 0
+        }
+    }
+
     /* RTL list overrides */
     [dir=rtl] :where(ol):not(nav ol):not(menu ol):not(.unstyle),
     [dir=rtl] :where(ul):not(nav ul):not(menu ul):not(.unstyle) {
@@ -330,6 +357,38 @@
         }
     }
 
+    /* Pre code blocks */
+    :where(pre):not(.unstyle) {
+        display: flex;
+        flex-flow: row wrap;
+        font-size: 0.8125rem;
+        line-height: 1.7;
+        background-color: var(--color-page, white);
+        border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
+        border-radius: var(--radius, 0.5rem);
+        overflow: hidden;
+        tab-size: 4;
+        white-space: pre;
+        white-space-collapse: preserve;
+        overflow-x: auto;
+
+        & code {
+            flex-grow: 1;
+            display: inline-block;
+            height: auto;
+            padding: calc(var(--spacing, 0.25rem) * 4);
+            font-size: inherit;
+            line-height: inherit;
+            background-color: transparent;
+            border: 0 none;
+            box-shadow: none
+        }
+
+        &:not(:has(code)) {
+            padding: calc(var(--spacing, 0.25rem) * 4)
+        }
+    }
+
     /* Spans */
     :where(span):not(.unstyle) {
         vertical-align: middle