@pathscale/ui 2.12.0 → 3.1.0

package/dist/components/select/Select.generated.js

@@ -58,7 +58,12 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const open = ()=>void 0 !== p.open ? Boolean(p.open) : internalOpen();
     const placement = ()=>p.placement ?? "bottom";
     const autoFlip = ()=>p.autoFlip ?? true;
+    const assertOneControlSource = ()=>{
+        if (void 0 !== p.selectedKeys && void 0 !== p.value) throw new Error("Select received both `value` and `selectedKeys`. They are competing control sources; pass exactly one. Use `selectedKeys` for multiple selection, `value` for single.");
+        if (void 0 !== p.defaultSelectedKeys && void 0 !== p.defaultValue) throw new Error("Select received both `defaultValue` and `defaultSelectedKeys`. Pass exactly one.");
+    };
     const selectedKeys = createMemo(()=>{
+        assertOneControlSource();
         const controlledValue = void 0 !== p.selectedKeys ? p.selectedKeys : p.value;
         if (void 0 !== controlledValue) return normalizeSelection(selectionMode(), controlledValue);
         return normalizeSelection(selectionMode(), internalSelectedKeys());

package/dist/components/slider/Slider.generated.d.ts

@@ -18,6 +18,19 @@ type SliderBaseProps = {
     class?: string;
     style?: JSX.CSSProperties;
 };
-export type SliderProps = SliderBaseProps & UIBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderBaseProps>;
+/**
+ * Pass-through is div attributes, because that is what this renders.
+ *
+ * It declared `JSX.InputHTMLAttributes<HTMLInputElement>` and there is no
+ * `<input>` anywhere in the component: the semantic element is a `div` with
+ * `role="slider"`, and the value comes from `aria-valuenow`. So the type
+ * offered `min`, `max`, `step`, `form`, `checked` and the rest of the input
+ * surface, none of which had anywhere to go — on top of nothing being
+ * forwarded at all, which is the reason this was noticed.
+ *
+ * Narrowed to the element that exists. `min`/`max`/`step` remain as this
+ * component's own props above, where they are actually read.
+ */
+export type SliderProps = SliderBaseProps & UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, keyof SliderBaseProps>;
 declare const Slider: __LayoutComponent<SliderProps>;
 export default Slider;

package/dist/components/slider/Slider.generated.js

@@ -1,7 +1,7 @@
 import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Slider.css";
-import { Show, createSignal, createUniqueId } from "solid-js";
+import { Show, createSignal, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createSliderInteractionHandlers } from "./Slider.interactions.js";
 import { CLASSES, componentRecipe } from "./Slider.recipe.js";
@@ -16,6 +16,7 @@ function snapToStep(val, min, max, step) {
 const __solidLayoutSlider = (_stable, p)=>{
     let trackRef;
     let thumbRef;
+    const others = omit(p, "label", "value", "onChange", "onChangeEnd", "min", "max", "step", "disabled", "formatValue", "size", "dataTheme", "class", "style", "id", "aria-label");
     const min = ()=>p.min ?? 0;
     const max = ()=>p.max ?? 100;
     const step = ()=>p.step ?? 1;
@@ -189,7 +190,7 @@ const __solidLayoutSlider = (_stable, p)=>{
     }), false);
     var _ref$2 = thumbRef;
     "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$6) : thumbRef = _el$6;
-    spread(_el$6, mergeProps({
+    spread(_el$6, mergeProps(others, {
         get id () {
             return p.id;
         }

package/dist/components/switch/Switch.css

@@ -219,13 +219,11 @@
 
   /* ── Disabled state ── */
 
-  .switch--disabled,
   .switch[data-disabled="true"] {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  .switch--disabled .switch__thumb,
   .switch[data-disabled="true"] .switch__thumb {
     background-color: color-mix(
       in oklab,
@@ -234,7 +232,6 @@
     );
   }
 
-  .switch--disabled[data-selected="true"] .switch__thumb,
   .switch[data-disabled="true"][data-selected="true"] .switch__thumb {
     opacity: 0.4;
   }

package/dist/components/switch/Switch.generated.d.ts

@@ -1,10 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Switch.css";
 import type { JSX } from "@solidjs/web";
-import type { UIBaseProps, Flavor, State } from "../vocabulary";
+import type { Flavor, State, UIBaseProps } from "../vocabulary";
 export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
 export type ToggleSize = "sm" | "md" | "lg";
-export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & UIBaseProps & {
+export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color" | "onChange"> & UIBaseProps & {
     defaultChecked?: boolean;
     children?: JSX.Element;
     description?: JSX.Element;
@@ -12,6 +12,27 @@ export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"
     state?: State;
     flavor?: Flavor;
     size?: ToggleSize;
+    /**
+     * The new checked state.
+     *
+     * **Breaking in 3.1.** This used to be the input's native `onChange`, so it
+     * handed you an `Event` while `Slider`, `RadioGroup` and `CheckboxGroup`
+     * handed you a value. One name meant two things depending on which control
+     * you reached for, which made swapping one field for another quietly
+     * dangerous. Every control in the library now reports its new value here.
+     *
+     * The native handler has not gone away: it is {@link onNativeChange}, and
+     * it is still where you call `preventDefault()`.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The underlying `change` event, before the toggle is applied.
+     *
+     * This is the veto: `preventDefault()` here leaves the switch as it was and
+     * suppresses {@link onChange}. Reach for it when you need the event itself;
+     * for the value, use `onChange`.
+     */
+    onNativeChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
 };
 declare const Switch: __LayoutComponent<ToggleProps>;
 export default Switch;

package/dist/components/switch/Switch.generated.js

@@ -2,36 +2,32 @@ import { createComponent, insert, mergeProps, spread, template } from "@solidjs/
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Switch.css";
 import { Show, createSignal, omit } from "solid-js";
-import { twMerge } from "../../lib/twMerge.js";
-import { CLASSES, componentRecipe } from "./Switch.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$4 = /*#__PURE__*/ template("<label><input><span><span>");
+import { componentRecipe } from "./Switch.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<label><input><span><span>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const __solidLayoutSwitch = (_stable, p)=>{
-    const others = omit(p, "class", "children", "description", "icon", "state", "flavor", "size", "checked", "defaultChecked", "disabled", "onChange", "dataTheme");
+    const others = omit(p, "class", "onNativeChange", "children", "description", "icon", "state", "flavor", "size", "checked", "defaultChecked", "disabled", "onChange", "dataTheme");
     const [internalSelected, setInternalSelected] = createSignal(Boolean(p.defaultChecked));
     const isControlled = ()=>void 0 !== p.checked;
     const isSelected = ()=>isControlled() ? Boolean(p.checked) : internalSelected();
     const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
-    const color = ()=>p.flavor ?? "accent";
-    const size = ()=>p.size ?? "md";
     const hasContent = ()=>null != p.children || null != p.description;
     const handleChange = (event)=>{
-        invokeEventHandler(p.onChange, event);
+        invokeEventHandler(p.onNativeChange, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
-        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+        const checked = event.currentTarget.checked;
+        if (!isControlled()) setInternalSelected(checked);
+        p.onChange?.(checked);
     };
-    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
-    spread(_el$, mergeProps(()=>({
-            class: twMerge(CLASSES.base, CLASSES.size[size()], CLASSES.flavor[color()] ?? `switch--flavor-${color()}`, isDisabled() && CLASSES.flag.disabled, p.class)
-        }), {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+    spread(_el$, mergeProps(()=>_stable.slot.root, {
         get ["data-theme"] () {
             return p.dataTheme;
         },
-        "data-slot": "switch",
         get ["data-selected"] () {
             return isSelected() ? "true" : "false";
         },
@@ -45,10 +41,7 @@ const __solidLayoutSwitch = (_stable, p)=>{
     spread(_el$2, mergeProps(others, {
         type: "checkbox",
         role: "switch"
-    }, ()=>({
-            class: CLASSES.slot.input
-        }), {
-        "data-slot": "switch-input",
+    }, ()=>_stable.slot.input, {
         get checked () {
             return isSelected();
         },
@@ -57,28 +50,17 @@ const __solidLayoutSwitch = (_stable, p)=>{
         },
         onChange: handleChange
     }), false);
-    spread(_el$3, mergeProps(()=>({
-            class: CLASSES.slot.control
-        }), {
-        "data-slot": "switch-control",
+    spread(_el$3, mergeProps(()=>_stable.slot.control, {
         "aria-hidden": "true"
     }), true);
-    spread(_el$4, mergeProps(()=>({
-            class: CLASSES.slot.thumb
-        }), {
-        "data-slot": "switch-thumb"
-    }), true);
+    spread(_el$4, mergeProps(()=>_stable.slot.thumb), true);
     insert(_el$4, createComponent(Show, {
         get when () {
             return p.icon;
         },
         get children () {
             var _el$5 = _tmpl$();
-            spread(_el$5, mergeProps(()=>({
-                    class: CLASSES.slot.icon
-                }), {
-                "data-slot": "switch-icon"
-            }), true);
+            spread(_el$5, mergeProps(()=>_stable.slot.icon), true);
             insert(_el$5, ()=>p.icon);
             return _el$5;
         }
@@ -88,18 +70,15 @@ const __solidLayoutSwitch = (_stable, p)=>{
             return hasContent();
         },
         get children () {
-            var _el$6 = _tmpl$3(), _el$9 = _el$6.firstChild, _el$0 = _el$9.nextSibling;
-            spread(_el$6, mergeProps(()=>({
-                    class: CLASSES.slot.content
-                }), {
-                "data-slot": "switch-content"
-            }), true);
+            var _el$6 = _tmpl$2(), _el$9 = _el$6.firstChild, _el$0 = _el$9.nextSibling;
+            spread(_el$6, mergeProps(()=>_stable.slot.content), true);
             insert(_el$6, createComponent(Show, {
                 get when () {
                     return p.children;
                 },
                 get children () {
-                    var _el$7 = _tmpl$2();
+                    var _el$7 = _tmpl$();
+                    spread(_el$7, mergeProps(()=>_stable.slot.label), true);
                     insert(_el$7, ()=>p.children);
                     return _el$7;
                 }
@@ -110,11 +89,7 @@ const __solidLayoutSwitch = (_stable, p)=>{
                 },
                 get children () {
                     var _el$8 = _tmpl$();
-                    spread(_el$8, mergeProps(()=>({
-                            class: CLASSES.slot.description
-                        }), {
-                        "data-slot": "description"
-                    }), true);
+                    spread(_el$8, mergeProps(()=>_stable.slot.description), true);
                     insert(_el$8, ()=>p.description);
                     return _el$8;
                 }
@@ -135,7 +110,9 @@ const Switch = defineComponent({
         "icon",
         "state",
         "flavor",
-        "size"
+        "size",
+        "onChange",
+        "onNativeChange"
     ]
 });
 const Switch_generated = Switch;

package/dist/components/switch/Switch.recipe.d.ts

@@ -1,43 +1,66 @@
-export declare const CLASSES: {
-    readonly base: "switch";
-    readonly slot: {
-        readonly input: "switch__input";
-        readonly control: "switch__control";
-        readonly thumb: "switch__thumb";
-        readonly icon: "switch__icon";
-        readonly content: "switch__content";
-        readonly description: "switch__description";
-    };
-    readonly flavor: {
-        readonly neutral: "switch--flavor-neutral";
-        readonly primary: "switch--flavor-primary";
-        readonly secondary: "switch--flavor-secondary";
-        readonly accent: "switch--flavor-accent";
-        readonly destructive: "switch--flavor-destructive";
-        readonly success: "switch--flavor-success";
-        readonly warning: "switch--flavor-warning";
-        readonly info: "switch--flavor-info";
-    };
-    readonly size: {
-        readonly sm: "switch--sm";
-        readonly md: "switch--md";
-        readonly lg: "switch--lg";
-    };
-    readonly flag: {
-        readonly disabled: "switch--disabled";
-    };
-};
+/**
+ * Presentation, owned here rather than assembled in the component.
+ *
+ * The recipe declared nine empty slots while `Switch.layout.tsx` kept a
+ * `CLASSES` table and built the root's class with `twMerge` over base, size,
+ * flavor and a disabled flag. The slot names it declared did not match what the
+ * component rendered either -- `label` and `switch` were never used, and the
+ * classes lived somewhere else entirely.
+ *
+ * `flavor` and `size` are call-site props. `disabled` is computed from
+ * `props.disabled`, `props.state` and the enclosing group, so it is `state`:
+ * the compiler mirrors it to `data-disabled`, which is what the component was
+ * already setting by hand alongside the class.
+ */
 export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "switch";
+    readonly element: "label";
     readonly slots: {
-        readonly description: {};
-        readonly label: {};
-        readonly root: {};
-        readonly switch: {};
-        readonly "switch-content": {};
-        readonly "switch-control": {};
-        readonly "switch-icon": {};
-        readonly "switch-input": {};
-        readonly "switch-thumb": {};
+        readonly root: {
+            readonly base: "switch";
+        };
+        readonly input: {
+            readonly base: "switch__input";
+        };
+        readonly control: {
+            readonly base: "switch__control";
+        };
+        readonly thumb: {
+            readonly base: "switch__thumb";
+        };
+        readonly icon: {
+            readonly base: "switch__icon";
+        };
+        readonly content: {
+            readonly base: "switch__content";
+        };
+        readonly label: {
+            readonly slot: "label";
+        };
+        readonly description: {
+            readonly base: "switch__description";
+            readonly slot: "description";
+        };
+    };
+    readonly props: {
+        readonly flavor: {
+            readonly neutral: "switch--flavor-neutral";
+            readonly primary: "switch--flavor-primary";
+            readonly secondary: "switch--flavor-secondary";
+            readonly accent: "switch--flavor-accent";
+            readonly destructive: "switch--flavor-destructive";
+            readonly success: "switch--flavor-success";
+            readonly warning: "switch--flavor-warning";
+            readonly info: "switch--flavor-info";
+        };
+        readonly size: {
+            readonly sm: "switch--sm";
+            readonly md: "switch--md";
+            readonly lg: "switch--lg";
+        };
+    };
+    readonly defaults: {
+        readonly flavor: "accent";
+        readonly size: "md";
     };
 }>;

package/dist/components/switch/Switch.recipe.js

@@ -1,97 +1,117 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "switch",
-    slot: {
-        input: "switch__input",
-        control: "switch__control",
-        thumb: "switch__thumb",
-        icon: "switch__icon",
-        content: "switch__content",
-        description: "switch__description"
-    },
-    flavor: {
-        neutral: "switch--flavor-neutral",
-        primary: "switch--flavor-primary",
-        secondary: "switch--flavor-secondary",
-        accent: "switch--flavor-accent",
-        destructive: "switch--flavor-destructive",
-        success: "switch--flavor-success",
-        warning: "switch--flavor-warning",
-        info: "switch--flavor-info"
-    },
-    size: {
-        sm: "switch--sm",
-        md: "switch--md",
-        lg: "switch--lg"
-    },
-    flag: {
-        disabled: "switch--disabled"
-    }
-};
 const componentRecipe = recipe({
     component: "switch",
+    element: "label",
     slots: {
-        description: {},
-        label: {},
-        root: {},
-        switch: {},
-        "switch-content": {},
-        "switch-control": {},
-        "switch-icon": {},
-        "switch-input": {},
-        "switch-thumb": {}
+        root: {
+            base: "switch"
+        },
+        input: {
+            base: "switch__input"
+        },
+        control: {
+            base: "switch__control"
+        },
+        thumb: {
+            base: "switch__thumb"
+        },
+        icon: {
+            base: "switch__icon"
+        },
+        content: {
+            base: "switch__content"
+        },
+        label: {
+            slot: "label"
+        },
+        description: {
+            base: "switch__description",
+            slot: "description"
+        }
+    },
+    props: {
+        flavor: {
+            neutral: "switch--flavor-neutral",
+            primary: "switch--flavor-primary",
+            secondary: "switch--flavor-secondary",
+            accent: "switch--flavor-accent",
+            destructive: "switch--flavor-destructive",
+            success: "switch--flavor-success",
+            warning: "switch--flavor-warning",
+            info: "switch--flavor-info"
+        },
+        size: {
+            sm: "switch--sm",
+            md: "switch--md",
+            lg: "switch--lg"
+        }
+    },
+    defaults: {
+        flavor: "accent",
+        size: "md"
     },
     _layouts: {
         slots: {
-            description: {
-                base: "",
-                axes: {}
-            },
-            label: {
-                base: "",
-                axes: {}
-            },
             root: {
-                base: "",
+                base: "switch",
+                axes: {
+                    flavor: {
+                        neutral: "switch--flavor-neutral",
+                        primary: "switch--flavor-primary",
+                        secondary: "switch--flavor-secondary",
+                        accent: "switch--flavor-accent",
+                        destructive: "switch--flavor-destructive",
+                        success: "switch--flavor-success",
+                        warning: "switch--flavor-warning",
+                        info: "switch--flavor-info"
+                    },
+                    size: {
+                        sm: "switch--sm",
+                        md: "switch--md",
+                        lg: "switch--lg"
+                    }
+                }
+            },
+            input: {
+                base: "switch__input",
                 axes: {}
             },
-            switch: {
-                base: "",
+            control: {
+                base: "switch__control",
                 axes: {}
             },
-            "switch-content": {
-                base: "",
+            thumb: {
+                base: "switch__thumb",
                 axes: {}
             },
-            "switch-control": {
-                base: "",
+            icon: {
+                base: "switch__icon",
                 axes: {}
             },
-            "switch-icon": {
-                base: "",
+            content: {
+                base: "switch__content",
                 axes: {}
             },
-            "switch-input": {
+            label: {
                 base: "",
                 axes: {}
             },
-            "switch-thumb": {
-                base: "",
+            description: {
+                base: "switch__description",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            description: 0,
-            label: 1,
-            root: 2,
-            switch: 3,
-            "switch-content": 4,
-            "switch-control": 5,
-            "switch-icon": 6,
-            "switch-input": 7,
-            "switch-thumb": 8
+            root: 6,
+            input: 4,
+            control: 1,
+            thumb: 7,
+            icon: 3,
+            content: 0,
+            label: 5,
+            description: 2
         }
     }
 });
-export { CLASSES, componentRecipe };
+export { componentRecipe };

package/dist/components/text/Text.generated.js

@@ -2,18 +2,14 @@ import { insert, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Text.css";
 import { omit } from "solid-js";
-import { twMerge } from "../../lib/twMerge.js";
-import { CLASSES, componentRecipe } from "./Text.recipe.js";
+import { componentRecipe } from "./Text.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutTextRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "style", "size", "variant", "weight", "transform", "tracking", "leading", "family");
     const size = ()=>p.size ?? "base";
     const variant = ()=>p.variant ?? "default";
     var _el$ = _tmpl$();
-    spread(_el$, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.base, p.class)
-        }), {
-        "data-slot": "text",
+    spread(_el$, mergeProps(others, ()=>_stable.slot.root, {
         get ["data-size"] () {
             return size();
         },

package/dist/components/text/Text.recipe.d.ts

@@ -1,10 +1,22 @@
-export declare const CLASSES: {
-    readonly base: "text";
-};
+/**
+ * The root class, owned here.
+ *
+ * Text's presentation axes stay `data-*` attributes rather than becoming recipe
+ * `props`, and deliberately: `Text.css` selects on `[data-size]`, `[data-variant]`
+ * and the rest, so turning them into recipe props would emit classes nothing
+ * styles. Recipe `props` map a value to a class; these map a value to an
+ * attribute, which is what `state` is for -- except these are set at the call
+ * site, not computed.
+ *
+ * So the only thing that was manual here is the base class, and that is what
+ * moves: the layout spreads `{...slot.root}` instead of calling `twMerge`.
+ */
 export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "text";
+    readonly element: "span";
     readonly slots: {
-        readonly root: {};
-        readonly text: {};
+        readonly root: {
+            readonly base: "text";
+        };
     };
 }>;

package/dist/components/text/Text.recipe.js

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