@pathscale/ui 1.1.54 → 1.1.55

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

@@ -0,0 +1,11 @@
+export type DrawerPlacement = "top" | "bottom" | "left" | "right";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
+export type DrawerBackdropVariant = "opaque" | "blur" | "transparent";
+export type DrawerScrollBehavior = "inside" | "outside";
+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;

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

@@ -0,0 +1,32 @@
+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 };

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

@@ -1,28 +1,90 @@
 export declare const CLASSES: {
-    readonly slot: {
-        readonly trigger: "drawer__trigger";
-        readonly backdrop: "drawer__backdrop";
-        readonly content: "drawer__content";
-        readonly dialog: "drawer__dialog";
-        readonly header: "drawer__header";
-        readonly heading: "drawer__heading";
-        readonly body: "drawer__body";
-        readonly footer: "drawer__footer";
-        readonly handle: "drawer__handle";
-        readonly closeTrigger: "drawer__close-trigger";
-        readonly closeIcon: "drawer__close-icon";
-    };
-    readonly backdrop: {
-        readonly opaque: "drawer__backdrop--opaque";
-        readonly blur: "drawer__backdrop--blur";
-        readonly transparent: "drawer__backdrop--transparent";
-    };
-    readonly placement: {
-        readonly top: "drawer__content--top";
-        readonly bottom: "drawer__content--bottom";
-        readonly left: "drawer__content--left";
-        readonly right: "drawer__content--right";
-    };
-    readonly closeIconStart: "drawer__close-icon--start";
-    readonly closeIconEnd: "drawer__close-icon--end";
+    readonly Root: {
+        readonly base: "drawer";
+        readonly state: {
+            readonly open: "drawer--open";
+            readonly entering: "drawer--entering";
+            readonly exiting: "drawer--exiting";
+            readonly closed: "drawer--closed";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "drawer__trigger";
+    };
+    readonly Backdrop: {
+        readonly base: "drawer__backdrop";
+        readonly variant: {
+            readonly opaque: "drawer__backdrop--opaque";
+            readonly blur: "drawer__backdrop--blur";
+            readonly transparent: "drawer__backdrop--transparent";
+        };
+        readonly state: {
+            readonly entering: "drawer__backdrop--entering";
+            readonly exiting: "drawer__backdrop--exiting";
+        };
+    };
+    readonly Content: {
+        readonly base: "drawer__content";
+        readonly placement: {
+            readonly top: "drawer__content--top";
+            readonly bottom: "drawer__content--bottom";
+            readonly left: "drawer__content--left";
+            readonly right: "drawer__content--right";
+        };
+        readonly scroll: {
+            readonly inside: "drawer__content--scroll-inside";
+            readonly outside: "drawer__content--scroll-outside";
+        };
+        readonly state: {
+            readonly entering: "drawer__content--entering";
+            readonly exiting: "drawer__content--exiting";
+        };
+    };
+    readonly Dialog: {
+        readonly base: "drawer__dialog";
+        readonly axis: {
+            readonly side: "drawer__dialog--axis-side";
+            readonly edge: "drawer__dialog--axis-edge";
+        };
+        readonly size: {
+            readonly side: {
+                readonly sm: "drawer__dialog--side-sm";
+                readonly md: "drawer__dialog--side-md";
+                readonly lg: "drawer__dialog--side-lg";
+                readonly full: "drawer__dialog--side-full";
+            };
+            readonly edge: {
+                readonly sm: "drawer__dialog--edge-sm";
+                readonly md: "drawer__dialog--edge-md";
+                readonly lg: "drawer__dialog--edge-lg";
+                readonly full: "drawer__dialog--edge-full";
+            };
+        };
+        readonly state: {
+            readonly entering: "drawer__dialog--entering";
+            readonly exiting: "drawer__dialog--exiting";
+        };
+    };
+    readonly Header: {
+        readonly base: "drawer__header";
+    };
+    readonly Heading: {
+        readonly base: "drawer__heading";
+    };
+    readonly Body: {
+        readonly base: "drawer__body";
+    };
+    readonly Footer: {
+        readonly base: "drawer__footer";
+    };
+    readonly Handle: {
+        readonly base: "drawer__handle";
+        readonly bar: "drawer__handle-bar";
+    };
+    readonly CloseTrigger: {
+        readonly base: "drawer__close-trigger";
+        readonly icon: "drawer__close-icon";
+        readonly iconStart: "drawer__close-icon--start";
+        readonly iconEnd: "drawer__close-icon--end";
+    };
 };

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

@@ -1,29 +1,91 @@
 const CLASSES = {
-    slot: {
-        trigger: "drawer__trigger",
-        backdrop: "drawer__backdrop",
-        content: "drawer__content",
-        dialog: "drawer__dialog",
-        header: "drawer__header",
-        heading: "drawer__heading",
-        body: "drawer__body",
-        footer: "drawer__footer",
-        handle: "drawer__handle",
-        closeTrigger: "drawer__close-trigger",
-        closeIcon: "drawer__close-icon"
-    },
-    backdrop: {
-        opaque: "drawer__backdrop--opaque",
-        blur: "drawer__backdrop--blur",
-        transparent: "drawer__backdrop--transparent"
-    },
-    placement: {
-        top: "drawer__content--top",
-        bottom: "drawer__content--bottom",
-        left: "drawer__content--left",
-        right: "drawer__content--right"
-    },
-    closeIconStart: "drawer__close-icon--start",
-    closeIconEnd: "drawer__close-icon--end"
+    Root: {
+        base: "drawer",
+        state: {
+            open: "drawer--open",
+            entering: "drawer--entering",
+            exiting: "drawer--exiting",
+            closed: "drawer--closed"
+        }
+    },
+    Trigger: {
+        base: "drawer__trigger"
+    },
+    Backdrop: {
+        base: "drawer__backdrop",
+        variant: {
+            opaque: "drawer__backdrop--opaque",
+            blur: "drawer__backdrop--blur",
+            transparent: "drawer__backdrop--transparent"
+        },
+        state: {
+            entering: "drawer__backdrop--entering",
+            exiting: "drawer__backdrop--exiting"
+        }
+    },
+    Content: {
+        base: "drawer__content",
+        placement: {
+            top: "drawer__content--top",
+            bottom: "drawer__content--bottom",
+            left: "drawer__content--left",
+            right: "drawer__content--right"
+        },
+        scroll: {
+            inside: "drawer__content--scroll-inside",
+            outside: "drawer__content--scroll-outside"
+        },
+        state: {
+            entering: "drawer__content--entering",
+            exiting: "drawer__content--exiting"
+        }
+    },
+    Dialog: {
+        base: "drawer__dialog",
+        axis: {
+            side: "drawer__dialog--axis-side",
+            edge: "drawer__dialog--axis-edge"
+        },
+        size: {
+            side: {
+                sm: "drawer__dialog--side-sm",
+                md: "drawer__dialog--side-md",
+                lg: "drawer__dialog--side-lg",
+                full: "drawer__dialog--side-full"
+            },
+            edge: {
+                sm: "drawer__dialog--edge-sm",
+                md: "drawer__dialog--edge-md",
+                lg: "drawer__dialog--edge-lg",
+                full: "drawer__dialog--edge-full"
+            }
+        },
+        state: {
+            entering: "drawer__dialog--entering",
+            exiting: "drawer__dialog--exiting"
+        }
+    },
+    Header: {
+        base: "drawer__header"
+    },
+    Heading: {
+        base: "drawer__heading"
+    },
+    Body: {
+        base: "drawer__body"
+    },
+    Footer: {
+        base: "drawer__footer"
+    },
+    Handle: {
+        base: "drawer__handle",
+        bar: "drawer__handle-bar"
+    },
+    CloseTrigger: {
+        base: "drawer__close-trigger",
+        icon: "drawer__close-icon",
+        iconStart: "drawer__close-icon--start",
+        iconEnd: "drawer__close-icon--end"
+    }
 };
 export { CLASSES };

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

@@ -0,0 +1,27 @@
+import type { DrawerAnimState, DrawerBackdropVariant, DrawerCloseReason, DrawerPlacement, DrawerScrollBehavior, DrawerSize } from "./Drawer.a11y";
+export type DrawerContextValue = {
+    isOpen: () => boolean;
+    setIsOpen: (next: boolean) => void;
+    requestClose: (reason: DrawerCloseReason) => void;
+    animState: () => DrawerAnimState;
+    placement: () => DrawerPlacement;
+    size: () => DrawerSize;
+    backdrop: () => DrawerBackdropVariant;
+    scrollBehavior: () => DrawerScrollBehavior;
+    isDismissable: () => boolean;
+    shouldCloseOnEsc: () => boolean;
+    shouldCloseOnBackdropClick: () => boolean;
+    trapFocus: () => boolean;
+    restoreFocus: () => boolean;
+    dialogRef: () => HTMLDivElement | undefined;
+    setDialogRef: (node: HTMLDivElement | undefined) => void;
+    labelledBy: () => string | undefined;
+    setLabelledBy: (id: string | undefined) => void;
+    describedBy: () => string | undefined;
+    setDescribedBy: (id: string | undefined) => void;
+    setPlacementOverride: (value: DrawerPlacement | undefined) => void;
+    setBackdropDismissableOverride: (value: boolean | undefined) => void;
+    setBackdropCloseOnClickOverride: (value: boolean | undefined) => void;
+};
+export declare const DrawerContext: import("solid-js").Context<DrawerContextValue | undefined>;
+export declare const useDrawerContext: () => DrawerContextValue;

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

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const DrawerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useDrawerContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DrawerContext);
+    if (!ctx) throw new Error("Drawer compound components must be used within <Drawer.Root>.");
+    return ctx;
+};
+export { DrawerContext, useDrawerContext };

