@pathscale/ui 2.9.0 → 2.9.1

package/dist/components/color-wheel/{ColorWheel.d.ts → ColorWheel.generated.d.ts}

@@ -1,3 +1,5 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ColorWheel.css";
 import type { JSX } from "@solidjs/web";
 import { type ColorWheelFlowerMode } from "../color-wheel-flower";
 interface ColorWheelBaseProps {
@@ -15,13 +17,5 @@ interface ColorWheelBaseProps {
     "aria-label"?: string;
 }
 export type ColorWheelProps = ColorWheelBaseProps & Omit<JSX.FieldsetHTMLAttributes<HTMLFieldSetElement>, keyof ColorWheelBaseProps | "onChange">;
-/**
- * A controlled literal colour wheel.
- *
- * `ColorWheelFlower` remains the low-level context consumer. This is the
- * ordinary application surface: value in, normalized value out, no private
- * picker context for every consumer to recreate.
- */
-export declare function ColorWheel(props: ColorWheelProps): JSX.Element;
-import "./ColorWheel.css";
+export declare const ColorWheelLayout: __LayoutComponent<ColorWheelProps>;
 export {};

package/dist/components/color-wheel/{ColorWheel.js → ColorWheel.generated.js}

@@ -1,33 +1,29 @@
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./ColorWheel.css";
 import { createMemo, omit } from "solid-js";
-import { twMerge } from "../../lib/twMerge.js";
 import { ColorPickerContext, ColorWheelFlower } from "../color-wheel-flower/index.js";
 import { parseColor } from "../color-wheel-flower/ColorUtils.js";
-import "./ColorWheel.css";
+import { colorWheel } from "./ColorWheel.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<fieldset>");
 const FALLBACK = parseColor("#ffffff");
