@usefidel/design-system 0.26.0 → 0.28.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef, CSSProperties } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -607,12 +607,16 @@ interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     children?: ReactNode;
     /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
     action?: ReactNode;
+    /** Shows a close button at the end; `dismissLabel` names it. */
+    onDismiss?: () => void;
+    /** @default 'Dismiss' */
+    dismissLabel?: string;
 }
 /**
  * Fidel design-system Callout: a tinted row that tells the reader something
  * about the page they are on and, optionally, what to do about it.
  */
-declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+declare function Callout({ tone, icon, title, titleAside, children, action, onDismiss, dismissLabel, className, ...rest }: CalloutProps): react.JSX.Element;
 
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -994,7 +998,7 @@ interface BrandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 /** Fidel design-system BrandButton: the product mark that turns into an action icon on hover or focus. */
 declare function BrandButton({ mark, hoverIcon, type, className, ...rest }: BrandButtonProps): react.JSX.Element;
 
-type OwnProps<C extends ElementType> = {
+type OwnProps$1<C extends ElementType> = {
     /** Element or component to render, e.g. a router Link. @default 'a' */
     as?: C;
     /** 16px icon before the label. */
@@ -1007,7 +1011,7 @@ type OwnProps<C extends ElementType> = {
     iconOnly?: boolean;
     children: ReactNode;
 };
-type SidebarItemProps<C extends ElementType = 'a'> = OwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps<C>>;
+type SidebarItemProps<C extends ElementType = 'a'> = OwnProps$1<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps$1<C>>;
 /** Fidel design-system SidebarItem: one row in a side navigation. */
 declare function SidebarItem<C extends ElementType = 'a'>({ as, icon, leading, active, iconOnly, className, children, ...rest }: SidebarItemProps<C>): react.JSX.Element;
 
@@ -1121,6 +1125,10 @@ declare const AppLayout: typeof AppLayoutRoot & {
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
     description?: ReactNode;
+    /** Beside the title block, e.g. a 40px logo mark. */
+    leading?: ReactNode;
+    /** A row of facts under the title, e.g. repo, branch and Tags. Wraps. */
+    meta?: ReactNode;
     /** Above the title, e.g. "Projects / Flow web app". */
     breadcrumb?: ReactNode;
     /** The page's one primary action, and any secondary ones. */
@@ -1129,7 +1137,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     children?: ReactNode;
 }
 /** Fidel design-system PageHeader: breadcrumb, title, description and actions at the top of a page. */
-declare function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, leading, meta, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
 
 interface ToastAction {
     label: string;
@@ -1307,4 +1315,254 @@ declare const PageSkeleton: typeof PageSkeletonRoot & {
     Split: typeof PageSkeletonSplit;
 };
 
-export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Checklist, type ChecklistItemProps, type ChecklistProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListLabel, type ListLabelProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, type Tone, Tooltip, type TooltipProps, type TooltipSide, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };
+type PreviewCardProps<T extends ElementType = 'div'> = {
+    /** Render as a link, e.g. react-router's `Link`. @default 'div' */
+    as?: T;
+    /** `add` is the dashed card that invites adding another one. @default 'default' */
+    variant?: 'default' | 'add';
+} & Omit<ComponentPropsWithoutRef<T>, 'as'>;
+declare function PreviewCardRoot<T extends ElementType = 'div'>({ as, variant, className, ...rest }: PreviewCardProps<T>): react.JSX.Element;
+interface PreviewCardPreviewProps extends HTMLAttributes<HTMLDivElement> {
+    /** A small chip in the top corner naming where the preview comes from. */
+    label?: ReactNode;
+}
+declare function PreviewCardPreview({ label, className, children, ...rest }: PreviewCardPreviewProps): react.JSX.Element;
+interface PreviewCardTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /** At the end of the title row, e.g. a Tag or "4 variants". */
+    aside?: ReactNode;
+}
+declare function PreviewCardTitle({ aside, className, children, ...rest }: PreviewCardTitleProps): react.JSX.Element;
+/**
+ * Fidel design-system PreviewCard: a picture of a thing over its name, facts
+ * and a footer. Compose `Preview`, `Body` (holding `Title` and `Meta`) and `Footer`.
+ */
+declare const PreviewCard: typeof PreviewCardRoot & {
+    Preview: typeof PreviewCardPreview;
+    Body: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Title: typeof PreviewCardTitle;
+    Meta: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Footer: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+};
+
+interface TileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Small heading in the top corner; pass a link to make it one. */
+    label: ReactNode;
+    /** Beside the label, e.g. a "Reading 3 of 5" Tag. */
+    aside?: ReactNode;
+}
+/** Fidel design-system Tile: a quiet labelled panel holding a sample, for a grid of overview tiles. */
+declare function Tile({ label, aside, className, children, ...rest }: TileProps): react.JSX.Element;
+
+interface ListCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    /** A number after the title. */
+    count?: number;
+    /** At the end of the header, e.g. "Step 2 of 4". */
+    aside?: ReactNode;
+    /** A quiet line under the rows. */
+    footer?: ReactNode;
+}
+declare function ListCardRoot({ title, count, aside, footer, className, children, ...rest }: ListCardProps): react.JSX.Element;
+interface ListCardRowProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    /** 16px icon before the text. */
+    icon?: ReactNode;
+    /** Colours the icon. @default 'neutral' */
+    tone?: Tone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end of the row, e.g. a Button, a count or a Tag. */
+    trailing?: ReactNode;
+    /** Dims the row, e.g. a step not reached yet. */
+    muted?: boolean;
+}
+declare function ListCardRow({ icon, tone, title, description, trailing, muted, className, ...rest }: ListCardRowProps): react.JSX.Element;
+/** Fidel design-system ListCard: a bordered card of rows, each with an icon, text and something at the end. */
+declare const ListCard: typeof ListCardRoot & {
+    Row: typeof ListCardRow;
+};
+
+interface DescriptionListItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface DescriptionListProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    /** At the end of the title row, e.g. a "Setup ›" link. */
+    action?: ReactNode;
+    items?: DescriptionListItem[];
+    /** A quiet note under the items. */
+    note?: ReactNode;
+}
+/** Fidel design-system DescriptionList: a titled group of label and value rows, for a side panel. */
+declare function DescriptionList({ title, action, items, note, className, children, ...rest }: DescriptionListProps): react.JSX.Element;
+
+interface ColorRampProps extends HTMLAttributes<HTMLDivElement> {
+    /** CSS colours, light to dark or in token order. Pass values you have already validated. */
+    colors: string[];
+    /** Height of the strip: 16, 32 or 64px. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Fidel design-system ColorRamp: a strip of colour blocks side by side, for a palette at a glance. */
+declare function ColorRamp({ colors, size, className, ...rest }: ColorRampProps): react.JSX.Element;
+
+interface SwatchListItem {
+    /** A CSS colour you have already validated, or null when it can't be shown. */
+    color: string | null;
+    name: ReactNode;
+    value: ReactNode;
+}
+interface SwatchListProps extends HTMLAttributes<HTMLUListElement> {
+    items: SwatchListItem[];
+}
+/** Fidel design-system SwatchList: compact rows of a colour dot, a token name and its value. */
+declare function SwatchList({ items, className, ...rest }: SwatchListProps): react.JSX.Element;
+
+interface TypeSpecimenWeight {
+    label: string;
+    weight: number;
+}
+interface TypeSpecimenProps extends HTMLAttributes<HTMLElement> {
+    /** Family name to show, e.g. "Rethink Sans". */
+    family: string;
+    /** The CSS font-family to draw the samples in. Pass a value you have already validated. */
+    fontFamily: string;
+    /** The variables that use this family, e.g. Tags for `--font-body`. */
+    tokens?: ReactNode;
+    /** A line set in the family. */
+    sample?: ReactNode;
+    weights?: TypeSpecimenWeight[];
+    /** A quiet note at the bottom, e.g. the fallback stack. */
+    footer?: ReactNode;
+}
+/** Fidel design-system TypeSpecimen: one typeface drawn large, with its alphabet and weights. */
+declare function TypeSpecimen({ family, fontFamily, tokens, sample, weights, footer, className, ...rest }: TypeSpecimenProps): react.JSX.Element;
+interface TypeSampleProps extends HTMLAttributes<HTMLDivElement> {
+    fontFamily: string;
+    /** Under the glyphs, e.g. "Body and display". */
+    caption?: ReactNode;
+}
+/** Fidel design-system TypeSample: a large "Aa" in one typeface with a caption, for overview tiles. */
+declare function TypeSample({ fontFamily, caption, className, ...rest }: TypeSampleProps): react.JSX.Element;
+
+declare function TypeScaleRoot({ className, ...rest }: HTMLAttributes<HTMLUListElement>): react.JSX.Element;
+interface TypeScaleRowProps extends HTMLAttributes<HTMLLIElement> {
+    /** The token, e.g. "text-4xl". Set in mono. */
+    name: ReactNode;
+    /** Under the name, e.g. "36px / 40px". */
+    detail?: ReactNode;
+    /** Size, line height, weight or family to draw the sample with. Pass values you have already validated. */
+    sampleStyle: CSSProperties;
+    /** @default 'Check every pull request' */
+    sample?: ReactNode;
+}
+declare function TypeScaleRow({ name, detail, sampleStyle, sample, className, ...rest }: TypeScaleRowProps): react.JSX.Element;
+/** Fidel design-system TypeScale: one row per text size, each drawn at its real size. */
+declare const TypeScale: typeof TypeScaleRoot & {
+    Row: typeof TypeScaleRow;
+};
+
+interface MeasureListItem {
+    name: ReactNode;
+    value: ReactNode;
+    /** The number the bar is drawn from, in any unit shared by every item. */
+    amount: number;
+}
+interface MeasureListProps extends HTMLAttributes<HTMLUListElement> {
+    items: MeasureListItem[];
+    /** The amount a full bar stands for. @default the largest amount */
+    max?: number;
+    /** @default 'accent' */
+    tone?: 'accent' | 'neutral';
+}
+/** Fidel design-system MeasureList: rows of a token name, its value and a bar to scale, e.g. spacing or durations. */
+declare function MeasureList({ items, max, tone, className, ...rest }: MeasureListProps): react.JSX.Element;
+
+interface TokenSampleProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the sample draws: a corner radius or a box shadow. */
+    kind: 'radius' | 'shadow';
+    /** The CSS value to draw. Pass a value you have already validated. */
+    value: string;
+    name: ReactNode;
+    /** Under the name, e.g. "8px" or the shadow as written. */
+    detail?: ReactNode;
+}
+/** Fidel design-system TokenSample: a square drawn with one radius or shadow token, over its name and value. */
+declare function TokenSample({ kind, value, name, detail, className, ...rest }: TokenSampleProps): react.JSX.Element;
+
+interface EasingCurveProps extends HTMLAttributes<HTMLDivElement> {
+    /** `cubic-bezier(x1, y1, x2, y2)`. Anything else draws a straight line. */
+    value: string;
+    name: ReactNode;
+}
+/** Fidel design-system EasingCurve: an easing token drawn as its curve, over its name and value. */
+declare function EasingCurve({ value, name, className, ...rest }: EasingCurveProps): react.JSX.Element;
+
+interface FilterChipOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    /** Shown after the label, e.g. how many items match. */
+    count?: number;
+}
+interface FilterChipsProps<T extends string> {
+    options: FilterChipOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the group for screen readers. */
+    'aria-label': string;
+    className?: string;
+}
+/**
+ * Fidel design-system FilterChips: a row of pill filters, one selected, each
+ * with a count. A radio group: Arrow keys move and select; Tab leaves it.
+ */
+declare function FilterChips<T extends string>({ options, value, onChange, 'aria-label': ariaLabel, className }: FilterChipsProps<T>): react.JSX.Element;
+
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max: number;
+    /** Beside the bar, e.g. "1 of 3 brands on Pro". Also names the meter for screen readers when it is a string. */
+    label: ReactNode;
+}
+/** Fidel design-system Meter: a thin bar showing how much of an allowance is used. */
+declare function Meter({ value, max, label, className, ...rest }: MeterProps): react.JSX.Element;
+
+interface ConnectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** 20px mark of the service, shown in a 36px tile. */
+    icon: ReactNode;
+    /** `dark` fills the tile, e.g. for a terminal mark. @default 'light' */
+    iconTone?: 'light' | 'dark';
+    title: ReactNode;
+    /** Under the title, e.g. "Shared with Flow" or "Only you". */
+    subtitle?: ReactNode;
+    /** Pinned to the bottom, e.g. Connect or Disconnect. */
+    footer?: ReactNode;
+}
+/** Fidel design-system ConnectionCard: one connected service, its state and the action that changes it. */
+declare function ConnectionCard({ icon, iconTone, title, subtitle, footer, className, children, ...rest }: ConnectionCardProps): react.JSX.Element;
+
+interface OwnProps<T extends ElementType> {
+    /** Render as a link, e.g. react-router's `Link`. @default 'button' */
+    as?: T;
+    /** Before the text, e.g. an avatar. */
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end. @default a chevron */
+    trailing?: ReactNode;
+}
+type ListRowProps<T extends ElementType = 'button'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T> | 'title'>;
+/** Fidel design-system ListRow: a quiet clickable row that opens something, with a leading mark and a chevron. */
+declare function ListRow<T extends ElementType = 'button'>({ as, leading, title, description, trailing, className, ...rest }: ListRowProps<T>): react.JSX.Element;
+
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The text to show and copy. */
+    code: string;
+    /** Names the copy button. @default 'Copy' */
+    copyLabel?: string;
+    /** `inline` is one dark line for a command; `block` keeps line breaks for a file. @default 'inline' */
+    variant?: 'inline' | 'block';
+}
+/** Fidel design-system CodeBlock: a command or file in mono with a copy button. */
+declare function CodeBlock({ code, copyLabel, variant, className, ...rest }: CodeBlockProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Checklist, type ChecklistItemProps, type ChecklistProps, CodeBlock, type CodeBlockProps, ColorRamp, type ColorRampProps, ConnectionCard, type ConnectionCardProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, ListRow, type ListRowProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef, CSSProperties } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -607,12 +607,16 @@ interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     children?: ReactNode;
     /** Trailing action(s), e.g. a ButtonLink. Moves under the text on phones. */
     action?: ReactNode;
