@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/layout/Breadcrumbs.svelte

@@ -0,0 +1,52 @@
+<!-- @component
+The ancestor trail above a page title, as daisyUI `breadcrumbs` inside a labelled navigation landmark.
+-->
+<!--
+  Breadcrumbs — the ancestor trail above a page title, as daisyUI's
+  `breadcrumbs` inside a labelled navigation landmark.
+
+  ARIA contract: a `<nav aria-label>` wrapping an `<ol>`, because a trail is
+  ordered and the order is the meaning — "Home, then Elections, then this".
+  Ancestors are links; the TRAILING crumb is rendered as text and carries
+  `aria-current="page"`, even when the caller gave it an `href`. A link to the
+  page you are already on is a link that does nothing, and `aria-current` is
+  what says "this is where you are" to someone who cannot see the trail.
+
+  `item` lets a caller render a crumb's contents themselves — an icon beside
+  the label, a `<Badge>`, a truncated middle. The `<li>` and the
+  `aria-current` stay this component's either way: when `item` is supplied the
+  attribute moves to the `<li>`, so the contract holds whatever the snippet
+  renders inside it.
+
+  Hrefs resolve through the components context, so a base path or a locale
+  prefix is applied once by the app rather than at every call site.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { items, label = "Breadcrumb", item, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<nav
+  {...rest}
+  aria-label={label}
+  class={['breadcrumbs text-base-content/70 text-sm', className]}
+>
+  <ol>
+    {#each items as crumb, index (index)}
+      {@const current = index === items.length - 1}
+      {#if item}
+        <li aria-current={current ? 'page' : undefined}>{@render item(crumb, index)}</li>
+      {:else}
+        <li>
+          {#if crumb.href !== undefined && !current}
+            <a href={context.href(crumb.href)} class="link link-hover">{crumb.label}</a>
+          {:else}
+            <span class="text-base-content" aria-current={current ? 'page' : undefined}>
+              {crumb.label}
+            </span>
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>

package/dist/layout/Breadcrumbs.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Crumb } from './types.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Ordered ancestors, ending with the current page. */
+    items: readonly Crumb[];
+    /**
+     * Accessible name of the navigation landmark.
+     * @defaultValue `'Breadcrumb'`
+     */
+    label?: string | undefined;
+    /** Render one crumb's contents. The `<li>` wrapper is still this component's. */
+    item?: Snippet<[Crumb, number]> | undefined;
+}
+/** The ancestor trail above a page title, as daisyUI `breadcrumbs` inside a labelled navigation landmark. */
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/layout/Cluster.svelte

@@ -0,0 +1,28 @@
+<!-- @component
+Inline items that wrap onto new lines with a token gap: a row of tags or buttons.
+-->
+<!--
+  Cluster — "every-layout"'s Cluster, Compose's `FlowRow`: items in a row
+  that wraps, with the same gap between rows as between items. With
+  `as="ul"` / `"ol"` it is a list (`role="list"` restored; children `<li>`).
+-->
+<script lang="ts">import { alignClass, gapClass, justifyClass } from "./space.js";
+let { gap = "sm", align = "center", justify, as = "div", children, class: className, ...rest } = $props();
+const list = $derived(as === "ul" || as === "ol");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  role={list ? 'list' : rest.role}
+  class={[
+    'flex flex-wrap',
+    gapClass[gap],
+    alignClass[align],
+    justify !== undefined && justifyClass[justify],
+    list && 'list-none',
+    className,
+  ]}
+>
+  {@render children()}
+</svelte:element>

package/dist/layout/Cluster.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlowAlign, type FlowElement, type FlowJustify, type Gap } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * Space between items and between rows.
+     * @defaultValue `'sm'`
+     */
+    gap?: Gap | undefined;
+    /**
+     * Cross-axis alignment.
+     * @defaultValue `'center'`
+     */
+    align?: FlowAlign | undefined;
+    /** Main-axis distribution. */
+    justify?: FlowJustify | undefined;
+    /**
+     * The element. With `'ul'` / `'ol'`, children must be `<li>`s.
+     * @defaultValue `'div'`
+     */
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** Inline items that wrap onto new lines with a token gap: a row of tags or buttons. */
+declare const Cluster: import("svelte").Component<Props, {}, "">;
+type Cluster = ReturnType<typeof Cluster>;
+export default Cluster;

package/dist/layout/DetailLayout.svelte

@@ -0,0 +1,50 @@
+<!-- @component
+The two-column detail-page shell: a header across the top, a body column and a summary aside.
+-->
+<!--
+  DetailLayout — the two-column detail-page shell: a header across the top, a
+  body column, and a summary aside beside it.
+
+  The reflow is the whole point. On a wide viewport the aside sits to the
+  RIGHT of the body (a third of the width, the Wikipedia infobox position); on
+  a phone there is no beside, and the useful order is title → aside → body,
+  because the aside is the facts-at-a-glance block and a reader who has to
+  scroll past the whole article to reach it will never reach it. That is done
+  by putting the aside BEFORE the body in the column flow (`order-first`) and
+  overriding to explicit grid placement from `lg` — not by rendering it twice,
+  which would duplicate every id and every heading in the accessibility tree.
+
+  ARIA contract: the aside is an `<aside aria-label>` — a `complementary`
+  landmark, which is exactly what it is: content related to the page's main
+  content and meaningful on its own. It is named because a landmark a reader
+  cannot tell apart from another landmark is a landmark they will not use.
+  `header` is a snippet rather than a set of title/subtitle props: it takes a
+  `PageHeader`, which already owns the heading contract.
+
+  This renders no `<main>`. It is placed INSIDE `Main` by the page, because a
+  page that is two columns of a wider shell must not open a second landmark.
+  `data-testid="detail-body"` / `"detail-infobox"` are carried over.
+-->
+<script lang="ts">let { header, body, aside, asideLabel = "Summary", class: className, ...rest } = $props();
+export {};
+</script>
+
+<div {...rest} class={['space-y-8', className]}>
+  {@render header()}
+
+  <div class="flex flex-col gap-8 lg:grid lg:grid-cols-3 lg:items-start">
+    <div data-testid="detail-body" class="min-w-0 space-y-8 lg:col-span-2 lg:col-start-1 lg:row-start-1">
+      {@render body()}
+    </div>
+
+    {#if aside}
+      <aside
+        data-testid="detail-infobox"
+        aria-label={asideLabel}
+        class="order-first min-w-0 lg:order-none lg:col-start-3 lg:row-start-1"
+      >
+        {@render aside()}
+      </aside>
+    {/if}
+  </div>
+</div>

package/dist/layout/DetailLayout.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The page header block — normally a `PageHeader`. */
+    header: Snippet<[]>;
+    /** The main body column. */
+    body: Snippet<[]>;
+    /** The summary column — an infobox, a fact list, a map. */
+    aside?: Snippet<[]> | undefined;
+    /**
+     * Accessible name of the `<aside>` landmark.
+     * @defaultValue `'Summary'`
+     */
+    asideLabel?: string | undefined;
+}
+/** The two-column detail-page shell: a header across the top, a body column and a summary aside. */
+declare const DetailLayout: import("svelte").Component<Props, {}, "">;
+type DetailLayout = ReturnType<typeof DetailLayout>;
+export default DetailLayout;

package/dist/layout/FilterBar.svelte

@@ -0,0 +1,40 @@
+<!-- @component
+The row of filter options above a list, as links rather than a form.
+-->
+<!--
+  FilterBar — the row of filter options above a list, as links rather than a
+  form.
+
+  Links, deliberately: a filtered view is then a URL an operator can bookmark,
+  paste into a message, or reload — which a `<select>` that mutates client
+  state is not. `href` is supplied per option by the page, because a cursor,
+  a sort order and a search term all have to travel with the filter and only
+  the page knows what the rest of its query string is.
+
+  `active` is the caller's to decide for the same reason: only the page knows
+  which axis this row filters on.
+
+  ARIA contract: a `<nav aria-label>` — each surface filters on a different
+  axis ("Filter by status", "Filter by licence") and an unnamed second
+  navigation landmark on a page is one a reader cannot tell from the first.
+  The active option carries `aria-current="page"` as well as daisyUI's
+  `btn-active`, because the highlight is a colour and the attribute is what
+  says so out loud. The options are anchors, not buttons, so the `btn` class
+  here is a costume, not a role.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { options, label, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<nav {...rest} aria-label={label} class={['flex flex-wrap items-center gap-2', className]}>
+  {#each options as option (option.key)}
+    <a
+      href={context.href(option.href)}
+      class={['btn btn-sm', option.active && 'btn-active']}
+      aria-current={option.active ? 'page' : undefined}
+    >
+      {option.label}
+    </a>
+  {/each}
+</nav>

package/dist/layout/FilterBar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FilterOption } from './types.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The filters; the current one gets `aria-current`. */
+    options: readonly FilterOption[];
+    /** Accessible name for the row — say which axis it filters on. */
+    label: string;
+}
+/** The row of filter options above a list, as links rather than a form. */
+declare const FilterBar: import("svelte").Component<Props, {}, "">;
+type FilterBar = ReturnType<typeof FilterBar>;
+export default FilterBar;

package/dist/layout/Fits.svelte

@@ -0,0 +1,27 @@
+<!-- @component
+Shows the first of several layouts that fits its container, switching at declared container widths (CSS container queries, no JavaScript).
+-->
+<!--
+  Fits — the model is SwiftUI's `ViewThatFits`: "the horizontal button row
+  if it fits, else the stacked one, else a menu". CSS cannot measure
+  content's intrinsic width, so, unlike SwiftUI, it switches at declared
+  container widths: `breakpoints[i]` is the width below which `layouts[i]`
+  stops fitting. It is an `@container`, so the switch follows the space the
+  component actually has, not the viewport.
+
+  A JavaScript-measuring mode (render all, measure, hide) was considered and
+  left out: it shifts layout after first paint and cannot agree with
+  server-rendered HTML.
+
+  Every layout is rendered; all but the active one are `display: none`, so
+  assistive technology meets exactly one copy of each control at any width.
+-->
+<script lang="ts">import { fitsLayoutClass } from "./space.js";
+let { layouts, breakpoints, class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['@container', className]}>
+  {#each layouts as layout, index (index)}
+    <div class={fitsLayoutClass(index, layouts.length, breakpoints)}>{@render layout()}</div>
+  {/each}
+</div>

package/dist/layout/Fits.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FitsBreakpoint } from './space.ts';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Layouts in order of preference, widest first. */
+    layouts: readonly Snippet<[]>[];
+    /** Container width below which each layout stops fitting; one fewer than `layouts`, descending. */
+    breakpoints: readonly FitsBreakpoint[];
+}
+/** Shows the first of several layouts that fits its container, switching at declared container widths (CSS container queries, no JavaScript). */
+declare const Fits: import("svelte").Component<Props, {}, "">;
+type Fits = ReturnType<typeof Fits>;
+export default Fits;

package/dist/layout/Flow.svelte

@@ -0,0 +1,46 @@
+<!-- @component
+The flex flow `VStack` and `HStack` share; internal, not exported.
+-->
+<!--
+  Flow — one template for both stacks, so their tokens, list semantics and
+  dividers cannot drift. No `reverse` option, deliberately: a visual order
+  that contradicts the DOM order breaks WCAG 1.3.2 (meaningful sequence).
+
+  `as="ul"` / `"ol"` adds `role="list"`: Safari drops list semantics from a
+  list styled `list-style: none`. Its children must be `<li>`s. `divider`
+  draws a rule between children (Tailwind's `divide-*`, on the borders
+  between siblings, never around them); it is decorative, like a
+  `Divider` with `decorative`, and adds nothing to the accessibility tree.
+-->
+<script lang="ts">import { alignClass, gapClass, justifyClass } from "./space.js";
+let { direction, gap = "md", align, justify, divider = false, as = "div", children, class: className, ...rest } = $props();
+const directionClass = {
+	vertical: "flex-col",
+	horizontal: "flex-row",
+	responsive: "flex-col sm:flex-row"
+};
+const dividerClass = {
+	vertical: "divide-base-300 divide-y",
+	horizontal: "divide-base-300 divide-x",
+	responsive: "divide-base-300 divide-y sm:divide-x sm:divide-y-0"
+};
+const list = $derived(as === "ul" || as === "ol");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  role={list ? 'list' : rest.role}
+  class={[
+    'flex',
+    directionClass[direction],
+    gapClass[gap],
+    align !== undefined && alignClass[align],
+    justify !== undefined && justifyClass[justify],
+    divider && dividerClass[direction],
+    list && 'list-none',
+    className,
+  ]}
+>
+  {@render children()}
+</svelte:element>

