@abgov/react-components 6.11.0 → 7.0.0-dev.10

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

@@ -1,23 +1,52 @@
-import { GoabFormItemLabelSize, GoabFormItemRequirement, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabFormItemLabelSize, GoabFormItemRequirement, GoabFormItemType, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX } from 'react';
+interface WCProps extends Margins {
+    label?: string;
+    labelsize?: GoabFormItemLabelSize;
+    requirement?: GoabFormItemRequirement;
+    error?: string;
+    helptext?: string;
+    maxwidth?: string;
+    "public-form-summary-order"?: number;
+    name?: string;
+    id?: string;
+    testid?: string;
+    type?: GoabFormItemType;
+    version?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-form-item": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 export interface GoabFormItemProps extends Margins, DataAttributes {
+    /** Creates a label for the form item. */
     label?: string;
+    /** Sets the label size. 'regular' for standard, 'large' for emphasis. @default "regular" */
     labelSize?: GoabFormItemLabelSize;
+    /** Marks the field with an optional or required label indicator. */
     requirement?: GoabFormItemRequirement;
+    /** Error text displayed under the form field. Leave blank to indicate a valid field. Accepts a string or ReactNode for custom error content. */
     error?: string | React.ReactNode;
+    /** Help text displayed under the form field to provide additional explanation. Accepts a string or ReactNode for custom help content. */
     helpText?: string | React.ReactNode;
+    /** Sets the maximum width of the form item. @default "none" */
     maxWidth?: string;
-    /**
-     * Public form: to arrange fields in the summary
-     */
+    /** Specifies the input type for appropriate message spacing. Used with checkbox-list or radio-group. */
+    type?: GoabFormItemType;
+    /** Sets the display order within the form summary. For public-form use only. */
     publicFormSummaryOrder?: number;
-    /**
-     * Public form: allow to override the label value within the form-summary to provide a shorter description of the value
-     */
+    /** Overrides the label value within the form-summary to provide a shorter description. For public-form use only. */
     name?: string;
+    /** Content rendered inside the form item, typically an input component. */
     children?: React.ReactNode;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Sets the id attribute on the form item element. */
     id?: string;
 }
-export declare function GoabFormItem({ error, helpText, publicFormSummaryOrder, children, ...rest }: GoabFormItemProps): JSX.Element;
+/** Wraps an input control with a text label, requirement label, helper text, and error text. */
+export declare function GoabFormItem({ error, helpText, publicFormSummaryOrder, children, type, ...rest }: GoabFormItemProps): JSX.Element;
 export default GoabFormItem;

package/lib/form-step/form-step.d.ts

@@ -11,8 +11,11 @@ declare module "react" {
     }
 }
 export interface GoabFormStepProps {
+    /** @required The step label text displayed to users. */
     text: string;
+    /** The completion status of the step. Affects visual styling and icons. */
     status?: GoabFormStepStatus;
 }
+/** Individual step in a multi-step form. */
 export declare function GoabFormStep(props: GoabFormStepProps): import("react/jsx-runtime").JSX.Element;
 export default GoabFormStep;

package/lib/form-stepper/form-stepper.d.ts

@@ -13,10 +13,15 @@ declare module "react" {
     }
 }
 export interface GoabFormStepperProps extends Margins {
+    /** The current step state value (1-based index). Leaving it blank (-1) will allow any step to be accessed. */
     step?: number;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Content rendered inside the form stepper, typically GoabFormStep components. */
     children?: ReactNode;
+    /** Callback fired when the active step changes. */
     onChange?: (detail: GoabFormStepperOnChangeDetail) => void;
 }
+/** Provides a visual representation of a form through a series of steps. */
 export declare function GoabFormStepper({ testId, step, mt, mb, ml, mr, onChange, children, }: GoabFormStepperProps): import("react/jsx-runtime").JSX.Element;
 export default GoabFormStepper;

package/lib/grid/grid.d.ts