-function ColorWheel(props) {
-    const local = props;
-    const others = omit(props, "value", "onChange", "mode", "palette", "isDisabled", "class", "wheelClass", "aria-label");
-    const color = createMemo(()=>parseColor(local.value) ?? FALLBACK);
+const __solidLayoutColorWheelLayout = (_stable, p)=>{
+    const others = omit(p, "value", "onChange", "mode", "palette", "isDisabled", "class", "wheelClass", "aria-label");
+    const color = createMemo(()=>parseColor(p.value) ?? FALLBACK);
     const context = ()=>({
             color,
             format: ()=>"hex",
-            disabled: ()=>Boolean(local.isDisabled),
-            onChange: (next)=>local.onChange(next.hex),
+            disabled: ()=>Boolean(p.isDisabled),
+            onChange: (next)=>p.onChange(next.hex),
             onFormatChange: ()=>{}
         });
     var _el$ = _tmpl$();
-    spread(_el$, mergeProps(others, {
-        get ["class"] () {
-            return twMerge("color-wheel", local.class);
-        },
+    spread(_el$, mergeProps(others, ()=>_stable.slot.root, {
         get ["aria-label"] () {
-            return local["aria-label"] ?? "Colour";
+            return p["aria-label"] ?? "Colour";
         },
-        "data-slot": "color-wheel",
         get ["data-disabled"] () {
-            return local.isDisabled ? "" : void 0;
+            return p.isDisabled ? "" : void 0;
         }
     }), true);
     insert(_el$, createComponent(ColorPickerContext, {
@@ -37,17 +33,22 @@ function ColorWheel(props) {
         get children () {
             return createComponent(ColorWheelFlower, {
                 get ["class"] () {
-                    return local.wheelClass;
+                    return p.wheelClass;
                 },
                 get mode () {
-                    return local.mode;
+                    return p.mode;
                 },
                 get palette () {
-                    return local.palette;
+                    return p.palette;
                 }
             });
         }
     }));
     return _el$;
-}
-export { ColorWheel };
+};
+const ColorWheelLayout = defineComponent({
+    recipe: colorWheel,
+    layout: __solidLayoutColorWheelLayout,
+    embedded: true
+});
+export { ColorWheelLayout };

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

@@ -0,0 +1,9 @@
+export declare const colorWheel: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "color-wheel";
+    readonly element: "fieldset";
+    readonly slots: {
+        readonly root: {
+            readonly base: "color-wheel";
+        };
+    };
+}>;

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

@@ -0,0 +1,23 @@
+import { recipe } from "../../lib/layouts/index.js";
+const colorWheel = recipe({
+    component: "color-wheel",
+    element: "fieldset",
+    slots: {
+        root: {
+            base: "color-wheel"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "color-wheel",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { colorWheel };

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

@@ -78,7 +78,8 @@
 .complex-color-wheel__preview {
   width: 1.5rem;
   height: 1.5rem;
-  border: 1px solid color-mix(in srgb, var(--color-base-content) 16%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--color-base-content) 16%, transparent);
   border-radius: 9999px;
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
 }

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

@@ -1,7 +1,8 @@
+import type { Component as __LayoutComponent } from "solid-js";
 import "./ComplexColorWheel.css";
 import type { JSX } from "@solidjs/web";
 import { type CardMaterial } from "../card";
-import { type ColorWheelProps } from "./ColorWheel";
+import { type ColorWheelProps } from "./ColorWheel.generated";
 export interface ColorWheelAdjustment {
     id: string;
     label: string;
@@ -21,22 +22,10 @@ export interface ColorWheelAdjustment {
     ink?: (value: number, color: string) => string;
 }
 export interface ComplexColorWheelProps extends ColorWheelProps {
-    /**
-     * Strength, softness and glass axes, in the order the application wants.
-     * The composition owns their standard slider markup; colour mathematics
-     * remain explicit consumer policy through `preview` and `onChange`.
-     */
+    /** Standard value axes rendered beside the wheel. */
     adjustments: readonly ColorWheelAdjustment[];
     material?: CardMaterial;
     action?: JSX.Element;
     adjustmentsClass?: string;
 }
-/**
- * A colour wheel with standard value axes beside it.
- *
- * This is deliberately a composition instead of a theme engine. Applications
- * agree on the interaction and accessible structure while retaining control
- * of what "strength", "softness", blur, refraction or depth mean for their
- * own tokens.
- */
-export declare function ComplexColorWheel(props: ComplexColorWheelProps): JSX.Element;
+export declare const ComplexColorWheelLayout: __LayoutComponent<ComplexColorWheelProps>;

package/dist/components/color-wheel/{ComplexColorWheel.js → ComplexColorWheel.generated.js}

@@ -1,66 +1,79 @@
-import { className, createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ComplexColorWheel.css";
 import { For, Show } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import button_0 from "../button/index.js";
 import card from "../card/index.js";
 import slider from "../slider/index.js";
-import { ColorWheel } from "./ColorWheel.js";
-var _tmpl$ = /*#__PURE__*/ template("<div class=complex-color-wheel__action data-slot=complex-color-wheel-action>"), _tmpl$2 = /*#__PURE__*/ template("<div data-slot=complex-color-wheel-adjustments><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span class=complex-color-wheel__hint>"), _tmpl$4 = /*#__PURE__*/ template("<div class=complex-color-wheel__axis data-slot=complex-color-wheel-axis><div class=complex-color-wheel__axis-heading><span></span><span></span></div><div class=complex-color-wheel__axis-control>"), _tmpl$5 = /*#__PURE__*/ template("<span class=complex-color-wheel__preview aria-hidden=true>"), _tmpl$6 = /*#__PURE__*/ template("<div class=complex-color-wheel__stops>"), _tmpl$7 = /*#__PURE__*/ template("<span aria-hidden=true class=complex-color-wheel__stop-preview>");
-function ComplexColorWheel(props) {
-    return createComponent(card, {
+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, {
         get material () {
-            return props.material ?? "glass";
+            return p.material ?? "glass";
         },
-        class: "complex-color-wheel",
-        "data-slot": "complex-color-wheel",
         get children () {
             return [
-                createComponent(ColorWheel, {
+                createComponent(ColorWheelLayout, {
                     get value () {
-                        return props.value;
+                        return p.value;
                     },
                     get onChange () {
-                        return props.onChange;
+                        return p.onChange;
                     },
                     get mode () {
-                        return props.mode;
+                        return p.mode;
                     },
                     get palette () {
-                        return props.palette;
+                        return p.palette;
                     },
                     get isDisabled () {
-                        return props.isDisabled;
+                        return p.isDisabled;
                     },
                     get ["class"] () {
-                        return props.class;
+                        return p.class;
                     },
                     get wheelClass () {
-                        return props.wheelClass;
+                        return p.wheelClass;
                     },
                     get ["aria-label"] () {
-                        return props["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 props.action;
+                            return p.action;
                         },
                         get children () {
                             var _el$2 = _tmpl$();
-                            insert(_el$2, ()=>props.action);
+                            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 props.adjustments;
+                            return p.adjustments;
                         },
                         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;
@@ -72,10 +85,15 @@ function ComplexColorWheel(props) {
                                                     return adjustment.preview;
                                                 },
                                                 get children () {
-                                                    var _el$1 = _tmpl$5();
-                                                    effect(()=>adjustment.preview?.(adjustment.value, props.value), (_v$)=>{
-                                                        setStyleProperty(_el$1, "background-color", _v$);
-                                                    });
+                                                    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;
                                                 }
                                             }),
@@ -96,7 +114,7 @@ function ComplexColorWheel(props) {
                                                     return adjustment.step;
                                                 },
                                                 get disabled () {
-                                                    return props.isDisabled;
+                                                    return p.isDisabled;
                                                 },
                                                 get onChange () {
                                                     return adjustment.onChange;
@@ -112,12 +130,13 @@ function ComplexColorWheel(props) {
                                         ];
                                     },
                                     children: (stops)=>(()=>{
-                                            var _el$10 = _tmpl$6();
+                                            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, {
+                                                children: (stop)=>createComponent(button_0, mergeProps(()=>_stable.slot.stop, {
                                                         type: "button",
                                                         size: "sm",
                                                         variant: "ghost",
@@ -128,28 +147,29 @@ function ComplexColorWheel(props) {
                                                             return Math.abs(adjustment.value - stop) < 0.001 ? "true" : "false";
                                                         },
                                                         get disabled () {
-                                                            return props.isDisabled;
+                                                            return p.isDisabled;
                                                         },
                                                         onClick: ()=>adjustment.onChange(stop),
-                                                        class: "complex-color-wheel__stop",
                                                         get children () {
-                                                            var _el$11 = _tmpl$7();
+                                                            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"
                                                             }));
-                                                            effect(()=>({
-                                                                    e: adjustment.preview?.(stop, props.value),
-                                                                    t: adjustment.ink?.(stop, props.value)
-                                                                }), ({ e, t }, _p$)=>{
-                                                                e !== _p$?.e && setStyleProperty(_el$11, "background-color", e);
-                                                                t !== _p$?.t && setStyleProperty(_el$11, "color", t);
-                                                            });
                                                             return _el$11;
                                                         }
-                                                    })
+                                                    }))
                                             }));
                                             return _el$10;
                                         })()
@@ -160,23 +180,22 @@ function ComplexColorWheel(props) {
                                     },
                                     get children () {
                                         var _el$0 = _tmpl$3();
+                                        spread(_el$0, mergeProps(()=>_stable.slot.hint), true);
                                         insert(_el$0, ()=>adjustment.hint);
                                         return _el$0;
                                     }
                                 }), null);
-                                effect(()=>adjustment.id, (_v$)=>{
-                                    setAttribute(_el$5, "data-axis", _v$);
-                                });
                                 return _el$5;
                             })()
                     }), _el$4);
-                    effect(()=>`complex-color-wheel__adjustments ${props.adjustmentsClass ?? ""}`.trim(), (_v$, _$p)=>{
-                        className(_el$, _v$, _$p);
-                    });
                     return _el$;
                 })()
             ];
         }
