zabi-components 7.0.2 → 8.0.0

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,21 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         children?: Snippet;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
     }
 
-    let { children, className = "" }: Props = $props();
+    let { children, class: classAttr = "", className: legacyClass = "" }: Props = $props();
+
+    /** `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", className)}>
     {#if children}
         {@render children()}
     {/if}

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

@@ -1,6 +1,8 @@
 import type { Snippet } from "svelte";
 interface Props {
     children?: Snippet;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
 }
 declare const Page: import("svelte").Component<Props, {}, "">;

package/dist/molecules/PropsTable.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
     import type { ComponentProp } from "../types/page.types";
     import Table from "../atoms/Table.svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         props: ComponentProp[];
         caption?: string;
     }
 
-    let { props, caption = "Props / API" }: Props = $props();
+    let { class: className = "", props, caption = "Props / API" }: Props = $props();
 </script>
 
 {#if props.length === 0}
-    <div class="rounded-lg border border-border bg-base-50 px-4 py-4 text-sm text-description">
+    <div class={cn("rounded-control border border-border bg-base-50 px-4 py-4 text-sm text-description", className)}>
         No documented props.
     </div>
 {:else}
@@ -37,7 +40,7 @@
         </thead>
         <tbody>
             {#each props as prop}
-                <tr class="hover:bg-base-50/70">
+                <tr class="hover:bg-surface-hover">
                     <td class="border-b border-border px-4 py-3 font-mono text-body">
                         {prop.name}
                     </td>

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

@@ -1,5 +1,7 @@
 import type { ComponentProp } from "../types/page.types";
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     props: ComponentProp[];
     caption?: string;
 }

package/dist/molecules/RadioGroup.svelte

@@ -7,6 +7,7 @@
     } from "../atoms/selection-control.styles";
     import { generateId } from "../util/ssr-safe.js";
     import { SvelteMap } from "svelte/reactivity";
+    import { cn } from "../util/cn.js";
 
     export type RadioGroupOption = {
         value: string;
@@ -16,6 +17,8 @@
     };
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         options: RadioGroupOption[];
         /** Selected value; `bind:value`. Use `undefined` for no selection. */
         value?: string | undefined;
