@pathscale/ui 2.4.0 → 2.6.0

package/dist/components/immersive-landing/ImmersiveLandingPage.generated.js

@@ -1,50 +1,44 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import { createMemo, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import { createMemo, omit, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { ImmersiveLandingContext } from "./ImmersiveLandingContext.js";
 import { CLASSES, componentRecipe } from "./ImmersiveLanding.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<section role=region><div>");
+var _tmpl$ = /*#__PURE__*/ template("<section><div>");
 const __solidLayoutImmersiveLandingPage = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "id",
-        "children",
-        "class",
-        "style"
-    ]);
+    const others = omit(p, "id", "children", "class", "style");
     const context = useContext(ImmersiveLandingContext);
-    const isActive = createMemo(()=>context?.activePage() === local.id);
+    const isActive = createMemo(()=>context?.activePage() === p.id);
     const fadeDurationMs = 200;
-    const classes = ()=>twMerge(CLASSES.page.base, isActive() ? CLASSES.page.active : CLASSES.page.inactive, local.class);
-    return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-        spread(_el$, mergeProps({
-            get id () {
-                return local.id;
-            },
-            get ["aria-label"] () {
-                return `${local.id} section`;
-            }
-        }, ()=>({
-                class: classes()
-            }), {
-            get style () {
-                return {
-                    "transition-duration": "200ms",
-                    "transition-delay": isActive() ? `${fadeDurationMs}ms` : "0ms",
-                    ...local.style
-                };
-            },
-            get ["aria-hidden"] () {
-                return !isActive();
-            }
-        }, others), false, true);
-        spread(_el$2, mergeProps(()=>({
-                class: CLASSES.page.content
-            })), false, true);
-        insert(_el$2, ()=>local.children);
-        return _el$;
-    })();
+    const classes = ()=>twMerge(CLASSES.page.base, isActive() ? CLASSES.page.active : CLASSES.page.inactive, p.class);
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+        get id () {
+            return p.id;
+        },
+        role: "region",
+        get ["aria-label"] () {
+            return `${p.id} section`;
+        }
+    }, ()=>({
+            class: classes()
+        }), {
+        get style () {
+            return {
+                "transition-duration": "200ms",
+                "transition-delay": isActive() ? `${fadeDurationMs}ms` : "0ms",
+                ...p.style
+            };
+        },
+        get ["aria-hidden"] () {
+            return isActive() ? void 0 : "true";
+        }
+    }, others), true);
+    spread(_el$2, mergeProps(()=>({
+            class: CLASSES.page.content
+        })), true);
+    insert(_el$2, ()=>p.children);
+    return _el$;
 };
 const ImmersiveLandingPage = defineComponent({
     recipe: componentRecipe,

package/dist/components/immersive-landing/components/CookieConsent.js

@@ -1,9 +1,9 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { Show, createSignal, onCleanup, onMount } from "solid-js";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { Show, createSignal, onCleanup, onSettled } from "solid-js";
 import button_0 from "../../button/index.js";
 import flex from "../../flex/index.js";
 import { CLASSES } from "../ImmersiveLanding.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<p id=cookie-consent-message>"), _tmpl$2 = /*#__PURE__*/ template("<button type=button>"), _tmpl$3 = /*#__PURE__*/ template("<div role=dialog aria-modal=false aria-labelledby=cookie-consent-message><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2 id=cookie-manage-title>"), _tmpl$5 = /*#__PURE__*/ template("<label><span></span><input type=checkbox checked disabled>"), _tmpl$6 = /*#__PURE__*/ template("<label><span></span><input type=checkbox>"), _tmpl$7 = /*#__PURE__*/ template("<div role=dialog aria-modal=true aria-labelledby=cookie-manage-title><div>");
+var _tmpl$ = /*#__PURE__*/ template("<p>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2>"), _tmpl$5 = /*#__PURE__*/ template("<label><span></span><input>"), _tmpl$6 = /*#__PURE__*/ template("<div><div><!><!><!>");
 const defaultTexts = {
     message: "We use cookies to improve your experience. You can accept all cookies or manage your preferences.",
     acceptAll: "Accept all",
@@ -97,7 +97,7 @@ const CookieConsent = (props)=>{
     const handleKeyDown = (e)=>{
         if ("Escape" === e.key && showManage()) handleManageClose();
     };
-    onMount(()=>{
+    onSettled(()=>{
         if (checkConsent()) setShowBanner(true);
         document.addEventListener("keydown", handleKeyDown);
     });
@@ -111,12 +111,16 @@ const CookieConsent = (props)=>{
             },
             get children () {
                 var _el$ = _tmpl$3(), _el$2 = _el$.firstChild;
-                spread(_el$, mergeProps(()=>({
+                spread(_el$, mergeProps({
+                    role: "dialog",
+                    "aria-modal": "false",
+                    "aria-labelledby": "cookie-consent-message"
+                }, ()=>({
                         class: `${CLASSES.cookie.banner}${isClosing() ? ` ${CLASSES.cookie.bannerClosing}` : ""}`
-                    })), false, true);
+                    })), true);
                 spread(_el$2, mergeProps(()=>({
                         class: CLASSES.cookie.container
-                    })), false, true);
+                    })), true);
                 insert(_el$2, createComponent(flex, mergeProps({
                     direction: "col",
                     gap: "md"
@@ -127,9 +131,11 @@ const CookieConsent = (props)=>{
                         return [
                             (()=>{
                                 var _el$3 = _tmpl$();
-                                spread(_el$3, mergeProps(()=>({
+                                spread(_el$3, mergeProps({
+                                    id: "cookie-consent-message"
+                                }, ()=>({
                                         class: CLASSES.cookie.message
-                                    })), false, true);
+                                    })), true);
                                 insert(_el$3, ()=>texts().message);
                                 return _el$3;
                             })(),
@@ -164,11 +170,13 @@ const CookieConsent = (props)=>{
                                         })),
                                         (()=>{
                                             var _el$4 = _tmpl$2();
-                                            spread(_el$4, mergeProps(()=>({
+                                            spread(_el$4, mergeProps({
+                                                type: "button"
+                                            }, ()=>({
                                                     class: CLASSES.cookie.manageButton
                                                 }), {
                                                 onClick: handleManageOpen
-                                            }), false, true);
+                                            }), true);
                                             insert(_el$4, ()=>texts().manage);
                                             return _el$4;
                                         })()
@@ -186,17 +194,21 @@ const CookieConsent = (props)=>{
                 return showManage();
             },
             get children () {
-                var _el$5 = _tmpl$7(), _el$6 = _el$5.firstChild;
-                spread(_el$5, mergeProps(()=>({
+                var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild, _el$15 = _el$6.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.nextSibling;
+                spread(_el$5, mergeProps({
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-labelledby": "cookie-manage-title"
+                }, ()=>({
                         class: CLASSES.cookie.modalBackdrop
                     }), {
                     onClick: handleManageClose
-                }), false, true);
+                }), true);
                 spread(_el$6, mergeProps(()=>({
                         class: CLASSES.cookie.modalCard
                     }), {
                     onClick: (e)=>e.stopPropagation()
-                }), false, true);
+                }), true);
                 insert(_el$6, createComponent(flex, mergeProps({
                     justify: "between",
                     align: "center"
@@ -207,9 +219,11 @@ const CookieConsent = (props)=>{
                         return [
                             (()=>{
                                 var _el$7 = _tmpl$4();
-                                spread(_el$7, mergeProps(()=>({
+                                spread(_el$7, mergeProps({
+                                    id: "cookie-manage-title"
+                                }, ()=>({
                                         class: CLASSES.cookie.modalTitle
-                                    })), false, true);
+                                    })), true);
                                 insert(_el$7, ()=>texts().manageTitle);
                                 return _el$7;
                             })(),
@@ -225,7 +239,7 @@ const CookieConsent = (props)=>{
                             })
                         ];
                     }
-                })), null);
+                })), _el$15);
                 insert(_el$6, createComponent(flex, mergeProps({
                     direction: "col",
                     gap: "md"
@@ -238,57 +252,63 @@ const CookieConsent = (props)=>{
                                 var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
                                 spread(_el$8, mergeProps(()=>({
                                         class: `${CLASSES.cookie.preferenceRow} ${CLASSES.cookie.preferenceRowLocked}`
-                                    })), false, true);
+                                    })), true);
                                 spread(_el$9, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceLabel
-                                    })), false, true);
+                                    })), true);
                                 insert(_el$9, ()=>texts().essential);
