zabi-components 8.1.0 → 9.0.0

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

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import { type AppShellNavigationContext, type AppShellNavigationMode } from "../util/app-shell.js";
 /**
  * The layout of a phone app: a bar at the top, content that scrolls, a
  * tab bar at the bottom, and none of it under the notch or the home
@@ -7,7 +8,9 @@ import type { HTMLAttributes } from "svelte/elements";
  *
  * The shell is exactly as tall as the visible screen (`100dvh`, so the
  * browser's own bars are accounted for) and only the middle scrolls. The
- * header stays at the top of that scrolling area; the footer sits below it.
+ * header stays at the top of that scrolling area. The footer lies over
+ * the bottom of it, so content passes beneath both bars: they are the
+ * page colour at rest and turn to glass once content is under them.
  *
  * ```svelte
  * <AppShell>
@@ -25,11 +28,40 @@ import type { HTMLAttributes } from "svelte/elements";
  * take, safe areas included, so anything inside the shell can stay clear
  * of them:
  *
- * - `--app-shell-top-inset`: the height of the header;
+ * - `--app-shell-top-inset`: the height of the header (with an `AppBar`
+ *   `largeTitle`, the height it condenses to);
  * - `--app-shell-bottom-inset`: the height of the footer.
  *
- * Without a bar the value is the safe-area inset alone. The host is the
- * containing block for anything positioned inside it, and such an element
+ * Without a bar the value is the safe-area inset alone. With a footer the
+ * content takes the bottom inset as padding and the scroller as
+ * `scroll-padding-bottom`, so the end of the content and a focused field
+ * clear the footer.
+ *
+ * A third, on the scroller, is for what sits in the content and has to
+ * stay above the footer (`StickyActionBar` and `UnsavedChangesBar` read it):
+ *
+ * - `--app-shell-footer-overlay`: the bottom inset when a footer lies over
+ *   the scroller, `0px` when there is no footer.
+ *
+ * The host also says where content is: `data-scrolled-top="true"` once it
+ * has scrolled under the header, `data-scrolled-bottom="true"` while it
+ * passes under the footer (both `"false"` on the server and before the
+ * first measurement). The bars read the same state.
+ *
+ * To let the consumer choose what stays, compose the header from
+ * `AppShellHeaderPart`s: each says `sticky` (the default) or `sticky={false}`
+ * and scrolls away with the content, so a bar can leave while the filter
+ * row stays, or a large title can go while the bar and the tabs stay. The
+ * shell measures the parts to stack the ones that stick, reports only
+ * what is stuck as `--app-shell-top-inset` and `scroll-padding-top`, and
+ * puts the glass and the hairline under the lowest one. Without parts the
+ * header is one block that sticks, as before.
+ *
+ * With `canvas` the shell is painted with the page colour and the brand
+ * wash (`bg-canvas`), and the header bar rests transparent so the wash
+ * shows through it.
+ *
+ * The host is the containing block for anything positioned inside it, and such an element
  * does not scroll with the content, so a floating button above the tab bar
  * is `absolute` with `bottom: calc(var(--app-shell-bottom-inset) + 1rem)`.
  *
@@ -37,9 +69,41 @@ import type { HTMLAttributes } from "svelte/elements";
  * `<html>`, so an overlay that is moved to `document.body` (a sheet, a
  * toast) can read them too. With more than one shell on the page, the one
  * mounted last is the one mirrored there.
+ *
+ * With `navigation` the shell holds one navigation that is drawn as tabs
+ * over the bottom of the screen on a phone, a rail on a tablet and a
+ * sidebar on a desktop, and the app writes one layout, not three
+ * (`AppNavigation` is the ready-made content). The snippet is rendered
+ * once and only CSS moves it, so the server's markup is right at every
+ * width and nothing jumps when scripts load. As tabs it lies over the
+ * bottom like `footer` (the footer then sits directly above it); as a
+ * rail or sidebar it is a full-height column at the inline start, and the
+ * header, content and footer take the rest. The host says which with
+ * `data-navigation-placement`, and the bottom inset counts the tabs, so a
+ * sticky action bar or a floating button clears them too.
+ *
+ * ```svelte
+ * <AppShell>
+ *     {#snippet header()}<AppBar title="Quizrundan" largeTitle />{/snippet}
+ *     {#snippet navigation()}<AppNavigation {items} active={page.url.pathname} />{/snippet}
+ *     <div class="p-4">…</div>
+ * </AppShell>
+ * ```
+ *
+ * One more custom property: `--app-shell-start-inset`, the width of the
+ * rail or sidebar (`0px` as tabs), also mirrored onto `<html>`.
+ *
+ * With `flushTop` and no `header` the content starts at the top edge of
+ * the screen, under the status bar, so a block of colour at the top of it
+ * can run there. The content then handles the safe area itself: pad by
+ * `--app-shell-top-inset`, or let an `AppBar position="static"` in the
+ * block do it.
  */
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> & {
-    /** The top bar, an `AppBar`. It handles the safe area above it. */
+    /**
+     * The top bar, an `AppBar`. It handles the safe area above it. Or
+     * several `AppShellHeaderPart`s, each of which sticks or scrolls away.
+     */
     header?: Snippet;
     /** The scrolling content, rendered in the element `contentElement` names. */
     children?: Snippet;
@@ -50,8 +114,40 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "style"> & {
      * its own.
      */
     contentElement?: "main" | "div";
-    /** The bottom bar, a `BottomTabBar`. It handles the safe area below it. */
+    /**
+     * The bottom bar, a `BottomTabBar`. It lies over the bottom of the
+     * scrolling area and handles the safe area below it.
+     */
     footer?: Snippet;
+    /**
+     * Paints the shell with the page colour and the brand wash (`bg-canvas`)
+     * instead of the plain page colour, and lets the wash show through the
+     * header bar at rest.
+     */
+    canvas?: boolean;
+    /**
+     * One navigation, drawn as tabs, a rail or a sidebar by
+     * `navigationPlacement`. Rendered once, first in the DOM: the Tab order
+     * is navigation, header, content. `placement` is the forced value, or
+     * in `auto` what the viewport says once mounted (`tabs` on the server
+     * and before mount); use it only to render different markup per
+     * placement, since the layout itself is CSS and right without it.
+     */
+    navigation?: Snippet<[AppShellNavigationContext]>;
+    /**
+     * Where the `navigation` goes. `auto` follows the viewport in CSS:
+     * tabs below 48rem (768px), a rail from 48rem, a sidebar from 64rem
+     * (1024px). The others apply at every width.
+     */
+    navigationPlacement?: AppShellNavigationMode;
+    /**
+     * Without a `header`, leaves out the padding the content has for the
+     * status bar and the notch, so it starts at the top of the screen and
+     * handles the safe area itself. `--app-shell-top-inset` keeps its
+     * value. With a `header` it does nothing: the header covers the safe
+     * area.
+     */
+    flushTop?: boolean;
     class?: string;
     /** Added after the two custom properties the shell sets. */
     style?: string;

package/dist/organisms/AppShellHeaderPart.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { getAppShell, markAppShell } from "../util/app-shell.js";
+    import { cn } from "../util/cn.js";
+
+    /**
+     * One part of an `AppShell` header, and the choice of whether it stays at
+     * the top of the screen or scrolls away with the content.
+     *
+     * Put the parts side by side in the shell's `header` snippet, in the order
+     * they are drawn: an `AppBar`, a search field, a row of filter chips,
+     * tabs, anything. The shell leaves a header without parts as it was (the
+     * whole header sticks).
+     *
+     * ```svelte
+     * <AppShell>
+     *     {#snippet header()}
+     *         <AppShellHeaderPart sticky={false}><AppBar title="Quizzes" /></AppShellHeaderPart>
+     *         <AppShellHeaderPart class="px-4 py-2"><FilterChips /></AppShellHeaderPart>
+     *     {/snippet}
+     *     …
+     * </AppShell>
+     * ```
+     *
+     * A part that sticks is in the flow like any other, so nothing is measured
+     * to make a part that does not stick leave: it is content. Parts that
+     * stick stack under one another in the order of the document, with no gap
+     * and no overlap, however many parts that do not stick are between them.
+     * The shell measures the heights to place them, and reports only what
+     * covers content at that moment as `--app-shell-top-inset` (so
+     * `scroll-padding-top`, a focused field and an anchor clear exactly the
+     * stuck parts).
+     *
+     * The parts look like one surface: the page colour at rest, glass and one
+     * hairline under the lowest stuck part once content is under it. The
+     * status bar is covered by whatever is topmost: an `AppBar` pads for it
+     * itself, any other first part gets the padding, and a part that sticks
+     * further down has a strip of the same surface above it.
+     *
+     * Keep the parts that stick short: with more than 40% of the screen
+     * covered (landscape, 200% text), the lower ones stop sticking and scroll
+     * with the content (`data-released`).
+     *
+     * An `AppBar` with `largeTitle` condenses inside its part as it does in a
+     * header without parts. `collapseOnScroll` is for a header without parts;
+     * in a part that sticks it leaves its space behind.
+     */
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+        /** The part's content. */
+        children?: Snippet;
+        /**
+         * Stays at the top of the screen under the parts that stick above it
+         * (`true`, the default), or scrolls away with the content (`false`).
+         */
+        sticky?: boolean;
+        class?: string;
+    };
+
+    let { children, sticky = true, class: className = "", ...restProps }: Props = $props();
+
+    const shell = getAppShell();
+
+    /** How far this part sticks above the top: a large title's row (px), told by the `AppBar` inside it. */
+    let overscroll = $state(0);
+
+    // The bars inside report to this part, not to the shell: the part is the thing that sticks.
+    if (shell) {
+        markAppShell({
+            get scrolledTop() {
+                return shell.scrolledTop;
+            },
+            get scrolledBottom() {
+                return shell.scrolledBottom;
+            },
+            get footerOverlays() {
+                return shell.footerOverlays;
+            },
+            get footerHeight() {
+                return shell.footerHeight;
+            },
+            get navigationPlacement() {
+                return shell.navigationPlacement;
+            },
+            setHeaderOverscroll(px) {
+                overscroll = px > 0 ? px : 0;
+            },
+        });
+    }
+</script>
+
+<!-- The glass and the hairline are the bar surface (`material-bar`). It is left
+off a part that holds an `AppBar`, which has its own; the stylesheet below also
+takes the hairline off every stuck part but the lowest. -->
+<div
+    data-app-shell-part
+    data-sticky={String(sticky)}
+    data-overscroll={overscroll > 0 ? overscroll : undefined}
+    data-scrolled-under={sticky ? String(shell?.scrolledTop ?? false) : undefined}
+    class={cn("shrink-0", sticky && "material-bar", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>
+
+<style>
+    /*
+     * Global on purpose: the rules read the shell's own markup (the header
+     * wrapper, the strip) and the part's siblings, and a scoped class would
+     * not reach an AppBar inside it.
+     *
+     * A part that sticks. The offset is written by the shell once it has
+     * measured (`--app-shell-part-top`); until then, on the server and without
+     * scripts, the first part sticks at 0 (it is the top, or an AppBar that
+     * pads the status bar itself) or under the status bar strip, and a later
+     * one under an estimate of an AppBar.
+     */
+    :global([data-app-shell-part][data-sticky="true"]:not([data-released])) {
+        position: sticky;
+        z-index: var(--z-sticky);
+        top: var(--app-shell-part-top, env(safe-area-inset-top, 0px));
+    }
+    :global([data-app-shell-header] > [data-app-shell-part][data-sticky="true"]:not([data-released]):first-child),
+    :global([data-app-shell-part][data-sticky="true"]:not([data-released]):has([data-appbar])) {
+        top: var(--app-shell-part-top, 0px);
+    }
+    :global(
+        [data-app-shell-part][data-sticky="true"]:not([data-released])
+            ~ [data-app-shell-part][data-sticky="true"]:not([data-released])
+    ) {
+        top: var(--app-shell-part-top, calc(56px + env(safe-area-inset-top, 0px)));
+    }
+
+    /* Released on a short screen: the surface goes with the stickiness. */
+    :global([data-app-shell-part][data-released]::before) {
+        display: none;
+    }
+
+    /* An AppBar inside has the surface already. */
+    :global([data-app-shell-part]:has([data-appbar])::before) {
+        display: none;
+    }
+
+    /* One surface, one hairline: only the lowest stuck part draws it (in forced colours too). */
+    :global(
+        [data-app-shell-part][data-sticky="true"]:not([data-released]):has(
+                ~ [data-app-shell-part][data-sticky="true"]:not([data-released])
+            )::before
+    ),
+    :global(
+        [data-app-shell-part][data-sticky="true"]:not([data-released]):has(
+                ~ [data-app-shell-part][data-sticky="true"]:not([data-released])
+            )
+            .material-bar::before
+    ) {
+        border-color: transparent !important;
+    }
+
+    /* The first part reaches the top of the screen: it clears the status bar, unless an AppBar does. */
+    :global([data-app-shell-header] > [data-app-shell-part]:first-child:not(:has([data-appbar]))) {
+        padding-top: env(safe-area-inset-top, 0px);
+    }
+</style>

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

@@ -0,0 +1,57 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+/**
+ * One part of an `AppShell` header, and the choice of whether it stays at
+ * the top of the screen or scrolls away with the content.
+ *
+ * Put the parts side by side in the shell's `header` snippet, in the order
+ * they are drawn: an `AppBar`, a search field, a row of filter chips,
+ * tabs, anything. The shell leaves a header without parts as it was (the
+ * whole header sticks).
+ *
+ * ```svelte
+ * <AppShell>
+ *     {#snippet header()}
+ *         <AppShellHeaderPart sticky={false}><AppBar title="Quizzes" /></AppShellHeaderPart>
+ *         <AppShellHeaderPart class="px-4 py-2"><FilterChips /></AppShellHeaderPart>
+ *     {/snippet}
+ *     …
+ * </AppShell>
+ * ```
+ *
+ * A part that sticks is in the flow like any other, so nothing is measured
+ * to make a part that does not stick leave: it is content. Parts that
+ * stick stack under one another in the order of the document, with no gap
+ * and no overlap, however many parts that do not stick are between them.
+ * The shell measures the heights to place them, and reports only what
+ * covers content at that moment as `--app-shell-top-inset` (so
+ * `scroll-padding-top`, a focused field and an anchor clear exactly the
+ * stuck parts).
+ *
+ * The parts look like one surface: the page colour at rest, glass and one
+ * hairline under the lowest stuck part once content is under it. The
+ * status bar is covered by whatever is topmost: an `AppBar` pads for it
+ * itself, any other first part gets the padding, and a part that sticks
+ * further down has a strip of the same surface above it.
+ *
+ * Keep the parts that stick short: with more than 40% of the screen
+ * covered (landscape, 200% text), the lower ones stop sticking and scroll
+ * with the content (`data-released`).
+ *
+ * An `AppBar` with `largeTitle` condenses inside its part as it does in a
+ * header without parts. `collapseOnScroll` is for a header without parts;
+ * in a part that sticks it leaves its space behind.
+ */
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    /** The part's content. */
+    children?: Snippet;
+    /**
+     * Stays at the top of the screen under the parts that stick above it
+     * (`true`, the default), or scrolls away with the content (`false`).
+     */
+    sticky?: boolean;
+    class?: string;
+};
+declare const AppShellHeaderPart: import("svelte").Component<Props, {}, "">;
+type AppShellHeaderPart = ReturnType<typeof AppShellHeaderPart>;
+export default AppShellHeaderPart;

package/dist/organisms/SidebarNavigation.svelte

@@ -252,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(
@@ -266,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 (
@@ -288,26 +281,25 @@
     function getNavItemClasses(item: SidebarNavigationItem): string {
         const isActive = isItemActive(item);
         const layoutClasses = isCollapsed
-            ? "flex min-h-10 pointer-coarse:min-h-11 items-center justify-center px-0 py-2"
-            : "flex min-h-10 pointer-coarse:min-h-11 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 all three cues are gone: fills (the tint and
-            // the bar) become the canvas 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
+            // 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 " +
+                "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) {
@@ -402,6 +394,7 @@
                             <Button
                                 variant={searchTriggerVariant}
                                 size={searchTriggerSize}
+                                class="min-h-9 pointer-coarse:min-h-11"
                                 fullWidth
                                 onclick={handleSearchClick}
                             >
@@ -429,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 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"
+                            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}
@@ -438,10 +431,10 @@
 
         {#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}`}
@@ -473,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}
@@ -527,7 +514,7 @@
 
             {#if filteredSecondaryItems.length > 0}
                 <div
-                    class="mt-3 border-t border-border pt-4"
+                    class="mt-5"
                     role="presentation"
                 >
                     <SidebarNavSection
@@ -553,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}
@@ -585,7 +572,7 @@
                 {#if !(normalizedSearchTerm && searchMode === "input")}
                     <button
                         type="button"
-                        class="focus-ring focus-ring--nav mt-3 inline-flex min-h-10 pointer-coarse:min-h-11 cursor-pointer items-center rounded-control bg-action-primary px-3 py-2 text-sm font-medium text-action-primary 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}

package/dist/organisms/SidebarPanel.svelte

@@ -20,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;
@@ -92,25 +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"
-            : "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) {
-            // The fill, the shadow and the ring are all dropped in forced
-            // colours; an outline is drawn there, so the selected item keeps
-            // a shape of its own.
-            return `${baseClasses} bg-nav-menu-active text-inherit shadow-sm ring-1 ring-border forced-colors:outline-solid forced-colors:outline-2 forced-colors:-outline-offset-2`;
+            // 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`;
     }
@@ -166,7 +162,7 @@
                 bind:value={searchValue}
                 placeholder={searchPlaceholder}
                 aria-label={searchPlaceholder}
-                class="w-full min-w-0 min-h-10 pointer-coarse:min-h-11 rounded-container border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-input-border hover:!bg-nav-menu-hover focus:!bg-transparent focus-ring focus-ring--nav"
+                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}
@@ -190,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>
@@ -225,7 +221,7 @@
             {#if emptyStateActionLabel.trim() && onEmptyStateAction}
                 <button
                     type="button"
-                    class="mt-3 inline-flex min-h-10 pointer-coarse:min-h-11 cursor-pointer items-center rounded-control bg-action-primary px-3 py-2 text-sm font-medium text-action-primary transition-colors hover:bg-action-primary-hover focus-ring focus-ring--nav"
+                    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;

package/dist/organisms/SidebarShell.svelte

@@ -150,9 +150,8 @@
 
     const containerClasses = $derived.by(() => {
         const widthClass = isCollapsed ? "w-[72px]" : "w-[266px]";
-        const railSurface = "border-r border-border bg-background text-headline";
-        const cardSurface =
-            "border-r border-border bg-background text-headline shadow-sm";
+        const railSurface = "border-r border-border-weak bg-surface-chrome text-headline";
+        const cardSurface = "border-r border-border-weak bg-surface-chrome text-headline";
         const surfaceClasses = isCard ? cardSurface : railSurface;
         const verticalPad = isCard ? "py-4" : "py-5";
         // `flex` and `max-lg:hidden` must not both apply below `lg`: with