zabi-components 7.0.1 → 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);
@@ -64,8 +113,7 @@
 
     $effect(() => {
         const root = triggerElement;
-        const describe =
-            isVisible && content && !disabled ? tooltipId : null;
+        const describe = isVisible && content && !disabled ? tooltipId : null;
         if (!root) {
             return;
         }
@@ -100,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();
+            }
         }
     }
 
@@ -146,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}
@@ -155,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"
+            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>
@@ -174,48 +232,19 @@
 </div>
 
 <style>
-    :root {
-        --tooltip-bg: var(--color-base-800);
-        --tooltip-color: var(--color-base-50);
-        --tooltip-padding: 0.5rem 0.75rem;
-        --tooltip-radius: 0.5rem;
-        --tooltip-font-size: 0.875rem;
-        --tooltip-line-height: 1.25rem;
-        --tooltip-max-width: 200px;
-        --tooltip-gap: 0.5rem;
-        --tooltip-arrow-size: 4px;
-        --tooltip-transition: opacity 0.2s ease-in-out,
-            visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
-    }
-
-    .tooltip-container {
-        position: relative;
-        display: inline-block;
-    }
-
+    /* 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 {
-        position: absolute;
-        z-index: var(--z-tooltip, 1070);
-        padding: var(--tooltip-padding);
-        background-color: var(--tooltip-bg);
-        color: var(--tooltip-color);
-        border-radius: var(--tooltip-radius);
-        font-size: var(--tooltip-font-size);
-        line-height: var(--tooltip-line-height);
-        max-width: var(--tooltip-max-width);
-        white-space: normal;
-        word-wrap: break-word;
-        opacity: 0;
-        visibility: hidden;
-        transition: var(--tooltip-transition);
-        pointer-events: none;
+        width: -moz-max-content;
+        width: max-content;
+        max-width: var(--tooltip-max-width, min(24rem, calc(100vw - 2rem)));
     }
 
     .tooltip-container[data-placement="top"] .tooltip {
         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"] {
@@ -228,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"] {
@@ -241,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"] {
@@ -254,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"] {
@@ -263,12 +292,21 @@
         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);
-        background-color: var(--tooltip-bg);
+        width: calc(var(--tooltip-arrow-size, 4px) * 2);
+        height: calc(var(--tooltip-arrow-size, 4px) * 2);
+        background-color: var(--color-tooltip-bg);
     }
 
     .tooltip-container[data-placement="top"] .tooltip::before {
@@ -299,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"] {
@@ -322,10 +356,8 @@
     }
 
     @media (prefers-contrast: high) {
-        :root {
-            --tooltip-bg: CanvasText;
-            --tooltip-color: Canvas;
-            --tooltip-padding: 0.75rem 1rem;
+        .tooltip {
+            padding: 0.75rem 1rem;
         }
     }
 
@@ -354,6 +386,6 @@
         box-shadow:
             0 0 0 2px var(--color-focus-ring-offset),
             0 0 0 4px var(--color-focus-ring);
-        border-radius: var(--tooltip-radius);
+        border-radius: 0.5rem;
     }
 </style>

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) => {