@ptbdynamic/plinth 0.1.1 → 0.2.0

package/packages/css/dist/section-menu.css

@@ -1,5 +1,5 @@
 /*
- * 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">
@@ -33,15 +33,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 {

package/packages/css/dist/text-field.css

@@ -0,0 +1,230 @@
+/*
+ * 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;
+    }
+  }
+}

package/packages/css/dist/textarea.css

@@ -0,0 +1,169 @@
+/*
+ * 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;
+    }
+  }
+}

package/packages/css/dist/tokens.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,

package/packages/react/dist/PlinthMenu.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+interface MenuOptions {
+    /** The menu's id, which its button names in `popoverTarget`. */
+    id: string;
+}
+/**
+ * A `<div popover="auto">`: open it with a button that has `popoverTarget` set to its id (or
+ * `commandfor` and `command="toggle-popover"`). Its `onToggle` is the popover's toggle event.
+ */
+export type PlinthMenuProps = MenuOptions & Omit<ComponentProps<'div'>, keyof MenuOptions>;
+export declare function PlinthMenu({ id, className, children, ...rest }: PlinthMenuProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenuGroup.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface MenuGroupOptions {
+    /** The heading over the group's items, and the group's accessible name. */
+    label?: string;
+}
+/** A `<div role="group">` of menu items under a heading. */
+export type PlinthMenuGroupProps = MenuGroupOptions & Omit<ComponentProps<'div'>, keyof MenuGroupOptions>;
+export declare function PlinthMenuGroup({ label, className, children, ...rest }: PlinthMenuGroupProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenuItem.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { InvokerCommandProps } from './button';
+import { type MenuItemTone } from './menu';
+interface MenuItemOptions {
+    /** `danger` for an item that destroys or removes something. */
+    tone?: MenuItemTone;
+    /** A keyboard shortcut to show at the item's end, such as ⌘D. */
+    shortcut?: string;
+    /** Disables the item. */
+    disabled?: boolean;
+    /** The id of the menu a button item closes; the menu around it when missing. */
+    menu?: string;
+    /** The project's icon before the label, decorative (Vue's `icon` slot). */
+    icon?: ReactNode;
+}
+/**
+ * A `<button>` that closes its menu when pressed (its own `commandfor` and `command` win), or
+ * with an `href` a link. The label is `children`.
+ */
+export type PlinthMenuItemProps = (MenuItemOptions & InvokerCommandProps & Omit<ComponentProps<'button'>, keyof MenuItemOptions | keyof InvokerCommandProps> & {
+    href?: undefined;
+}) | (MenuItemOptions & Omit<ComponentProps<'a'>, keyof MenuItemOptions> & {
+    href: string;
+});
+export declare function PlinthMenuItem({ href, tone, shortcut, disabled, menu, icon, className, children, ...rest }: PlinthMenuItemProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthMenuSeparator.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps } from 'react';
+/** An `<hr>` between a menu's items. */
+export type PlinthMenuSeparatorProps = ComponentProps<'hr'>;
+export declare function PlinthMenuSeparator({ className, ...rest }: PlinthMenuSeparatorProps): import("react").JSX.Element;

package/packages/react/dist/PlinthPageHeader.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type PageHeaderLevel } from './page-header';
+interface PageHeaderOptions {
+    /** The page's heading. */
+    heading: string;
+    /** The heading's element: `h1`, or `h2` to `h6` beside another page's `h1`. */
+    level?: PageHeaderLevel;
+    /** The screen's top bar: it adds the top safe-area inset (data-top). */
+    top?: boolean;
+    /** The leading action, usually a menu button or a back link (Vue's `leading` slot). */
+    leading?: ReactNode;
+    /** The trailing actions: icon buttons or a primary button (Vue's `actions` slot). */
+    actions?: ReactNode;
+}
+export type PlinthPageHeaderProps = PageHeaderOptions & Omit<ComponentProps<'header'>, keyof PageHeaderOptions | 'children'>;
+export declare function PlinthPageHeader({ heading, level, top, leading, actions, className, ...rest }: PlinthPageHeaderProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthTextField.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type TextFieldSize } from './text-field';
+interface TextFieldOptions {
+    /** The label, and the field's accessible name. */
+    label: string;
+    /** Hides the label visually; screen readers still read it. */
+    hideLabel?: boolean;
+    size?: TextFieldSize;
+    /** A line under the field that helps fill it in. */
+    description?: string;
+    /** What is wrong with the value; it marks the field invalid. */
+    error?: string;
+    /** The leading icon (Vue's `icon` slot). */
+    icon?: ReactNode;
+    /** A small control or hint at the end, such as a clear button (Vue's `trailing` slot). */
+    trailing?: ReactNode;
+}
+/**
+ * A text field. `className` goes on the root; every other prop (`value`, `onChange`, `name`,
+ * `placeholder`, `ref`, …) on the `<input>`.
+ */
+export type PlinthTextFieldProps = TextFieldOptions & Omit<ComponentProps<'input'>, keyof TextFieldOptions | 'children'>;
+export declare function PlinthTextField({ label, hideLabel, id, type, size, description, error, icon, trailing, className, ...rest }: PlinthTextFieldProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthTextarea.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+interface TextareaOptions {
+    /** The label, and the field's accessible name. */
+    label: string;
+    /** Hides the label visually; screen readers still read it. */
+    hideLabel?: boolean;
+    /** The lines it shows, and where it starts when it grows. */
+    rows?: number;
+    /** Grows with its content, from rows lines to maxRows, then scrolls. */
+    grow?: boolean;
+    /** The most lines it grows to. */
+    maxRows?: number;
+    /** A line under the field that helps fill it in. */
+    description?: string;
+    /** What is wrong with the value; it marks the field invalid. */
+    error?: string;
+}
+/**
+ * A textarea. `className` goes on the root; every other prop (`value`, `onChange`, `name`,
+ * `placeholder`, `ref`, …) on the `<textarea>`.
+ */
+export type PlinthTextareaProps = TextareaOptions & Omit<ComponentProps<'textarea'>, keyof TextareaOptions | 'children'>;
+export declare function PlinthTextarea({ label, hideLabel, id, rows, grow, maxRows, description, error, className, style, ...rest }: PlinthTextareaProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/index.d.ts

@@ -12,17 +12,23 @@ export { PlinthDataTableRow, type PlinthDataTableRowProps } from './PlinthDataTa
 export { PlinthDataTableSort, type PlinthDataTableSortProps } from './PlinthDataTableSort';
 export { PlinthDialog, type PlinthDialogProps } from './PlinthDialog';
 export { PlinthDrawer, type PlinthDrawerProps } from './PlinthDrawer';
-export { PlinthHeader, type PlinthHeaderProps } from './PlinthHeader';
 export { PlinthIcon, type PlinthIconProps } from './PlinthIcon';
 export { PlinthIconButton, type PlinthIconButtonProps } from './PlinthIconButton';
 export { PlinthListCard, type PlinthListCardProps } from './PlinthListCard';
 export { PlinthListRow, type PlinthListRowProps } from './PlinthListRow';
+export { PlinthMenu, type PlinthMenuProps } from './PlinthMenu';
+export { PlinthMenuGroup, type PlinthMenuGroupProps } from './PlinthMenuGroup';
+export { PlinthMenuItem, type PlinthMenuItemProps } from './PlinthMenuItem';
+export { PlinthMenuSeparator, type PlinthMenuSeparatorProps } from './PlinthMenuSeparator';
 export { PlinthMenuSheet, type PlinthMenuSheetProps } from './PlinthMenuSheet';
+export { PlinthPageHeader, type PlinthPageHeaderProps } from './PlinthPageHeader';
 export { PlinthPill, type PlinthPillProps } from './PlinthPill';
 export { PlinthPillRow, type PlinthPillRowProps } from './PlinthPillRow';
 export { PlinthSectionMenu, type PlinthSectionMenuProps } from './PlinthSectionMenu';
 export { PlinthSectionMenuItem, type PlinthSectionMenuItemProps } from './PlinthSectionMenuItem';
 export { PlinthSheet, type PlinthSheetProps } from './PlinthSheet';
+export { PlinthTextarea, type PlinthTextareaProps } from './PlinthTextarea';
+export { PlinthTextField, type PlinthTextFieldProps } from './PlinthTextField';
 export { avatarGlyph, avatarSizes, initialsFrom, type AvatarSize } from './avatar';
 export { buttonVariants, type ButtonVariant, type InvokerCommand, type InvokerCommandProps, } from './button';
 export { calloutIcons, calloutRole, calloutRoles, calloutTone, calloutTones, type CalloutRole, type CalloutTone, } from './callout';
@@ -34,7 +40,10 @@ export { headingLevel, headingLevels, type HeadingLevel } from './heading';
 export { controlSizes, iconSizeFor, resolveSize, sizes, type ControlSize, type Size } from './size';
 export { iconSizes, type IconSize } from './icon';
 export { listRowChevron } from './list-row';
+export { MenuIdContext, menuItemTone, menuItemTones, type MenuItemTone } from './menu';
+export { pageHeaderLevel, pageHeaderLevels, type PageHeaderLevel } from './page-header';
 export { drawerCloseIcon, drawerDesktop, drawerDesktops, drawerSnap, drawerSnapPoints, drawerSnaps, type DrawerDesktop, type DrawerSnap, } from './drawer';
 export { swipeToClose, useSwipeToClose } from './swipe';
+export { fieldDescribedBy, textFieldSize, textFieldSizes, type TextFieldSize } from './text-field';
 export { sheetCloseIcon, sheetSide, sheetSidePhone, sheetSides, type SheetSide } from './sheet';
 export { tones, type Tone } from './tones';