mnfst 0.5.188 → 0.5.190

package/lib/manifest.css

@@ -6,6 +6,8 @@
 
 /* Manifest Reset - browser style normalizer */
 
+@layer base, components, utilities;
+
 @layer base {
 
     *,
@@ -180,7 +182,7 @@
     :where(hr) {
         height: 1px;
         color: inherit;
-        background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 12%, transparent));
+        background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 12%, transparent));
         border: 0 none
     }
 
@@ -375,6 +377,8 @@
 
 /* Manifest Accordions */
 
+@layer base, components, utilities;
+
 @layer components {
 
 
@@ -430,7 +434,7 @@
                 order: 1;
                 width: 1rem;
                 height: 1rem;
-                background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
+                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;
@@ -458,6 +462,8 @@
 
 /* Manifest Avatars */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     :where(.avatar) {
@@ -473,7 +479,7 @@
         text-align: center;
         text-transform: uppercase;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
-        background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         background-clip: content-box;
         background-size: cover;
         background-position: center;
@@ -505,7 +511,7 @@
             width: 9px;
             height: 9px;
             z-index: 1;
-            background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
             border: 1px solid var(--color-page, oklch(98.5% 0 0));
             border-radius: 50%
         }
@@ -517,7 +523,7 @@
         background-blend-mode: normal;
 
         &:hover {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
             background-blend-mode: multiply;
 
             & img {
@@ -569,7 +575,7 @@
         padding-inline-end: 1.5ch;
 
         &:hover .avatar {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
             transition: var(--transition, all .05s ease-in-out)
         }
     }
@@ -589,6 +595,8 @@
 
 /* Manifest Buttons */
 
+@layer base, components, utilities;
+
 @layer components {
 
     :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select):not(code, .unstyle) {
@@ -607,12 +615,12 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
-        background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-width: 0;
         border-style: solid;
         border-color: transparent;
         border-radius: var(--radius, 0.5rem);
-        outline-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        outline-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         cursor: pointer;
         transition: var(--transition, all .05s ease-in-out);
         appearance: button;
@@ -641,15 +649,15 @@
         }
 
         &:hover {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
         }
 
         &:active {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
         }
 
         &:focus-visible {
-            background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
     }
 
@@ -669,6 +677,8 @@
 
 /* Manifest Charts */
 
+@layer base, components, utilities;
+
 :root {
     /* Chart guidance */
     --color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
@@ -966,6 +976,8 @@
 
 /* Manifest Chat */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     :where(.chat-wrapper) {
@@ -1019,7 +1031,7 @@
 
             /* Own messages */
             :where(.own) {
-                width: fit-content;
+                width: 95%;
                 max-width: calc(var(--spacing-content-width, 74rem) - 10rem);
                 margin-inline-start: auto;
                 padding-block: 0.5rem;
@@ -1118,6 +1130,8 @@
 
 /* Manifest Checkboxes */
 
+@layer base, components, utilities;
+
 @layer components {
 
     input[type=checkbox]:not([role=switch], .unstyle) {
@@ -1134,13 +1148,13 @@
         &:checked {
 
             &:hover {
-                background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
-                border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
+                border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
             }
 
             &:active {
-                background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
-                border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
+                border-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
             }
         }
 
@@ -1177,8 +1191,10 @@
 
 /* Manifest Color Picker */
 
+@layer base, components, utilities;
+
 :root {
-    --color-picker-swatch: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+    --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");
     --icon-color-gradient: 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-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
     --icon-color-library: 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-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
@@ -1260,7 +1276,7 @@
             display: flex;
             width: 100%;
             padding: 2px;
-            border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
             /* Distribute button widths equally */
             & button {
@@ -1435,7 +1451,7 @@
 
             /* Gradient layers */
             & :where(.layer-options-wrapper) {
-                border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
                 /* Layer options inputs */
                 & :where(.layer-options-inputs) {
@@ -1485,7 +1501,7 @@
                         margin-inline-end: 0.5rem;
                         border-radius: 1rem;
                         cursor: pointer;
-                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
                         /* Stop handle */
                         & :where(.stop-handle) {
@@ -1574,7 +1590,7 @@
 
                     /* Only apply border to all except last library-group */
                     &:not(:last-child) {
-                        border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                        border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                     }
 
                     /* Palette wrapper */
@@ -1681,6 +1697,8 @@
 
 /* Manifest Combobox */
 
+@layer base, components, utilities;
+
 @layer components {
 
     /* Wrapper */
@@ -1716,9 +1734,19 @@
             padding-inline: calc(var(--spacing, 0.25rem) * 1.25)
         }
 
-        &:has(> :where(input, textarea):disabled) {
+        /* Plugin-set from render(), so it tracks any editor type — including a
+           <button> editor, which the old :has(> input:disabled) rule missed. */
+        &[data-disabled] {
             opacity: .5;
-            pointer-events: none
+            pointer-events: none;
+            cursor: default;
+
+            /* The × stays (layout), inert — the field is already dimmed as a whole,
+               so don't let the global :disabled dimming stack on top of it. */
+            .combobox-chip>button:disabled {
+                opacity: 1;
+                cursor: default
+            }
         }
 
         /* Inner typing surface */
@@ -1914,6 +1942,8 @@
 
 /* Manifest Date Picker */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     /* Picker container only (not trigger input/button) */
@@ -1922,7 +1952,7 @@
         min-width: 17rem;
         background: var(--color-popover-surface, oklch(98.5% 0 0));
         color: var(--color-content-stark, oklch(20.5% 0 0));
-        border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-radius: var(--radius, 0.5rem);
 
         /* Shell */
@@ -1957,7 +1987,7 @@
                 transition: var(--transition, all .05s ease-in-out);
 
                 &:hover {
-                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                     color: var(--color-content-stark, oklch(20.5% 0 0))
                 }
             }
@@ -2049,7 +2079,7 @@
                 transition: var(--transition, all .05s ease-in-out);
 
                 &:hover:not(:disabled):not([aria-selected=true]) {
-                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                 }
 
                 &:focus-visible {
@@ -2065,7 +2095,7 @@
 
                 /* Today marker */
                 &[aria-current=date]:not([aria-selected=true]) {
-                    border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
+                    border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 18%, transparent));
                     font-weight: 600
                 }
 
@@ -2126,11 +2156,11 @@
                 transition: var(--transition, all .05s ease-in-out);
 
                 &:hover:not(:disabled) {
-                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                 }
 
                 &[aria-current=true] {
-                    border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 18%, transparent));
+                    border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 18%, transparent));
                     font-weight: 600
                 }
 
@@ -2165,7 +2195,7 @@
             padding-bottom: 0.5rem;
             padding-inline-start: 0.5rem;
             border: none;
-            border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
             /* "Time" label */
             &>label {
@@ -2221,7 +2251,7 @@
 
                     &:hover,
                     &:focus {
-                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                     }
                 }
 
@@ -2248,7 +2278,7 @@
                     transition: var(--transition, all .05s ease-in-out);
 
                     &:hover {
-                        background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                        background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                     }
                 }
 
@@ -2294,7 +2324,7 @@
             width: 100%;
             contain: inline-size;
             padding: 0.5rem 0;
-            border-top: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
             /* Today | Clear buttons */
             &>button {
@@ -2331,7 +2361,7 @@
                     padding: 0.25rem 0.625rem;
                     font-size: 0.75rem;
                     white-space: nowrap;
-                    background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                    background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
                     color: var(--color-content-stark, oklch(20.5% 0 0));
                     border: none;
                     border-radius: calc(var(--radius, 0.5rem) * 2);
@@ -2339,7 +2369,7 @@
                     transition: var(--transition, all .05s ease-in-out);
 
                     &:hover {
-                        background: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 16%, transparent))
+                        background: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 16%, transparent))
                     }
                 }
             }
@@ -2394,7 +2424,7 @@
             transition: var(--transition, all .05s ease-in-out);
 
             &:hover {
-                background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                background: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
             }
 
             &[aria-selected=true] {
@@ -2440,6 +2470,8 @@
 }
 
 /* Manifest Dialogs */
+@layer base, components, utilities;
+
 [popover]:not(.unstyle):not(:popover-open) {
     display: none;
 }
@@ -2547,6 +2579,8 @@
 
 /* Manifest Dividers */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     :where(.divider) {
@@ -2569,7 +2603,7 @@
             flex: 1;
             width: auto;
             height: 1px;
-            background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         /* Space between lines and content */
@@ -2625,6 +2659,8 @@
 
 /* Manifest Dock */
 
+@layer base, components, utilities;
+
 @layer components {
 
     /* Fixed bottom navigation bar. Best practice: <nav dock aria-label="Primary">.
@@ -2681,6 +2717,8 @@
 }
 
 /* Manifest Dropdowns */
+@layer base, components, utilities;
+
 [popover]:not(.unstyle):not(:popover-open) {
     display: none;
 }
@@ -2735,12 +2773,12 @@
             &:hover {
                 color: var(--color-field-inverse, oklch(43.9% 0 0));
                 text-decoration: inherit;
-                background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
             }
 
             &:active {
                 color: var(--color-field-inverse, oklch(43.9% 0 0));
-                background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+                background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
             }
 
             & span,
@@ -2767,7 +2805,7 @@
             margin-inline-start: calc(0.25rem * -1);
             margin-top: 0.25rem;
             margin-bottom: 0.25rem;
-            background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         /* Labels (not inner field-surface wrappers) */
@@ -2817,7 +2855,7 @@
 
     /* Dark theme */
     :where(.dark menu[popover]) :where(li, a, button, label:not(:has(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea, .combobox, .label, label))):hover {
-        background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+        background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
     }
 
     /* Nested menu alignment (not combobox listboxes, which anchor to their field) */
@@ -2949,6 +2987,8 @@
 
 /* Manifest Edit */
 
+@layer base, components, utilities;
+
 /* Authors override any of this without specificity battles: every rule is wrapped
    in :where(), state lives on data-attributes, and injected affordances use plain
    semantic class names (.edit-handle, .edit-frame) — no framework-prefixed litter. */
@@ -3125,6 +3165,8 @@
 
 /* Manifest Forms */
 
+@layer base, components, utilities;
+
 @layer components {
 
     /* Group & tab bar wrappers */
@@ -3273,7 +3315,7 @@
     :where(fieldset:has(legend)):not(.unstyle) {
         padding: 1ch 1.5ch 1.5ch 1.5ch;
         border-radius: var(--radius, 0.5rem);
-        border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        border-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-style: solid;
         border-width: 1px;
 
@@ -3445,6 +3487,8 @@
 
 /* Manifest Inputs */
 
+@layer base, components, utilities;
+
 :root {
 
     /* Copy button icons */
@@ -3458,7 +3502,7 @@
         width: 100%;
         max-width: 100%;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
-        background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-width: 0;
         border-style: solid;
         border-color: transparent;
@@ -3468,15 +3512,15 @@
         appearance: none;
 
         &:hover {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
         }
 
         &:active {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
         }
 
         &:focus-visible {
-            background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         &::placeholder {
@@ -3484,7 +3528,7 @@
         }
 
         &::selection {
-            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
+            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
         }
 
         &[type=file] {
@@ -3674,6 +3718,8 @@
 
 /* Manifest Radios */
 
+@layer base, components, utilities;
+
 @layer components {
 
     input[type=radio]:not(.unstyle) {
@@ -3713,6 +3759,8 @@
 
 /* Manifest Range */
 
+@layer base, components, utilities;
+
 @layer components {
 
     input[type=range]:not(.unstyle) {
@@ -3723,14 +3771,14 @@
 
         &::-webkit-slider-runnable-track {
             height: calc(var(--spacing, 0.25rem) * 2);
-            background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
             border-radius: var(--radius, 0.5rem);
             cursor: pointer;
             transition: var(--transition, all .05s ease-in-out)
         }
 
         &:hover::-webkit-slider-runnable-track {
-            background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
+            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
         }
 
         &::-webkit-slider-thumb {
@@ -3740,7 +3788,7 @@
             width: calc(var(--spacing-field-height, 2.25rem) * 0.5);
             height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
             transform: translateY(-50%);
-            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
+            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);
             cursor: pointer;
@@ -3748,7 +3796,7 @@
         }
 
         &::-webkit-slider-thumb:hover {
-            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 30%, var(--color-field-inverse, oklch(43.9% 0 0)));
+            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 30%, var(--color-field-inverse, oklch(43.9% 0 0)));
         }
     }
 
@@ -3774,6 +3822,8 @@
 
 /* Manifest Resize Handles */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     :where([x-resize]) {
@@ -3806,7 +3856,7 @@
 
             &:hover::before,
             &:active::before {
-                background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+                background-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
             }
         }
 
@@ -4007,6 +4057,8 @@
 }
 
 /* Manifest Sidebars */
+@layer base, components, utilities;
+
 [popover]:not(.unstyle):not(:popover-open) {
     display: none;
 }
@@ -4087,6 +4139,8 @@
 
 /* Manifest Slides */
 
+@layer base, components, utilities;
+
 @layer components {
 
     [x-carousel] {
@@ -4168,6 +4222,8 @@
 
 /* Manifest Switches */
 
+@layer base, components, utilities;
+
 @layer components {
 
     :where(input[role=switch]):not(.unstyle) {
@@ -4189,14 +4245,14 @@
             width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
             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(oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
+            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);
             transition: var(--transition, all .05s ease-in-out)
         }
 
         /* Checked */
         &:checked {
-            background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
             /* Marker */
             &::before {
@@ -4205,7 +4261,7 @@
             }
 
             &:hover {
-                background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
+                background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
             }
         }
     }
@@ -4213,6 +4269,8 @@
 
 /* Manifest Tables */
 
+@layer base, components, utilities;
+
 @layer components {
 
     :where(.grid-table):not(.unstyle) {
@@ -4236,7 +4294,7 @@
         /* Header row */
         :where(thead, .grid-header > *) {
             background-color: var(--color-surface-1, oklch(97% 0 0));
-            border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         /* Header cell */
@@ -4246,7 +4304,7 @@
 
         /* Row */
         :where(tr, .grid-row > *) {
-            border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
+            border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
         }
 
         /* Cell */
@@ -4297,6 +4355,8 @@
 
 /* ManifestToasts */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     :where(.toast-container) {
@@ -4319,7 +4379,7 @@
         pointer-events: auto;
         max-width: 90vw;
         background-color: var(--color-popover-surface, oklch(98.5% 0 0));
-        border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        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);
         overflow: hidden;
@@ -4372,7 +4432,7 @@
     /* Brand, accent, positive, negative utility class overrides (see Utilities) */
     :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
         color: var(--color-field-inverse, oklch(43.9% 0 0));
-        background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
 
         :where(.toast-dismiss-button) {
             border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, oklch(43.9% 0 0)) 20%, transparent);
@@ -4395,6 +4455,8 @@
 }
 
 /* Manifest Tooltips */
+@layer base, components, utilities;
+
 [popover]:not(.unstyle):not(:popover-open) {
     display: none;
 }
@@ -4557,6 +4619,8 @@
 
 /* Manifest Typography */
 
+@layer base, components, utilities;
+
 @layer base {
 
     /* All text elements */
@@ -4674,7 +4738,7 @@
     /* Asides */
     :where(aside):not(.unstyle) {
         padding: calc(var(--spacing, 0.25rem) * 4);
-        border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-radius: var(--radius, 0.5rem)
     }
 
@@ -4691,7 +4755,7 @@
         font-size: 0.75rem;
         line-height: 1;
         color: var(--color-field-inverse, oklch(43.9% 0 0));
-        background-color: var(--color-field-surface, color-mix(oklch(97% 0 0) 10%, transparent));
+        background-color: var(--color-field-surface, color-mix(in oklch, oklch(97% 0 0) 10%, transparent));
         border-radius: 100px;
 
         /* Solo icons */
@@ -4934,7 +4998,7 @@
         font-size: 0.8125rem;
         line-height: 1.7;
         background-color: var(--color-page, oklch(98.5% 0 0));
-        border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
+        border: 1px solid var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
         border-radius: var(--radius, 0.5rem);
         overflow: hidden;
         tab-size: 4;
@@ -5264,6 +5328,8 @@
 
 /* Manifest Utilities */
 
+@layer base, components, utilities;
+
 @layer utilities {
 
     /* Center in flex parent */
@@ -5327,12 +5393,12 @@
     :where(.outlined) {
         border-width: 1px;
         border-style: solid;
-        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 90%, var(--color-field-inverse, oklch(43.9% 0 0)))
+        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 90%, var(--color-field-inverse, oklch(43.9% 0 0)))
     }
 
     /* Dark theme override */
     .dark :where(.outlined) {
-        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
+        border-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
     }
 
     /* Transparent */
@@ -5490,8 +5556,8 @@
             padding: calc(var(--spacing, 0.25rem) * 4);
             border-radius: calc(var(--radius, 0.5rem) * 2);
             color: var(--color-content-stark, oklch(43.9% 0 0));
-            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 20%, transparent);
-            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 15%, transparent);
+            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 20%, transparent);
+            border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 15%, transparent);
 
             /* Auto format asides with icons */
             &:has([x-icon]):not([x-code-group] aside, aside.frame) {
@@ -5662,7 +5728,7 @@
     /* Accent colors */
     :where(.accent) {
         --color-field-surface: var(--color-accent-surface, oklch(43.9% 0 0));
-        --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(oklch(20.5% 0 0) 90%, oklch(98.5% 0 0)));
+        --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 90%, oklch(98.5% 0 0)));
         --color-field-inverse: var(--color-accent-inverse, oklch(98.5% 0 0));
         --color-content-stark: var(--color-accent-content, oklch(43.9% 0 0));
         --color-content-neutral: color-mix(in oklch, var(--color-accent-content, oklch(43.9% 0 0)) 85%, transparent);