@spaethtech/svelte-ui 0.7.1-dev.40.3d22ac0 → 0.7.1-dev.42.aca96e0

package/.claude/skills/themes/SKILL.md

@@ -67,6 +67,8 @@ variant token at shared strengths, so every tinted surface is calculated identic
 
 ```
 --ui-tint-soft         12%   soft resting fill        (Badge fill, Alert `filled`)
+--ui-tint-divider      30%   soft internal divider    (CardHeader/CardFooter separators; the default
+                                                        secondary divider is `--ui-border-color`)
 --ui-tint-border       50%   bordered surface, REST   (Badge/Alert/Banner ring · Card/DataTable/Input/
                                                         TextArea frame · Button outline)
 --ui-tint-border-hover 80%   bordered field, HOVER    (Input/TextArea/Card/DataTable/Button — the
@@ -78,6 +80,8 @@ e.g. `color-mix(in srgb, var(<variant-token>) var(--ui-tint-soft), transparent)`
 primary@these; a `neutral` one is text@these. Theme-independent (a theme MAY override them to tune the
 whole tint language). **Every bordered surface uses ONE calc** — `--ui-tint-border` at rest,
 `--ui-tint-border-hover` on hover/focus, from the variant token — with **no `secondary` special case**.
+Internal **dividers** (Card header/footer separators) use the softer `--ui-tint-divider` (30%) tier,
+likewise one calc per variant — so a divider always reads lighter than the frame at any variant.
 `--ui-border-color-strong`/`-strong-hover` have been **REMOVED** (migrate any consumer use to
 `color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)`, hover →
 `--ui-tint-border-hover`). (Distinct from the interactive tints above, which mix from `--ui-accent`.)

package/dist/components/CardFooter.svelte

@@ -36,11 +36,10 @@
   const sepGap: Record<Size, string> = { sm: "mt-2", md: "mt-3", lg: "mt-4" };
   // The separator is a SOFT internal divider, consistent with the other section splits/footers in the
   // library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
-  // Default (secondary) → the shared `--ui-border-color`; any other variant → that accent's tint.
+  // One calc for EVERY variant: the variant's token mixed at `--ui-tint-divider` (30%), not the 50%
+  // frame strength. `secondary` resolves identically to the shared `--ui-border-color`.
   const sepColor = $derived(
-    variant === "secondary"
-      ? "var(--ui-border-color)"
-      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+    `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-divider), transparent)`,
   );
 </script>
 

package/dist/components/CardHeader.svelte

@@ -36,11 +36,10 @@
   const sepGap: Record<Size, string> = { sm: "mb-2", md: "mb-3", lg: "mb-4" };
   // The separator is a SOFT internal divider, consistent with the other section splits/footers in the
   // library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
-  // Default (secondary) → the shared `--ui-border-color`; any other variant → that accent's tint.
+  // One calc for EVERY variant: the variant's token mixed at `--ui-tint-divider` (30%), not the 50%
+  // frame strength. `secondary` resolves identically to the shared `--ui-border-color`.
   const sepColor = $derived(
-    variant === "secondary"
-      ? "var(--ui-border-color)"
-      : `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
+    `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-divider), transparent)`,
   );
 </script>
 

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -4,7 +4,7 @@
  * bottom-anchored group (pushed to the strip's bottom edge), and hover-open
  * popouts for parent items.
  *
- * Driven by data — pass `topItems` / `bottomItems` arrays of {@link SideBarMenuItem}.
+ * Driven by data — pass `items` / `bottomItems` arrays of {@link SideBarMenuItem}.
  * Each item declares its own icon (Snippet), label, link, badge, and optional
  * children. Children render in a top-layer Popup on hover or click.
  *
@@ -33,6 +33,18 @@
    */
   export type SideBarMenuMode = "stepped" | "drawer" | "icon" | "expanded";
 
+  /** Imperative handle exposed via `bind:api`. */
+  export type SideBarMenuApi = {
+    /** Reset all transient state — close the drawer, clear the open popout, return step level to 0. */
+    reset: () => void;
+    /** Open the drawer (drawer/stepped modes). */
+    open: () => void;
+    /** Close the drawer. */
+    close: () => void;
+    /** Set the stepped-mode step level (`0` = top). */
+    setStepLevel: (n: number) => void;
+  };
+
   export type SideBarMenuBadgeVariant = "error" | "warning" | "info" | "success";
 
   export type SideBarMenuBadge = {
@@ -69,6 +81,15 @@
     badge?: SideBarMenuBadge;
     /** v1 renders only the first level; deeper levels emit a DEV warning. */
     children?: SideBarMenuItem[];
+    /** Action row (no `link`) — renders a `<button>` and calls this on click. For a "toggle"
+     *  row (an AI panel, etc.) or a non-navigating action. Runs after the drawer/popout reset. */
+    onclick?: (e: MouseEvent) => void;
+    /** Custom popout content, rendered INSTEAD of `children` in the popout (separators, hotkeys,
+     *  an account/identity block…). The row still needs an `icon`/`label`; this is just its popout. */
+    popout?: import("svelte").Snippet;
+    /** Opt this anchor out of client-side routing — stamps `data-sveltekit-reload` (SvelteKit) so
+     *  the link forces a full-browser navigation (sign-out endpoints, downloads, external redirects). */
+    reload?: boolean;
   };
 </script>
 
@@ -89,7 +110,7 @@
   type ModesMap = Partial<Record<Breakpoint, SideBarMenuMode>>;
 
   let {
-    topItems = [],
+    items = [],
     bottomItems = [],
     currentPath,
     size = "md",
@@ -100,9 +121,10 @@
     open = $bindable(false),
     stepLevel = $bindable(0),
     hamburger = true,
+    api = $bindable(),
     class: additionalClass = "",
   }: {
-    topItems?: SideBarMenuItem[];
+    items?: SideBarMenuItem[];
     bottomItems?: SideBarMenuItem[];
     currentPath: string;
     size?: Size;
@@ -149,6 +171,10 @@
      * and binds to `open`.
      */
     hamburger?: boolean;
+    /** Imperative handle (bindable). Call `api.reset()` from your router's navigation lifecycle
+     *  (SvelteKit `afterNavigate`, etc.) so a programmatic `goto()`/back-button closes the drawer +
+     *  any open popout and returns a stepped drawer to the top. */
+    api?: SideBarMenuApi;
     class?: string;
   } = $props();
 
@@ -202,23 +228,23 @@
 
   // ── DEV depth warning ───────────────────────────────────────────
   if (DEV) {
-    const walk = (items: SideBarMenuItem[], depth: number) => {
-      for (const it of items) {
+    const walk = (list: SideBarMenuItem[], depth: number, path: string[]) => {
+      for (const it of list) {
+        const here = [...path, it.label];
         if (it.children?.length) {
           if (depth >= 1) {
             console.warn(
-              'SideBarMenu: nesting deeper than 1 level is not yet rendered; flattening grandchildren of "' +
-                it.label +
-                '"',
+              `SideBarMenu: nesting deeper than 1 level is not yet rendered; flattening ` +
+                `grandchildren of "${here.join(" › ")}"`,
             );
             return;
           }
-          walk(it.children, depth + 1);
+          walk(it.children, depth + 1, here);
         }
       }
     };
-    walk(topItems, 0);
-    walk(bottomItems, 0);
+    walk(items, 0, []);
+    walk(bottomItems, 0, []);
   }
 
   // ── Size axis ───────────────────────────────────────────────────
@@ -327,6 +353,15 @@
     stepLevel = 1;
   }
 
+  // Imperative handle for consumers (bound via `bind:api`). Assigned once — the closures read the
+  // reactive `open`/`stepLevel`/`openId` live, so a single assignment stays correct.
+  api = {
+    reset: closeAfterNav,
+    open: () => (open = true),
+    close: () => (open = false),
+    setStepLevel: (n: number) => (stepLevel = n),
+  };
+
   // Label / chevron visibility are now driven by the active mode
   // instead of by responsive class strings — the matchMedia effect
   // above keeps `currentMode` (and therefore `labelsVisible`) in sync
@@ -503,18 +538,21 @@
 		     `chevronVisibility` (not `labelClassResolved`) so the span
 		     stays `inline-flex` and the SVG centers vertically. -->
     <span
-      class="shrink-0 items-center justify-center opacity-60 {sz.chevronBox} {sz.chevronSvg} {chevronClass}"
+      class="shrink-0 items-center justify-center opacity-60 transition-transform duration-150 {isOpen
+        ? 'rotate-180'
+        : ''} {sz.chevronBox} {sz.chevronSvg} {chevronClass}"
     >
       <IconChevronRight />
     </span>
   {/if}
 {/snippet}
 
-<!-- Single row template — used by topItems / bottomItems and the popout. -->
+<!-- Single row template — used by items / bottomItems and the popout. -->
 {#snippet row(item: SideBarMenuItem, opts: { id?: ItemId; isPopoutChild?: boolean })}
   {@const active = isItemActive(item)}
+  {@const ownActive = !!item.link && currentPath.startsWith(item.link)}
   {@const hasChildren = (item.children?.length ?? 0) > 0}
-  {@const isParent = hasChildren && !opts.isPopoutChild}
+  {@const isParent = (hasChildren || !!item.popout) && !opts.isPopoutChild}
   {@const hasLink = !!item.link}
   {@const isOpen = !!opts.id && openId === opts.id}
   {@const rowClass = `group flex items-center w-full ${sz.row} lg:pr-3 transition-colors cursor-pointer ${active ? "[background-color:var(--ui-color-primary)] text-white" : isOpen ? "[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]" : "hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]"}`}
@@ -523,7 +561,8 @@
       href={item.link}
       use:refIntoMap={opts.id}
       class={rowClass}
-      aria-current={active ? "page" : undefined}
+      data-sveltekit-reload={item.reload ? "" : undefined}
+      aria-current={ownActive ? "page" : undefined}
       use:tooltip={{
         text: item.label,
         side: "right",
@@ -569,6 +608,21 @@
     >
       {@render rowBody(item, isParent, !!opts.isPopoutChild, isOpen)}
     </button>
+  {:else if item.onclick}
+    <!-- Action row: no link, no children/popout — a `<button>` that runs `onclick`
+         (e.g. an AI-panel toggle), then resets the drawer/popout like a leaf nav. -->
+    <button
+      type="button"
+      use:refIntoMap={opts.id}
+      class="{rowClass} text-left"
+      use:tooltip={{ text: item.label, side: "right" }}
+      onclick={(e) => {
+        item.onclick!(e);
+        closeAfterNav();
+      }}
+    >
+      {@render rowBody(item, false, !!opts.isPopoutChild, false)}
+    </button>
   {:else}
     <!-- Malformed item: no link, no children. Render visibly so the
 		     consumer notices, but with disabled-style cursor + opacity. -->
@@ -591,13 +645,17 @@
     onmouseenter={cancelClose}
     onmouseleave={scheduleClose}
   >
-    <ul class="flex flex-col">
-      {#each item.children ?? [] as child (child.label)}
-        <li class="list-none" role="none">
-          {@render row(child, { isPopoutChild: true })}
-        </li>
-      {/each}
-    </ul>
+    {#if item.popout}
+      {@render item.popout()}
+    {:else}
+      <ul class="flex flex-col">
+        {#each item.children ?? [] as child (child.label)}
+          <li class="list-none" role="none">
+            {@render row(child, { isPopoutChild: true })}
+          </li>
+        {/each}
+      </ul>
+    {/if}
   </div>
 {/snippet}
 
@@ -659,15 +717,15 @@
       {/each}
     </ul>
   {:else}
-    {#if topItems.length > 0}
+    {#if items.length > 0}
       <ul class="flex flex-col">
-        {#each topItems as item, idx (item.label)}
+        {#each items as item, idx (item.label)}
           {@const id = `top:${idx}` as ItemId}
           <li class="list-none">
             {@render row(item, { id })}
           </li>
-          {#if (item.children?.length ?? 0) > 0 && !isStepped}
-            {@const geom = geometryFor(id, "top", idx, topItems.length, item.children!.length)}
+          {#if ((item.children?.length ?? 0) > 0 || !!item.popout) && !isStepped}
+            {@const geom = geometryFor(id, "top", idx, items.length, item.children?.length ?? 1)}
             <Popup
               anchor={geom.anchor}
               open={openId === id}
@@ -685,7 +743,7 @@
       </ul>
     {/if}
 
-    {#if topItems.length > 0 && bottomItems.length > 0}
+    {#if items.length > 0 && bottomItems.length > 0}
       <div class="flex-1"></div>
     {/if}
 
@@ -696,13 +754,13 @@
           <li class="list-none">
             {@render row(item, { id })}
           </li>
-          {#if (item.children?.length ?? 0) > 0 && !isStepped}
+          {#if ((item.children?.length ?? 0) > 0 || !!item.popout) && !isStepped}
             {@const geom = geometryFor(
               id,
               "bottom",
               idx,
               bottomItems.length,
-              item.children!.length,
+              item.children?.length ?? 1,
             )}
             <Popup
               anchor={geom.anchor}

package/dist/components/SideBarMenu/SideBarMenu.svelte.d.ts

@@ -18,6 +18,17 @@
  *                 Designed for wide desktop.
  */
 export type SideBarMenuMode = "stepped" | "drawer" | "icon" | "expanded";
+/** Imperative handle exposed via `bind:api`. */
+export type SideBarMenuApi = {
+    /** Reset all transient state — close the drawer, clear the open popout, return step level to 0. */
+    reset: () => void;
+    /** Open the drawer (drawer/stepped modes). */
+    open: () => void;
+    /** Close the drawer. */
+    close: () => void;
+    /** Set the stepped-mode step level (`0` = top). */
+    setStepLevel: (n: number) => void;
+};
 export type SideBarMenuBadgeVariant = "error" | "warning" | "info" | "success";
 export type SideBarMenuBadge = {
     /** Color of the indicator. */
@@ -50,12 +61,21 @@ export type SideBarMenuItem = {
     badge?: SideBarMenuBadge;
     /** v1 renders only the first level; deeper levels emit a DEV warning. */
     children?: SideBarMenuItem[];
+    /** Action row (no `link`) — renders a `<button>` and calls this on click. For a "toggle"
+     *  row (an AI panel, etc.) or a non-navigating action. Runs after the drawer/popout reset. */
+    onclick?: (e: MouseEvent) => void;
+    /** Custom popout content, rendered INSTEAD of `children` in the popout (separators, hotkeys,
+     *  an account/identity block…). The row still needs an `icon`/`label`; this is just its popout. */
+    popout?: import("svelte").Snippet;
+    /** Opt this anchor out of client-side routing — stamps `data-sveltekit-reload` (SvelteKit) so
+     *  the link forces a full-browser navigation (sign-out endpoints, downloads, external redirects). */
+    reload?: boolean;
 };
 import type { Size } from "../../types/sizes.js";
 import { type Breakpoint } from "../../types/breakpoints.js";
 type ModesMap = Partial<Record<Breakpoint, SideBarMenuMode>>;
 type $$ComponentProps = {
-    topItems?: SideBarMenuItem[];
+    items?: SideBarMenuItem[];
     bottomItems?: SideBarMenuItem[];
     currentPath: string;
     size?: Size;
@@ -102,8 +122,12 @@ type $$ComponentProps = {
      * and binds to `open`.
      */
     hamburger?: boolean;
+    /** Imperative handle (bindable). Call `api.reset()` from your router's navigation lifecycle
+     *  (SvelteKit `afterNavigate`, etc.) so a programmatic `goto()`/back-button closes the drawer +
+     *  any open popout and returns a stepped drawer to the top. */
+    api?: SideBarMenuApi;
     class?: string;
 };
-declare const SideBarMenu: import("svelte").Component<$$ComponentProps, {}, "open" | "stepLevel">;
+declare const SideBarMenu: import("svelte").Component<$$ComponentProps, {}, "open" | "stepLevel" | "api">;
 type SideBarMenu = ReturnType<typeof SideBarMenu>;
 export default SideBarMenu;

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export type { Columns, Gap } from "./components/field-group.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
-export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, } from "./components/SideBarMenu/SideBarMenu.svelte";
+export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";
 export type { TabDefinition } from "./components/TabStrip/TabStrip.svelte";
 export { default as DataTable } from "./components/DataTable.svelte";

package/dist/theme.css

@@ -67,9 +67,10 @@
 	 *                                 Fixed, NOT scaled by `size`, so different-size controls share a
 	 *                                 corner. (Pills like Toggle/Badge use rounded-full; the tiny
 	 *                                 Checkbox box keeps its own small radius — not worth a token.)
-	 *  --ui-border-color              soft internal divider (row separators, section splits) */
+	 *  --ui-border-color              soft internal divider (row separators, section splits) —
+	 *                                 the default (secondary) divider, mixed at `--ui-tint-divider` */
   --ui-border-radius: 0.375rem;
-  --ui-border-color: color-mix(in srgb, var(--ui-color-secondary) 30%, transparent);
+  --ui-border-color: color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-divider), transparent);
 }
 
 /* One interactive-surface language, library-wide. A subtle tint of the ACCENT colour, so it lightens on
@@ -104,15 +105,17 @@
   /* Tint SCALE for a variant-tinted surface (Badge chip, Card frame, `filled` Alert…). The colour is
 	 * always the component's own variant token; these are the shared STRENGTHS it's mixed at, so every
 	 * tinted surface is calculated the same way — change one number here, every component follows:
-	 *   fill:   color-mix(in srgb, var(<token>) var(--ui-tint-soft),         transparent)   soft resting fill
-	 *   border: color-mix(in srgb, var(<token>) var(--ui-tint-border),       transparent)   divider/frame (rest)
-	 *   hover:  color-mix(in srgb, var(<token>) var(--ui-tint-border-hover), transparent)   bordered field, hover/focus
-	 *   text:   color-mix(in srgb, var(<token>) var(--ui-tint-strong), var(--ui-color-text))  foreground
+	 *   fill:    color-mix(in srgb, var(<token>) var(--ui-tint-soft),         transparent)   soft resting fill
+	 *   divider: color-mix(in srgb, var(<token>) var(--ui-tint-divider),      transparent)   soft internal divider
+	 *   border:  color-mix(in srgb, var(<token>) var(--ui-tint-border),       transparent)   frame / field border (rest)
+	 *   hover:   color-mix(in srgb, var(<token>) var(--ui-tint-border-hover), transparent)   bordered field, hover/focus
+	 *   text:    color-mix(in srgb, var(<token>) var(--ui-tint-strong), var(--ui-color-text))  foreground
 	 * A primary badge is primary@soft/border/strong; a neutral one is text@… — one calculation, any
 	 * variant. `--ui-tint-border-hover` is the STRONGER step an interactive bordered field (Input,
 	 * TextArea, an outline Button) moves to on hover/focus. Theme-independent constants (no colour → no
 	 * per-theme scope needed) — but a theme MAY override these to tune the whole tint language. */
   --ui-tint-soft: 12%;
+  --ui-tint-divider: 30%; /* soft internal dividers — deliberately lighter than the 50% frame/field border */
   --ui-tint-border: 50%;
   --ui-tint-border-hover: 80%;
   --ui-tint-strong: 80%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.40.3d22ac0",
+  "version": "0.7.1-dev.42.aca96e0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"