package/dist/layout/Flow.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlowAlign, type FlowElement, type FlowJustify, type Gap } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    direction: 'vertical' | 'horizontal' | 'responsive';
+    gap?: Gap | undefined;
+    align?: FlowAlign | undefined;
+    justify?: FlowJustify | undefined;
+    divider?: boolean | undefined;
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** The flex flow `VStack` and `HStack` share; internal, not exported. */
+declare const Flow: import("svelte").Component<Props, {}, "">;
+type Flow = ReturnType<typeof Flow>;
+export default Flow;

package/dist/layout/Footer.svelte

@@ -0,0 +1,32 @@
+<!-- @component
+The site footer: a `contentinfo` landmark with columns of links and an optional aside for the brand and attribution notices.
+-->
+<!--
+  Footer — the site footer: a `contentinfo` landmark holding the columns of
+  links an app puts at the bottom of every page, and an optional `aside` for
+  the brand block and the attribution notices (a data licence, a copyright
+  line) that belong beside them rather than in them.
+
+  ARIA contract: `<footer>` at the top of the document is the `contentinfo`
+  landmark — the one a screen-reader user jumps to for "the small print".
+  There is one per page, so a footer INSIDE an `<article>` or a `<section>` is
+  not this component. `aside` renders first, which is where the attribution
+  block reads: the columns are navigation, and navigation should not be
+  preceded by nothing.
+
+  Structure only. The columns are the app's — typically `<nav>` blocks with a
+  `footer-title` heading each, which is what makes daisyUI's grid line up.
+-->
+<script lang="ts">let { children, aside, class: className, ...rest } = $props();
+export {};
+</script>
+
+<footer
+  {...rest}
+  class={['footer sm:footer-horizontal bg-base-200 text-base-content mt-auto p-10', className]}
+>
+  {#if aside}
+    <aside>{@render aside()}</aside>
+  {/if}
+  {@render children()}
+</footer>

package/dist/layout/Footer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The columns — `<nav>` blocks with `footer-title` headings. */
+    children: Snippet<[]>;
+    /** Brand and attribution block, rendered before the columns. */
+    aside?: Snippet<[]> | undefined;
+}
+/** The site footer: a `contentinfo` landmark with columns of links and an optional aside for the brand and attribution notices. */
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/layout/Grid.svelte

