@pathscale/ui 3.0.0 → 3.2.0

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.d.ts

@@ -1,5 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Drawer.css";
+import { type ValidComponent } from "solid-js";
 import { type JSX } from "@solidjs/web";
 import "../_shared/material.css";
 import type { Material, UIBaseProps } from "../vocabulary";
@@ -22,6 +23,29 @@ export type DrawerRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children
 };
 export type DrawerTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & UIBaseProps & {
     children: JSX.Element;
+    /**
+     * The component to be the trigger, instead of a bare button.
+     *
+     * `Drawer.Trigger` renders a `button`, which is right when the trigger is
+     * a word or a glyph and wrong when the call site hands it a control:
+     * `<Drawer.Trigger><Button>Menu</Button></Drawer.Trigger>` produced a
+     * `button` wrapping a `button` at an identical box with an identical name,
+     * so every trigger was announced twice and the press by coordinate landed
+     * on the outer one rather than on the control that was written. Nested
+     * interactive content is also invalid HTML.
+     *
+     * `as` makes the control *be* the trigger, so there is one element:
+     *
+     * ```tsx
+     * <Drawer.Trigger as={Button} variant="ghost">Menu</Drawer.Trigger>
+     * ```
+     *
+     * The wiring and anything else written here go to the delegate. The
+     * trigger's own class is a button reset and is dropped, because a control
+     * does not want one; so is `data-slot="drawer-trigger"`, since the
+     * delegate's recipe owns that attribute.
+     */
+    as?: ValidComponent;
 };
 export type DrawerBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children: JSX.Element;

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

@@ -1,34 +1,14 @@
-import { Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { Dynamic, Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 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;
@@ -202,36 +179,66 @@ const DrawerRoot = defineComponent({
     ]
 });
 const __solidLayoutDrawerTrigger = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "onClick");
+    const others = omit(p, "children", "class", "dataTheme", "style", "onClick", "as");
     const ctx = useDrawerContext();
     const handleClick = (event)=>{
         ctx.setIsOpen(true);
         if ("function" == typeof p.onClick) p.onClick(event);
     };
-    var _el$2 = _tmpl$2();
-    spread(_el$2, mergeProps(others, {
-        type: "button",
-        get ["class"] () {
-            return twMerge(CLASSES.Trigger.base, p.class);
-        },
-        "data-slot": "drawer-trigger",
-        get ["data-theme"] () {
-            return p.dataTheme;
+    return createComponent(Show, {
+        get when () {
+            return p.as;
         },
-        get style () {
-            return p.style;
+        get fallback () {
+            var _el$2 = _tmpl$2();
+            spread(_el$2, mergeProps(others, {
+                type: "button",
+                get ["class"] () {
+                    return twMerge(CLASSES.Trigger.base, p.class);
+                },
+                "data-slot": "drawer-trigger",
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                onClick: handleClick
+            }), true);
+            insert(_el$2, ()=>p.children);
+            return _el$2;
         },
-        onClick: handleClick
-    }), true);
-    insert(_el$2, ()=>p.children);
-    return _el$2;
+        get children () {
+            return createComponent(Dynamic, mergeProps({
+                get component () {
+                    return p.as;
+                }
+            }, others, {
+                type: "button",
+                get ["class"] () {
+                    return p.class;
+                },
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                onClick: handleClick,
+                get children () {
+                    return p.children;
+                }
+            }));
+        }
+    });
 };
 const DrawerTrigger = defineComponent({
     recipe: componentRecipe,
     layout: __solidLayoutDrawerTrigger,
     embedded: true,
     behaviour: [
-        "children"
+        "children",
+        "as"
     ]
 });
 const __solidLayoutDrawerContent = (_stable, p)=>{

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/icon/Icon.generated.d.ts

@@ -19,5 +19,20 @@ export type IconProps = UIBaseProps & {
     width?: number;
     height?: number;
     flavor?: Flavor;
+    /**
+     * What this icon means, for an icon that carries meaning on its own.
+     *
+     * Most icons sit beside a label that already says it, and repeating it makes
+     * a reader hear the same thing twice; those stay hidden, which is the
+     * default and stays the default. The ones that need this are the icons that
+     * *are* the label: a status glyph in a table cell, a lone mark in a square
+     * button, a trend arrow next to a bare number.
+     *
+     * Setting it swaps `aria-hidden="true"` for `role="img"` and this name. The
+     * default was right and there was simply no way off it: `aria-hidden` was
+     * written straight into the markup, so it survived any `aria-label` a call
+     * site passed through and the icon stayed out of the tree regardless.
+     */
+    label?: string;
 };
 export declare const IconLayout: __LayoutComponent<IconProps>;

package/dist/components/icon/Icon.generated.js

@@ -21,7 +21,15 @@ const __solidLayoutIconLayout = (_stable, p)=>(()=>{
             get ["data-source"] () {
                 return "string" == typeof p.src ? "preload" : "svg";
             },
-            "aria-hidden": "true"
+            get role () {
+                return p.label ? "img" : void 0;
+            },
+            get ["aria-label"] () {
+                return p.label;
+            },
+            get ["aria-hidden"] () {
+                return p.label ? void 0 : "true";
+            }
         }), true);
         insert(_el$, createComponent(Show, {
             get when () {
@@ -53,7 +61,8 @@ const IconLayout = defineComponent({
         "src",
         "width",
         "height",
-        "flavor"
+        "flavor",
+        "label"
     ]
 });
 export { IconLayout };

package/dist/components/immersive-landing/ImmersiveLanding.css

@@ -358,7 +358,7 @@
   .immersive-landing-cookie__manage-button {
     border: 0;
     background: transparent;
-    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    color: var(--color-base-content);
     font-size: 0.875rem;
     text-decoration: underline;
     cursor: pointer;

package/dist/components/immersive-landing/components/CookieConsent.interactions.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Whether a press on the preferences backdrop should dismiss the dialog.
+ *
+ * The backdrop closes the dialog and is an ancestor of the panel, so every
+ * press inside the panel reaches it too. The panel guarded itself the usual
+ * way, with `stopPropagation()` on its own click handler, and that guard does
+ * not hold in the browser engine the fleet ships: `stopPropagation` is defined
+ * there, but event dispatch is deferred, so the host has finished propagating
+ * before it calls into the page and the call is a no-op. The engine expresses
+ * the same intent as a flag fixed when the listener is registered, which means
+ * no runtime call can ever express it. Measured on two sites: pressing
+ * Analytics or Marketing closed the whole dialog, so no category could be
+ * changed at all.
+ *
+ * Comparing the press target against the element the handler is bound to needs
+ * nothing from the engine beyond the two properties every event already
+ * carries. A press that started inside the panel reports the panel, or
+ * something under it, as its target, and only a press that landed on the
+ * backdrop itself reports the backdrop.
+ */
+export declare const dismissesOnBackdropPress: (event: {
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+}) => boolean;

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

@@ -0,0 +1,2 @@
+const dismissesOnBackdropPress = (event)=>event.target === event.currentTarget;
+export { dismissesOnBackdropPress };