@amsterdam/design-system-react 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -1,18 +1,43 @@
 import * as react from 'react';
-import { OptgroupHTMLAttributes, OptionHTMLAttributes, PropsWithChildren, SelectHTMLAttributes, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+type ErrorMessageProps = {
+    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
+    prefix?: string;
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+declare const ErrorMessage: react.ForwardRefExoticComponent<{
+    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
+    prefix?: string | undefined;
+} & HTMLAttributes<HTMLParagraphElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLParagraphElement>>;
+
+type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type FieldProps = {
+    /** Whether the field has an input with a validation error */
+    invalid?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Field: react.ForwardRefExoticComponent<{
+    /** Whether the field has an input with a validation error */
+    invalid?: boolean | undefined;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
 
 type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
 
 type SelectProps = {
-    /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
+    /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<SelectHTMLAttributes<HTMLSelectElement>>;
+} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
 declare const Select: react.ForwardRefExoticComponent<{
-    /** There is no native invalid attribute for select, but you can use this to get the same result as other form components */
+    /** Whether the value fails a validation rule. */
     invalid?: boolean | undefined;
-} & SelectHTMLAttributes<HTMLSelectElement> & {
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLSelectElement>> & {
     Option: react.ForwardRefExoticComponent<SelectOptionProps & {
@@ -23,38 +48,62 @@ declare const Select: react.ForwardRefExoticComponent<{
     } & react.RefAttributes<HTMLOptGroupElement>>;
 };
 
-type TimeInputProps = InputHTMLAttributes<HTMLInputElement>;
-declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
+type TimeInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+declare const TimeInput: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-type DateInputProps = InputHTMLAttributes<HTMLInputElement>;
-declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
+type DateInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+declare const DateInput: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const avatarColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "red", "yellow"];
 type AvatarColor = (typeof avatarColors)[number];
 type AvatarProps = {
+    /** The background colour. */
     color?: AvatarColor;
+    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
     imageSrc?: string;
+    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
 } & HTMLAttributes<HTMLSpanElement>;
 declare const Avatar: react.ForwardRefExoticComponent<{
+    /** The background colour. */
     color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "red" | "yellow" | undefined;
+    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
     imageSrc?: string | undefined;
+    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
 } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
 
 type FormFieldCharacterCounterProps = HTMLAttributes<HTMLDivElement> & {
+    /** The current length of the field’s value. */
     length: number;
+    /** The maximum length of the field’s value. */
     maxLength: number;
 };
 declare const FormFieldCharacterCounter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The current length of the field’s value. */
     length: number;
+    /** The maximum length of the field’s value. */
     maxLength: number;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type DescriptionListProps = {
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
 declare const DescriptionList: react.ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean | undefined;
 } & HTMLAttributes<HTMLDListElement> & {
     children?: react.ReactNode;
@@ -75,26 +124,28 @@ declare const rowGapSizes: Array<string>;
 type RowTag = 'article' | 'div' | 'section';
 type RowGap = (typeof rowGapSizes)[number];
 type RowProps = {
-    /** The element to render the row with. */
+    /** The HTML element to use. */
     as?: RowTag;
-    /** The amount of vertical space between the row’s children. */
+    /** The amount of vertical space between items. */
     gap?: RowGap;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Row: react.ForwardRefExoticComponent<{
-    /** The element to render the row with. */
+    /** The HTML element to use. */
     as?: RowTag | undefined;
-    /** The amount of vertical space between the row’s children. */
+    /** The amount of vertical space between items. */
     gap?: string | undefined;
 } & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<unknown>>;
 
 type RadioProps = {
+    /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
 declare const Radio: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
     invalid?: boolean | undefined;
-} & InputHTMLAttributes<HTMLInputElement> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLInputElement>>;
 
@@ -118,46 +169,60 @@ declare const Tabs: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElemen
 };
 
 type TabsPanelProps = {
+    /** The identifier of the corresponding Tab. */
     tab: number;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsButtonProps = {
+    /** An identifier. */
     tab: number;
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 
-type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type TextAreaProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+    /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: 'none' | 'horizontal' | 'vertical';
-};
-declare const TextArea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
+declare const TextArea: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean | undefined;
+    /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: "none" | "horizontal" | "vertical" | undefined;
-} & react.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 declare const columnGapSizes: Array<string>;
 type ColumnTag = 'article' | 'div' | 'section';
 type ColumnGap = (typeof columnGapSizes)[number];
 type ColumnProps = {
-    /** The element to render the column with. */
+    /** The HTML element to use. */
     as?: ColumnTag;
-    /** The amount of vertical space between the column’s children. */
+    /** The amount of vertical space between items. */
     gap?: ColumnGap;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Column: react.ForwardRefExoticComponent<{
-    /** The element to render the column with. */
+    /** The HTML element to use. */
     as?: ColumnTag | undefined;
-    /** The amount of vertical space between the column’s children. */
+    /** The amount of vertical space between items. */
     gap?: string | undefined;
 } & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<unknown>>;
 
-type FieldsetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
+type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
+    /** Whether the field set has an input with a validation error */
+    invalid?: boolean;
+    /** The text for the caption. */
     legend: string;
 };
-declare const Fieldset: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
+declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
     children?: react.ReactNode;
 } & {
+    /** Whether the field set has an input with a validation error */
+    invalid?: boolean | undefined;
+    /** The text for the caption. */
     legend: string;
 } & react.RefAttributes<HTMLFieldSetElement>>;
 
@@ -166,7 +231,6 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
-        href: string;
         icon?: Function | undefined;
         onBackground?: ("default" | "light" | "dark") | undefined;
         size?: "small" | "large" | undefined;
@@ -177,30 +241,26 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
 
 type BackgroundName = 'default' | 'light' | 'dark';
 type LinkListLinkProps = {
-    /** The target url for the link. */
-    href: string;
-    /**
-     * An icon to display instead of the default chevron.
-     * Don’t mix custom icons with chevrons in one list.
-     */
+    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
     icon?: Function;
-    /** Whether the link sits on a dark background. */
+    /** Describes the underlying background colour. Allows the text to provide visual contrast. */
     onBackground?: BackgroundName;
-    /**
-     * The text size for the link.
-     * Use the same size for all items in the list.
-     */
+    /** The size of the text. Use the same size for all items in the list. */
     size?: 'small' | 'large';
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
-declare const badgeColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
+declare const badgeColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
 type BadgeColor = (typeof badgeColors)[number];
 type BadgeProps = {
+    /** The background colour. */
     color?: BadgeColor;
+    /** The text content. */
     label: string | number;
 } & HTMLAttributes<HTMLElement>;
 declare const Badge: react.ForwardRefExoticComponent<{
-    color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
+    /** The background colour. */
+    color?: "black" | "blue" | "dark-green" | "green" | "grey-1" | "grey-2" | "grey-3" | "light-blue" | "magenta" | "orange" | "purple" | "red" | "white" | "yellow" | undefined;
+    /** The text content. */
     label: string | number;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
@@ -243,15 +303,23 @@ declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
 type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type IconButtonProps = {
+    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
+    /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
     onBackground?: 'light' | 'dark';
+    /** The size of the icon. Corresponds with the text levels. */
     size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
+    /** The component rendering the icon’s markup. */
     svg?: Function;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 declare const IconButton: react.ForwardRefExoticComponent<{
+    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
+    /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
     onBackground?: "light" | "dark" | undefined;
+    /** The size of the icon. Corresponds with the text levels. */
     size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
+    /** The component rendering the icon’s markup. */
     svg?: Function | undefined;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
@@ -272,24 +340,37 @@ declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEle
 
 type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
 type LogoProps = {
+    /** The name of the brand for which to display the logo. */
     brand?: LogoBrand;
 } & SVGProps<SVGSVGElement>;
 declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
 
 type HeaderProps = {
+    /** The name of the brand for which to display the logo. */
     logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
     logoLink?: string;
+    /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
+    /** The name of the application. */
     title?: string;
+    /** The list of menu links. Use a Page Menu here. */
     links?: ReactNode;
+    /** A button to toggle the visibility of a Mega Menu. */
     menu?: ReactNode;
 } & HTMLAttributes<HTMLElement>;
 declare const Header: react.ForwardRefExoticComponent<{
+    /** The name of the brand for which to display the logo. */
     logoBrand?: LogoBrand | undefined;
+    /** The url for the link on the logo. */
     logoLink?: string | undefined;
+    /** The accessible text for the link on the logo. */
     logoLinkTitle?: string | undefined;
+    /** The name of the application. */
     title?: string | undefined;
+    /** The list of menu links. Use a Page Menu here. */
     links?: ReactNode;
+    /** A button to toggle the visibility of a Mega Menu. */
     menu?: ReactNode;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
@@ -298,69 +379,86 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLElement>>;
 
-type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
-declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+type TextInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
+declare const TextInput: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean | undefined;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
 
 type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
 declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLFormElement>> & {
-    Button: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+    Button: react.ForwardRefExoticComponent<{
+        label?: string | undefined;
+    } & HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
     Input: react.ForwardRefExoticComponent<{
+        invalid?: boolean | undefined;
         label?: string | undefined;
     } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
 };
 
 type DialogProps = {
+    /** The button(s) in the footer. Start with a primary button. */
     actions?: ReactNode;
+    /** The label for the button that dismisses the Dialog. */
+    closeButtonLabel?: string;
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
 declare const Dialog: react.ForwardRefExoticComponent<{
+    /** The button(s) in the footer. Start with a primary button. */
     actions?: ReactNode;
+    /** The label for the button that dismisses the Dialog. */
+    closeButtonLabel?: string | undefined;
 } & DialogHTMLAttributes<HTMLDialogElement> & {
     children?: ReactNode;
 } & react.RefAttributes<HTMLDialogElement>>;
 
 type ImageProps = {
+    /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
     cover?: boolean;
 } & ImgHTMLAttributes<HTMLImageElement>;
 declare const Image: react.ForwardRefExoticComponent<{
+    /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
     cover?: boolean | undefined;
 } & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
 
 type PaginationProps = {
-    /**
-     * The maximum amount of pages shown. This has a lower limit of 5
-     */
+    /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
-    /**
-     * Callback triggered when interaction changes the page number.
-     */
+    /** The accessible name for the link to the next page. */
+    nextAriaLabel?: string;
+    /** The label for the link to the next page. */
+    nextLabel?: string;
+    /** A function to run when the page number changes. */
     onPageChange?: (page: number) => void;
-    /**
-     * The current page number.
-     */
+    /** The current page number. */
     page?: number;
-    /**
-     * The total amount of pages.
-     */
+    /** The accessible name for the link to the previous page. */
+    previousAriaLabel?: string;
+    /** The label for the link to the previous page. */
+    previousLabel?: string;
+    /** The total amount of pages. */
     totalPages: number;
 } & HTMLAttributes<HTMLElement>;
 declare const Pagination: react.ForwardRefExoticComponent<{
-    /**
-     * The maximum amount of pages shown. This has a lower limit of 5
-     */
+    /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number | undefined;
-    /**
-     * Callback triggered when interaction changes the page number.
-     */
+    /** The accessible name for the link to the next page. */
+    nextAriaLabel?: string | undefined;
+    /** The label for the link to the next page. */
+    nextLabel?: string | undefined;
+    /** A function to run when the page number changes. */
     onPageChange?: ((page: number) => void) | undefined;
-    /**
-     * The current page number.
-     */
+    /** The current page number. */
     page?: number | undefined;
-    /**
-     * The total amount of pages.
-     */
+    /** The accessible name for the link to the previous page. */
+    previousAriaLabel?: string | undefined;
+    /** The label for the link to the previous page. */
+    previousLabel?: string | undefined;
+    /** The total amount of pages. */
     totalPages: number;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
@@ -388,11 +486,15 @@ declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLIn
 declare const spotlightColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
 type SpotlightColor = (typeof spotlightColors)[number];
 type SpotlightProps = {
+    /** The HTML element to use. */
     as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    /** The background colour. */
     color?: SpotlightColor;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Spotlight: react.ForwardRefExoticComponent<{
+    /** The HTML element to use. */
     as?: "article" | "aside" | "div" | "footer" | "section" | undefined;
+    /** The background colour. */
     color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
 } & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
@@ -413,6 +515,7 @@ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
 };
 
 type CardHeadingGroupProps = {
+    /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
     tagline: string;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
@@ -421,68 +524,50 @@ type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 type HeadingLevel = 1 | 2 | 3 | 4;
 type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
 type HeadingProps = {
-    /**
-     * Het hiërarchische niveau van de titel.
-     */
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
+    /** The hierarchical level within the document. */
     level?: HeadingLevel;
-    /**
-     * De visuele grootte van de titel.
-     * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
-     */
+    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
     size?: HeadingSize;
-    /**
-     * De kleur van de titel
-     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
-     */
-    inverseColor?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 declare const Heading: react.ForwardRefExoticComponent<{
-    /**
-     * Het hiërarchische niveau van de titel.
-     */
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean | undefined;
+    /** The hierarchical level within the document. */
     level?: HeadingLevel | undefined;
-    /**
-     * De visuele grootte van de titel.
-     * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
-     */
+    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
     size?: HeadingSize | undefined;
-    /**
-     * De kleur van de titel
-     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
-     */
-    inverseColor?: boolean | undefined;
 } & HTMLAttributes<HTMLHeadingElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
 type AlertProps = {
-    /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
+    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
     closeable?: boolean;
-    /**
-     * The hierarchical level of the alert title within the document.
-     * @default 2
-     */
+    /** The label for the button that dismisses the Alert. */
+    closeButtonLabel?: string;
+    /** The hierarchical level of the Alert’s heading within the document. */
     headingLevel?: HeadingProps['level'];
-    /** Allows a callback when dismissing the alert. */
+    /** A function to run when dismissing. */
     onClose?: () => void;
-    /** Highlights the meaning or tone of the message. */
+    /** The significance of the message conveyed. */
     severity?: 'error' | 'info' | 'success' | 'warning';
-    /** The title for the alert. */
+    /** The text for the Heading. */
     title?: string;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Alert: react.ForwardRefExoticComponent<{
-    /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
+    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
     closeable?: boolean | undefined;
-    /**
-     * The hierarchical level of the alert title within the document.
-     * @default 2
-     */
+    /** The label for the button that dismisses the Alert. */
+    closeButtonLabel?: string | undefined;
+    /** The hierarchical level of the Alert’s heading within the document. */
     headingLevel?: HeadingProps['level'];
-    /** Allows a callback when dismissing the alert. */
+    /** A function to run when dismissing. */
     onClose?: (() => void) | undefined;
-    /** Highlights the meaning or tone of the message. */
+    /** The significance of the message conveyed. */
     severity?: "error" | "info" | "success" | "warning" | undefined;
-    /** The title for the alert. */
+    /** The text for the Heading. */
     title?: string | undefined;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode;
@@ -490,9 +575,11 @@ declare const Alert: react.ForwardRefExoticComponent<{
 
 type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
 type AspectRatioProps = {
+    /** The dimensions. */
     ratio?: Ratio;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const AspectRatio: react.ForwardRefExoticComponent<{
+    /** The dimensions. */
     ratio?: Ratio | undefined;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode;
@@ -519,25 +606,15 @@ type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type PageMenuProps = {
-    /**
-     * Whether the page menu’s items align to its end.
-     * If the menu itself aligns to the end of its container, you should set this to `true`.
-     */
+    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
     alignEnd?: boolean;
-    /**
-     * Whether menu items should wrap if they don’t fit on a single row.
-     */
+    /** Whether menu items should wrap if they don’t fit on a single row. */
     wrap?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const PageMenu: react.ForwardRefExoticComponent<{
-    /**
-     * Whether the page menu’s items align to its end.
-     * If the menu itself aligns to the end of its container, you should set this to `true`.
-     */
+    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
     alignEnd?: boolean | undefined;
-    /**
-     * Whether menu items should wrap if they don’t fit on a single row.
-     */
+    /** Whether menu items should wrap if they don’t fit on a single row. */
     wrap?: boolean | undefined;
 } & HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode;
@@ -554,62 +631,64 @@ type PageMenuLinkProps = {
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
 declare const TopTaskLink: react.ForwardRefExoticComponent<{
+    /** The title. */
     label: string;
+    /** The text content. */
     description: string;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
 
 type BlockquoteProps = {
-    /**
-     * De kleur van het citaat.
-     * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
-     */
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
 } & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
 declare const Blockquote: react.ForwardRefExoticComponent<{
-    /**
-     * De kleur van het citaat.
-     * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
-     */
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean | undefined;
 } & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLQuoteElement>>;
 
 type CheckboxProps = {
+    /** Whether the value fails a validation rule. */
     invalid?: boolean;
+    /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
-} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
 declare const Checkbox: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
     invalid?: boolean | undefined;
+    /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean | undefined;
-} & InputHTMLAttributes<HTMLInputElement> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type PageHeadingProps = {
-    /**
-     * De kleur van de titel
-     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
-     */
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 declare const PageHeading: react.ForwardRefExoticComponent<{
-    /**
-     * De kleur van de titel
-     * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
-     */
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean | undefined;
 } & HTMLAttributes<HTMLHeadingElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
 type OrderedListProps = {
-    markers?: boolean;
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: 'small';
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
 declare const OrderedList: react.ForwardRefExoticComponent<{
-    markers?: boolean | undefined;
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean | undefined;
+    /** Whether the list items show a marker. */
+    markers?: boolean | undefined;
+    /** The size of the text. */
+    size?: "small" | undefined;
 } & OlHTMLAttributes<HTMLOListElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLOListElement>> & {
@@ -620,56 +699,52 @@ declare const OrderedList: react.ForwardRefExoticComponent<{
 
 type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
+type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+
 type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLElement>> & {
-    Item: react.ForwardRefExoticComponent<{
-        href: string;
-    } & HTMLAttributes<HTMLLIElement> & {
-        children?: react.ReactNode;
-    } & react.RefAttributes<HTMLLIElement>>;
+    Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type BreadcrumbItemProps = {
-    href: string;
-} & PropsWithChildren<HTMLAttributes<HTMLLIElement>>;
-
 type LinkOnBackground = 'default' | 'light' | 'dark';
 type LinkVariant = 'standalone' | 'inline';
 type LinkProps = {
-    variant?: LinkVariant;
+    /** Describes the underlying background colour. Allows the text to provide visual contrast. */
     onBackground?: LinkOnBackground;
+    /** Whether the link is inline or stands alone. */
+    variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 declare const Link: react.ForwardRefExoticComponent<{
-    variant?: LinkVariant | undefined;
+    /** Describes the underlying background colour. Allows the text to provide visual contrast. */
     onBackground?: LinkOnBackground | undefined;
+    /** Whether the link is inline or stands alone. */
+    variant?: LinkVariant | undefined;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
 type ButtonProps = {
+    /** The level of prominence. Use a primary button only once per page or section. */
     variant?: 'primary' | 'secondary' | 'tertiary';
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 declare const Button: react.ForwardRefExoticComponent<{
+    /** The level of prominence. Use a primary button only once per page or section. */
     variant?: "primary" | "secondary" | "tertiary" | undefined;
 } & ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLButtonElement>>;
 
 type ParagraphProps = {
-    size?: 'small' | 'large';
-    /**
-     * De kleur van de paragraaf
-     * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
-     */
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
+    /** The size of the text. */
+    size?: 'small' | 'large';
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
 declare const Paragraph: react.ForwardRefExoticComponent<{
-    size?: "small" | "large" | undefined;
-    /**
-     * De kleur van de paragraaf
-     * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
-     */
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean | undefined;
+    /** The size of the text. */
+    size?: "small" | "large" | undefined;
 } & HTMLAttributes<HTMLParagraphElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLParagraphElement>>;
@@ -679,12 +754,20 @@ declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLab
 } & react.RefAttributes<HTMLLabelElement>>;
 
 type UnorderedListProps = {
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
+    /** Whether the list items show a marker. */
     markers?: boolean;
+    /** The size of the text. */
+    size?: 'small';
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const UnorderedList: react.ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean | undefined;
+    /** Whether the list items show a marker. */
     markers?: boolean | undefined;
+    /** The size of the text. */
+    size?: "small" | undefined;
 } & HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLUListElement>> & {
@@ -696,25 +779,33 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
 type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
 type IconProps = {
+    /** The size of the icon. Corresponds with the text levels. */
     size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
+    /** Whether the icon container should be made square. */
     square?: boolean;
+    /** The component rendering the icon’s markup. */
     svg: Function;
 } & HTMLAttributes<HTMLSpanElement>;
 declare const Icon: react.ForwardRefExoticComponent<{
+    /** The size of the icon. Corresponds with the text levels. */
     size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
+    /** Whether the icon container should be made square. */
     square?: boolean | undefined;
+    /** The component rendering the icon’s markup. */
     svg: Function;
 } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
 
 type AccordionProps = {
-    /** The hierarchical level of the accordion title within the document. */
+    /** The hierarchical level of the Accordion Section heading(s) within the document. */
     headingLevel: HeadingLevel;
-    section?: boolean;
+    /** The HTML element to use for each Accordion Section. */
+    sectionAs?: 'div' | 'section';
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Accordion: react.ForwardRefExoticComponent<{
-    /** The hierarchical level of the accordion title within the document. */
+    /** The hierarchical level of the Accordion Section heading(s) within the document. */
     headingLevel: HeadingLevel;
-    section?: boolean | undefined;
+    /** The HTML element to use for each Accordion Section. */
+    sectionAs?: "div" | "section" | undefined;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode;
 } & react.RefAttributes<HTMLDivElement>> & {
@@ -727,7 +818,9 @@ declare const Accordion: react.ForwardRefExoticComponent<{
 };
 
 type AccordionSectionProps = {
+    /** The heading text. */
     label: string;
+    /** Whether the content is displayed initially. */
     expanded?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
@@ -743,6 +836,7 @@ type GridCellSpanAndStartProps = {
     start?: GridColumnNumber | GridColumnNumbers;
 };
 type GridCellProps = {
+    /** The HTML element to use. */
     as?: 'article' | 'div' | 'section';
 } & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
@@ -756,22 +850,22 @@ type GridPaddingSize = 'small' | 'medium' | 'large';
 type GridPaddingVerticalProp = {
     paddingBottom?: never;
     paddingTop?: never;
-    /** The amount of vertical white space above and below the grid. */
+    /** The amount of space above and below. */
     paddingVertical?: GridPaddingSize;
 };
 type GridPaddingTopAndBottomProps = {
-    /** The amount of vertical white space below the grid. */
+    /** The amount of space below. */
     paddingBottom?: GridPaddingSize;
-    /** The amount of vertical white space above the grid. */
+    /** The amount of space above. */
     paddingTop?: GridPaddingSize;
     paddingVertical?: never;
 };
 type GridProps = {
-    /** The amount of vertical white space between rows of the grid. */
+    /** The amount of space between rows. */
     gapVertical?: 'none' | 'small' | 'large';
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
     Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
 };
 
-export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };
+export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };