@lyeve-labs/ui-kit 0.11.2 → 0.13.0

package/dist/components/MultiSelect.svelte

@@ -1,4 +1,14 @@
 <script lang="ts">
+  /**
+   * Several values from one list, shown as removable chips, with an optional
+   * search box in the panel.
+   *
+   * The open state, the active row, the keyboard model and the dismissal come
+   * from internal/listbox, the matching from internal/filter and every class in
+   * the panel from internal/panel. A pick leaves the list open, which is the
+   * reason the factory reports a selection rather than closing on one.
+   */
+  import { applyFilter, type FilterInput } from '../internal/filter.js';
   import {
     FIELD_ERROR,
     FIELD_HINT,
@@ -7,12 +17,30 @@
     controlBorder,
     describedBy,
   } from '../internal/field.js';
-  // MultiSelect: pick several options, shown as removable chips, with an optional
-  // search box. Binds to a string[] of selected values.
-  interface Option {
-    value: string;
-    label: string;
+  import { createListbox } from '../internal/listbox.svelte.js';
+  import { PANEL_EMPTY, PANEL_LIST, PANEL_SURFACE, panelOption } from '../internal/panel.js';
+  import type { ListOption } from './Autocomplete.svelte';
+
+  interface Props {
+    /** The chosen values, in the order they were picked. */
+    value?: string[];
+    options: ListOption[];
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    /** Adds a search field inside the panel. */
+    searchable?: boolean;
     disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    /**
+     * Replaces the default matcher, or false to switch local filtering off
+     * because the list arrived already narrowed, by a server query for instance.
+     */
+    filter?: FilterInput<ListOption>;
+    class?: string;
+    onchange?: (value: string[]) => void;
   }
 
   let {
@@ -26,116 +54,150 @@
     disabled = false,
     required = false,
     id = undefined,
+    filter = undefined,
     class: cls = '',
     onchange = undefined,
-  }: {
-    value?: string[];
-    options: Option[];
-    label?: string;
-    hint?: string;
-    error?: string;
-    placeholder?: string;
-    searchable?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    id?: string;
-    class?: string;
-    onchange?: (value: string[]) => void;
-  } = $props();
+  }: Props = $props();
+
+  /*
+   * $props.id() and not a random string: a random id differs between the server
+   * render and hydration, so every idref built from it names an element the
+   * client never rendered. The trigger, the panel and each row are tied
+   * together by this one.
+   */
+  const uid = $props.id();
+  const fieldId = $derived(id ?? uid);
 
-  let open = $state(false);
   let query = $state('');
-  let containerEl: HTMLDivElement | undefined = $state();
+  let triggerEl = $state<HTMLDivElement | undefined>();
+  let searchEl = $state<HTMLInputElement | undefined>();
 
-  const selected = $derived(options.filter((o) => value.includes(o.value)));
-  const filtered = $derived(
-    options.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase())),
-  );
+  const chosen = $derived(new Set(value));
+  const selected = $derived(options.filter((option) => chosen.has(option.value)));
+  const rows = $derived(applyFilter(options, query, filter));
 
-  function isSelected(v: string) {
-    return value.includes(v);
-  }
+  const box = createListbox<ListOption>({
+    items: () => rows,
+    baseId: () => fieldId,
+    onSelect: (option) => pick(option),
+    // A search box makes letters query text, so the two typeaheads cannot both
+    // own them. Without one, typing jumps to a row the way a select does.
+    typeahead: () => !searchable,
+    onClose: (reason) => {
+      query = '';
+      // Tab is the one dismissal that leaves focus inside a panel about to be
+      // unmounted: the module hands the key on rather than consuming it, so the
+      // browser is about to move focus from wherever it finds it.
+      if (reason === 'tab') triggerEl?.focus();
+    },
+  });
 