-                                spread(_el$0, mergeProps(()=>({
+                                spread(_el$0, mergeProps({
+                                    type: "checkbox",
+                                    checked: true,
+                                    disabled: true
+                                }, ()=>({
                                         class: CLASSES.cookie.toggle
-                                    })), false, false);
+                                    })), false);
                                 return _el$8;
                             })(),
                             (()=>{
-                                var _el$1 = _tmpl$6(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+                                var _el$1 = _tmpl$5(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
                                 spread(_el$1, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceRow
-                                    })), false, true);
+                                    })), true);
                                 spread(_el$10, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceLabel
-                                    })), false, true);
+                                    })), true);
                                 insert(_el$10, ()=>texts().analytics);
-                                _el$11.addEventListener("change", (e)=>setAnalyticsEnabled(e.currentTarget.checked));
                                 spread(_el$11, mergeProps({
+                                    type: "checkbox",
                                     get checked () {
                                         return analyticsEnabled();
-                                    }
+                                    },
+                                    onChange: (e)=>setAnalyticsEnabled(e.currentTarget.checked)
                                 }, ()=>({
                                         class: CLASSES.cookie.toggle
-                                    })), false, false);
+                                    })), false);
                                 return _el$1;
                             })(),
                             (()=>{
-                                var _el$12 = _tmpl$6(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
+                                var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
                                 spread(_el$12, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceRow
-                                    })), false, true);
+                                    })), true);
                                 spread(_el$13, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceLabel
-                                    })), false, true);
+                                    })), true);
                                 insert(_el$13, ()=>texts().marketing);
