@abgov/react-components 7.0.0-dev.1 → 7.0.0-dev.11

package/lib/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ import { GoabAccordionHeadingSize, GoabAccordionIconPosition, Margins, DataAttri
 interface WCProps extends Margins {
     open?: string;
     headingsize?: GoabAccordionHeadingSize;
-    heading: string;
+    heading?: string;
     secondarytext?: string;
     headingContent?: ReactNode;
     maxwidth?: string;
@@ -20,16 +20,27 @@ declare module "react" {
     }
 }
 export interface GoabAccordionProps extends Margins, DataAttributes {
+    /** Sets the heading text. */
+    heading?: string;
+    /** Sets the state of the accordion container open or closed. */
     open?: boolean;
+    /** Sets the heading size of the accordion container heading. @default "small" */
     headingSize?: GoabAccordionHeadingSize;
+    /** Sets secondary text displayed alongside the heading. */
     secondaryText?: string;
-    heading: string;
+    /** Sets content rendered within the accordion heading, alongside the heading text. */
     headingContent?: ReactNode;
+    /** Sets the maximum width of the accordion. @default "none" */
     maxWidth?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Sets the position of the expand/collapse icon. @default "left" */
     iconPosition?: GoabAccordionIconPosition;
+    /** Callback fired when the accordion is opened or closed. Receives the new open state as a boolean. */
     onChange?: (open: boolean) => void;
+    /** Content rendered inside the accordion body. */
     children?: ReactNode;
 }
+/** Let users show and hide sections of related content on a page. */
 export declare function GoabAccordion({ open, onChange, headingContent, children, ...rest }: GoabAccordionProps): JSX.Element;
 export default GoabAccordion;

package/lib/app-header/app-header.d.ts

@@ -20,14 +20,23 @@ declare module "react" {
     }
 }
 export interface GoabAppHeaderProps extends DataAttributes {
+    /** Set the service name to display in the app header. */
     heading?: string;
+    /** V2 only: Secondary text displayed under the service name. */
     secondaryText?: string;
+    /** Set the URL to link from the alberta.ca logo. A full url is required. */
     url?: string;
+    /** Maximum width of the content area. */
     maxContentWidth?: string;
+    /** Sets the breakpoint in px for the full menu to display. */
     fullMenuBreakpoint?: number;
+    /** Content rendered inside the app header, typically navigation links. */
     children?: React.ReactNode;
+    /** Callback fired when the menu button is clicked. When provided, clicking the menu button dispatches a custom event instead of toggling the menu. */
     onMenuClick?: () => void;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
 }
+/** Provide structure to help users find their way around the service. */
 export declare function GoabAppHeader({ onMenuClick, children, secondaryText, ...rest }: GoabAppHeaderProps): JSX.Element;
 export {};

package/lib/app-header-menu/app-header-menu.d.ts

@@ -13,11 +13,17 @@ declare module "react" {
     }
 }
 export interface GoabAppHeaderMenuProps extends DataAttributes {
+    /** @required The menu heading text displayed as the dropdown trigger. */
     heading: string;
+    /** Icon displayed before the heading text. */
     leadingIcon?: GoabIconType;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Slot name used to place this menu in the correct slot of the parent component. */
     slotName?: string;
+    /** Content rendered inside the menu dropdown, typically navigation links. */
     children?: ReactNode;
 }
+/** Menu items within the app header. */
 export declare function GoabAppHeaderMenu({ children, slotName, ...rest }: GoabAppHeaderMenuProps): import("react/jsx-runtime").JSX.Element;
 export default GoabAppHeaderMenu;

package/lib/badge/badge.d.ts

