zabi-components 8.1.0 → 9.0.0

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

@@ -1,11 +1,19 @@
 import { type Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import { type CollapsibleHeadingLevel, type CollapsibleTriggerProps, type CollapsibleTriggerState } from "../util/collapsible.js";
-/** Other attributes (`id`, `data-*`, ...) land on the host `<div>`. */
+/**
+ * A trigger, then a panel of its own that it opens. It is not for a "show
+ * all" under a list: there the control comes after the content, and what
+ * it shows is more items of a list that is already on the screen. For
+ * that, put a `Button` with `aria-expanded` and `aria-controls` under the
+ * list and let the list draw the rest (Z-127).
+ *
+ * Other attributes (`id`, `data-*`, ...) land on the host `<div>`.
+ */
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> & {
     /** Extra classes for the host element. */
     class?: string;
-    /** Extra classes for the default trigger button. */
+    /** Extra classes for the default trigger (a `<summary>`). */
     triggerClass?: string;
     /** Extra classes for the panel. */
     panelClass?: string;
@@ -18,18 +26,27 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title"> & {
      * a group does not close a disabled panel either.
      */
     disabled?: boolean;
-    /** Text of the default trigger, a full-width header button with a chevron. */
+    /**
+     * Text of the default trigger, a full-width header with a chevron. It is
+     * a native `<details>` / `<summary>`, so it opens and closes without
+     * scripts: before hydration, and for a visitor who has none.
+     */
     title?: string;
     /**
      * Your own header, in place of the default trigger. Spread the first
-     * argument on a `<button>`; the second carries the open state.
+     * argument on a `<button>`; the second carries the open state. This
+     * path needs scripts: the button and the `hidden` panel are yours to
+     * wire, and nothing opens until the page has hydrated. Use `title` for
+     * content that must open without scripts.
      */
     trigger?: Snippet<[CollapsibleTriggerProps, CollapsibleTriggerState]>;
     /** Wraps the default trigger in `<h1>`–`<h6>`. No heading when omitted. */
     headingLevel?: CollapsibleHeadingLevel;
     /**
-     * Closed content is kept in the DOM under `hidden`, so a form inside it
-     * keeps its values. Set this to remove the content while closed instead.
+     * Closed content stays in the DOM, inside the closed `<details>`, so a
+     * form inside it keeps its values and still submits them: closed
+     * details content is part of the form. Set this to remove the content
+     * while closed instead.
      */
     unmountOnClose?: boolean;
     /**

package/dist/molecules/CollapsibleGroup.svelte

@@ -2,6 +2,7 @@
     import { setContext, untrack, type Snippet } from "svelte";
     import type { HTMLAttributes } from "svelte/elements";
     import { cn } from "../util/cn.js";
+    import { generateId } from "../util/ssr-safe.js";
     import {
         COLLAPSIBLE_GROUP,
         nextTriggerIndex,
@@ -29,6 +30,9 @@
 
     let hostElement: HTMLDivElement | undefined = $state();
 
+    /** Names the native exclusive accordion of a single-open group. */
+    const exclusiveName = generateId("collapsible-group");
+
     /** In the order the Collapsibles were created. */
     const members = new Set<CollapsibleGroupMember>();
 
@@ -47,6 +51,9 @@
         get multiple() {
             return multiple;
         },
+        get exclusiveName() {
+            return multiple ? undefined : exclusiveName;
+        },
         register(member) {
             // Settled here, while the members initialise, so the first render
             // (the server's included) already shows one open panel.
@@ -91,16 +98,19 @@
         if (!ids.has(target.id)) return;
 
         // Read from the DOM so the order is the visual one. A disabled button
-        // cannot take focus, so it is skipped.
+        // (or a summary marked `aria-disabled`) cannot take focus, so it is skipped.
         const triggers = Array.from(
-            hostElement.querySelectorAll<HTMLButtonElement>(
-                "[data-collapsible-trigger]",
-            ),
-        ).filter((element) => ids.has(element.id) && !element.disabled);
+            hostElement.querySelectorAll<HTMLElement>("[data-collapsible-trigger]"),
+        ).filter(
+            (element) =>
+                ids.has(element.id) &&
+                !(element as HTMLButtonElement).disabled &&
+                element.getAttribute("aria-disabled") !== "true",
+        );
 
         const next = nextTriggerIndex(
             event.key,
-            triggers.indexOf(target as HTMLButtonElement),
+            triggers.indexOf(target),
             triggers.length,
         );
         if (next === null) return;

package/dist/molecules/ConfirmDialog.svelte

@@ -13,6 +13,7 @@
         ConfirmDialogResult,
         ConfirmDialogVariant,
     } from "../util/confirm-dialog.js";
+    import type { ButtonVariant } from "../types/variants.js";
 
     interface Props {
         /** Whether the dialog is shown; supports `bind:open`. */
@@ -25,6 +26,8 @@
         variant?: ConfirmDialogVariant;
         confirmLabel?: string;
         cancelLabel?: string;
+        /** The `Button` variant of the cancel button: `tonal` or `ghost` for an app that has no outline button. */
+        cancelVariant?: ButtonVariant;
         /**
          * The confirm button shows its loading state, cancel is disabled and
          * the dialog cannot be dismissed. Set by the dialog itself while a
@@ -70,6 +73,7 @@
         variant = "info",
         confirmLabel: confirmLabelGiven,
         cancelLabel: cancelLabelGiven,
+        cancelVariant = "outline",
         loading = false,
         loadingLabel = "Working…",
         onconfirm,
@@ -234,7 +238,7 @@
 
     {#snippet footer()}
         <Button
-            variant="outline"
+            variant={cancelVariant}
             disabled={busy}
             onclick={() => cancel("cancel-button")}
             data-confirm-dialog-cancel=""

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

@@ -1,5 +1,6 @@
 import { type Snippet } from "svelte";
 import type { ConfirmDialogCancelReason, ConfirmDialogResult, ConfirmDialogVariant } from "../util/confirm-dialog.js";
+import type { ButtonVariant } from "../types/variants.js";
 interface Props {
     /** Whether the dialog is shown; supports `bind:open`. */
     open?: boolean;
@@ -11,6 +12,8 @@ interface Props {
     variant?: ConfirmDialogVariant;
     confirmLabel?: string;
     cancelLabel?: string;
+    /** The `Button` variant of the cancel button: `tonal` or `ghost` for an app that has no outline button. */
+    cancelVariant?: ButtonVariant;
     /**
      * The confirm button shows its loading state, cancel is disabled and
      * the dialog cannot be dismissed. Set by the dialog itself while a

package/dist/molecules/Drawer.svelte

@@ -121,6 +121,7 @@
     applyDefaults();
     $effect.pre(applyDefaults);
 
+    // Used only where --duration-moderate cannot be read.
     const SLIDE_MS = 200;
 
     const titleId = generateId("drawer-title");
@@ -159,14 +160,14 @@
         }[size] ?? "w-[min(100%,28rem)]",
     );
 
-    /** The border is on the edge that faces the page. */
+    /** The edge the panel is attached to. The rim comes from the material. */
     const sideClasses = $derived(
         {
-            "left": "left-0 border-r",
-            "right": "right-0 border-l",
-            "start": "start-0 border-e",
-            "end": "end-0 border-s",
-        }[side] ?? "right-0 border-l",
+            "left": "left-0",
+            "right": "right-0",
+            "start": "start-0",
+            "end": "end-0",
+        }[side] ?? "right-0",
     );
 
     function close(reason: DrawerCloseReason) {
@@ -179,6 +180,14 @@
         onclose?.({ reason });
     }
 
+    /** `200ms`, `0.2s` or `0s` to milliseconds; the fallback when it is not a time. */
+    function parseDuration(value: string): number {
+        const match = /^\s*(-?\d*\.?\d+)(ms|s)\s*$/.exec(value);
+        if (!match) return SLIDE_MS;
+        const ms = parseFloat(match[1]) * (match[2] === "s" ? 1000 : 1);
+        return ms >= 0 ? ms : SLIDE_MS;
+    }
+
     /** Slides the panel in from its edge. Skipped where motion is unwanted or unsupported. */
     function slideIn(container: HTMLElement) {
         if (typeof container.animate !== "function") return;
@@ -190,10 +199,16 @@
         }
         const rtl = getComputedStyle(container).direction === "rtl";
         const from = resolveDrawerEdge(side, rtl) === "left" ? "-100%" : "100%";
-        container.animate(
-            [{ transform: `translateX(${from})` }, { transform: "translateX(0)" }],
-            { duration: SLIDE_MS, easing: "ease-out" },
-        );
+        // Read from the element so a theme that overrides the tokens is followed.
+        const style = getComputedStyle(container);
+        const duration = parseDuration(style.getPropertyValue("--duration-moderate"));
+        const easing = style.getPropertyValue("--ease-out").trim() || "ease-out";
+        const frames = [{ transform: `translateX(${from})` }, { transform: "translateX(0)" }];
+        try {
+            container.animate(frames, { duration, easing });
+        } catch {
+            container.animate(frames, { duration, easing: "ease-out" });
+        }
     }
 
     $effect(() => {
@@ -296,8 +311,11 @@
 
 {#if isOpen}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- `overflow-clip`, not `hidden` (as in BottomSheet): a clipped box is a
+    scroll container nobody can scroll, and WebKit scrolls one to a focused
+    element while the panel is still off screen. -->
     <div
-        class="group/overlay fixed inset-0 z-modal overflow-hidden {dismissible ? 'cursor-pointer' : 'cursor-default'} bg-overlay"
+        class="group/overlay fixed inset-0 z-modal overflow-clip {dismissible ? 'cursor-pointer' : 'cursor-default'} bg-overlay"
         style:z-index={depth > 0 ? `calc(var(--z-modal) + ${depth})` : undefined}
         data-overlay-depth={depth}
         use:portalTo={portal}
@@ -308,7 +326,10 @@
         <div
             bind:this={panel}
             class={cn(
-                "absolute inset-y-0 flex cursor-default flex-col border-border-overlay bg-surface-overlay shadow-lg",
+                // The glass is a layer behind the content (`::before`), not a filter on
+                // the panel: a backdrop-filter would make the panel the containing
+                // block of every fixed-position popover inside it.
+                "material-layer-thick absolute inset-y-0 flex cursor-default flex-col",
                 // Above the home indicator: the last row, or the footer, ends
                 // where a finger can reach it. Over a keyboard that is under
                 // the keyboard.

package/dist/molecules/Dropdown.svelte

@@ -60,6 +60,8 @@
          * to six `options`, all of it for more. The grip moves it either way.
          */
         sheetSnap?: BottomSheetSnap;
+        /** The sheet is as tall as the list, up to half the screen (BottomSheet `fit`); the grip then only drags. Off by default. */
+        sheetFit?: boolean;
         /** Accessible name of the sheet's close button. */
         sheetCloseLabel?: string;
         /** Accessible name of the sheet's grip while its button takes the sheet up a step. */
@@ -93,6 +95,7 @@
         fullWidth = false,
         sheetTitle = undefined,
         sheetSnap = undefined,
+        sheetFit = false,
         sheetCloseLabel: sheetCloseLabelGiven,
         sheetExpandLabel: sheetExpandLabelGiven,
         sheetCollapseLabel: sheetCollapseLabelGiven,
@@ -562,7 +565,11 @@
             // the corner: within a pixel of concentric.
             // A column, so that the list below can be the part that scrolls
             // when the menu is limited in height.
-            'flex flex-col rounded-overlay border border-border-overlay bg-surface-overlay py-2 shadow-lg transition-[opacity,translate] duration-200 ease-in-out motion-reduce:transition-none',
+            // The layer form of the material: a menu may hold content that
+            // places itself with `position: fixed` (a nested Dropdown, a
+            // Tooltip), and a backdrop-filter on the menu itself would make it
+            // the containing block of that content.
+            'material-layer-thick flex flex-col rounded-overlay py-2 transition-[opacity,translate] duration-(--duration-moderate) ease-standard motion-reduce:transition-none',
             transformClasses(),
         ]
             .join(' ')
@@ -590,6 +597,7 @@
         <BottomSheet
             bind:isOpen
             snap={sheetSnap ?? (options.length > 6 ? 'full' : 'half')}
+            fit={sheetFit}
             title={sheetTitle || ariaLabel}
             closeLabel={sheetCloseLabel}
             expandLabel={sheetExpandLabel}

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

@@ -39,6 +39,8 @@ interface Props {
      * to six `options`, all of it for more. The grip moves it either way.
      */
     sheetSnap?: BottomSheetSnap;
+    /** The sheet is as tall as the list, up to half the screen (BottomSheet `fit`); the grip then only drags. Off by default. */
+    sheetFit?: boolean;
     /** Accessible name of the sheet's close button. */
     sheetCloseLabel?: string;
     /** Accessible name of the sheet's grip while its button takes the sheet up a step. */

package/dist/molecules/DropdownItem.svelte

@@ -69,7 +69,7 @@
     const itemClasses = $derived(
         cn(
             "focus-ring flex w-full items-start justify-start gap-2 rounded-control px-3 py-2 pointer-coarse:py-3 text-start text-sm transition-colors focus:outline-none",
-            tone === "danger" ? "text-error focus-ring--danger" : "text-body",
+            tone === "danger" ? "text-error-text focus-ring--danger" : "text-body",
             disabled
                 ? "cursor-not-allowed"
                 : tone === "danger"