@@ -0,0 +1,23 @@
+<!-- @component
+A responsive grid sized by the narrowest an item may get, not by breakpoints.
+-->
+<!--
+  Grid — `repeat(auto-fill, minmax(<minItem>, 1fr))` (SwiftUI
+  `LazyVGrid(.adaptive(minimum:))`, Chakra `minChildWidth`): as many columns
+  as fit items at least `minItem` wide, so a card grid reflows by the space
+  it actually has, inside a sidebar or out. With `as="ul"` / `"ol"` it is a
+  list (`role="list"` restored; children `<li>`).
+-->
+<script lang="ts">import { gapClass, minItemClass } from "./space.js";
+let { minItem = "md", gap = "md", as = "div", children, class: className, ...rest } = $props();
+const list = $derived(as === "ul" || as === "ol");
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  role={list ? 'list' : rest.role}
+  class={['grid', minItemClass[minItem], gapClass[gap], list && 'list-none', className]}
+>
+  {@render children()}
+</svelte:element>

package/dist/layout/Grid.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FlowElement, type Gap, type MinItem } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * The narrowest an item gets before the grid drops a column: `xs` 10rem,
+     * `sm` 12rem, `md` 16rem, `lg` 20rem.
+     * @defaultValue `'md'`
+     */
+    minItem?: MinItem | undefined;
+    /**
+     * Space between items.
+     * @defaultValue `'md'`
+     */
+    gap?: Gap | undefined;
+    /**
+     * The element. With `'ul'` / `'ol'`, children must be `<li>`s.
+     * @defaultValue `'div'`
+     */
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** A responsive grid sized by the narrowest an item may get, not by breakpoints. */
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/layout/HStack.svelte