@@ -19,14 +19,23 @@ declare module "react" {
     }
 }
 export interface GoabBadgeProps extends Margins, DataAttributes {
+    /** @required Sets the context and colour of the badge. */
     type: GoabBadgeType;
+    /** @deprecated Use iconType instead. When true, displays an icon in the badge. */
     icon?: boolean;
+    /** Text label of the badge. */
     content?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Accessible label for screen readers. */
     ariaLabel?: string;
+    /** Icon type to display in the badge. */
     iconType?: GoabIconType;
+    /** Sets the size of the badge. @default "medium" */
     size?: GoabBadgeSize;
+    /** Sets the visual emphasis. 'subtle' for less prominent, 'strong' for more emphasis. @default "strong" */
     emphasis?: GoabBadgeEmphasis;
 }
+/** Small labels which hold small amounts of information, system feedback, or states. */
 export declare function GoabBadge({ icon, iconType, size, emphasis, ...rest }: GoabBadgeProps): JSX.Element;
 export {};

package/lib/block/block.d.ts

@@ -17,13 +17,22 @@ declare module "react" {
     }
 }
 export interface GoabBlockProps extends Margins, DataAttributes {
+    /** Spacing between items. Uses design system spacing tokens. @default "m" */
     gap?: Spacing;
+    /** Stacking direction of child components. @default "row" */
     direction?: GoabBlockDirection;
+    /** Primary axis alignment of child components. @default "normal" */
     alignment?: GoabBlockAlignment;
+    /** Sets the minimum width of the block container. */
     minWidth?: string;
+    /** Sets the maximum width of the block container. */
     maxWidth?: string;
+    /** Sets the width of the block container. */
     width?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Content rendered inside the block container. */
     children?: ReactNode;
 }
+/** Group components into a block with consistent space between. */
 export declare function GoabBlock({ testId, children, ...rest }: GoabBlockProps): import("react/jsx-runtime").JSX.Element;

package/lib/button/button.d.ts

@@ -24,19 +24,33 @@ declare module "react" {
     }
 }
 export interface GoabButtonProps extends Margins, DataAttributes {
+    /** Sets the visual style of the button. Use "primary" for main actions, "secondary" for alternative actions, "tertiary" for low-emphasis actions, "start" for prominent call-to-action buttons, and "text" for text-only buttons. @default "primary" */
     type?: GoabButtonType;
+    /** Controls the size of the button. Use "compact" for inline actions or space-constrained layouts. @default "normal" */
     size?: GoabButtonSize;
+    /** Sets the color variant for semantic meaning. Use "destructive" for delete or irreversible actions, "inverse" for light-colored text on dark backgrounds, and "dark" for dark text color on text buttons only. Note: "dark" has no effect on non-text button types. @default "normal" */
     variant?: GoabButtonVariant;
+    /** When true, prevents user interaction and applies disabled styling. */
     disabled?: boolean;
+    /** Icon displayed before the button text. */
     leadingIcon?: GoabIconType;
+    /** Icon displayed after the button text. */
     trailingIcon?: GoabIconType;
+    /** Sets a custom width for the button (e.g., "200px" or "100%"). */
     width?: string;
+    /** Callback fired when the button is clicked. */
     onClick?: () => void;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Action identifier passed in click events for event delegation patterns. */
     action?: string;
+    /** Multiple argument values passed with the action in click events. */
     actionArgs?: Record<string, unknown>;
+    /** Single argument value passed with the action in click events. */
     actionArg?: string;
+    /** Content rendered inside the button. */
     children?: ReactNode;
 }
+/** Carry out an important action or navigate to another page. */
 export declare function GoabButton({ disabled, onClick, actionArgs, actionArg, children, ...rest }: GoabButtonProps): JSX.Element;
 export default GoabButton;

package/lib/button-group/button-group.d.ts

@@ -13,10 +13,15 @@ declare module "react" {
     }
 }
 export interface GoabButtonGroupProps extends Margins, DataAttributes {
+    /** @required Positions the button group in the page layout. */
     alignment: GoabButtonGroupAlignment;
+    /** Sets the spacing between buttons in the button group. @default "relaxed" */
     gap?: GoabButtonGroupGap;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Button components to render inside the group. */
     children?: React.ReactNode;
 }
