@neo-ui-kit/react 0.0.0-stage → 1.0.1

package/dist/components/feedback/Steps/styles.css

@@ -0,0 +1,152 @@
+/* Styles owned by Steps: nodes on a rail; energy flows along the rail into the current step. */
+.ad-steps {
+  --ad-step-node: 1.9rem;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.ad-steps > li {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 0.5rem;
+  min-width: 0;
+  text-align: center;
+}
+/* Rail segment from the previous node to this one. */
+.ad-steps > li + li::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  top: calc(var(--ad-step-node) / 2 - 0.0625rem);
+  right: calc(50% + var(--ad-step-node) / 2 + 0.25rem);
+  left: calc(-50% + var(--ad-step-node) / 2 + 0.25rem);
+  height: 0.125rem;
+  border-radius: 999rem;
+  background: #ffffff14;
+}
+.ad-steps > li[data-state="done"] + li::before,
+.ad-steps > li + li[data-state="done"]::before {
+  background: linear-gradient(90deg, var(--ad-primary), var(--ad-secondary));
+  box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.53);
+}
+.ad-steps > li + li[data-state="current"]::before {
+  overflow: hidden;
+  background: linear-gradient(90deg, var(--ad-primary) 0 40%, rgb(from var(--ad-primary) r g b / 0.25) 100%);
+  box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.53);
+}
+/* The line toward the current step carries a running glint. */
+.ad-steps > li[data-state="current"] {
+  --ad-steps-glint: 1;
+}
+.ad-steps-glint {
+  position: absolute;
+  top: calc(var(--ad-step-node) / 2 - 0.0625rem);
+  right: calc(50% + var(--ad-step-node) / 2 + 0.25rem);
+  left: calc(-50% + var(--ad-step-node) / 2 + 0.25rem);
+  height: 0.125rem;
+  overflow: hidden;
+  border-radius: 999rem;
+  clip-path: inset(0 round 999rem);
+  pointer-events: none;
+}
+/* The glint is 30% of the line and slides from 28% left of it to 98% across, on its own layer. */
+.ad-steps-glint::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 30%;
+  background: linear-gradient(90deg, transparent, var(--ad-neutral-200), transparent);
+  transform: translateX(-93.333%);
+  animation: ad-steps-flow 1.6s linear infinite;
+  will-change: transform;
+}
+.ad-step-node {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: var(--ad-step-node);
+  height: var(--ad-step-node);
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--ad-neutral-500);
+  background: var(--ad-neutral-900);
+  box-shadow: inset 0 0 0 0.0625rem #ffffff26;
+  transition:
+    background 0.3s,
+    box-shadow 0.3s,
+    color 0.3s;
+}
+.ad-step-node > .ad-icon {
+  --ad-icon-size: 1rem;
+  animation: ad-steps-pop 0.45s cubic-bezier(0.34, 1.6, 0.5, 1) both;
+}
+.ad-steps > li[data-state="done"] .ad-step-node {
+  color: #fff;
+  background: linear-gradient(180deg, var(--ad-primary), var(--ad-primary-700));
+  box-shadow:
+    inset 0 0.0625rem 0 rgb(from var(--ad-secondary-100) r g b / 0.53),
+    0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
+}
+.ad-steps > li[data-state="current"] .ad-step-node {
+  color: #fff;
+  background: radial-gradient(circle, rgb(from var(--ad-primary) r g b / 0.33), var(--ad-neutral-900) 70%);
+  box-shadow:
+    inset 0 0 0 0.125rem var(--ad-secondary),
+    0 0 0.9rem rgb(from var(--ad-primary) r g b / 0.53);
+}
+.ad-steps > li[data-state="current"] .ad-step-node::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 0.125rem var(--ad-secondary-200), 0 0 1.4rem rgb(from var(--ad-primary) r g b / 0.67);
+  opacity: 0;
+  animation: ad-steps-pulse 1.8s ease-in-out infinite;
+}
+/* Orbiting dashed ring around the current node. */
+.ad-steps > li[data-state="current"] .ad-step-node::after {
+  content: "";
+  position: absolute;
+  inset: -0.3rem;
+  border-radius: 50%;
+  border: 0.0625rem dashed rgb(from var(--ad-secondary) r g b / 0.67);
+  animation: ad-steps-orbit 6s linear infinite;
+}
+.ad-step-label {
+  max-width: 100%;
+  font-size: var(--ad-font-size-caption);
+  font-weight: 600;
+  color: var(--ad-neutral-500);
+  overflow-wrap: anywhere;
+}
+.ad-steps > li:is([data-state="done"], [data-state="current"]) .ad-step-label {
+  color: var(--ad-neutral-200);
+}
+@keyframes ad-steps-flow {
+  to {
+    transform: translateX(326.667%);
+  }
+}
+@keyframes ad-steps-pulse {
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes ad-steps-orbit {
+  to {
+    rotate: 1turn;
+  }
+}
+@keyframes ad-steps-pop {
+  from {
+    scale: 0;
+    rotate: -45deg;
+  }
+}

package/dist/components/feedback/Toast/Toast.d.ts

@@ -0,0 +1,2 @@
+import { type ToastProps } from "../shared";
+export declare const Toast: ({ open, duration, onClose, ...p }: ToastProps) => import("react").JSX.Element | null;

package/dist/components/feedback/Toast/styles.css

@@ -0,0 +1,89 @@
+/* Styles owned by Toast: springs in with a tone-lit icon ring; a burning fuse shows the time left. */
+.ad-toast {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: min(18rem, 100%);
+  max-width: 100%;
+  font-size: var(--ad-font-size-body-sm);
+  font-weight: 600;
+  padding: 0.7rem 1.2rem 0.75rem 0.7rem;
+  border: 0.0625rem solid color-mix(in srgb, var(--ad-tone) 40%, transparent);
+  border-radius: 2rem;
+  background:
+    radial-gradient(
+      60% 140% at 0 50%,
+      color-mix(in srgb, var(--ad-tone) 22%, transparent),
+      transparent 70%
+    ),
+    rgb(from var(--ad-neutral-900) r g b / 0.95);
+  box-shadow:
+    0 0.8rem 2rem #000b,
+    0 0 1.2rem color-mix(in srgb, var(--ad-tone) 25%, transparent);
+  backdrop-filter: blur(1rem);
+  overflow: hidden;
+  animation: ad-toast-in 0.55s cubic-bezier(0.34, 1.5, 0.5, 1) both;
+}
+.ad-toast > :nth-child(2) {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.ad-toast-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  color: #fff;
+  background: radial-gradient(
+    circle at 35% 30%,
+    color-mix(in srgb, var(--ad-tone) 70%, #fff),
+    var(--ad-tone) 70%
+  );
+  box-shadow: 0 0 0.9rem var(--ad-tone);
+  animation: ad-toast-icon 0.6s 0.15s cubic-bezier(0.34, 1.6, 0.5, 1) both;
+}
+.ad-toast-icon > .ad-icon {
+  --ad-icon-size: 1.05rem;
+  color: var(--ad-neutral-900);
+}
+.ad-toast-floating {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  translate: -50% 0;
+  z-index: 9999;
+  min-width: min(18rem, 90vw);
+  max-width: min(90vw, 46.875rem);
+}
+.ad-toast-timer {
+  position: absolute;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 0;
+  height: 0.125rem;
+  border-radius: 999rem;
+  background: linear-gradient(90deg, var(--ad-tone), #fff);
+  box-shadow: 0 0 0.5rem var(--ad-tone);
+  transform-origin: left;
+  animation: ad-toast-timer var(--ad-toast-duration, 3.6s) linear both;
+}
+@keyframes ad-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(1.5rem) scale(0.85);
+    filter: blur(0.3rem);
+  }
+}
+@keyframes ad-toast-icon {
+  from {
+    transform: scale(0) rotate(-90deg);
+  }
+}
+@keyframes ad-toast-timer {
+  to {
+    transform: scaleX(0);
+  }
+}

package/dist/components/feedback/Tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface TooltipProps extends CommonProps {
+    /** What the tooltip says. */
+    content: ReactNode;
+    /** The element it explains; it gets `aria-describedby`. */
+    children: ReactElement;
+    /** Preferred side; it flips when there is no room. */
+    placement?: "top" | "bottom";
+}
+/**
+ * A short explanation that appears on hover or keyboard focus. It lives in the top layer, so
+ * no scrolling or clipping container can cut it off, and it flips to the side with room.
+ */
+export declare function Tooltip({ content, children, placement, ...p }: TooltipProps): import("react").JSX.Element;

package/dist/components/feedback/Tooltip/styles.css

@@ -0,0 +1,38 @@
+/* Styles owned by Tooltip: a small glass note that rises from its side of the trigger. */
+.ad-tooltip-trigger {
+  display: inline-flex;
+}
+.ad-tooltip {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  max-width: min(20rem, calc(100vw - 1rem));
+  padding: 0.45rem 0.65rem;
+  border: 0;
+  border-radius: 0.55rem;
+  background: rgb(from var(--ad-neutral-950) r g b / 0.94);
+  box-shadow:
+    inset 0 0 0 0.0625rem rgb(from var(--ad-primary) r g b / 0.35),
+    0 0.5rem 1.5rem #000a,
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.18);
+  color: var(--ad-text);
+  font: var(--ad-font-weight-medium) var(--ad-font-size-caption) / 1.45
+    var(--ad-font-family-sans);
+  pointer-events: none;
+  animation: ad-tooltip-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+.ad-tooltip[data-ad-side="below"] {
+  animation-name: ad-tooltip-in-below;
+}
+@keyframes ad-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.25rem) scale(0.96);
+  }
+}
+@keyframes ad-tooltip-in-below {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem) scale(0.96);
+  }
+}