@@ -0,0 +1,12 @@
+<!-- @component
+A horizontal stack: children side by side, on the spacing scale; optionally a column below `sm`.
+-->
+<!--
+  HStack — children in a row with a token gap (SwiftUI `HStack`, Compose `Row`). With `responsive`, a column on a narrow screen and a row from `sm` up. Tokens for gap and alignment come from `space.ts`, the
+  library's spacing scale. See `Flow` for the list and divider rules.
+-->
+<script lang="ts">import Flow from "./Flow.svelte";
+let { responsive = false, ...props } = $props();
+</script>
+
+<Flow direction={responsive ? 'responsive' : 'horizontal'} {...props} />

package/dist/layout/HStack.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FlowAlign, FlowElement, FlowJustify, Gap } from './space.ts';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /**
+     * Stack vertically below the `sm` breakpoint.
+     * @defaultValue `false`
+     */
+    responsive?: boolean | undefined;
+    /**
+     * Space between children.
+     * @defaultValue `'md'`
+     */
+    gap?: Gap | undefined;
+    /** Cross-axis alignment. */
+    align?: FlowAlign | undefined;
+    /** Main-axis distribution. */
+    justify?: FlowJustify | undefined;
+    /**
+     * A decorative rule between children (never around them).
+     * @defaultValue `false`
+     */
+    divider?: boolean | undefined;
+    /**
+     * The element. With `'ul'` / `'ol'`, children must be `<li>`s.
+     * @defaultValue `'div'`
+     */
+    as?: FlowElement | undefined;
+    children: Snippet<[]>;
+}
+/** A horizontal stack: children side by side, on the spacing scale; optionally a column below `sm`. */
+declare const HStack: import("svelte").Component<Props, {}, "">;
+type HStack = ReturnType<typeof HStack>;
+export default HStack;

package/dist/layout/Hero.svelte

@@ -0,0 +1,76 @@
+<!-- @component
+The large introductory block at the top of a landing or "about" page: a headline, supporting copy, calls to action, and an optional figure or background image, in daisyUI's `hero` styles.
+-->
+<!--
+  Hero — daisyUI's `hero` as a component: the top of a landing, marketing or
+  "about" page, where `PageHeader` is the top of an app page. It takes
+  arbitrary `children` rather than facts, which is why it is not a
+  `PageHeader` variant.
+
+  ARIA contract: the root is a `<section>` `aria-labelledby` its heading, so
+  it is a named region in the landmark list. The headline is a real heading
+  at `headingLevel`, `1` by default because a hero is normally the page's
+  title — a page with a `Hero` should not also render a `PageHeader` `<h1>`.
+  `actions` is a `role="group"` named by `actionsLabel`.
+
+  `backgroundImage` is decorative by definition, so it is a CSS
+  `background-image`, not an `<img>`: nothing enters the accessibility tree.
+  The copy over it sits on `hero-overlay` in `text-neutral-content`, so the
+  text keeps its contrast whatever the photo (WCAG 1.4.3). An image that
+  carries meaning belongs in `figure`, with alt text.
+-->
+<script lang="ts">let { title, headingLevel = 1, description, actions, actionsLabel = "Actions", figure, align, backgroundImage, children, class: className, style, ...rest } = $props();
+const uid = $props.id();
+const headingId = `${uid}-heading`;
+const centred = $derived((align ?? (figure === undefined ? "center" : "start")) === "center");
+const overlaid = $derived(backgroundImage !== undefined);
+// `JSON.stringify` quotes the URL, so a value with parentheses or spaces
+// cannot break out of `url(...)`.
+const background = $derived(backgroundImage === undefined ? undefined : `background-image: url(${JSON.stringify(backgroundImage)});`);
+export {};
+</script>
+
+{#snippet text(value: string | Snippet<[]>)}
+  {#if typeof value === 'string'}{value}{:else}{@render value()}{/if}
+{/snippet}
+
+<section
+  {...rest}
+  aria-labelledby={headingId}
+  style={[background, style].filter(Boolean).join(' ') || undefined}
+  class={['hero min-h-[50vh]', overlaid ? 'bg-cover bg-center' : 'bg-base-200', className]}
+>
+  {#if overlaid}
+    <div class="hero-overlay bg-neutral/60"></div>
+  {/if}
+  <div
+    class={[
+      'hero-content gap-8',
+      figure !== undefined && 'flex-col lg:flex-row',
+      centred && 'text-center',
+      overlaid && 'text-neutral-content',
+    ]}
+  >
+    <div class={['max-w-2xl space-y-5', centred && 'mx-auto']}>
+      <svelte:element
+        this={`h${headingLevel}`}
+        id={headingId}
+        class="text-4xl font-bold tracking-tight text-balance sm:text-5xl"
+      >
+        {@render text(title)}
+      </svelte:element>
+      {#if description !== undefined}
+        <p class={['text-lg leading-8', !overlaid && 'text-base-content/80']}>{@render text(description)}</p>
+      {/if}
+      {#if actions}
+        <div role="group" aria-label={actionsLabel} class={['flex flex-wrap gap-3', centred && 'justify-center']}>
+          {@render actions()}
+        </div>
+      {/if}
+      {#if children}<div>{@render children()}</div>{/if}
+    </div>
+    {#if figure}
+      <div class="w-full max-w-md shrink-0">{@render figure()}</div>
+    {/if}
+  </div>
+</section>

package/dist/layout/Hero.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../ui/tones.ts';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /** The headline: text, or a snippet for richer markup. */
+    title: string | Snippet<[]>;
+    /**
+     * The headline's level.
+     * @defaultValue `1`
+     */
+    headingLevel?: HeadingLevel | undefined;
+    /** Supporting copy under the headline. */
+    description?: string | Snippet<[]> | undefined;
+    /** The call-to-action row (`LinkButton`s), a group named by `actionsLabel`. */
+    actions?: Snippet<[]> | undefined;
+    /**
+     * Accessible name of the `actions` group.
+     * @defaultValue `'Actions'`
+     */
+    actionsLabel?: string | undefined;
+    /** A figure beside the copy; stacks under it on a phone. */
+    figure?: Snippet<[]> | undefined;
+    /**
+     * Where the copy aligns.
+     * @defaultValue `'start'` with a `figure`, `'center'` without
+     */
+    align?: 'start' | 'center' | undefined;
+    /** A decorative background image URL; the copy then sits on `hero-overlay` for contrast. */
+    backgroundImage?: string | undefined;
+    /** Extra content under the actions. */
+    children?: Snippet<[]> | undefined;
+}
+/** The large introductory block at the top of a landing or "about" page: a headline, supporting copy, calls to action, and an optional figure or background image, in daisyUI's `hero` styles. */
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/layout/Main.svelte

@@ -0,0 +1,30 @@
+<!-- @component
+The page’s content column and the `<main>` landmark.
+-->
+<!--
+  Main — the page's content column, and the `<main>` landmark that names it.
+
+  Every app in the survey had a component called `Main` and none of them
+  rendered a `<main>`: each one was a `<section>`, because each was mounted
+  inside a shell that had already opened the real `<main>`. That is a correct
+  thing to want and a bad thing to leave implicit, so the element is a prop.
+  `as="main"` is the default because a page that needs a landmark and does not
+  get one is the failure that matters; `as="section"` is for the nested case.
+
+  ARIA contract: exactly one `<main>` per rendered page — the landmark a
+  screen-reader user jumps to with a single keystroke, and the target of a
+  skip link. There must never be two, which is what `as="section"` exists to
+  prevent. A `<section>` is a `region` landmark only when it has an accessible
+  name, so pass `aria-label`/`aria-labelledby` (spread through `rest`) when
+  the nested block is one worth jumping to, and nothing when it is not.
+-->
+<script lang="ts">let { as = "main", children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<!-- `min-w-0` is the one class worth imposing: a content column is nearly
+     always a flex or grid child, and without it a wide table or a long
+     unbroken URL inside pushes the whole layout sideways. -->
+<svelte:element this={as} {...rest} class={['min-w-0', className]}>
+  {@render children()}
+</svelte:element>