zabi-components 7.0.1 → 8.0.0

package/dist/molecules/NavigationMenuItem.svelte

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

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

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

package/dist/molecules/NavigationMenuLink.svelte

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

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

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

package/dist/molecules/NavigationMenuList.svelte

@@ -1,20 +1,28 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        class?: string;
+        /** @deprecated use `class`. */
         className?: string;
         children?: Snippet;
     }
 
     let {
-        className = "",
+        class: classAttr = "",
+        className: legacyClass = "",
         children,
         ...restProps
     }: Props = $props();
+
+    /** `class` is the public prop; `className` is a deprecated alias.
+     * Both are merged here so existing call sites keep working. */
+    const className = $derived(cn(`${classAttr} ${legacyClass}`));
 </script>
 
 <ul
-    class="flex flex-row items-center gap-1 list-none m-0 p-0 {className}"
+    class={cn("flex flex-row items-center gap-1 list-none m-0 p-0", className)}
     role="menubar"
     aria-orientation="horizontal"
     data-navigation-menu-list

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

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

package/dist/molecules/NavigationMenuTrigger.svelte

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

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

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

package/dist/molecules/Page.svelte

@@ -1,15 +1,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;
 }