package/dist/components/drawer/Drawer.css

@@ -1,4 +1,8 @@
 @layer components {
+  .drawer {
+    position: relative;
+  }
+
   /* -------------------------------------------------------------------------------------------------
    * Trigger
    * -----------------------------------------------------------------------------------------------*/
@@ -34,6 +38,15 @@
     transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
   }
 
+  .drawer__backdrop--entering {
+    opacity: 0;
+  }
+
+  .drawer__backdrop--exiting {
+    opacity: 0;
+    transition-duration: 200ms;
+  }
+
   .drawer__backdrop[data-entering="true"] {
     opacity: 0;
   }
@@ -77,6 +90,42 @@
     height: 100dvh;
   }
 
+  .drawer__content--scroll-inside .drawer__dialog {
+    overflow: hidden;
+  }
+
+  .drawer__content--scroll-inside .drawer__body {
+    overflow-y: auto;
+  }
+
+  .drawer__content--scroll-outside {
+    overflow-y: auto;
+  }
+
+  .drawer__content--scroll-outside .drawer__dialog {
+    margin-block: auto;
+  }
+
+  .drawer__content--entering[data-placement="left"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="left"] .drawer__dialog {
+    translate: -100% 0;
+  }
+
+  .drawer__content--entering[data-placement="right"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="right"] .drawer__dialog {
+    translate: 100% 0;
+  }
+
+  .drawer__content--entering[data-placement="top"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="top"] .drawer__dialog {
+    translate: 0 -100%;
+  }
+
+  .drawer__content--entering[data-placement="bottom"] .drawer__dialog,
+  .drawer__content--exiting[data-placement="bottom"] .drawer__dialog {
+    translate: 0 100%;
+  }
+
   .drawer__content--bottom {
     align-items: flex-end;
   }