+    /** Shows a close button at the end; `dismissLabel` names it. */
+    onDismiss?: () => void;
+    /** @default 'Dismiss' */
+    dismissLabel?: string;
 }
 /**
  * Fidel design-system Callout: a tinted row that tells the reader something
  * about the page they are on and, optionally, what to do about it.
  */
-declare function Callout({ tone, icon, title, titleAside, children, action, className, ...rest }: CalloutProps): react.JSX.Element;
+declare function Callout({ tone, icon, title, titleAside, children, action, onDismiss, dismissLabel, className, ...rest }: CalloutProps): react.JSX.Element;
 
 type SkeletonShape = 'rect' | 'text' | 'circle';
 interface SkeletonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -994,7 +998,7 @@ interface BrandButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 /** Fidel design-system BrandButton: the product mark that turns into an action icon on hover or focus. */
 declare function BrandButton({ mark, hoverIcon, type, className, ...rest }: BrandButtonProps): react.JSX.Element;
 
-type OwnProps<C extends ElementType> = {
+type OwnProps$1<C extends ElementType> = {
     /** Element or component to render, e.g. a router Link. @default 'a' */
     as?: C;
     /** 16px icon before the label. */
@@ -1007,7 +1011,7 @@ type OwnProps<C extends ElementType> = {
     iconOnly?: boolean;
     children: ReactNode;
 };
-type SidebarItemProps<C extends ElementType = 'a'> = OwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps<C>>;
+type SidebarItemProps<C extends ElementType = 'a'> = OwnProps$1<C> & Omit<ComponentPropsWithoutRef<C>, keyof OwnProps$1<C>>;
 /** Fidel design-system SidebarItem: one row in a side navigation. */
 declare function SidebarItem<C extends ElementType = 'a'>({ as, icon, leading, active, iconOnly, className, children, ...rest }: SidebarItemProps<C>): react.JSX.Element;
 
@@ -1121,6 +1125,10 @@ declare const AppLayout: typeof AppLayoutRoot & {
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
     description?: ReactNode;
+    /** Beside the title block, e.g. a 40px logo mark. */
+    leading?: ReactNode;
+    /** A row of facts under the title, e.g. repo, branch and Tags. Wraps. */
+    meta?: ReactNode;
     /** Above the title, e.g. "Projects / Flow web app". */
     breadcrumb?: ReactNode;
     /** The page's one primary action, and any secondary ones. */
@@ -1129,7 +1137,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     children?: ReactNode;
 }
 /** Fidel design-system PageHeader: breadcrumb, title, description and actions at the top of a page. */
-declare function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, leading, meta, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
 
 interface ToastAction {
     label: string;
@@ -1307,4 +1315,254 @@ declare const PageSkeleton: typeof PageSkeletonRoot & {
     Split: typeof PageSkeletonSplit;
 };
 
-export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Checklist, type ChecklistItemProps, type ChecklistProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListLabel, type ListLabelProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, type Tone, Tooltip, type TooltipProps, type TooltipSide, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };
+type PreviewCardProps<T extends ElementType = 'div'> = {
+    /** Render as a link, e.g. react-router's `Link`. @default 'div' */
+    as?: T;
+    /** `add` is the dashed card that invites adding another one. @default 'default' */
+    variant?: 'default' | 'add';
+} & Omit<ComponentPropsWithoutRef<T>, 'as'>;
+declare function PreviewCardRoot<T extends ElementType = 'div'>({ as, variant, className, ...rest }: PreviewCardProps<T>): react.JSX.Element;
+interface PreviewCardPreviewProps extends HTMLAttributes<HTMLDivElement> {
+    /** A small chip in the top corner naming where the preview comes from. */
+    label?: ReactNode;
+}
+declare function PreviewCardPreview({ label, className, children, ...rest }: PreviewCardPreviewProps): react.JSX.Element;
+interface PreviewCardTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /** At the end of the title row, e.g. a Tag or "4 variants". */
+    aside?: ReactNode;
+}
+declare function PreviewCardTitle({ aside, className, children, ...rest }: PreviewCardTitleProps): react.JSX.Element;
+/**
+ * Fidel design-system PreviewCard: a picture of a thing over its name, facts
+ * and a footer. Compose `Preview`, `Body` (holding `Title` and `Meta`) and `Footer`.
+ */
+declare const PreviewCard: typeof PreviewCardRoot & {
+    Preview: typeof PreviewCardPreview;
+    Body: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Title: typeof PreviewCardTitle;
+    Meta: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Footer: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+};
+
+interface TileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Small heading in the top corner; pass a link to make it one. */
+    label: ReactNode;
+    /** Beside the label, e.g. a "Reading 3 of 5" Tag. */
+    aside?: ReactNode;
+}
+/** Fidel design-system Tile: a quiet labelled panel holding a sample, for a grid of overview tiles. */
+declare function Tile({ label, aside, className, children, ...rest }: TileProps): react.JSX.Element;
+
+interface ListCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    /** A number after the title. */
+    count?: number;
+    /** At the end of the header, e.g. "Step 2 of 4". */
+    aside?: ReactNode;
+    /** A quiet line under the rows. */
+    footer?: ReactNode;
+}
+declare function ListCardRoot({ title, count, aside, footer, className, children, ...rest }: ListCardProps): react.JSX.Element;
+interface ListCardRowProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    /** 16px icon before the text. */
+    icon?: ReactNode;
+    /** Colours the icon. @default 'neutral' */
+    tone?: Tone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end of the row, e.g. a Button, a count or a Tag. */
+    trailing?: ReactNode;
+    /** Dims the row, e.g. a step not reached yet. */
+    muted?: boolean;
+}
+declare function ListCardRow({ icon, tone, title, description, trailing, muted, className, ...rest }: ListCardRowProps): react.JSX.Element;
+/** Fidel design-system ListCard: a bordered card of rows, each with an icon, text and something at the end. */
+declare const ListCard: typeof ListCardRoot & {
+    Row: typeof ListCardRow;
+};
+
+interface DescriptionListItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface DescriptionListProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    /** At the end of the title row, e.g. a "Setup ›" link. */
+    action?: ReactNode;
+    items?: DescriptionListItem[];
+    /** A quiet note under the items. */
+    note?: ReactNode;
+}
+/** Fidel design-system DescriptionList: a titled group of label and value rows, for a side panel. */
+declare function DescriptionList({ title, action, items, note, className, children, ...rest }: DescriptionListProps): react.JSX.Element;
+
+interface ColorRampProps extends HTMLAttributes<HTMLDivElement> {
+    /** CSS colours, light to dark or in token order. Pass values you have already validated. */
+    colors: string[];
+    /** Height of the strip: 16, 32 or 64px. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Fidel design-system ColorRamp: a strip of colour blocks side by side, for a palette at a glance. */
+declare function ColorRamp({ colors, size, className, ...rest }: ColorRampProps): react.JSX.Element;
+
+interface SwatchListItem {
+    /** A CSS colour you have already validated, or null when it can't be shown. */
+    color: string | null;
+    name: ReactNode;
+    value: ReactNode;
+}
+interface SwatchListProps extends HTMLAttributes<HTMLUListElement> {
+    items: SwatchListItem[];
+}
+/** Fidel design-system SwatchList: compact rows of a colour dot, a token name and its value. */
+declare function SwatchList({ items, className, ...rest }: SwatchListProps): react.JSX.Element;
+
+interface TypeSpecimenWeight {
+    label: string;
+    weight: number;
+}
+interface TypeSpecimenProps extends HTMLAttributes<HTMLElement> {
+    /** Family name to show, e.g. "Rethink Sans". */
+    family: string;
+    /** The CSS font-family to draw the samples in. Pass a value you have already validated. */
+    fontFamily: string;
+    /** The variables that use this family, e.g. Tags for `--font-body`. */
+    tokens?: ReactNode;
+    /** A line set in the family. */
+    sample?: ReactNode;
+    weights?: TypeSpecimenWeight[];
+    /** A quiet note at the bottom, e.g. the fallback stack. */
+    footer?: ReactNode;
+}
+/** Fidel design-system TypeSpecimen: one typeface drawn large, with its alphabet and weights. */
+declare function TypeSpecimen({ family, fontFamily, tokens, sample, weights, footer, className, ...rest }: TypeSpecimenProps): react.JSX.Element;
+interface TypeSampleProps extends HTMLAttributes<HTMLDivElement> {
+    fontFamily: string;
+    /** Under the glyphs, e.g. "Body and display". */
+    caption?: ReactNode;
+}
+/** Fidel design-system TypeSample: a large "Aa" in one typeface with a caption, for overview tiles. */
+declare function TypeSample({ fontFamily, caption, className, ...rest }: TypeSampleProps): react.JSX.Element;
+
+declare function TypeScaleRoot({ className, ...rest }: HTMLAttributes<HTMLUListElement>): react.JSX.Element;
+interface TypeScaleRowProps extends HTMLAttributes<HTMLLIElement> {
+    /** The token, e.g. "text-4xl". Set in mono. */
+    name: ReactNode;
+    /** Under the name, e.g. "36px / 40px". */
+    detail?: ReactNode;
+    /** Size, line height, weight or family to draw the sample with. Pass values you have already validated. */
+    sampleStyle: CSSProperties;
+    /** @default 'Check every pull request' */
+    sample?: ReactNode;
+}
+declare function TypeScaleRow({ name, detail, sampleStyle, sample, className, ...rest }: TypeScaleRowProps): react.JSX.Element;
+/** Fidel design-system TypeScale: one row per text size, each drawn at its real size. */
+declare const TypeScale: typeof TypeScaleRoot & {
+    Row: typeof TypeScaleRow;
+};
+
+interface MeasureListItem {
+    name: ReactNode;
+    value: ReactNode;
+    /** The number the bar is drawn from, in any unit shared by every item. */
+    amount: number;
+}
+interface MeasureListProps extends HTMLAttributes<HTMLUListElement> {
+    items: MeasureListItem[];
+    /** The amount a full bar stands for. @default the largest amount */
+    max?: number;
+    /** @default 'accent' */
+    tone?: 'accent' | 'neutral';
+}
+/** Fidel design-system MeasureList: rows of a token name, its value and a bar to scale, e.g. spacing or durations. */
+declare function MeasureList({ items, max, tone, className, ...rest }: MeasureListProps): react.JSX.Element;
+
+interface TokenSampleProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the sample draws: a corner radius or a box shadow. */
+    kind: 'radius' | 'shadow';
+    /** The CSS value to draw. Pass a value you have already validated. */
+    value: string;
+    name: ReactNode;
+    /** Under the name, e.g. "8px" or the shadow as written. */
+    detail?: ReactNode;
+}
+/** Fidel design-system TokenSample: a square drawn with one radius or shadow token, over its name and value. */
+declare function TokenSample({ kind, value, name, detail, className, ...rest }: TokenSampleProps): react.JSX.Element;
+
+interface EasingCurveProps extends HTMLAttributes<HTMLDivElement> {
+    /** `cubic-bezier(x1, y1, x2, y2)`. Anything else draws a straight line. */
+    value: string;
+    name: ReactNode;
+}
+/** Fidel design-system EasingCurve: an easing token drawn as its curve, over its name and value. */
+declare function EasingCurve({ value, name, className, ...rest }: EasingCurveProps): react.JSX.Element;
+
+interface FilterChipOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    /** Shown after the label, e.g. how many items match. */
+    count?: number;
+}
+interface FilterChipsProps<T extends string> {
+    options: FilterChipOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the group for screen readers. */
+    'aria-label': string;
+    className?: string;
+}
+/**
+ * Fidel design-system FilterChips: a row of pill filters, one selected, each
+ * with a count. A radio group: Arrow keys move and select; Tab leaves it.
+ */
+declare function FilterChips<T extends string>({ options, value, onChange, 'aria-label': ariaLabel, className }: FilterChipsProps<T>): react.JSX.Element;
+
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max: number;
+    /** Beside the bar, e.g. "1 of 3 brands on Pro". Also names the meter for screen readers when it is a string. */
+    label: ReactNode;
+}
+/** Fidel design-system Meter: a thin bar showing how much of an allowance is used. */
+declare function Meter({ value, max, label, className, ...rest }: MeterProps): react.JSX.Element;
+
+interface ConnectionCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** 20px mark of the service, shown in a 36px tile. */
+    icon: ReactNode;
+    /** `dark` fills the tile, e.g. for a terminal mark. @default 'light' */
+    iconTone?: 'light' | 'dark';
+    title: ReactNode;
+    /** Under the title, e.g. "Shared with Flow" or "Only you". */
+    subtitle?: ReactNode;
+    /** Pinned to the bottom, e.g. Connect or Disconnect. */
+    footer?: ReactNode;
+}
+/** Fidel design-system ConnectionCard: one connected service, its state and the action that changes it. */
+declare function ConnectionCard({ icon, iconTone, title, subtitle, footer, className, children, ...rest }: ConnectionCardProps): react.JSX.Element;
+
+interface OwnProps<T extends ElementType> {
+    /** Render as a link, e.g. react-router's `Link`. @default 'button' */
+    as?: T;
+    /** Before the text, e.g. an avatar. */
+    leading?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end. @default a chevron */
+    trailing?: ReactNode;
+}
+type ListRowProps<T extends ElementType = 'button'> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps<T> | 'title'>;
+/** Fidel design-system ListRow: a quiet clickable row that opens something, with a leading mark and a chevron. */
+declare function ListRow<T extends ElementType = 'button'>({ as, leading, title, description, trailing, className, ...rest }: ListRowProps<T>): react.JSX.Element;
+
+interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The text to show and copy. */
+    code: string;
+    /** Names the copy button. @default 'Copy' */
+    copyLabel?: string;
+    /** `inline` is one dark line for a command; `block` keeps line breaks for a file. @default 'inline' */
+    variant?: 'inline' | 'block';
+}
+/** Fidel design-system CodeBlock: a command or file in mono with a copy button. */
+declare function CodeBlock({ code, copyLabel, variant, className, ...rest }: CodeBlockProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Checklist, type ChecklistItemProps, type ChecklistProps, CodeBlock, type CodeBlockProps, ColorRamp, type ColorRampProps, ConnectionCard, type ConnectionCardProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, ListRow, type ListRowProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };