@pathscale/ui 2.10.0 → 2.11.0

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

@@ -3,6 +3,12 @@
   align-items: flex-start;
   gap: 1rem;
   padding: 0.875rem;
+  /*
+   * Named, so the `auto` rules below measure this component rather than the
+   * window. The wheel usually sits in a side panel, and a panel narrow enough
+   * to need stacking is common on a wide screen.
+   */
+  container: complex-color-wheel / inline-size;
 }
 
 .complex-color-wheel__adjustments {
@@ -13,6 +19,49 @@
   gap: 0.875rem;
 }
 
+/* Stacked: the wheel above, every axis in one column under it. */
+.complex-color-wheel--layout-stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/*
+ * Beside: the rows sit next to the wheel and pack two to a line. `auto-fit`
+ * rather than a fixed two, so the last row spans the full width instead of
+ * leaving a hole, and a container too narrow for two columns gets one.
+ */
+.complex-color-wheel--layout-beside .complex-color-wheel__adjustments {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+  gap: 0.875rem 1.25rem;
+  align-content: start;
+}
+
+/* The action sits alone on its own line above the axes it resets. */
+.complex-color-wheel--layout-beside .complex-color-wheel__action {
+  grid-column: 1 / -1;
+}
+
+@container complex-color-wheel (min-width: 30rem) {
+  .complex-color-wheel--layout-auto .complex-color-wheel__adjustments {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+    gap: 0.875rem 1.25rem;
+    align-content: start;
+  }
+
+  .complex-color-wheel--layout-auto .complex-color-wheel__action {
+    grid-column: 1 / -1;
+  }
+}
+
+@container complex-color-wheel (max-width: 30rem) {
+  .complex-color-wheel--layout-auto {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
 .complex-color-wheel__action {
   display: flex;
   justify-content: flex-end;

package/dist/components/color-wheel/ComplexColorWheel.generated.d.ts

@@ -27,5 +27,14 @@ export interface ComplexColorWheelProps extends ColorWheelProps {
     material?: CardMaterial;
     action?: JSX.Element;
     adjustmentsClass?: string;
+    /**
+     * Where the axes sit: `beside` the wheel and two to a line, `stacked` in one
+     * column under it, or `auto` to choose by the width this component is given.
+     *
+     * `auto` measures the component rather than the viewport, because the wheel
+     * is usually in a side panel and a narrow panel on a wide screen still wants
+     * the stacked reading.
+     */
+    layout?: "auto" | "beside" | "stacked";
 }
 export declare const ComplexColorWheelLayout: __LayoutComponent<ComplexColorWheelProps>;

package/dist/components/color-wheel/ComplexColorWheel.recipe.d.ts

@@ -35,4 +35,24 @@ export declare const complexColorWheel: import("solid-layouts/solid-2").Recipe<{
             readonly base: "complex-color-wheel__hint";
         };
     };
+    readonly props: {
+        /**
+         * Where the adjustment rows sit relative to the wheel, and to each other.
+         *
+         * `beside` is the wide reading: the rows sit to the right of the wheel and
+         * pack two to a line once there is room for them. `stacked` is the narrow
+         * one, everything in a single column. `auto` picks by the width the
+         * component is actually given rather than by the viewport, so a wheel in a
+         * narrow panel stacks on a wide screen, which is the case that matters:
+         * this lives in a side panel more often than on a page.
+         */
+        readonly layout: {
+            readonly auto: "complex-color-wheel--layout-auto";
+            readonly beside: "complex-color-wheel--layout-beside";
+            readonly stacked: "complex-color-wheel--layout-stacked";
+        };
+    };
+    readonly defaults: {
+        readonly layout: "auto";
+    };
 }>;

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

@@ -36,11 +36,27 @@ const complexColorWheel = recipe({
             base: "complex-color-wheel__hint"
         }
     },
+    props: {
+        layout: {
+            auto: "complex-color-wheel--layout-auto",
+            beside: "complex-color-wheel--layout-beside",
+            stacked: "complex-color-wheel--layout-stacked"
+        }
+    },
+    defaults: {
+        layout: "auto"
+    },
     _layouts: {
         slots: {
             root: {
                 base: "complex-color-wheel",
-                axes: {}
+                axes: {
+                    layout: {
+                        auto: "complex-color-wheel--layout-auto",
+                        beside: "complex-color-wheel--layout-beside",
+                        stacked: "complex-color-wheel--layout-stacked"
+                    }
+                }
             },
             adjustments: {
                 base: "complex-color-wheel__adjustments",

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

@@ -24,10 +24,6 @@
     inset: 0;
   }
 
-  .color-wheel-flower__ring-shell--outer {
-    transform: scale(1.1);
-  }
-
   .color-wheel-flower__ring-shell--inner {
     transform: scale(0.9);
   }
@@ -38,10 +34,6 @@
     border-radius: var(--radius-pill, 9999px);
   }
 
-  .color-wheel-flower__ring--outer {
-    will-change: transform, opacity, box-shadow, background;
-  }
-
   .color-wheel-flower__ring--inner {
     background: #0b1012;
   }

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -12,7 +12,7 @@ import { resolveColorWheelFlowerPalette } from "./ColorWheelFlower.palette.js";
 import { motionDistances, motionDurations, motionEasings, prefersReducedMotion, runMotion } from "../../motion/index.js";
 import { CLASSES, componentRecipe } from "./ColorWheelFlower.recipe.js";
 import { flowerPetalPosition } from "./ColorWheelFlower.geometry.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div><div><div></div></div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div><span></span><span>");
+var _tmpl$ = /*#__PURE__*/ template("<div><div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div><span></span><span>");
 const parseRgbToHsl = (rgbString)=>{
     const match = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     if (!match) return {
@@ -317,27 +317,14 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
     }
     const mode = ()=>p.mode ?? currentTheme();
     const colors = createMemo(()=>buildColors(resolveColorWheelFlowerPalette(mode(), p.palette)));
-    const rainbowGradient = ()=>{
-        const outer = colors().slice(0, 12);
-        const stops = outer.map((item, index)=>`${item.rgb} ${index / outer.length * 360}deg`);
-        stops.push(`${outer[0].rgb} 360deg`);
-        return `conic-gradient(from 0deg, ${stops.join(", ")})`;
-    };
     const reduceMotion = prefersReducedMotion();
-    const ringTransition = reduceMotion ? {
-        duration: 0
-    } : {
-        duration: motionDurations.slow,
-        easing: motionEasings.inOut
-    };
+    reduceMotion || (motionDurations.slow, motionEasings.inOut);
     const hoverLift = reduceMotion ? 0 : motionDistances.sm;
     const pressScale = 0.96;
     const pulseScale = 1.12;
     let containerRef;
     let pointerTimeout;
     let pulseTimeout;
-    let outerRingRef;
-    let outerRingControl = null;
     const closestIndex = createMemo(()=>{
         const current = context.color();
         const items = colors();
@@ -437,51 +424,12 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         setHoveredIndex(null);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     };
-    const outerRingBackground = ()=>{
-        const selected = selectedIndex();
-        if (null === selected) return rainbowGradient();
-        const color = colors()[selected];
-        return `conic-gradient(${color.rgb}, ${color.rgb})`;
-    };
-    const outerRingTarget = createMemo(()=>{
-        if (context.disabled()) return {
-            opacity: 0.5,
-            scale: 1
-        };
-        if (null !== selectedIndex()) return {
-            opacity: 1,
-            scale: 1
-        };
-        if (null !== hoveredIndex()) return {
-            opacity: 0.98,
-            scale: 0.84
-        };
-        return {
-            opacity: 0.92,
-            scale: 0.84
-        };
-    });
-    const outerRingGlow = createMemo(()=>{
-        if (context.disabled()) return "none";
-        const index = hoveredIndex() ?? selectedIndex();
-        if (null === index) return "0 0 10px rgba(255,255,255,0.08)";
-        const color = colors()[index].rgb;
-        return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
-    });
-    createTrackedEffect(()=>{
-        const node = outerRingRef;
-        if (!node) return;
-        const target = outerRingTarget();
-        outerRingControl?.stop();
-        outerRingControl = runMotion(node, readMotionState(node), target, ringTransition);
-    });
     onCleanup(()=>{
-        outerRingControl?.stop();
         if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     });
     const pickerValue = ()=>colors()[visualSelectedIndex()]?.hex;
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
     var _ref$ = containerRef;
     "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : containerRef = _el$;
     spread(_el$, mergeProps(()=>({
@@ -503,25 +451,9 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
             class: CLASSES.rings
         })), true);
     spread(_el$3, mergeProps(()=>({
-            class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.outer)
-        })), true);
-    var _ref$2 = outerRingRef;
-    "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$4) : outerRingRef = _el$4;
-    spread(_el$4, mergeProps(()=>({
-            class: twMerge(CLASSES.ring.base, CLASSES.ring.outer)
-        }), {
-        get style () {
-            return {
-                background: outerRingBackground(),
-                "box-shadow": outerRingGlow(),
-                transition: reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out"
-            };
-        }
-    }), false);
-    spread(_el$5, mergeProps(()=>({
             class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.inner)
         })), true);
-    spread(_el$6, mergeProps(()=>({
+    spread(_el$4, mergeProps(()=>({
             class: twMerge(CLASSES.ring.base, CLASSES.ring.inner)
         })), false);
     insert(_el$, createComponent(color_swatch_picker, mergeProps(()=>({
@@ -638,24 +570,24 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                     onCleanup(()=>{
                         dotControl?.stop();
                     });
-                    var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
-                    spread(_el$7, mergeProps(()=>({
+                    var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+                    spread(_el$5, mergeProps(()=>({
                             class: CLASSES.dot.base
                         }), {
                         get style () {
                             return flowerPetalPosition(item.offsetX, item.offsetY);
                         }
                     }), true);
-                    spread(_el$8, mergeProps(()=>({
+                    spread(_el$6, mergeProps(()=>({
                             class: CLASSES.dot.frame
                         })), true);
                     ref(()=>(el)=>{
                             motionRef = el;
-                        }, _el$9);
-                    spread(_el$9, mergeProps(()=>({
+                        }, _el$7);
+                    spread(_el$7, mergeProps(()=>({
                             class: CLASSES.dot.motion
                         })), true);
-                    spread(_el$0, mergeProps(()=>({
+                    spread(_el$8, mergeProps(()=>({
                             class: CLASSES.halo
                         }), {
                         get style () {
@@ -666,7 +598,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                             };
                         }
                     }), false);
-                    insert(_el$9, createComponent(color_swatch, mergeProps({
+                    insert(_el$7, createComponent(color_swatch, mergeProps({
                         get color () {
                             return item.hex;
                         },
@@ -704,11 +636,11 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                         onPointerCancel: ()=>{
                             if (!context.disabled()) setPressedIndex(null);
                         }
-                    })), _el$1);
-                    spread(_el$1, mergeProps(()=>({
+                    })), _el$9);
+                    spread(_el$9, mergeProps(()=>({
                             class: clsx(CLASSES.highlight.base, isHovered() && CLASSES.highlight.hovered, isPulsing() && CLASSES.highlight.pulsing)
                         })), false);
-                    return _el$7;
+                    return _el$5;
                 }
             });
         }

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

@@ -6,12 +6,10 @@ export declare const CLASSES: {
     readonly rings: "color-wheel-flower__rings";
     readonly ringShell: {
         readonly base: "color-wheel-flower__ring-shell";
-        readonly outer: "color-wheel-flower__ring-shell--outer";
         readonly inner: "color-wheel-flower__ring-shell--inner";
     };
     readonly ring: {
         readonly base: "color-wheel-flower__ring";
-        readonly outer: "color-wheel-flower__ring--outer";
         readonly inner: "color-wheel-flower__ring--inner";
     };
     readonly picker: "color-wheel-flower__picker";

package/dist/components/color-wheel-flower/ColorWheelFlower.recipe.js

@@ -7,12 +7,10 @@ const CLASSES = {
     rings: "color-wheel-flower__rings",
     ringShell: {
         base: "color-wheel-flower__ring-shell",
-        outer: "color-wheel-flower__ring-shell--outer",
         inner: "color-wheel-flower__ring-shell--inner"
     },
     ring: {
         base: "color-wheel-flower__ring",
-        outer: "color-wheel-flower__ring--outer",
         inner: "color-wheel-flower__ring--inner"
     },
     picker: "color-wheel-flower__picker",

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/purge-manifest.json

@@ -15263,9 +15263,6 @@
             "base": [
               "color-wheel-flower__ring-shell"
             ],
-            "outer": [
-              "color-wheel-flower__ring-shell--outer"
-            ],
             "inner": [
               "color-wheel-flower__ring-shell--inner"
             ]
@@ -15274,9 +15271,6 @@
             "base": [
               "color-wheel-flower__ring"
             ],
-            "outer": [
-              "color-wheel-flower__ring--outer"
-            ],
             "inner": [
               "color-wheel-flower__ring--inner"
             ]
@@ -15331,10 +15325,8 @@
         ".color-wheel-flower__picker",
         ".color-wheel-flower__ring",
         ".color-wheel-flower__ring--inner",
-        ".color-wheel-flower__ring--outer",
         ".color-wheel-flower__ring-shell",
         ".color-wheel-flower__ring-shell--inner",
-        ".color-wheel-flower__ring-shell--outer",
         ".color-wheel-flower__rings",
         ".color-wheel-flower__swatch",
         ".color-wheel-flower__swatch--center",
@@ -19620,12 +19612,6 @@
           "ColorWheelFlower"
         ]
       },
-      {
-        "selector": ".color-wheel-flower__ring--outer",
-        "components": [
-          "ColorWheelFlower"
-        ]
-      },
       {
         "selector": ".color-wheel-flower__ring-shell",
         "components": [
@@ -19638,12 +19624,6 @@
           "ColorWheelFlower"
         ]
       },
-      {
-        "selector": ".color-wheel-flower__ring-shell--outer",
-        "components": [
-          "ColorWheelFlower"
-        ]
-      },
       {
         "selector": ".color-wheel-flower__rings",
         "components": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "author": "pathscale",
   "repository": {
     "type": "git",