-                                _el$14.addEventListener("change", (e)=>setMarketingEnabled(e.currentTarget.checked));
                                 spread(_el$14, mergeProps({
+                                    type: "checkbox",
                                     get checked () {
                                         return marketingEnabled();
-                                    }
+                                    },
+                                    onChange: (e)=>setMarketingEnabled(e.currentTarget.checked)
                                 }, ()=>({
                                         class: CLASSES.cookie.toggle
-                                    })), false, false);
+                                    })), false);
                                 return _el$12;
                             })()
                         ];
                     }
-                })), null);
+                })), _el$16);
                 insert(_el$6, createComponent(flex, mergeProps({
                     gap: "sm",
                     justify: "end"
@@ -318,7 +338,7 @@ const CookieConsent = (props)=>{
                             }))
                         ];
                     }
-                })), null);
+                })), _el$17);
                 return _el$5;
             }
         })

package/dist/components/immersive-landing/components/FirefoxPWABanner.js

@@ -1,11 +1,11 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { Show, createSignal, onMount } from "solid-js";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { Show, createSignal, onSettled } from "solid-js";
 import button_0 from "../../button/index.js";
 import card from "../../card/index.js";
 import flex from "../../flex/index.js";
 import icon from "../../icon/index.js";
 import { CLASSES } from "../ImmersiveLanding.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3 id=pwa-unsupported-title>"), _tmpl$3 = /*#__PURE__*/ template("<p>"), _tmpl$4 = /*#__PURE__*/ template("<div aria-labelledby=pwa-unsupported-title>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<p>");
 const defaultTexts = {
     title: "Install App on Firefox",
     description: "Firefox does not support direct app installation. Install our helper extension to enable PWA support.",
@@ -56,7 +56,7 @@ const FirefoxPWABanner = (props)=>{
             props.onInstall?.();
         }
     };
