@pathscale/ui 2.11.8 → 2.11.10

package/dist/components/button/Button.css

@@ -56,7 +56,16 @@
   .button:disabled,
   .button[aria-disabled="true"] {
     cursor: not-allowed;
-    opacity: 0.5;
+    background-color: color-mix(
+      in oklab,
+      var(--button-bg),
+      transparent 50%
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--button-border),
+      transparent 50%
+    );
   }
 
   .button:active,
@@ -128,7 +137,6 @@
   }
   .button--state-disabled {
     cursor: not-allowed;
-    opacity: 0.55;
   }
   .button--state-hidden {
     display: none;

package/dist/components/color-wheel/ColorWheel.generated.js

@@ -1,4 +1,4 @@
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorWheel.css";
 import { createMemo, omit } from "solid-js";
@@ -32,6 +32,9 @@ const __solidLayoutColorWheelLayout = (_stable, p)=>{
         },
         get children () {
             return createComponent(ColorWheelFlower, {
+                get id () {
+                    return memo(()=>!!p.id)() ? `${p.id}-flower` : void 0;
+                },
                 get ["class"] () {
                     return p.wheelClass;
                 },

package/dist/components/color-wheel/ComplexColorWheel.css

@@ -1,6 +1,6 @@
 .complex-color-wheel {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 1rem;
   padding: 0.875rem;
   /*

package/dist/components/color-wheel/ComplexColorWheel.generated.js

@@ -8,192 +8,199 @@ import card from "../card/index.js";
 import slider from "../slider/index.js";
 import { ColorWheelLayout } from "./ColorWheel.generated.js";
 import { complexColorWheel } from "./ComplexColorWheel.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<div><div><span></span><span></span></div><div>");
-const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card, mergeProps(()=>_stable.slot.root, {
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<div><div><span></span><span></span></div><div>");
+const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card, {
         get material () {
             return p.material ?? "glass";
         },
+        padding: "none",
         get children () {
-            return [
-                createComponent(ColorWheelLayout, {
-                    get value () {
-                        return p.value;
-                    },
-                    get onChange () {
-                        return p.onChange;
-                    },
-                    get mode () {
-                        return p.mode;
-                    },
-                    get palette () {
-                        return p.palette;
-                    },
-                    get isDisabled () {
-                        return p.isDisabled;
-                    },
-                    get ["class"] () {
-                        return p.class;
-                    },
-                    get wheelClass () {
-                        return p.wheelClass;
-                    },
-                    get ["aria-label"] () {
-                        return p["aria-label"];
-                    }
-                }),
-                (()=>{
-                    var _el$ = _tmpl$2(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling;
-                    spread(_el$, mergeProps(()=>_stable.slot.adjustments, {
-                        get ["class"] () {
-                            return twMerge(_stable.slot.adjustments.class, p.adjustmentsClass);
-                        }
-                    }), true);
-                    insert(_el$, createComponent(Show, {
-                        get when () {
-                            return p.action;
-                        },
-                        get children () {
-                            var _el$2 = _tmpl$();
-                            spread(_el$2, mergeProps(()=>_stable.slot.action), true);
-                            insert(_el$2, ()=>p.action);
-                            return _el$2;
-                        }
-                    }), _el$3);
-                    insert(_el$, createComponent(For, {
-                        get each () {
-                            return p.adjustments;
-                        },
-                        keyed: false,
-                        children: (adjustment)=>(()=>{
-                                var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling;
-                                spread(_el$5, mergeProps(()=>_stable.slot.axis, {
-                                    get ["data-axis"] () {
-                                        return adjustment().id;
-                                    }
-                                }), true);
-                                spread(_el$6, mergeProps(()=>_stable.slot.axisHeading), true);
-                                insert(_el$7, ()=>adjustment().label);
-                                insert(_el$8, ()=>adjustment().formatValue?.(adjustment().value) ?? adjustment().value);
-                                spread(_el$9, mergeProps(()=>_stable.slot.axisControl), true);
-                                insert(_el$9, createComponent(Show, {
-                                    get when () {
-                                        return memo(()=>!!adjustment().stops?.length)() ? adjustment().stops : void 0;
-                                    },
-                                    get fallback () {
-                                        return [
-                                            createComponent(Show, {
-                                                get when () {
-                                                    return adjustment().preview;
-                                                },
-                                                get children () {
-                                                    var _el$1 = _tmpl$3();
-                                                    spread(_el$1, mergeProps(()=>_stable.slot.preview, {
-                                                        "aria-hidden": "true",
-                                                        get style () {
-                                                            return {
-                                                                "background-color": adjustment().preview?.(adjustment().value, p.value)
-                                                            };
-                                                        }
-                                                    }), false);
-                                                    return _el$1;
+            var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.nextSibling;
+            spread(_el$, mergeProps(()=>_stable.slot.root), true);
+            insert(_el$, createComponent(ColorWheelLayout, {
+                get id () {
+                    return p.id;
+                },
+                get value () {
+                    return p.value;
+                },
+                get onChange () {
+                    return p.onChange;
+                },
+                get mode () {
+                    return p.mode;
+                },
+                get palette () {
+                    return p.palette;
+                },
+                get isDisabled () {
+                    return p.isDisabled;
+                },
+                get ["class"] () {
+                    return p.class;
+                },
+                get wheelClass () {
+                    return p.wheelClass;
+                },
+                get ["aria-label"] () {
+                    return p["aria-label"];
+                }
+            }), _el$2);
+            spread(_el$2, mergeProps(()=>_stable.slot.adjustments, {
+                get ["class"] () {
+                    return twMerge(_stable.slot.adjustments.class, p.adjustmentsClass);
+                }
+            }), true);
+            insert(_el$2, createComponent(Show, {
+                get when () {
+                    return p.action;
+                },
+                get children () {
+                    var _el$3 = _tmpl$();
+                    spread(_el$3, mergeProps(()=>_stable.slot.action), true);
+                    insert(_el$3, ()=>p.action);
+                    return _el$3;
+                }
+            }), _el$4);
+            insert(_el$2, createComponent(For, {
+                get each () {
+                    return p.adjustments;
+                },
+                keyed: false,
+                children: (adjustment)=>(()=>{
+                        var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$7.nextSibling;
+                        spread(_el$6, mergeProps(()=>_stable.slot.axis, {
+                            get ["data-axis"] () {
+                                return adjustment().id;
+                            }
+                        }), true);
+                        spread(_el$7, mergeProps(()=>_stable.slot.axisHeading), true);
+                        insert(_el$8, ()=>adjustment().label);
+                        insert(_el$9, ()=>adjustment().formatValue?.(adjustment().value) ?? adjustment().value);
+                        spread(_el$0, mergeProps(()=>_stable.slot.axisControl), true);
+                        insert(_el$0, createComponent(Show, {
+                            get when () {
+                                return memo(()=>!!adjustment().stops?.length)() ? adjustment().stops : void 0;
+                            },
+                            get fallback () {
+                                return [
+                                    createComponent(Show, {
+                                        get when () {
+                                            return adjustment().preview;
+                                        },
+                                        get children () {
+                                            var _el$10 = _tmpl$3();
+                                            spread(_el$10, mergeProps(()=>_stable.slot.preview, {
+                                                "aria-hidden": "true",
+                                                get style () {
+                                                    return {
+                                                        "background-color": adjustment().preview?.(adjustment().value, p.value)
+                                                    };
                                                 }
-                                            }),
-                                            createComponent(slider, {
-                                                get label () {
-                                                    return adjustment().label;
-                                                },
-                                                get value () {
-                                                    return adjustment().value;
-                                                },
-                                                get min () {
-                                                    return adjustment().min ?? 0;
+                                            }), false);
+                                            return _el$10;
+                                        }
+                                    }),
+                                    createComponent(slider, {
+                                        get id () {
+                                            return memo(()=>!!p.id)() ? `${p.id}-${adjustment().id}` : void 0;
+                                        },
+                                        get label () {
+                                            return adjustment().label;
+                                        },
+                                        get value () {
+                                            return adjustment().value;
+                                        },
+                                        get min () {
+                                            return adjustment().min ?? 0;
+                                        },
+                                        get max () {
+                                            return adjustment().max ?? 100;
+                                        },
+                                        get step () {
+                                            return adjustment().step;
+                                        },
+                                        get disabled () {
+                                            return p.isDisabled;
+                                        },
+                                        get onChange () {
+                                            return adjustment().onChange;
+                                        },
+                                        get onChangeEnd () {
+                                            return adjustment().onChangeEnd;
+                                        },
+                                        get formatValue () {
+                                            return adjustment().formatValue;
+                                        },
+                                        size: "sm"
+                                    })
+                                ];
+                            },
+                            children: (stops)=>(()=>{
+                                    var _el$11 = _tmpl$();
+                                    spread(_el$11, mergeProps(()=>_stable.slot.stops), true);
+                                    insert(_el$11, createComponent(For, {
+                                        get each () {
+                                            return stops();
+                                        },
+                                        children: (stop, stopIndex)=>createComponent(button_0, mergeProps(()=>_stable.slot.stop, {
+                                                get id () {
+                                                    return memo(()=>!!p.id)() ? `${p.id}-${adjustment().id}-${stopIndex()}` : void 0;
                                                 },
-                                                get max () {
-                                                    return adjustment().max ?? 100;
+                                                type: "button",
+                                                size: "sm",
+                                                variant: "ghost",
+                                                get ["aria-label"] () {
+                                                    return `${adjustment().label} ${adjustment().formatValue?.(stop) ?? stop}`;
                                                 },
-                                                get step () {
-                                                    return adjustment().step;
+                                                get ["aria-pressed"] () {
+                                                    return Math.abs(adjustment().value - stop) < 0.001 ? "true" : "false";
                                                 },
                                                 get disabled () {
                                                     return p.isDisabled;
                                                 },
-                                                get onChange () {
-                                                    return adjustment().onChange;
-                                                },
-                                                get onChangeEnd () {
-                                                    return adjustment().onChangeEnd;
-                                                },
-                                                get formatValue () {
-                                                    return adjustment().formatValue;
-                                                },
-                                                size: "sm"
-                                            })
-                                        ];
-                                    },
-                                    children: (stops)=>(()=>{
-                                            var _el$10 = _tmpl$();
-                                            spread(_el$10, mergeProps(()=>_stable.slot.stops), true);
-                                            insert(_el$10, createComponent(For, {
-                                                get each () {
-                                                    return stops();
-                                                },
-                                                children: (stop)=>createComponent(button_0, mergeProps(()=>_stable.slot.stop, {
-                                                        type: "button",
-                                                        size: "sm",
-                                                        variant: "ghost",
-                                                        get ["aria-label"] () {
-                                                            return `${adjustment().label} ${adjustment().formatValue?.(stop) ?? stop}`;
-                                                        },
-                                                        get ["aria-pressed"] () {
-                                                            return Math.abs(adjustment().value - stop) < 0.001 ? "true" : "false";
-                                                        },
-                                                        get disabled () {
-                                                            return p.isDisabled;
-                                                        },
-                                                        onClick: ()=>adjustment().onChange(stop),
-                                                        get children () {
-                                                            var _el$11 = _tmpl$3();
-                                                            spread(_el$11, mergeProps(()=>_stable.slot.stopPreview, {
-                                                                "aria-hidden": "true",
-                                                                get style () {
-                                                                    return {
-                                                                        "background-color": adjustment().preview?.(stop, p.value),
-                                                                        color: adjustment().ink?.(stop, p.value)
-                                                                    };
-                                                                }
-                                                            }), true);
-                                                            insert(_el$11, createComponent(Show, {
-                                                                get when () {
-                                                                    return adjustment().ink;
-                                                                },
-                                                                children: "A"
-                                                            }));
-                                                            return _el$11;
+                                                onClick: ()=>adjustment().onChange(stop),
+                                                get children () {
+                                                    var _el$12 = _tmpl$3();
+                                                    spread(_el$12, mergeProps(()=>_stable.slot.stopPreview, {
+                                                        "aria-hidden": "true",
+                                                        get style () {
+                                                            return {
+                                                                "background-color": adjustment().preview?.(stop, p.value),
+                                                                color: adjustment().ink?.(stop, p.value)
+                                                            };
                                                         }
-                                                    }))
-                                            }));
-                                            return _el$10;
-                                        })()
-                                }));
-                                insert(_el$5, createComponent(Show, {
-                                    get when () {
-                                        return adjustment().hint;
-                                    },
-                                    get children () {
-                                        var _el$0 = _tmpl$3();
-                                        spread(_el$0, mergeProps(()=>_stable.slot.hint), true);
-                                        insert(_el$0, ()=>adjustment().hint);
-                                        return _el$0;
-                                    }
-                                }), null);
-                                return _el$5;
-                            })()
-                    }), _el$4);
-                    return _el$;
-                })()
-            ];
+                                                    }), true);
+                                                    insert(_el$12, createComponent(Show, {
+                                                        get when () {
+                                                            return adjustment().ink;
+                                                        },
+                                                        children: "A"
+                                                    }));
+                                                    return _el$12;
+                                                }
+                                            }))
+                                    }));
+                                    return _el$11;
+                                })()
+                        }));
+                        insert(_el$6, createComponent(Show, {
+                            get when () {
+                                return adjustment().hint;
+                            },
+                            get children () {
+                                var _el$1 = _tmpl$3();
+                                spread(_el$1, mergeProps(()=>_stable.slot.hint), true);
+                                insert(_el$1, ()=>adjustment().hint);
+                                return _el$1;
+                            }
+                        }), null);
+                        return _el$6;
+                    })()
+            }), _el$5);
+            return _el$;
         }
-    }));
+    });
 const ComplexColorWheelLayout = defineComponent({
     recipe: complexColorWheel,
     layout: __solidLayoutComplexColorWheelLayout,

package/dist/components/color-wheel-flower/ColorWheelFlower.css

@@ -49,20 +49,55 @@
 
   .color-wheel-flower__dot {
     position: absolute;
-    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  .color-wheel-flower__dot--pulsing {
+    z-index: 20;
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within {
+    z-index: 30;
   }
 
   .color-wheel-flower__dot-frame {
     position: relative;
     width: 32px;
     height: 32px;
+    margin-top: -16px;
+    margin-left: -16px;
   }
 
   .color-wheel-flower__dot-motion {
     position: relative;
     width: 100%;
     height: 100%;
-    will-change: transform, opacity;
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+    transform-origin: center;
+    transition: transform 100ms ease-out;
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover
+    .color-wheel-flower__dot-motion,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within
+    .color-wheel-flower__dot-motion {
+    transform: translate(0, 0) scale(1.1);
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:active
+    .color-wheel-flower__dot-motion {
+    transform: translate(0, 0) scale(1.04);
+  }
+
+  .color-wheel-flower__dot--pulsing .color-wheel-flower__dot-motion {
+    animation: color-wheel-flower-pulse 220ms ease-out;
   }
 
   .color-wheel-flower__halo {
@@ -73,11 +108,26 @@
     bottom: -5px;
     border-radius: var(--radius-pill, 9999px);
     pointer-events: none;
+    opacity: 0;
     background: radial-gradient(
       circle,
       rgb(255 255 255 / 25%) 0%,
       rgb(255 255 255 / 0%) 70%
     );
+    transition: opacity 100ms ease-out;
+  }
+
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover
+    .color-wheel-flower__halo,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within
+    .color-wheel-flower__halo {
+    opacity: 0.6;
+  }
+
+  .color-wheel-flower__dot--pulsing .color-wheel-flower__halo {
+    opacity: 0.35;
   }
 
   .color-wheel-flower__swatch {
@@ -85,6 +135,8 @@
     z-index: 10;
     width: 100% !important;
     height: 100% !important;
+    border: 1px solid
+      color-mix(in srgb, var(--color-base-content) 72%, transparent) !important;
     border-radius: var(--radius-pill, 9999px) !important;
     background: var(--color-swatch-current) !important;
     transform: none !important;
@@ -120,10 +172,10 @@
 
   .color-wheel-flower__highlight {
     position: absolute;
+    z-index: 11;
     inset: 0;
     border-radius: var(--radius-pill, 9999px);
     border: 2px solid rgb(255 255 255 / 100%);
-    mix-blend-mode: overlay;
     pointer-events: none;
     opacity: 0;
     transition:
@@ -131,13 +183,41 @@
       box-shadow 300ms ease-out;
   }
 
-  .color-wheel-flower__highlight--hovered {
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:hover
+    .color-wheel-flower__highlight,
+  .color-wheel-flower:not(.color-wheel-flower--disabled)
+    .color-wheel-flower__dot:focus-within
+    .color-wheel-flower__highlight {
     opacity: 0.75;
     box-shadow: 0 0 6px rgb(255 255 255 / 45%);
+    transition: none;
   }
 
   .color-wheel-flower__highlight--pulsing {
     opacity: 0.45;
     box-shadow: 0 0 4px rgb(255 255 255 / 35%);
   }
+
+  @keyframes color-wheel-flower-pulse {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    55% {
+      transform: translate(0, 0) scale(1.12);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .color-wheel-flower__dot-motion,
+    .color-wheel-flower__halo,
+    .color-wheel-flower__highlight {
+      transition: none;
+    }
+
+    .color-wheel-flower__dot--pulsing .color-wheel-flower__dot-motion {
+      animation: none;
+    }
+  }
 }

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.d.ts

@@ -2,6 +2,8 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorWheelFlower.css";
 import { type ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
 export interface ColorWheelFlowerProps {
+    /** Stable base for the flower and each interactive petal. */
+    id?: string;
     class?: string;
     /** Explicit mode. Omit to follow the root `data-theme` attribute. */
     mode?: ColorWheelFlowerMode;