zabi-components 7.0.2 → 8.1.0

package/dist/molecules/NavigationMenuContent.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
-    import { onMount } from "svelte";
+    import { cn } from "../util/cn.js";
+    import { isInsideToastRegion } from "../util/focus-utils.js";
+    import { measurePlacement, watchViewport } from "../util/fit-in-viewport.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         navigationMenuPanelId,
@@ -10,19 +12,25 @@
 
     interface Props {
         value?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
 
     let {
         value = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
+
     let contentElement = $state<HTMLElement | null>(null);
-    let parentItem = $state<HTMLElement | null>(null);
 
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
@@ -36,42 +44,85 @@
             : "",
     );
 
-    function handleKeydown(event: KeyboardEvent) {
-        if (event.key === "Escape") {
-            event.preventDefault();
-            context?.setActiveItem(null);
-            const trigger = parentItem?.querySelector('[data-navigation-menu-trigger]') as HTMLElement;
-            trigger?.focus();
-        }
-    }
+    /** Room kept between the panel and each side of the screen: its width is the viewport less 16px at most. */
+    const VIEWPORT_MARGIN = 8;
 
-    function handleClickOutside(event: MouseEvent) {
-        if (
-            contentElement &&
-            !contentElement.contains(event.target as Node) &&
-            parentItem &&
-            !parentItem.contains(event.target as Node)
-        ) {
-            context?.setActiveItem(null);
-        }
-    }
+    /**
+     * How far the panel is moved from under the left edge of its item to stay on
+     * screen, and its width limit when it is wider than the screen. The panel
+     * of the second trigger used to span x 182 to 382 in a 375px viewport.
+     */
+    let leftOffset = $state(0);
+    let maxWidth = $state<number | null>(null);
+    /**
+     * Set when a box that scrolls around the menu would cut the panel off: it
+     * is then placed against the viewport with `position: fixed`, which such
+     * a box does not clip, at these coordinates. It stays where it is in the
+     * DOM, so Escape, the outside press and focus work as before.
+     */
+    let fixedAt = $state<{ left: number; top: number; width: number } | null>(null);
 
-    onMount(() => {
-        if (contentElement) {
-            parentItem = contentElement.closest('[data-navigation-menu-item]') as HTMLElement;
-        }
-        if (isActive) {
-            document.addEventListener("mousedown", handleClickOutside);
+    // After the panel is in the DOM and before it is painted, then whenever the screen changes.
+    $effect(() => {
+        if (!isActive || !contentElement) {
+            leftOffset = 0;
+            maxWidth = null;
+            fixedAt = null;
+            return;
         }
+        const panel: HTMLElement = contentElement;
+        const anchor = panel.closest<HTMLElement>("[data-navigation-menu-item]") ?? panel;
+        const update = () => {
+            // The panel always opens below, from the left edge of its item
+            // (`left-0`, in either writing direction, as it always has), and
+            // is slid along that edge only as far as it takes to fit.
+            const fit = measurePlacement(
+                anchor,
+                panel,
+                { block: "bottom", inline: "start" },
+                { margin: VIEWPORT_MARGIN, flipBlock: false, flipInline: false, rtl: false },
+            );
+            leftOffset = fit.inlineOffset;
+            maxWidth = fit.maxWidth;
+            fixedAt = fit.fixed;
+        };
+        update();
+        return watchViewport(update, panel);
     });
 
+    /** Disclosure panel: one document listener while open, removed on close/unmount. */
     $effect(() => {
-        if (isActive) {
-            document.addEventListener("mousedown", handleClickOutside);
-            return () => {
-                document.removeEventListener("mousedown", handleClickOutside);
-            };
+        if (!isActive || !contentElement) return;
+        const panel: HTMLElement = contentElement;
+
+        const parentItem = panel.closest<HTMLElement>(
+            "[data-navigation-menu-item]",
+        );
+
+        function handleClickOutside(event: MouseEvent) {
+            const target = event.target as Node;
+            // A toast lies over the panel; a press on it is for the toast.
+            if (isInsideToastRegion(target)) return;
+            if (!panel.contains(target) && !parentItem?.contains(target)) {
+                context?.setActiveItem(null);
+            }
+        }
+
+        function handleKeydown(event: KeyboardEvent) {
+            if (event.key !== "Escape") return;
+            event.preventDefault();
+            context?.setActiveItem(null);
+            parentItem
+                ?.querySelector<HTMLElement>("[data-navigation-menu-trigger]")
+                ?.focus();
         }
+
+        document.addEventListener("mousedown", handleClickOutside);
+        panel.addEventListener("keydown", handleKeydown);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            panel.removeEventListener("keydown", handleKeydown);
+        };
     });
 </script>
 
@@ -79,11 +130,15 @@
     <div
         bind:this={contentElement}
         id={panelId || undefined}
-        class="absolute left-0 top-full mt-2 bg-card rounded-lg shadow-lg border border-border p-4 z-dropdown min-w-[200px] transition-all duration-200 ease-in-out {className}"
-        role="menu"
-        onkeydown={handleKeydown}
+        class={cn("absolute left-0 top-full mt-2 bg-surface-overlay rounded-overlay shadow-lg border border-border-overlay p-4 z-dropdown min-w-[200px] transition-[opacity,translate] duration-200 ease-in-out", className)}
+        style:position={fixedAt ? "fixed" : undefined}
+        style:top={fixedAt ? `${fixedAt.top}px` : undefined}
+        style:left={fixedAt ? `${fixedAt.left}px` : leftOffset !== 0 ? `${leftOffset}px` : undefined}
+        style:margin={fixedAt ? "0" : undefined}
+        style:width={fixedAt ? `${fixedAt.width}px` : undefined}
+        style:max-width={maxWidth !== null ? `${maxWidth}px` : undefined}
+        style:min-width={maxWidth !== null ? "0" : undefined}
         data-navigation-menu-content
-        tabindex="-1"
         {...restProps}
     >
         {@render children?.()}

package/dist/molecules/NavigationMenuContent.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
     value?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         type NavigationMenuContextValue,
@@ -8,17 +9,24 @@
 
     interface Props {
         value?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
 
     let {
         value = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
+
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -27,8 +35,7 @@
 </script>
 
 <li
-    class="relative {className}"
-    role="none"
+    class={cn("relative", className)}
     data-navigation-menu-item
     data-active={isActive}
     {...restProps}

package/dist/molecules/NavigationMenuItem.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
     value?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuLink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         type NavigationMenuContextValue,
@@ -9,6 +10,8 @@
     interface Props {
         href?: string;
         asChild?: boolean;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
@@ -16,11 +19,16 @@
     let {
         href = "#",
         asChild = false,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
+
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -30,7 +38,7 @@
     }
 
     const linkClasses =
-        "focus-ring focus-ring--nav block cursor-pointer rounded-md px-4 py-2 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover {className}";
+        "focus-ring focus-ring--nav block cursor-pointer rounded-control px-4 py-2 pointer-coarse:py-3 text-sm text-nav-menu-item no-underline transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-nav-menu-active {className}";
 </script>
 
 {#if asChild}

package/dist/molecules/NavigationMenuLink.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from "svelte";
 interface Props {
     href?: string;
     asChild?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuList.svelte

@@ -1,22 +1,37 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
 
     let {
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 </script>
 
+<!-- A list of links and disclosure buttons inside the `<nav>`, which is what
+the WAI-ARIA practices recommend for site navigation. It was `role="menubar"`,
+which promises arrow keys between the items and `menuitem` children; it had
+neither, so a screen reader announced a menu bar that did not behave like one.
+`role="list"` restates what `list-none` makes Safari forget.
+
+`flex-wrap`: a list that does not fit goes onto a further row. It used
+to run out of its container (310px of items in a 215px box at 375px). -->
 <ul
-    class="flex flex-row items-center gap-1 list-none m-0 p-0 {className}"
-    role="menubar"
-    aria-orientation="horizontal"
+    class={cn("flex flex-row flex-wrap items-center gap-1 list-none m-0 p-0", className)}
+    role="list"
     data-navigation-menu-list
     {...restProps}
 >

package/dist/molecules/NavigationMenuList.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 interface Props {
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/NavigationMenuTrigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { getContext } from "svelte";
+    import { cn } from "../util/cn.js";
     import {
         NAVIGATION_MENU_CONTEXT_KEY,
         navigationMenuPanelId,
@@ -9,17 +10,24 @@
 
     interface Props {
         value?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
 
     let {
         value = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
 
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
+
     const context = getContext<NavigationMenuContextValue>(
         NAVIGATION_MENU_CONTEXT_KEY,
     );
@@ -58,10 +66,15 @@
 
 <button
     type="button"
-    class="focus-ring focus-ring--nav inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-transparent px-4 py-2 text-sm font-medium text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover data-[active=true]:bg-nav-menu-active data-[active=true]:text-nav-menu-item-active {className}"
+    class={cn(
+        "focus-ring focus-ring--nav inline-flex cursor-pointer items-center justify-center gap-2 rounded-control bg-transparent px-4 py-2 pointer-coarse:py-3 text-sm font-medium transition-colors duration-150 outline-none",
+        isActive
+            ? "bg-nav-menu-active text-nav-menu-item-active"
+            : "text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-nav-menu-active",
+        className,
+    )}
     aria-expanded={isActive ? 'true' : 'false'}
     aria-controls={panelId || undefined}
-    aria-haspopup="true"
     onclick={handleClick}
     onkeydown={handleKeydown}
     data-navigation-menu-trigger

package/dist/molecules/NavigationMenuTrigger.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
     value?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/Page.svelte

@@ -1,15 +1,51 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { isInsideAppShell } from "../util/app-shell.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         children?: Snippet;
+        /**
+         * Keeps the content out from under a notch at the side (a phone held
+         * sideways) and the home indicator at the bottom, by padding the page
+         * with the safe-area insets. They are zero on a screen without them,
+         * and until the app asks for them with `viewport-fit=cover`.
+         *
+         * Inside an `AppShell` the page adds nothing, whatever this says: the
+         * shell has already kept its content clear. Set it to false when
+         * something else of yours has, such as padding on `<body>`.
+         */
+        safeArea?: boolean;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
     }
 
-    let { children, className = "" }: Props = $props();
+    let {
+        children,
+        safeArea = true,
+        class: classAttr = "",
+        className: legacyClass = "",
+    }: Props = $props();
+
+    const inShell = isInsideAppShell();
+
+    /** `class` is the public prop; `className` is a deprecated alias. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 </script>
 
-<div class="mx-auto w-full space-y-10 {className}">
+<div
+    class={cn(
+        "mx-auto w-full space-y-10",
+        // Left and right, not start and end: a notch is on a side of the
+        // device, whichever way the text runs.
+        safeArea &&
+            !inShell &&
+            "pb-[env(safe-area-inset-bottom,0px)] pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]",
+        className,
+    )}
+    data-safe-area={safeArea && !inShell ? "" : undefined}
+>
     {#if children}
         {@render children()}
     {/if}

package/dist/molecules/Page.svelte.d.ts

@@ -1,6 +1,19 @@
 import type { Snippet } from "svelte";
 interface Props {
     children?: Snippet;
+    /**
+     * Keeps the content out from under a notch at the side (a phone held
+     * sideways) and the home indicator at the bottom, by padding the page
+     * with the safe-area insets. They are zero on a screen without them,
+     * and until the app asks for them with `viewport-fit=cover`.
+     *
+     * Inside an `AppShell` the page adds nothing, whatever this says: the
+     * shell has already kept its content clear. Set it to false when
+     * something else of yours has, such as padding on `<body>`.
+     */
+    safeArea?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
 }
 declare const Page: import("svelte").Component<Props, {}, "">;