@pathscale/ui 3.0.0 → 3.1.0

package/dist/components/connection-settings/ConnectionSettings.recipe.js

@@ -0,0 +1,111 @@
+import { recipe } from "../../lib/layouts/index.js";
+const componentRecipe = recipe({
+    component: "connection-settings",
+    element: "form",
+    slots: {
+        root: {
+            base: "connection-settings"
+        },
+        header: {
+            base: "connection-settings__header"
+        },
+        title: {
+            base: "connection-settings__title"
+        },
+        description: {
+            base: "connection-settings__description"
+        },
+        switch: {
+            base: "connection-settings__switch"
+        },
+        fields: {
+            base: "connection-settings__fields"
+        },
+        field: {
+            base: "connection-settings__field"
+        },
+        label: {
+            base: "connection-settings__label"
+        },
+        input: {
+            base: "connection-settings__input"
+        },
+        hint: {
+            base: "connection-settings__hint"
+        },
+        current: {
+            base: "connection-settings__current"
+        },
+        actions: {
+            base: "connection-settings__actions"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "connection-settings",
+                axes: {}
+            },
+            header: {
+                base: "connection-settings__header",
+                axes: {}
+            },
+            title: {
+                base: "connection-settings__title",
+                axes: {}
+            },
+            description: {
+                base: "connection-settings__description",
+                axes: {}
+            },
+            switch: {
+                base: "connection-settings__switch",
+                axes: {}
+            },
+            fields: {
+                base: "connection-settings__fields",
+                axes: {}
+            },
+            field: {
+                base: "connection-settings__field",
+                axes: {}
+            },
+            label: {
+                base: "connection-settings__label",
+                axes: {}
+            },
+            input: {
+                base: "connection-settings__input",
+                axes: {}
+            },
+            hint: {
+                base: "connection-settings__hint",
+                axes: {}
+            },
+            current: {
+                base: "connection-settings__current",
+                axes: {}
+            },
+            actions: {
+                base: "connection-settings__actions",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 9,
+            header: 5,
+            title: 11,
+            description: 2,
+            switch: 10,
+            fields: 4,
+            field: 3,
+            label: 8,
+            input: 7,
+            hint: 6,
+            current: 1,
+            actions: 0
+        }
+    }
+});
+export { componentRecipe };

package/dist/components/connection-settings/index.d.ts

@@ -0,0 +1,2 @@
+export type { ConnectionSettingsEndpointLabel, ConnectionSettingsLabels, ConnectionSettingsProps, } from "./ConnectionSettings.generated";
+export { ConnectionSettingsLayout as default, ConnectionSettingsLayout as ConnectionSettings, } from "./ConnectionSettings.generated";

package/dist/components/connection-settings/index.js

@@ -0,0 +1 @@
+export { ConnectionSettingsLayout as ConnectionSettings, ConnectionSettingsLayout as default } from "./ConnectionSettings.generated.js";

package/dist/components/dialog/Dialog.generated.js

@@ -3,6 +3,8 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Dialog.css";
 import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
+import { focusFirst } from "../../lib/focus.js";
+import { lockBodyScroll, registerOverlay } from "../../lib/overlay.js";
 import "../_shared/material.css";
 import { CLASSES, componentRecipe } from "./Dialog.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2>"), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
@@ -13,61 +15,7 @@ const useModalContext = ()=>{
     return context;
 };
 const isVisibleState = (state)=>"entering" === state || "open" === state;
