mnfst 0.5.192 → 0.5.194

package/lib/manifest.css

@@ -271,13 +271,7 @@
 
     :where(::placeholder) {
         opacity: 1;
-        color: #9ca3af
-    }
-
-    @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
-        :where(::placeholder) {
-            color: color-mix(in oklab, currentcolor 50%, transparent)
-        }
+        color: color-mix(in oklab, currentcolor 50%, transparent)
     }
 
     @keyframes mnfst-popover-in {
@@ -290,13 +284,9 @@
         }
     }
 
-    :where([popover]) {
-        display: none;
-
-        &:popover-open {
-            display: flex;
-            animation: mnfst-popover-in .15s ease-in both;
-        }
+    :where([popover]):not(.unstyle):popover-open {
+        display: flex;
+        animation: mnfst-popover-in .15s ease-in both;
     }
 
     :where(progress) {
@@ -375,6 +365,11 @@
     navigation: auto
 }
 
+/* Unlayered on purpose: a closed popover must beat layer-based layout classes. */
+[popover]:not(.unstyle):not(:popover-open) {
+    display: none;
+}
+
 /* Manifest Accordions */
 
 @layer base, components, utilities;
@@ -435,11 +430,8 @@
                 width: 1rem;
                 height: 1rem;
                 background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
-                -webkit-mask-image: var(--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"));
                 mask-image: var(--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"));
-                -webkit-mask-repeat: no-repeat;
                 mask-repeat: no-repeat;
-                -webkit-mask-size: 100% 100%;
                 mask-size: 100% 100%;
                 transform: rotate(0);
                 transition: 0.25s transform ease
@@ -666,11 +658,13 @@
         appearance: base-select;
 
         &::picker-icon {
-            content: "⌄";
-            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
-            transform: scaleY(0.7);
-            font-size: 20px;
-            line-height: 0.4
+            content: "";
+            width: 1rem;
+            height: 1rem;
+            background-color: currentColor;
+            mask-repeat: no-repeat;
+            mask-size: 100% 100%;
+            mask-image: var(--icon-chevron-down, 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='m6 9 6 6 6-6'/%3E%3C/svg%3E"))
         }
     }
 }
@@ -861,9 +855,9 @@
 
             /* On a filled segment (bar/slice center) — read against the fill */
             &.inverse {
-                fill: black;
+                fill: var(--color-content-stark, oklch(20.5% 0 0));
                 paint-order: stroke;
-                stroke: rgba(255, 255, 255, 0.75);
+                stroke: color-mix(in oklch, var(--color-page, oklch(98.5% 0 0)) 75%, transparent);
                 stroke-width: 1.5px
             }
         }
@@ -985,7 +979,6 @@
         flex-direction: column;
         width: 100%;
         height: 100%;
-        box-shadow: var(--shadow);
         overflow: hidden;
 
         /* Chat log scroll container */
@@ -1134,6 +1127,8 @@
 
 @layer components {
 
+    /* Deliberately unflattened: manifest.input.css supplies the field chrome via
+       a lower-specificity rule that sorts later, so this must outrank it. */
     input[type=checkbox]:not([role=switch], .unstyle) {
         position: relative;
         min-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
@@ -1167,11 +1162,8 @@
             width: 60%;
             height: 60%;
             background-color: var(--color-field-inverse, oklch(43.9% 0 0));
-            -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"));
             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"));
-            -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
-            -webkit-mask-size: 100% 100%;
             mask-size: 100% 100%;
             transform-origin: center;
             transition: var(--transition, all .05s ease-in-out);
@@ -1193,6 +1185,8 @@
 
 @layer base, components, utilities;
 
+
+
 :root {
     --color-picker-swatch: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
     --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
@@ -1875,7 +1869,7 @@
             height: 1em;
             margin-inline-start: auto;
             background-color: var(--color-content-subtle, oklch(55.6% 0 0));
-            mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
+            mask: var(--icon-chevron-down, 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='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat
         }
     }
 
@@ -1944,6 +1938,8 @@
 
 @layer base, components, utilities;
 
+
+
 @layer utilities {
 
     /* Picker container only (not trigger input/button) */
@@ -2297,11 +2293,13 @@
                     }
 
                     &::before {
-                        content: "⌄";
-                        height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
-                        transform: scaleY(0.7);
-                        font-size: 20px;
-                        line-height: 0.4
+                        content: "";
+                        width: 1rem;
+                        height: 1rem;
+                        background-color: currentColor;
+                        mask-repeat: no-repeat;
+                        mask-size: 100% 100%;
+                        mask-image: var(--icon-chevron-down, 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='m6 9 6 6 6-6'/%3E%3C/svg%3E"))
                     }
                 }
             }
@@ -2470,11 +2468,11 @@
 }
 
 /* Manifest Dialogs */
+
 @layer base, components, utilities;
 
-[popover]:not(.unstyle):not(:popover-open) {
-    display: none;
-}
+
+
 
 
 @layer components {
@@ -2493,7 +2491,7 @@
         background-color: var(--color-popover-surface, oklch(98.5% 0 0));
         border: 0 none;
         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);
+        box-shadow: var(--shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
 
         &::backdrop {
             background-color: rgba(0, 0, 0, 0.2);
@@ -2709,19 +2707,17 @@
     }
 
     /* Active item — a hook, not a look (bind :aria-current="$route === '/x' ? 'page' : null') */
-    [dock] > a[aria-current="page"],
-    [dock] > button[aria-current="page"],
-    [dock] > .selected {
+    :where([dock] > a[aria-current="page"], [dock] > button[aria-current="page"], [dock] > .selected) {
         color: var(--color-content-stark, oklch(14.5% 0 0))
     }
 }
 
 /* Manifest Dropdowns */
+
 @layer base, components, utilities;
 
-[popover]:not(.unstyle):not(:popover-open) {
-    display: none;
-}
+
+
 
 
 @layer components {
@@ -2864,109 +2860,17 @@
         margin: 0 var(--spacing-popover-offset, 0.5rem)
     }
 
-    /* Center alignment */
+    /* Center alignment (dropdown-only; tooltips have no .center) */
     :where(menu.center) {
         position-area: center
     }
+}
 
-    /* Top alignment */
-    :where(menu.top) {
-        position-area: top;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Bottom alignment */
-    :where(menu.bottom) {
-        position-area: bottom;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Start alignment */
-    :where(menu.start) {
-        position-area: center start;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* End alignment */
-    :where(menu.end) {
-        position-area: center end;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Top start alignment */
-    :where(menu.top-start) {
-        position-area: start span-end;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Top end alignment */
-    :where(menu.top-end) {
-        position-area: start span-start;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Bottom start alignment */
-    :where(menu.bottom-start) {
-        position-area: end span-end;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Bottom end alignment */
-    :where(menu.bottom-end) {
-        position-area: end span-start;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Start top alignment */
-    :where(menu.start-top) {
-        position-area: span-end start;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Start bottom alignment */
-    :where(menu.start-bottom) {
-        position-area: span-start start;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-
-    /* End top alignment */
-    :where(menu.end-top) {
-        position-area: span-end end;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* End bottom alignment */
-    :where(menu.end-bottom) {
-        position-area: span-start end;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Top start corner alignment */
-    :where(menu.top-start-corner, menu.start-top-corner) {
-        position-area: start start;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Top end corner alignment */
-    :where(menu.top-end-corner, menu.end-top-corner) {
-        position-area: start end;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
+/* Directional alignment lives in styles/snippets/manifest.alignment.css */
 
-    /* Bottom start corner alignment */
-    :where(menu.bottom-start-corner, menu.start-bottom-corner) {
-        position-area: end start;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Bottom end corner alignment */
-    :where(menu.bottom-end-corner, menu.end-bottom-corner) {
-        position-area: end end;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
+@layer utilities {
 
-    /* Touchscreen version */
+    /* Touchscreen version — outranks the shared alignment table on specificity */
     @media (pointer: coarse) {
         menu[popover]:not(.unstyle) {
             position: fixed;
@@ -3064,7 +2968,7 @@
     /* ---- Size (resize handles) — injected overlay children, fully stylable ---- */
     /* The element keeps its own markup untouched, so its native :hover/:focus still
        fire. Handles are separate elements with pointer-events; the body of the
-       element stays interactive. */
+       element stays interactive. Geometry: styles/snippets/manifest.handles.css. */
     :where([data-edit-sizable]) {
         position: relative;
 
@@ -3090,28 +2994,11 @@
             }
         }
 
-        .edit-handle-top, .edit-handle-bottom { left: 0; width: 100%; height: var(--h); cursor: ns-resize; &::before { width: 100%; } }
-        .edit-handle-left, .edit-handle-right, .edit-handle-start, .edit-handle-end { top: 0; height: 100%; width: var(--h); cursor: ew-resize; &::before { height: 100%; } }
-        .edit-handle-top { top: calc(var(--h) * -0.5); }
-        .edit-handle-bottom { bottom: calc(var(--h) * -0.5); }
-        .edit-handle-left { left: calc(var(--h) * -0.5); }
-        .edit-handle-right { right: calc(var(--h) * -0.5); }
-        /* Logical edges — inset-inline-* auto-flips for RTL */
-        .edit-handle-start { inset-inline-start: calc(var(--h) * -0.5); }
-        .edit-handle-end { inset-inline-end: calc(var(--h) * -0.5); }
-
-        .edit-handle-top-left, .edit-handle-top-right, .edit-handle-bottom-left, .edit-handle-bottom-right,
-        .edit-handle-top-start, .edit-handle-top-end, .edit-handle-bottom-start, .edit-handle-bottom-end {
-            width: var(--h); height: var(--h);
-        }
-        .edit-handle-top-left { top: calc(var(--h) * -0.5); left: calc(var(--h) * -0.5); cursor: nwse-resize; }
-        .edit-handle-top-right { top: calc(var(--h) * -0.5); right: calc(var(--h) * -0.5); cursor: nesw-resize; }
-        .edit-handle-bottom-left { bottom: calc(var(--h) * -0.5); left: calc(var(--h) * -0.5); cursor: nesw-resize; }
-        .edit-handle-bottom-right { bottom: calc(var(--h) * -0.5); right: calc(var(--h) * -0.5); cursor: nwse-resize; }
-        .edit-handle-top-start { top: calc(var(--h) * -0.5); inset-inline-start: calc(var(--h) * -0.5); cursor: nwse-resize; }
-        .edit-handle-top-end { top: calc(var(--h) * -0.5); inset-inline-end: calc(var(--h) * -0.5); cursor: nesw-resize; }
-        .edit-handle-bottom-start { bottom: calc(var(--h) * -0.5); inset-inline-start: calc(var(--h) * -0.5); cursor: nesw-resize; }
-        .edit-handle-bottom-end { bottom: calc(var(--h) * -0.5); inset-inline-end: calc(var(--h) * -0.5); cursor: nwse-resize; }
+        /* Corner cursors (geometry is shared; resize handles use nw/ne/sw/se) */
+        .edit-handle-top-left, .edit-handle-bottom-right,
+        .edit-handle-top-start, .edit-handle-bottom-end { cursor: nwse-resize; }
+        .edit-handle-top-right, .edit-handle-bottom-left,
+        .edit-handle-top-end, .edit-handle-bottom-start { cursor: nesw-resize; }
     }
 
     /* Collapsed state (size dropped below --edit-size-collapse-*) — authors restyle freely */
@@ -3157,7 +3044,7 @@
         box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
     }
     :where(.edit-classes)[hidden] { display: none; }
-    :where(.edit-classes) input { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; }
+    :where(.edit-classes) input { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; }
     :where(.edit-classes) .muted { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-content-subtle); }
 
     :where(.edit-toolbar) button[disabled] { opacity: 0.35; pointer-events: none; }
@@ -3251,7 +3138,7 @@
             &>:is(.selected, [aria-selected=true], [aria-current]) {
                 color: var(--color-field-inverse, oklch(20.5% 0 0));
                 background-color: var(--color-field-surface, oklch(87% 0 0));
-                box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
+                box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))
             }
 
             /* Background slider for selected tab) */
@@ -3276,7 +3163,7 @@
                     height: anchor-size(height);
                     background-color: var(--color-page, oklch(98.5% 0 0));
                     border-radius: max(calc(var(--radius, 0.5rem) - var(--spacing, 0.25rem) / 2), 0px);
-                    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+                    box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
                     transition: var(--tab-slide-transition, all 0.15s ease-in-out)
                 }
 
@@ -3431,7 +3318,7 @@
             height: calc(var(--spacing-field-height, 2.5rem) / 2);
             padding: 0;
             border-radius: var(--spacing-field-height, 2.5rem);
-            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
             opacity: 0;
             transition: var(--transition);
 
@@ -3703,9 +3590,7 @@
     /* Hide search input cancel button */
     :where(input[type=search]):not(.unstyle)::-webkit-search-cancel-button {
         appearance: none;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none
+        -webkit-appearance: none
     }
 
     /* Textarea-specific styles */
@@ -3722,6 +3607,8 @@
 
 @layer components {
 
+    /* Deliberately unflattened: manifest.input.css supplies the field chrome via
+       a lower-specificity rule that sorts later, so this must outrank it. */
     input[type=radio]:not(.unstyle) {
         position: relative;
         min-width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
@@ -3763,7 +3650,7 @@
 
 @layer components {
 
-    input[type=range]:not(.unstyle) {
+    :where(input[type=range]):not(.unstyle) {
         appearance: none;
         background-color: transparent;
         border-radius: var(--radius, 0.5rem);
@@ -3790,7 +3677,7 @@
             transform: translateY(-50%);
             background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
             border-radius: 200px;
-            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
             cursor: pointer;
             transition: var(--transition, all .05s ease-in-out)
         }
@@ -3815,7 +3702,7 @@
         }
     }
 
-    label:has(input[type=range]):not(.unstyle) {
+    :where(label:has(input[type=range])):not(.unstyle) {
         cursor: default;
     }
 }
@@ -3829,16 +3716,17 @@
     :where([x-resize]) {
         position: relative;
 
-        /* Resize handle area */
+        /* Resize handle area (geometry: styles/snippets/manifest.handles.css) */
         .resize-handle {
             position: absolute;
             display: block;
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
+            width: var(--h);
+            height: var(--h);
             z-index: 100;
             background: transparent;
             border: none;
             outline: none;
+            --h: var(--spacing-resize-handle, 1rem);
 
             /* Visible handle */
             &::before {
@@ -3860,113 +3748,24 @@
             }
         }
 
-        /* Edge handles */
-        .resize-handle-top,
-        .resize-handle-bottom {
-            width: 100%;
-            left: 0;
-            cursor: ns-resize;
-
-            &::before {
-                width: 100%;
-            }
-        }
-
-        .resize-handle-left,
-        .resize-handle-right,
-        .resize-handle-start,
-        .resize-handle-end {
-            height: 100%;
-            top: 0;
-            cursor: ew-resize;
-
-            &::before {
-                height: 100%;
-            }
-        }
-
-        .resize-handle-top {
-            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-        }
-
-        .resize-handle-bottom {
-            top: auto;
-            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-        }
-
-        .resize-handle-left,
-        .resize-handle-start {
-            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-        }
-
-        .resize-handle-right,
-        .resize-handle-end {
-            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-        }
-
-        /* Corner handles */
-        .resize-handle-top-left {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            cursor: nw-resize;
-        }
-
-        .resize-handle-top-right {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            cursor: ne-resize;
-        }
-
-        .resize-handle-bottom-left {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            cursor: sw-resize;
-        }
-
-        .resize-handle-bottom-right {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            cursor: se-resize;
-        }
-
-        /* Logical direction handles */
+        /* Corner cursors (geometry is shared; edit handles use nwse/nesw) */
+        .resize-handle-top-left,
         .resize-handle-top-start {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
             cursor: nw-resize;
         }
 
+        .resize-handle-top-right,
         .resize-handle-top-end {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            top: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
             cursor: ne-resize;
         }
 
+        .resize-handle-bottom-left,
         .resize-handle-bottom-start {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
             cursor: sw-resize;
         }
 
+        .resize-handle-bottom-right,
         .resize-handle-bottom-end {
-            width: var(--spacing-resize-handle, 1rem);
-            height: var(--spacing-resize-handle, 1rem);
-            bottom: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-            right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
             cursor: se-resize;
         }
 
@@ -3992,76 +3791,46 @@
             display: none !important
         }
 
-        /* Focus states for accessibility */
+        /* Focus states for accessibility — framework ring (manifest.theme.css) */
         .resize-handle:focus {
-            outline: 2px solid rgba(59, 130, 246, 0.5);
-            outline-offset: 2px
-        }
-
-        /* High contrast mode support */
-        @media (prefers-contrast: high) {
-            :where(.resize-handle:hover .resize-handle-inner) {
-                background: rgba(0, 0, 0, 0.3)
-            }
-
-            :where(.resize-handle:active .resize-handle-inner) {
-                background: rgba(0, 0, 0, 0.5)
-            }
+            outline: none;
+            box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark) 30%, transparent)
         }
 
         /* Reduced motion support */
         @media (prefers-reduced-motion: reduce) {
 
-            :where(.resize-handle-inner,
-                .resizable-closing,
+            :where(.resizable-closing,
                 .resize-handle) {
                 transition: none
             }
         }
     }
 
-    /* RTL overrides - more specific than :where([x-resize]) */
-    [dir=rtl] :where([x-resize]) .resize-handle-start {
-        left: auto;
-        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-    }
-
-    [dir=rtl] :where([x-resize]) .resize-handle-end {
-        right: auto;
-        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
-    }
-
+    /* RTL cursor flips — placement follows the logical insets in the shared geometry */
     [dir=rtl] :where([x-resize]) .resize-handle-top-start {
-        left: auto;
-        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
         cursor: ne-resize;
     }
 
     [dir=rtl] :where([x-resize]) .resize-handle-top-end {
-        right: auto;
-        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
         cursor: nw-resize;
     }
 
     [dir=rtl] :where([x-resize]) .resize-handle-bottom-start {
-        left: auto;
-        right: calc(var(--spacing-resize-handle, 1rem) * -0.5);
         cursor: se-resize;
     }
 
     [dir=rtl] :where([x-resize]) .resize-handle-bottom-end {
-        right: auto;
-        left: calc(var(--spacing-resize-handle, 1rem) * -0.5);
         cursor: sw-resize;
     }
 }
 
 /* Manifest Sidebars */
+
 @layer base, components, utilities;
 
-[popover]:not(.unstyle):not(:popover-open) {
-    display: none;
-}
+
+
 
 
 @layer components {
@@ -4143,7 +3912,7 @@
 
 @layer components {
 
-    [x-carousel] {
+    :where([x-carousel]) {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -4151,16 +3920,16 @@
         overflow: hidden;
 
         /* Slides container */
-        .carousel-slides {
+        :where(.carousel-slides) {
             display: flex;
             transition: transform 300ms ease-in-out;
             width: 100%;
             aspect-ratio: 16 / 9
         }
 
-        /* Previous & next buttons */
-        & button[\@click="prev()"],
-        & button[\@click="next()"] {
+        /* Previous & next buttons. Arrow markup is author-written; the
+           @click="prev()" selectors are deprecated aliases for the hooks. */
+        & :where([data-carousel-prev], [data-carousel-next], button[\@click="prev()"], button[\@click="next()"]) {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
@@ -4171,17 +3940,17 @@
             }
         }
 
-        & button[\@click="prev()"] {
+        & :where([data-carousel-prev], button[\@click="prev()"]) {
             left: calc(var(--spacing, 0.25rem) * 4)
         }
 
-        & button[\@click="next()"] {
+        & :where([data-carousel-next], button[\@click="next()"]) {
             left: auto;
             right: calc(var(--spacing, 0.25rem) * 4)
         }
 
-        /* Dots container */
-        .carousel-dots {
+        /* Dots container (author markup, driven by the plugin's `dots` getter) */
+        :where(.carousel-dots) {
             position: absolute;
             bottom: calc(var(--spacing, 0.25rem) * 4);
             left: 50%;
@@ -4191,7 +3960,6 @@
             max-width: 100%;
             padding: 0 calc(var(--spacing, 0.25rem) * 4);
             overflow-x: auto;
-            -webkit-overflow-scrolling: touch;
             scrollbar-width: none;
 
             &::-webkit-scrollbar {
@@ -4199,7 +3967,7 @@
             }
 
             /* Dot button */
-            & span {
+            & :where(span) {
                 flex-shrink: 0;
                 width: 0.625rem;
                 height: 0.625rem;
@@ -4246,7 +4014,7 @@
             height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
             border-radius: 50%;
             background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
-            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+            box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
             transition: var(--transition, all .05s ease-in-out)
         }
 
@@ -4381,7 +4149,7 @@
         background-color: var(--color-popover-surface, oklch(98.5% 0 0));
         border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 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);
+        box-shadow: var(--shadow-lg, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
         overflow: hidden;
         opacity: 0;
         transform: translateY(1rem);
@@ -4455,11 +4223,9 @@
 }
 
 /* Manifest Tooltips */
+
 @layer base, components, utilities;
 
-[popover]:not(.unstyle):not(:popover-open) {
-    display: none;
-}
 
 
 @layer utilities {
@@ -4474,7 +4240,7 @@
         background-color: var(--color-content-stark, oklch(43.9% 0 0));
         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);
+        box-shadow: var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
 
         /* Leading icon */
         & [x-icon]:first-child {
@@ -4520,103 +4286,10 @@
         }
     }
 
-    /* Top alignment */
-    :where(.tooltip.top) {
-        position-area: top;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Bottom alignment */
-    :where(.tooltip.bottom) {
-        position-area: bottom;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Start alignment */
-    :where(.tooltip.start) {
-        position-area: center start;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* End alignment */
-    :where(.tooltip.end) {
-        position-area: center end;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Top start alignment */
-    :where(.tooltip.top-start) {
-        position-area: start span-end;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Top end alignment */
-    :where(.tooltip.top-end) {
-        position-area: start span-start;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Bottom start alignment */
-    :where(.tooltip.bottom-start) {
-        position-area: end span-end;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Bottom end alignment */
-    :where(.tooltip.bottom-end) {
-        position-area: end span-start;
-        margin: var(--spacing-popover-offset, 0.5rem) 0
-    }
-
-    /* Start top alignment */
-    :where(.tooltip.start-top) {
-        position-area: span-end start;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Start bottom alignment */
-    :where(.tooltip.start-bottom) {
-        position-area: span-start start;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* End top alignment */
-    :where(.tooltip.end-top) {
-        position-area: span-end end;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* End bottom alignment */
-    :where(.tooltip.end-bottom) {
-        position-area: span-start end;
-        margin: 0 var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Top start corner alignment */
-    :where(.tooltip.top-start-corner, .tooltip.start-top-corner) {
-        position-area: start start;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Top end corner alignment */
-    :where(.tooltip.top-end-corner, .tooltip.end-top-corner) {
-        position-area: start end;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Bottom start corner alignment */
-    :where(.tooltip.bottom-start-corner, .tooltip.start-bottom-corner) {
-        position-area: end start;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
-
-    /* Bottom end corner alignment */
-    :where(.tooltip.bottom-end-corner, .tooltip.end-bottom-corner) {
-        position-area: end end;
-        margin: var(--spacing-popover-offset, 0.5rem)
-    }
 }
 
+/* Directional alignment lives in styles/snippets/manifest.alignment.css */
+
 /* Manifest Typography */
 
 @layer base, components, utilities;
@@ -4876,7 +4549,6 @@
     /* Labels */
     :where(label):not(.unstyle),
     .label {
-        width: -moz-fit-content;
         width: fit-content;
         user-select: none
     }
@@ -5004,7 +4676,6 @@
         tab-size: 4;
         white-space: pre;
         white-space-collapse: preserve;
-        overflow: hidden;
 
         &>code {
             flex-grow: 1;
@@ -5032,6 +4703,229 @@
     }
 }
 
+/* Anchored popover alignment — single source shared by dropdowns and tooltips.
+   The build appends this to standalone copies and adds it once to the bundle.
+   Zero specificity throughout, so the coarse-pointer sheet and author rules
+   still win. Dropdown-only variants (.center) stay in manifest.dropdown.css. */
+
+@layer base, components, utilities;
+
+@layer utilities {
+
+    /* Top alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).top) {
+        position-area: top;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Bottom alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).bottom) {
+        position-area: bottom;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Start alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).start) {
+        position-area: center start;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* End alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).end) {
+        position-area: center end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Top start alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).top-start) {
+        position-area: start span-end;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Top end alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).top-end) {
+        position-area: start span-start;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Bottom start alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).bottom-start) {
+        position-area: end span-end;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Bottom end alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).bottom-end) {
+        position-area: end span-start;
+        margin: var(--spacing-popover-offset, 0.5rem) 0
+    }
+
+    /* Start top alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).start-top) {
+        position-area: span-end start;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Start bottom alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).start-bottom) {
+        position-area: span-start start;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* End top alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).end-top) {
+        position-area: span-end end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* End bottom alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip).end-bottom) {
+        position-area: span-start end;
+        margin: 0 var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Top start corner alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip):is(.top-start-corner, .start-top-corner)) {
+        position-area: start start;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Top end corner alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip):is(.top-end-corner, .end-top-corner)) {
+        position-area: start end;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Bottom start corner alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip):is(.bottom-start-corner, .start-bottom-corner)) {
+        position-area: end start;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+
+    /* Bottom end corner alignment */
+    :where(:is(menu[popover], .dropdown-menu, .tooltip):is(.bottom-end-corner, .end-bottom-corner)) {
+        position-area: end end;
+        margin: var(--spacing-popover-offset, 0.5rem)
+    }
+}
+
+/* Drag-handle geometry — single source for x-resize and x-edit handles.
+   The build appends this to standalone copies and adds it once to the bundle.
+   Hosts set --h (handle thickness) and keep their own chrome: hairline colour,
+   transition, and corner cursors (resize uses nw/ne/sw/se, edit nwse/nesw). */
+
+@layer base, components, utilities;
+
+@layer utilities {
+
+    /* Horizontal edges */
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .resize-handle-bottom, .edit-handle-top, .edit-handle-bottom) {
+        left: 0;
+        width: 100%;
+        height: var(--h);
+        cursor: ns-resize;
+
+        &::before {
+            width: 100%
+        }
+    }
+
+    /* Vertical edges */
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .resize-handle-right, .resize-handle-start, .resize-handle-end, .edit-handle-left, .edit-handle-right, .edit-handle-start, .edit-handle-end) {
+        top: 0;
+        width: var(--h);
+        height: 100%;
+        cursor: ew-resize;
+
+        &::before {
+            height: 100%
+        }
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top, .edit-handle-top) {
+        top: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom, .edit-handle-bottom) {
+        bottom: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-left, .edit-handle-left) {
+        left: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-right, .edit-handle-right) {
+        right: calc(var(--h) * -0.5)
+    }
+
+    /* Logical edges — inset-inline-* auto-flips for RTL */
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-start, .edit-handle-start) {
+        inset-inline-start: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-end, .edit-handle-end) {
+        inset-inline-end: calc(var(--h) * -0.5)
+    }
+
+    /* Corners — square and inset; cursors stay with each host */
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-left, .edit-handle-top-left) {
+        width: var(--h);
+        height: var(--h);
+        top: calc(var(--h) * -0.5);
+        left: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-right, .edit-handle-top-right) {
+        width: var(--h);
+        height: var(--h);
+        top: calc(var(--h) * -0.5);
+        right: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-left, .edit-handle-bottom-left) {
+        width: var(--h);
+        height: var(--h);
+        bottom: calc(var(--h) * -0.5);
+        left: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-right, .edit-handle-bottom-right) {
+        width: var(--h);
+        height: var(--h);
+        bottom: calc(var(--h) * -0.5);
+        right: calc(var(--h) * -0.5)
+    }
+
+    /* Logical corners — inset-inline-* auto-flips for RTL */
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-start, .edit-handle-top-start) {
+        width: var(--h);
+        height: var(--h);
+        top: calc(var(--h) * -0.5);
+        inset-inline-start: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-top-end, .edit-handle-top-end) {
+        width: var(--h);
+        height: var(--h);
+        top: calc(var(--h) * -0.5);
+        inset-inline-end: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-start, .edit-handle-bottom-start) {
+        width: var(--h);
+        height: var(--h);
+        bottom: calc(var(--h) * -0.5);
+        inset-inline-start: calc(var(--h) * -0.5)
+    }
+
+    :where([x-resize], [data-edit-sizable]) :is(.resize-handle-bottom-end, .edit-handle-bottom-end) {
+        width: var(--h);
+        height: var(--h);
+        bottom: calc(var(--h) * -0.5);
+        inset-inline-end: calc(var(--h) * -0.5)
+    }
+}
+
 :root,
 ::selection {
 
@@ -5495,7 +5389,6 @@
 
     /* No spinners */
     .no-spinner {
-        -moz-appearance: textfield !important;
         appearance: textfield !important;
 
         &::-webkit-inner-spin-button,