@@ -117,6 +166,57 @@
     transition: translate var(--drawer-enter-duration) var(--drawer-ease);
   }
 
+  .drawer__dialog--axis-side {
+    height: 100%;
+    border-radius: 0;
+  }
+
+  .drawer__dialog--axis-edge {
+    width: 100%;
+  }
+
+  .drawer__dialog--side-sm {
+    width: 18rem;
+    max-width: 85vw;
+  }
+
+  .drawer__dialog--side-md {
+    width: 20rem;
+    max-width: 85vw;
+  }
+
+  .drawer__dialog--side-lg {
+    width: 24rem;
+    max-width: 90vw;
+  }
+
+  .drawer__dialog--side-full {
+    width: 100vw;
+    max-width: 100vw;
+  }
+
+  .drawer__dialog--edge-sm {
+    max-height: min(40vh, 24rem);
+  }
+
+  .drawer__dialog--edge-md {
+    max-height: min(60vh, 36rem);
+  }
+
+  .drawer__dialog--edge-lg {
+    max-height: 85vh;
+  }
+
+  .drawer__dialog--edge-full {
+    max-height: 100vh;
+    border-radius: 0;
+  }
+
+  .drawer__dialog--entering,
+  .drawer__dialog--exiting {
+    transition-duration: var(--drawer-exit-duration);
+  }
+
   [data-exiting="true"] .drawer__dialog {
     transition-duration: var(--drawer-exit-duration);
   }