+/** Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing. */
 export declare function GoabButtonGroup({ children, ...rest }: GoabButtonGroupProps): JSX.Element;
 export default GoabButtonGroup;

package/lib/calendar/calendar.d.ts

@@ -18,12 +18,19 @@ declare module "react" {
     }
 }
 export interface GoabCalendarProps extends Margins, DataAttributes {
+    /** @required Callback fired when the selected date changes. */
+    onChange: (details: GoabCalendarOnChangeDetail) => void;
+    /** Name identifier for the calendar, included in change events. */
     name?: string;
+    /** The currently selected date value in YYYY-MM-DD format. */
     value?: string;
+    /** The minimum selectable date in YYYY-MM-DD format. Defaults to 5 years in the past. */
     min?: string;
+    /** The maximum selectable date in YYYY-MM-DD format. Defaults to 5 years in the future. */
     max?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
-    onChange: (details: GoabCalendarOnChangeDetail) => void;
 }
+/** Visual calendar for date selection. */
 export declare function GoabCalendar({ min, max, onChange, name, ...rest }: GoabCalendarProps): JSX.Element;
 export default GoabCalendar;

package/lib/callout/callout.d.ts

@@ -18,15 +18,25 @@ declare module "react" {
     }
 }
 export interface GoabCalloutProps extends Margins, DataAttributes {
+    /** Callout heading text. */
     heading?: string;
+    /** Sets the context and colour of the callout. @default "information" */
     type?: GoabCalloutType;
+    /** Sets the size of the callout. 'medium' has reduced padding and type size for compact areas. @default "large" */
     size?: GoabCalloutSize;
+    /** Sets the icon theme. 'outline' for stroked icons, 'filled' for solid icons. @default "outline" */
     iconTheme?: GoabCalloutIconTheme;
+    /** Sets the visual prominence. 'high' for full background, 'medium' for subtle, 'low' for minimal. @default "medium" */
     emphasis?: GoabCalloutEmphasis;
+    /** Sets the maximum width of the callout. */
     maxWidth?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Indicates how assistive technology should handle updates to the live region. @default "off" */
     ariaLive?: GoabCalloutAriaLive;
+    /** Content rendered inside the callout body. */
     children?: React.ReactNode;
 }
+/** Communicate important information through a strong visual emphasis. */
 export declare const GoabCallout: ({ type, iconTheme, size, ariaLive, emphasis, children, ...rest }: GoabCalloutProps) => import("react/jsx-runtime").JSX.Element;
 export default GoabCallout;

package/lib/card/card-actions.d.ts

@@ -8,7 +8,9 @@ declare module "react" {
     }
 }
 export interface GoabCardActionsProps extends DataAttributes {
+    /** Content rendered inside the card actions area, typically action buttons. */
     children?: React.ReactNode;
 }
+/** A container that groups related content and actions. */
 export declare function GoabCardActions({ children, ...rest }: GoabCardActionsProps): JSX.Element;
 export default GoabCardActions;

package/lib/card/card-content.d.ts

@@ -8,7 +8,9 @@ declare module "react" {
     }
 }
 export interface GoabCardContentProps extends DataAttributes {
+    /** Content rendered inside the card content area. */
     children?: React.ReactNode;
 }
+/** A container that groups related content and actions. */
 export declare function GoabCardContent({ children, ...rest }: GoabCardContentProps): JSX.Element;
 export default GoabCardContent;

package/lib/card/card-group.d.ts

@@ -8,7 +8,9 @@ declare module "react" {
     }
 }
 export interface GoabCardGroupProps extends DataAttributes {
+    /** Content rendered inside the card group, typically multiple Card components. */
     children?: React.ReactNode;
 }
+/** A container that groups related content and actions. */
 export declare function GoabCardGroup({ children, ...rest }: GoabCardGroupProps): JSX.Element;
 export default GoabCardGroup;

package/lib/card/card-image.d.ts

