zabi-components 8.0.0 → 9.0.0

package/dist/organisms/SidebarNavigation.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { zabiStringsFor, zabiCommonStrings } from "../util/zabi-strings.js";
     import Badge from "../atoms/Badge.svelte";
     import Button from "../atoms/Button.svelte";
     import IconButton from "../atoms/IconButton.svelte";
@@ -8,10 +10,19 @@
     import SidebarNavSection from "../molecules/SidebarNavSection.svelte";
     import Tooltip from "../atoms/Tooltip.svelte";
     import SidebarShell from "./SidebarShell.svelte";
-    import { Command, Search } from "@lucide/svelte";
+    import type {
+        SidebarDrawerCloseReason,
+        SidebarTriggerContext,
+    } from "./SidebarShell.svelte";
+    import Command from "@lucide/svelte/icons/command";
+    import Search from "@lucide/svelte/icons/search";
     import type { Snippet } from "svelte";
     import type { Component } from "svelte";
     import type { ButtonVariant, SizeVariant } from "../types/variants.js";
+    import {
+        DEFAULT_SIDEBAR_NAVIGATION_STRINGS,
+        type SidebarNavigationStrings,
+    } from "../util/sidebar.js";
 
     export interface SidebarNavigationItem {
         id: string;
@@ -36,6 +47,12 @@
         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;
@@ -73,6 +90,24 @@
         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;
     }
 
     let {
@@ -82,6 +117,7 @@
         currentPath = "",
         activePrimaryHref = "",
         ariaLabel = "Sidebar navigation",
+        strings,
         class: classAttr = "",
         className: legacyClass = "",
         logoSrc = "",
@@ -93,8 +129,8 @@
         profileInitials = "ZA",
         showSearch = true,
         searchMode = "input",
-        searchPlaceholder = "Search...",
-        searchValue = $bindable(""),
+        searchPlaceholder: searchPlaceholderGiven,
+        searchValue = $bindable<Exclude<Props["searchValue"], undefined>>(),
         searchTriggerIcon = Command,
         searchTriggerVariant = "outline",
         searchTriggerSize = "sm",
@@ -102,7 +138,7 @@
         logoutLabel = "Logout",
         showThemeToggle = true,
         lightModeLabel = "Light mode",
-        isLightMode = $bindable(false),
+        isLightMode = $bindable<Exclude<Props["isLightMode"], undefined>>(),
         emptyStateTitle = "Create your first navigation item",
         emptyStateDescription = "Add your first sidebar item so users can start navigating your product.",
         emptyStateActionLabel = "Add navigation item",
@@ -115,12 +151,42 @@
         profilePanelOpen = false,
         profilePanelControlsId = "",
         profilePanel,
+        mobile = "none",
+        isOpen = $bindable<Exclude<Props["isOpen"], undefined>>(),
+        trigger,
+        drawerTitle,
+        closeLabel,
+        onclose,
+        label,
         ...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 (isLightMode === undefined) isLightMode = false;
+        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 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. */
 
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("sidebarNavigation");
+    const text = $derived(mergeStrings(DEFAULT_SIDEBAR_NAVIGATION_STRINGS, provided(), strings));
+    /** For the brand header and the footer: the provider's words for this sidebar, then the instance's. */
+    const handedOn = $derived(mergeStrings<Partial<SidebarNavigationStrings>>({}, provided(), strings));
+
     const isCollapsed = $derived(mode === "collapsed");
     const showBrandRow = $derived(
         Boolean(logoSrc.trim() || brandName.trim()),
@@ -186,7 +252,7 @@
     );
 
     const iconContainerClasses = $derived(
-        "flex size-6 shrink-0 items-center justify-center leading-none text-current",
+        "flex size-5 shrink-0 items-center justify-center leading-none text-current",
     );
     /** With `searchMode: "input"`, the field stays visible even if `onSearchClick` is set (e.g. Storybook). */
     const shouldRenderSearchButton = $derived(
@@ -200,17 +266,10 @@
     }
 
     /**
-     * The selected row used to be carried by its fill alone, and the fill was
-     * 1.05:1 against the sidebar in light mode — not a fill, a rumour. Active
-     * and idle labels were #18181b and #27272a at the same weight, a 15-unit
-     * difference in one channel that nobody can see. So in light mode there
-     * was effectively no indication of where you were.
-     *
-     * Three cues now, only one of which is colour-discrimination dependent:
-     * the label takes --color-nav-menu-item-active (defined all along and
-     * never referenced — the row said `text-inherit`), a 3px bar marks the
-     * leading edge, and the tint stays as reinforcement rather than as the
-     * whole message.
+     * One indicator marks the current row: the tinted fill, with the active
+     * label colour (--color-nav-menu-item-active) and a heavier weight, so the
+     * cue does not depend on telling two similar fills apart. (A 3px bar on
+     * the leading edge used to mark it a second time; D127.)
      */
     function isItemActive(item: SidebarNavigationItem): boolean {
         return (
@@ -222,20 +281,25 @@
     function getNavItemClasses(item: SidebarNavigationItem): string {
         const isActive = isItemActive(item);
         const layoutClasses = isCollapsed
-            ? "flex min-h-10 items-center justify-center px-0 py-2"
-            : "flex min-h-10 items-center gap-3 px-2 py-2";
+            ? "flex min-h-9 pointer-coarse:min-h-11 items-center justify-center px-0 py-2"
+            : "flex min-h-9 pointer-coarse:min-h-11 items-center gap-3 px-2 py-2";
         const structural =
-            "focus-ring focus-ring--nav relative w-full cursor-pointer rounded-control no-underline transition-colors duration-150 outline-none";
+            "focus-ring focus-ring--nav relative w-full cursor-pointer rounded-control no-underline transition-colors duration-(--duration-base) ease-standard outline-none";
 
         if (isActive) {
+            // In forced colours the fill is gone and every link takes the
+            // system's link colour. An outline is a shape and is drawn there,
+            // so the current row keeps one. Inset, so a focused row's ring (2px
+            // outside) reads as a different thing.
             return (
                 `${structural} ${layoutClasses} bg-nav-menu-active ` +
-                "text-nav-menu-item-active hover:bg-nav-menu-active " +
-                "active:bg-nav-menu-active-hover"
+                "font-semibold text-nav-menu-item-active hover:bg-nav-menu-active " +
+                "active:bg-nav-menu-active-hover " +
+                "forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2"
             );
         }
 
-        return `${structural} ${layoutClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-surface-active`;
+        return `${structural} ${layoutClasses} font-medium text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-surface-active`;
     }
 
     function handleNavigate(item: SidebarNavigationItem, event: MouseEvent) {
@@ -285,11 +349,19 @@
     {ariaLabel}
     class={classAttr}
     className={legacyClass}
+    {mobile}
+    bind:isOpen
+    {trigger}
+    {drawerTitle}
+    {closeLabel}
+    {onclose}
+    {label}
     {...restProps}
 >
     {#snippet header()}
             {#if showBrandRow}
                 <SidebarBrandHeader
+                    strings={handedOn}
                     collapsed={isCollapsed}
                     {brandName}
                     logoSrc={logoSrc.trim()}
@@ -322,6 +394,7 @@
                             <Button
                                 variant={searchTriggerVariant}
                                 size={searchTriggerSize}
+                                class="min-h-9 pointer-coarse:min-h-11"
                                 fullWidth
                                 onclick={handleSearchClick}
                             >
@@ -349,7 +422,7 @@
                             bind:value={searchValue}
                             placeholder={searchPlaceholder}
                             aria-label={searchPlaceholder}
-                            class="focus-ring focus-ring--nav w-full min-w-0 min-h-10 rounded-container border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-border/60 hover:!bg-nav-menu-hover focus:!bg-transparent"
+                            class="focus-ring focus-ring--nav w-full min-w-0 min-h-9 pointer-coarse:min-h-11 rounded-container border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-input-border hover:!bg-input-hover focus:!bg-transparent"
                         />
                     </div>
                 {/if}
@@ -358,16 +431,16 @@
 
         {#if hasFilteredItems}
             <div
-                class="flex w-full min-w-0 flex-col divide-y divide-border"
+                class="flex w-full min-w-0 flex-col gap-5"
             >
                 {#each primarySectionGroups as group, gi (`${gi}-${group.sectionLabel ?? "x"}`)}
-                    <div class="py-4 first:pt-1 last:pb-1">
+                    <div>
                         <SidebarNavSection
                             title={group.sectionLabel ?? ""}
                             sectionKey={`p-${gi}`}
                             listAriaLabel={group.sectionLabel
-                                ? `${group.sectionLabel} navigation`
-                                : "Primary navigation"}
+                                ? text.sectionNavigation(group.sectionLabel)
+                                : text.primaryNavigation}
                             collapsed={isCollapsed}
                         >
                             {#each group.items as item (item.id)}
@@ -393,23 +466,17 @@
                                         aria-current={getAriaCurrent(item)}
                                         aria-label={isCollapsed ? item.label : undefined}
                                     >
-                                        {#if isItemActive(item)}
-                                            <span
-                                                class="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-pill bg-nav-menu-item-active"
-                                                aria-hidden="true"
-                                            ></span>
-                                        {/if}
                                         {#if Icon}
                                             <span
                                                 class={iconContainerClasses}
                                                 aria-hidden="true"
                                             >
-                                                <Icon size={18} />
+                                                <Icon size={20} />
                                             </span>
                                         {/if}
                                         {#if !isCollapsed}
                                             <span
-                                                class="text-sm font-medium leading-snug text-inherit"
+                                                class="text-sm leading-snug text-inherit"
                                                 >{item.label}</span
                                             >
                                         {/if}
@@ -447,12 +514,12 @@
 
             {#if filteredSecondaryItems.length > 0}
                 <div
-                    class="mt-3 border-t border-border pt-4"
+                    class="mt-5"
                     role="presentation"
                 >
                     <SidebarNavSection
                         sectionKey="secondary"
-                        listAriaLabel="Secondary navigation"
+                        listAriaLabel={text.secondaryNavigation}
                         collapsed={isCollapsed}
                     >
                         {#each filteredSecondaryItems as item (item.id)}
@@ -473,12 +540,12 @@
                                             class={iconContainerClasses}
                                             aria-hidden="true"
                                         >
-                                            <Icon size={18} />
+                                            <Icon size={20} />
                                         </span>
                                     {/if}
                                     {#if !isCollapsed}
                                         <span
-                                            class="text-sm font-medium leading-snug text-inherit"
+                                            class="text-sm leading-snug text-inherit"
                                             >{item.label}</span
                                         >
                                     {/if}
@@ -490,22 +557,22 @@
             {/if}
         {:else}
             <div
-                class="rounded-container border border-border border-dashed bg-transparent px-4 py-4 ring-1 ring-border/60"
+                class="rounded-container border border-border border-dashed bg-transparent px-4 py-4"
             >
                 <h3 class="text-sm font-semibold {getTextToneClass()}">
                     {normalizedSearchTerm && searchMode === "input"
-                        ? "No matching navigation items"
+                        ? text.noMatchesTitle
                         : emptyStateTitle}
                 </h3>
                 <p class="mt-1 text-sm {getTextToneClass(true)}">
                     {normalizedSearchTerm && searchMode === "input"
-                        ? `No results found for "${searchValue}". Try another keyword.`
+                        ? text.noMatchesDescription(searchValue)
                         : emptyStateDescription}
                 </p>
                 {#if !(normalizedSearchTerm && searchMode === "input")}
                     <button
                         type="button"
-                        class="focus-ring focus-ring--nav mt-3 inline-flex min-h-10 cursor-pointer items-center rounded-control bg-action-primary px-3 py-2 text-sm font-medium text-action-primary outline-none transition-colors hover:bg-action-primary-hover"
+                        class="focus-ring focus-ring--nav mt-3 inline-flex min-h-9 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 outline-none transition-colors hover:bg-action-primary-hover"
                         onclick={handleEmptyStateAction}
                     >
                         {emptyStateActionLabel}
@@ -516,6 +583,7 @@
     {#snippet footer({ insetX })}
         <SidebarFooter
             collapsed={isCollapsed}
+            strings={handedOn}
         {showProfile}
         {profileName}
         {profileEmail}

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,12 @@ 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;
@@ -61,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,7 +1,9 @@
 <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";
 
@@ -18,6 +20,7 @@
         /** @deprecated use `class`. */
         className?: string;
         widthClass?: string;
+        /** Both values draw the same flat card now (D127); the prop stays so existing usage compiles. */
         variant?: "plain" | "elevated";
         ariaLabel?: string;
         title?: string;
@@ -46,10 +49,10 @@
         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 = "",
@@ -61,6 +64,22 @@
         ...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}`));
@@ -74,22 +93,20 @@
             : items,
     );
 
-    const isElevated = $derived(variant === "elevated");
-
     const containerClasses = $derived.by(() => {
         const resolvedWidthClass = widthClass.trim() || "w-80";
-        const shell = isElevated
-            ? "rounded-container border border-border bg-card text-headline shadow-sm ring-1 ring-border/50"
-            : "rounded-container border border-border bg-card text-headline shadow-sm";
+        const shell = "rounded-container border border-border bg-card text-headline";
         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-control px-3 py-2 text-left transition-colors duration-150";
+            "focus-ring focus-ring--nav w-full cursor-pointer min-h-9 pointer-coarse:min-h-11 rounded-control px-3 py-2 text-left transition-colors duration-(--duration-base) ease-standard";
         if (isActive) {
-            return `${baseClasses} bg-nav-menu-active text-inherit shadow-sm ring-1 ring-border/80`;
+            // The fill is 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-nav-menu-item-active 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-surface-active`;
     }
@@ -124,7 +141,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-control 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}
         >
@@ -145,7 +162,7 @@
                 bind:value={searchValue}
                 placeholder={searchPlaceholder}
                 aria-label={searchPlaceholder}
-                class="w-full min-w-0 min-h-10 rounded-container 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-9 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}
@@ -169,12 +186,12 @@
                                         class="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center text-current"
                                         aria-hidden="true"
                                     >
-                                        <Icon size={18} />
+                                        <Icon size={20} />
                                     </span>
                                 {/if}
                                 <span class="min-w-0">
                                     <span
-                                        class="block truncate text-sm font-medium text-current"
+                                        class={cn("block truncate text-sm text-current", selectedItemId === item.id ? "font-semibold" : "font-medium")}
                                     >
                                         {item.label}
                                     </span>
@@ -197,14 +214,14 @@
         </ul>
     {:else}
         <div
-            class="rounded-container border border-dashed border-border bg-transparent px-4 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-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"
+                    class="mt-3 inline-flex min-h-9 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

@@ -14,6 +14,7 @@ interface Props {
     /** @deprecated use `class`. */
     className?: string;
     widthClass?: string;
+    /** Both values draw the same flat card now (D127); the prop stays so existing usage compiles. */
     variant?: "plain" | "elevated";
     ariaLabel?: string;
     title?: string;