@pathscale/ui 2.5.0 → 2.6.1

package/README.md

@@ -117,8 +117,8 @@ The rules that hold across every component — worth two minutes before your fir
   flat. Parts are styleable via `data-slot` and state attributes such as `data-open`.
 - There is **no polymorphic `as` prop**.
 
-Forms are TanStack Form plus any Standard Schema validator; Table is headless and assembled
-from hooks. Both, with toasts, icons and dates, are covered in
+Forms are built in and take any Standard Schema validator; DataGrid derives filtering,
+sorting, pagination and selection itself. Both, with toasts, icons and dates, are covered in
 **[docs/ui-usage.md](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)**.
 
 ## Requirements
@@ -137,8 +137,7 @@ line and must not be used.
 The complete compiler contract, hard-error behavior, commands, and porting analyzer are
 documented in [docs/layouts.md](docs/layouts.md).
 
-Peers include `@solid-primitives/*`, `@tanstack/solid-form` and `@tanstack/solid-table`.
-Two are optional and only needed for the features they back: `popmotion` (JS animation
+Two peers are optional and only needed for the features they back: `popmotion` (JS animation
 driver) and `@standard-schema/spec` (schema validation).
 
 ## Subpath exports
@@ -147,7 +146,7 @@ Everything is available from the root barrel. These exist when you want to be na
 
 ```ts
 import { Button } from "@pathscale/ui/components/button";
-import { useVirtualRows } from "@pathscale/ui/primitives/virtualizer";
+import { useAnchoredOverlayPosition } from "@pathscale/ui/hooks/table";
 import { runMotion, enablePopmotion } from "@pathscale/ui/motion";
 ```
 
@@ -163,6 +162,7 @@ import — the published size is the whole library, not what ships to your users
 | **[Live showcase](https://js.software)** | every component, rendered and interactive |
 | **[Usage reference](https://github.com/pathscale/ui/blob/master/docs/ui-usage.md)** | theming, conventions, forms, table, toast, icons, dates |
 | **[Contributing](https://github.com/pathscale/ui/blob/master/CONTRIBUTING.md)** | local setup, component checklist, proposal template |
+| **[Releasing](https://github.com/pathscale/ui/blob/master/docs/releasing.md)** | how a push to master becomes an npm version, and the gates it passes |
 
 ## License
 

package/dist/components/_shared/material.css

@@ -0,0 +1,115 @@
+/*
+ * `material="glass"`, for every surface that can hold content.
+ *
+ * One definition rather than one per component. Card had these rules inline,
+ * and copying them to Dialog, Drawer, Popover, Menu, Dock and Navbar would be
+ * six places to update when the glass vocabulary moves — which it did once
+ * already, from thirty-one hand-declared properties to three numbers and
+ * twenty-five derived ones.
+ *
+ * A component opts in by importing this file and adding the `material` axis to
+ * its recipe. The classes are keyed on a data attribute rather than a
+ * `<component>--material-glass` class so the rules are genuinely shared: a
+ * per-component class name would need this block duplicated for each one, which
+ * is the thing being avoided.
+ *
+ * Every `--glass-*` read carries a fallback, and that is load-bearing rather
+ * than tidy. An undefined custom property does not fall back to its initial
+ * value: CSS drops the whole declaration. Three of these used to be read bare,
+ * so a theme that defined twenty-eight of the thirty-one glass tokens got a
+ * surface with no background at all rather than a plainer one. The two shipped
+ * themes both use `white` for the three colours, so that is what the fallbacks
+ * say. `src/styles/glass.ts` derives the rest from `blur`, `refraction` and
+ * `depth`.
+ */
+
+@layer components {
+  [data-material="solid"] {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  [data-material="glass"] {
+    background-color: color-mix(
+      in oklab,
+      var(--glass-background-color, white),
+      transparent calc(100% - var(--glass-background-opacity, 55%))
+    );
+    border-color: color-mix(
+      in oklab,
+      var(--glass-border-color, white),
+      transparent calc(100% - var(--glass-border-opacity, 12%))
+    );
+    backdrop-filter: blur(var(--glass-blur, 50px)) saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+    -webkit-backdrop-filter: blur(var(--glass-blur, 50px)) saturate(var(--glass-saturation, 1.2))
+      brightness(var(--glass-brightness, 1));
+  }
+
+  /*
+   * The inner highlight: the lit top edge that makes a pane read as a pane
+   * rather than as a translucent rectangle.
+   *
+   * On a pseudo-element so it cannot be overwritten by a component's own
+   * `box-shadow`, which is how elevation is expressed. `inherit` on the radius
+   * keeps it aligned to whatever corner the component chose.
+   */
+  [data-material="glass"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 var(--border, 1px) 0 0
+      color-mix(
+        in oklab,
+        var(--glass-highlight-color, white),
+        transparent calc(100% - var(--glass-highlight-opacity, 18%))
+      );
+  }
+
+  /*
+   * Glass inside glass is one pane, not two.
+   *
+   * A backdrop filter reads the pixels behind it, so nesting one inside another
+   * blurs already-blurred output. That is muddy rather than deeper, and it
+   * costs a second render pass to get there.
+   */
+  [data-material="glass"] [data-material="glass"] {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  /*
+   * No backdrop support, or a reader who asked for less transparency.
+   *
+   * Falls back to a more opaque fill rather than to a thin tint over whatever
+   * happens to be behind it, because the tint alone is unreadable. The
+   * highlight goes too: it reads as a stray line without the material.
+   */
+  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    [data-material="glass"] {
+      background-color: color-mix(
+        in oklab,
+        var(--glass-background-color, white),
+        transparent calc(100% - var(--glass-fallback-background-opacity, 78%))
+      );
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    [data-material="glass"] {
+      background-color: color-mix(
+        in oklab,
+        var(--glass-background-color, white),
+        transparent calc(100% - var(--glass-fallback-background-opacity, 78%))
+      );
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+    }
+
+    [data-material="glass"]::before {
+      box-shadow: none;
+    }
+  }
+}

package/dist/components/_shared/overlayPosition.d.ts

@@ -1,4 +1,5 @@
-import { type Accessor, type JSX } from "solid-js";
+import { type Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type OverlayPlacement = "top" | "bottom" | "left" | "right";
 export type OverlayAlign = "start" | "center" | "end";
 export type OverlayAnchorRect = {
@@ -24,6 +25,6 @@ export interface CreateOverlayPositionOptions {
 }
 export declare const resolveOverlayAnchorRect: (trigger: Pick<HTMLElement, "getBoundingClientRect"> | undefined, anchorRect: OverlayAnchorRect | undefined) => OverlayAnchorRect | DOMRect | undefined;
 export declare const createOverlayPosition: (options: CreateOverlayPositionOptions) => {
-    style: Accessor<JSX.CSSProperties>;
-    placement: Accessor<OverlayPlacement>;
+    style: import("solid-js").SourceAccessor<JSX.CSSProperties>;
+    placement: import("solid-js").SourceAccessor<OverlayPlacement>;
 };

package/dist/components/accordion/Accordion.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Accordion.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps, State } from "../vocabulary";
 export type AccordionSelectionMode = "single" | "multiple";
 export type AccordionVariant = "default" | "surface";

package/dist/components/accordion/Accordion.generated.js

@@ -1,10 +1,10 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Accordion.css";
-import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, createMemo, createSignal, createUniqueId, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Accordion.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div><div>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<div><div><div>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
 const normalizeAccordionValue = (value, selectionMode)=>{
     if (void 0 === value) return [];
     const raw = Array.isArray(value) ? value : [
@@ -20,32 +20,18 @@ const invokeEventHandler = (handler, event)=>{
 const AccordionContext = createContext();
 const AccordionItemContext = createContext();
 const __solidLayoutAccordionRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "selectionMode",
-        "value",
-        "defaultValue",
-        "onValueChange",
-        "hideSeparator",
-        "variant",
-        "state",
-        "disabled",
-        "ref"
-    ]);
-    const selectionMode = ()=>local.selectionMode ?? "single";
-    const variant = ()=>local.variant ?? "default";
-    const hideSeparator = ()=>Boolean(local.hideSeparator);
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    const [internalValue, setInternalValue] = createSignal(normalizeAccordionValue(local.defaultValue, selectionMode()));
-    const selectedValues = createMemo(()=>void 0 !== local.value ? normalizeAccordionValue(local.value, selectionMode()) : normalizeAccordionValue(internalValue(), selectionMode()));
+    const others = omit(p, "children", "class", "dataTheme", "style", "selectionMode", "value", "defaultValue", "onValueChange", "hideSeparator", "variant", "state", "disabled", "ref");
+    const selectionMode = ()=>p.selectionMode ?? "single";
+    const variant = ()=>p.variant ?? "default";
+    const hideSeparator = ()=>Boolean(p.hideSeparator);
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    const [internalValue, setInternalValue] = createSignal(normalizeAccordionValue(p.defaultValue, selectionMode()));
+    const selectedValues = createMemo(()=>void 0 !== p.value ? normalizeAccordionValue(p.value, selectionMode()) : normalizeAccordionValue(internalValue(), selectionMode()));
     const isItemExpanded = (value)=>selectedValues().includes(value);
     const setSelectedValues = (nextValues)=>{
         const normalizedNextValues = normalizeAccordionValue(nextValues, selectionMode());
-        if (void 0 === local.value) setInternalValue(normalizedNextValues);
-        local.onValueChange?.(normalizedNextValues);
+        if (void 0 === p.value) setInternalValue(normalizedNextValues);
+        p.onValueChange?.(normalizedNextValues);
     };
     const toggleItem = (value)=>{
         if (isDisabled()) return;
@@ -83,16 +69,16 @@ const __solidLayoutAccordionRoot = (_stable, p)=>{
         toggleItem,
         handleTriggerKeyDown
     };
-    return createComponent(AccordionContext.Provider, {
+    return createComponent(AccordionContext, {
         value: contextValue,
         get children () {
             var _el$ = _tmpl$();
-            use((node)=>{
-                rootRef = node;
-                if ("function" == typeof local.ref) local.ref(node);
-            }, _el$);
+            ref(()=>(node)=>{
+                    rootRef = node;
+                    if ("function" == typeof p.ref) p.ref(node);
+                }, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], p.class)
                 }), {
                 "data-slot": "accordion",
                 get ["data-selection-mode"] () {
@@ -108,16 +94,16 @@ const __solidLayoutAccordionRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : "false";
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 },
                 get ["aria-disabled"] () {
                     return isDisabled() ? "true" : void 0;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -129,21 +115,13 @@ const AccordionRoot = defineComponent({
 });
 const __solidLayoutAccordionItem = (_stable, p)=>{
     const accordion = useContext(AccordionContext);
-    const [local, others] = splitProps(p, [
-        "value",
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "state",
-        "disabled"
-    ]);
+    const others = omit(p, "value", "children", "class", "dataTheme", "style", "state", "disabled");
     const uniqueId = createUniqueId();
-    const itemValue = ()=>local.value ?? uniqueId;
+    const itemValue = ()=>p.value ?? uniqueId;
     const triggerId = ()=>`accordion-trigger-${uniqueId}`;
     const contentId = ()=>`accordion-content-${uniqueId}`;
     const isExpanded = ()=>accordion?.isItemExpanded(itemValue()) ?? false;
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled) || Boolean(accordion?.isDisabled());
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled) || Boolean(accordion?.isDisabled());
     const toggle = ()=>{
         if (isDisabled()) return;
         accordion?.toggleItem(itemValue());
@@ -156,12 +134,12 @@ const __solidLayoutAccordionItem = (_stable, p)=>{
         isDisabled,
         toggle
     };
-    return createComponent(AccordionItemContext.Provider, {
+    return createComponent(AccordionItemContext, {
         value: itemContextValue,
         get children () {
             var _el$2 = _tmpl$();
             spread(_el$2, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Item.base, isExpanded() && CLASSES.Item.flag.expanded, isDisabled() && CLASSES.Item.flag.disabled, accordion?.hideSeparator() && CLASSES.Item.flag.hideSeparator, local.class)
+                    class: twMerge(CLASSES.Item.base, isExpanded() && CLASSES.Item.flag.expanded, isDisabled() && CLASSES.Item.flag.disabled, accordion?.hideSeparator() && CLASSES.Item.flag.hideSeparator, p.class)
                 }), {
                 "data-slot": "accordion-item",
                 get ["data-expanded"] () {
@@ -171,13 +149,13 @@ const __solidLayoutAccordionItem = (_stable, p)=>{
                     return isDisabled() ? "true" : "false";
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$2, ()=>local.children);
+            }), true);
+            insert(_el$2, ()=>p.children);
             return _el$2;
         }
     });
@@ -190,25 +168,15 @@ const AccordionItem = defineComponent({
 const __solidLayoutAccordionTrigger = (_stable, p)=>{
     const accordion = useContext(AccordionContext);
     const item = useContext(AccordionItemContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onClick",
-        "onKeyDown",
-        "type",
-        "showIndicator",
-        "indicator"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onClick", "onKeyDown", "type", "showIndicator", "indicator");
     const isDisabled = ()=>Boolean(item?.isDisabled());
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented || isDisabled()) return;
         item?.toggle();
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented || isDisabled()) return;
         if ("Enter" === event.key || " " === event.key) {
             event.preventDefault();
@@ -217,58 +185,56 @@ const __solidLayoutAccordionTrigger = (_stable, p)=>{
         }
         accordion?.handleTriggerKeyDown(event, event.currentTarget);
     };
-    return (()=>{
-        var _el$3 = _tmpl$2();
-        spread(_el$3, mergeProps(others, {
-            get id () {
-                return item?.triggerId();
-            },
-            get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Trigger.base, local.class)
-            }), {
-            "data-slot": "accordion-trigger",
-            get ["data-expanded"] () {
-                return item?.isExpanded() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-expanded"] () {
-                return item?.isExpanded() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return item?.contentId();
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : void 0;
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            onClick: handleClick,
-            onKeyDown: handleKeyDown
-        }), false, true);
-        insert(_el$3, ()=>local.children, null);
-        insert(_el$3, createComponent(Show, {
-            get when () {
-                return false !== local.showIndicator;
-            },
-            get children () {
-                return createComponent(AccordionIndicator, {
-                    get children () {
-                        return local.indicator;
-                    }
-                });
-            }
-        }), null);
-        return _el$3;
-    })();
+    var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+    spread(_el$3, mergeProps(others, {
+        get id () {
+            return item?.triggerId();
+        },
+        get type () {
+            return p.type ?? "button";
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.Trigger.base, p.class)
+        }), {
+        "data-slot": "accordion-trigger",
+        get ["data-expanded"] () {
+            return item?.isExpanded() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get ["aria-expanded"] () {
+            return item?.isExpanded() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return item?.contentId();
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : void 0;
+        },
+        get disabled () {
+            return isDisabled();
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+    }), true);
+    insert(_el$3, ()=>p.children, _el$4);
+    insert(_el$3, createComponent(Show, {
+        get when () {
+            return false !== p.showIndicator;
+        },
+        get children () {
+            return createComponent(AccordionIndicator, {
+                get children () {
+                    return p.indicator;
+                }
+            });
+        }
+    }), _el$5);
+    return _el$3;
 };
 const AccordionTrigger = defineComponent({
     recipe: componentRecipe,
@@ -277,56 +243,48 @@ const AccordionTrigger = defineComponent({
 });
 const __solidLayoutAccordionContent = (_stable, p)=>{
     const item = useContext(AccordionItemContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "keepMounted"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "keepMounted");
     const expanded = ()=>Boolean(item?.isExpanded());
-    const keepMounted = ()=>local.keepMounted ?? true;
+    const keepMounted = ()=>p.keepMounted ?? true;
     if (!keepMounted() && !expanded()) return null;
-    return (()=>{
-        var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
-        spread(_el$4, mergeProps(others, {
-            get id () {
-                return item?.contentId();
-            },
-            role: "region"
-        }, ()=>({
-                class: twMerge(CLASSES.Content.base, expanded() && CLASSES.Content.flag.expanded, local.class)
-            }), {
-            "data-slot": "accordion-content",
-            get ["data-expanded"] () {
-                return expanded() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-hidden"] () {
-                return expanded() ? "false" : "true";
-            },
-            get ["aria-labelledby"] () {
-                return item?.triggerId();
-            }
-        }), false, true);
-        spread(_el$5, mergeProps(()=>({
-                class: CLASSES.Body.base
-            }), {
-            "data-slot": "accordion-body"
-        }), false, true);
-        spread(_el$6, mergeProps(()=>({
-                class: CLASSES.BodyInner.base
-            }), {
-            "data-slot": "accordion-body-inner"
-        }), false, true);
-        insert(_el$6, ()=>local.children);
-        return _el$4;
-    })();
+    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild;
+    spread(_el$6, mergeProps(others, {
+        get id () {
+            return item?.contentId();
+        },
+        role: "region"
+    }, ()=>({
+            class: twMerge(CLASSES.Content.base, expanded() && CLASSES.Content.flag.expanded, p.class)
+        }), {
+        "data-slot": "accordion-content",
+        get ["data-expanded"] () {
+            return expanded() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get ["aria-hidden"] () {
+            return expanded() ? "false" : "true";
+        },
+        get ["aria-labelledby"] () {
+            return item?.triggerId();
+        }
+    }), true);
+    spread(_el$7, mergeProps(()=>({
+            class: CLASSES.Body.base
+        }), {
+        "data-slot": "accordion-body"
+    }), true);
+    spread(_el$8, mergeProps(()=>({
+            class: CLASSES.BodyInner.base
+        }), {
+        "data-slot": "accordion-body-inner"
+    }), true);
+    insert(_el$8, ()=>p.children);
+    return _el$6;
 };
 const AccordionContent = defineComponent({
     recipe: componentRecipe,
@@ -335,34 +293,27 @@ const AccordionContent = defineComponent({
 });
 const __solidLayoutAccordionIndicator = (_stable, p)=>{
     const item = useContext(AccordionItemContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style");
     const expanded = ()=>Boolean(item?.isExpanded());
-    return (()=>{
-        var _el$7 = _tmpl$4();
-        spread(_el$7, mergeProps(others, {
-            "aria-hidden": "true"
-        }, ()=>({
-                class: twMerge(CLASSES.Indicator.base, expanded() && CLASSES.Indicator.flag.expanded, local.class)
-            }), {
-            "data-slot": "accordion-indicator",
-            get ["data-expanded"] () {
-                return expanded() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$7, ()=>local.children ?? _tmpl$5());
-        return _el$7;
-    })();
+    var _el$9 = _tmpl$4();
+    spread(_el$9, mergeProps(others, {
+        "aria-hidden": "true"
+    }, ()=>({
+            class: twMerge(CLASSES.Indicator.base, expanded() && CLASSES.Indicator.flag.expanded, p.class)
+        }), {
+        "data-slot": "accordion-indicator",
+        get ["data-expanded"] () {
+            return expanded() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$9, ()=>p.children ?? _tmpl$5());
+    return _el$9;
 };
 const AccordionIndicator = defineComponent({
     recipe: componentRecipe,

package/dist/components/accordion/Accordion.recipe.d.ts

@@ -36,7 +36,7 @@ export declare const CLASSES: {
         readonly base: "accordion__body-inner";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "accordion";
     readonly slots: {
         readonly accordion: {};

package/dist/components/address/Address.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Address.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Size, State, UIBaseProps } from "../vocabulary";
 export type AddressTruncate = "middle" | "none";
 export type AddressProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "onCopy"> & UIBaseProps & {