zabi-components 7.0.2 → 8.0.0

package/dist/atoms/Toggle.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
     import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
 
     interface Props {
+        /** Extra classes for the host element. */
+        class?: string;
+        /** Omit to auto-generate; pass to pair with an external `<label for>`. */
+        id?: string;
+        /** When set, a hidden input submits `value` with native forms while checked. */
+        name?: string;
+        value?: string;
         checked?: boolean;
         disabled?: boolean;
         loading?: boolean;
@@ -11,6 +19,10 @@
     }
 
     let {
+        class: className = "",
+        id: idProp,
+        name = "",
+        value = "on",
         checked = $bindable(false),
         disabled = false,
         loading = false,
@@ -20,7 +32,8 @@
         ...restProps
     }: Props = $props();
 
-    const toggleId = generateId("toggle");
+    const fallbackId = generateId("toggle");
+    const toggleId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
 
     function handleClick(event: MouseEvent) {
@@ -36,7 +49,7 @@
             "focus-ring relative inline-flex w-10 h-6 flex-shrink-0 rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus-visible:outline-none";
         const colorClass = checked
             ? "bg-action-primary hover:bg-action-primary-hover active:bg-action-primary-active"
-            : "bg-base-400 hover:bg-base-500 active:bg-base-500";
+            : "bg-control-track hover:bg-control-track-hover active:bg-control-track-active";
         const stateClass = isDisabled
             ? "opacity-50 cursor-not-allowed"
             : "cursor-pointer";
@@ -45,21 +58,13 @@
 
     const toggleThumbClasses = $derived(() => {
         const base =
-            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card shadow transition-transform duration-200 ease-in-out flex items-center justify-center";
+            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card shadow-sm transition-transform duration-200 ease-in-out flex items-center justify-center";
         const positionClasses = checked ? "translate-x-4" : "translate-x-0";
         return `${base} ${positionClasses}`;
     });
-
-    function handleKeydown(event: KeyboardEvent) {
-        if (isDisabled) return;
-        if (event.key === " " || event.key === "Enter") {
-            event.preventDefault();
-            handleClick(event as unknown as MouseEvent);
-        }
-    }
 </script>
 
-<div class="flex items-center gap-3">
+<div class={cn("flex items-center gap-3", className)}>
     <button
         type="button"
         role="switch"
@@ -69,7 +74,6 @@
         aria-busy={loading ? "true" : undefined}
         disabled={isDisabled}
         onclick={handleClick}
-        onkeydown={handleKeydown}
         class={toggleButtonClasses()}
         {...restProps}
     >
@@ -83,6 +87,10 @@
         </span>
     </button>
 
+    {#if name && checked}
+        <input type="hidden" {name} {value} />
+    {/if}
+
     {#if label}
         <label
             for={toggleId}

package/dist/atoms/Toggle.svelte.d.ts

@@ -1,4 +1,11 @@
 interface Props {
+    /** Extra classes for the host element. */
+    class?: string;
+    /** Omit to auto-generate; pass to pair with an external `<label for>`. */
+    id?: string;
+    /** When set, a hidden input submits `value` with native forms while checked. */
+    name?: string;
+    value?: string;
     checked?: boolean;
     disabled?: boolean;
     loading?: boolean;

package/dist/atoms/Tooltip.svelte

@@ -4,11 +4,27 @@
     import { onDestroy } from "svelte";
     import { generateId } from "../util/ssr-safe.js";
 
+    import { cn } from "../util/cn.js";
     type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
         content?: string;
         placement?: "top" | "bottom" | "left" | "right";
         delay?: number;
         disabled?: boolean;
+        /**
+         * Lay the trigger out as a full-width block instead of an inline-block.
+         * A prop rather than a `class="block w-full"` override, because `block`
+         * and `inline-block` are equal-specificity utilities: the winner would
+         * be whichever Tailwind emits later, not whichever the caller passed.
+         */
+        block?: boolean;
+        /**
+         * Position the bubble against the viewport instead of the trigger's
+         * offset parent. An absolutely-positioned tooltip cannot escape an
+         * ancestor that scrolls: a collapsed sidebar rail sits inside an
+         * `overflow-y-auto overflow-x-hidden` list, which clipped the bubble
+         * at the rail edge and left only the arrow showing.
+         */
+        fixed?: boolean;
         class?: string;
         children?: Snippet;
     };
@@ -22,10 +38,43 @@
         placement = "top",
         delay = 0,
         disabled = false,
+        block = false,
+        fixed = false,
+        class: className = "",
         children,
         ...restProps
     }: Props = $props();
 
+    let fixedStyle = $state("");
+
+    /** Gap must match --tooltip-gap's default (0.5rem). */
+    const FIXED_GAP = 8;
+
+    function positionFixed(): void {
+        if (!fixed || !triggerElement) return;
+        const r = triggerElement.getBoundingClientRect();
+        const coords = {
+            top: [r.left + r.width / 2, r.top - FIXED_GAP],
+            bottom: [r.left + r.width / 2, r.bottom + FIXED_GAP],
+            left: [r.left - FIXED_GAP, r.top + r.height / 2],
+            right: [r.right + FIXED_GAP, r.top + r.height / 2],
+        }[placement];
+        fixedStyle = `left:${coords[0]}px;top:${coords[1]}px;`;
+    }
+
+    $effect(() => {
+        if (!fixed || !isVisible) return;
+        positionFixed();
+        const onMove = () => positionFixed();
+        // `true` so ancestor scrolls (the nav list itself) are caught too.
+        window.addEventListener("scroll", onMove, true);
+        window.addEventListener("resize", onMove);
+        return () => {
+            window.removeEventListener("scroll", onMove, true);
+            window.removeEventListener("resize", onMove);
+        };
+    });
+
     const triggerId = generateId("tooltip-trigger");
     const tooltipId = generateId("tooltip");
     let isVisible = $state(false);
@@ -99,7 +148,11 @@
             clearShowDelay();
             clearHideBlurTimeout();
             isVisible = false;
-            triggerElement?.focus();
+            // Keep focus on the described control; never steal it when the tooltip was hover-only.
+            const target = triggerElement ? findDescribedTarget(triggerElement) : null;
+            if (target && triggerElement?.contains(document.activeElement)) {
+                target.focus();
+            }
         }
     }
 