@@ -13,10 +13,15 @@ declare module "react" {
     }
 }
 export interface GoabGridProps extends Margins {
-    gap?: Spacing;
+    /** @required Minimum width of the child elements. */
     minChildWidth: string;
+    /** Gap between child items. @default "m" */
+    gap?: Spacing;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Content rendered inside the grid layout. */
     children?: React.ReactNode;
 }
+/** Arrange a number of components into a responsive grid pattern. */
 export declare function GoabGrid({ gap, minChildWidth, mt, mr, mb, ml, testId, children, }: GoabGridProps): JSX.Element;
 export default GoabGrid;

package/lib/hero-banner/hero-banner-actions.d.ts

@@ -1,6 +1,8 @@
 import { JSX } from 'react';
 export type GoabHeroBannerActionsType = {
+    /** Content rendered inside the hero banner actions slot, typically buttons or links. */
     children?: React.ReactNode;
 };
+/** Displays action content in the hero banner actions area. */
 export declare function GoabHeroBannerActions({ children, }: GoabHeroBannerActionsType): JSX.Element;
 export default GoabHeroBannerActions;

package/lib/hero-banner/hero-banner.d.ts

@@ -16,14 +16,23 @@ declare module "react" {
     }
 }
 export interface GoabHeroBannerProps {
+    /** @required Main heading text. */
     heading: string;
+    /** Background image url. */
     backgroundUrl?: string;
+    /** Minimum height of the hero banner. Defaults to 600px when a background image is provided. */
     minHeight?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Content rendered inside the hero banner body. */
     children?: React.ReactNode;
+    /** Maximum width of the content area. @default "100%" */
     maxContentWidth?: string;
+    /** Hero Banner background color when no background image is provided. @default "#f8f8f8" */
     backgroundColor?: string;
+    /** Text color within the hero banner. */
     textColor?: string;
 }
+/** A visual band of text, including an image and a call to action. */
 export declare function GoabHeroBanner({ heading, backgroundUrl, minHeight, maxContentWidth, backgroundColor, textColor, children, testId, }: GoabHeroBannerProps): JSX.Element;
 export default GoabHeroBanner;

package/lib/icon/icon.d.ts

