zabi-components 8.1.0 → 9.0.0

package/dist/organisms/TopNavbar.svelte

@@ -3,12 +3,16 @@
     import { zabiStringsFor } from "../util/zabi-strings.js";
     import ThemeToggle from "../atoms/ThemeToggle.svelte";
     import IconButton from "../atoms/IconButton.svelte";
+    import BottomSheet from "../molecules/BottomSheet.svelte";
+    import TopNavbarSheetContent from "./TopNavbarSheetContent.svelte";
     import ExternalLink from "@lucide/svelte/icons/external-link";
     import Menu from "@lucide/svelte/icons/menu";
     import X from "@lucide/svelte/icons/x";
     import type { Component, Snippet } from "svelte";
     import { generateId } from "../util/ssr-safe.js";
+    import { getAppShell } from "../util/app-shell.js";
     import { cn } from "../util/cn.js";
+    import { resolveScrolledUnder, watchScrollEdge, type ScrollEdgeMode } from "../util/scroll-edge.js";
     import type { ThemeToggleLabels } from "../util/theme-mode.js";
     import { DEFAULT_TOP_NAVBAR_STRINGS, type TopNavbarStrings } from "../util/top-navbar.js";
     import { isInsideToastRegion } from "../util/focus-utils.js";
@@ -24,6 +28,13 @@
 
     export type TopNavbarCollapseAt = "sm" | "md" | "lg" | "xl";
 
+    /**
+     * How the links open below `collapseAt`: `sheet` slides a modal sheet up
+     * from the bottom of the screen; `inline` opens a panel under the bar,
+     * which pushes the page down (the menu of 8.1 and earlier).
+     */
+    export type TopNavbarMenu = "sheet" | "inline";
+
     interface Props {
         brand?: string;
         brandHref?: string;
@@ -43,7 +54,7 @@
         themeStorageKey?: string | null;
         /** The texts of the theme toggle's name, for another language. As `labels` of ThemeToggle. */
         themeLabels?: Partial<ThemeToggleLabels>;
-        /** The words the bar says by itself: the menu button's two names and the note on a link that opens a new tab. */
+        /** The words the bar says by itself: the menu button's two names, the name of the menu sheet and the note on a link that opens a new tab. */
         strings?: Partial<TopNavbarStrings>;
         class?: string;
         /** @deprecated use `class`. */
@@ -59,8 +70,22 @@
          * more items than fit at 768px.
          */
         collapseAt?: TopNavbarCollapseAt;
+        /**
+         * How the links open below `collapseAt`. `sheet` (the default) is a
+         * bottom sheet: a modal dialog that is as tall as its content, up to
+         * the full screen below the status bar, and scrolls inside. `inline` is a panel under the
+         * bar, a disclosure that pushes the page down and traps nothing.
+         */
+        menu?: TopNavbarMenu;
         preventNavigation?: boolean;
         onclick?: (event: Event) => void;
+        /**
+         * When the bar shows the glass and the hairline. `auto` follows the
+         * scroll position: flush at the top, glass once content is under it
+         * (and while the inline phone menu is open). `always` is glass all the time,
+         * `never` flush all the time.
+         */
+        scrollEdge?: ScrollEdgeMode;
     }
 
     let {
@@ -79,8 +104,10 @@
         navVariant = "header",
         currentPath = "",
         collapseAt = "md",
+        menu = "sheet",
         preventNavigation = false,
         onclick,
+        scrollEdge = "auto",
         nav,
         actions,
         ...restProps
@@ -94,9 +121,28 @@
 
     /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
     const provided = zabiStringsFor("topNavbar");
-    const text = $derived(mergeStrings(DEFAULT_TOP_NAVBAR_STRINGS, provided(), strings));
+    const text = $derived(mergeStrings<Required<TopNavbarStrings>>(DEFAULT_TOP_NAVBAR_STRINGS, provided(), strings));
 
     let isMenuOpen = $state(false);
+    const sheet = $derived(menu !== "inline");
+    /** The inline panel is open: only then do the window listeners below have anything to close. */
+    const inlineOpen = $derived(isMenuOpen && !sheet);
+
+    /** Content is under the bar: from the shell if there is one, else from the window. */
+    const shell = getAppShell();
+    let ownScrolled = $state(false);
+    $effect(() => {
+        if (shell || scrollEdge !== "auto" || embedded) return;
+        return watchScrollEdge(null, (edge) => (ownScrolled = edge.top));
+    });
+    // An open inline menu sits on the material, whatever the scroll position.
+    // The sheet covers the page and the bar under its backdrop: the bar stays as it was.
+    const scrolledUnder = $derived(
+        resolveScrolledUnder(
+            scrollEdge,
+            inlineOpen || (shell ? shell.scrolledTop : ownScrolled),
+        ),
+    );
     let navElement = $state<HTMLElement | null>(null);
     let panelElement = $state<HTMLElement | null>(null);
     let menuButtonHolder = $state<HTMLElement | null>(null);
@@ -127,12 +173,13 @@
     }
 
     /**
-     * The menu is a disclosure, not a dialog: nothing is trapped or locked, so
-     * it has to get out of the way by itself whenever the user has moved on.
+     * The inline menu is a disclosure, not a dialog: nothing is trapped or
+     * locked, so it has to get out of the way by itself whenever the user has
+     * moved on. The sheet is a dialog and does all of this itself.
      */
     function handleWindowKeydown(event: KeyboardEvent) {
         // A menu inside the panel (a Dropdown, say) closes on Escape first.
-        if (event.key !== "Escape" || !isMenuOpen || event.defaultPrevented) return;
+        if (event.key !== "Escape" || !inlineOpen || event.defaultPrevented) return;
         const focusInside = !!panelElement?.contains(document.activeElement);
         isMenuOpen = false;
         // The link that had focus is gone; without this, focus falls to <body>.
@@ -154,7 +201,7 @@
     let pressing = false;
 
     function handleOutsideClick(event: MouseEvent) {
-        if (isMenuOpen && isOutside(event)) isMenuOpen = false;
+        if (inlineOpen && isOutside(event)) isMenuOpen = false;
     }
 
     /**
@@ -163,10 +210,10 @@
      * finger has lifted, on a touch screen); that one is left to the click.
      */
     function handleOutsideFocus(event: FocusEvent) {
-        if (isMenuOpen && !pressing && isOutside(event)) isMenuOpen = false;
+        if (inlineOpen && !pressing && isOutside(event)) isMenuOpen = false;
     }
 
-    /** Following a link in the menu: the page under it is about to change. */
+    /** Following a link in the menu or the sheet: the page under it is about to change. */
     function handlePanelClick(event: MouseEvent) {
         if (event.target instanceof Element && event.target.closest("a[href]")) {
             isMenuOpen = false;
@@ -181,7 +228,8 @@
     });
 
     // Past the breakpoint the menu button is gone, so a menu left open could
-    // not be closed, and it would still be open on the way back down.
+    // not be closed, and it would still be open on the way back down. For the
+    // sheet, closing also lets go of the scroll lock and the inert page.
     $effect(() => {
         if (typeof window === "undefined" || !window.matchMedia) return;
         const wide = window.matchMedia(collapse.query);
@@ -254,7 +302,7 @@
     });
 
     /** Where a list of links is drawn: in the bar, in the phone menu, or alone (`embedded`). */
-    type NavListPlace = "row" | "menu" | "embedded";
+    type NavListPlace = "row" | "menu" | "sheet" | "embedded";
 
     function getListClasses(place: NavListPlace): string {
         if (place === "embedded" || navVariant === "sidebar") return ulClasses;
@@ -269,7 +317,7 @@
         const base =
             "flex flex-col gap-1 grow h-full items-center justify-center min-h-0 min-w-0 relative shrink-0 cursor-pointer";
         if (place === "row") return `${base} w-auto`;
-        if (place === "menu") return `${base} w-full`;
+        if (place === "menu" || place === "sheet") return `${base} w-full`;
         return `${base} w-full md:w-auto`;
     }
 
@@ -290,28 +338,30 @@
      */
     function getIconContainerClasses(isActive: boolean): string {
         const base =
-            "focus-ring focus-ring--nav group/nav-item flex flex-col items-center justify-center overflow-clip relative rounded-pill shrink-0 transition-colors duration-200 outline-none";
+            "focus-ring focus-ring--nav group/nav-item flex flex-col items-center justify-center overflow-clip relative rounded-pill shrink-0 transition-colors duration-(--duration-moderate) ease-standard outline-none";
         return isActive
             ? // Forced colours drop the fill and recolour the label: the
               // current item keeps an inset outline there, which is drawn.
               cn(
                   base,
-                  "bg-nav-menu-active text-nav-menu-item-active forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2",
+                  "bg-nav-menu-active font-semibold text-nav-menu-item-active forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2",
               )
             : cn(
                   base,
-                  "text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-nav-menu-active",
+                  "font-medium text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-nav-menu-active",
               );
     }
 
-    function getStateLayerClasses(): string {
-        return "box-border flex gap-1 h-10 pointer-coarse:h-11 items-center px-4 py-2 relative shrink-0";
+    function getStateLayerClasses(place: NavListPlace): string {
+        // A row of the sheet is a touch target on every pointer: 44px.
+        const height = place === "sheet" ? "h-11" : "h-10 pointer-coarse:h-11";
+        return `box-border flex gap-1 ${height} items-center px-4 py-2 relative shrink-0`;
     }
 
     function getLabelClasses(): string {
         // `whitespace-pre` used to sit beside `text-nowrap` — same property,
         // and it preserved literal whitespace as a side effect.
-        return "font-medium leading-4 relative shrink-0 text-center text-nowrap tracking-wide text-xs text-inherit";
+        return "leading-5 relative shrink-0 text-center text-nowrap text-sm text-inherit";
     }
 
     function getIconWrapperClasses(): string {
@@ -325,16 +375,16 @@
             {@const isActive = isNavItemActive(item.href)}
             {@const external = isExternal(item)}
             <li class={getNavItemClasses(place)}>
-                <!-- In the menu the link is the whole row, not a pill as wide as its label. -->
+                <!-- In the menu and the sheet the link is the whole row, not a pill as wide as its label. -->
                 <a
                     href={item.href}
-                    class={cn(getIconContainerClasses(isActive), place === "menu" && "w-full")}
+                    class={cn(getIconContainerClasses(isActive), (place === "menu" || place === "sheet") && "w-full")}
                     onclick={handleNavLinkClick}
                     aria-current={isActive ? "page" : undefined}
                     target={external ? "_blank" : undefined}
                     rel={external ? "noopener noreferrer" : undefined}
                 >
-                    <div class={getStateLayerClasses()}>
+                    <div class={getStateLayerClasses(place)}>
                         {#if item.iconFilled && isActive}
                             {@const Icon = item.iconFilled}
                             <div class={getIconWrapperClasses()}>
@@ -364,6 +414,14 @@
     </ul>
 {/snippet}
 
+{#snippet sheetLinks()}
+    {#if nav}
+        {@render nav()}
+    {:else}
+        {@render defaultNavList("sheet")}
+    {/if}
+{/snippet}
+
 <svelte:window
     onkeydown={handleWindowKeydown}
     onmousedowncapture={() => (pressing = true)}
@@ -384,7 +442,8 @@
 {:else}
     <nav
         bind:this={navElement}
-        class={cn("border-b border-border bg-background sticky top-0 z-sticky", className)}
+        data-scrolled-under={String(scrolledUnder)}
+        class={cn("material-bar sticky top-0 z-sticky", className)}
         aria-label={ariaLabel}
         {...restProps}
     >
@@ -431,14 +490,17 @@
                       off the icon scale, and with no disclosure semantics, so
                       a screen reader could not tell the menu was open.
                     -->
+                    <!-- The sheet is a dialog the button opens; the page under its
+                    backdrop is inert, so this button is never the one that closes it. -->
                     <IconButton
                         variant="ghost"
-                        label={isMenuOpen ? text.closeMenu : text.openMenu}
+                        label={inlineOpen ? text.closeMenu : text.openMenu}
                         onclick={toggleMenu}
+                        aria-haspopup={sheet ? "dialog" : undefined}
                         aria-expanded={isMenuOpen}
                         aria-controls={isMenuOpen ? mobileMenuId : undefined}
                     >
-                        {#if isMenuOpen}
+                        {#if inlineOpen}
                             <X size={20} />
                         {:else}
                             <Menu size={20} />
@@ -451,7 +513,7 @@
             Keeping it in the DOM, hidden, would render `nav` and `actions` a
             second time on every page for every desktop visitor: duplicate ids
             from the caller's snippets, and a second ThemeToggle mounted. -->
-            {#if isMenuOpen}
+            {#if inlineOpen}
                 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
                 <div
                     bind:this={panelElement}
@@ -461,7 +523,7 @@
                     onclick={handlePanelClick}
                 >
                     <div
-                        class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-border"
+                        class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-border-weak"
                     >
                         {#if nav}
                             {@render nav()}
@@ -481,6 +543,33 @@
             {/if}
         </div>
     </nav>
+
+    <!-- Below `collapseAt` the links open in a sheet from the bottom. It is
+    portalled to the body: the bar is sticky and glass, and a fixed child of a
+    filtered box is placed against that box. It renders nothing until
+    it is open, so `nav` and `actions` are not drawn a second time. -->
+    {#if sheet}
+        <BottomSheet
+            bind:isOpen={isMenuOpen}
+            fit
+            fitMax="full"
+            title={text.menuTitle}
+            id={mobileMenuId}
+            data-topnavbar-sheet=""
+        >
+            <TopNavbarSheetContent
+                links={nav || items.length > 0 ? sheetLinks : undefined}
+                navLabel={ariaLabel ?? text.menuTitle}
+                {actions}
+                {showThemeToggle}
+                {themeModes}
+                {themeStorageKey}
+                {themeLabels}
+                themeHeading={text.themeHeading}
+                onclick={handlePanelClick}
+            />
+        </BottomSheet>
+    {/if}
 {/if}
 
 <style>
@@ -488,7 +577,7 @@
      * The bar is sticky, so an open menu taller than the screen could never be
      * scrolled into view: the page moved under it and its last control stayed
      * below the fold. It takes what is left of the screen under the 4rem bar
-     * (and its 1px border) and scrolls on its own, without handing the scroll
+     * and scrolls on its own, without handing the scroll
      * on to the page when it reaches an end. `dvh` follows a phone's
      * collapsing address bar; `vh` is for browsers without it. In a web app
      * installed to the home screen the bar starts below the status bar, so
@@ -499,8 +588,8 @@
      * script): a scrolling box would clip a Dropdown that opens out of it.
      */
     .topnavbar-menu {
-        max-height: calc(100vh - 4rem - 1px - env(safe-area-inset-top, 0px));
-        max-height: calc(100dvh - 4rem - 1px - env(safe-area-inset-top, 0px));
+        max-height: calc(100vh - 4rem - env(safe-area-inset-top, 0px));
+        max-height: calc(100dvh - 4rem - env(safe-area-inset-top, 0px));
     }
 
     .topnavbar-menu[data-scrolls] {

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

@@ -1,4 +1,5 @@
 import type { Component, Snippet } from "svelte";
+import { type ScrollEdgeMode } from "../util/scroll-edge.js";
 import type { ThemeToggleLabels } from "../util/theme-mode.js";
 import { type TopNavbarStrings } from "../util/top-navbar.js";
 export interface TopNavbarNavItem {
@@ -16,6 +17,12 @@ export interface TopNavbarNavItem {
     external?: boolean;
 }
 export type TopNavbarCollapseAt = "sm" | "md" | "lg" | "xl";
+/**
+ * How the links open below `collapseAt`: `sheet` slides a modal sheet up
+ * from the bottom of the screen; `inline` opens a panel under the bar,
+ * which pushes the page down (the menu of 8.1 and earlier).
+ */
+export type TopNavbarMenu = "sheet" | "inline";
 interface Props {
     brand?: string;
     brandHref?: string;
@@ -35,7 +42,7 @@ interface Props {
     themeStorageKey?: string | null;
     /** The texts of the theme toggle's name, for another language. As `labels` of ThemeToggle. */
     themeLabels?: Partial<ThemeToggleLabels>;
-    /** The words the bar says by itself: the menu button's two names and the note on a link that opens a new tab. */
+    /** The words the bar says by itself: the menu button's two names, the name of the menu sheet and the note on a link that opens a new tab. */
     strings?: Partial<TopNavbarStrings>;
     class?: string;
     /** @deprecated use `class`. */
@@ -51,8 +58,22 @@ interface Props {
      * more items than fit at 768px.
      */
     collapseAt?: TopNavbarCollapseAt;
+    /**
+     * How the links open below `collapseAt`. `sheet` (the default) is a
+     * bottom sheet: a modal dialog that is as tall as its content, up to
+     * the full screen below the status bar, and scrolls inside. `inline` is a panel under the
+     * bar, a disclosure that pushes the page down and traps nothing.
+     */
+    menu?: TopNavbarMenu;
     preventNavigation?: boolean;
     onclick?: (event: Event) => void;
+    /**
+     * When the bar shows the glass and the hairline. `auto` follows the
+     * scroll position: flush at the top, glass once content is under it
+     * (and while the inline phone menu is open). `always` is glass all the time,
+     * `never` flush all the time.
+     */
+    scrollEdge?: ScrollEdgeMode;
 }
 type $$ComponentProps = Props & {
     nav?: Snippet;

package/dist/organisms/TopNavbarSheetContent.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { onMount, type Snippet } from "svelte";
+    import Monitor from "@lucide/svelte/icons/monitor";
+    import Moon from "@lucide/svelte/icons/moon";
+    import Sun from "@lucide/svelte/icons/sun";
+    import SegmentedControl from "../molecules/SegmentedControl.svelte";
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
+    import { markTopNavbarPlace } from "../util/top-navbar.js";
+    import {
+        getThemeMode,
+        isThemeDark,
+        setThemeMode,
+        storeThemeMode,
+        type ThemeMode,
+        type ThemeToggleLabels,
+    } from "../util/theme-mode.js";
+
+    /**
+     * What TopNavbar's phone sheet holds: the links, then a section of its own
+     * with the caller's `actions` and the theme choice, at the full width of
+     * the sheet. Internal to TopNavbar.
+     */
+    interface Props {
+        /** The links: the `nav` snippet or the built-in list. Omitted when there are none. */
+        links?: Snippet;
+        /** Name of the `nav` around the links. */
+        navLabel: string;
+        actions?: Snippet;
+        showThemeToggle: boolean;
+        themeModes: "two" | "three";
+        themeStorageKey?: string | null;
+        themeLabels?: Partial<ThemeToggleLabels>;
+        themeHeading: string;
+        /** Every click inside, for the sheet to close on a link. */
+        onclick: (event: MouseEvent) => void;
+    }
+
+    let {
+        links,
+        navLabel,
+        actions,
+        showThemeToggle,
+        themeModes,
+        themeStorageKey,
+        themeLabels,
+        themeHeading,
+        onclick,
+    }: Props = $props();
+
+    // Everything drawn in here, the caller's `actions` too, reads "menu".
+    markTopNavbarPlace("menu");
+
+    /** The words of ThemeToggle's name, which are also the segments' labels here. */
+    const DEFAULT_WORDS = { auto: "system", light: "light", dark: "dark" };
+    const provided = zabiStringsFor("themeToggle");
+    const words = $derived(mergeStrings(DEFAULT_WORDS, provided(), themeLabels));
+    const sentence = (word: string) => word.charAt(0).toLocaleUpperCase() + word.slice(1);
+
+    const options = $derived(
+        themeModes === "three"
+            ? [
+                  { value: "auto", label: sentence(words.auto), icon: Monitor },
+                  { value: "light", label: sentence(words.light), icon: Sun },
+                  { value: "dark", label: sentence(words.dark), icon: Moon },
+              ]
+            : [
+                  { value: "light", label: sentence(words.light), icon: Sun },
+                  { value: "dark", label: sentence(words.dark), icon: Moon },
+              ],
+    );
+
+    // The bar's own ThemeToggle stays mounted (hidden by CSS) and restores the
+    // stored choice; this control reads and writes the same `<html>` attribute,
+    // and follows whatever else changes it.
+    let mode = $state<ThemeMode>("light");
+    let dark = $state(false);
+    const value = $derived(themeModes === "three" ? mode : dark ? "dark" : "light");
+
+    function read() {
+        mode = getThemeMode();
+        dark = isThemeDark();
+    }
+
+    onMount(() => {
+        read();
+        const root = document.documentElement;
+        const observer = new MutationObserver(read);
+        observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+        const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+        media?.addEventListener("change", read);
+        return () => {
+            observer.disconnect();
+            media?.removeEventListener("change", read);
+        };
+    });
+
+    /**
+     * As ThemeToggle writes it: `data-theme` with three modes, for "auto" and
+     * on a page that has the attribute; the `dark` class on a page that
+     * switches by class.
+     */
+    function choose(next: string) {
+        if (next !== "auto" && next !== "light" && next !== "dark") return;
+        const root = document.documentElement;
+        if (themeModes === "three" || next === "auto" || root.hasAttribute("data-theme")) {
+            setThemeMode(next, { storageKey: themeStorageKey });
+        } else {
+            root.classList.toggle("dark", next === "dark");
+            storeThemeMode(next, themeStorageKey);
+        }
+        read();
+    }
+
+    const headingId = generateId("topnavbar-theme");
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<div {onclick}>
+    {#if links}
+        <nav aria-label={navLabel}>
+            {@render links()}
+        </nav>
+    {/if}
+    {#if actions || showThemeToggle}
+        <div class="mt-4 flex flex-col gap-4 border-t border-border-weak pt-4" data-topnavbar-sheet-section>
+            {#if actions}
+                <div class="flex flex-col items-stretch gap-2 empty:hidden" data-topnavbar-actions>{@render actions()}</div>
+            {/if}
+            {#if showThemeToggle}
+                <div class="flex flex-col gap-2">
+                    <p id={headingId} class="text-sm font-medium text-headline">{themeHeading}</p>
+                    <SegmentedControl
+                        {options}
+                        {value}
+                        size="lg"
+                        aria-labelledby={headingId}
+                        onchange={choose}
+                    />
+                </div>
+            {/if}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,24 @@
+import { type Snippet } from "svelte";
+import { type ThemeToggleLabels } from "../util/theme-mode.js";
+/**
+ * What TopNavbar's phone sheet holds: the links, then a section of its own
+ * with the caller's `actions` and the theme choice, at the full width of
+ * the sheet. Internal to TopNavbar.
+ */
+interface Props {
+    /** The links: the `nav` snippet or the built-in list. Omitted when there are none. */
+    links?: Snippet;
+    /** Name of the `nav` around the links. */
+    navLabel: string;
+    actions?: Snippet;
+    showThemeToggle: boolean;
+    themeModes: "two" | "three";
+    themeStorageKey?: string | null;
+    themeLabels?: Partial<ThemeToggleLabels>;
+    themeHeading: string;
+    /** Every click inside, for the sheet to close on a link. */
+    onclick: (event: MouseEvent) => void;
+}
+declare const TopNavbarSheetContent: import("svelte").Component<Props, {}, "">;
+type TopNavbarSheetContent = ReturnType<typeof TopNavbarSheetContent>;
+export default TopNavbarSheetContent;

package/dist/organisms/index.d.ts

@@ -4,7 +4,12 @@ export { default as SidebarShell } from './SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './SidebarPanel.svelte';
 export { default as AppShell } from './AppShell.svelte';
+export { default as AppShellHeaderPart } from './AppShellHeaderPart.svelte';
+export { default as AppNavigation } from './AppNavigation.svelte';
+export { APP_SHELL_RAIL_MIN_WIDTH, APP_SHELL_SIDEBAR_MIN_WIDTH, } from '../util/app-shell.js';
+export type { AppShellNavigationContext, AppShellNavigationMode, AppShellNavigationPlacement, } from '../util/app-shell.js';
 export { DEFAULT_TOP_NAVBAR_STRINGS } from '../util/top-navbar.js';
-export type { TopNavbarStrings } from '../util/top-navbar.js';
+export type { TopNavbarStrings, TopNavbarPlace } from '../util/top-navbar.js';
+export { getTopNavbarPlace } from '../util/top-navbar.js';
 export { DEFAULT_SIDEBAR_ACCOUNT_PANEL_STRINGS, DEFAULT_SIDEBAR_NAVIGATION_STRINGS, } from '../util/sidebar.js';
 export type { SidebarAccountPanelStrings, SidebarNavigationStrings } from '../util/sidebar.js';

package/dist/organisms/index.js

@@ -4,5 +4,9 @@ export { default as SidebarShell } from './SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './SidebarPanel.svelte';
 export { default as AppShell } from './AppShell.svelte';
+export { default as AppShellHeaderPart } from './AppShellHeaderPart.svelte';
+export { default as AppNavigation } from './AppNavigation.svelte';
+export { APP_SHELL_RAIL_MIN_WIDTH, APP_SHELL_SIDEBAR_MIN_WIDTH, } from '../util/app-shell.js';
 export { DEFAULT_TOP_NAVBAR_STRINGS } from '../util/top-navbar.js';
+export { getTopNavbarPlace } from '../util/top-navbar.js';
 export { DEFAULT_SIDEBAR_ACCOUNT_PANEL_STRINGS, DEFAULT_SIDEBAR_NAVIGATION_STRINGS, } from '../util/sidebar.js';

package/dist/types/components.d.ts

@@ -1,4 +1,5 @@
-import type { Component } from 'svelte';
+import type { Component, Snippet } from 'svelte';
+import type { SkeletonStrings } from '../components/util/skeleton.js';
 export type ZabiComponent<T extends Record<string, any> = Record<string, any>, E extends Record<string, any> = Record<string, any>> = Component<T, E>;
 export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'ghost' | 'link' | 'neutral';
@@ -138,6 +139,20 @@ export interface SkeletonProps {
     height?: string | number;
     class?: string;
     'aria-label'?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<SkeletonStrings>;
+    /** No role, no label, hidden from assistive tech. */
+    decorative?: boolean;
+    /** "on-color" is for a brand, accent or fill block. */
+    tone?: 'neutral' | 'on-color';
+    /** Text variant only: this many lines (1 to 20), the last one shorter. */
+    lines?: number;
+}
+export interface SkeletonGroupProps {
+    'aria-label'?: string;
+    strings?: Partial<SkeletonStrings>;
+    class?: string;
+    children?: Snippet;
 }
 export interface ToggleProps {
     checked?: boolean;
@@ -186,6 +201,7 @@ export type Alert = ZabiComponent<AlertProps>;
 export type Badge = ZabiComponent<BadgeProps>;
 export type Progress = ZabiComponent<ProgressProps>;
 export type Skeleton = ZabiComponent<SkeletonProps>;
+export type SkeletonGroup = ZabiComponent<SkeletonGroupProps>;
 export type Toggle = ZabiComponent<ToggleProps, ToggleEvents>;
 export type Tooltip = ZabiComponent<TooltipProps>;
 //# sourceMappingURL=components.d.ts.map

package/dist/types/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/types/components.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/types/components.ts"],"names":[],"mappings":"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"}