mnfst 0.5.57 → 0.5.59

package/lib/manifest.css

@@ -693,23 +693,48 @@
 /* Manifest Color Picker */
 
 :root {
+    --color-picker-swatch: var(--color-line);
+    --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");
+    --icon-color-grab: 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-pipette-icon lucide-pipette'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z'/%3E%3Cpath d='m2 22 .414-.414'/%3E%3C/svg%3E");
     --icon-alpha-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23808080' opacity='0.15'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23808080' opacity='0.15'/%3E%3C/svg%3E");
 }
 
+@layer components {
+
+    :where(input[type="color"]) {
+        appearance: none;
+        -webkit-appearance: none;
+
+        &::-webkit-color-swatch-wrapper {
+            padding: 0;
+        }
+
+        &::-webkit-color-swatch {
+            border: 0 none
+        }
+
+        &::-moz-color-swatch {
+            border: 0 none
+        }
+    }
+}
+
 @layer utilities {
 
     /* Swatch trigger button */
-    :where(.colorpicker-swatch):not(.unstyle) {
+    :where([x-colorpicker\.swatch], input[type="color"]):not(.unstyle) {
         position: relative;
         width: var(--spacing-field-height, 2.25rem);
-        height: var(--spacing-field-height, 2.25rem);
         min-width: var(--spacing-field-height, 2.25rem);
         max-width: var(--spacing-field-height, 2.25rem);
+        height: var(--spacing-field-height, 2.25rem);
         padding: 0;
-        background: var(--swatch-color, #000000);
+        background: var(--color-picker-swatch, #000000);
         border-width: 1px;
         border-style: solid;
-        border-color: oklch(from var(--swatch-color, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
+        border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0));
         border-radius: var(--radius, 0.5rem);
         cursor: pointer;
         overflow: hidden;
@@ -719,7 +744,7 @@
         &:active,
         &:focus,
         &:focus-visible {
-            border-color: oklch(from var(--swatch-color, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
+            border-color: oklch(from var(--color-picker-swatch, #000000) calc(l + (0.5 - l) * 0.35) c calc(h + 0) / 0.5)
         }
 
         /* Alpha pattern background */
@@ -737,354 +762,435 @@
         }
     }
 
-    /* Dropdown menu — unwrapped from :where() to beat base menu[popover] specificity */
-    [x-colorpicker]:not(.unstyle) {
-
-        /* Resetting dropdown styles */
-        & :where(hr) {
-            margin-top: 2px;
-            margin-bottom: 2px
-        }
-
-        /* & :where(li, a, button, label) {
-            width: fit-content;
-            min-width: var(--spacing-field-height, 2.25rem)
-        } */
+    /* Color picker menu interface */
+    :where([x-colorpicker]):not(.unstyle) {
+        min-width: 18rem;
+        max-width: 18rem;
+        max-height: 30rem;
+        height: fit-content;
+        overflow: hidden;
 
-        /* Canvas wrapper */
-        & .canvas-wrapper {
-            position: relative;
+        /* Tabs wrapper */
+        & :where(.tabs-wrapper) {
+            display: flex;
             width: 100%;
-            aspect-ratio: 1;
-            overflow: hidden;
-            cursor: crosshair;
-            touch-action: none
-        }
+            padding: 2px;
+            border-bottom: 1px solid var(--color-line, oklch(80% 0.0029 264.26));
 
-        /* Canvas (SV plane) */
-        & canvas {
-            display: block;
-            width: 100%;
-            height: 100%
+            /* Distribute button widths equally */
+            & button {
+                flex: 1;
+                justify-content: center
+            }
         }
 
-        /* Reticle indicator */
-        & .color-reticle {
-            position: absolute;
-            width: 0.75rem;
-            height: 0.75rem;
-            z-index: 1;
-            border: 2px solid #ffffff;
-            border-radius: 50%;
-            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-            transform: translate(-50%, -50%);
-            pointer-events: none;
-        }
+        /* Solid options */
+        & [x-colorpicker\.solid] {
 
-        /* Optional color controls container */
-        & .color-controls {
-            display: flex;
-            flex-direction: column;
-            gap: 0.75rem;
-            padding: 0.75rem
-        }
+            /* Canvas wrapper */
+            & :where(.canvas-wrapper) {
+                position: relative;
+                width: 100%;
+                padding: 2px;
+                aspect-ratio: 1;
+                overflow: hidden;
+                cursor: crosshair;
+                touch-action: none
+            }
 
-        /* Shared slider styles */
-        & input[type=range].hue,
-        & input[type=range].alpha {
-            width: 100%;
-            height: 0.75rem;
-            padding: 0;
-            border-radius: 1rem;
-            appearance: none;
-            -webkit-appearance: none;
-            cursor: pointer;
-            outline: none;
-            border: none;
-            background: transparent;
+            /* Canvas (SV plane) */
+            & canvas {
+                display: block;
+                width: 100%;
+                height: 100%
+            }
 
-            /* Webkit thumb */
-            &::-webkit-slider-thumb {
-                -webkit-appearance: none;
-                width: 1rem;
-                height: 1rem;
-                border-radius: 50%;
-                background: #ffffff;
+            /* Canvas reticle indicator */
+            & :where(.color-reticle) {
+                position: absolute;
+                width: 0.75rem;
+                height: 0.75rem;
+                z-index: 1;
                 border: 2px solid #ffffff;
-                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
-                cursor: grab;
-
-                &:active {
-                    cursor: grabbing;
-                }
+                border-radius: 50%;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+                transform: translate(-50%, -50%);
+                pointer-events: none
             }
 
-            /* Firefox thumb */
-            &::-moz-range-thumb {
-                width: 1rem;
-                height: 1rem;
-                border-radius: 50%;
-                background: #ffffff;
-                border: 2px solid #ffffff;
-                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
-                cursor: grab;
+            & :where(.solid-options-inputs) {
+                display: flex;
+                flex-direction: column;
+                gap: 0.75rem;
+                padding: 0.75rem;
 
-                &:active {
-                    cursor: grabbing;
+                & div:has(button[x-colorpicker\.set-color-space], input[x-colorpicker\.set-color-value], input[x-colorpicker\.set-alpha-value]) {
+                    display: flex;
+                    width: 100%
                 }
             }
 
-            /* Webkit track */
-            &::-webkit-slider-runnable-track {
-                height: 0.75rem;
-                border-radius: 1rem
-            }
-
-            /* Firefox track */
-            &::-moz-range-track {
+            /* Shared range styles */
+            & input[x-colorpicker\.set-hue],
+            & input[x-colorpicker\.set-alpha] {
+                width: 100%;
                 height: 0.75rem;
-                border-radius: 1rem
-            }
-        }
-
-        /* Hue slider - static rainbow gradient */
-        & input[type=range].hue {
-            &::-webkit-slider-runnable-track {
-                background: linear-gradient(to right,
-                        hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
-                        hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
-                        hsl(360 100% 50%))
-            }
+                padding: 0;
+                border-radius: 1rem;
+                appearance: none;
+                -webkit-appearance: none;
+                cursor: pointer;
+                outline: none;
+                border: none;
+                background: transparent;
 
-            &::-moz-range-track {
-                background: linear-gradient(to right,
-                        hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
-                        hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
-                        hsl(360 100% 50%))
-            }
-        }
+                /* Webkit thumb */
+                &::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    width: 1rem;
+                    height: 1rem;
+                    border-radius: 50%;
+                    background: #ffffff;
+                    border: 2px solid #ffffff;
+                    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
+                    cursor: grab;
+
+                    &:active {
+                        cursor: grabbing
+                    }
+                }
 
-        /* Alpha slider - checkerboard + color gradient (set via JS --cp-color) */
-        & input[type=range].alpha {
-            --cp-color: rgb(0, 0, 0);
-            position: relative;
+                /* Firefox thumb */
+                &::-moz-range-thumb {
+                    width: 1rem;
+                    height: 1rem;
+                    border-radius: 50%;
+                    background: #ffffff;
+                    border: 2px solid #ffffff;
+                    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
+                    cursor: grab;
+
+                    &:active {
+                        cursor: grabbing
+                    }
+                }
 
-            &::-webkit-slider-runnable-track {
-                background:
-                    linear-gradient(to right, transparent, var(--cp-color)),
-                    repeating-conic-gradient(#e0e0e0 0% 25%, #ffffff 0% 50%) 0 0 / 0.5rem 0.5rem
-            }
+                /* Webkit track */
+                &::-webkit-slider-runnable-track {
+                    height: 0.75rem;
+                    border-radius: 1rem
+                }
 
-            &::-moz-range-track {
-                background:
-                    linear-gradient(to right, transparent, var(--cp-color)),
-                    repeating-conic-gradient(#e0e0e0 0% 25%, #ffffff 0% 50%) 0 0 / 0.5rem 0.5rem
+                /* Firefox track */
+                &::-moz-range-track {
+                    height: 0.75rem;
+                    border-radius: 1rem
+                }
             }
-        }
 
-        /* Color space selector */
-        & select.color-format {
-            width: 8ch;
-            padding-inline-start: 0;
-            padding-inline-end: 0;
-            font-size: 0.6875rem;
+            /* Hue range */
+            & input[x-colorpicker\.set-hue] {
+                &::-webkit-slider-runnable-track {
+                    background: linear-gradient(to right,
+                            hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
+                            hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
+                            hsl(360 100% 50%))
+                }
 
-            &::picker-icon {
-                display: none
+                &::-moz-range-track {
+                    background: linear-gradient(to right,
+                            hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
+                            hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%),
+                            hsl(360 100% 50%))
+                }
             }
-        }
 
-        /* Color value input */
-        & input.color-value {
-            flex: 1;
-            padding-inline-end: 0;
-            font-size: 50%
-        }
+            /* Alpha range */
+            & input[x-colorpicker\.set-alpha] {
+                --color-picker-alpha: rgb(0, 0, 0);
+                position: relative;
 
-        /* Alpha value input — hide spin buttons */
-        & input.alpha-value {
-            width: 6ch;
-            padding-inline-end: 0;
-            font-size: 50%;
-            -moz-appearance: textfield;
+                &::-webkit-slider-runnable-track {
+                    background:
+                        linear-gradient(to right, transparent, var(--color-picker-alpha)),
+                        var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
+                }
 
-            &::-webkit-inner-spin-button,
-            &::-webkit-outer-spin-button {
-                -webkit-appearance: none;
-                margin: 0
+                &::-moz-range-track {
+                    background:
+                        linear-gradient(to right, transparent, var(--color-picker-alpha)),
+                        var(--icon-alpha-pattern) 0 0 / 0.5rem 0.5rem
+                }
             }
-        }
 
-        /* Gradient layers container */
-        & .gradient-layers {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
-        /* Floating menus (non-popover, manually positioned) */
-        & .layer-angle-menu,
-        & .stop-floating-menu {
-            display: none;
-            flex-direction: column;
-            min-width: 140px;
-            margin: 0;
-            padding: 0.25rem;
-            list-style: none;
-            background: var(--color-popover-surface, oklch(100% 0 0));
-            border-radius: var(--radius, 0.5rem);
-            box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
-            z-index: 100;
+            /* Color space button */
+            & button[x-colorpicker\.set-color-space] {
+                justify-content: center;
+                width: 7ch;
+                padding-inline-start: 0;
+                padding-inline-end: 0
+            }
+
+            /* Color value input */
+            & input[x-colorpicker\.set-color-value] {
+                flex: 1;
+                padding-inline-end: 0
+            }
+
+            /* Alpha value input */
+            & input[x-colorpicker\.set-alpha-value] {
+                width: fit-content;
+                padding-inline-start: 0;
+                text-align: end
+            }
+        }
+
+        /* Gradients */
+        & [x-colorpicker\.gradient] {
+
+            /* Gradient layers */
+            & :where(.layer-options-wrapper) {
+                border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
+
+                /* Layer options inputs */
+                & :where(.layer-options-inputs) {
+                    display: flex;
+                    flex-flow: row nowrap;
+                    align-items: center;
+                    padding: 0.5rem;
+
+                    /* Gradient options drodown button */
+                    & button {
+                        width: auto;
+                        justify-content: center
+                    }
+
+                    /* Gradient angle input wrapper */
+                    & :where(.layer-angle-wrapper) {
+                        position: relative;
+
+                        /* Gradient angle input */
+                        & input[x-colorpicker\.set-angle] {
+                            width: 5.5ch;
+                            cursor: ew-resize;
+                            padding-inline-start: 0;
+                            padding-inline-end: 0.75rem;
+                            text-align: end;
+
+                            &:focus {
+                                cursor: text
+                            }
+                        }
+
+                        /* Degree symbol */
+                        & span {
+                            position: absolute;
+                            top: 0;
+                            right: 0.25rem;
+                            color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09))
+                        }
+                    }
+
+                    /* Gradient stop bar */
+                    & [x-colorpicker\.layer-stops-bar] {
+                        position: relative;
+                        width: 100%;
+                        height: 0.75rem;
+                        margin-inline-start: 1rem;
+                        margin-inline-end: 0.5rem;
+                        border-radius: 1rem;
+                        cursor: pointer;
+                        background: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+
+                        /* Stop handle */
+                        & :where(.stop-handle) {
+                            position: absolute;
+                            top: 50%;
+                            width: 1rem;
+                            height: 1rem;
+                            border-radius: 50%;
+                            border: 2px solid #ffffff;
+                            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
+                            transform: translate(-50%, -50%);
+                            cursor: grab;
+                            z-index: 1;
+                            touch-action: none;
+
+                            &:hover {
+                                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 5px rgba(0, 0, 0, 0.25)
+                            }
+
+                            &:active {
+                                cursor: grabbing
+                            }
+
+                            &.active {
+                                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 5px rgba(0, 0, 0, 1)
+                            }
+
+                        }
+                    }
+                }
 
-            & :where(li) {
-                display: flex;
-                align-items: center;
-                padding: 0.25rem 0.5rem;
-                font-size: 0.8125rem;
-                color: var(--color-content-stark, oklch(16.6% 0.026 267));
-                border-radius: 6px;
-                cursor: pointer;
-                user-select: none;
+                /* Solid options */
+                & [x-colorpicker\.solid] {
+                    padding: 0;
 
-                &:hover {
-                    background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
-                }
+                    & :where(.canvas-wrapper) {
+                        width: calc(100% - 2rem);
+                        margin: auto;
+                        padding: 0 0 2px 0
+                    }
 
-                &.negative:hover {
-                    color: var(--color-negative-content, #ef4444);
+                    & :where(.solid-options-inputs) {
+                        padding-left: 1rem;
+                        padding-right: 1rem
+                    }
                 }
             }
 
-            & :where(hr) {
-                margin: 0.25rem 0;
-                border: none;
-                border-top: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
-            }
+            /* Gradient value wrapper */
+            & :where(.gradient-value-wrapper) {
+                padding: 0.5rem;
 
-            & :where(small) {
-                display: block;
-                padding: 0.25rem 0.5rem 0.125rem;
-                font-size: 0.6875rem;
-                color: var(--color-content-subtle, oklch(52.38% 0.017 264.26));
+                /* Gradient value input */
+                & [x-colorpicker\.set-gradient-value] {
+                    resize: none;
+                    field-sizing: content
+                }
             }
         }
 
-        & .layer-angle-menu.show,
-        & .stop-floating-menu {
-            display: flex;
-        }
-
-        /* Stop-floating-menu always shows when present (added to DOM) */
-        & .stop-floating-menu {
-            display: flex;
+        /* Hide gradient angle input when the gradient type doesn't use it (holds space via visibility) */
+        & [data-gradient-type="radial"] .layer-angle-wrapper {
+            visibility: hidden
         }
 
-        /* Angle input label */
-        & .layer-angle {
-            display: inline-flex;
-            align-items: center;
-            cursor: ew-resize;
+        /* Library */
+        & [x-colorpicker\.library] {
+            max-height: 30rem;
+            overflow-y: auto;
 
-            & input[type=number] {
-                width: 4ch;
-                padding: 0 0.125rem;
-                font-size: 0.625rem;
-                font-family: ui-monospace, monospace;
-                text-align: right;
-                background: transparent;
-                border: none;
-                color: var(--color-content-stark, oklch(16.6% 0.026 267));
-                outline: none;
-                cursor: ew-resize;
-                -moz-appearance: textfield !important;
-                appearance: textfield !important;
-
-                &:focus {
-                    cursor: text;
-                    background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
-                    border-radius: 0.125rem;
+            /* Library wrapper */
+            & :where(.library-wrapper) {
+                display: flex;
+                flex-flow: column;
+                gap: 1rem;
+                width: 100%;
+                padding: 1rem 1rem 4rem 1rem;
+
+                /* Group wrapper */
+                & :where(.library-group) {
+                    display: flex;
+                    flex-direction: column;
+                    width: 100%;
+                    padding-bottom: 1rem;
+                    gap: 0.5rem;
+
+                    /* Only apply border to all except last library-group */
+                    &:not(:last-child) {
+                        border-bottom: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
+                    }
+
+                    /* Palette wrapper */
+                    & :where(.library-palette) {
+                        display: grid;
+                        grid-template-columns: repeat(11, 1fr);
+                        gap: 1px;
+
+                        /* Swatch buttons */
+                        & button[x-colorpicker\.apply-color] {
+                            min-width: 0;
+                            width: 100%;
+                            max-width: 1.375rem;
+                            min-height: 0;
+                            height: auto;
+                            max-height: 1.375rem;
+                            aspect-ratio: 1/1;
+                            border-radius: calc(var(--radius, 0.5rem) / 2);
+                            border: 1px solid rgba(255, 255, 255, 0.15);
+
+                            &:hover {
+                                border: 1px solid rgba(255, 255, 255, 0.35)
+                            }
+
+                            &.active {
+                                border: 1px solid rgba(255, 255, 255, 1);
+                                box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 1px rgba(0, 0, 0, 1), inset 0 0 0 4px rgba(0, 0, 0, 0.25)
+                            }
+                        }
+                    }
                 }
             }
-
-            & span {
-                font-size: 0.625rem;
-                color: var(--color-content-subtle, oklch(52.38% 0.017 264.26));
-                pointer-events: none;
-                user-select: none;
-            }
         }
+    }
 
-        /* Gradient stop bar */
-        & .gradient-layer {
-            position: relative;
-            width: 100%;
-            height: 0.75rem;
-            border-radius: 1rem;
-            cursor: pointer;
-            background: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+    /* Colorpicker inside dropdown menu */
+    :where(menu[popover][x-colorpicker]:not(.unstyle)) {
+        padding: 0;
+
+        & .tabs-wrapper button {
+            border: 1px solid var(--color-popover-surface, oklch(100% 0 0))
         }
+    }
 
-        & .stop-handle {
-            position: absolute;
-            top: 50%;
-            width: 1rem;
-            height: 1rem;
-            border-radius: 50%;
-            border: 2px solid #ffffff;
-            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.25);
-            transform: translate(-50%, -50%);
-            cursor: grab;
-            z-index: 1;
-            touch-action: none;
+    /* Library wrapper inside dropdown menu */
+    :where(menu[popover]:not(.unstyle) [x-colorpicker\.library], .dropdown-menu:not(.unstyle) [x-colorpicker\.library]) {
+        /* max-height: initial !important;
+        overflow: visible !important; */
 
-            &.active {
-                box-shadow: 0 0 0 2px var(--color-brand-content, #de6618), 0 1px 3px rgba(0, 0, 0, 0.25);
-            }
+        & :where(.library-wrapper) {
+            padding: 0.5rem 0.5rem 4rem 0.5rem !important;
 
-            &:active {
-                cursor: grabbing;
-            }
         }
 
-        /* Stop context menu */
-        & .stop-context-menu {
-            min-width: 140px;
+        & :where(small) {
+            padding-inline-start: 0
         }
+    }
 
-        /* Eyedropper button */
-        & .eyedropper {}
+    /* Colorpicker button icons */
+    :where(.color-icon-solid, .color-icon-gradient, .color-icon-library, .color-icon-grab, .gradient-layer-icon-linear, .gradient-layer-icon-radial, .gradient-layer-icon-conic) {
+        height: calc(var(--spacing-field-height, 2.25rem) / 2);
+        max-height: 1rem;
+        aspect-ratio: 1/1;
+        background-color: currentColor
+    }
 
-        /* Swatches grid */
-        & .swatches {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.25rem;
-
-            & [data-color] {
-                width: 1.25rem;
-                height: 1.25rem;
-                border-radius: calc(var(--radius, 0.5rem) - 0.125rem);
-                border: 1px solid var(--color-line, color-mix(in oklch, oklch(16.6% 0.026 267) 11%, transparent));
-                cursor: pointer;
-                transition: var(--transition, all .05s ease-in-out);
+    /* Colorpicker dialog */
+    :where(dialog[x-colorpicker]) {
+        border-radius: calc(var(--radius, 0.5rem))
+    }
 
-                &:hover {
-                    scale: 1.15;
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
-                }
-            }
-        }
+    :where(.color-icon-solid) {
+        mask-image: var(--icon-color-solid)
+    }
+
+    :where(.color-icon-gradient) {
+        mask-image: var(--icon-color-gradient)
+    }
+
+    :where(.color-icon-library) {
+        mask-image: var(--icon-color-library)
+    }
+
+    :where(.color-icon-grab) {
+        mask-image: var(--icon-color-grab)
+    }
+
+    .gradient-layer-icon-linear {
+        background: linear-gradient(to right, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)), color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 0%, transparent 100%));
+        border-radius: 50%
+    }
+
+    .gradient-layer-icon-radial {
+        background: radial-gradient(var(--color-content-neutral, oklch(48.26% 0.0365 255.09)), color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 0%, transparent 100%));
+        border-radius: 50%
     }
 
-    /* Hide number input spin buttons inside colorpicker (high specificity, flat selectors) */
-    menu[popover].colorpicker .layer-angle input[type=number]::-webkit-inner-spin-button,
-    menu[popover].colorpicker .layer-angle input[type=number]::-webkit-outer-spin-button {
-        -webkit-appearance: none !important;
-        appearance: none !important;
-        margin: 0 !important;
-        display: none !important;
-        width: 0 !important;
-        height: 0 !important;
+    .gradient-layer-icon-conic {
+        background: conic-gradient(var(--color-content-neutral, oklch(48.26% 0.0365 255.09)), color-mix(in oklch, var(--color-content-neutral, oklch(48.26% 0.0365 255.09)) 0%, transparent 100%));
+        border-radius: 50%
     }
 }
 
@@ -1272,7 +1378,7 @@
 
 @layer components {
 
-    :where(menu[popover]):not(.unstyle) {
+    :where(menu[popover], .dropdown-menu):not(.unstyle) {
         position-try-fallbacks: flip-inline, flip-block, flip-start;
         position-area: end span-end;
         inset: auto;
@@ -1300,7 +1406,7 @@
             align-items: center;
             width: 100%;
             max-width: 100%;
-            min-height: 2rem;
+            min-height: var(--spacing-field-height, 2.25rem);
             padding-inline-start: 0.5rem;
             padding-inline-end: 0.5rem;
             font-weight: normal;
@@ -3208,7 +3314,7 @@
 
     /* Selected */
     :where(.selected) {
-        background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 25%, transparent);
+        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
     }
 
     /* Transparent */
@@ -3296,6 +3402,20 @@
         }
     }
 
+    /* No spinners */
+    .no-spinner {
+        -moz-appearance: textfield !important;
+        appearance: textfield !important;
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            appearance: none;
+            display: none;
+            margin: 0;
+        }
+    }
+
     /* Banner overlays */
     :where(.overlay-dark, .overlay-light) {
         position: relative;