-let bodyLockCount = 0;
-let previousBodyOverflow = "";
-let previousBodyPaddingRight = "";
-const lockBodyScroll = ()=>{
-    if (0 === bodyLockCount) {
-        previousBodyOverflow = document.body.style.overflow;
-        previousBodyPaddingRight = document.body.style.paddingRight;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
-        document.body.style.overflow = "hidden";
-    }
-    bodyLockCount += 1;
-};
-const unlockBodyScroll = ()=>{
-    if (bodyLockCount <= 0) return;
-    bodyLockCount -= 1;
-    if (0 === bodyLockCount) {
-        document.body.style.overflow = previousBodyOverflow;
-        document.body.style.paddingRight = previousBodyPaddingRight;
-    }
-};
-const FOCUSABLE_SELECTOR = "a[href],area[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,[contenteditable='true'],[tabindex]:not([tabindex='-1'])";
-const getFocusableElements = (container)=>Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element)=>{
-        if (element.hasAttribute("disabled")) return false;
-        if ("true" === element.getAttribute("aria-hidden")) return false;
-        if (element.tabIndex < 0) return false;
-        return !element.hidden;
-    });
-const trapFocus = (event, container)=>{
-    const focusable = getFocusableElements(container);
-    if (0 === focusable.length) {
-        event.preventDefault();
-        container.focus();
-        return;
-    }
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    const active = document.activeElement;
-    if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-        return;
-    }
-    if (event.shiftKey && (active === first || active === container)) {
-        event.preventDefault();
-        last.focus();
-    }
-};
-const focusFirstElement = (container)=>{
-    const autofocus = container.querySelector("[autofocus]");
-    if (autofocus) return void autofocus.focus();
-    const focusable = getFocusableElements(container);
-    if (focusable.length > 0) return void focusable[0].focus();
-    container.focus();
-};
+const focusFirstElement = focusFirst;
 const __solidLayoutDialogRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "style", "ref", "open", "defaultOpen", "onOpenChange", "isDismissable", "shouldCloseOnEsc", "shouldCloseOnBackdropClick", "placement", "size", "backdrop", "scrollBehavior");
     const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
@@ -107,22 +55,18 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
     onCleanup(()=>{
         if (exitTimer) clearTimeout(exitTimer);
     });