-    });
-}
-export { ComplexColorWheel };
+    }));
+const ComplexColorWheelLayout = defineComponent({
+    recipe: complexColorWheel,
+    layout: __solidLayoutComplexColorWheelLayout,
+    embedded: true
+});
+export { ComplexColorWheelLayout };

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

@@ -0,0 +1,38 @@
+export declare const complexColorWheel: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "complex-color-wheel";
+    readonly slots: {
+        readonly root: {
+            readonly base: "complex-color-wheel";
+        };
+        readonly adjustments: {
+            readonly base: "complex-color-wheel__adjustments";
+        };
+        readonly action: {
+            readonly base: "complex-color-wheel__action";
+        };
+        readonly axis: {
+            readonly base: "complex-color-wheel__axis";
+        };
+        readonly axisHeading: {
+            readonly base: "complex-color-wheel__axis-heading";
+        };
+        readonly axisControl: {
+            readonly base: "complex-color-wheel__axis-control";
+        };
+        readonly stops: {
+            readonly base: "complex-color-wheel__stops";
+        };
+        readonly stop: {
+            readonly base: "complex-color-wheel__stop";
+        };
+        readonly stopPreview: {
+            readonly base: "complex-color-wheel__stop-preview";
+        };
+        readonly preview: {
+            readonly base: "complex-color-wheel__preview";
+        };
+        readonly hint: {
+            readonly base: "complex-color-wheel__hint";
+        };
+    };
+}>;

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

@@ -0,0 +1,102 @@
+import { recipe } from "../../lib/layouts/index.js";
+const complexColorWheel = recipe({
+    component: "complex-color-wheel",
+    slots: {
+        root: {
+            base: "complex-color-wheel"
+        },
+        adjustments: {
+            base: "complex-color-wheel__adjustments"
+        },
+        action: {
+            base: "complex-color-wheel__action"
+        },
+        axis: {
+            base: "complex-color-wheel__axis"
+        },
+        axisHeading: {
+            base: "complex-color-wheel__axis-heading"
+        },
+        axisControl: {
+            base: "complex-color-wheel__axis-control"
+        },
+        stops: {
+            base: "complex-color-wheel__stops"
+        },
+        stop: {
+            base: "complex-color-wheel__stop"
+        },
+        stopPreview: {
+            base: "complex-color-wheel__stop-preview"
+        },
+        preview: {
+            base: "complex-color-wheel__preview"
+        },
+        hint: {
+            base: "complex-color-wheel__hint"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "complex-color-wheel",
+                axes: {}
+            },
+            adjustments: {
+                base: "complex-color-wheel__adjustments",
+                axes: {}
+            },
+            action: {
+                base: "complex-color-wheel__action",
+                axes: {}
+            },
+            axis: {
+                base: "complex-color-wheel__axis",
+                axes: {}
+            },
+            axisHeading: {
+                base: "complex-color-wheel__axis-heading",
+                axes: {}
+            },
+            axisControl: {
+                base: "complex-color-wheel__axis-control",
+                axes: {}
+            },
+            stops: {
+                base: "complex-color-wheel__stops",
+                axes: {}
+            },
+            stop: {
+                base: "complex-color-wheel__stop",
+                axes: {}
+            },
+            stopPreview: {
+                base: "complex-color-wheel__stop-preview",
+                axes: {}
+            },
+            preview: {
+                base: "complex-color-wheel__preview",
+                axes: {}
+            },
+            hint: {
+                base: "complex-color-wheel__hint",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 7,
+            adjustments: 1,
+            action: 0,
+            axis: 2,
+            axisHeading: 4,
+            axisControl: 3,
+            stops: 10,
+            stop: 8,
+            stopPreview: 9,
+            preview: 6,
+            hint: 5
+        }
+    }
+});
+export { complexColorWheel };

package/dist/components/color-wheel/index.d.ts

@@ -1,4 +1,6 @@
-export { ColorWheel } from "./ColorWheel";
-export type { ColorWheelProps } from "./ColorWheel";
-export { ComplexColorWheel } from "./ComplexColorWheel";
-export type { ColorWheelAdjustment, ComplexColorWheelProps, } from "./ComplexColorWheel";
+export type { ColorWheelProps } from "./ColorWheel.generated";
+export { ColorWheelLayout as ColorWheel } from "./ColorWheel.generated";
+export { colorWheel } from "./ColorWheel.recipe";
+export type { ColorWheelAdjustment, ComplexColorWheelProps, } from "./ComplexColorWheel.generated";
+export { ComplexColorWheelLayout as ComplexColorWheel } from "./ComplexColorWheel.generated";
+export { complexColorWheel } from "./ComplexColorWheel.recipe";

package/dist/components/color-wheel/index.js

@@ -1,2 +1,4 @@
-export { ColorWheel } from "./ColorWheel.js";
-export { ComplexColorWheel } from "./ComplexColorWheel.js";
+export { ColorWheelLayout as ColorWheel } from "./ColorWheel.generated.js";
+export { colorWheel } from "./ColorWheel.recipe.js";
+export { ComplexColorWheelLayout as ComplexColorWheel } from "./ComplexColorWheel.generated.js";
+export { complexColorWheel } from "./ComplexColorWheel.recipe.js";

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "components": {
     "Accordion": {
       "kind": "embedded"
@@ -123,6 +123,9 @@
     "ColorSwatchPicker": {
       "kind": "embedded"
     },
+    "ColorWheel": {
+      "kind": "embedded"
+    },
     "ColorWheelFlower": {
       "kind": "embedded"
     },
@@ -144,6 +147,9 @@
     "ComboBoxTrigger": {
       "kind": "embedded"
     },
+    "ComplexColorWheel": {
+      "kind": "embedded"
+    },
     "Composer": {
       "kind": "embedded"
     },

package/package.json

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