@lyeve-labs/ui-kit 0.16.0 → 0.17.1

package/dist/components/AppShell.svelte

@@ -21,7 +21,7 @@
    * reader announce the page name twice.
    */
   import type { Snippet } from 'svelte';
-  import { Menu } from '@lucide/svelte';
+  import { Menu, PanelLeft, PanelLeftClose } from '@lucide/svelte';
   import { overlay } from '../internal/overlay.js';
   import { APP_BRAND, APP_HEADER, APP_SIDEBAR, APP_SIDEBAR_BAND } from '../internal/layout.js';
 
@@ -30,6 +30,23 @@
     section?: string;
     /** Bindable so the app router can close the drawer after a navigation. */
     navOpen?: boolean;
+    /**
+     * Offers a control that puts the sidebar away above md:.
+     *
+     * Opt-in rather than on by default: three products render this shell, and
+     * a new button in every header of all three is a decision each of them
+     * makes for itself. A page that owns the viewport - a canvas, a split pane
+     * - is the case it exists for.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the sidebar is put away. Desktop only: below md: the sidebar is
+     * already a drawer and `navOpen` is the state that governs it.
+     *
+     * Bindable and not held here, because where it is remembered is the app's
+     * decision. Nothing persists it for you.
+     */
+    collapsed?: boolean;
     /** The sidebar landmark's accessible name. */
     sidebarLabel?: string;
     /** The drawer's accessible name, below md: where the sidebar is a dialog. */
@@ -49,6 +66,8 @@
   let {
     section = undefined,
     navOpen = $bindable(false),
+    collapsible = false,
+    collapsed = $bindable(false),
     sidebarLabel = 'Sidebar',
     drawerLabel = 'Navigation',
     brand,
@@ -66,6 +85,11 @@
    */
   let isMobile = $state(false);
   const drawerOpen = $derived(isMobile && navOpen);
+  /**
+   * Collapsing is a desktop gesture. Below md: the same aside is the drawer,
+   * so honouring `collapsed` there would leave the hamburger opening nothing.
+   */
+  const railHidden = $derived(collapsible && collapsed && !isMobile);
 
   $effect(() => {
     const mq = window.matchMedia('(max-width: 767px)');
@@ -129,7 +153,7 @@
     >
       {@render sidebar(false)}
     </div>
-  {:else}
+  {:else if !railHidden}
     <div class="hidden md:flex">
       {@render sidebar(isMobile)}
     </div>
@@ -151,6 +175,19 @@
           >
             <Menu size={20} />
           </button>
+        {:else if collapsible}
+          <!-- Same square and the same gutter as the hamburger it replaces, so
+               the header's first control sits in one place at every width. -->
+          <button
+            type="button"
+            data-testid="app-sidebar-toggle"
+            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+            aria-label={collapsed ? 'Show sidebar' : 'Hide sidebar'}
+            aria-expanded={!collapsed}
+            onclick={() => (collapsed = !collapsed)}
+          >
+            {#if collapsed}<PanelLeft size={18} />{:else}<PanelLeftClose size={18} />{/if}
+          </button>
         {/if}
         {#if section}
           <span data-testid="app-section" class="truncate text-sm font-semibold text-fg">

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

@@ -25,6 +25,23 @@ interface Props {
     section?: string;
     /** Bindable so the app router can close the drawer after a navigation. */
     navOpen?: boolean;
+    /**
+     * Offers a control that puts the sidebar away above md:.
+     *
+     * Opt-in rather than on by default: three products render this shell, and
+     * a new button in every header of all three is a decision each of them
+     * makes for itself. A page that owns the viewport - a canvas, a split pane
+     * - is the case it exists for.
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the sidebar is put away. Desktop only: below md: the sidebar is
+     * already a drawer and `navOpen` is the state that governs it.
+     *
+     * Bindable and not held here, because where it is remembered is the app's
+     * decision. Nothing persists it for you.
+     */
+    collapsed?: boolean;
     /** The sidebar landmark's accessible name. */
     sidebarLabel?: string;
     /** The drawer's accessible name, below md: where the sidebar is a dialog. */
@@ -40,6 +57,6 @@ interface Props {
     class?: string;
     children: Snippet;
 }
-declare const AppShell: import("svelte").Component<Props, {}, "navOpen">;
+declare const AppShell: import("svelte").Component<Props, {}, "navOpen" | "collapsed">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/Modal.svelte

@@ -72,9 +72,7 @@
       aria-label={title ? undefined : 'Dialog'}
     >
       {#if title}
-        <div
-          class="flex shrink-0 items-start justify-between gap-4 px-5 py-4 border-b border-line"
-        >
+        <div class="flex shrink-0 items-start justify-between gap-4 px-5 py-4 border-b border-line">
           <div>
             <h2 id={headingId} class="font-semibold text-fg">{title}</h2>
             {#if description}

package/dist/components/SectionHeading.svelte

@@ -26,13 +26,7 @@
     children: Snippet;
   }
 
-  let {
-    level = 2,
-    variant = 'default',
-    actions,
-    class: klass = '',
-    children,
-  }: Props = $props();
+  let { level = 2, variant = 'default', actions, class: klass = '', children }: Props = $props();
 </script>
 
 <div class="flex flex-wrap items-center justify-between gap-4 {klass}">

package/dist/components/dialog/Dialog.svelte

@@ -14,10 +14,7 @@
   import type { DialogEntry } from './types.js';
   import { sizeClass } from './types.js';
   import { overlay } from '../../internal/overlay.js';
-  import {
-    closeDialog,
-    dismissDialog,
-  } from './dialog-manager.svelte';
+  import { closeDialog, dismissDialog } from './dialog-manager.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
 
   let {

package/dist/index.d.ts

@@ -86,4 +86,4 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript, type Theme } from './utils/theme.js';
-export declare const VERSION = "0.16.0";
+export declare const VERSION = "0.17.1";

package/dist/index.js

@@ -92,4 +92,4 @@ export { getTheme, setTheme, toggleTheme, themeBootScript } from './utils/theme.
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line; the build and the test suite fail when the two disagree.
-export const VERSION = '0.16.0';
+export const VERSION = '0.17.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",