zabi-components 7.0.2 → 8.1.0

package/dist/organisms/SidebarNavigation.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { SidebarDrawerCloseReason, SidebarTriggerContext } from "./SidebarShell.svelte";
 import type { Snippet } from "svelte";
 import type { Component } from "svelte";
 import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+import { type SidebarNavigationStrings } from "../util/sidebar.js";
 export interface SidebarNavigationItem {
     id: string;
     label: string;
@@ -21,6 +23,14 @@ interface Props {
     items?: SidebarNavigationItem[];
     currentPath?: string;
     ariaLabel?: string;
+    /**
+     * The words the sidebar says by itself, for another language: the
+     * names of its lists, the two lines shown when a search finds
+     * nothing, and those of the footer and the brand header in it.
+     */
+    strings?: Partial<SidebarNavigationStrings>;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     logoSrc?: string;
     logoAlt?: string;
@@ -59,7 +69,27 @@ interface Props {
     profilePanel?: Snippet;
     /** Parent nav href to highlight when `currentPath` is a deeper leaf (e.g. category row). */
     activePrimaryHref?: string;
+    /**
+     * What the sidebar is below the `lg` breakpoint. `drawer`: the rail is
+     * hidden there and the sidebar opens in a Drawer from the start edge.
+     * This and the six props after it are SidebarShell's; see there.
+     */
+    mobile?: "none" | "drawer";
+    /** Whether the drawer is open. Bindable. */
+    isOpen?: boolean;
+    /** The button that opens the drawer, rendered in the rail's place below `lg`. */
+    trigger?: Snippet<[SidebarTriggerContext]>;
+    /** Heading of the drawer. Without it, `ariaLabel` is. */
+    drawerTitle?: string;
+    /** Accessible name of the drawer's close button. */
+    closeLabel?: string;
+    /** Fired when the drawer closes itself, with why. */
+    onclose?: (detail: {
+        reason: SidebarDrawerCloseReason;
+    }) => void;
+    /** Accessible name of the scrolling region between header and footer. */
+    label?: string;
 }
-declare const SidebarNavigation: Component<Props, {}, "isLightMode" | "searchValue">;
+declare const SidebarNavigation: Component<Props, {}, "isOpen" | "isLightMode" | "searchValue">;
 type SidebarNavigation = ReturnType<typeof SidebarNavigation>;
 export default SidebarNavigation;

package/dist/organisms/SidebarPanel.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+    import { zabiCommonStrings } from "../util/zabi-strings.js";
     import Input from "../atoms/Input.svelte";
     import Badge from "../atoms/Badge.svelte";
-    import { Search, X } from "@lucide/svelte";
+    import Search from "@lucide/svelte/icons/search";
+    import X from "@lucide/svelte/icons/x";
     import type { Component } from "svelte";
+    import { cn } from "../util/cn.js";
 
     export interface SidebarPanelItem {
         id: string;
@@ -13,6 +16,8 @@
     }
 
     interface Props {
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         widthClass?: string;
         variant?: "plain" | "elevated";
@@ -35,17 +40,18 @@
     }
 
     let {
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         widthClass = "w-80",
         variant = "elevated",
         ariaLabel = "Picker panel",
         title = "Items",
         subtitle = "Choose an item to continue",
         showSearch = true,
-        searchPlaceholder = "Search...",
-        searchValue = $bindable(""),
+        searchPlaceholder: searchPlaceholderGiven,
+        searchValue = $bindable<Exclude<Props["searchValue"], undefined>>(),
         items = [],
-        selectedItemId = $bindable(""),
+        selectedItemId = $bindable<Exclude<Props["selectedItemId"], undefined>>(),
         emptyStateTitle = "No matches",
         emptyStateDescription = "Try a different keyword.",
         emptyStateActionLabel = "",
@@ -57,6 +63,26 @@
         ...restProps
     }: Props = $props();
 
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (searchValue === undefined) searchValue = "";
+        if (selectedItemId === undefined) selectedItemId = "";
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    /** Words many components share: a `ZabiStringsProvider` above this one may give them; else English. */
+    const common = zabiCommonStrings();
+    const searchPlaceholder = $derived(searchPlaceholderGiven ?? common().search);
+
+    /** `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 normalizedSearchTerm = $derived(searchValue.trim().toLowerCase());
     const filteredItems = $derived(
         normalizedSearchTerm
@@ -71,19 +97,22 @@
     const containerClasses = $derived.by(() => {
         const resolvedWidthClass = widthClass.trim() || "w-80";
         const shell = isElevated
-            ? "rounded-3xl border border-border bg-card text-headline shadow-md ring-1 ring-border/50"
-            : "rounded-3xl border border-border bg-card text-headline shadow-sm";
-        return `${resolvedWidthClass} shrink-0 p-5 ${shell} ${className}`.trim();
+            ? "rounded-container border border-border bg-card text-headline shadow-sm ring-1 ring-border"
+            : "rounded-container border border-border bg-card text-headline shadow-sm";
+        return cn(`${resolvedWidthClass} shrink-0 p-5 ${shell} ${className}`);
     });
 
     function getItemClasses(itemId: string): string {
         const isActive = selectedItemId === itemId;
         const baseClasses =
-            "focus-ring focus-ring--nav w-full cursor-pointer rounded-lg px-3 py-2.5 text-left transition-colors duration-150";
+            "focus-ring focus-ring--nav w-full cursor-pointer rounded-control px-3 py-2 text-left transition-colors duration-150";
         if (isActive) {
-            return `${baseClasses} bg-nav-menu-active text-inherit shadow-sm ring-1 ring-border/80`;
+            // The fill, the shadow and the ring are all dropped in forced
+            // colours; an outline is drawn there, so the selected item keeps
+            // a shape of its own.
+            return `${baseClasses} bg-nav-menu-active text-inherit shadow-sm ring-1 ring-border forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2`;
         }
-        return `${baseClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
+        return `${baseClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-surface-active`;
     }
 
     function handleSelect(item: SidebarPanelItem): void {
@@ -116,7 +145,7 @@
         </div>
         <button
             type="button"
-            class="-mr-0.5 -mt-0.5 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg text-nav-menu-item transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover focus-ring focus-ring--nav"
+            class="-mr-0.5 -mt-0.5 inline-flex size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-control text-nav-menu-item transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-nav-menu-active focus-ring focus-ring--nav"
             aria-label={closeLabel}
             onclick={handleClose}
         >
@@ -137,7 +166,7 @@
                 bind:value={searchValue}
                 placeholder={searchPlaceholder}
                 aria-label={searchPlaceholder}
-                class="w-full min-w-0 min-h-10 rounded-xl border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-border/60 hover:!bg-nav-menu-hover focus:!bg-transparent focus-ring focus-ring--nav"
+                class="w-full min-w-0 min-h-10 pointer-coarse:min-h-11 rounded-container border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-input-border hover:!bg-nav-menu-hover focus:!bg-transparent focus-ring focus-ring--nav"
             />
         </div>
     {/if}
@@ -154,7 +183,7 @@
                         aria-selected={selectedItemId === item.id}
                     >
                         <span class="flex items-center justify-between gap-3">
-                            <span class="flex min-w-0 items-start gap-2.5">
+                            <span class="flex min-w-0 items-start gap-3">
                                 {#if item.icon}
                                     {@const Icon = item.icon}
                                     <span
@@ -189,14 +218,14 @@
         </ul>
     {:else}
         <div
-            class="rounded-xl border border-dashed border-border bg-transparent px-3.5 py-4 ring-1 ring-border/40"
+            class="rounded-container border border-dashed border-border bg-transparent px-4 py-4"
         >
             <h4 class="text-sm font-semibold text-headline">{emptyStateTitle}</h4>
             <p class="mt-1 text-sm leading-relaxed text-description">{emptyStateDescription}</p>
             {#if emptyStateActionLabel.trim() && onEmptyStateAction}
                 <button
                     type="button"
-                    class="mt-3 inline-flex min-h-10 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm font-medium text-action-primary transition-colors hover:bg-action-primary-hover focus-ring focus-ring--nav"
+                    class="mt-3 inline-flex min-h-10 pointer-coarse:min-h-11 cursor-pointer items-center rounded-control bg-action-primary px-3 py-2 text-sm font-medium text-action-primary transition-colors hover:bg-action-primary-hover focus-ring focus-ring--nav"
                     onclick={handleEmptyStateAction}
                 >
                     {emptyStateActionLabel.trim()}

package/dist/organisms/SidebarPanel.svelte.d.ts

@@ -10,6 +10,8 @@ export interface SidebarPanelItem {
     badgeText?: string;
 }
 interface Props {
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     widthClass?: string;
     variant?: "plain" | "elevated";

package/dist/organisms/SidebarShell.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+    import { zabiCommonStrings } from "../util/zabi-strings.js";
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Drawer from "../molecules/Drawer.svelte";
+    import { cn } from "../util/cn.js";
+    import type { DrawerCloseReason } from "../util/drawer.js";
+
+    /**
+     * The chrome of a sidebar and nothing else: width, surface, collapse
+     * behaviour, the inset its regions share, and a scroll container for the
+     * middle.
+     *
+     * `SidebarNavigation` is a fully-specified sidebar driven by ~44 props —
+     * excellent when your sidebar looks like that one, useless when it does
+     * not, because the parts are not reachable. This is the same shell with
+     * the regions left open, so you can drop in `SidebarBrandHeader`,
+     * `SidebarNavSection` and `SidebarFooter` (or your own markup) and skip
+     * the props you would never set.
+     *
+     * `SidebarNavigation` is built on it, so the two cannot drift apart.
+     *
+     * ```svelte
+     * <SidebarShell mode="collapsed">
+     *     {#snippet header({ collapsed })}
+     *         <SidebarBrandHeader {collapsed} brandName="Zabi" />
+     *     {/snippet}
+     *     <SidebarNavSection title="Main" sectionKey="main">…</SidebarNavSection>
+     *     {#snippet footer({ collapsed, insetX })}
+     *         <SidebarFooter {collapsed} className={insetX} />
+     *     {/snippet}
+     * </SidebarShell>
+     * ```
+     *
+     * A sidebar is 266px wide, which a phone does not have beside its
+     * content. With `mobile="drawer"` the rail is only there from the `lg`
+     * breakpoint (1024px) up; below it the same regions open in a Drawer from
+     * the start edge, with the Drawer's focus trap, Escape and backdrop:
+     *
+     * ```svelte
+     * <SidebarShell mobile="drawer" bind:isOpen drawerTitle="Menu">
+     *     {#snippet trigger({ props, toggle })}
+     *         <IconButton label="Menu" onclick={toggle} {...props}><Menu /></IconButton>
+     *     {/snippet}
+     *     …
+     * </SidebarShell>
+     * ```
+     *
+     * `trigger` is rendered where the rail would be, below `lg` only; leave
+     * it out and open the drawer from a button of your own by setting
+     * `isOpen`. The drawer closes when a link in it is followed.
+     */
+
+    /** What the `trigger` snippet gets. */
+    export interface SidebarTriggerContext {
+        isOpen: boolean;
+        toggle: () => void;
+        /** Spread on the button: it says what the button opens, and whether it is open. */
+        props: { "aria-haspopup": "dialog"; "aria-expanded": boolean };
+    }
+
+    /** What closed the drawer: the user, a link that was followed, or the screen reaching `lg`. */
+    export type SidebarDrawerCloseReason = DrawerCloseReason | "navigate" | "resize";
+
+    /** Passed to every region so it can match the shell's collapse and inset. */
+    export interface SidebarRegionContext {
+        collapsed: boolean;
+        /** Horizontal padding utility the shell's own regions use. */
+        insetX: string;
+    }
+
+    // `children` here is a snippet that takes the region context; the one in
+    // `HTMLAttributes` takes nothing, and the two together accepted neither.
+    type Props = Omit<HTMLAttributes<HTMLElement>, "class" | "onclose" | "children"> & {
+        mode?: "expanded" | "collapsed";
+        /** `rail` attaches to the viewport edge; `card` is a floating panel. */
+        layout?: "rail" | "card";
+        ariaLabel?: string;
+        /** Accessible name of the scrolling region between header and footer. */
+        label?: string;
+        /**
+         * What the sidebar is below the `lg` breakpoint. `none`: the rail, as
+         * everywhere. `drawer`: the rail is hidden there and its regions open
+         * in a Drawer from the start edge instead.
+         */
+        mobile?: "none" | "drawer";
+        /** Whether the drawer is open. Bindable. Only used with `mobile="drawer"`. */
+        isOpen?: boolean;
+        /** Heading of the drawer, and its accessible name. Without it, `ariaLabel` is. */
+        drawerTitle?: string;
+        /** Accessible name of the drawer's close button. */
+        closeLabel?: string;
+        /** Fired when the drawer closes itself, with why. */
+        onclose?: (detail: { reason: SidebarDrawerCloseReason }) => void;
+        /**
+         * The button that opens the drawer, rendered in the rail's place below
+         * `lg`. Optional: a button anywhere that sets `isOpen` does the same.
+         */
+        trigger?: Snippet<[SidebarTriggerContext]>;
+        class?: string;
+        /** @deprecated use `class`. */
+        className?: string;
+        /** Brand row, search — anything above the scrolling nav area. */
+        header?: Snippet<[SidebarRegionContext]>;
+        /** The scrolling middle. */
+        children?: Snippet<[SidebarRegionContext]>;
+        /** Account row, logout, theme toggle. Outside the scroll container. */
+        footer?: Snippet<[SidebarRegionContext]>;
+    };
+
+    let {
+        mode = "expanded",
+        layout = "rail",
+        ariaLabel = "Sidebar navigation",
+        label = "Navigation links",
+        mobile = "none",
+        isOpen = $bindable<Exclude<Props["isOpen"], undefined>>(),
+        drawerTitle = undefined,
+        closeLabel: closeLabelGiven,
+        onclose,
+        trigger,
+        class: classAttr = "",
+        className: legacyClass = "",
+        header,
+        children,
+        footer,
+        ...restProps
+    }: Props = $props();
+
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (isOpen === undefined) isOpen = false;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    /** Words many components share: a `ZabiStringsProvider` above this one may give them; else English. */
+    const common = zabiCommonStrings();
+    const closeLabel = $derived(closeLabelGiven ?? common().close);
+
+    const className = $derived(cn(classAttr, legacyClass));
+    const isCollapsed = $derived(mode === "collapsed");
+    const isCard = $derived(layout === "card");
+
+    const insetX = $derived(isCollapsed ? "px-2" : "px-4");
+
+    const containerClasses = $derived.by(() => {
+        const widthClass = isCollapsed ? "w-[72px]" : "w-[266px]";
+        const railSurface = "border-r border-border bg-background text-headline";
+        const cardSurface =
+            "border-r border-border bg-background text-headline shadow-sm";
+        const surfaceClasses = isCard ? cardSurface : railSurface;
+        const verticalPad = isCard ? "py-4" : "py-5";
+        // `flex` and `max-lg:hidden` must not both apply below `lg`: with
+        // the drawer mode the rail is a flex box from `lg` up only.
+        const display = asDrawer ? "hidden lg:flex" : "flex";
+        const baseClasses = `${display} h-full min-h-0 max-h-full flex-col overflow-visible ${verticalPad}`;
+
+        return cn(`${baseClasses} ${widthClass} ${surfaceClasses} ${className}`);
+    });
+
+    const region = $derived({ collapsed: isCollapsed, insetX });
+
+    const asDrawer = $derived(mobile === "drawer");
+    /** In the drawer the sidebar is always spelled out, and the drawer's own padding is the inset. */
+    const drawerRegion: SidebarRegionContext = { collapsed: false, insetX: "px-0" };
+
+    function closeDrawer(reason: SidebarDrawerCloseReason) {
+        if (!isOpen) return;
+        isOpen = false;
+        onclose?.({ reason });
+    }
+
+    // From `lg` up the rail is there: a drawer left open would cover it.
+    $effect(() => {
+        if (!asDrawer || typeof window.matchMedia !== "function") return;
+        const wide = window.matchMedia("(min-width: 1024px)");
+        const onChange = () => {
+            if (wide.matches) closeDrawer("resize");
+        };
+        onChange();
+        wide.addEventListener("change", onChange);
+        return () => wide.removeEventListener("change", onChange);
+    });
+
+    /** A link in the drawer was followed: the page it leads to is behind the drawer. */
+    function handleDrawerClick(event: MouseEvent) {
+        if (!(event.target instanceof Element)) return;
+        if (event.target.closest("a[href]")) closeDrawer("navigate");
+    }
+
+    const triggerContext = $derived<SidebarTriggerContext>({
+        isOpen,
+        toggle: () => (isOpen ? closeDrawer("close-button") : (isOpen = true)),
+        props: { "aria-haspopup": "dialog", "aria-expanded": isOpen },
+    });
+</script>
+
+{#snippet regions(context: SidebarRegionContext, inDrawer: boolean)}
+    <div class={cn("flex w-full min-w-0 flex-col", !inDrawer && "min-h-0 flex-1")}>
+        {#if header}
+            <div class={cn("flex w-full shrink-0 flex-col gap-5 pb-3", context.insetX)}>
+                {@render header(context)}
+            </div>
+        {/if}
+
+        <!-- In the drawer the drawer's body scrolls, so this region does not. -->
+        <div
+            class={cn(
+                "flex min-w-0 flex-col gap-3 pt-4 pb-2",
+                !inDrawer &&
+                    "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain",
+                context.insetX,
+            )}
+            role="region"
+            aria-label={label}
+        >
+            {@render children?.(context)}
+        </div>
+    </div>
+
+    {#if footer}
+        {@render footer(context)}
+    {/if}
+{/snippet}
+
+<nav class={containerClasses} aria-label={ariaLabel} {...restProps}>
+    {@render regions(region, false)}
+</nav>
+
+{#if asDrawer}
+    {#if trigger}
+        <div class="lg:hidden" data-sidebar-trigger>
+            {@render trigger(triggerContext)}
+        </div>
+    {/if}
+    <!-- The same regions, in a Drawer. Rendered only while it is open, so
+    nothing of the sidebar is in the page twice until then, and the server
+    renders the rail alone. -->
+    <Drawer
+        bind:isOpen
+        side="start"
+        size="sm"
+        title={drawerTitle || ariaLabel}
+        {closeLabel}
+        onclose={(detail) => onclose?.(detail)}
+        class="lg:hidden"
+    >
+        <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+        <nav
+            class="flex w-full min-w-0 flex-col text-headline"
+            aria-label={ariaLabel}
+            data-sidebar-drawer
+            onclick={handleDrawerClick}
+        >
+            {@render regions(drawerRegion, true)}
+        </nav>
+    </Drawer>
+{/if}

package/dist/organisms/SidebarShell.svelte.d.ts

@@ -0,0 +1,106 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { DrawerCloseReason } from "../util/drawer.js";
+/**
+ * The chrome of a sidebar and nothing else: width, surface, collapse
+ * behaviour, the inset its regions share, and a scroll container for the
+ * middle.
+ *
+ * `SidebarNavigation` is a fully-specified sidebar driven by ~44 props —
+ * excellent when your sidebar looks like that one, useless when it does
+ * not, because the parts are not reachable. This is the same shell with
+ * the regions left open, so you can drop in `SidebarBrandHeader`,
+ * `SidebarNavSection` and `SidebarFooter` (or your own markup) and skip
+ * the props you would never set.
+ *
+ * `SidebarNavigation` is built on it, so the two cannot drift apart.
+ *
+ * ```svelte
+ * <SidebarShell mode="collapsed">
+ *     {#snippet header({ collapsed })}
+ *         <SidebarBrandHeader {collapsed} brandName="Zabi" />
+ *     {/snippet}
+ *     <SidebarNavSection title="Main" sectionKey="main">…</SidebarNavSection>
+ *     {#snippet footer({ collapsed, insetX })}
+ *         <SidebarFooter {collapsed} className={insetX} />
+ *     {/snippet}
+ * </SidebarShell>
+ * ```
+ *
+ * A sidebar is 266px wide, which a phone does not have beside its
+ * content. With `mobile="drawer"` the rail is only there from the `lg`
+ * breakpoint (1024px) up; below it the same regions open in a Drawer from
+ * the start edge, with the Drawer's focus trap, Escape and backdrop:
+ *
+ * ```svelte
+ * <SidebarShell mobile="drawer" bind:isOpen drawerTitle="Menu">
+ *     {#snippet trigger({ props, toggle })}
+ *         <IconButton label="Menu" onclick={toggle} {...props}><Menu /></IconButton>
+ *     {/snippet}
+ *     …
+ * </SidebarShell>
+ * ```
+ *
+ * `trigger` is rendered where the rail would be, below `lg` only; leave
+ * it out and open the drawer from a button of your own by setting
+ * `isOpen`. The drawer closes when a link in it is followed.
+ */
+/** What the `trigger` snippet gets. */
+export interface SidebarTriggerContext {
+    isOpen: boolean;
+    toggle: () => void;
+    /** Spread on the button: it says what the button opens, and whether it is open. */
+    props: {
+        "aria-haspopup": "dialog";
+        "aria-expanded": boolean;
+    };
+}
+/** What closed the drawer: the user, a link that was followed, or the screen reaching `lg`. */
+export type SidebarDrawerCloseReason = DrawerCloseReason | "navigate" | "resize";
+/** Passed to every region so it can match the shell's collapse and inset. */
+export interface SidebarRegionContext {
+    collapsed: boolean;
+    /** Horizontal padding utility the shell's own regions use. */
+    insetX: string;
+}
+type Props = Omit<HTMLAttributes<HTMLElement>, "class" | "onclose" | "children"> & {
+    mode?: "expanded" | "collapsed";
+    /** `rail` attaches to the viewport edge; `card` is a floating panel. */
+    layout?: "rail" | "card";
+    ariaLabel?: string;
+    /** Accessible name of the scrolling region between header and footer. */
+    label?: string;
+    /**
+     * What the sidebar is below the `lg` breakpoint. `none`: the rail, as
+     * everywhere. `drawer`: the rail is hidden there and its regions open
+     * in a Drawer from the start edge instead.
+     */
+    mobile?: "none" | "drawer";
+    /** Whether the drawer is open. Bindable. Only used with `mobile="drawer"`. */
+    isOpen?: boolean;
+    /** Heading of the drawer, and its accessible name. Without it, `ariaLabel` is. */
+    drawerTitle?: string;
+    /** Accessible name of the drawer's close button. */
+    closeLabel?: string;
+    /** Fired when the drawer closes itself, with why. */
+    onclose?: (detail: {
+        reason: SidebarDrawerCloseReason;
+    }) => void;
+    /**
+     * The button that opens the drawer, rendered in the rail's place below
+     * `lg`. Optional: a button anywhere that sets `isOpen` does the same.
+     */
+    trigger?: Snippet<[SidebarTriggerContext]>;
+    class?: string;
+    /** @deprecated use `class`. */
+    className?: string;
+    /** Brand row, search — anything above the scrolling nav area. */
+    header?: Snippet<[SidebarRegionContext]>;
+    /** The scrolling middle. */
+    children?: Snippet<[SidebarRegionContext]>;
+    /** Account row, logout, theme toggle. Outside the scroll container. */
+    footer?: Snippet<[SidebarRegionContext]>;
+};
+declare const SidebarShell: import("svelte").Component<Props, {}, "isOpen">;
+type SidebarShell = ReturnType<typeof SidebarShell>;
+export default SidebarShell;