@@ -145,8 +198,13 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <div
-    class="tooltip-container relative inline-block"
+    class={cn(
+        "tooltip-container relative",
+        block ? "block w-full" : "inline-block",
+        className,
+    )}
     data-placement={placement}
+    data-strategy={fixed ? "fixed" : "absolute"}
     data-disabled={disabled}
     onmouseenter={handleMouseEnter}
     onmouseleave={handleMouseLeave}
@@ -154,18 +212,19 @@
     onfocusout={handleBlur}
     {...restProps}
 >
-    <div bind:this={triggerElement} id={triggerId}>
+    <div bind:this={triggerElement} id={triggerId} class={block ? "w-full" : undefined}>
         {@render children?.()}
     </div>
 
     {#if content && !disabled}
         <div
             id={tooltipId}
-            class="tooltip pointer-events-none invisible absolute z-tooltip whitespace-normal wrap-break-word rounded-lg bg-tooltip-bg px-3 py-2 text-sm leading-5 text-tooltip-fg opacity-0 transition-[opacity,visibility,transform] duration-200 ease-in-out"
+            class="tooltip pointer-events-none invisible absolute z-tooltip whitespace-normal wrap-break-word rounded-control bg-tooltip-bg px-3 py-2 text-sm leading-5 text-tooltip-fg opacity-0 transition-[opacity,visibility,transform] duration-200 ease-in-out"
             role="tooltip"
             aria-hidden={!isVisible}
             data-visible={isVisible}
             data-placement={placement}
+            style={fixed ? fixedStyle : undefined}
         >
             {content}
         </div>
@@ -173,13 +232,7 @@
 </div>
 
 <style>
-    :root {
-        /* Cap only very long copy; width:max-content keeps typical sentences on one line until this limit */
-        --tooltip-max-width: min(24rem, calc(100vw - 2rem));
-        --tooltip-gap: 0.5rem;
-        --tooltip-arrow-size: 4px;
-    }
-
+    /* Tunables (override on :root or any ancestor): --tooltip-max-width, --tooltip-gap, --tooltip-arrow-size. Defaults live in the var() fallbacks. */
     /* max-width: policy forbids max-w-* utilities on packaged atoms; variable used by sm: override */
     .tooltip {
         width: -moz-max-content;
@@ -191,7 +244,7 @@
         inset-block-end: 100%;
         inset-inline-start: 50%;
         transform: translateX(-50%) translateY(4px) scale(0.95);
-        margin-block-end: var(--tooltip-gap);
+        margin-block-end: var(--tooltip-gap, 0.5rem);
     }
 
     .tooltip-container[data-placement="top"] .tooltip[data-visible="true"] {
@@ -204,7 +257,7 @@
         inset-block-start: 100%;
         inset-inline-start: 50%;
         transform: translateX(-50%) translateY(-4px) scale(0.95);
-        margin-block-start: var(--tooltip-gap);
+        margin-block-start: var(--tooltip-gap, 0.5rem);
     }
 
     .tooltip-container[data-placement="bottom"] .tooltip[data-visible="true"] {
@@ -217,7 +270,7 @@
         inset-inline-end: 100%;
         inset-block-start: 50%;
         transform: translateY(-50%) translateX(4px) scale(0.95);
-        margin-inline-end: var(--tooltip-gap);
+        margin-inline-end: var(--tooltip-gap, 0.5rem);
     }
 
     .tooltip-container[data-placement="left"] .tooltip[data-visible="true"] {
@@ -230,7 +283,7 @@
         inset-inline-start: 100%;
         inset-block-start: 50%;
         transform: translateY(-50%) translateX(-4px) scale(0.95);
-        margin-inline-start: var(--tooltip-gap);
+        margin-inline-start: var(--tooltip-gap, 0.5rem);
     }
 
     .tooltip-container[data-placement="right"] .tooltip[data-visible="true"] {
@@ -239,11 +292,20 @@
         transform: translateY(-50%) translateX(0) scale(1);
     }
 
+    /* Fixed strategy: the bubble is placed against the viewport from the
+       trigger's rect, so a scrolling ancestor cannot clip it. Insets and
+       margins are reset; the transforms above still do the centring. */
+    .tooltip-container[data-strategy="fixed"] .tooltip {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+    }
+
     .tooltip::before {
         content: "";
         position: absolute;
-        width: calc(var(--tooltip-arrow-size) * 2);
-        height: calc(var(--tooltip-arrow-size) * 2);
+        width: calc(var(--tooltip-arrow-size, 4px) * 2);
+        height: calc(var(--tooltip-arrow-size, 4px) * 2);
         background-color: var(--color-tooltip-bg);
     }
 
@@ -275,17 +337,13 @@
         clip-path: polygon(0 50%, 100% 0, 100% 100%);
     }
 