@@ -28,6 +31,7 @@
     }
 
     let {
+        class: className = "",
         options,
         defaultValue,
         value = $bindable(defaultValue),
@@ -150,7 +154,7 @@
 </script>
 
 <fieldset
-    class="space-y-3"
+    class={cn("space-y-3", className)}
     aria-disabled={disabled ? "true" : undefined}
     onkeydown={handleKeydown}
     {...restProps}

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

@@ -5,6 +5,8 @@ export type RadioGroupOption = {
     description?: string;
 };
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     options: RadioGroupOption[];
     /** Selected value; `bind:value`. Use `undefined` for no selection. */
     value?: string | undefined;

package/dist/molecules/Section.svelte

@@ -2,17 +2,20 @@
     import type { Snippet } from "svelte";
     import type { SizeVariant } from "../types/variants.js";
     import Heading from "../atoms/Heading.svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         title?: string;
         description?: string;
         /** Title heading level (1–6). */
-        headingLevel?: number;
+        headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
         size?: SizeVariant;
         maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
         background?: "default" | "muted" | "accent" | "transparent";
         padding?: "none" | "sm" | "md" | "lg" | "xl";
         centered?: boolean;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
@@ -26,11 +29,16 @@
         background = "default",
         padding = "lg",
         centered = 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 sizeClasses = $derived.by(() => {
         switch (size) {
             case "sm":
@@ -97,13 +105,13 @@
         const base = "w-full";
         const maxWidthClass = maxWidthClasses;
         const centeredClass = centered ? "mx-auto" : "";
-        return `${base} ${maxWidthClass} ${centeredClass}`.trim();
+        return cn(`${base} ${maxWidthClass} ${centeredClass}`);
     });
 
     const contentClasses = $derived.by(() => {
         const base = "px-4 sm:px-6 lg:px-8";
         const centeredClass = centered ? "text-center" : "";
-        return `${base} ${centeredClass}`.trim();
+        return cn(`${base} ${centeredClass}`);
     });
 </script>
 

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

@@ -4,12 +4,14 @@ interface Props {
     title?: string;
     description?: string;
     /** Title heading level (1–6). */
-    headingLevel?: number;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: SizeVariant;
     maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none";
     background?: "default" | "muted" | "accent" | "transparent";
     padding?: "none" | "sm" | "md" | "lg" | "xl";
     centered?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children?: Snippet;
 }

package/dist/molecules/SidebarBrandHeader.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+    import { cn } from "../util/cn.js";
+
     interface Props {
         collapsed?: boolean;
         brandName?: string;
         logoSrc?: string;
         logoAlt?: string;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
     }
 
@@ -12,9 +16,14 @@
         brandName = "",
         logoSrc = "",
         logoAlt = "",
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
     }: 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(`${classAttr} ${legacyClass}`.trim());
+
     const trimmedName = $derived(brandName.trim());
     const monogram = $derived(
         trimmedName
@@ -35,11 +44,11 @@
 
 {#if showLogo || trimmedName}
     <div
-        class={`flex w-full min-w-0 items-center gap-2.5 ${className}`.trim()}
+        class={cn("flex w-full min-w-0 items-center gap-3", className)}
     >
         {#if showLogo}
             <span
-                class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-background ring-1 ring-border"
+                class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-container bg-background ring-1 ring-border"
             >
                 <img
                     src={logoSrc}
@@ -51,7 +60,7 @@
             </span>
         {:else if showMonogram}
             <span
-                class="flex size-9 shrink-0 items-center justify-center rounded-xl bg-action-primary-subtle text-xs font-bold text-headline ring-1 ring-border"
+                class="flex size-9 shrink-0 items-center justify-center rounded-container bg-action-primary-subtle text-xs font-bold text-headline ring-1 ring-border"
                 aria-hidden="true"
             >
                 {monogram}

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

@@ -3,6 +3,8 @@ interface Props {
     brandName?: string;
     logoSrc?: string;
     logoAlt?: string;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
 }
 declare const SidebarBrandHeader: import("svelte").Component<Props, {}, "">;

package/dist/molecules/SidebarFooter.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { fixedSidebarFlyout } from "../util/fixed-sidebar-flyout.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         collapsed?: boolean;
@@ -15,6 +16,8 @@
         isLightMode?: boolean;
         onLogout?: () => void;
         onThemeToggle?: (nextIsLightMode: boolean) => void;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         profilePanelOpen?: boolean;
         profilePanelControlsId?: string;
@@ -35,18 +38,23 @@
         isLightMode = $bindable(false),
         onLogout,
         onThemeToggle,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         profilePanelOpen = false,
         profilePanelControlsId = "",
         onProfileClick,
         profilePanel,
     }: 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 showFooter = $derived(showProfile || showLogout || showThemeToggle);
     const showPanelLauncher = $derived(showProfile);
 
     const avatarClasses =
-        "size-10 rounded-xl bg-action-primary text-action-primary flex items-center justify-center text-sm font-semibold shrink-0 ring-1 ring-border-focus";
+        "size-10 rounded-container bg-action-primary text-action-primary flex items-center justify-center text-sm font-semibold shrink-0 ring-1 ring-border-focus";
 
     function getTextToneClass(isMuted = false): string {
         return isMuted ? "text-description" : "text-headline";
@@ -60,14 +68,14 @@
 {#if showFooter}
     <div class="w-full shrink-0" data-sidebar-flyout-root>
         <footer
-            class={`flex w-full shrink-0 flex-col gap-2.5 border-t border-border pt-3 pb-1 ${className}`.trim()}
+            class={cn(`flex w-full shrink-0 flex-col gap-3 border-t border-border pt-3 pb-1 ${className}`)}
             aria-label="Account and settings"
         >
             {#if showPanelLauncher}
                 <button
                     type="button"
                     data-sidebar-flyout-anchor="profile"
-                    class="w-full cursor-pointer rounded-xl px-2 py-2 outline-none transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover hover:ring-1 hover:ring-border/60 active:bg-base-200 focus-ring focus-ring--nav"
+                    class="w-full cursor-pointer rounded-container px-2 py-2 outline-none transition-colors hover:bg-nav-menu-hover hover:text-nav-menu-item-hover hover:ring-1 hover:ring-border/60 active:bg-surface-active focus-ring focus-ring--nav"
                     aria-haspopup="dialog"
                     aria-expanded={profilePanelOpen}
                     aria-controls={profilePanelControlsId.trim()

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

@@ -12,6 +12,8 @@ interface Props {
     isLightMode?: boolean;
     onLogout?: () => void;
     onThemeToggle?: (nextIsLightMode: boolean) => void;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     profilePanelOpen?: boolean;
     profilePanelControlsId?: string;

package/dist/molecules/SidebarNavSection.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
         title?: string;
@@ -8,6 +9,8 @@
         /** `aria-label` on the `<ul>` (required when title is hidden in collapsed mode). */
         listAriaLabel: string;
         collapsed?: boolean;
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children: Snippet;
     }
@@ -17,10 +20,15 @@
         sectionKey = "",
         listAriaLabel,
         collapsed = false,
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
     }: 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 trimmedTitle = $derived(title.trim());
     const headingId = $derived(
         trimmedTitle
@@ -30,17 +38,17 @@
     const showHeading = $derived(Boolean(trimmedTitle) && !collapsed);
 </script>
 
-<div class={`flex w-full flex-col gap-1.5 ${className}`.trim()}>
+<div class={cn(`flex w-full flex-col gap-2 ${className}`)}>
     {#if showHeading && headingId}
         <h2
-            class="px-0 text-[10px] font-semibold uppercase tracking-[0.12em] text-description"
+            class="px-0 text-xs font-semibold uppercase tracking-wider text-description"
             id={headingId}
         >
             {trimmedTitle}
         </h2>
     {/if}
     <ul
-        class="flex w-full flex-col gap-0.5 px-0"
+        class="flex w-full flex-col gap-1 px-0"
         aria-labelledby={showHeading && headingId ? headingId : undefined}
         aria-label={showHeading ? undefined : listAriaLabel}
     >

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

@@ -6,6 +6,8 @@ interface Props {
     /** `aria-label` on the `<ul>` (required when title is hidden in collapsed mode). */
     listAriaLabel: string;
     collapsed?: boolean;
+    class?: string;
+    /** @deprecated use `class`. */
     className?: string;
     children: Snippet;
 }

package/dist/molecules/SlideUp.svelte

@@ -1,40 +1,66 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
     import {
         focusFirstElement,
+        getFocusableElements,
         returnFocus,
         saveFocus,
-        trapFocus,
     } from '../util/focus-utils.js';
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
         isOpen?: boolean;
         title?: string;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
+        children?: Snippet;
     }
 
     let {
+        class: className = "",
         isOpen = $bindable(false),
         title = '',
         onclick,
         onkeydown,
         children,
         ...restProps
-    } = $props<Props & { children?: any }>();
+    }: Props = $props();
 
     const slideTitleId = generateId('slideup-title');
 
     let slideUpContainer = $state<HTMLDivElement>();
-    let cleanupFocusTrap: (() => void) | null = null;
+    let focusActive = false;
+
+    /** Ref-counted on `<body>`; shares the counter with Modal so nested overlays unlock once. */
+    function lockBodyScroll(): () => void {
+        const body = document.body;
+        const count = Number(body.dataset.zabiScrollLock ?? '0');
+        if (count === 0) {
+            body.dataset.zabiScrollLockOverflow = body.style.overflow;
+            body.style.overflow = 'hidden';
+        }
+        body.dataset.zabiScrollLock = String(count + 1);
+        return () => {
+            const next = Number(body.dataset.zabiScrollLock ?? '1') - 1;
+            if (next <= 0) {
+                body.style.overflow = body.dataset.zabiScrollLockOverflow ?? '';
+                delete body.dataset.zabiScrollLock;
+                delete body.dataset.zabiScrollLockOverflow;
+            } else {
+                body.dataset.zabiScrollLock = String(next);
+            }
+        };
+    }
 
     function closeSlideUp(event?: Event) {
         isOpen = false;
-        if (cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
+        if (focusActive) {
+            focusActive = false;
+            returnFocus();
         }
-        returnFocus();
         if (onclick && event) {
             onclick(event);
         }
@@ -44,17 +70,51 @@
         const container = slideUpContainer;
         if (isOpen && container) {
             saveFocus();
-            cleanupFocusTrap = trapFocus(container);
-            setTimeout(() => {
+            focusActive = true;
+            const unlockScroll = lockBodyScroll();
+            const t = setTimeout(() => {
                 focusFirstElement(container);
             }, 0);
-        } else if (!isOpen && cleanupFocusTrap) {
-            cleanupFocusTrap();
-            cleanupFocusTrap = null;
-            returnFocus();
+            return () => {
+                clearTimeout(t);
+                unlockScroll();
+                if (focusActive) {
+                    focusActive = false;
+                    returnFocus();
+                }
+            };
         }
     });
 
+    /** Re-queries focusables on every Tab so late-rendered content stays inside the trap. */
+    function handleTrapKeydown(event: KeyboardEvent) {
+        const container = slideUpContainer;
+        if (event.key !== 'Tab' || !container) return;
+        const owner = (event.target as Element | null)?.closest?.('[role="dialog"]');
+        if (owner && owner !== container) return;
+
+        const focusable = getFocusableElements(container);
+        if (focusable.length === 0) {
+            event.preventDefault();
+            container.focus();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement as HTMLElement | null;
+
+        if (!active || !focusable.includes(active)) {
+            event.preventDefault();
+            first.focus();
+        } else if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        } else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+
     function handleBackdropClick(event: Event) {
         if (event.target === event.currentTarget) {
             closeSlideUp(event);
@@ -63,7 +123,8 @@
 
     function handleKeydown(event: Event) {
         const keyboardEvent = event as KeyboardEvent;
-        if (keyboardEvent.key === 'Escape') {
+        if (keyboardEvent.key === 'Escape' && !keyboardEvent.defaultPrevented) {
+            keyboardEvent.preventDefault();
             closeSlideUp(event);
         }
         onkeydown?.(event);
@@ -71,19 +132,22 @@
 </script>
 
 {#if isOpen}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
         class="fixed inset-0 z-modal cursor-pointer bg-overlay"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? slideTitleId : undefined}
-        tabindex="-1"
-        {...restProps}
+        role="presentation"
     >
         <div
             bind:this={slideUpContainer}
-            class="fixed bottom-0 left-0 right-0 z-modal flex max-h-[90vh] cursor-default flex-col overflow-y-auto rounded-t-3xl bg-card shadow-xl animate-[slideUp_0.3s_ease-out]"
+            class={cn("fixed bottom-0 left-0 right-0 z-modal flex max-h-[90vh] cursor-default flex-col overflow-y-auto rounded-t-overlay border-t border-border-overlay bg-surface-overlay shadow-lg animate-[slideUp_0.3s_ease-out]", className)}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? slideTitleId : undefined}
+            tabindex="-1"
+            onkeydown={handleTrapKeydown}
+            {...restProps}
         >
             {#if title}
                 <div class="flex items-center justify-between px-6 pb-4 pt-6">
@@ -96,7 +160,7 @@
                     <button
                         type="button"
                         onclick={closeSlideUp}
-                        class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-2xl text-description transition-colors hover:bg-base-100 hover:text-headline"
+                        class="focus-ring flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-2xl text-description transition-colors hover:bg-surface-overlay-hover hover:text-headline"
                         aria-label="Close"
                     >
                         ×

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

@@ -1,12 +1,13 @@
+import type { Snippet } from 'svelte';
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
     isOpen?: boolean;
     title?: string;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;
+    children?: Snippet;
 }
-type $$ComponentProps = Props & {
-    children?: any;
-};
-declare const SlideUp: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
+declare const SlideUp: import("svelte").Component<Props, {}, "isOpen">;
 type SlideUp = ReturnType<typeof SlideUp>;
 export default SlideUp;