-    let hasScrollLock = false;
+    let releaseScrollLock;
     createTrackedEffect(()=>{
         const shouldLock = isVisibleState(animState());
-        if (shouldLock && !hasScrollLock) {
-            lockBodyScroll();
-            hasScrollLock = true;
-        } else if (!shouldLock && hasScrollLock) {
-            unlockBodyScroll();
-            hasScrollLock = false;
+        if (shouldLock && !releaseScrollLock) releaseScrollLock = lockBodyScroll();
+        else if (!shouldLock && releaseScrollLock) {
+            releaseScrollLock();
+            releaseScrollLock = void 0;
         }
     });
     onCleanup(()=>{
-        if (hasScrollLock) {
-            unlockBodyScroll();
-            hasScrollLock = false;
-        }
+        releaseScrollLock?.();
+        releaseScrollLock = void 0;
     });
     let restoreFocusTarget = null;
     createTrackedEffect(()=>{
@@ -134,20 +78,14 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         queueMicrotask(()=>{
             if (!content.contains(document.activeElement)) focusFirstElement(content);
         });
-        const handleDocumentKeyDown = (event)=>{
-            if (!isVisibleState(animState())) return;
-            if ("Escape" === event.key) {
-                if (false !== p.isDismissable && false !== p.shouldCloseOnEsc) {
-                    event.preventDefault();
-                    setIsOpen(false);
-                }
-                return;
-            }
-            if ("Tab" === event.key) trapFocus(event, content);
-        };
-        document.addEventListener("keydown", handleDocumentKeyDown);
+        const releaseOverlay = registerOverlay({
+            dismissable: ()=>false !== p.isDismissable && false !== p.shouldCloseOnEsc,
+            dismiss: ()=>setIsOpen(false),
+            element: ()=>contentRef() ?? void 0,
+            modal: true
+        });
         return ()=>{
-            document.removeEventListener("keydown", handleDocumentKeyDown);
+            releaseOverlay();
         };
     });
     createTrackedEffect(()=>{

package/dist/components/drawer/Drawer.a11y.d.ts

@@ -6,6 +6,4 @@ export type DrawerAnimState = "entering" | "open" | "exiting" | "closed";
 export type DrawerCloseReason = "escape" | "backdrop" | "trigger" | "api";
 export declare const isSidePlacement: (placement: DrawerPlacement) => placement is "left" | "right";
 export declare const isVisibleState: (state: DrawerAnimState) => state is "open" | "entering";
-export declare const getFocusable: (container: HTMLElement) => HTMLElement[];
-export declare const focusFirst: (container: HTMLElement) => void;
-export declare const trapFocus: (event: KeyboardEvent, container: HTMLElement) => void;
+export { focusFirst, getFocusable, trapFocus } from "../../lib/focus";

package/dist/components/drawer/Drawer.a11y.js

@@ -1,32 +1,4 @@
 const isSidePlacement = (placement)=>"left" === placement || "right" === placement;
 const isVisibleState = (state)=>"entering" === state || "open" === state;
-const FOCUSABLE_SELECTOR = "a[href],area[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[tabindex]:not([tabindex='-1'])";
-const getFocusable = (container)=>Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el)=>!el.hidden && el.tabIndex >= 0 && "true" !== el.getAttribute("aria-hidden"));
-const focusFirst = (container)=>{
-    const autofocus = container.querySelector("[autofocus]");
-    if (autofocus) return void autofocus.focus();
-    const nodes = getFocusable(container);
-    if (nodes.length > 0) return void nodes[0].focus();
-    container.focus();
-};
-const trapFocus = (event, container)=>{
-    const nodes = getFocusable(container);
-    if (0 === nodes.length) {
-        event.preventDefault();
-        container.focus();
-        return;
-    }
-    const first = nodes[0];
-    const last = nodes[nodes.length - 1];
-    const active = document.activeElement;
-    if (!event.shiftKey && active === last) {
-        event.preventDefault();
-        first.focus();
-        return;
-    }
-    if (event.shiftKey && (active === first || active === container)) {
-        event.preventDefault();
-        last.focus();
-    }
-};
-export { focusFirst, getFocusable, isSidePlacement, isVisibleState, trapFocus };
+export { focusFirst, getFocusable, trapFocus } from "../../lib/focus.js";
+export { isSidePlacement, isVisibleState };

package/dist/components/drawer/Drawer.generated.js

@@ -3,32 +3,12 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Drawer.css";
 import { Show, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
+import { lockBodyScroll, registerOverlay } from "../../lib/overlay.js";
 import "../_shared/material.css";
-import { focusFirst, isSidePlacement, isVisibleState, trapFocus } from "./Drawer.a11y.js";
+import { focusFirst, isSidePlacement, isVisibleState } from "./Drawer.a11y.js";
 import { CLASSES, componentRecipe } from "./Drawer.recipe.js";
 import { DrawerContext, useDrawerContext } from "./Drawer.context.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<h2>"), _tmpl$4 = /*#__PURE__*/ template("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ template("<button><!><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<span>"), _tmpl$7 = /*#__PURE__*/ template("<span data-slot=drawer-close>");
-let bodyLockCount = 0;
-let prevBodyOverflow = "";
-let prevBodyPaddingRight = "";
-const lockBodyScroll = ()=>{
-    if (0 === bodyLockCount) {
-        prevBodyOverflow = document.body.style.overflow;
-        prevBodyPaddingRight = document.body.style.paddingRight;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
-        document.body.style.overflow = "hidden";
-    }
-    bodyLockCount += 1;
-};
-const unlockBodyScroll = ()=>{
-    if (bodyLockCount <= 0) return;
-    bodyLockCount -= 1;
-    if (0 === bodyLockCount) {
-        document.body.style.overflow = prevBodyOverflow;
-        document.body.style.paddingRight = prevBodyPaddingRight;
-    }
-};
 const EXIT_MS = 200;
 const __solidLayoutDrawerRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "style", "open", "defaultOpen", "onOpenChange", "placement", "size", "backdrop", "scrollBehavior", "isDismissable", "shouldCloseOnEsc", "shouldCloseOnBackdropClick", "trapFocus", "restoreFocus");
@@ -87,19 +67,18 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
     onCleanup(()=>{
         if (exitTimer) clearTimeout(exitTimer);
     });
-    let hasScrollLock = false;
+    let releaseScrollLock;
     createTrackedEffect(()=>{
         const visible = isVisibleState(animState());
-        if (visible && !hasScrollLock) {
-            lockBodyScroll();
-            hasScrollLock = true;
-        } else if (!visible && hasScrollLock) {
-            unlockBodyScroll();
-            hasScrollLock = false;
+        if (visible && !releaseScrollLock) releaseScrollLock = lockBodyScroll();
+        else if (!visible && releaseScrollLock) {
+            releaseScrollLock();
+            releaseScrollLock = void 0;
         }
     });
     onCleanup(()=>{
-        if (hasScrollLock) unlockBodyScroll();
+        releaseScrollLock?.();
+        releaseScrollLock = void 0;
     });
     let restoreFocusTarget = null;
     createTrackedEffect(()=>{
@@ -113,17 +92,15 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
         queueMicrotask(()=>{
             if (trapFocusEnabled() && !dialog.contains(document.activeElement)) focusFirst(dialog);
         });
-        const onKeyDown = (event)=>{
-            if (!isVisibleState(animState())) return;
-            if ("Escape" === event.key) {
-                event.preventDefault();
-                requestClose("escape");
-                return;
-            }
-            if ("Tab" === event.key && trapFocusEnabled()) trapFocus(event, dialog);
+        const releaseOverlay = registerOverlay({
+            dismissable: ()=>isDismissable() && shouldCloseOnEsc(),
+            dismiss: ()=>requestClose("escape"),
+            element: ()=>dialog,
+            modal: trapFocusEnabled()
+        });
+        return ()=>{
+            releaseOverlay();
         };
-        document.addEventListener("keydown", onKeyDown);
-        return ()=>document.removeEventListener("keydown", onKeyDown);
     });
     createTrackedEffect(()=>{
         if ("closed" !== animState() || !restoreFocusEnabled()) return;

package/dist/components/grid/Grid.generated.js

@@ -1,7 +1,7 @@
 import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Grid.css";
-import { children, merge, omit } from "solid-js";
+import { children, createMemo, merge, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import clsx from "clsx";
 import { mapResponsiveProp } from "../utils.js";
@@ -12,13 +12,13 @@ const __solidLayoutGrid = (_stable, p)=>{
     }, p);
     const rest = omit(merged, "as", "class", "children", "cols", "rows", "flow", "gap", "autoCols", "autoRows");
     const resolvedChildren = children(()=>merged.children);
-    const classes = clsx(CLASSES.base, mapResponsiveProp(merged.cols, CLASSES.cols), mapResponsiveProp(merged.rows, CLASSES.rows), mapResponsiveProp(merged.flow, CLASSES.flow), mapResponsiveProp(merged.gap, CLASSES.gap), mapResponsiveProp(merged.autoCols, CLASSES.autoCols), mapResponsiveProp(merged.autoRows, CLASSES.autoRows), merged.class);
+    const classes = createMemo(()=>clsx(CLASSES.base, mapResponsiveProp(merged.cols, CLASSES.cols), mapResponsiveProp(merged.rows, CLASSES.rows), mapResponsiveProp(merged.flow, CLASSES.flow), mapResponsiveProp(merged.gap, CLASSES.gap), mapResponsiveProp(merged.autoCols, CLASSES.autoCols), mapResponsiveProp(merged.autoRows, CLASSES.autoRows), merged.class));
     return createComponent(Dynamic, mergeProps({
         get component () {
             return merged.as;
         }
     }, ()=>({
-            class: twMerge(classes)
+            class: twMerge(classes())
         }), rest, {
         get children () {
             return resolvedChildren();

package/dist/components/input/Input.css

@@ -88,19 +88,21 @@
   }
 
   .input-control--sm {
-    min-height: 2rem;
+    /* Was 2rem, which is 0.25rem shorter than `Button` at the same declared
+       size. Aligned to the shared scale so a button beside an input matches. */
+    min-height: var(--control-h-sm);
     padding-inline: 0.625rem;
     font-size: 0.75rem;
   }
 
   .input-control--md {
-    min-height: 2.5rem;
+    min-height: var(--control-h-md);
     padding-inline: 0.75rem;
     font-size: 0.875rem;
   }
 
   .input-control--lg {
-    min-height: 2.75rem;
+    min-height: var(--control-h-lg);
     padding-inline: 0.875rem;
     font-size: 1rem;
   }

package/dist/components/input/Input.generated.js

@@ -10,7 +10,7 @@ const InputContext = createContext(null);
 const __solidLayoutInputRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "size", "fullWidth", "state", "issues", "dataTheme");
     const baseId = createUniqueId();
-    const size = ()=>p.size ?? "md";
+    const size = ()=>p.size ?? "sm";
     const isDisabled = ()=>Boolean("disabled" === p.state);
     const isInvalid = ()=>Boolean("invalid" === resolveState(p.state, p.issues));
     const fullWidth = ()=>Boolean(p.fullWidth);
@@ -54,7 +54,7 @@ const InputRoot = defineComponent({
 const __solidLayoutInputField = (_stable, p)=>{
     const ctx = useContext(InputContext);
     const others = omit(p, "class", "size", "state", "disabled", "issues", "fullWidth", "startIcon", "endIcon", "dataTheme", "id", "aria-invalid");
-    const size = ()=>p.size ?? ctx?.size() ?? "md";
+    const size = ()=>p.size ?? ctx?.size() ?? "sm";
     const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled) || Boolean(ctx?.isDisabled());
     const isInvalid = ()=>Boolean("invalid" === resolveState(p.state, p.issues)) || Boolean(p["aria-invalid"]) || Boolean(ctx?.isInvalid());
     const fullWidth = ()=>Boolean(p.fullWidth) || Boolean(ctx?.fullWidth());
@@ -204,7 +204,7 @@ const __solidLayoutInputBase = (_stable, p)=>{
             return p.fullWidth ?? true;
         },
         get state () {
-            return isDisabled() ? "disabled" : void 0;
+            return memo(()=>!!isDisabled())() ? "disabled" : isInvalid() ? "invalid" : void 0;
         },
         get issues () {
             return p.issues;
@@ -220,6 +220,9 @@ const __solidLayoutInputBase = (_stable, p)=>{
                     },
                     get children () {
                         return createComponent(InputLabel, {
+                            get ["for"] () {
+                                return inputId();
+                            },
                             get children () {
                                 return p.label;
                             }

package/dist/components/password-field/PasswordField.generated.d.ts

@@ -18,7 +18,15 @@ export type PasswordFieldProps = UIBaseProps & {
     hideLabel: string;
     value?: string;
     inputRef?: (el: HTMLInputElement) => void;
-    onInput?: (value: string) => void;
+    /**
+     * The new value.
+     *
+     * **Breaking in 3.1.** This was `onInput`, which named the DOM event while
+     * delivering a `string` — so it matched neither the native `onInput` (an
+     * `InputEvent`) nor the rest of the library (`onChange` with a value). It is
+     * `onChange` now, like every other control.
+     */
+    onChange?: (value: string) => void;
     onBlur?: () => void;
     visibleIcon?: JSX.Element;
     hiddenIcon?: JSX.Element;

package/dist/components/password-field/PasswordField.generated.js

@@ -54,7 +54,7 @@ const __solidLayoutPasswordFieldLayout = (_stable, p)=>{
         }), {
         ref: setFieldRef,
         onInput: (event)=>{
-            p.onInput?.(event.currentTarget.value);
+            p.onChange?.(event.currentTarget.value);
         },
         onBlur: ()=>p.onBlur?.(),
         get endIcon () {
@@ -105,7 +105,7 @@ const PasswordFieldLayout = defineComponent({
         "hideLabel",
         "value",
         "inputRef",
-        "onInput",
+        "onChange",
         "onBlur",
         "visibleIcon",
         "hiddenIcon",

package/dist/components/password-field/PasswordField.interactions.d.ts

@@ -53,8 +53,8 @@ export declare const createPasswordFieldInputContract: (params: PasswordFieldInp
     autocomplete: "off" | "current-password" | "new-password" | undefined;
     "aria-describedby": string | undefined;
     value: string | undefined;
-    isDisabled: boolean;
-    isInvalid: boolean;
+    disabled: boolean;
+    state: "invalid" | undefined;
     startIcon: JSX.Element;
     class: string;
 };

package/dist/components/password-field/PasswordField.interactions.js

@@ -11,8 +11,8 @@ const createPasswordFieldInputContract = (params)=>({
         autocomplete: params.autocomplete,
         "aria-describedby": params["aria-describedby"],
         value: params.value,
-        isDisabled: Boolean(params.disabled),
-        isInvalid: Boolean(params.invalid),
+        disabled: Boolean(params.disabled),
+        state: params.invalid ? "invalid" : void 0,
         startIcon: params.startIcon,
         class: twMerge("w-full", params.inputClass)
     });

package/dist/components/popover/Popover.generated.js

@@ -3,6 +3,7 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Popover.css";
 import { Show, createContext, createMemo, createSignal, createTrackedEffect, omit, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
+import { registerOverlay } from "../../lib/overlay.js";
 import "../_shared/material.css";
 import { applyBooleanStateRequest } from "../_shared/controlledState.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
@@ -52,20 +53,22 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
                 focusTrigger: false
             });
         };
-        const handleKeyDown = (event)=>{
-            if (!isOpen()) return;
-            if (false === p.closeOnEscape) return;
-            if ("Escape" !== event.key) return;
-            event.preventDefault();
-            setIsOpen(false, {
-                focusTrigger: true
-            });
-        };
         document.addEventListener("pointerdown", handlePointerDown);
-        document.addEventListener("keydown", handleKeyDown);
         return ()=>{
             document.removeEventListener("pointerdown", handlePointerDown);
-            document.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+    createTrackedEffect(()=>{
+        if (!isOpen()) return;
+        const releaseOverlay = registerOverlay({
+            dismissable: ()=>false !== p.closeOnEscape,
+            dismiss: ()=>setIsOpen(false, {
+                    focusTrigger: true
+                }),
+            element: ()=>contentRef() ?? void 0
+        });
+        return ()=>{
+            releaseOverlay();
         };
     });
     const ctx = {

package/dist/components/radio/Radio.generated.d.ts

@@ -1,13 +1,37 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Radio.css";
 import type { JSX } from "@solidjs/web";
-import type { UIBaseProps, State, Issue } from "../vocabulary";
-export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & UIBaseProps & {
+import type { Issue, State, UIBaseProps } from "../vocabulary";
+export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "onChange"> & UIBaseProps & {
     children?: JSX.Element;
     description?: JSX.Element;
     indicator?: JSX.Element;
     state?: State;
     issues?: Issue[];
+    /**
+     * Whether this radio is now the selected one.
+     *
+     * **Breaking in 3.1**, and the last control left out of it. Switch and
+     * Checkbox were changed to report their new value here while Radio was
+     * still handing over an `Event`, which is the inconsistency the change
+     * existed to remove -- swapping one control for another quietly changed
+     * what the handler received.
+     *
+     * A radio only ever reports `true`: deselection happens by another radio
+     * in the group being chosen, and that one reports itself. Reach for
+     * `RadioGroup`'s `onChange` when the question is which value is selected.
+     *
+     * The native handler is {@link onNativeChange}, and it is still where you
+     * call `preventDefault()`.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The underlying `change` event, before the selection is applied.
+     *
+     * This is the veto: `preventDefault()` here leaves the group as it was and
+     * suppresses {@link onChange}.
+     */
+    onNativeChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
 };
 declare const Radio: __LayoutComponent<RadioProps>;
 export default Radio;

package/dist/components/radio/Radio.generated.js

@@ -4,8 +4,8 @@ import "./Radio.css";
 import { Show, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { RadioGroupContext } from "../radio-group/context.js";
-import { CLASSES, componentRecipe } from "./Radio.recipe.js";
 import { resolveState } from "../vocabulary.js";
+import { CLASSES, componentRecipe } from "./Radio.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$4 = /*#__PURE__*/ template("<label><input><span><span>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -13,7 +13,7 @@ const invokeEventHandler = (handler, event)=>{
 };
 const __solidLayoutRadio = (_stable, p)=>{
     const group = useContext(RadioGroupContext);
-    const others = omit(p, "class", "children", "description", "indicator", "state", "issues", "disabled", "checked", "value", "name", "onChange", "dataTheme", "aria-invalid");
+    const others = omit(p, "class", "children", "description", "indicator", "state", "issues", "disabled", "checked", "value", "name", "onChange", "onNativeChange", "dataTheme", "aria-invalid");
     const value = ()=>null != p.value ? String(p.value) : void 0;
     const isGrouped = ()=>Boolean(group && void 0 !== value());
     const isSelected = ()=>isGrouped() ? group?.value() === value() : Boolean(p.checked);
@@ -23,9 +23,11 @@ const __solidLayoutRadio = (_stable, p)=>{
     const ariaInvalid = ()=>p["aria-invalid"] ?? (isInvalid() ? true : void 0);
     const hasContent = ()=>null != p.children || null != p.description;
     const handleChange = (event)=>{
-        invokeEventHandler(p.onChange, event);
+        invokeEventHandler(p.onNativeChange, event);
         if (event.defaultPrevented) return;
-        if (event.currentTarget.checked && group && void 0 !== value()) group.selectValue(value(), event);
+        const checked = event.currentTarget.checked;
+        if (checked && group && void 0 !== value()) group.selectValue(value(), event);
+        p.onChange?.(checked);
     };
     var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
     spread(_el$, mergeProps(()=>({
@@ -133,7 +135,9 @@ const Radio = defineComponent({
         "description",
         "indicator",
         "state",
-        "issues"
+        "issues",
+        "onChange",
+        "onNativeChange"
     ]
 });
 const Radio_generated = Radio;