package/dist/components/feedback/shared.css

@@ -0,0 +1,22 @@
+/* Shared only by sibling components. */
+.ad-steps .ad-status-indicator {
+  font-size: 0.625rem;
+  gap: 0.3125rem;
+}
+.ad-steps .ad-status-dot {
+  width: 1.4375rem;
+  height: 1.4375rem;
+}
+.ad-popover,
+.ad-menu {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  min-width: 14.6875rem;
+  max-width: 21.875rem;
+  padding: 0.5rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary-600) r g b / 0.51) !important;
+  border-radius: 0.8125rem;
+  z-index: 1000;
+  color: var(--ad-text);
+}

package/dist/components/feedback/shared.d.ts

@@ -0,0 +1,231 @@
+import type { ReactNode, RefObject, KeyboardEventHandler } from "react";
+import type { CommonProps, Tone } from "../../core/base";
+export interface DialogProps extends CommonProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** `false` (with `cancelLabel={false}`) leaves the dialog without a footer, e.g. for settings that apply at once. */
+    confirmLabel?: string | false;
+    cancelLabel?: string | false;
+    /** Icon tile beside the title. */
+    icon?: string;
+    /** Label of the close button, for localisation. */
+    closeLabel?: string;
+    /** Decoration painted across the whole window behind its content (artwork, glows, frames). */
+    art?: ReactNode;
+    /** Close on a click outside the window (default); `false` keeps it open until a button closes it. */
+    dismissible?: boolean;
+    /** Window width: "narrow" for a short question, "wide" and "large" for forms and lists, "full" for a workspace. */
+    width?: "narrow" | "normal" | "wide" | "large" | "full";
+    danger?: boolean;
+    onConfirm?: () => boolean | void | Promise<boolean | void>;
+}
+export interface PopoverProps extends CommonProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchorRef?: RefObject<HTMLElement | null>;
+    label?: string;
+    role?: "dialog" | "menu" | "listbox";
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    align?: "start" | "end";
+    matchAnchorWidth?: boolean;
+    /** Move focus into the popover when it opens (default). Off for comboboxes that keep typing focus. */
+    autoFocus?: boolean;
+}
+export interface MenuItemData {
+    id?: string;
+    label?: string;
+    icon?: string;
+    endIcon?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+    onSelect?: () => void;
+}
+export interface MenuItemProps extends CommonProps, MenuItemData {
+}
+export interface MenuProps extends PopoverProps {
+    items?: MenuItemData[];
+}
+export interface ToastProps extends CommonProps {
+    message?: ReactNode;
+    open?: boolean;
+    duration?: number;
+    onClose?: () => void;
+    floating?: boolean;
+}
+export interface BadgeProps extends CommonProps {
+    label?: string;
+}
+export interface MessageBarProps extends CommonProps {
+    /** A button or link that resolves the message, e.g. "Повторить". */
+    action?: ReactNode;
+}
+export interface StatusIndicatorProps extends CommonProps {
+    status?: Tone;
+    label?: ReactNode;
+}
+export interface ProgressBarProps extends CommonProps {
+    value?: number;
+    max?: number;
+    label?: string;
+    indeterminate?: boolean;
+    /** A bar, or a sound wave that fills with colour from the left (e.g. audio being processed). */
+    variant?: "bar" | "wave";
+}
+export interface StepsProps extends CommonProps {
+    steps?: string[];
+    current?: number;
+}
+export interface EmptyStateProps extends CommonProps {
+    title?: string;
+    description?: string;
+    icon?: string;
+    action?: ReactNode;
+}
+export interface KeyValueListProps extends CommonProps {
+    items?: Array<[ReactNode, ReactNode]>;
+}
+/** A row of a table: named fields, or the cells in column order. */
+export type DataTableRow = Record<string, unknown> | ReactNode[];
+export interface DataTableColumn<T extends DataTableRow = DataTableRow> {
+    /** Field of the row (or the cell index for array rows). */
+    key: string;
+    title: ReactNode;
+    align?: "start" | "center" | "end";
+    width?: string;
+    /** Allow readers to resize this column; on by default. */
+    resizable?: boolean;
+    /** Click the header to sort; on by default. */
+    sortable?: boolean;
+    /** Cell content; value(row), or the raw field, by default. */
+    render?: (row: T, index: number) => ReactNode;
+    /** What sorting, search, filters and groups look at; the raw field by default. */
+    value?: (row: T) => string | number;
+    /**
+     * A filter in the header: "text" (contains), "values" (pick from the column's values),
+     * "range" (numbers from–to). With `filterable` on the table every column gets one: values
+     * for short lists, range for numbers, text otherwise; `false` turns it off.
+     */
+    filter?: "text" | "values" | "range" | false;
+    /** Rows can be grouped by this column; on by default. */
+    groupable?: boolean;
+    /** A summary of a group's rows shown in its header row (a count, a sum, an average…). */
+    aggregate?: (rows: T[]) => ReactNode;
+}
+export type DataTableSort = {
+    key: string;
+    direction: "asc" | "desc";
+};
+export type DataTablePagination = {
+    pageIndex: number;
+    pageSize: number;
+};
+export type DataTableColumnPinning = {
+    left?: string[];
+    right?: string[];
+};
+/** One column's filter: text it contains, values it is one of, or a number range. */
+export type DataTableFilter = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "values";
+    values: string[];
+} | {
+    kind: "range";
+    min?: number;
+    max?: number;
+};
+export interface DataTableProps<T extends DataTableRow = DataTableRow> extends CommonProps {
+    /** Column titles, or full column descriptions. */
+    columns?: Array<string | DataTableColumn<T>>;
+    rows?: T[];
+    caption?: ReactNode;
+    /** Stable id of a row, for selection; defaults to `row.id` or object identity. Provide this for freshly recreated rows without ids. */
+    rowKey?: (row: T, index: number) => string;
+    sort?: DataTableSort | null;
+    defaultSort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Ordered sort priority. Shift-click adds/cycles one column; a normal click replaces the list. */
+    sorting?: DataTableSort[];
+    defaultSorting?: DataTableSort[];
+    onSortingChange?: (sorting: DataTableSort[]) => void;
+    /** Checkboxes to pick rows, with "select all" in the header. */
+    selectable?: boolean;
+    selected?: string[];
+    defaultSelected?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    /** A search field over every column. */
+    searchable?: boolean;
+    query?: string;
+    defaultQuery?: string;
+    onQueryChange?: (query: string) => void;
+    /** Filters in every column header (see `DataTableColumn.filter`). */
+    filterable?: boolean;
+    filters?: Record<string, DataTableFilter>;
+    defaultFilters?: Record<string, DataTableFilter>;
+    onFiltersChange?: (filters: Record<string, DataTableFilter>) => void;
+    /** Group rows by a column; `groupable` adds a "group by" choice to the toolbar. */
+    groupable?: boolean;
+    groupBy?: string | null;
+    defaultGroupBy?: string | null;
+    onGroupByChange?: (key: string | null) => void;
+    /** Rows per page; everything on one page by default. */
+    pageSize?: number;
+    /** Page-size choices in the footer when pagination is enabled. */
+    pageSizeOptions?: number[];
+    /** Controlled, zero-based pagination; rows are sliced locally unless manualPagination is enabled. */
+    pagination?: DataTablePagination;
+    defaultPagination?: DataTablePagination;
+    onPaginationChange?: (pagination: DataTablePagination) => void;
+    /** Server-owned data operations: the table emits state changes but never fetches or transforms these rows. */
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+    manualPagination?: boolean;
+    /** Total matching server rows, not merely the current page length. */
+    rowCount?: number;
+    columnOrder?: string[];
+    defaultColumnOrder?: string[];
+    onColumnOrderChange?: (keys: string[]) => void;
+    columnPinning?: DataTableColumnPinning;
+    defaultColumnPinning?: DataTableColumnPinning;
+    onColumnPinningChange?: (pinning: DataTableColumnPinning) => void;
+    /** Allow readers to resize columns; on by default. */
+    resizableColumns?: boolean;
+    /** Scroll inside the table with a sticky header beyond this height. */
+    maxHeight?: string | number;
+    /** Render only the visible rows, group headings and expanded details. Uses a 480px viewport by default. */
+    virtualize?: boolean;
+    estimatedRowHeight?: number;
+    overscan?: number;
+    /** Detail content is mounted only while its stable row key is expanded and visible. */
+    renderRowDetails?: (row: T, index: number) => ReactNode;
+    expandedRows?: string[];
+    defaultExpandedRows?: string[];
+    onExpandedRowsChange?: (keys: string[]) => void;
+    renderRowActions?: (row: T, index: number) => ReactNode;
+    /** Width reserved for row actions, in pixels; defaults to 120. */
+    rowActionsWidth?: number;
+    rowNumbers?: boolean;
+    dense?: boolean;
+    densityToggle?: boolean;
+    onDenseChange?: (dense: boolean) => void;
+    striped?: boolean;
+    /** Placeholder rows while data loads. */
+    loading?: boolean;
+    /** Shown when there are no rows (or none match the search). */
+    empty?: ReactNode;
+    onRowClick?: (row: T, index: number) => void;
+}
+export interface CollapsibleSectionProps extends CommonProps {
+    title?: string;
+    /** Muted line under the title, e.g. what the section holds. */
+    description?: ReactNode;
+    icon?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}