@@ -12,8 +12,11 @@ declare module "react" {
     }
 }
 export interface GoabCardImageProps extends DataAttributes {
+    /** @required The URL of the image to display. */
     src: string;
+    /** @required Height of the image container. Accepts CSS values like "200px" or "100%". */
     height: string;
 }
+/** A container that groups related content and actions. */
 export declare function GoabCardImage(props: GoabCardImageProps): JSX.Element;
 export default GoabCardImage;

package/lib/card/card.d.ts

@@ -14,10 +14,15 @@ declare module "react" {
     }
 }
 export interface GoabCardProps extends Margins, DataAttributes {
+    /** Adds a shadow to the card. 0 shows a border, 1-3 increase shadow intensity. */
     elevation?: number;
+    /** Sets the width of the card. @default "100%" */
     width?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Content rendered inside the card. */
     children?: React.ReactNode;
 }
+/** A container that groups related content and actions. */
 export declare function GoabCard({ children, ...rest }: GoabCardProps): JSX.Element;
 export default GoabCard;

package/lib/checkbox/checkbox.d.ts

@@ -28,24 +28,42 @@ interface WCProps extends Margins {
     version?: string;
 }
 export interface GoabCheckboxProps extends Margins, DataAttributes {
-    id?: string;
+    /** @required Unique name to identify the checkbox. */
     name: string;
+    /** Sets a unique id for the checkbox element. */
+    id?: string;
+    /** Marks the checkbox item as selected. */
     checked?: boolean;
+    /** Shows a mixed/partial selection state. Used for 'Select All' checkboxes when some items are selected. */
     indeterminate?: boolean;
+    /** Disable this control. It will not receive focus or events. */
     disabled?: boolean;
+    /** Shows an error on the checkbox item. */
     error?: boolean;
+    /** Label shown beside the checkbox. */
     text?: string;
+    /** The value binding. */
     value?: string | number | boolean;
+    /** Content rendered inside the checkbox label slot. */
     children?: React.ReactNode;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Defines how the text will be translated for the screen reader. If not specified it will fall back to the name. */
     ariaLabel?: string;
+    /** Additional description text displayed below the checkbox label. */
     description?: string | React.ReactNode;
+    /** Content revealed when the checkbox is checked. */
     reveal?: React.ReactNode;
+    /** Text announced by screen readers when the reveal slot content is displayed. */
     revealAriaLabel?: string;
+    /** Sets the maximum width of the checkbox. */
     maxWidth?: string;
+    /** Sets the size of the checkbox. 'compact' reduces spacing for dense layouts. @default "default" */
     size?: GoabCheckboxSize;
+    /** Callback fired when the checkbox selection changes. */
     onChange?: (detail: GoabCheckboxOnChangeDetail) => void;
 }
 export type Props = GoabCheckboxProps;
+/** Let the user select one or more options. */
 export declare function GoabCheckbox({ error, checked, indeterminate, disabled, value, description, reveal, onChange, name, children, size, ...rest }: GoabCheckboxProps): JSX.Element;
 export default GoabCheckbox;

package/lib/checkbox-list/checkbox-list.d.ts

@@ -19,15 +19,25 @@ declare module "react" {
     }
 }
 export interface GoabCheckboxListProps extends Margins {
+    /** @required The name for the checkbox list group. Used as group identifier in change events. */
     name: string;
+    /** Array of currently selected checkbox values. */
     value?: string[];
+    /** Disables all checkboxes in the list. */
     disabled?: boolean;
+    /** Shows an error state on all checkboxes in the list. */
     error?: boolean;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Sets the maximum width of the checkbox list container. */
     maxWidth?: string;
+    /** Sets the size of the checkbox list. 'compact' reduces spacing between items. @default "default" */
     size?: "default" | "compact";
+    /** Content rendered inside the checkbox list. */
     children?: React.ReactNode;
+    /** Callback fired when the selected values change. */
     onChange?: (detail: GoabCheckboxListOnChangeDetail) => void;
 }