-    onMount(()=>{
+    onSettled(()=>{
         if (checkShouldShow()) setTimeout(()=>setShowBanner(true), 2000);
     });
     return createComponent(Show, {
@@ -64,10 +64,12 @@ const FirefoxPWABanner = (props)=>{
             return showBanner();
         },
         get children () {
-            var _el$ = _tmpl$4();
-            spread(_el$, mergeProps(()=>({
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps({
+                "aria-labelledby": "pwa-unsupported-title"
+            }, ()=>({
                     class: CLASSES.firefoxBanner.dialog
-                })), false, true);
+                })), true);
             insert(_el$, createComponent(card, mergeProps({
                 elevation: "md"
             }, ()=>({
@@ -110,7 +112,7 @@ const FirefoxPWABanner = (props)=>{
                                                 var _el$2 = _tmpl$();
                                                 spread(_el$2, mergeProps(()=>({
                                                         class: CLASSES.firefoxBanner.iconWrap
-                                                    })), false, true);
+                                                    })), true);
                                                 insert(_el$2, createComponent(Show, {
                                                     get when () {
                                                         return "firefox" === browser();
@@ -137,9 +139,11 @@ const FirefoxPWABanner = (props)=>{
                                                     return [
                                                         (()=>{
                                                             var _el$3 = _tmpl$2();
-                                                            spread(_el$3, mergeProps(()=>({
+                                                            spread(_el$3, mergeProps({
+                                                                id: "pwa-unsupported-title"
+                                                            }, ()=>({
                                                                     class: CLASSES.firefoxBanner.title
-                                                                })), false, true);
+                                                                })), true);
                                                             insert(_el$3, ()=>texts().title);
                                                             return _el$3;
                                                         })(),
@@ -147,7 +151,7 @@ const FirefoxPWABanner = (props)=>{
                                                             var _el$4 = _tmpl$3();
                                                             spread(_el$4, mergeProps(()=>({
                                                                     class: CLASSES.firefoxBanner.description
-                                                                })), false, true);
+                                                                })), true);
                                                             insert(_el$4, ()=>texts().description);
                                                             return _el$4;
                                                         })()

package/dist/components/immersive-landing/components/PWAInstallPrompt.js

@@ -1,10 +1,10 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { Show, createSignal, onCleanup, onMount } from "solid-js";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { Show, createSignal, onCleanup, onSettled } from "solid-js";
 import button_0 from "../../button/index.js";
 import card from "../../card/index.js";
 import flex from "../../flex/index.js";
 import { CLASSES } from "../ImmersiveLanding.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><img>"), _tmpl$2 = /*#__PURE__*/ template("<h3 id=pwa-install-title>"), _tmpl$3 = /*#__PURE__*/ template("<p>"), _tmpl$4 = /*#__PURE__*/ template("<div role=dialog aria-modal=false aria-labelledby=pwa-install-title>");
+var _tmpl$ = /*#__PURE__*/ template("<div><img>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<p>"), _tmpl$4 = /*#__PURE__*/ template("<div>");
 const DISMISS_DURATION = 604800000;
 const defaultTexts = {
     title: "Install App",
@@ -66,7 +66,7 @@ const PWAInstallPrompt = (props)=>{
         setShowPrompt(false);
         setDeferredPrompt(null);
     };
-    onMount(()=>{
+    onSettled(()=>{
         window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
         window.addEventListener("appinstalled", handleAppInstalled);
     });
@@ -80,9 +80,13 @@ const PWAInstallPrompt = (props)=>{
         },
         get children () {
             var _el$ = _tmpl$4();
-            spread(_el$, mergeProps(()=>({
+            spread(_el$, mergeProps({
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": "pwa-install-title"
+            }, ()=>({
                     class: CLASSES.pwaPrompt.dialog
-                })), false, true);
+                })), true);
             insert(_el$, createComponent(card, mergeProps({
                 elevation: "md"
             }, ()=>({
@@ -119,7 +123,7 @@ const PWAInstallPrompt = (props)=>{
                                                 var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild;
                                                 spread(_el$2, mergeProps(()=>({
                                                         class: CLASSES.pwaPrompt.appIconWrap
-                                                    })), false, true);
+                                                    })), true);
                                                 spread(_el$3, mergeProps({
                                                     get src () {
                                                         return appIcon();
@@ -129,7 +133,7 @@ const PWAInstallPrompt = (props)=>{
                                                     }
                                                 }, ()=>({
                                                         class: CLASSES.pwaPrompt.appIcon
-                                                    })), false, false);
+                                                    })), false);
                                                 return _el$2;
                                             })(),
                                             createComponent(flex, mergeProps({
@@ -142,9 +146,11 @@ const PWAInstallPrompt = (props)=>{
                                                     return [
                                                         (()=>{
                                                             var _el$4 = _tmpl$2();
-                                                            spread(_el$4, mergeProps(()=>({
+                                                            spread(_el$4, mergeProps({
+                                                                id: "pwa-install-title"
+                                                            }, ()=>({
                                                                     class: CLASSES.pwaPrompt.title
-                                                                })), false, true);
+                                                                })), true);
                                                             insert(_el$4, ()=>texts().title);
                                                             return _el$4;
                                                         })(),
@@ -152,7 +158,7 @@ const PWAInstallPrompt = (props)=>{
                                                             var _el$5 = _tmpl$3();
                                                             spread(_el$5, mergeProps(()=>({
                                                                     class: CLASSES.pwaPrompt.description
-                                                                })), false, true);
+                                                                })), true);
                                                             insert(_el$5, ()=>texts().description);
                                                             return _el$5;
                                                         })()

package/dist/components/immersive-landing/types.d.ts

@@ -1,4 +1,5 @@
-import type { JSX, Accessor } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export interface UseImmersiveLandingOptions {
     pages: readonly string[];

package/dist/components/immersive-landing/useImmersiveLanding.js

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { createEffect, createSignal, onCleanup, onSettled } from "solid-js";
 function useImmersiveLanding(options) {
     const { pages, initialPage = pages[0], currentPage: controlledPage, transitionDuration = 400, onNavigate, onNavigationComplete, enableScrollNavigation = true } = options;
     const isControlled = !!controlledPage;
@@ -57,7 +57,7 @@ function useImmersiveLanding(options) {
         const idx = currentIndex();
         if (idx > 0) navigateToInternal(pages[idx - 1]);
     };
-    onMount(()=>{
+    onSettled(()=>{
         if ("u" < typeof window) return;
         if (!enableScrollNavigation) return;
         let scrollLocked = false;

package/dist/components/input/Input.generated.d.ts

@@ -1,5 +1,6 @@
 import "./Input.css";
-import { type Component, type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { type Component } from "solid-js";
 import type { State, Issue } from "../vocabulary";
 type InputSize = "sm" | "md" | "lg";
 type InputRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {