@ptbdynamic/plinth 0.1.1 → 0.2.0

package/packages/css/dist/plinth.css

@@ -87,6 +87,8 @@
     --plinth-ref-size-44: 2.75rem;
     --plinth-ref-size-56: 3.5rem;
     --plinth-ref-size-160: 10rem;
+    --plinth-ref-size-192: 12rem;
+    --plinth-ref-size-320: 20rem;
     --plinth-ref-size-400: 25rem;
     --plinth-ref-size-480: 30rem;
     --plinth-ref-radius-0: 0;
@@ -199,6 +201,8 @@
     --plinth-size-dialog: var(--plinth-ref-size-480);
     --plinth-size-panel: var(--plinth-ref-size-400);
     --plinth-size-peek: var(--plinth-ref-size-160);
+    --plinth-size-menu-min: var(--plinth-ref-size-192);
+    --plinth-size-menu-max: var(--plinth-ref-size-320);
     --plinth-layer-base: 0;
     --plinth-layer-sticky: 100;
     --plinth-layer-overlay: 200;
@@ -206,7 +210,8 @@
     --plinth-layer-toast: 400;
     --plinth-breakpoint-md: 768px;
     --plinth-breakpoint-lg: 1280px;
-    --plinth-header-height: var(--plinth-space-14);
+    --plinth-page-header-height: var(--plinth-space-14);
+    --plinth-page-header-offset: var(--plinth-space-0);
     --plinth-data-table-row-height: var(--plinth-size-row);
     --plinth-list-row-height: var(--plinth-size-row);
     --plinth-pill-height: var(--plinth-control-md);
@@ -215,6 +220,9 @@
     --plinth-drawer-peek-height: var(--plinth-size-peek);
     --plinth-section-menu-height: var(--plinth-space-14);
     --plinth-section-menu-item-height: var(--plinth-control-lg);
+    --plinth-menu-min-width: var(--plinth-size-menu-min);
+    --plinth-menu-max-width: var(--plinth-size-menu-max);
+    --plinth-text-field-trailing-size: var(--plinth-control-md);
   }
 
   :root,
@@ -2241,118 +2249,6 @@
   }
 }
 
-/* header.css */
-/*
- * Header: the top bar of the phone shell, with a leading action, the page's title and trailing
- * actions. It sticks to the top of the page as the content scrolls under it.
- *
- * <header class="plinth-header">
- *   <div class="plinth-header-leading">
- *     <a class="plinth-button plinth-icon-button" href="/inbox" data-variant="ghost"
- *       data-size="md" aria-label="Back">
- *       <span class="plinth-icon" data-size="md" data-mirror aria-hidden="true"><svg>…</svg></span>
- *     </a>
- *   </div>
- *   <h1 class="plinth-header-title">Inbox</h1>
- *   <div class="plinth-header-actions">
- *     <button type="button" class="plinth-button plinth-icon-button" data-variant="ghost"
- *       data-size="md" aria-label="Search">…</button>
- *   </div>
- * </header>
- *
- * The root is a <header>: at the top of the page (not inside <main>, <article> or <section>) it is
- * the page's banner landmark, so a page has one. The title is an <h1>, the page's heading, and is
- * required. It stays on one line and ends in an ellipsis when it doesn't fit.
- *
- * The leading part holds one action, usually an icon button: back (a link, with data-mirror on
- * its icon so it points the other way in right-to-left text) or a menu button that opens a sheet
- * (commandfor and command="show-modal"). The actions part holds the trailing actions, at most two
- * or three icon buttons; put the rest in a menu. Both are optional, and printed only when they
- * have content. Every icon button needs its own name (label). The header needs button.css and
- * icon.css for them.
- *
- * Its height is the header.height component token (56px), plus env(safe-area-inset-top), which
- * pads it below the status bar and the notch on a phone that draws under them (viewport-fit=cover);
- * the inline padding clears the notch on a phone held sideways. It is sticky on the
- * layer.sticky z-index, so it sits above the page and below sheets and menus (the top layer).
- * Content scrolls under it, so the app sets scroll-padding-block-start on its scrolling element
- * (calc(var(--plinth-header-height) + env(safe-area-inset-top))) to keep a focused element or an
- * anchor's target from landing under the header.
- *
- * The actions sit var(--plinth-space-2) apart, so on a touch screen the 40px hit areas of 32px
- * icon buttons don't overlap.
- *
- * The app owns the state: the header has no variants or states of its own. What the actions do is
- * the app's (a link, a commandfor, wire:click, @click on the icon button).
- */
-
-@layer plinth {
-  .plinth-header {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: var(--plinth-layer-sticky);
-    box-sizing: border-box;
-    display: flex;
-    gap: var(--plinth-space-2);
-    align-items: center;
-    min-block-size: calc(var(--plinth-header-height) + env(safe-area-inset-top));
-    padding-block-start: env(safe-area-inset-top);
-    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
-      max(var(--plinth-space-2), env(safe-area-inset-right));
-    font-family: var(--plinth-font-family-body);
-    color: var(--plinth-color-text);
-    background-color: var(--plinth-color-surface);
-    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
-  }
-
-  .plinth-header:dir(rtl) {
-    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
-      max(var(--plinth-space-2), env(safe-area-inset-left));
-  }
-
-  .plinth-header-leading,
-  .plinth-header-actions {
-    display: flex;
-    flex: none;
-    gap: var(--plinth-space-2);
-    align-items: center;
-  }
-
-  .plinth-header-title {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--plinth-font-size-lg);
-    font-weight: var(--plinth-font-weight-semibold);
-    line-height: var(--plinth-font-leading-tight);
-    letter-spacing: var(--plinth-font-tracking-tight);
-    white-space: nowrap;
-  }
-
-  /* Without a leading action or trailing actions, the title keeps the text's distance from the edge. */
-  .plinth-header-title:first-child {
-    margin-inline-start: var(--plinth-space-2);
-  }
-
-  .plinth-header-title:last-child {
-    margin-inline-end: var(--plinth-space-2);
-  }
-
-  @media (min-width: 768px) {
-    .plinth-header {
-      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
-        max(var(--plinth-space-4), env(safe-area-inset-right));
-    }
-
-    .plinth-header:dir(rtl) {
-      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
-        max(var(--plinth-space-4), env(safe-area-inset-left));
-    }
-  }
-}
-
 /* icon.css */
 /*
  * Icon: a project's own SVG, sized by Plinth.
@@ -2736,6 +2632,253 @@
   }
 }
 
+/* menu.css */
+/*
+ * Menu: a short list of actions that opens from a button, in a popover anchored to it.
+ *
+ * <button type="button" class="plinth-button plinth-icon-button" popovertarget="ticket-actions"
+ *   aria-label="More actions">…</button>
+ * <div class="plinth-menu" id="ticket-actions" popover="auto">
+ *   <button type="button" class="plinth-menu-item" commandfor="ticket-actions"
+ *     command="hide-popover">
+ *     <span class="plinth-menu-icon" aria-hidden="true"><svg>…</svg></span>
+ *     <span class="plinth-menu-label">Assign to me</span>
+ *     <kbd class="plinth-menu-shortcut" aria-hidden="true">A</kbd>
+ *   </button>
+ *   <a class="plinth-menu-item" href="/tickets/42/print">
+ *     <span class="plinth-menu-label">Print</span>
+ *   </a>
+ *   <hr class="plinth-menu-separator">
+ *   <div class="plinth-menu-group" role="group" aria-label="Move to">
+ *     <div class="plinth-menu-heading" aria-hidden="true">Move to</div>
+ *     <button type="button" class="plinth-menu-item" commandfor="ticket-actions"
+ *       command="hide-popover"><span class="plinth-menu-label">Archive</span></button>
+ *   </div>
+ *   <hr class="plinth-menu-separator">
+ *   <button type="button" class="plinth-menu-item" commandfor="ticket-actions"
+ *     command="hide-popover" data-tone="danger">
+ *     <span class="plinth-menu-label">Delete</span>
+ *   </button>
+ * </div>
+ *
+ * The root is a <div popover="auto"> with an id (required in Blade, Vue and React), which the
+ * app's button names in popovertarget (or commandfor with command="toggle-popover"). The browser
+ * opens and closes it (ADR 2): the top layer, a click outside or Escape closes it, focus goes back
+ * to the button, and the browser tells assistive technology whether the button's menu is
+ * expanded. The button is the app's own (an icon button or a button); it is not part of the menu.
+ *
+ * It is not role="menu". The ARIA menu pattern needs arrow keys and a roving focus, which would be
+ * script in every layer; this is a list of buttons and links, reached with Tab, as ADR 2 decides
+ * for menus of actions. So the button has no aria-haspopup, and the items are plain buttons and
+ * links that read as such.
+ *
+ * Parts, each its own component in Blade, Vue and React:
+ * - item: a <button type="button">, or an <a href> when it navigates. A button item closes its
+ *   menu when pressed: commandfor="<the menu's id>" command="hide-popover", which the layers take
+ *   from the menu around the item. A link closes the menu by leaving the page; an app that routes
+ *   without loading a page closes it with hidePopover(). The icon is the project's SVG, decorative;
+ *   the label is the item's name. The shortcut is a hint for the eye, aria-hidden; the app that
+ *   has the shortcut adds aria-keyshortcuts to the item.
+ * - separator: an <hr> between items.
+ * - group: a <div role="group"> named by its heading (aria-label), with the heading shown above
+ *   its items and hidden from assistive technology, which reads the group's name instead.
+ *
+ * Variants and states:
+ * - data-tone="danger" on an item that deletes or removes something: the danger text colour and a
+ *   danger tint on hover. The label still says what it does; the colour is not the only signal.
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; pressed takes the sunken surface; the focus ring on
+ *   :focus-visible, drawn inside the item (focus-ring.offset-inset).
+ * - open is the native one (:popover-open), never a class.
+ *
+ * Placement: below the button, starting at its start edge, through CSS anchor positioning (the
+ * popover's button is its implicit anchor). It takes the side of the button with more room, above
+ * or below, and is never taller than that room: a long menu scrolls. When it would leave the
+ * screen sideways it flips to the button's end edge. It is the same at every width; a phone gets no bottom sheet,
+ * since a menu is a few actions next to the button that opened them (a long list belongs in a
+ * sheet). A browser without anchor positioning shows the menu in the middle of the screen, where
+ * it still works. Script opens it with showPopover({ source: button }), so it has its anchor;
+ * without a source it has none, and sits in the screen's start corner.
+ *
+ * Size: --plinth-menu-min-width (192px) to --plinth-menu-max-width (320px), never wider than the
+ * screen less a margin, and never taller than the room it has. Items are --plinth-touch-target
+ * (40px) tall; with a mouse from 768px up, --plinth-control-md (32px). A long label wraps.
+ * It fades in and out on the motion tokens, which drop to 0ms under prefers-reduced-motion.
+ */
+
+@layer plinth {
+  .plinth-menu {
+    /* The browser's popover rules centre it on the screen: the fallback without anchoring. */
+    box-sizing: border-box;
+    min-inline-size: min(var(--plinth-menu-min-width), 100vi - 2 * var(--plinth-space-2));
+    max-inline-size: min(var(--plinth-menu-max-width), 100vi - 2 * var(--plinth-space-2));
+    max-block-size: calc(100dvb - 2 * var(--plinth-space-2));
+    padding: var(--plinth-space-1);
+    overflow: hidden auto;
+    overscroll-behavior: contain;
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-raised);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+    box-shadow: var(--plinth-elevation-2);
+    opacity: 0;
+    transition:
+      opacity var(--plinth-duration-fast) var(--plinth-easing-exit),
+      overlay var(--plinth-duration-fast) allow-discrete,
+      display var(--plinth-duration-fast) allow-discrete;
+  }
+
+  .plinth-menu:popover-open {
+    opacity: 1;
+    transition-timing-function: var(--plinth-easing-enter);
+  }
+
+  @starting-style {
+    .plinth-menu:popover-open {
+      opacity: 0;
+    }
+  }
+
+  @supports (position-area: block-end) {
+    .plinth-menu {
+      inset: auto;
+      max-block-size: calc(100% - 2 * var(--plinth-space-1));
+      margin-block: var(--plinth-space-1);
+      margin-inline: 0;
+      position-area: block-end span-inline-end;
+      position-try-order: most-block-size;
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+    }
+  }
+
+  .plinth-menu-item {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    inline-size: 100%;
+    min-block-size: var(--plinth-touch-target);
+    padding-block: var(--plinth-space-1);
+    padding-inline: var(--plinth-space-2);
+    margin: 0;
+    font: inherit;
+    color: var(--plinth-color-text);
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--plinth-radius-control);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  .plinth-menu-item[data-tone='danger'] {
+    color: var(--plinth-color-danger-text);
+  }
+
+  @media (hover: hover) {
+    a.plinth-menu-item[href]:hover,
+    button.plinth-menu-item:enabled:hover {
+      background-color: var(--plinth-color-surface-hover);
+    }
+
+    a.plinth-menu-item[href][data-tone='danger']:hover,
+    button.plinth-menu-item:enabled[data-tone='danger']:hover {
+      background-color: var(--plinth-color-danger-surface);
+    }
+  }
+
+  a.plinth-menu-item[href]:active,
+  button.plinth-menu-item:enabled:active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  .plinth-menu-item:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-inset);
+  }
+
+  .plinth-menu-item:disabled,
+  .plinth-menu-item[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-menu-icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--plinth-size-icon-sm);
+    block-size: var(--plinth-size-icon-sm);
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-menu-item[data-tone='danger'] .plinth-menu-icon {
+    color: inherit;
+  }
+
+  .plinth-menu-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .plinth-menu-label {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-menu-shortcut {
+    flex: none;
+    padding-inline-start: var(--plinth-space-4);
+    margin-inline-start: auto;
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    color: var(--plinth-color-text-subtle);
+  }
+
+  .plinth-menu-separator {
+    block-size: 0;
+    margin-block: var(--plinth-space-1);
+    margin-inline: calc(-1 * var(--plinth-space-1));
+    border: 0;
+    border-block-start: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-menu-group {
+    margin: 0;
+  }
+
+  .plinth-menu-heading {
+    padding-block: var(--plinth-space-2) var(--plinth-space-1);
+    padding-inline: var(--plinth-space-2);
+    font-size: var(--plinth-font-size-xs);
+    font-weight: var(--plinth-font-weight-medium);
+    color: var(--plinth-color-text-subtle);
+  }
+
+  @media (min-width: 768px) and (pointer: fine) {
+    .plinth-menu-item {
+      min-block-size: var(--plinth-control-md);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-menu-item:disabled,
+    .plinth-menu-item[aria-disabled='true'] {
+      color: GrayText;
+    }
+  }
+}
+
 /* modal.css */
 /*
  * Modal base: what the dialog (dialog.css), the sheet (sheet.css) and the drawer (drawer.css)
@@ -3105,62 +3248,188 @@
   }
 }
 
-/* pill-row.css */
+/* page-header.css */
 /*
- * Pill row: a row of pills for filters, segments or sub-pages.
+ * Page header: the bar at the top of a page, with a leading action, the page's heading and
+ * trailing actions. On a phone it is the screen's top bar; in an app shell it heads the page beside
+ * the sidebar, under the app bar. It sticks to the top as the content scrolls under it.
  *
- * <div class="plinth-pill-row" role="group" aria-label="Status">
- *   <button type="button" class="plinth-pill" aria-pressed="true">
- *     <span class="plinth-pill-label">Open</span>
- *     <span class="plinth-pill-count">12</span>
- *   </button>
- *   <button type="button" class="plinth-pill" aria-pressed="false">
- *     <span class="plinth-pill-label">Closed</span>
- *   </button>
- * </div>
+ * <header class="plinth-page-header" data-top>
+ *   <div class="plinth-page-header-leading">
+ *     <a class="plinth-button plinth-icon-button" href="/inbox" data-variant="ghost"
+ *       data-size="md" aria-label="Back">
+ *       <span class="plinth-icon" data-size="md" data-mirror aria-hidden="true"><svg>…</svg></span>
+ *     </a>
+ *   </div>
+ *   <h1 class="plinth-page-header-heading">Inbox</h1>
+ *   <div class="plinth-page-header-actions">
+ *     <button type="button" class="plinth-button plinth-icon-button" data-variant="ghost"
+ *       data-size="md" aria-label="Search">…</button>
+ *   </div>
+ * </header>
  *
- * The root is a <div role="group">, named by aria-label (label in Blade and Vue) or by the app's
- * own aria-labelledby. A row of links that navigates is <nav class="plinth-pill-row"> instead,
- * with no role (nav in Blade and Vue), and its pills are links:
+ * The root is a <header>. At the top of the page (not inside <main>, <article>, <section>, <aside>
+ * or <nav>) it is the page's banner landmark, so a page has one there; inside <main>, as in an app
+ * shell, it is no landmark, only the page's header. The heading is required: an <h1> by default, or
+ * <h2> to <h6> (level) when the page sits beside another page's <h1>, such as an open ticket beside
+ * the list on a wide screen. The level doesn't change the look. The heading stays on one line and
+ * ends in an ellipsis when it doesn't fit.
  *
- * <a class="plinth-pill" href="…" aria-current="page"><span class="plinth-pill-label">…</span></a>
+ * The leading part holds one action, usually an icon button: a menu button that opens a sheet
+ * (commandfor and command="show-modal") on a top-level page, or a back link (with data-mirror on
+ * its icon so it points the other way in right-to-left text) on a page under it. The actions part
+ * holds the trailing actions: at most three icon buttons (put the rest in a menu), or a primary
+ * button such as New ticket. Both are optional, and printed only when they have content. Every
+ * icon button needs its own name (label). The page header needs button.css and icon.css for them.
  *
- * Each pill is its own component (<x-plinth::pill>, PlinthPill), so the app's attributes and
- * listeners land on the pill (ADR 2). The count is optional. plinth-pill-label has no rule of its
- * own: it is a hook for a project's styles.
+ * Variant (the app sets it, the page header doesn't guess):
+ * - data-top: the page header is the screen's top bar, at the very top of a phone's screen. It
+ *   adds env(safe-area-inset-top) above its height, which pads it below the status bar and the
+ *   notch on a phone that draws under them (viewport-fit=cover). Leave it off under an app bar.
  *
- * States, set by the app:
- * - selected: a button pill always prints aria-pressed, "true" or "false"; a link pill prints
- *   aria-current="page" for the page being shown. Selected takes the selection tint
- *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), where the others
- *   have a 1px neutral one, so colour is not its only cue. A pressed button still answers hover
- *   and press with a step on the tint (accent-subtle-hover, accent-subtle-active).
- * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
- * - hover only where the device can hover; the focus ring on :focus-visible.
+ * Its height is the page-header.height component token (56px). The inline padding clears the
+ * notch on a phone held sideways. It is sticky on the layer.sticky z-index, so it sits above the
+ * page and below sheets and menus (the top layer), and it sticks --plinth-page-header-offset from
+ * the top: 0 by default, or the app bar's height in a shell that has one. Content scrolls under
+ * it, so the app sets scroll-padding-block-start on its scrolling element (the offset plus the
+ * height, plus env(safe-area-inset-top) with data-top) to keep a focused element or an anchor's
+ * target from landing under the page header.
  *
- * Layout: on a phone the row scrolls sideways, with no visible scrollbar, and snaps to the pills;
- * from 768px it wraps. The row's padding keeps the focus ring and the 40px touch target of the
- * pills inside the scrolling area, whatever --plinth-pill-height is (32px by default). A pill is
- * at least 40px wide.
+ * The actions sit var(--plinth-space-2) apart, so on a touch screen the 40px hit areas of 32px
+ * icon buttons don't overlap.
+ *
+ * The app owns the state: the page header has no states of its own. What the actions do is the
+ * app's (a link, a commandfor, wire:click, @click on the icon button).
  */
 
 @layer plinth {
-  .plinth-pill-row {
+  .plinth-page-header {
+    position: sticky;
+    inset-block-start: var(--plinth-page-header-offset);
+    z-index: var(--plinth-layer-sticky);
     box-sizing: border-box;
     display: flex;
     gap: var(--plinth-space-2);
     align-items: center;
-    max-inline-size: 100%;
-    padding-block: max(
-      var(--plinth-space-1),
-      (var(--plinth-touch-target) - var(--plinth-pill-height)) / 2
-    );
-    padding-inline: var(--plinth-space-1);
-    margin: 0;
-    overflow-x: auto;
-    overscroll-behavior-inline: contain;
-    scroll-snap-type: inline proximity;
-    scroll-padding-inline: var(--plinth-space-1);
+    min-block-size: var(--plinth-page-header-height);
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-left))
+      max(var(--plinth-space-2), env(safe-area-inset-right));
+    font-family: var(--plinth-font-family-body);
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  .plinth-page-header:dir(rtl) {
+    padding-inline: max(var(--plinth-space-2), env(safe-area-inset-right))
+      max(var(--plinth-space-2), env(safe-area-inset-left));
+  }
+
+  /* The screen's top bar clears the status bar and the notch. */
+  .plinth-page-header[data-top] {
+    min-block-size: calc(var(--plinth-page-header-height) + env(safe-area-inset-top));
+    padding-block-start: env(safe-area-inset-top);
+  }
+
+  .plinth-page-header-leading,
+  .plinth-page-header-actions {
+    display: flex;
+    flex: none;
+    gap: var(--plinth-space-2);
+    align-items: center;
+  }
+
+  .plinth-page-header-heading {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--plinth-font-size-lg);
+    font-weight: var(--plinth-font-weight-semibold);
+    line-height: var(--plinth-font-leading-tight);
+    letter-spacing: var(--plinth-font-tracking-tight);
+    white-space: nowrap;
+  }
+
+  /* Without a leading action or trailing actions, the heading keeps the text's distance from the edge. */
+  .plinth-page-header-heading:first-child {
+    margin-inline-start: var(--plinth-space-2);
+  }
+
+  .plinth-page-header-heading:last-child {
+    margin-inline-end: var(--plinth-space-2);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-page-header {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-left))
+        max(var(--plinth-space-4), env(safe-area-inset-right));
+    }
+
+    .plinth-page-header:dir(rtl) {
+      padding-inline: max(var(--plinth-space-4), env(safe-area-inset-right))
+        max(var(--plinth-space-4), env(safe-area-inset-left));
+    }
+  }
+}
+
+/* pill-row.css */
+/*
+ * Pill row: a row of pills for filters, segments or sub-pages.
+ *
+ * <div class="plinth-pill-row" role="group" aria-label="Status">
+ *   <button type="button" class="plinth-pill" aria-pressed="true">
+ *     <span class="plinth-pill-label">Open</span>
+ *     <span class="plinth-pill-count">12</span>
+ *   </button>
+ *   <button type="button" class="plinth-pill" aria-pressed="false">
+ *     <span class="plinth-pill-label">Closed</span>
+ *   </button>
+ * </div>
+ *
+ * The root is a <div role="group">, named by aria-label (label in Blade and Vue) or by the app's
+ * own aria-labelledby. A row of links that navigates is <nav class="plinth-pill-row"> instead,
+ * with no role (nav in Blade and Vue), and its pills are links:
+ *
+ * <a class="plinth-pill" href="…" aria-current="page"><span class="plinth-pill-label">…</span></a>
+ *
+ * Each pill is its own component (<x-plinth::pill>, PlinthPill), so the app's attributes and
+ * listeners land on the pill (ADR 2). The count is optional. plinth-pill-label has no rule of its
+ * own: it is a hook for a project's styles.
+ *
+ * States, set by the app:
+ * - selected: a button pill always prints aria-pressed, "true" or "false"; a link pill prints
+ *   aria-current="page" for the page being shown. Selected takes the selection tint
+ *   (accent-subtle, accent-text) inside a 2px accent edge (border-width.thick), where the others
+ *   have a 1px neutral one, so colour is not its only cue. A pressed button still answers hover
+ *   and press with a step on the tint (accent-subtle-hover, accent-subtle-active).
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Layout: on a phone the row scrolls sideways, with no visible scrollbar, and snaps to the pills;
+ * from 768px it wraps. The row's padding keeps the focus ring and the 40px touch target of the
+ * pills inside the scrolling area, whatever --plinth-pill-height is (32px by default). A pill is
+ * at least 40px wide.
+ */
+
+@layer plinth {
+  .plinth-pill-row {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    max-inline-size: 100%;
+    padding-block: max(
+      var(--plinth-space-1),
+      (var(--plinth-touch-target) - var(--plinth-pill-height)) / 2
+    );
+    padding-inline: var(--plinth-space-1);
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline proximity;
+    scroll-padding-inline: var(--plinth-space-1);
     scrollbar-width: none;
   }
 
@@ -3306,7 +3575,7 @@
 
 /* section-menu.css */
 /*
- * Section menu: the row under the header that switches between the sections of a page.
+ * Section menu: the row under the page header that switches between the sections of a page.
  *
  * <nav class="plinth-section-menu" aria-label="Project">
  *   <a class="plinth-section-menu-item" href="/overview" aria-current="page">
@@ -3340,15 +3609,16 @@
  * - hover only where the device can hover; the focus ring on :focus-visible.
  *
  * Layout: a row --plinth-section-menu-height (56px) tall, on the surface with a divider below,
- * the same inline padding as the header and clear of the notch on a phone held sideways. Its
+ * the same inline padding as the page header and clear of the notch on a phone held sideways. Its
  * items are --plinth-section-menu-item-height (40px) tall, never less than the 40px touch
  * target, and at least 40px wide. The row never wraps: when the items don't fit it scrolls
  * sideways and snaps to them, with a thin scrollbar for a mouse and none on a touch screen; the
  * row's block padding keeps the focus ring inside it. The app scrolls a current item that starts
  * out of view into view.
- * Placement is the app's: put it under the header, or make it sticky below it with
- * position: sticky, inset-block-start: calc(var(--plinth-header-height) +
- * env(safe-area-inset-top)) and z-index: var(--plinth-layer-sticky).
+ * Placement is the app's: put it under the page header, or make it sticky below it with
+ * position: sticky, inset-block-start: calc(var(--plinth-page-header-offset) +
+ * var(--plinth-page-header-height)), plus env(safe-area-inset-top) under the screen's top bar,
+ * and z-index: var(--plinth-layer-sticky).
  */
 
 @layer plinth {
@@ -3771,3 +4041,406 @@
     }
   }
 }
+
+/* text-field.css */
+/*
+ * Text field: one line of text, with its label, an optional description and an error.
+ *
+ * <div class="plinth-text-field" data-size="md">
+ *   <label class="plinth-text-field-label" for="email">Email</label>
+ *   <div class="plinth-text-field-control">
+ *     <span class="plinth-icon" data-size="sm" aria-hidden="true"><svg>…</svg></span>
+ *     <input type="email" class="plinth-text-field-input" id="email"
+ *       aria-describedby="email-description email-error" aria-invalid="true">
+ *     <span class="plinth-text-field-trailing">…</span>
+ *   </div>
+ *   <p class="plinth-text-field-description" id="email-description">For receipts only.</p>
+ *   <p class="plinth-text-field-error" id="email-error">Enter an email address.</p>
+ * </div>
+ *
+ * The input needs an id: the label points at it with for, and the description's and error's ids
+ * are the input's id with -description and -error. The icon, the trailing slot, the description
+ * and the error are optional; aria-describedby lists the description, then the error, and is left
+ * out when there is neither.
+ *
+ * Attributes go to the input, not the root (name, value, placeholder, autocomplete, required,
+ * wire:model, x-model, data-*, aria-*), so the app talks to the input; only a project's class is
+ * added to the root's.
+ *
+ * - type (on the input): text by default; email, url, tel, password, number or search. A search
+ *   field takes a search icon and, in the trailing slot, a clear button (a small ghost icon
+ *   button) that the app shows when there is text and wires up. With a trailing slot, the
+ *   browser's own clear button is hidden, so there is only one.
+ * - the leading icon is 16px and decorative (aria-hidden); the label names the field.
+ * - the trailing slot holds one small control or hint, in the room the field keeps at its end
+ *   (--plinth-text-field-trailing-size, 32px): a small icon button, or a keyboard hint as <kbd>.
+ * - data-label="hidden" on the root hides the label visually; screen readers still read it. Use it
+ *   only where the field's purpose is plain without it, such as a search box with its icon.
+ *
+ * Sizes (data-size): md 32px (default, also when missing) and sm 28px. On a touch screen both are
+ * 40px tall. The text is 16px on a phone, so iOS doesn't zoom into the field, and from 768px
+ * up it is 14px (md) or 13px (sm).
+ *
+ * States:
+ * - error: aria-invalid="true" on the input and the error message under it; the edge turns
+ *   danger and thick, so it isn't only a colour, and the message says what to fix.
+ * - disabled: `disabled` on the input; the field is faded and can't be focused.
+ * - read-only: `readonly` on the input; it keeps its text and focus, without the field's fill
+ *   and with a dashed edge.
+ * - the focus ring on the input's :focus-visible.
+ */
+
+@layer plinth {
+  .plinth-text-field {
+    --plinth-text-field-height: var(--plinth-control-md);
+    --plinth-text-field-text: var(--plinth-font-size-md);
+
+    display: grid;
+    gap: var(--plinth-space-2);
+    min-inline-size: 0;
+    font-family: var(--plinth-font-family-body);
+  }
+
+  .plinth-text-field[data-size='sm'] {
+    --plinth-text-field-height: var(--plinth-control-sm);
+    --plinth-text-field-text: var(--plinth-font-size-sm);
+  }
+
+  .plinth-text-field-label {
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  /* Hidden from sight, still read by screen readers. */
+  .plinth-text-field[data-label='hidden'] .plinth-text-field-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .plinth-text-field-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  .plinth-text-field-input {
+    box-sizing: border-box;
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: var(--plinth-text-field-height);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--plinth-font-size-field);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text);
+    appearance: none;
+    background-color: var(--plinth-color-surface-sunken);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-control);
+    transition: border-color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  .plinth-text-field-input::placeholder {
+    color: var(--plinth-color-text-subtle);
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .plinth-text-field-input:hover:not(:disabled, :read-only, [aria-invalid='true']) {
+      border-color: var(--plinth-color-text-subtle);
+    }
+  }
+
+  .plinth-text-field-input:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-text-field-input[aria-invalid='true'] {
+    border-color: var(--plinth-color-danger);
+    border-width: var(--plinth-border-width-thick);
+  }
+
+  .plinth-text-field-input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Without the fill, and with a dashed edge, so it doesn't read as a field to type in. */
+  .plinth-text-field-input:read-only:not(:disabled) {
+    background-color: transparent;
+    border-style: dashed;
+  }
+
+  .plinth-text-field-control:has(.plinth-text-field-input:disabled) {
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  /* The leading icon sits over the input's start, which keeps room for it. */
+  .plinth-text-field-control > .plinth-icon {
+    position: absolute;
+    inset-inline-start: var(--plinth-space-3);
+    color: var(--plinth-color-text-subtle);
+    pointer-events: none;
+  }
+
+  .plinth-text-field-control:has(> .plinth-icon) > .plinth-text-field-input {
+    padding-inline-start: calc(
+      var(--plinth-space-3) + var(--plinth-size-icon-sm) + var(--plinth-space-2)
+    );
+  }
+
+  .plinth-text-field-trailing {
+    position: absolute;
+    inset-inline-end: var(--plinth-space-1);
+    display: flex;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--plinth-text-field-trailing-size);
+    color: var(--plinth-color-text-subtle);
+  }
+
+  .plinth-text-field-control:has(> .plinth-text-field-trailing) > .plinth-text-field-input {
+    padding-inline-end: calc(var(--plinth-space-1) + var(--plinth-text-field-trailing-size));
+  }
+
+  /* With its own clear button in the trailing slot, the browser's is one too many. */
+  .plinth-text-field-control:has(> .plinth-text-field-trailing)
+    > .plinth-text-field-input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .plinth-text-field-trailing kbd {
+    box-sizing: border-box;
+    min-inline-size: var(--plinth-size-icon-md);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-1);
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    text-align: center;
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-control);
+  }
+
+  .plinth-text-field-description,
+  .plinth-text-field-error {
+    margin: 0;
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-text-field-description {
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-text-field-error {
+    color: var(--plinth-color-danger-text);
+  }
+
+  @media (pointer: coarse) {
+    .plinth-text-field-input {
+      min-block-size: var(--plinth-touch-target);
+    }
+  }
+
+  @media (min-width: 768px) {
+    .plinth-text-field-input {
+      font-size: var(--plinth-text-field-text);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-text-field-control:has(.plinth-text-field-input:disabled) {
+      color: GrayText;
+    }
+
+    .plinth-text-field-input:disabled {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}
+
+/* textarea.css */
+/*
+ * Textarea: several lines of text, with its label, an optional description and an error. With
+ * grow, it grows with its content.
+ *
+ * <div class="plinth-textarea">
+ *   <label class="plinth-textarea-label" for="reply">Reply</label>
+ *   <textarea class="plinth-textarea-input" id="reply" rows="3"
+ *     aria-describedby="reply-description reply-error" aria-invalid="true"></textarea>
+ *   <p class="plinth-textarea-description" id="reply-description">The customer sees it.</p>
+ *   <p class="plinth-textarea-error" id="reply-error">Write a reply first.</p>
+ * </div>
+ *
+ * The textarea needs an id: the label points at it with for, and the description's and error's
+ * ids are the textarea's id with -description and -error. The description and the error are
+ * optional; aria-describedby lists the description, then the error, and is left out when there is
+ * neither. rows is 3 by default.
+ *
+ * Attributes go to the textarea, not the root (name, placeholder, maxlength, required,
+ * wire:model, x-model, data-*, aria-*), so the app talks to the textarea; only a project's class
+ * is added to the root's.
+ *
+ * - grow: data-grow on the textarea, with its rows and maximum as custom properties:
+ *   <textarea class="plinth-textarea-input" id="reply" rows="3" data-grow
+ *     style="--plinth-textarea-rows: 3; --plinth-textarea-max-rows: 8"></textarea>
+ *   It starts at rows lines and grows with its content (field-sizing: content) up to max-rows
+ *   (8 by default), then scrolls. Where the browser has no field-sizing it keeps rows lines and
+ *   the person can resize it, as without grow.
+ * - data-label="hidden" on the root hides the label visually; screen readers still read it. Use it
+ *   only where the field's purpose is plain without it, such as a reply box under a thread.
+ *
+ * The text is 16px on a phone, so iOS doesn't zoom into the field, and 14px from 768px up.
+ *
+ * States:
+ * - error: aria-invalid="true" on the textarea and the error message under it; the edge turns
+ *   danger and thick, so it isn't only a colour, and the message says what to fix.
+ * - disabled: `disabled` on the textarea; the field is faded and can't be focused.
+ * - read-only: `readonly` on the textarea; it keeps its text and focus, without the field's fill
+ *   and with a dashed edge.
+ * - the focus ring on the textarea's :focus-visible.
+ */
+
+@layer plinth {
+  .plinth-textarea {
+    display: grid;
+    gap: var(--plinth-space-2);
+    min-inline-size: 0;
+    font-family: var(--plinth-font-family-body);
+  }
+
+  .plinth-textarea-label {
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  /* Hidden from sight, still read by screen readers. */
+  .plinth-textarea[data-label='hidden'] .plinth-textarea-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .plinth-textarea-input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--plinth-touch-target);
+    padding-block: var(--plinth-space-2);
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--plinth-font-size-field);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text);
+    resize: vertical;
+    background-color: var(--plinth-color-surface-sunken);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-control);
+    transition: border-color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  .plinth-textarea-input::placeholder {
+    color: var(--plinth-color-text-subtle);
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .plinth-textarea-input:hover:not(:disabled, :read-only, [aria-invalid='true']) {
+      border-color: var(--plinth-color-text-subtle);
+    }
+  }
+
+  .plinth-textarea-input:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-textarea-input[aria-invalid='true'] {
+    border-color: var(--plinth-color-danger);
+    border-width: var(--plinth-border-width-thick);
+  }
+
+  .plinth-textarea-input:disabled {
+    cursor: not-allowed;
+    resize: none;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  /* Without the fill, and with a dashed edge, so it doesn't read as a field to type in. */
+  .plinth-textarea-input:read-only:not(:disabled) {
+    background-color: transparent;
+    border-style: dashed;
+  }
+
+  /*
+   * Grow: from rows lines to max-rows lines (in the textarea's own line height, with its padding
+   * and edge), then it scrolls.
+   */
+  @supports (field-sizing: content) {
+    .plinth-textarea-input[data-grow] {
+      field-sizing: content;
+      min-block-size: max(
+        var(--plinth-touch-target),
+        calc(
+          var(--plinth-textarea-rows, 3) * 1lh + 2 * var(--plinth-space-2) + 2 *
+            var(--plinth-border-width-thin)
+        )
+      );
+      max-block-size: calc(
+        var(--plinth-textarea-max-rows, 8) * 1lh + 2 * var(--plinth-space-2) + 2 *
+          var(--plinth-border-width-thin)
+      );
+      resize: none;
+    }
+  }
+
+  .plinth-textarea-description,
+  .plinth-textarea-error {
+    margin: 0;
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-textarea-description {
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-textarea-error {
+    color: var(--plinth-color-danger-text);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-textarea-input {
+      font-size: var(--plinth-font-size-md);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-textarea-input:disabled {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}