+/** A multiple selection input. */
 export declare function GoabCheckboxList({ name, value, disabled, error, testId, maxWidth, size, children, onChange, mt, mr, mb, ml, }: GoabCheckboxListProps): JSX.Element;
 export default GoabCheckboxList;

package/lib/chip/chip.d.ts

@@ -18,14 +18,23 @@ declare module "react" {
     }
 }
 export interface GoabChipProps extends Margins, DataAttributes {
-    onClick?: () => void;
+    /** @required @deprecated Use GoAFilterChip instead. The text content displayed in the chip. */
+    content: string;
+    /** @deprecated Use GoAFilterChip instead. When true, shows a delete icon and makes chip clickable. */
     deletable?: boolean;
+    /** @deprecated Use GoAFilterChip instead. Icon displayed at the start of the chip. */
     leadingIcon?: string;
+    /** @deprecated Use GoAFilterChip instead. The icon theme - outline or filled. */
     iconTheme?: GoabChipTheme;
+    /** @deprecated Use GoAFilterChip instead. Shows an error state on the chip. */
     error?: boolean;
-    content: string;
+    /** @deprecated Use GoAFilterChip instead. The chip variant style. */
     variant?: GoabChipVariant;
+    /** @deprecated Use GoAFilterChip instead. Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Callback fired when the chip is clicked or deleted. */
+    onClick?: () => void;
 }
+/** Compact element for labels, tags, or selections. */
 export declare const GoabChip: ({ error, deletable, onClick, ...rest }: GoabChipProps) => import("react/jsx-runtime").JSX.Element;
 export default GoabChip;

package/lib/circular-progress/circular-progress.d.ts

@@ -15,12 +15,19 @@ declare module "react" {
     }
 }
 export interface GoabCircularProgressProps {
+    /** Controls the display mode. 'fullscreen' stretches across the full screen; 'inline' is used within content. @default "inline" */
     variant?: GoabCircularProgressVariant;
+    /** Sets the size of the progress indicator. @default "large" */
     size?: GoabCircularProgressSize;
+    /** Loading message displayed below the progress indicator. */
     message?: string;
+    /** Controls visibility of the progress indicator, allowing a fade transition to be applied. */
     visible?: boolean;
+    /** Sets the progress value (0–100). When omitted, an infinite spinner is shown. */
     progress?: number;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
 }
+/** Provide feedback of progress to users while loading. */
 export declare const GoabCircularProgress: ({ visible, message, progress, variant, size, testId, }: GoabCircularProgressProps) => import("react/jsx-runtime").JSX.Element;
 export default GoabCircularProgress;

package/lib/container/container.d.ts

@@ -18,18 +18,31 @@ declare module "react" {
     }
 }
 export interface GoabContainerProps extends Margins, DataAttributes {
-    accent?: GoabContainerAccent;
+    /** Sets the container and accent bar styling. @default "interactive" */
     type?: GoabContainerType;
-    heading?: ReactNode;
-    title?: ReactNode;
+    /** Sets the style of accent on the container. @default "filled" */
+    accent?: GoabContainerAccent;
+    /** Sets the amount of white space in the container. @default "relaxed" */
     padding?: GoabContainerPadding;
-    actions?: ReactNode;
-    children?: ReactNode;
+    /** Sets the width of the container. @default "full" */
     width?: GoabContainerWidth;
+    /** Sets the maximum width of the container. */
     maxWidth?: string;
+    /** Sets the minimum height of the container. */
     minHeight?: string;
+    /** Sets the maximum height of the container. */
     maxHeight?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Content rendered in the container's title/heading area. */
+    heading?: ReactNode;
+    /** @deprecated Use heading instead. Alias for the heading prop. */
+    title?: ReactNode;
+    /** Content rendered in the container's actions area, typically buttons or controls. */
+    actions?: ReactNode;
+    /** Content rendered inside the container body. */
+    children?: ReactNode;
 }
+/** Group information, create hierarchy, and show related information. */
 export declare function GoabContainer({ heading, title, actions, children, ...rest }: GoabContainerProps): JSX.Element;
 export default GoabContainer;

