npm - @lyeve-labs/ui-kit - Versions diffs - 0.25.1 → 0.27.0 - Mend

@lyeve-labs/ui-kit 0.25.1 → 0.27.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 +34 -9
package/dist/components/AccountMenu.svelte +1 -1
package/dist/components/AccountMenu.svelte.d.ts +1 -1
package/dist/components/Alert.svelte +109 -41
package/dist/components/Alert.svelte.d.ts +10 -0
package/dist/components/AppShell.svelte +6 -2
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 +1 -1
package/dist/components/Badge.svelte +9 -2
package/dist/components/Checkbox.svelte +1 -1
package/dist/components/CheckboxGroup.svelte +6 -1
package/dist/components/DatePicker.svelte +1 -1
package/dist/components/DateTimePicker.svelte +1 -1
package/dist/components/Drawer.svelte +41 -11
package/dist/components/Drawer.svelte.d.ts +13 -2
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 +30 -10
package/dist/components/Modal.svelte.d.ts +11 -2
package/dist/components/MultiSelect.svelte +1 -1
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 +1 -1
package/dist/components/Textarea.svelte +1 -1
package/dist/components/TimePicker.svelte +1 -1
package/dist/components/Toggle.svelte +4 -0
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 +41 -1
package/dist/internal/layout.js +54 -4
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
@@ -205,11 +205,36 @@ leaves through the same presets the kit's overlays use:
 ```
 `dialog`, `scrim`, `drawer`, `popover` and `toast` read the tokens at run
-time; the `|global` modifier is what lets the exit play when a parent block
-removes the surface, so keep it. They 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.
+time, so retuning a token retunes them, and every one of them plays nothing
+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
@@ -228,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/Alert.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { HIT_AREA } from '../internal/touch.js';
+  import * as motion from '../motion.js';
   import {
     TONE_GLYPH,
     statusTone,
@@ -8,10 +9,30 @@
     type StatusToneInput,
   } from '../internal/tone.js';
+  /**
+   * How long a confirmation holds before it clears itself.
+   *
+   * A toast waits 4000ms. This waits longer because it carries more: a toast is
+   * one line floating over the page, and an alert is a title and a sentence
+   * sitting in the reading order, which takes a beat to find and a beat to
+   * read.
+   */
+  const DISMISS_AFTER = 5000;
   interface Props {
     tone?: StatusToneInput;
     title?: string;
     dismissible?: boolean;
+    /**
+     * Milliseconds before the alert closes itself, or `true` for the default.
+     *
+     * A confirmation clears itself. A warning and a failure stay until
+     * dismissed, so this is off by default and a danger alert never takes it.
+     * Pass it wherever the alert reports the outcome of a submit; leave it off
+     * where a success tone states a standing condition, which does not stop
+     * being true after five seconds.
+     */
+    autoDismiss?: number | boolean;
     ondismiss?: () => void;
     class?: string;
     children?: Snippet;
@@ -21,6 +42,7 @@
     tone = 'brand',
     title = undefined,
     dismissible = false,
+    autoDismiss = false,
     ondismiss = undefined,
     class: klass = '',
     children,
@@ -35,54 +57,100 @@
   };
   const t = $derived(statusTone(tone));
+  /**
+   * A failure and a warning interrupt, because the reader has to act. Anything
+   * else waits for a pause. FormMessage already splits them this way; Alert
+   * announced every tone assertively, so a green confirmation cut across
+   * whatever was being read. An alert that also clears itself must not be
+   * assertive: it would interrupt to say something and then take it away.
+   */
+  const live = $derived(t === 'danger' || t === 'warn');
+  const delay = $derived(autoDismiss === true ? DISMISS_AFTER : Number(autoDismiss) || 0);
+  /** An alert that can close itself can also be closed by hand. */
+  const closable = $derived(dismissible || delay > 0);
+  let closed = $state(false);
+  /** The pointer is over the alert, or focus is inside it. */
+  let held = $state(false);
+  function close(): void {
+    closed = true;
+    ondismiss?.();
+  }
+  /**
+   * The alert owns whether it is on screen, rather than asking the page to
+   * un-render it. An outcome alert lives inside `{#if form}` in the page that
+   * submitted, and nothing clears a form result short of a navigation, so a
+   * callback has nothing to act on.
+   */
+  $effect(() => {
+    if (closed || held || delay <= 0) return;
+    const timer = setTimeout(close, delay);
+    return () => clearTimeout(timer);
+  });
 </script>
-<div
-  class="flex items-start gap-3 rounded-lg border px-4 py-3 {tones[t].wrap} {klass}"
-  role="alert"
->
-  <span
-    class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current {tones[
-      t
-    ].icon}"
-    aria-hidden="true"
+{#if !closed}
+  <!-- The timer stops while the pointer is over the alert or focus is inside
+       it, and starts again when they leave. Text is never pulled away from
+       somebody reading it. -->
+  <div
+    transition:motion.toast|global
+    class="flex items-start gap-3 rounded-lg border px-4 py-3 {tones[t].wrap} {klass}"
+    role={live ? 'alert' : 'status'}
+    aria-live={live ? 'assertive' : 'polite'}
+    onmouseenter={closable ? () => (held = true) : undefined}
+    onmouseleave={closable ? () => (held = false) : undefined}
+    onfocusin={closable ? () => (held = true) : undefined}
+    onfocusout={closable ? () => (held = false) : undefined}
   >
-    <svg
-      width="11"
-      height="11"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <path d={TONE_GLYPH[t]} />
-    </svg>
-  </span>
-  <div class="flex-1 min-w-0">
-    {#if title}<p class="text-sm font-semibold text-fg">{title}</p>{/if}
-    {#if children}<div class="text-sm text-muted {title ? 'mt-0.5' : ''}">
-        {@render children()}
-      </div>{/if}
-  </div>
-  {#if dismissible}
-    <button
-      type="button"
-      onclick={ondismiss}
-      class="{HIT_AREA} shrink-0 text-faint transition-colors hover:text-fg"
-      aria-label="Dismiss"
+    <span
+      class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-current {tones[
+        t
+      ].icon}"
+      aria-hidden="true"
     >
       <svg
-        width="16"
-        height="16"
+        width="11"
+        height="11"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
+        stroke-width="2.5"
         stroke-linecap="round"
-        aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+        stroke-linejoin="round"
+      >
+        <path d={TONE_GLYPH[t]} />
+      </svg>
+    </span>
+    <div class="flex-1 min-w-0">
+      {#if title}<p class="text-sm font-semibold text-fg">{title}</p>{/if}
+      {#if children}<div class="text-sm text-muted {title ? 'mt-0.5' : ''}">
+          {@render children()}
+        </div>{/if}
+    </div>
+    {#if closable}
+      <button
+        type="button"
+        onclick={close}
+        class="{HIT_AREA} shrink-0 rounded text-faint transition-colors hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+        aria-label="Dismiss"
       >
-    </button>
-  {/if}
-</div>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+        >
+      </button>
+    {/if}
+  </div>
+{/if}

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

@@ -4,6 +4,16 @@ interface Props {
     tone?: StatusToneInput;
     title?: string;
     dismissible?: boolean;
+    /**
+     * Milliseconds before the alert closes itself, or `true` for the default.
+     *
+     * A confirmation clears itself. A warning and a failure stay until
+     * dismissed, so this is off by default and a danger alert never takes it.
+     * Pass it wherever the alert reports the outcome of a submit; leave it off
+     * where a success tone states a standing condition, which does not stop
+     * being true after five seconds.
+     */
+    autoDismiss?: number | boolean;
     ondismiss?: () => void;
     class?: string;
     children?: Snippet;

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
@@ -256,7 +256,11 @@
       onfocusin={() => (railOpen = true)}
       onfocusout={onRailFocusOut}
     >
-      <div class="absolute inset-y-0 start-0 z-dropdown flex {railOpen ? 'shadow-2xl' : ''}">
+      <div
+        class="absolute inset-y-0 start-0 z-dropdown flex transition-shadow {railOpen
+          ? 'shadow-2xl'
+          : ''}"
+      >
         {@render sidebar(isMobile, railIcons)}
       </div>
     </div>

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}

package/dist/components/Badge.svelte CHANGED Viewed

@@ -42,12 +42,19 @@
      Under a Table's default `overflow-wrap: anywhere` a status rendered as
      `dra ft` and a role as `sup er_a dmi n`. The label sits in a truncating
      span so a badge whose caller caps its width ends in an ellipsis instead of
-     painting past its own border; with no cap the span never shrinks. -->
+     painting past its own border; with no cap the span never shrinks.
+     The svg rules are what let a caller put an icon in the label. Preflight
+     makes every svg a block, and a block inside the label takes a line of its
+     own, so an icon and its text stacked and the badge rendered two rows tall
+     inside a pill. A flex row here would fix the stacking and lose the
+     ellipsis, which is the thing the span exists for, so the icon goes back to
+     being inline and sits on the text's optical centre. -->
 <span
   class="inline-flex max-w-full items-center font-medium whitespace-nowrap rounded-full border {tones[
     tone
   ]} {sizes[size]} {klass}"
 >
   {#if dot}<span class="w-1.5 h-1.5 shrink-0 rounded-full {dotColor[tone]}"></span>{/if}
-  <span class="min-w-0 truncate">{@render children()}</span>
+  <span class="min-w-0 truncate [&>svg]:inline [&>svg]:align-middle">{@render children()}</span>
 </span>

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}

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`;
@@ -71,7 +101,7 @@
     <div
       use:overlay
       transition:motion.drawer|global={{ side }}
-      class="relative flex h-full max-w-full flex-col {widths[size]} bg-surface shadow-2xl
+      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/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.
@@ -66,7 +86,7 @@
     <div
       use:overlay
       transition:motion.dialog|global
-      class="relative flex max-h-[calc(100dvh-2rem)] w-full {widths[size]} flex-col
+      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}

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}

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/Toggle.svelte CHANGED Viewed

@@ -67,7 +67,11 @@
   }
 </script>
+<!-- The marker is on the label because the label is the whole control: the
+     switch and its text are one field, and an overlay sizing itself to a form
+     counts what it can see. -->
 <label
+  data-field
   class="inline-flex items-start gap-2.5 cursor-pointer select-none {disabled
     ? 'opacity-50 cursor-not-allowed'
     : ''} {cls}"

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.1";
+export declare const VERSION = "0.27.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.1';
+export const VERSION = '0.27.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.
@@ -139,13 +173,19 @@ export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant):
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
  */
-export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface";
+export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move";
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
  * at 768px the expanded column left 496px for the page, and a flow editor with
  * two docked panes had no canvas at all. The shell picks between them; the
  * width is not part of APP_SIDEBAR so the aside cannot carry both.
+ *
+ * The travel between them is on APP_SIDEBAR, which is the one class both
+ * widths share. It is a disclosure opening sideways, which is the same thing
+ * an accordion does downwards, so it takes the accordion's rung and curve:
+ * base and move. It was the most frequent state change in the product and the
+ * only one that happened in a single frame.
  */
 export declare const APP_SIDEBAR_WIDE = "w-sidebar";
 export declare const APP_SIDEBAR_RAIL = "w-nav-rail";

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.
@@ -163,13 +207,19 @@ export function sectionHeading(level, variant = 'default') {
  * `border-e` and not `border-r`: the shell is the one place a right-to-left
  * locale flips, and a physical border leaves the rule on the wrong edge.
  */
-export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface';
+export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-surface transition-[width] duration-base ease-move';
 /**
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
  * at 768px the expanded column left 496px for the page, and a flow editor with
  * two docked panes had no canvas at all. The shell picks between them; the
  * width is not part of APP_SIDEBAR so the aside cannot carry both.
+ *
+ * The travel between them is on APP_SIDEBAR, which is the one class both
+ * widths share. It is a disclosure opening sideways, which is the same thing
+ * an accordion does downwards, so it takes the accordion's rung and curve:
+ * base and move. It was the most frequent state change in the product and the
+ * only one that happened in a single frame.
  */
 export const APP_SIDEBAR_WIDE = 'w-sidebar';
 export const APP_SIDEBAR_RAIL = 'w-nav-rail';

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.1",
+  "version": "0.27.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