@lyeve-labs/ui-kit 0.15.0 → 0.17.0

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

@@ -10,17 +10,23 @@
    * the element, and the element is always a real heading.
    */
   import type { Snippet } from 'svelte';
-  import { sectionHeading } from '../internal/layout.js';
+  import { sectionHeading, type SectionVariant } from '../internal/layout.js';
 
   interface Props {
-    /** 2 under a page title, 3 inside a card. */
+    /** 2 under a page title, 3 inside a card. The element, not the treatment. */
     level?: 2 | 3;
+    /**
+     * `eyebrow` is the small uppercase label the consoles head a band with. It
+     * is separate from the level because an eyebrow appears at both, and it was
+     * unnamed here while thirty of them shipped hand rolled across two apps.
+     */
+    variant?: SectionVariant;
     actions?: Snippet;
     class?: string;
     children: Snippet;
   }
 
-  let { level = 2, 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}">
@@ -28,9 +34,9 @@
        structure decision, and a reader of this file should be able to see both
        headings it can produce. -->
   {#if level === 2}
-    <h2 class={sectionHeading(2)}>{@render children()}</h2>
+    <h2 class={sectionHeading(2, variant)}>{@render children()}</h2>
   {:else}
-    <h3 class={sectionHeading(3)}>{@render children()}</h3>
+    <h3 class={sectionHeading(3, variant)}>{@render children()}</h3>
   {/if}
 
   {#if actions}

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

@@ -9,9 +9,16 @@
    * the element, and the element is always a real heading.
    */
 import type { Snippet } from 'svelte';
+import { type SectionVariant } from '../internal/layout.js';
 interface Props {
-    /** 2 under a page title, 3 inside a card. */
+    /** 2 under a page title, 3 inside a card. The element, not the treatment. */
     level?: 2 | 3;
+    /**
+     * `eyebrow` is the small uppercase label the consoles head a band with. It
+     * is separate from the level because an eyebrow appears at both, and it was
+     * unnamed here while thirty of them shipped hand rolled across two apps.
+     */
+    variant?: SectionVariant;
     actions?: Snippet;
     class?: string;
     children: Snippet;

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

@@ -20,7 +20,7 @@ export { default as Table } from './components/Table.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
-export type { PageWidth } from './internal/layout.js';
+export type { PageWidth, SectionVariant } from './internal/layout.js';
 export type { TreeNode, TriState } from './internal/tree.js';
 export { default as Button } from './components/Button.svelte';
 export { default as ButtonGroup } from './components/ButtonGroup.svelte';
@@ -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.15.0";
+export declare const VERSION = "0.17.0";

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.15.0';
+export const VERSION = '0.17.0';

package/dist/internal/layout.d.ts

@@ -17,6 +17,8 @@
  *
  * Not exported from the package entry point - this is an implementation detail.
  */
+/** The treatment a section heading takes, independent of its level. */
+export type SectionVariant = 'default' | 'eyebrow';
 /** How much of the viewport a page's content is allowed to fill. */
 export type PageWidth = 'narrow' | 'default' | 'wide' | 'full';
 /**
@@ -115,8 +117,16 @@ export declare const MODAL_PAD = "px-card py-card-sm";
  * page can render at different sizes and weights. Taking the level rather than
  * a free-form string means the class cannot disagree with the heading element
  * the caller is already writing.
+ *
+ * `eyebrow` is the small uppercase label the consoles use to head a band of
+ * content. It is a second treatment rather than a third level because the
+ * element is a decision about document structure and the treatment is not: an
+ * eyebrow appears at both levels. It went unnamed here while thirty of them
+ * shipped hand rolled across two apps in four different bottom margins, and a
+ * margin is exactly what this function must not carry - the stack around the
+ * heading owns the distance to what follows.
  */
-export declare function sectionHeading(level: 2 | 3): string;
+export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant): string;
 /**
  * The authed app frame, stated once for every app that has one.
  *

package/dist/internal/layout.js

@@ -123,8 +123,20 @@ export const MODAL_PAD = 'px-card py-card-sm';
  * page can render at different sizes and weights. Taking the level rather than
  * a free-form string means the class cannot disagree with the heading element
  * the caller is already writing.
+ *
+ * `eyebrow` is the small uppercase label the consoles use to head a band of
+ * content. It is a second treatment rather than a third level because the
+ * element is a decision about document structure and the treatment is not: an
+ * eyebrow appears at both levels. It went unnamed here while thirty of them
+ * shipped hand rolled across two apps in four different bottom margins, and a
+ * margin is exactly what this function must not carry - the stack around the
+ * heading owns the distance to what follows.
  */
-export function sectionHeading(level) {
+export function sectionHeading(level, variant = 'default') {
+    // The eyebrow reads the same at both levels. It is a label for the band under
+    // it rather than a title, so it does not take the level's size at all.
+    if (variant === 'eyebrow')
+        return 'text-xs font-medium uppercase tracking-wide text-faint';
     // Level 3 drops a size rather than a weight. Inside a card it sits under the
     // card's own semibold title, and two semibold lines at the same size read as
     // one heading broken in half.

package/package.json

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