package/lib/data-grid/data-grid.d.ts

@@ -12,10 +12,15 @@ declare module "react" {
     }
 }
 export interface GoabDataGridProps {
+    /** @required Navigation mode. 'table' navigates like a table (up/down between rows), 'layout' allows wrapping between rows with left/right arrows. */
+    keyboardNav: "layout" | "table";
+    /** Controls visibility of the keyboard navigation indicator icon. @default "visible" */
     keyboardIconVisibility?: "visible" | "hidden";
+    /** Position of the keyboard navigation indicator icon. @default "left" */
     keyboardIconPosition?: "left" | "right";
-    keyboardNav: "layout" | "table";
+    /** Content rendered inside the data grid, typically rows and cells. */
     children?: React.ReactNode;
 }
+/** Advanced table with sorting and selection. */
 export declare function GoabDataGrid({ keyboardIconVisibility, keyboardIconPosition, keyboardNav, children, }: GoabDataGridProps): import("react/jsx-runtime").JSX.Element;
 export default GoabDataGrid;

package/lib/date-picker/date-picker.d.ts

@@ -23,20 +23,29 @@ declare module "react" {
     }
 }
 export interface GoabDatePickerProps extends Margins, DataAttributes {
+    /** Sets the date picker type. 'calendar' shows a calendar popup, 'input' shows just a date input. @default "calendar" */
+    type?: GoabDatePickerInputType;
+    /** Name of the date field. */
     name?: string;
+    /** Value of the calendar date, as a Date object or an ISO date string (yyyy-mm-dd). */
     value?: Date | string | undefined;
+    /** Sets the input to an error state. */
     error?: boolean;
+    /** Minimum date value allowed. */
     min?: Date | string;
+    /** Maximum date value allowed. */
     max?: Date | string;
-    type?: GoabDatePickerInputType;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
-    /***
-     * @deprecated This property has no effect and will be removed in a future version
-     */
+    /** @deprecated This property has no effect and will be removed in a future version. */
     relative?: boolean;
+    /** Disables the date picker. */
     disabled?: boolean;
+    /** Sets the width of the date picker input. */
     width?: string;
+    /** Callback fired when the selected date changes. */
     onChange?: (detail: GoabDatePickerOnChangeDetail) => void;
 }
+/** Lets users select a date through a calendar without the need to manually type it in a field. */
 export declare function GoabDatePicker({ value, error, min, max, disabled, relative, onChange, ...rest }: GoabDatePickerProps): JSX.Element;
 export default GoabDatePicker;

package/lib/details/details.d.ts

@@ -14,11 +14,17 @@ declare module "react" {
     }
 }
 export interface GoabDetailsProps extends Margins, DataAttributes {
+    /** @required The title heading. */
     heading: string;
+    /** @required Content rendered inside the details body. */
+    children: ReactNode;
+    /** Controls if details is expanded or not. */
     open?: boolean;
+    /** Sets the maximum width of the details. @default "75ch" */
     maxWidth?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
-    children: ReactNode;
 }
+/** Let users reveal more detailed information when they need it. */
 export declare function GoabDetails({ open, children, ...rest }: GoabDetailsProps): import("react/jsx-runtime").JSX.Element;
 export default GoabDetails;

package/lib/divider/divider.d.ts

@@ -10,7 +10,9 @@ declare module "react" {
     }
 }
 export interface GoabDividerProps extends Margins {
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
 }
+/** Indicate a separation of layout, or to distinguish large chunks of information on a page. */
 export declare function GoabDivider(props: GoabDividerProps): import("react/jsx-runtime").JSX.Element;
 export default GoabDivider;

package/lib/drawer/drawer.d.ts