package/dist/components/forms/Form/Form.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+export type FormErrors<T> = Partial<Record<keyof T, string>> & Record<string, string | undefined>;
+export interface FormApi<T extends Record<string, unknown>> {
+    values: T;
+    errors: FormErrors<T>;
+    touched: Record<string, boolean>;
+    submitting: boolean;
+    setValue: (path: string, value: unknown) => void;
+    setTouched: (path: string, touched?: boolean) => void;
+    reset: (values?: T) => void;
+    submit: () => Promise<boolean>;
+    field: (path: string) => {
+        value: unknown;
+        error?: string;
+        touched: boolean;
+        onValueChange: (value: unknown) => void;
+        onBlur: () => void;
+    };
+}
+export interface UseFormOptions<T extends Record<string, unknown>> {
+    initialValues: T;
+    validate?: (values: T) => FormErrors<T> | Promise<FormErrors<T>>;
+    onSubmit?: (values: T, form: FormApi<T>) => void | Promise<void>;
+    reinitialize?: boolean;
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+}
+export declare function useForm<T extends Record<string, unknown>>(options: UseFormOptions<T>): FormApi<T>;
+export interface FormProps<T extends Record<string, unknown>> {
+    form: FormApi<T>;
+    children: ReactNode;
+    className?: string;
+}
+export declare function Form<T extends Record<string, unknown>>({ form, children, className, }: FormProps<T>): import("react").JSX.Element;
+export declare function useFormContext<T extends Record<string, unknown>>(): FormApi<T>;