@@ -10,14 +10,25 @@ declare module "react" {
     }
 }
 export interface GoabIconProps extends Margins, DataAttributes {
+    /** @required The icon type to display. See GoabIconType for available icons. */
     type: GoabIconType | GoabIconOverridesType;
+    /** Sets the size of the icon. Accepts numeric (1-6) or named sizes. @default "medium" */
     size?: GoabIconSize;
+    /** Sets the icon theme. 'outline' shows stroked icons, 'filled' shows solid icons. @default "outline" */
     theme?: GoabIconTheme;
+    /** When true, inverts the icon colors for use on dark backgrounds. */
     inverted?: string | boolean;
+    /** Sets a custom fill color for the icon. Accepts any valid CSS color value. */
     fillColor?: string;
+    /** Sets the opacity of the icon from 0 (transparent) to 1 (opaque). @default 1 */
     opacity?: number;
+    /** Adds an accessible title to the icon SVG. Used by screen readers. */
     title?: string;
+    /** Defines how the icon will be announced by screen readers. */
     ariaLabel?: string;
+    /** Sets the ARIA role for the icon. Use 'presentation' for decorative icons. @default "img" */
+    role?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
 }
 interface WCProps extends Margins {
@@ -29,7 +40,9 @@ interface WCProps extends Margins {
     opacity?: number;
     title?: string;
     arialabel?: string;
+    role?: string;
     testid?: string;
 }
+/** A simple and universal graphic symbol representing an action, object, or concept to help guide the user. */
 export declare function GoabIcon({ inverted, ...rest }: GoabIconProps): JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
-import { GoabIconButtonVariant, GoabIconSize, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabIconButtonVariant, GoabIconSize, GoabIconTheme, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX, ReactNode } from 'react';
 interface WCProps extends Margins {
     icon: GoabIconType;
     size?: GoabIconSize;
+    theme?: GoabIconTheme;
     variant?: GoabIconButtonVariant;
     title?: string;
     disabled?: string;
@@ -22,18 +23,33 @@ declare module "react" {
     }
 }
 export interface GoabIconButtonProps extends Margins, DataAttributes {
+    /** @required Sets the icon. */
     icon: GoabIconType;
+    /** Sets the size of button. @default "medium" */
     size?: GoabIconSize;
+    /** Styles the button to show color, light, dark or destructive action. @default "color" */
     variant?: GoabIconButtonVariant;
+    /** Sets the theme of the icon inside the button. "outline" for stroked icons, "filled" for solid icons. @default "outline" */
+    theme?: GoabIconTheme;
+    /** Sets the title of the button. */
     title?: string;
+    /** Disables the button. */
     disabled?: boolean;
+    /** Callback fired when the icon button is clicked. */
     onClick?: () => void;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Sets the aria-label of the button. */
     ariaLabel?: 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 icon button. */
     children?: ReactNode;
 }
-export declare function GoabIconButton({ variant, size, disabled, onClick, actionArgs, actionArg, children, ...rest }: GoabIconButtonProps): JSX.Element;
+/** A compact button with an icon and no text. */
+export declare function GoabIconButton({ variant, size, theme, disabled, onClick, actionArgs, actionArg, children, ...rest }: GoabIconButtonProps): JSX.Element;
 export {};

package/lib/input/input.d.ts

@@ -1,46 +1,117 @@
 import { JSX } from 'react';
-import { GoabAutoCapitalize, GoabDate, GoabIconType, GoabInputOnBlurDetail, GoabInputOnChangeDetail, GoabInputOnFocusDetail, GoabInputOnKeyPressDetail, GoabInputType, Margins, DataAttributes } from '@abgov/ui-components-common';
-export interface IgnoreMe {
-    ignore: string;
+import { GoabAutoCapitalize, GoabDate, GoabIconType, GoabInputOnBlurDetail, GoabInputOnChangeDetail, GoabInputOnFocusDetail, GoabInputOnKeyPressDetail, GoabInputSize, GoabInputType, Margins, DataAttributes } from '@abgov/ui-components-common';
+interface WCProps extends Margins {
+    type?: GoabInputType;
+    name: string;
+    value?: string;
+    id?: string;
+    autocapitalize?: GoabAutoCapitalize;
+    autocomplete?: string;
+    debounce?: number;
+    placeholder?: string;
+    leadingicon?: string;
+    trailingicon?: string;
+    variant: string;
+    disabled?: string;
+    error?: string;
+    readonly?: string;
+    focused?: string;
+    handletrailingiconclick: string;
+    width?: string;
+    prefix?: string;
+    suffix?: string;
+    arialabel?: string;
+    testid?: string;
+    textalign?: string;
+    size?: GoabInputSize;
+    min?: string | number;
+    max?: string | number;
+    step?: number;
+    maxlength?: number;
+    version?: string;
+    trailingiconarialabel?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-input": WCProps & React.HTMLAttributes<HTMLInputElement> & {
+                ref?: React.RefObject<HTMLInputElement | null>;
+            };
+        }
+    }
 }
 interface BaseProps extends Margins, DataAttributes {
+    /** Name of input value that is received in event detail payloads. */
     name: string;
+    /** Sets the id attribute of the input element. */
     id?: string;
+    /** Debounce delay in milliseconds before firing the change event. 0 means no debounce. */
     debounce?: number;
+    /** Sets the input disabled state. */
     disabled?: boolean;
+    /** Controls automatic capitalization behavior on supported mobile browsers. */
     autoCapitalize?: GoabAutoCapitalize;
+    /** Sets the autocomplete attribute for the input element. */
     autoComplete?: string;
+    /** Sets placeholder text when the input is empty. */
     placeholder?: string;
+    /** Sets the icon shown before the value. */
     leadingIcon?: GoabIconType;
+    /** Sets the icon shown after the value. */
     trailingIcon?: GoabIconType;
+    /** Callback fired when the trailing icon is clicked. */
     onTrailingIconClick?: () => void;
+    /** Sets the visual style variant. @default "goa" */
     variant?: "goa" | "bare";
+    /** Sets focus on initial render or controlled updates. */
     focused?: boolean;
+    /** Sets the readonly state. */
     readonly?: boolean;
+    /** Sets the error state styling. */
     error?: boolean;
+    /** Sets the width of the input field. */
     width?: string;
+    /** @deprecated Use leadingContent instead. */
     prefix?: string;
+    /** @deprecated Use trailingContent instead. */
     suffix?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Sets the aria-label used by assistive technologies. */
     ariaLabel?: string;
+    /** Sets content in the leading slot. */
     leadingContent?: React.ReactNode;
+    /** Sets content in the trailing slot. */
     trailingContent?: React.ReactNode;
+    /** Sets the maximum number of characters. */
     maxLength?: number;
+    /** Sets the aria-label for an interactive trailing icon. */
     trailingIconAriaLabel?: string;
+    /** Sets text alignment. @default "left" */
     textAlign?: "left" | "right";
+    /** Sets the input size. @default "default" */
+    size?: GoabInputSize;
 }
 type OnChange<T = string> = (detail: GoabInputOnChangeDetail<T>) => void;
 type OnFocus<T = string> = (detail: GoabInputOnFocusDetail<T>) => void;
 type OnBlur<T = string> = (detail: GoabInputOnBlurDetail<T>) => void;
 type OnKeyPress<T = string> = (detail: GoabInputOnKeyPressDetail<T>) => void;
 export interface GoabInputProps extends BaseProps {
+    /** Callback fired when the input value changes. Receives GoabInputOnChangeDetail. */
     onChange?: OnChange<string>;
+    /** Bound to the current value of the input field. */
     value?: string;
+    /** Minimum value. Supports any number, or ISO 8601 format for date/datetime types. */
     min?: number | string;
+    /** Maximum value. Supports any number, or ISO 8601 format for date/datetime types. */
     max?: number | string;
+    /** How much a number or date value should change by. @default 1 */
     step?: number;
+    /** Callback fired when the input receives focus. Receives GoabInputOnFocusDetail. */
     onFocus?: OnFocus<string>;
+    /** Callback fired when the input loses focus. Receives GoabInputOnBlurDetail. */
     onBlur?: OnBlur<string>;
+    /** Callback fired when a key is pressed in the input. Receives GoabInputOnKeyPressDetail. */
     onKeyPress?: OnKeyPress<string>;
 }
 interface GoabNumberInputProps extends BaseProps {
@@ -63,20 +134,34 @@ interface GoabDateInputProps extends BaseProps {
     onBlur?: OnBlur<GoabDate>;
     onKeyPress?: OnKeyPress<GoabDate>;
 }
-export declare function GoabInput({ variant, textAlign, focused, disabled, readonly, error, leadingContent, trailingContent, onTrailingIconClick, onChange, onFocus, onBlur, onKeyPress, ...rest }: GoabInputProps & {
+/** A single-line field where users can input and edit text. */
+export declare function GoabInput({ variant, textAlign, size, focused, disabled, readonly, error, leadingContent, trailingContent, onTrailingIconClick, onChange, onFocus, onBlur, onKeyPress, ...rest }: GoabInputProps & {
     type?: GoabInputType;
 }): JSX.Element;
+/** A single-line field where users can input and edit text. */
 export declare function GoabInputText(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter masked password text. */
 export declare function GoabInputPassword(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter or select a date. */
 export declare function GoabInputDate({ value, min, max, ...props }: GoabDateInputProps): JSX.Element;
+/** A single-line field where users can enter or select a time. */
 export declare function GoabInputTime({ value, min, max, ...props }: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter a date and time. */
 export declare function GoabInputDateTime({ value, min, max, ...props }: GoabDateInputProps): JSX.Element;
+/** A single-line field where users can enter an email address. */
 export declare function GoabInputEmail(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter search terms. */
 export declare function GoabInputSearch(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter a URL. */
 export declare function GoabInputUrl(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter a phone number. */
 export declare function GoabInputTel(props: GoabInputProps): JSX.Element;
+/** A control that allows users to select a file for upload. */
 export declare function GoabInputFile(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can enter or select a month. */
 export declare function GoabInputMonth(props: GoabInputProps): JSX.Element;
+/** A single-line field where users can input and edit numeric values. */
 export declare function GoabInputNumber({ min, max, value, textAlign, ...props }: GoabNumberInputProps): JSX.Element;
+/** A range input where users can choose a numeric value within minimum and maximum limits. */
 export declare function GoabInputRange(props: GoabInputProps): JSX.Element;
 export default GoabInput;

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

@@ -13,11 +13,17 @@ declare module "react" {
     }
 }
 export interface GoabLinearProgressProps {
+    /** Progress value (0-100). When undefined, shows an indeterminate loading animation. */
     progress?: number | null;
+    /** Controls visibility of the percentage text. @default "visible" */
     percentVisibility?: "visible" | "hidden" | undefined;
+    /** Accessible label for the progress bar. */
     ariaLabel?: string;
+    /** ID of the element that labels this progress bar. */
     ariaLabelledBy?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
 }
+/** Provide visual feedback to users while loading. */
 export declare const GoabLinearProgress: ({ progress, percentVisibility, ariaLabel, ariaLabelledBy, testId, }: GoabLinearProgressProps) => import("react/jsx-runtime").JSX.Element;
 export default GoabLinearProgress;

package/lib/link/link.d.ts

@@ -1,13 +1,42 @@
 import { ReactNode } from 'react';
-import { GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
-interface GoabLinkProps extends Margins, DataAttributes {
+import { GoabIconType, GoabLinkColor, GoabLinkSize, Margins, DataAttributes } from '@abgov/ui-components-common';
+interface WCProps extends Margins {
+    leadingicon?: GoabIconType;
+    trailingicon?: GoabIconType;
+    action?: string;
+    actionArgs?: string;
+    actionArg?: string;
+    testid?: string;
+    color?: GoabLinkColor;
+    size?: GoabLinkSize;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-link": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabLinkProps extends Margins, DataAttributes {
+    /** @required Content rendered inside the link. */
+    children: ReactNode;
+    /** Icon displayed before the link text. */
     leadingIcon?: GoabIconType;
+    /** Icon displayed after the link text. */
     trailingIcon?: GoabIconType;
+    /** Custom action event name to dispatch when the link is clicked. */
     action?: string;
+    /** Object of arguments to pass with the action event. */
     actionArgs?: Record<string, unknown>;
+    /** Single argument to pass with the action event. Deprecated, use actionArgs instead. */
     actionArg?: string;
+    /** Sets the color theme. 'interactive' for blue, 'dark' for black, 'light' for white text. @default "interactive" */
+    color?: GoabLinkColor;
+    /** Sets the text size and corresponding icon size. @default "medium" */
+    size?: GoabLinkSize;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
-    children: ReactNode;
 }
-export declare function GoabLink({ actionArgs, actionArg, children, ...rest }: GoabLinkProps): import("react/jsx-runtime").JSX.Element;
+/** Wraps an anchor element to add icons or margins. */
+export declare function GoabLink({ actionArgs, actionArg, color, size, children, ...rest }: GoabLinkProps): import("react/jsx-runtime").JSX.Element;
 export default GoabLink;

package/lib/menu-button/menu-action.d.ts

@@ -14,10 +14,15 @@ declare module "react" {
     }
 }
 export interface GoabMenuActionProps extends DataAttributes {
+    /** @required Display text for the menu action. */
     text: string;
+    /** @required Action identifier included in the click event. */
     action: string;
+    /** Icon displayed before the text. */
     icon?: GoabIconType;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
 }
+/** Individual action item within a menu button. */
 export declare function GoabMenuAction(props: GoabMenuActionProps): JSX.Element;
 export default GoabMenuAction;

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

@@ -1,27 +1,16 @@
-import { DataAttributes, GoabButtonType, GoabIconType, GoabMenuButtonOnActionDetail } from '@abgov/ui-components-common';
+import { DataAttributes, GoabButtonSize, GoabButtonType, GoabButtonVariant, GoabIconType, GoabMenuButtonOnActionDetail } from '@abgov/ui-components-common';
 import { ReactNode, JSX } from 'react';
-/**
- * Props definition for the `goab-menu-button` Web Component.
- * @typedef {Object} WCProps
- *
- * @property {string} text - The text label to be displayed on the button.
- * @property {GoabButtonType} type - The button type, e.g., "primary", "secondary", etc.
- * @property {GoaIconType} leadingIcon - Optional leading icon appearing within the button.
- * @property {string} [testid] - A test identifier for automated testing purposes.
- * @property {React.RefObject<HTMLElement | null>} ref - A reference object pointing to the Web Component's DOM element.
- */
 interface WCProps {
-    text: string;
+    text?: string;
     type: GoabButtonType;
+    size?: GoabButtonSize;
+    variant?: GoabButtonVariant;
     "max-width"?: string;
     "leading-icon"?: GoabIconType;
+    "aria-label"?: string;
     testid?: string;
     ref: React.RefObject<HTMLElement | null>;
 }
-/**
- * Extends React's `JSX` namespace to include the custom `goa-menu-button` Web Component.
- * The `goa-menu-button` supports additional React-specific props.
- */
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -29,49 +18,28 @@ declare module "react" {
         }
     }
 }
-/**
- * Props for the `GoabMenuButton` React component.
- *
- * @typedef {Object} GoabMenuButtonProps
- *
- * @property {string} text - The text label to display on the button.
- * @property {GoabButtonType} [type="primary"] - The button type, e.g., "primary", "secondary". Defaults to "primary".
- * @property {GoaIconType} leadingIcon - Optional leading icon appearing within the button.
- * @property {string} [testId] - A test identifier for automated testing purposes.
- * @property {Function} [onAction] - Callback function invoked when an action event is emitted by the component.
- * @property {ReactNode} [children] - Optional child elements to be rendered inside the button.
- */
 export interface GoabMenuButtonProps extends DataAttributes {
-    text: string;
+    /** The button label text. When provided, displays as a text button with a dropdown icon. */
+    text?: string;
+    /** The button style variant. @default "primary" */
     type?: GoabButtonType;
+    /** Sets the size of the button. @default "normal" */
+    size?: GoabButtonSize;
+    /** Sets the color variant for semantic meaning. @default "normal" */
+    variant?: GoabButtonVariant;
+    /** Maximum width of the dropdown menu. */
     maxWidth?: string;
+    /** Icon displayed before the button text. When no text is provided, displays as an icon button. */
     leadingIcon?: GoabIconType;
+    /** Sets the aria-label for the icon button in icon-only mode. @default "Open menu" */
+    ariaLabel?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Callback fired when a menu action is selected. */
     onAction?: (detail: GoabMenuButtonOnActionDetail) => void;
+    /** Content rendered inside the menu button, typically GoabMenuAction items. */
     children?: ReactNode;
 }
-/**
- * A React wrapper component for the `goa-menu-button` Web Component.
- *
- * This component provides seamless integration of the Web Component into a React application, including React-specific props and event handling.
- *
- * @function GoabMenuButton
- * @param {GoabMenuButtonProps} props - The props for the component.
- *
- * @returns {JSX.Element} A JSX element wrapping the `goa-menu-button` Web Component.
- *
- * @example
- * ```tsx
- * <GoabMenuButton
- *   text="Example Button"
- *   type="secondary"
- *   onAction={(action) => console.log(`Action: ${action}`)}
- * >
- *   <GoabMenuAction text="Option 1" action="option1" />
- *   <GoabMenuAction text="Option 2" action="option2" />
- *   <GoabMenuAction text="Option 3" action="option3" />
- * </GoabMenuButton>
- * ```
- */
+/** A button with more than one action. */
 export declare function GoabMenuButton({ type, testId, onAction, children, ...rest }: GoabMenuButtonProps): JSX.Element;
 export default GoabMenuButton;

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

@@ -19,14 +19,23 @@ interface WCProps {
     testid?: string;
 }
 export interface GoabHeaderProps {
+    /** @required The service type which determines the badge style. "live" shows official government site text, "alpha" and "beta" show development stage badges. */
     type: GoabServiceLevel;
+    /** App or service version displayed on the right side of the header. Accepts a string or custom ReactNode for rich content. */
     version?: string | React.ReactNode;
+    /** URL to a feedback page displayed when provided. */
     feedbackUrl?: string;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Maximum width of the content area. @default "100%" */
     maxContentWidth?: string;
+    /** Sets the target attribute for the feedback URL link. @default "blank" */
     feedbackUrlTarget?: GoabLinkTarget;
+    /** Sets the target attribute for the header link. @default "blank" */
     headerUrlTarget?: GoabLinkTarget;
+    /** Callback fired when the feedback link is clicked, enables custom feedback handling. */
     onFeedbackClick?: () => void;
 }
+/** Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service. */
 export declare function GoabMicrositeHeader({ type, version, feedbackUrl, maxContentWidth, feedbackUrlTarget, headerUrlTarget, testId, onFeedbackClick, }: GoabHeaderProps): JSX.Element;
 export default GoabMicrositeHeader;

package/lib/modal/modal.d.ts

@@ -1,14 +1,46 @@
 import { GoabModalCalloutVariant, GoabModalRole, GoabModalTransition } from '@abgov/ui-components-common';
-import { ReactElement, ReactNode, JSX } from 'react';
+import { ReactElement, ReactNode, RefObject, JSX } from 'react';
+interface WCProps {
+    ref: RefObject<HTMLElement | null>;
+    heading?: ReactNode;
+    open?: string;
+    maxwidth?: string;
+    closable: string;
+    /**
+     * @deprecated The role property is deprecated and will be removed in a future version.
+     * The modal will always use role="dialog".
+     */
+    role?: GoabModalRole;
+    transition?: GoabModalTransition;
+    calloutvariant?: GoabModalCalloutVariant;
+    testid?: string;
+    version?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-modal": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
 export interface GoabModalProps {
+    /** The heading text displayed at the top of the modal. */
     heading?: ReactNode;
+    /** Set the max allowed width of the modal. @default "60ch" */
     maxWidth?: string;
+    /** Content rendered in the modal's actions slot, typically action buttons. */
     actions?: ReactElement<any>;
+    /** Callback fired when the modal is closed. When provided, enables the close button and backdrop click-to-close behavior. */
     onClose?: () => void;
+    /** Sets the animation transition when opening/closing. 'fast' or 'slow' for animated, 'none' for instant. */
     transition?: GoabModalTransition;
+    /** Content rendered inside the modal body. */
     children?: ReactNode;
+    /** Controls if the modal is visible or not. */
     open?: boolean;
+    /** Sets the context and colour of the callout modal. Required when used as a callout type. */
     calloutVariant?: GoabModalCalloutVariant;
+    /** Sets a data-testid attribute for automated testing. */
     testId?: string;
     /**
      * @deprecated The role property is deprecated and will be removed in a future version.
@@ -16,5 +48,6 @@ export interface GoabModalProps {
      */
     role?: GoabModalRole;
 }
+/** An overlay that appears in front of all other content, and requires a user to take an action before continuing. */
 export declare function GoabModal({ heading, children, maxWidth, open, actions, transition, calloutVariant, onClose, testId, }: GoabModalProps): JSX.Element;
 export default GoabModal;