@@ -192,7 +292,6 @@
   .drawer__dialog--custom-bg {
     background-color: var(--drawer-dialog-bg, var(--color-base-100));
   }
-
   /* Slide transitions — open state */
   .drawer__content--left .drawer__dialog,
   .drawer__content--right .drawer__dialog,
@@ -201,7 +300,7 @@
     translate: 0 0;
   }
 
-  /* Entering/exiting slide transforms */
+  /* Entering/exiting slide transforms (legacy data-attrs support) */
   .drawer__content--left[data-entering="true"] .drawer__dialog,
   .drawer__content--left[data-exiting="true"] .drawer__dialog {
     translate: -100% 0;
@@ -285,6 +384,7 @@
     padding-bottom: 0.5rem;
   }
 
+  .drawer__handle-bar,
   .drawer__handle > [data-slot="drawer-handle-bar"] {
     height: 0.25rem;
     width: 2.25rem;

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

@@ -1,25 +1,39 @@
 import "./Drawer.css";
 import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-export type DrawerPlacement = "top" | "bottom" | "left" | "right";
-export type DrawerBackdropVariant = "opaque" | "blur" | "transparent";
-export type DrawerRootProps = IComponentBaseProps & {
+import { type DrawerBackdropVariant, type DrawerPlacement, type DrawerScrollBehavior, type DrawerSize } from "./Drawer.a11y";
+export type { DrawerPlacement, DrawerSize, DrawerBackdropVariant, DrawerScrollBehavior, } from "./Drawer.a11y";
+export type DrawerRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
     isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    placement?: DrawerPlacement;
+    size?: DrawerSize;
+    backdrop?: DrawerBackdropVariant;
+    scrollBehavior?: DrawerScrollBehavior;
+    isDismissable?: boolean;
+    shouldCloseOnEsc?: boolean;
+    shouldCloseOnBackdropClick?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
 };
-export type DrawerTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+export type DrawerTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
 };
 export type DrawerBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
     variant?: DrawerBackdropVariant;
+    /** @deprecated Configure dismissability at Drawer.Root `isDismissable` */
     isDismissable?: boolean;
+    /** @deprecated Configure backdrop closing at Drawer.Root `shouldCloseOnBackdropClick` */
+    shouldCloseOnBackdropClick?: boolean;
 };
 export type DrawerContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    /** @deprecated Configure placement at Drawer.Root `placement` */
     placement?: DrawerPlacement;
+    scrollBehavior?: DrawerScrollBehavior;
 };
 export type DrawerDialogSide = "left" | "right";
 export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
@@ -31,29 +45,35 @@ export type DrawerDialogProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "childr
     padding?: string;
     borderWidth?: string;
     borderColor?: string;
+    size?: DrawerSize;
 };
 export type DrawerHeaderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
 };
 export type DrawerHeadingProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    id?: string;
 };
 export type DrawerBodyProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
+    id?: string;
 };
 export type DrawerFooterProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
     children: JSX.Element;
 };
 export type DrawerHandleProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type DrawerCloseTriggerProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
+export type DrawerCloseTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & IComponentBaseProps & {
     children?: JSX.Element;
     startIcon?: JSX.Element;
     endIcon?: JSX.Element;
 };
+export type DrawerCloseProps = {
+    children: JSX.Element;
+};
 declare const DrawerRoot: ParentComponent<DrawerRootProps>;
 declare const DrawerTrigger: Component<DrawerTriggerProps>;
-declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
 declare const DrawerContent: ParentComponent<DrawerContentProps>;
+declare const DrawerBackdrop: ParentComponent<DrawerBackdropProps>;
 declare const DrawerDialog: ParentComponent<DrawerDialogProps>;
 declare const DrawerHeader: ParentComponent<DrawerHeaderProps>;
 declare const DrawerHeading: ParentComponent<DrawerHeadingProps>;
@@ -61,9 +81,6 @@ declare const DrawerBody: ParentComponent<DrawerBodyProps>;
 declare const DrawerFooter: ParentComponent<DrawerFooterProps>;
 declare const DrawerHandle: Component<DrawerHandleProps>;
 declare const DrawerCloseTrigger: Component<DrawerCloseTriggerProps>;
-export type DrawerCloseProps = {
-    children: JSX.Element;
-};
 declare const DrawerClose: ParentComponent<DrawerCloseProps>;
 declare const Drawer: ParentComponent<DrawerRootProps> & {
     Root: ParentComponent<DrawerRootProps>;