package/dist/components/forms/Form/styles.css

@@ -0,0 +1 @@
+/* Form is behavior-only; compose layout with Stack/Grid. */

package/dist/components/forms/FormFields/FormFields.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentType, type ReactNode } from "react";
+import { type GridResponsive } from "../../layout/Grid/Grid";
+export type FieldKind = "text" | "number" | "textarea" | "select" | "autocomplete" | "checkbox" | "switch" | "color" | "date" | "file" | "people" | "slider" | "rotary" | "tags";
+export interface FormFieldDefinition<T extends Record<string, unknown> = Record<string, unknown>> {
+    name: string;
+    kind?: FieldKind;
+    label?: ReactNode;
+    span?: GridResponsive<number | "full">;
+    showWhen?: (values: T) => boolean;
+    props?: Record<string, unknown>;
+}
+export type FieldRegistry = Record<string, ComponentType<any>>;
+export declare const defaultFieldRegistry: FieldRegistry;
+export interface FormFieldsProps<T extends Record<string, unknown>> {
+    fields: readonly FormFieldDefinition<T>[];
+    registry?: FieldRegistry;
+    columns?: number;
+    gap?: number;
+}
+export declare function FormFields<T extends Record<string, unknown>>({ fields, registry, columns, gap, }: FormFieldsProps<T>): import("react").JSX.Element;

package/dist/components/forms/FormFields/styles.css

@@ -0,0 +1,72 @@
+/* FormFields composes existing field primitives. */
+@supports (grid-template-rows: subgrid) {
+  /* Labels and messages size their own tracks, not the controls' center line. */
+  .ad-form-fields.ad-grid {
+    grid-auto-rows: auto auto auto minmax(var(--ad-grid-row-gap), auto);
+    row-gap: 0;
+    align-items: stretch;
+    margin-block-end: calc(var(--ad-grid-row-gap) * -1);
+  }
+  .ad-form-field {
+    display: grid;
+    grid-row-end: span 4;
+    grid-template-rows: subgrid;
+  }
+  .ad-form-field > * {
+    grid-row: 2;
+    align-self: center;
+  }
+  .ad-form-field > :has(> .ad-field) {
+    display: grid;
+    grid-row: 1 / 5;
+    grid-template-rows: subgrid;
+    row-gap: 0;
+    align-self: stretch;
+  }
+  .ad-form-field > .ad-field,
+  .ad-form-field > :has(> .ad-field) > .ad-field {
+    grid-row: 1 / 4;
+    grid-template-rows: subgrid;
+    row-gap: 0;
+    align-self: stretch;
+  }
+  .ad-form-field .ad-field > * {
+    grid-row: 2;
+    align-self: center;
+  }
+  .ad-form-field .ad-field > .ad-field-label {
+    grid-row: 1;
+    align-self: end;
+    margin-block-end: calc(var(--ad-space-1) * 1.5);
+  }
+  .ad-form-field .ad-field > .ad-field-message {
+    grid-row: 3;
+    align-self: start;
+    margin-block-start: calc(var(--ad-space-1) * 1.5);
+  }
+  .ad-form-field > :has(> .ad-field) > :not(.ad-field) {
+    grid-row: 4;
+  }
+}
+/* Fields of a declarative form arrive in a quick cascade. */
+form .ad-grid > .ad-grid-item {
+  animation: ad-fields-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+form .ad-grid > .ad-grid-item:nth-child(2) {
+  animation-delay: 0.06s;
+}
+form .ad-grid > .ad-grid-item:nth-child(3) {
+  animation-delay: 0.12s;
+}
+form .ad-grid > .ad-grid-item:nth-child(4) {
+  animation-delay: 0.18s;
+}
+form .ad-grid > .ad-grid-item:nth-child(n + 5) {
+  animation-delay: 0.24s;
+}
+@keyframes ad-fields-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.6rem);
+  }
+}