-  function toggle(opt: Option) {
-    if (opt.disabled) return;
-    value = isSelected(opt.value) ? value.filter((v) => v !== opt.value) : [...value, opt.value];
+  const anchor = box.anchor;
+  const panel = box.panel;
+
+  function pick(option: ListOption): void {
+    if (option.disabled === true) return;
+    value = chosen.has(option.value)
+      ? value.filter((v) => v !== option.value)
+      : [...value, option.value];
     onchange?.(value);
   }
 
-  function remove(v: string) {
+  function remove(v: string): void {
     value = value.filter((x) => x !== v);
     onchange?.(value);
   }
 
-  function open_() {
-    if (!disabled) open = true;
+  function search(event: Event & { currentTarget: HTMLInputElement }): void {
+    query = event.currentTarget.value;
+    // The keyboard must not rest on a row the new query pushed out from under
+    // it: aria-activedescendant would name one option while the ring is drawn
+    // on another. Cleared first, so openList lands on the first row that still
+    // matches rather than on whatever now sits at the old index.
+    box.setActive(-1);
+    box.openList();
   }
 
-  function handleOutside(e: MouseEvent) {
-    if (containerEl && !containerEl.contains(e.target as Node)) {
-      open = false;
-      query = '';
+  function onTriggerKeydown(event: KeyboardEvent): void {
+    if (disabled) return;
+    // A chip's remove button sits inside the trigger, so its keys bubble
+    // through here. Taken as the trigger's own they would open the panel and
+    // preventDefault the click that removes the chip.
+    if (event.target !== event.currentTarget) return;
+    if (box.onkeydown(event)) return;
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+
+    // The trigger owns these two only while the list is closed. Open, Enter
+    // belongs to the listbox and Space means the same thing it does: take the
+    // row the ring is resting on.
+    event.preventDefault();
+    if (!box.open) {
+      box.openList();
+      return;
     }
-  }
-  function handleKey(e: KeyboardEvent) {
-    if (e.key === 'Escape') open = false;
+    const option = rows[box.activeIndex];
+    if (option !== undefined) pick(option);
   }
 
+  /*
+   * Focus moves into the panel deliberately, and it comes back: Escape returns
+   * it to the trigger through the shared module, and Tab hands it back above.
+   * The attribute this replaces did the first half and none of the second, and
+   * the warning it raised was suppressed with an ignore comment rather than
+   * answered.
+   */
   $effect(() => {
-    if (open) {
-      document.addEventListener('click', handleOutside, { capture: true });
-      document.addEventListener('keydown', handleKey);
-    }
-    return () => {
-      document.removeEventListener('click', handleOutside, { capture: true });
-      document.removeEventListener('keydown', handleKey);
-    };
+    if (box.open && searchEl !== undefined) searchEl.focus();
   });
 </script>
 
-<div class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
+<div class="{FIELD_WRAP} {cls}">
   {#if label}
-    <label for={id} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
+    <label id="{fieldId}-label" for={fieldId} class={FIELD_LABEL}>
+      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
-  <div class="relative">
-    <!-- Trigger (a div, not a button, so the chip remove-buttons are valid children) -->
+  <div class="relative" use:anchor>
+    <!--
+      A div and not a button, so the chips' own remove buttons are valid
+      children. role="combobox" and not role="button" for the same reason: a
+      button's descendants are presentational, which took every remove button
+      out of the accessibility tree, and aria-activedescendant says nothing on a
+      role that does not support it.
+    -->
     <div
-      {id}
-      role="button"
+      bind:this={triggerEl}
+      id={fieldId}
+      role="combobox"
       tabindex={disabled ? -1 : 0}
-      aria-haspopup="listbox"
-      aria-expanded={open}
-      aria-disabled={disabled}
-      onclick={() => (open ? (open = false) : open_())}
-      onkeydown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          open ? (open = false) : open_();
-        }
+      aria-disabled={disabled ? 'true' : undefined}
+      aria-labelledby={label ? `${fieldId}-label` : undefined}
+      aria-required={required ? 'true' : undefined}
+      aria-describedby={describedBy(fieldId, error, hint)}
+      onclick={() => {
+        if (!disabled) box.toggle();
       }}
-      aria-describedby={describedBy(id, error, hint)}
-      class="w-full min-h-control flex flex-wrap items-center gap-1.5 rounded-lg border bg-surface-2
-        px-2.5 py-1.5 text-left text-sm transition-colors duration-150 outline-none cursor-pointer
-        {disabled ? 'opacity-50 cursor-not-allowed' : ''}
-        {controlBorder(!!error)}"
+      onkeydown={onTriggerKeydown}
+      {...box.triggerAttrs}
+      class="flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-lg
+        border bg-surface-2 px-2.5 py-1.5 text-left text-sm transition-colors duration-150
+        outline-none {disabled ? 'cursor-not-allowed opacity-50' : ''} {controlBorder(!!error)}"
     >
       {#if selected.length === 0}
-        <span class="text-faint px-0.5">{placeholder}</span>
+        <span class="px-0.5 text-faint">{placeholder}</span>
       {:else}
-        {#each selected as opt (opt.value)}
+        {#each selected as option (option.value)}
           <span
-            class="inline-flex items-center gap-1 rounded-md bg-brand/10 text-brand px-2 py-0.5 text-xs"
+            class="inline-flex items-center gap-1 rounded-md bg-brand/10 px-2 py-0.5 text-xs text-brand"
           >
-            {opt.label}
+            {option.label}
             <button
               type="button"
-              aria-label="Remove {opt.label}"
-              onclick={(e) => {
-                e.stopPropagation();
-                remove(opt.value);
+              aria-label="Remove {option.label}"
+              onclick={(event) => {
+                event.stopPropagation();
+                remove(option.value);
               }}
               class="transition-colors duration-150 hover:text-brand-light"
             >
@@ -156,7 +218,13 @@
         {/each}
       {/if}
       <span class="ml-auto shrink-0 text-faint" aria-hidden="true">
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          class="transition-transform duration-150 {box.open ? 'rotate-180' : ''}"
+        >
           <path
             d="M2 4l4 4 4-4"
             stroke="currentColor"
@@ -168,42 +236,65 @@
       </span>
     </div>
 
-    <!-- Panel -->
-    {#if open}
-      <div
-        role="listbox"
-        aria-multiselectable="true"
-        class="absolute z-50 mt-1 w-full rounded-xl border border-line bg-surface shadow-2xl overflow-hidden"
-      >
+    {#if box.open}
+      <div class="{PANEL_SURFACE} w-full">
         {#if searchable}
-          <div class="p-2 border-b border-line">
-            <!-- svelte-ignore a11y_autofocus -->
+          <div class="border-b border-line p-2">
             <input
-              autofocus
-              bind:value={query}
-              placeholder="Search…"
-              class="w-full rounded-md bg-surface-2 border border-line px-2.5 py-1.5 text-sm text-fg
-                placeholder:text-faint outline-none focus:border-brand"
+              bind:this={searchEl}
+              type="text"
+              role="combobox"
+              value={query}
+              oninput={search}
+              onkeydown={(event) => {
+                box.onkeydown(event);
+              }}
+              placeholder="Search"
+              aria-label={label ? `Search ${label}` : 'Search options'}
+              {...box.triggerAttrs}
+              class="w-full rounded-md border border-line-strong bg-surface-2 px-2.5 py-1.5
+                text-sm text-fg outline-none transition-colors duration-150
+                placeholder:text-faint focus:border-brand"
             />
           </div>
         {/if}
-        <div class="max-h-60 overflow-y-auto py-1">
-          {#each filtered as opt (opt.value)}
+
+        <div class={PANEL_LIST} use:panel {...box.listAttrs} aria-multiselectable="true">
+          {#each rows as option, index (option.value)}
+            {@const isSelected = chosen.has(option.value)}
+            <!--
+              role is stated here as well as spread. The compiler checks
+              aria-selected against the role it can see in the source and it
+              cannot see into a spread, so without this the row reads to it as a
+              plain button carrying an attribute a button does not support.
+            -->
             <button
               type="button"
               role="option"
-              aria-selected={isSelected(opt.value)}
-              disabled={opt.disabled}
-              onclick={() => toggle(opt)}
-              class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-fg transition-colors duration-150
-                hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed
-                outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50"
+              onclick={() => pick(option)}
+              onmouseenter={() => box.setActive(index)}
+              onmousedown={(event) => {
+                // Pressing a row must not pull focus out of the search box: the
+                // list stays open for the next pick, and the caret stays where
+                // the user was typing.
+                event.preventDefault();
+              }}
+              aria-selected={isSelected ? 'true' : 'false'}
+              {...box.optionAttrs(index)}
+              class={panelOption({
+                active: box.activeIndex === index,
+                selected: isSelected,
+                disabled: option.disabled === true,
+              })}
             >
               <span
-                class="flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors duration-150
-                  {isSelected(opt.value) ? 'bg-brand border-brand' : 'bg-surface-2 border-line'}"
+                class="flex h-4 w-4 shrink-0 items-center justify-center rounded border
+                  transition-colors duration-150
+                  {isSelected
+                  ? 'border-brand bg-brand text-ink'
+                  : 'border-line-strong bg-surface-2'}"
               >
-                {#if isSelected(opt.value)}
+                {#if isSelected}
                   <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
                     <path
                       d="M1 4l3 3 5-6"
@@ -211,15 +302,14 @@
                       stroke-width="1.5"
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                      class="text-ink"
                     />
                   </svg>
                 {/if}
               </span>
-              <span class="text-left">{opt.label}</span>
+              <span class="min-w-0 truncate text-left">{option.label}</span>
             </button>
           {:else}
-            <p class="px-3 py-2 text-sm text-faint">No matches</p>
+            <p class={PANEL_EMPTY}>No matches</p>
           {/each}
         </div>
       </div>
@@ -227,8 +317,8 @@
   </div>
 
   {#if error}
-    <p id={id ? `${id}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+    <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p id={id ? `${id}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
+    <p id="{fieldId}-hint" class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

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

@@ -1,22 +1,35 @@
-interface Option {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-type $$ComponentProps = {
+/**
+   * Several values from one list, shown as removable chips, with an optional
+   * search box in the panel.
+   *
+   * The open state, the active row, the keyboard model and the dismissal come
+   * from internal/listbox, the matching from internal/filter and every class in
+   * the panel from internal/panel. A pick leaves the list open, which is the
+   * reason the factory reports a selection rather than closing on one.
+   */
+import { type FilterInput } from '../internal/filter.js';
+import type { ListOption } from './Autocomplete.svelte';
+interface Props {
+    /** The chosen values, in the order they were picked. */
     value?: string[];
-    options: Option[];
+    options: ListOption[];
     label?: string;
     hint?: string;
     error?: string;
     placeholder?: string;
+    /** Adds a search field inside the panel. */
     searchable?: boolean;
     disabled?: boolean;
     required?: boolean;
     id?: string;
+    /**
+     * Replaces the default matcher, or false to switch local filtering off
+     * because the list arrived already narrowed, by a server query for instance.
+     */
+    filter?: FilterInput<ListOption>;
     class?: string;
     onchange?: (value: string[]) => void;
-};
-declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+}
+declare const MultiSelect: import("svelte").Component<Props, {}, "value">;
 type MultiSelect = ReturnType<typeof MultiSelect>;
 export default MultiSelect;

package/dist/components/NumberInput.svelte

@@ -4,6 +4,7 @@
     FIELD_HINT,
     FIELD_LABEL,
     FIELD_WRAP,
+    controlBorder,
     describedBy,
   } from '../internal/field.js';
 
@@ -66,8 +67,11 @@
   let canDec = $derived(!(disabled || (min !== undefined && value <= min)));
   let canInc = $derived(!(disabled || (max !== undefined && value >= max)));
 
+  // line-strong, not line: the stepper buttons and the number between them read
+  // as one control, and line sits at 1.25:1, so the caps of that control were
+  // the part a low-vision user could not find.
   const step_ =
-    'flex w-control shrink-0 items-center justify-center border-line bg-surface-2 text-muted ' +
+    'flex w-control shrink-0 items-center justify-center border-line-strong bg-surface-2 text-muted ' +
     'transition-colors duration-150 hover:bg-line hover:text-fg ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 </script>
@@ -75,7 +79,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
+      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -115,12 +119,12 @@
       aria-invalid={error ? 'true' : undefined}
       aria-describedby={describedBy(fieldId, error, hint)}
       class="min-w-0 flex-1 border-y bg-surface-2 text-center text-sm text-fg
-        outline-none transition-colors duration-150 focus:border-brand
+        outline-none transition-colors duration-150
         disabled:cursor-not-allowed disabled:opacity-50
         [appearance:textfield]
         [&::-webkit-inner-spin-button]:appearance-none
         [&::-webkit-outer-spin-button]:appearance-none
-        {error ? 'border-danger' : 'border-line'}"
+        {controlBorder(!!error)}"
     />
 
     <button

package/dist/components/PageHeader.svelte

@@ -4,19 +4,52 @@
   interface Props {
     title: string;
     description?: string;
+    /**
+     * The title row for a page with no room for one: the title drops to body
+     * size and the description is not rendered. A full-height page, a split
+     * pane or a canvas, spends every pixel it does not give away.
+     */
+    compact?: boolean;
+    /**
+     * Drop the bottom margin, for a caller that owns the rhythm itself.
+     *
+     * The margin is opt-out rather than removed. Forty-three pages across the
+     * estate render this component directly and take their heading gap from
+     * it, so deleting it outright would have moved every one of them by 32px
+     * with nothing in their own source to explain why.
+     */
+    flush?: boolean;
     class?: string;
     actions?: Snippet;
   }
 
-  let { title, description = undefined, class: klass = '', actions }: Props = $props();
+  let {
+    title,
+    description = undefined,
+    compact = false,
+    flush = false,
+    class: klass = '',
+    actions,
+  }: Props = $props();
 </script>
 
-<header class="mb-8 flex flex-wrap items-start justify-between gap-4 {klass}">
+<!-- The margin is stated before the consumer's class so a page can still
+     override it, which is the whole reason it is a separate token rather than
+     part of the layout: it used to be appended ahead of `klass` unconditionally,
+     and a page asking for a different gap shipped two competing margin
+     utilities in one attribute with Tailwind's emitted order picking the winner
+     rather than the page. -->
+<header class="flex flex-wrap items-start justify-between gap-4 {flush ? '' : 'mb-8'} {klass}">
   <div class="min-w-0">
     <!-- The app shells render their own h1 for the current route, so a heading
          lookup by name matches two elements. This names the page's own title. -->
-    <h1 data-testid="page-title" class="text-2xl font-bold text-fg">{title}</h1>
-    {#if description}<p class="mt-1 text-sm text-muted">{description}</p>{/if}
+    <h1
+      data-testid="page-title"
+      class={compact ? 'text-sm font-semibold text-fg' : 'text-2xl font-bold text-fg'}
+    >
+      {title}
+    </h1>
+    {#if description && !compact}<p class="mt-1 text-sm text-muted">{description}</p>{/if}
   </div>
   {#if actions}
     <div class="flex shrink-0 items-center gap-2">{@render actions()}</div>

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

@@ -2,6 +2,21 @@ import type { Snippet } from 'svelte';
 interface Props {
     title: string;
     description?: string;
+    /**
+     * The title row for a page with no room for one: the title drops to body
+     * size and the description is not rendered. A full-height page, a split
+     * pane or a canvas, spends every pixel it does not give away.
+     */
+    compact?: boolean;
+    /**
+     * Drop the bottom margin, for a caller that owns the rhythm itself.
+     *
+     * The margin is opt-out rather than removed. Forty-three pages across the
+     * estate render this component directly and take their heading gap from
+     * it, so deleting it outright would have moved every one of them by 32px
+     * with nothing in their own source to explain why.
+     */
+    flush?: boolean;
     class?: string;
     actions?: Snippet;
 }

package/dist/components/PageShell.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  /**
+   * The page frame: the gutter, the content cap, the centring and the section
+   * rhythm, all owned by the shell so a page cannot pick its own.
+   *
+   * Nothing in the library owned the frame, so every page built one. Across one
+   * app 31 of 35 pages restate the gutter in four spellings, five content caps
+   * are in use with no rule for choosing between them, and one page renders
+   * against the left edge of the window because it set a cap and forgot
+   * `mx-auto`. Centring and `w-full` come with the gutter here, in PAGE_PAD, so
+   * there is no order of props that leaves them out.
+   *
+   * The shell renders no landmark of its own. An app shell already owns `main`,
+   * `nav` and the rest, and a second `main` changes what a landmark query
+   * matches for every assistive technology reading the page.
+   */
+  import type { Snippet } from 'svelte';
+  import { PAGE_PAD, PAGE_STACK, PAGE_WIDTH, type PageWidth } from '../internal/layout.js';
+  import PageHeader from './PageHeader.svelte';
+
+  interface Props {
+    /** The page's only h1, rendered through PageHeader. */
+    title: string;
+    description?: string;
+    /** Content cap. narrow, default, wide, full. */
+    width?: PageWidth;
+    /**
+     * A full-height page that manages its own scrolling, for instance a split
+     * pane or a canvas. No gutter, no cap, and the title renders compact.
+     */
+    fill?: boolean;
+    /** Rendered above the title at one fixed distance. */
+    breadcrumb?: Snippet;
+    /** Right-aligned controls in the title row. */
+    actions?: Snippet;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    title,
+    description = undefined,
+    width = 'default',
+    fill = false,
+    breadcrumb,
+    actions,
+    class: klass = '',
+    children,
+  }: Props = $props();
+
+  /**
+   * A fill page owns the viewport instead of sitting in it: no gutter, no cap,
+   * and the height the title row leaves goes to the content, so a split pane
+   * scrolls inside the page rather than scrolling the page. Two pages carry a
+   * documented waiver against their app's own layout lint for exactly this
+   * shape, which is the argument for the shell supporting it.
+   *
+   * `min-h-0` is load bearing on the column: a flex item refuses to shrink
+   * below its content by default, so without it the pane runs past the bottom
+   * of the window and takes its own scrollbar out of reach.
+   */
+  const frame = $derived(
+    fill
+      ? 'flex h-full min-h-0 w-full flex-col gap-4'
+      : `${PAGE_PAD} ${PAGE_WIDTH[width]} ${PAGE_STACK}`,
+  );
+
+  /** The content stack. On a fill page it also takes the leftover height. */
+  const content = $derived(fill ? `${PAGE_STACK} min-h-0 flex-1` : PAGE_STACK);
+</script>
+
+<div class="{frame} {klass}">
+  <!-- The breadcrumb and the title are one group, so the distance between them
+       is fixed here and does not change with whether a description is set. -->
+  <div class="flex flex-col gap-2">
+    {#if breadcrumb}{@render breadcrumb()}{/if}
+    <!-- flush: the shell's own section stack supplies the gap below the title,
+         so the header must not add a second one. -->
+    <PageHeader {title} {description} {actions} compact={fill} flush />
+  </div>
+
+  <div class={content}>
+    {@render children()}
+  </div>
+</div>