npm - @lyeve-labs/ui-kit - Versions diffs - 0.25.0 → 0.26.0 - Mend

@lyeve-labs/ui-kit 0.25.0 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/README.md +35 -9
package/dist/components/AccountMenu.svelte +1 -1
package/dist/components/AccountMenu.svelte.d.ts +1 -1
package/dist/components/AppShell.svelte +1 -1
package/dist/components/AppShell.svelte.d.ts +1 -1
package/dist/components/AuthShell.svelte +76 -0
package/dist/components/AuthShell.svelte.d.ts +19 -0
package/dist/components/Autocomplete.svelte +2 -2
package/dist/components/Checkbox.svelte +1 -1
package/dist/components/CheckboxGroup.svelte +6 -1
package/dist/components/DatePicker.svelte +2 -2
package/dist/components/DateTimePicker.svelte +1 -1
package/dist/components/Drawer.svelte +43 -13
package/dist/components/Drawer.svelte.d.ts +13 -2
package/dist/components/Dropdown.svelte +1 -1
package/dist/components/Field.svelte +1 -1
package/dist/components/FileInput.svelte +1 -1
package/dist/components/Input.svelte +1 -1
package/dist/components/Modal.svelte +32 -12
package/dist/components/Modal.svelte.d.ts +11 -2
package/dist/components/MultiSelect.svelte +2 -2
package/dist/components/NumberInput.svelte +1 -1
package/dist/components/PasswordInput.svelte +1 -1
package/dist/components/Radio.svelte +1 -1
package/dist/components/RadioGroup.svelte +1 -0
package/dist/components/SearchInput.svelte +1 -1
package/dist/components/SegmentedControl.svelte +1 -1
package/dist/components/Select.svelte +2 -2
package/dist/components/Textarea.svelte +1 -1
package/dist/components/TimePicker.svelte +1 -1
package/dist/components/Toaster.svelte +1 -1
package/dist/components/dialog/Dialog.svelte +2 -2
package/dist/components/dialog/types.d.ts +3 -1
package/dist/components/dialog/types.js +2 -8
package/dist/index.d.ts +2 -1
package/dist/index.js +2 -1
package/dist/internal/field.d.ts +20 -0
package/dist/internal/field.js +23 -0
package/dist/internal/layout.d.ts +34 -0
package/dist/internal/layout.js +47 -3
package/dist/motion.js +7 -2
package/dist/styles/theme.css +26 -1
package/package.json +1 -1
package/src/lib/styles/theme.css +26 -1

package/README.md CHANGED Viewed

@@ -28,7 +28,7 @@ No config file, no theme provider, no setup ceremony.
 ## What's in the box
-- **67 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
+- **68 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
 - **Two themes:** Soft Dark (default) and Soft Light, switched by a single `data-theme` attribute on `<html>`.
 - **One CSS file:** `@lyeve-labs/ui-kit/styles.css` declares every token; the rest is just Tailwind.
 - **Svelte 5 native:** built on runes and snippets, fully typed end-to-end.
@@ -37,10 +37,10 @@ No config file, no theme provider, no setup ceremony.
 ## Component list
 <details>
-<summary>67 components, organized by purpose</summary>
+<summary>68 components, organized by purpose</summary>
 **Layout and structure**
-Card, Panel, AppShell, PageShell, PageHeader, SectionHeading, Divider, Accordion, AccordionItem, Collapsible, Table, DescriptionList, Toolbar, TreeView
+Card, Panel, AppShell, AuthShell, PageShell, PageHeader, SectionHeading, Divider, Accordion, AccordionItem, Collapsible, Table, DescriptionList, Toolbar, TreeView
 **Forms and inputs**
 Button, ButtonGroup, Input, PasswordInput, Textarea, NumberInput, SearchInput, FileInput, Label, Field, FormMessage, SegmentedControl, Select, MultiSelect, Autocomplete, DatePicker, TimePicker, DateTimePicker, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle
@@ -196,19 +196,45 @@ leaves through the same presets the kit's overlays use:
 </script>
 {#if open}
-  <div transition:motion.popover>...</div>
+  <div transition:motion.popover|global>...</div>
 {/if}
 {#each items as item (item.id)}
-  <li transition:motion.toast animate:motion.reorder>...</li>
+  <li transition:motion.toast|global animate:motion.reorder>...</li>
 {/each}
 ```
 `dialog`, `scrim`, `drawer`, `popover` and `toast` read the tokens at run
 time, so retuning a token retunes them, and every one of them plays nothing
-for a reader who has asked for reduced motion. Do not write `duration-150`,
-`ease-out` or `transition-all` beside a kit class: they are a fifth speed and
-a fourth curve, and the kit's own test suite refuses them.
+for a reader who has asked for reduced motion. The `|global` modifier is what
+lets the exit play when a parent block removes the surface, so keep it. Do not
+write `duration-150`, `ease-out` or `transition-all` beside a kit class: they
+are a fifth speed and a fourth curve, and the kit's own test suite refuses
+them.
+## Sizing
+Two ladders, both declared as tokens and both read by name.
+A page picks a role and `PageShell` picks the cap:
+| `width`   | Cap    | For                                    |
+| --------- | ------ | -------------------------------------- |
+| `narrow`  | 896px  | one column: a form, a settings pane    |
+| `default` | 1152px | a page of stacked cards                |
+| `wide`    | 1536px | a data page whose table needs the room |
+| `full`    | none   | a canvas or a split pane               |
+A surface lifted off the page - `Modal`, `Drawer`, a dialog - takes a rung of
+one shared ladder, so the same form is the same size whichever of the three a
+page opens it in: `sm` 448px, `md` 576px, `lg` 704px, `xl` 896px, and `full`
+1088px for a dialog holding a table.
+`Modal` and `Drawer` default to `size="auto"` and take the rung their body
+earns: `md` up to four fields, `lg` past four, `xl` past eight. The count is
+the fields the panel actually rendered, re-read when the form reveals more, and
+a radio or checkbox group counts as the one question it asks. Name a rung and
+it is kept.
 ## Local development
@@ -227,7 +253,7 @@ This repo is a single-purpose component library. Nothing but `src/lib/`.
 ```
 src/
 └── lib/                 # → published as @lyeve-labs/ui-kit
-    ├── components/      # 67 .svelte files
+    ├── components/      # 68 .svelte files
     ├── stores/          # toast.svelte.ts
     ├── styles/          # theme.css (the one stylesheet)
     ├── utils/           # cn.ts, theme.ts

package/dist/components/AccountMenu.svelte CHANGED Viewed

@@ -4,7 +4,7 @@
    * app header.
    *
    * Where it lives is the point. The admin and the customer portal both put it
-   * in the bottom left corner of the sidebar and the ops console put it in the
+   * in the bottom left corner of the sidebar and the third console put it in the
    * header, so the same account block was in two places depending on which of
    * our own products you were looking at. The sidebar is also the worst of the
    * two: it is already full height, so opening a menu in its last row pushes

package/dist/components/AccountMenu.svelte.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
    * app header.
    *
    * Where it lives is the point. The admin and the customer portal both put it
-   * in the bottom left corner of the sidebar and the ops console put it in the
+   * in the bottom left corner of the sidebar and the third console put it in the
    * header, so the same account block was in two places depending on which of
    * our own products you were looking at. The sidebar is also the worst of the
    * two: it is already full height, so opening a menu in its last row pushes

package/dist/components/AppShell.svelte CHANGED Viewed

@@ -16,7 +16,7 @@
    * The authed application frame: the sidebar, the header bar and the content
    * column, owned once so three apps cannot each invent their own.
    *
-   * They did. The admin, the customer portal and the ops console each hand
+   * They did. The admin, the customer portal and the third console each hand
    * rolled this shell, and no two agreed: the sidebar was 224px in one and
    * 240px in the other two, opaque in two and 30% translucent in the third,
    * built from the kit's SidebarNav in one and from inline anchors in the

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

@@ -12,7 +12,7 @@ export interface SidebarState {
    * The authed application frame: the sidebar, the header bar and the content
    * column, owned once so three apps cannot each invent their own.
    *
-   * They did. The admin, the customer portal and the ops console each hand
+   * They did. The admin, the customer portal and the third console each hand
    * rolled this shell, and no two agreed: the sidebar was 224px in one and
    * 240px in the other two, opaque in two and 30% translucent in the third,
    * built from the kit's SidebarNav in one and from inline anchors in the

package/dist/components/AuthShell.svelte ADDED Viewed

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Card from './Card.svelte';
+  import Logo from './Logo.svelte';
+  type Width = 'md' | 'lg';
+  interface Props {
+    /** The one heading on the page. A sign-in swaps it for the second-factor step. */
+    title: string;
+    description?: string;
+    /** Where the lockup links. Left unset, it is a mark and not a link. */
+    href?: string;
+    /** `md` is a form; `lg` is a walkthrough with more than one column. */
+    width?: Width;
+    /** Controls at the top end of the column: a theme toggle, a language switch. */
+    actions?: Snippet;
+    /** Under the card: the one link that leads off the page, such as "Create an account". */
+    footer?: Snippet;
+    children: Snippet;
+  }
+  let {
+    title,
+    description = undefined,
+    href = undefined,
+    width = 'md',
+    actions = undefined,
+    footer = undefined,
+    children,
+  }: Props = $props();
+  const widths: Record<Width, string> = { md: 'max-w-md', lg: 'max-w-3xl' };
+</script>
+<!--
+  The frame for a page the app shell does not wrap: sign in, sign up, a
+  password reset, an invitation, first-run setup. PageShell is the wrong
+  frame for these: they carry the product name, not a page title, and there
+  is no navigation to sit beside. Every console hand-wrote this main, column,
+  lockup, heading and card, and no two agreed: three heading sizes, a lockup
+  on some pages, a theme control on others, and one class that named no
+  token at all. Stated once here, the way AppShell states the signed-in frame.
+-->
+<main class="flex min-h-screen items-center justify-center bg-ink px-4 py-10">
+  <div class="w-full {widths[width]}">
+    {#if actions}
+      <div class="mb-4 flex justify-end">{@render actions()}</div>
+    {/if}
+    <div class="mb-8 text-center">
+      {#if href}
+        <a
+          {href}
+          class="mb-5 inline-flex rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand"
+        >
+          <Logo size="lg" />
+        </a>
+      {:else}
+        <Logo size="lg" class="mb-5" />
+      {/if}
+      <h1 class="text-2xl font-bold text-fg">{title}</h1>
+      {#if description}
+        <p class="mt-2 text-muted">{description}</p>
+      {/if}
+    </div>
+    <Card pad="lg">
+      {@render children()}
+    </Card>
+    {#if footer}
+      <p class="mt-6 text-center text-sm text-muted">{@render footer()}</p>
+    {/if}
+  </div>
+</main>

package/dist/components/AuthShell.svelte.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Width = 'md' | 'lg';
+interface Props {
+    /** The one heading on the page. A sign-in swaps it for the second-factor step. */
+    title: string;
+    description?: string;
+    /** Where the lockup links. Left unset, it is a mark and not a link. */
+    href?: string;
+    /** `md` is a form; `lg` is a walkthrough with more than one column. */
+    width?: Width;
+    /** Controls at the top end of the column: a theme toggle, a language switch. */
+    actions?: Snippet;
+    /** Under the card: the one link that leads off the page, such as "Create an account". */
+    footer?: Snippet;
+    children: Snippet;
+}
+declare const AuthShell: import("svelte").Component<Props, {}, "">;
+type AuthShell = ReturnType<typeof AuthShell>;
+export default AuthShell;

package/dist/components/Autocomplete.svelte CHANGED Viewed

@@ -173,7 +173,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
@@ -235,7 +235,7 @@
     {/if}
     {#if box.open}
-      <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
+      <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
         <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
           {#each rows as option, index (option.value)}
             {@const isSelected = option.value === value}

package/dist/components/Checkbox.svelte CHANGED Viewed

@@ -167,7 +167,7 @@
   {/if}
 {/snippet}
-<div class="{rootClass} {cls}">
+<div data-field class="{rootClass} {cls}">
   {#if variant === 'card'}
     <!-- The input covers the whole card, so the card surface is the element the
          peer ring can reach and the box inside it is not. That is deliberate:

package/dist/components/CheckboxGroup.svelte CHANGED Viewed

@@ -117,7 +117,12 @@
   asterisk stays decoration, and the hint, when the caller writes one, says what
   is required and reaches the reader through aria-describedby.
 -->
-<fieldset class="{CHOICE_GROUP} {cls}" {disabled} aria-describedby={describedBy(uid, error, hint)}>
+<fieldset
+  data-field
+  class="{CHOICE_GROUP} {cls}"
+  {disabled}
+  aria-describedby={describedBy(uid, error, hint)}
+>
   <!--
     The legend stays a legend when it is hidden. Swapping it for an aria-label
     on the fieldset would name the group and drop it out of the reading order,

package/dist/components/DatePicker.svelte CHANGED Viewed

@@ -176,7 +176,7 @@
   });
 </script>
-<div class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
+<div data-field class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
@@ -254,7 +254,7 @@
         role="dialog"
         aria-label="Choose date"
         use:placePanel
-        transition:motion.popover
+        transition:motion.popover|global
         class="{PANEL_SURFACE} w-68"
       >
         <div class="overflow-y-auto overscroll-contain p-3" data-panel-list={PANEL_LIST_UNCAPPED}>

package/dist/components/DateTimePicker.svelte CHANGED Viewed

@@ -275,7 +275,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} {klass}">
+<div data-field class="{FIELD_WRAP} {klass}">
   {#if label}
     <!-- `for` the date trigger. A button is labelable, so the field's own label
          names it and clicking that label opens the calendar. The group below

package/dist/components/Drawer.svelte CHANGED Viewed

@@ -1,18 +1,30 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { countFields } from '../internal/field.js';
+  import { fitOverlay, OVERLAY_WIDTH, type OverlaySize } from '../internal/layout.js';
   import { HIT_AREA } from '../internal/touch.js';
   import { overlay } from '../internal/overlay.js';
   import * as motion from '../motion.js';
   type Side = 'left' | 'right';
-  type Size = 'sm' | 'md' | 'lg' | 'xl';
+  /** The overlay ladder, minus the rung a docked panel has no business taking. */
+  type Size = Exclude<OverlaySize, 'full'>;
   interface Props {
     open?: boolean;
     title?: string;
     description?: string;
     side?: Side;
-    size?: Size;
+    /**
+     * A rung of the shared overlay ladder, or `auto` to take the one the body
+     * needs: `md` up to four fields, `lg` past four, `xl` past eight.
+     *
+     * `auto` is the default because the caller was the wrong one to ask. Every
+     * drawer in three consoles asked for the widest rung the kit had, which is
+     * what a ladder that stops too early looks like from the outside, and the
+     * body is the only thing that knows whether it is two fields or twelve.
+     */
+    size?: Size | 'auto';
     onclose?: () => void;
     children: Snippet;
     footer?: Snippet;
@@ -23,18 +35,36 @@
     title = undefined,
     description = undefined,
     side = 'right',
-    size = 'md',
+    size = 'auto',
     onclose = undefined,
     children,
     footer,
   }: Props = $props();
-  const widths: Record<Size, string> = {
-    sm: 'w-72',
-    md: 'w-80',
-    lg: 'w-96',
-    xl: 'w-[480px]',
-  };
+  let body: HTMLElement | undefined = $state();
+  let fields = $state(0);
+  /*
+   * The count is measured rather than declared, so it cannot go stale. A form
+   * that reveals two more fields when a period is set to custom, or drops a
+   * whole section behind a toggle, changes what it needs while it is open,
+   * which is why the observer stays for as long as the panel does.
+   *
+   * It runs before the browser paints the panel, so a drawer opens at the
+   * width it will keep: the effect is flushed in the same task as the mount,
+   * and the entrance animates transform alone.
+   */
+  $effect(() => {
+    const el = body;
+    if (!open || !el) return;
+    const measure = () => (fields = countFields(el));
+    measure();
+    const observer = new MutationObserver(measure);
+    observer.observe(el, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  });
+  const rung = $derived(size === 'auto' ? fitOverlay(fields) : size);
   const headingId = $props.id();
   const descriptionId = `${headingId}-description`;
@@ -65,13 +95,13 @@
       aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
       onclick={close}
-      transition:motion.scrim
+      transition:motion.scrim|global
     ></button>
     <div
       use:overlay
-      transition:motion.drawer={{ side }}
-      class="relative flex h-full max-w-full flex-col {widths[size]} bg-surface shadow-2xl
+      transition:motion.drawer|global={{ side }}
+      class="relative flex h-full w-full flex-col {OVERLAY_WIDTH[rung]} bg-surface shadow-2xl
         {side === 'right' ? 'border-s' : 'border-e'} border-line"
       role="dialog"
       aria-modal="true"
@@ -107,7 +137,7 @@
         </div>
       {/if}
-      <div class="flex-1 overflow-y-auto px-5 py-4">
+      <div bind:this={body} class="flex-1 overflow-y-auto px-5 py-4">
         {@render children()}
       </div>

package/dist/components/Drawer.svelte.d.ts CHANGED Viewed

@@ -1,12 +1,23 @@
 import type { Snippet } from 'svelte';
+import { type OverlaySize } from '../internal/layout.js';
 type Side = 'left' | 'right';
-type Size = 'sm' | 'md' | 'lg' | 'xl';
+/** The overlay ladder, minus the rung a docked panel has no business taking. */
+type Size = Exclude<OverlaySize, 'full'>;
 interface Props {
     open?: boolean;
     title?: string;
     description?: string;
     side?: Side;
-    size?: Size;
+    /**
+     * A rung of the shared overlay ladder, or `auto` to take the one the body
+     * needs: `md` up to four fields, `lg` past four, `xl` past eight.
+     *
+     * `auto` is the default because the caller was the wrong one to ask. Every
+     * drawer in three consoles asked for the widest rung the kit had, which is
+     * what a ladder that stops too early looks like from the outside, and the
+     * body is the only thing that knows whether it is two fields or twelve.
+     */
+    size?: Size | 'auto';
     onclose?: () => void;
     children: Snippet;
     footer?: Snippet;

package/dist/components/Dropdown.svelte CHANGED Viewed

@@ -256,7 +256,7 @@
       bind:this={menuEl}
       role="menu"
       use:placePanel
-      transition:motion.popover
+      transition:motion.popover|global
       class="{PANEL_SURFACE} min-w-36 {align === 'right' ? 'end-0' : 'start-0'}"
     >
       <div class={PANEL_LIST} data-panel-list>

package/dist/components/Field.svelte CHANGED Viewed

@@ -81,7 +81,7 @@
   });
 </script>
-<div class="{FIELD_WRAP} {klass}">
+<div data-field class="{FIELD_WRAP} {klass}">
   {#if label}
     <!--
       A hidden label stays a real label with a real `for`. Swapping it for an

package/dist/components/FileInput.svelte CHANGED Viewed

@@ -46,7 +46,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={id} class={FIELD_LABEL}>{label}</label>
   {/if}

package/dist/components/Input.svelte CHANGED Viewed

@@ -51,7 +51,7 @@
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
 </script>
-<div class="{FIELD_WRAP} {klass}">
+<div data-field class="{FIELD_WRAP} {klass}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}

package/dist/components/Modal.svelte CHANGED Viewed

@@ -1,16 +1,26 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { countFields } from '../internal/field.js';
+  import { fitOverlay, OVERLAY_WIDTH, type OverlaySize } from '../internal/layout.js';
   import { HIT_AREA } from '../internal/touch.js';
   import { overlay } from '../internal/overlay.js';
   import * as motion from '../motion.js';
-  type Size = 'sm' | 'md' | 'lg';
+  /** The shared overlay ladder, minus the rung the dialog stack keeps for a table. */
+  type Size = Exclude<OverlaySize, 'full'>;
   interface Props {
     open?: boolean;
     title?: string;
     description?: string;
-    size?: Size;
+    /**
+     * A rung of the shared overlay ladder, or `auto` to take the one the body
+     * needs: `md` up to four fields, `lg` past four, `xl` past eight.
+     *
+     * The same rule a Drawer follows, so an edit form reads the same size
+     * whichever of the two a page opens it in.
+     */
+    size?: Size | 'auto';
     onclose?: () => void;
     children: Snippet;
     footer?: Snippet;
@@ -20,17 +30,27 @@
     open = $bindable(false),
     title = undefined,
     description = undefined,
-    size = 'md',
+    size = 'auto',
     onclose = undefined,
     children,
     footer,
   }: Props = $props();
-  const widths: Record<Size, string> = {
-    sm: 'max-w-sm',
-    md: 'max-w-lg',
-    lg: 'max-w-2xl',
-  };
+  let body: HTMLElement | undefined = $state();
+  let fields = $state(0);
+  /* Measured, and kept measured: see Drawer, which sizes itself the same way. */
+  $effect(() => {
+    const el = body;
+    if (!open || !el) return;
+    const measure = () => (fields = countFields(el));
+    measure();
+    const observer = new MutationObserver(measure);
+    observer.observe(el, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  });
+  const rung = $derived(size === 'auto' ? fitOverlay(fields) : size);
   // aria-labelledby needs an id that is unique per instance, because two modals
   // can be mounted at once while one animates out.
@@ -60,13 +80,13 @@
       aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
       onclick={close}
-      transition:motion.scrim
+      transition:motion.scrim|global
     ></button>
     <div
       use:overlay
-      transition:motion.dialog
-      class="relative flex max-h-[calc(100dvh-2rem)] w-full {widths[size]} flex-col
+      transition:motion.dialog|global
+      class="relative flex max-h-[calc(100dvh-2rem)] w-full {OVERLAY_WIDTH[rung]} flex-col
              overflow-hidden rounded-xl border border-line bg-surface shadow-2xl"
       role="dialog"
       aria-modal="true"
@@ -103,7 +123,7 @@
         </div>
       {/if}
-      <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+      <div bind:this={body} class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
         {@render children()}
       </div>

package/dist/components/Modal.svelte.d.ts CHANGED Viewed

@@ -1,10 +1,19 @@
 import type { Snippet } from 'svelte';
-type Size = 'sm' | 'md' | 'lg';
+import { type OverlaySize } from '../internal/layout.js';
+/** The shared overlay ladder, minus the rung the dialog stack keeps for a table. */
+type Size = Exclude<OverlaySize, 'full'>;
 interface Props {
     open?: boolean;
     title?: string;
     description?: string;
-    size?: Size;
+    /**
+     * A rung of the shared overlay ladder, or `auto` to take the one the body
+     * needs: `md` up to four fields, `lg` past four, `xl` past eight.
+     *
+     * The same rule a Drawer follows, so an edit form reads the same size
+     * whichever of the two a page opens it in.
+     */
+    size?: Size | 'auto';
     onclose?: () => void;
     children: Snippet;
     footer?: Snippet;

package/dist/components/MultiSelect.svelte CHANGED Viewed

@@ -159,7 +159,7 @@
   });
 </script>
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label id="{fieldId}-label" for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
@@ -254,7 +254,7 @@
     </div>
     {#if box.open}
-      <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
+      <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
         {#if searchable}
           <div class="border-b border-line p-2">
             <input

package/dist/components/NumberInput.svelte CHANGED Viewed

@@ -76,7 +76,7 @@
     'disabled:opacity-50 disabled:cursor-not-allowed';
 </script>
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}

package/dist/components/PasswordInput.svelte CHANGED Viewed

@@ -83,7 +83,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} {klass}">
+<div data-field class="{FIELD_WRAP} {klass}">
   {#if label}
     <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
       {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}

package/dist/components/Radio.svelte CHANGED Viewed

@@ -157,7 +157,7 @@
   {/if}
 {/snippet}
-<div class="{rootClass} {cls}">
+<div data-field class="{rootClass} {cls}">
   {#if variant === 'card'}
     <!-- The input covers the whole card, so the card surface is the element the
          peer ring can reach and the ring inside it is not. That is deliberate:

package/dist/components/RadioGroup.svelte CHANGED Viewed

@@ -96,6 +96,7 @@
   reader to find the message paragraph on their own.
 -->
 <fieldset
+  data-field
   class="{CHOICE_GROUP} {cls}"
   role="radiogroup"
   {disabled}

package/dist/components/SearchInput.svelte CHANGED Viewed

@@ -37,7 +37,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>{label}</label>
   {/if}

package/dist/components/SegmentedControl.svelte CHANGED Viewed

@@ -172,7 +172,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} items-start {klass}">
+<div data-field class="{FIELD_WRAP} items-start {klass}">
   {#if !labelHidden}
     <!-- A caption, not a label element. The group is named by aria-label, and a
          label has nothing to point at here: role="radiogroup" is not a form

package/dist/components/Select.svelte CHANGED Viewed

@@ -345,7 +345,7 @@
   </button>
 {/snippet}
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
@@ -409,7 +409,7 @@
       <input type="hidden" {name} {disabled} value={value ?? ''} />
       {#if box.open}
-        <div use:placePanel transition:motion.popover class="{PANEL_SURFACE} w-full">
+        <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
           {#if searchable}
             <div class="border-b border-line p-2">
               <!--

package/dist/components/Textarea.svelte CHANGED Viewed

@@ -51,7 +51,7 @@
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
 </script>
-<div class="{FIELD_WRAP} {cls}">
+<div data-field class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
       {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}

package/dist/components/TimePicker.svelte CHANGED Viewed

@@ -395,7 +395,7 @@
   }
 </script>
-<div class="{FIELD_WRAP} {klass}">
+<div data-field class="{FIELD_WRAP} {klass}">
   {#if label}
     <!-- `for` the hour so a click lands somewhere useful, while the group below
          takes its name from this same element. The hour keeps its own aria-label,

package/dist/components/Toaster.svelte CHANGED Viewed

@@ -27,7 +27,7 @@
 >
   {#each toast.items as t (t.id)}
     <div
-      transition:motion.toast
+      transition:motion.toast|global
       animate:motion.reorder
       class="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-lg border border-line
              bg-surface ps-0 pe-3 py-3 shadow-xl"

package/dist/components/dialog/Dialog.svelte CHANGED Viewed

@@ -93,7 +93,7 @@
   <!-- Backdrop -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    transition:motion.scrim
+    transition:motion.scrim|global
     class="absolute inset-0 bg-black/60 backdrop-blur-sm"
     onclick={handleBackdropClick}
     onkeydown={(e: KeyboardEvent) => {
@@ -107,7 +107,7 @@
   <div
     bind:this={dialogEl}
     use:overlay
-    transition:motion.dialog
+    transition:motion.dialog|global
     class="relative w-full {sizeClass(entry.options.size ?? 'md')} mx-4
 			bg-surface border border-line rounded-xl shadow-2xl
 			transition-transform duration-slow

package/dist/components/dialog/types.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import type { Snippet } from 'svelte';
-export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+import { type OverlaySize } from '../../internal/layout.js';
+/** The shared overlay ladder, whole: a dialog is the one surface that may hold a table. */
+export type DialogSize = OverlaySize;
 export interface DialogOptions<T = void> {
     /** Unique id - auto-generated if omitted */
     id?: string;

package/dist/components/dialog/types.js CHANGED Viewed

@@ -1,10 +1,4 @@
-const SIZE_CLASSES = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    full: 'max-w-3xl',
-};
+import { OVERLAY_WIDTH } from '../../internal/layout.js';
 export function sizeClass(size) {
-    return SIZE_CLASSES[size];
+    return OVERLAY_WIDTH[size];
 }

package/dist/index.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@
 export { default as Card } from './components/Card.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as AppShell } from './components/AppShell.svelte';
+export { default as AuthShell } from './components/AuthShell.svelte';
 export { default as PageShell } from './components/PageShell.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as SectionHeading } from './components/SectionHeading.svelte';
@@ -92,4 +93,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.25.0";
+export declare const VERSION = "0.26.0";

package/dist/index.js CHANGED Viewed

@@ -10,6 +10,7 @@
 export { default as Card } from './components/Card.svelte';
 export { default as Panel } from './components/Panel.svelte';
 export { default as AppShell } from './components/AppShell.svelte';
+export { default as AuthShell } from './components/AuthShell.svelte';
 export { default as PageShell } from './components/PageShell.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as SectionHeading } from './components/SectionHeading.svelte';
@@ -102,4 +103,4 @@ export * as motion from './motion.js';
 // ── 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.25.0';
+export const VERSION = '0.26.0';

package/dist/internal/field.d.ts CHANGED Viewed

@@ -11,6 +11,26 @@
  */
 /** Vertical rhythm inside a labelled field: label, control, hint/error. */
 export declare const FIELD_WRAP = "flex flex-col gap-1.5";
+/**
+ * The marker every labelled field carries on its outermost element, and the
+ * only way a surface can ask how much form it is holding.
+ *
+ * A class would not do: FIELD_WRAP is three utilities a caller may legitimately
+ * write by hand, so counting it would count any column with a 6px gap. The
+ * attribute says what the element is rather than how it looks, and a radio or
+ * checkbox group carries it on the fieldset, so a group of eight options is
+ * one field and not eight.
+ */
+export declare const FIELD_MARKER = "[data-field]";
+/**
+ * How many fields a subtree renders, counting a group as one.
+ *
+ * Only the outermost markers count. A group marks its fieldset and each option
+ * inside it marks its own wrapper, so a plain `querySelectorAll` length would
+ * read a five-option radio group as six fields and size a panel for a form
+ * that is not there.
+ */
+export declare function countFields(root: ParentNode): number;
 /** The label above a control. */
 export declare const FIELD_LABEL = "text-sm font-medium text-fg";
 /** Hint text below a control. Shown only when there is no error. */

package/dist/internal/field.js CHANGED Viewed

@@ -11,6 +11,29 @@
  */
 /** Vertical rhythm inside a labelled field: label, control, hint/error. */
 export const FIELD_WRAP = 'flex flex-col gap-1.5';
+/**
+ * The marker every labelled field carries on its outermost element, and the
+ * only way a surface can ask how much form it is holding.
+ *
+ * A class would not do: FIELD_WRAP is three utilities a caller may legitimately
+ * write by hand, so counting it would count any column with a 6px gap. The
+ * attribute says what the element is rather than how it looks, and a radio or
+ * checkbox group carries it on the fieldset, so a group of eight options is
+ * one field and not eight.
+ */
+export const FIELD_MARKER = '[data-field]';
+/**
+ * How many fields a subtree renders, counting a group as one.
+ *
+ * Only the outermost markers count. A group marks its fieldset and each option
+ * inside it marks its own wrapper, so a plain `querySelectorAll` length would
+ * read a five-option radio group as six fields and size a panel for a form
+ * that is not there.
+ */
+export function countFields(root) {
+    const all = [...root.querySelectorAll(FIELD_MARKER)];
+    return all.filter((el) => !all.some((other) => other !== el && other.contains(el))).length;
+}
 /** The label above a control. */
 export const FIELD_LABEL = 'text-sm font-medium text-fg';
 /** Hint text below a control. Shown only when there is no error. */

package/dist/internal/layout.d.ts CHANGED Viewed

@@ -40,6 +40,40 @@ export declare const PAGE_PAD = "mx-auto w-full px-page-x py-page-y";
  * The names carry the decision, so a page picks a role rather than a number.
  */
 export declare const PAGE_WIDTH: Record<PageWidth, string>;
+/** How wide a surface lifted off the page may get. */
+export type OverlaySize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * One ladder for Modal, Drawer and the dialog stack.
+ *
+ * The three carried three ladders and none of them agreed: a modal's `lg` was
+ * 672px, a drawer's was 384px, and a dialog's was 512px, so the same form read
+ * as three different sizes depending on which surface a page happened to open
+ * it in. Every rung here is wider than the widest of the three it replaces.
+ *
+ * A component takes the slice of the ladder its role allows, which is why the
+ * names and not the numbers are its prop: a drawer stops at `xl` because a
+ * panel docked to an edge that covers the page is a modal with extra steps.
+ *
+ * Spelled out in full rather than composed from the rung name. Tailwind
+ * generates a utility only for a class it can read whole in the source, so
+ * `max-w-${rung}` would compile to nothing at all.
+ */
+export declare const OVERLAY_WIDTH: Record<OverlaySize, string>;
+/**
+ * The rung a body of this many labelled fields needs.
+ *
+ * A panel is sized by its caller today, and the caller is guessing: all 18
+ * drawers measured across three consuming applications ask for the widest rung
+ * the ladder had, and that rung still puts a two-column field grid into two
+ * 170px columns. The content knows the answer, so it gives it: four fields fit
+ * a single column, more than four is where a form starts pairing them, and
+ * past eight it is a page that happens to be in a panel.
+ *
+ * Fields, not controls. A radio group is one field however many inputs it
+ * renders, and the marker the count reads sits on the field wrapper for
+ * exactly that reason.
+ */
+export declare function fitOverlay(fields: number): OverlaySize;
 /**
  * The vertical rhythm between a page's top-level sections. A property of the
  * shell, so a page cannot choose its own.

package/dist/internal/layout.js CHANGED Viewed

@@ -36,11 +36,55 @@ export const PAGE_PAD = 'mx-auto w-full px-page-x py-page-y';
  * The names carry the decision, so a page picks a role rather than a number.
  */
 export const PAGE_WIDTH = {
-    narrow: 'max-w-3xl',
-    default: 'max-w-5xl',
-    wide: 'max-w-7xl',
+    narrow: 'max-w-page-narrow',
+    default: 'max-w-page-default',
+    wide: 'max-w-page-wide',
     full: 'max-w-full',
 };
+/**
+ * One ladder for Modal, Drawer and the dialog stack.
+ *
+ * The three carried three ladders and none of them agreed: a modal's `lg` was
+ * 672px, a drawer's was 384px, and a dialog's was 512px, so the same form read
+ * as three different sizes depending on which surface a page happened to open
+ * it in. Every rung here is wider than the widest of the three it replaces.
+ *
+ * A component takes the slice of the ladder its role allows, which is why the
+ * names and not the numbers are its prop: a drawer stops at `xl` because a
+ * panel docked to an edge that covers the page is a modal with extra steps.
+ *
+ * Spelled out in full rather than composed from the rung name. Tailwind
+ * generates a utility only for a class it can read whole in the source, so
+ * `max-w-${rung}` would compile to nothing at all.
+ */
+export const OVERLAY_WIDTH = {
+    sm: 'max-w-overlay-sm',
+    md: 'max-w-overlay-md',
+    lg: 'max-w-overlay-lg',
+    xl: 'max-w-overlay-xl',
+    full: 'max-w-overlay-full',
+};
+/**
+ * The rung a body of this many labelled fields needs.
+ *
+ * A panel is sized by its caller today, and the caller is guessing: all 18
+ * drawers measured across three consuming applications ask for the widest rung
+ * the ladder had, and that rung still puts a two-column field grid into two
+ * 170px columns. The content knows the answer, so it gives it: four fields fit
+ * a single column, more than four is where a form starts pairing them, and
+ * past eight it is a page that happens to be in a panel.
+ *
+ * Fields, not controls. A radio group is one field however many inputs it
+ * renders, and the marker the count reads sits on the field wrapper for
+ * exactly that reason.
+ */
+export function fitOverlay(fields) {
+    if (fields > 8)
+        return 'xl';
+    if (fields > 4)
+        return 'lg';
+    return 'md';
+}
 /**
  * The vertical rhythm between a page's top-level sections. A property of the
  * shell, so a page cannot choose its own.

package/dist/motion.js CHANGED Viewed

@@ -1,10 +1,15 @@
 /**
  * The entrances and exits, as Svelte transitions that read the motion tokens.
  *
- *     <div in:motion.dialog out:motion.dialog>
- *     <div transition:motion.popover>
+ *     <div transition:motion.dialog|global>
+ *     <div transition:motion.popover|global>
  *     <li animate:motion.reorder>
  *
+ * `|global` is not optional. A Svelte transition is local by default and
+ * plays only when its own block toggles; a page that wraps a Modal in its own
+ * `{#if}` to reset the form each time removes the whole component, and a
+ * local exit never runs. Global plays it on any ancestor change.
+ *
  * A CSS animation plays an entrance and nothing else: the element it ran on
  * is gone the moment `{#if}` turns false, so a dialog that eased open snapped
  * shut. A Svelte transition keeps the element until the exit has played, and

package/dist/styles/theme.css CHANGED Viewed

@@ -291,6 +291,31 @@
   --spacing-sidebar: 14rem; /* 224px - the expanded sidebar */
   --spacing-stack: 1rem; /* 16px - default vertical stack gap */
   --spacing-inline: 0.5rem; /* 8px  - default inline gap         */
+  /* ── Widths · how much room a surface is allowed to take ───── *
+   *  Tailwind reads --container-*, so each name below is a max-w-*  *
+   *  and a w-* utility. Named for the surface rather than for a     *
+   *  t-shirt size, so the cap is chosen by role.                    *
+   *                                                                 *
+   *  Measured 2026-09-22 across three consuming applications: the   *
+   *  page cap was picked four different ways for the same kind of   *
+   *  screen (45 wide pages in one, 17 uncapped ones in another,     *
+   *  and two settings pages in a 768px column), and all 18 of their *
+   *  drawers asked for the widest rung there was, which is what a   *
+   *  ladder that stops too early looks like from the outside.      */
+  --container-page-narrow: 56rem; /* 896px  - one column: a form, a settings pane  */
+  --container-page-default: 72rem; /* 1152px - a page of stacked cards             */
+  --container-page-wide: 96rem; /* 1536px - a data page whose table needs the room */
+  /* One ladder for every surface lifted off the page, so a drawer and
+   * a modal opened from the same screen are the same size. Each rung
+   * is the one above 3:2 of the one below, which is wide enough that a
+   * two-column field grid gets real columns at every step. */
+  --container-overlay-sm: 28rem; /* 448px  - a confirmation, a short form     */
+  --container-overlay-md: 36rem; /* 576px  - up to four fields                */
+  --container-overlay-lg: 44rem; /* 704px  - a form with paired fields        */
+  --container-overlay-xl: 56rem; /* 896px  - a form beside a preview          */
+  --container-overlay-full: 68rem; /* 1088px - a table inside a dialog        */
 }
 /*
@@ -478,7 +503,7 @@ html[data-theme='light'] {
  * Print.
  *
  * The consuming applications had no `@media print` rule anywhere, and three surfaces print:
- * the portal prints an invoice, the ops console prints an audit log, the admin
+ * the portal prints an invoice, an operations console prints an audit log, the admin
  * prints a subject-access export. All three printed the sidebar, the theme
  * toggle and the nav, in a dark palette, and all three printed one screenful
  * and stopped, because the shell is `h-screen` with the content column set to

package/package.json CHANGED Viewed

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

package/src/lib/styles/theme.css CHANGED Viewed

@@ -291,6 +291,31 @@
   --spacing-sidebar: 14rem; /* 224px - the expanded sidebar */
   --spacing-stack: 1rem; /* 16px - default vertical stack gap */
   --spacing-inline: 0.5rem; /* 8px  - default inline gap         */
+  /* ── Widths · how much room a surface is allowed to take ───── *
+   *  Tailwind reads --container-*, so each name below is a max-w-*  *
+   *  and a w-* utility. Named for the surface rather than for a     *
+   *  t-shirt size, so the cap is chosen by role.                    *
+   *                                                                 *
+   *  Measured 2026-09-22 across three consuming applications: the   *
+   *  page cap was picked four different ways for the same kind of   *
+   *  screen (45 wide pages in one, 17 uncapped ones in another,     *
+   *  and two settings pages in a 768px column), and all 18 of their *
+   *  drawers asked for the widest rung there was, which is what a   *
+   *  ladder that stops too early looks like from the outside.      */
+  --container-page-narrow: 56rem; /* 896px  - one column: a form, a settings pane  */
+  --container-page-default: 72rem; /* 1152px - a page of stacked cards             */
+  --container-page-wide: 96rem; /* 1536px - a data page whose table needs the room */
+  /* One ladder for every surface lifted off the page, so a drawer and
+   * a modal opened from the same screen are the same size. Each rung
+   * is the one above 3:2 of the one below, which is wide enough that a
+   * two-column field grid gets real columns at every step. */
+  --container-overlay-sm: 28rem; /* 448px  - a confirmation, a short form     */
+  --container-overlay-md: 36rem; /* 576px  - up to four fields                */
+  --container-overlay-lg: 44rem; /* 704px  - a form with paired fields        */
+  --container-overlay-xl: 56rem; /* 896px  - a form beside a preview          */
+  --container-overlay-full: 68rem; /* 1088px - a table inside a dialog        */
 }
 /*
@@ -478,7 +503,7 @@ html[data-theme='light'] {
  * Print.
  *
  * The consuming applications had no `@media print` rule anywhere, and three surfaces print:
- * the portal prints an invoice, the ops console prints an audit log, the admin
+ * the portal prints an invoice, an operations console prints an audit log, the admin
  * prints a subject-access export. All three printed the sidebar, the theme
  * toggle and the nav, in a dark palette, and all three printed one screenful
  * and stopped, because the shell is `h-screen` with the content column set to