@@ -17,14 +17,23 @@ declare module "react" {
     }
 }
 export interface GoabDrawerProps {
+    /** @required The position of the drawer. */
     position: GoabDrawerPosition;
+    /** @required Content rendered inside the drawer body. */
+    children: ReactNode;
+    /** @required Callback fired when the drawer requests to be closed. */
+    onClose: () => void;
+    /** Whether the drawer is open. */
     open?: boolean;
+    /** The heading text displayed at the top of the drawer. Accepts a string or a ReactNode for custom heading content. */
     heading?: string | ReactNode;
+    /** Sets max height on bottom position, sets width on left and right position. */
     maxSize?: GoabDrawerSize;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Action elements rendered in the drawer footer slot. */
     actions?: ReactNode;
-    children: ReactNode;
-    onClose: () => void;
 }
+/** A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view. */
 export declare function GoabDrawer({ position, open, heading, maxSize, testId, actions, children, onClose, }: GoabDrawerProps): JSX.Element;
 export default GoabDrawer;

package/lib/dropdown/dropdown-item.d.ts

@@ -14,13 +14,21 @@ declare module "react" {
     }
 }
 export interface GoabDropdownItemProps {
+    /** @required The value submitted when this item is selected. */
     value: string;
+    /** Display label for the dropdown item. */
     label?: string;
+    /** Text used to filter and match this item in typeahead search. */
     filter?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Controls how the item is registered with the parent dropdown. */
     mountType?: GoabDropdownItemMountType;
+    /** @deprecated */
     name?: string;
 }
+/** Present a list of options to the user to select from. */
 export declare function GoabDropdownOption(props: GoabDropdownItemProps): import("react/jsx-runtime").JSX.Element;
+/** Present a list of options to the user to select from. */
 export declare function GoabDropdownItem({ value, label, filter, name, mountType, }: GoabDropdownItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/dropdown/dropdown.d.ts

@@ -32,30 +32,49 @@ declare module "react" {
     }
 }
 export interface GoabDropdownProps extends Margins, DataAttributes {
+    /** Identifier for the dropdown. Should be unique. */
     name?: string;
+    /** The currently selected value(s) of the dropdown. */
     value?: string[] | string;
+    /** Callback fired when the selected value changes. */
     onChange?: (detail: GoabDropdownOnChangeDetail) => void;
+    /** Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name. */
     ariaLabel?: string;
+    /** The aria-labelledby attribute identifies the element that labels the dropdown. Normally it is the id of the label. */
     ariaLabelledBy?: string;
+    /** The id attribute for the dropdown element. */
     id?: string;
+    /** Dropdown items rendered inside the dropdown. */
     children?: React.ReactNode;
+    /** Disables the dropdown control. */
     disabled?: boolean;
+    /** Shows an error state on the dropdown. */
     error?: boolean;
+    /** When true, allows filtering options by typing into the input field. */
     filterable?: boolean;
+    /** Icon shown to the left of the dropdown input. */
     leadingIcon?: GoabIconType;
+    /** Maximum height of the dropdown menu. Non-native only. @default "276px" */
     maxHeight?: string;
+    /** When true, allows multiple items to be selected. */
     multiselect?: boolean;
+    /** When true, renders the native select HTML element. */
     native?: boolean;
+    /** The text displayed in the dropdown before a selection is made. Non-native only. */
     placeholder?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Overrides the autosized menu width. Non-native only. */
     width?: string;
+    /** Sets the maximum width of the dropdown. Use a CSS unit (px, %, ch, rem, em). */
     maxWidth?: string;
+    /** Specifies the autocomplete attribute for the dropdown input. Native only. */
     autoComplete?: string;
+    /** Sets the size of the dropdown. Compact reduces height for dense layouts. */
     size?: GoabDropdownSize;
-    /***
-     * @deprecated This property has no effect and will be removed in a future version
-     */
+    /** @deprecated This property has no effect and will be removed in a future version. */
     relative?: boolean;
 }
+/** Present a list of options to the user to select from. */
 export declare function GoabDropdown({ value, onChange, disabled, error, filterable, multiselect, native, relative, children, size, ...rest }: GoabDropdownProps): JSX.Element;
 export default GoabDropdown;