-    .tooltip-container[data-delay] .tooltip {
-        transition-delay: calc(var(--tooltip-delay, 0) * 1ms);
-    }
-
     @media (max-width: 640px) {
         .tooltip {
             --tooltip-max-width: calc(100vw - 2rem);
             inset-inline-start: 50% !important;
             inset-inline-end: auto !important;
             transform: translateX(-50%) scale(0.95) !important;
-            margin: var(--tooltip-gap) 0 !important;
+            margin: var(--tooltip-gap, 0.5rem) 0 !important;
         }
 
         .tooltip[data-visible="true"] {

package/dist/atoms/Tooltip.svelte.d.ts

@@ -5,6 +5,21 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
     disabled?: boolean;
+    /**
+     * Lay the trigger out as a full-width block instead of an inline-block.
+     * A prop rather than a `class="block w-full"` override, because `block`
+     * and `inline-block` are equal-specificity utilities: the winner would
+     * be whichever Tailwind emits later, not whichever the caller passed.
+     */
+    block?: boolean;
+    /**
+     * Position the bubble against the viewport instead of the trigger's
+     * offset parent. An absolutely-positioned tooltip cannot escape an
+     * ancestor that scrolls: a collapsed sidebar rail sits inside an
+     * `overflow-y-auto overflow-x-hidden` list, which clipped the bubble
+     * at the rail edge and left only the arrow showing.
+     */
+    fixed?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/index.d.ts

@@ -56,9 +56,11 @@ export { default as SidebarNavSection } from './molecules/SidebarNavSection.svel
 export { toastStore, pushToast, dismissToast, type ToastItem, type ToastLevel, } from './molecules/toast-store.js';
 export { default as TopNavbar } from './organisms/TopNavbar.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarShell } from './organisms/SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './organisms/SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
-export declare const generateId: (prefix?: string) => string;
+import { generateId } from './util/ssr-safe.js';
+export { generateId };
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, unknown>;

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEpF,OAAO,EACH,UAAU,EACV,SAAS,EACT,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,UAAU,GAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE1E,eAAO,MAAM,UAAU,GAAI,SAAQ,MAAa,KAAG,MAKlD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,SAAQ,MAAa,KAAG,MAA4B,CAAC;AAE9E,eAAO,MAAM,EAAE,GAAI,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAClC,CAAC;AAEtC,eAAO,MAAM,WAAW,GAAI,MAAM,eAAe,KAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAGzE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,OAG7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,OAAO,KAAG,OAEjD,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,OAE5B,CAAC;AAEF,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAEtC,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,QAAQ,GAAG,SAE1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAE7C,CAAC;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,GAAG,EACH,SAAS,EACT,SAAS,EACT,QAAQ,GACX,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/organisms/index.d.ts

@@ -1,5 +1,6 @@
 export { default as TopNavbar } from './TopNavbar.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
+export { default as SidebarShell } from './SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './SidebarPanel.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/util/cn.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Merge class values, last conflicting utility wins.
+ *
+ * Falsy entries are dropped, so `cn(base, isActive && activeClasses, className)`
+ * is safe.
+ */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/components/util/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../../src/components/util/cn.ts"],"names":[],"mappings":"AA6CA;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE5E"}

package/dist/components/util/ssr-safe.d.ts

@@ -9,9 +9,9 @@ export declare function safeDocument(): Document | undefined;
 export declare function safeLocalStorage(): Storage | undefined;
 export declare function safeSessionStorage(): Storage | undefined;
 export declare function safeRequestAnimationFrame(callback: FrameRequestCallback): number | undefined;
-export declare function safeSetTimeout(callback: () => void, delay: number): NodeJS.Timeout | undefined;
-export declare function safeClearTimeout(id: NodeJS.Timeout | undefined): void;
-export declare function safeSetInterval(callback: () => void, delay: number): NodeJS.Timeout | undefined;
-export declare function safeClearInterval(id: NodeJS.Timeout | undefined): void;
+export declare function safeSetTimeout(callback: () => void, delay: number): ReturnType<typeof setTimeout> | undefined;
+export declare function safeClearTimeout(id: ReturnType<typeof setTimeout> | undefined): void;
+export declare function safeSetInterval(callback: () => void, delay: number): ReturnType<typeof setInterval> | undefined;
+export declare function safeClearInterval(id: ReturnType<typeof setInterval> | undefined): void;
 export declare function generateId(prefix?: string): string;
 //# sourceMappingURL=ssr-safe.d.ts.map

package/dist/components/util/ssr-safe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ssr-safe.d.ts","sourceRoot":"","sources":["../../../src/components/util/ssr-safe.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED,wBAAgB,UAAU,IAAI,MAAM,GAAG,SAAS,CAE/C;AAED,wBAAgB,YAAY,IAAI,QAAQ,GAAG,SAAS,CAEnD;AAED,wBAAgB,gBAAgB,IAAI,OAAO,GAAG,SAAS,CAEtD;AAED,wBAAgB,kBAAkB,IAAI,OAAO,GAAG,SAAS,CAExD;AAED,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAE5F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,SAAS,CAE9F;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAIrE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,GAAG,SAAS,CAE/F;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAItE;AAGD,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAa,GAAG,MAAM,CAMxD"}
+{"version":3,"file":"ssr-safe.d.ts","sourceRoot":"","sources":["../../../src/components/util/ssr-safe.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED,wBAAgB,UAAU,IAAI,MAAM,GAAG,SAAS,CAE/C;AAED,wBAAgB,YAAY,IAAI,QAAQ,GAAG,SAAS,CAEnD;AAED,wBAAgB,gBAAgB,IAAI,OAAO,GAAG,SAAS,CAEtD;AAED,wBAAgB,kBAAkB,IAAI,OAAO,GAAG,SAAS,CAExD;AAED,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAE5F;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,SAAS,CAE7G;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,SAAS,GAAG,IAAI,CAIpF;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,GAAG,SAAS,CAE/G;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,GAAG,SAAS,GAAG,IAAI,CAItF;AAGD,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAa,GAAG,MAAM,CAMxD"}

package/dist/index.d.ts

@@ -56,9 +56,11 @@ export { default as SidebarNavSection } from './molecules/SidebarNavSection.svel
 export { toastStore, pushToast, dismissToast, type ToastItem, type ToastLevel, } from './molecules/toast-store.js';
 export { default as TopNavbar } from './organisms/TopNavbar.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarShell } from './organisms/SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './organisms/SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
-export declare const generateId: (prefix?: string) => string;
+import { generateId } from './util/ssr-safe.js';
+export { generateId };
 export declare const createId: (prefix?: string) => string;
 export declare const cn: (...classes: (string | undefined | null | false)[]) => string;
 export declare const getFormData: (form: HTMLFormElement) => Record<string, unknown>;

package/dist/index.js

@@ -56,14 +56,11 @@ export { default as SidebarNavSection } from './molecules/SidebarNavSection.svel
 export { toastStore, pushToast, dismissToast, } from './molecules/toast-store.js';
 export { default as TopNavbar } from './organisms/TopNavbar.svelte';
 export { default as SidebarNavigation } from './organisms/SidebarNavigation.svelte';
+export { default as SidebarShell } from './organisms/SidebarShell.svelte';
 export { default as SidebarAccountPanel } from './organisms/SidebarAccountPanel.svelte';
 export { default as SidebarPanel } from './organisms/SidebarPanel.svelte';
-export const generateId = (prefix = 'id') => {
-    if (typeof window !== 'undefined') {
-        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    return `${prefix}-ssr-${Date.now()}`;
-};
+import { generateId } from './util/ssr-safe.js';
+export { generateId };
 export const createId = (prefix = 'id') => generateId(prefix);
 export const cn = (...classes) => classes.filter(Boolean).join(' ');
 export const getFormData = (form) => {

package/dist/molecules/Alert.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { Check, TriangleAlert, X, Info, Zap } from "@lucide/svelte";
     import type { ExtendedSemanticVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
     type AlertVisualVariant = Exclude<ExtendedSemanticVariant, "default">;
 
     interface Props {
@@ -7,6 +9,12 @@
         title?: string;
         message?: string;
         closable?: boolean;
+        /** Visible state; `closable` dismiss sets it to `false`. Supports `bind:open`. */
+        open?: boolean;
+        /** Shrink to content instead of filling the container. */
+        inline?: boolean;
+        class?: string;
+        /** @deprecated use `class` — kept so 7.x call sites keep working. */
         className?: string;
         onclick?: (event: Event) => void;
     }
@@ -16,6 +24,9 @@
         title = "",
         message = "",
         closable = false,
+        open = $bindable(true),
+        inline = false,
+        class: classProp = "",
         className = "",
         onclick,
         children,
@@ -23,6 +34,7 @@
     }: Props & { children?: any } = $props();
 
     function handleDismiss(event: MouseEvent) {
+        open = false;
         if (onclick) {
             onclick(event);
         }
@@ -32,13 +44,20 @@
         variant === "default" ? "info" : variant,
     );
 
+    /**
+     * A tinted fill plus a tinted edge, not a bare 1px outline on a
+     * transparent ground — an outline-only alert on a light page barely
+     * registers, and the pale warning and citron borders were close to
+     * invisible. The icon carries the family colour at its `-text` step.
+     */
     let alertClasses = $derived({
-        info: "text-info border border-info",
-        success: "text-success border border-success",
-        warning: "text-warning border border-warning",
-        error: "text-error border border-error",
-        neutral: "text-neutral border border-neutral",
-        energetic: "text-energetic border border-energetic",
+        info: "bg-info-subtle border-info-border text-info-text",
+        success: "bg-success-subtle border-success-border text-success-text",
+        warning: "bg-warning-subtle border-warning-border text-warning-text",
+        error: "bg-error-subtle border-error-border text-error-text",
+        neutral: "bg-neutral-subtle border-neutral-border text-neutral-text",
+        energetic:
+            "bg-energetic-subtle border-energetic-border text-energetic-text",
     });
 
     let alertRole = $derived(
@@ -48,83 +67,42 @@
 
 {#snippet icon()}
     {#if visualVariant === "info"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Info size={20} aria-hidden="true" />
     {:else if visualVariant === "success"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Check size={20} aria-hidden="true" />
     {:else if visualVariant === "warning"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <TriangleAlert size={20} aria-hidden="true" />
     {:else if visualVariant === "error"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <X size={20} aria-hidden="true" />
     {:else if visualVariant === "neutral"}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 9a1 1 0 100 2 1 1 0 000-2z"
-                clip-rule="evenodd"
-            />
-        </svg>
+        <Info size={20} aria-hidden="true" />
     {:else}
-        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M11 3L4 14h6l-1 7 7-11h-6l1-7z" />
-        </svg>
+        <Zap size={20} aria-hidden="true" />
     {/if}
 {/snippet}
 
+{#if open}
 <div
-    class="relative rounded-md p-4 border {alertClasses[
-        visualVariant
-    ]} transition-all duration-200 motion-reduce:transition-none {className}"
+    class={cn(
+        'relative rounded-container p-4 border',
+        inline ? 'inline-block' : 'block w-full',
+        alertClasses[visualVariant],
+        'transition-colors duration-150 motion-reduce:transition-none',
+        classProp,
+        className,
+    )}
     role={alertRole}
-    aria-live={visualVariant === "success" || visualVariant === "info"
-        ? "polite"
-        : "assertive"}
     aria-atomic="true"
     {...restProps}
 >
     {#if closable}
         <button
             onclick={handleDismiss}
-            class="group absolute right-2 top-2 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-description transition-colors duration-200 hover:text-body motion-reduce:transition-none focus-ring"
+            class="absolute right-2 top-2 z-10 flex size-6 cursor-pointer items-center justify-center rounded-control text-description transition-colors duration-150 hover:bg-surface-hover hover:text-body motion-reduce:transition-none focus-ring--muted"
             aria-label="Dismiss alert"
             type="button"
         >
-            <svg
-                class="w-4 h-4 text-current group-hover:scale-110 transition-transform duration-200 motion-reduce:transition-none"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                />
-            </svg>
+            <X size={16} aria-hidden="true" />
         </button>
     {/if}
 
@@ -148,3 +126,4 @@
         </div>
     </div>
 </div>
+{/if}

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

@@ -4,12 +4,18 @@ interface Props {
     title?: string;
     message?: string;
     closable?: boolean;
+    /** Visible state; `closable` dismiss sets it to `false`. Supports `bind:open`. */
+    open?: boolean;
+    /** Shrink to content instead of filling the container. */
+    inline?: boolean;
+    class?: string;
+    /** @deprecated use `class` — kept so 7.x call sites keep working. */
     className?: string;
     onclick?: (event: Event) => void;
 }
 type $$ComponentProps = Props & {
     children?: any;
 };
-declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;