/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { CheckboxObject } from "./components/gcds-checkboxes/checkbox";
import { Validator, ValidatorEntry } from "./validators";
import { SpacingValues } from "./utils/types/spacing";
import { ContentValues, GridGapValues } from "./components/gcds-grid/gcds-grid";
import { SuggestionOption } from "./components/gcds-input/suggestion-option";
import { RadioObject } from "./components/gcds-radios/radio";
export { CheckboxObject } from "./components/gcds-checkboxes/checkbox";
export { Validator, ValidatorEntry } from "./validators";
export { SpacingValues } from "./utils/types/spacing";
export { ContentValues, GridGapValues } from "./components/gcds-grid/gcds-grid";
export { SuggestionOption } from "./components/gcds-input/suggestion-option";
export { RadioObject } from "./components/gcds-radios/radio";
export namespace Components {
    /**
     * Alert displays an alert message with an optional heading, icon, and close button.
     */
    interface GcdsAlert {
        /**
          * Defines alert role.
          * @default 'info'
         */
        "alertRole"?: 'danger' | 'info' | 'success' | 'warning';
        /**
          * Defines the max width of the alert content.
          * @default 'full'
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines the alert heading.
         */
        "heading": string;
        /**
          * Defines if the alert's close button is displayed or not.
          * @default false
         */
        "hideCloseBtn"?: boolean;
        /**
          * Defines if the alert's role icon is displayed or not.
          * @default false
         */
        "hideRoleIcon"?: boolean;
        /**
          * Defines if the alert's position is fixed.
          * @default false
         */
        "isFixed"?: boolean;
    }
    /**
     * Breadcrumbs is a path to the current page from each preceding level of the site's hierarchy.
     */
    interface GcdsBreadcrumbs {
        /**
          * Defines if the default canada.ca link is displayed or omitted.
          * @default false
         */
        "hideCanadaLink": boolean;
    }
    /**
     * Breadcrumbs item represents a single link in the breadcrumbs navigation.
     */
    interface GcdsBreadcrumbsItem {
        /**
          * Specifies the href of the breadcrumb item.
         */
        "href": string | undefined;
    }
    /**
     * The button is an interactive object that emphasizes an action.
     */
    interface GcdsButton {
        /**
          * The buttonId attribute specifies the id for a <button> element.
         */
        "buttonId": string;
        /**
          * Set the main style
          * @default 'primary'
         */
        "buttonRole": | 'start'
    | 'primary'
    | 'secondary'
    | 'danger';
        /**
          * The disabled attribute for a <button> element.
         */
        "disabled": boolean;
        /**
          * The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink
         */
        "download": string | undefined;
        /**
          * The href attribute specifies the URL of the page the link goes to
         */
        "href": string | undefined;
        /**
          * The name attribute specifies the name for a <button> element.
         */
        "name": string | undefined;
        /**
          * The rel attribute specifies the relationship between the current document and the linked document
         */
        "rel": string | undefined;
        /**
          * Set the button size
          * @default 'regular'
         */
        "size": 'regular' | 'small';
        /**
          * The target attribute specifies where to open the linked document
         */
        "target": string | undefined;
        /**
          * Set button types
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button' | 'link';
        /**
          * The value attribute specifies the value for a <button> element.
         */
        "value": string;
    }
    /**
     * A card is a box containing structured, actionable content on a single topic.
     */
    interface GcdsCard {
        /**
          * The badge attribute specifies the badge text that appears in the top left corner of the card. 20 character limit.
         */
        "badge": string;
        /**
          * The card title attribute specifies the title that appears on the card
         */
        "cardTitle": string;
        /**
          * The card title tag property specifies the HTML heading element for the title. This property does not modify the font size. It is used to assign the heading level in order to maintain heading hierarchy and accessibility for assistive technologies.
          * @default 'a'
         */
        "cardTitleTag": 'h3' | 'h4' | 'h5' | 'h6' | 'a';
        /**
          * The description attribute specifies the body of text that appears on the card
         */
        "description": string;
        /**
          * The href attribute specifies the URL of the page the link goes to
         */
        "href": string;
        /**
          * The img alt attribute specifies the alt text for the image provided, if none, image will be decorative
         */
        "imgAlt": string;
        /**
          * The img src attribute specifies the path to the image
         */
        "imgSrc": string;
        /**
          * The rel attribute specifies the relationship between the current document and the linked document
         */
        "rel"?: string | undefined;
        /**
          * The target attribute specifies where to open the linked document
         */
        "target"?: string;
    }
    /**
     * Checkboxes provide a set of options for multiple responses.
     */
    interface GcdsCheckboxes {
        /**
          * If true, the checkobox will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Check the validity of gcds-checkboxes
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Specifies if the checkboxes are disabled or not.
         */
        "disabled": boolean;
        /**
          * Set this to display an error message for invalid <gcds-checkboxes>
         */
        "errorMessage": string;
        /**
          * The ID of the form that the checkboxes belong to.
         */
        "form"?: string;
        /**
          * Get validationMessage of gcds-checkboxes
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * For single checkbox, specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * For checkbox groups, specifies if the legend is hidden or not.
          * @default false
         */
        "hideLegend"?: boolean;
        /**
          * Hint displayed below the label.
         */
        "hint": string;
        /**
          * Set the legend for fieldset form group.
         */
        "legend": string;
        /**
          * Name attribute for a checkboxes element.
         */
        "name": string;
        /**
          * Options to render checkboxes buttons
         */
        "options": string | Array<CheckboxObject>;
        /**
          * Specifies if the checkboxes are required or not.
         */
        "required": boolean;
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the checkboxes, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Value for checkboxes component.
          * @default []
         */
        "value": string | Array<string>;
    }
    /**
     * A container is a basic box layout with a set width for its contents.
     */
    interface GcdsContainer {
        /**
          * Defines if the container has a border.
          * @default false
         */
        "border"?: boolean;
        /**
          * Defines if the container is centered.
          * @default false
         */
        "centered"?: boolean;
        /**
          * Defines if the container is the main page container. When true, the width will be set to 90% for smaller screens to ensure consistency with the responsiveness of other core layout components (header + footer).
          * @default false
         */
        "mainContainer"?: boolean;
        /**
          * Container margin. Left and right margins won't be applied if the container is centered.
         */
        "margin"?: SpacingValues;
        /**
          * Defines the container's padding.
         */
        "padding"?: SpacingValues;
        /**
          * Defines container size.
          * @default 'full'
         */
        "size"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Set tag for container.
          * @default 'div'
         */
        "tag"?: string;
    }
    /**
     * A date input is a space to enter a known date.
     */
    interface GcdsDateInput {
        /**
          * If true, the date-input will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Check the validity of gcds-date-input
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Specifies if the date input is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message displayed below the legend and above form fields.
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the date-input field belongs to.
         */
        "form"?: string;
        /**
          * Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements.
         */
        "format": 'full' | 'compact';
        /**
          * Get validationMessage of gcds-date-input
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * Hint displayed below the legend and above form fields.
         */
        "hint"?: string;
        /**
          * Fieldset legend
         */
        "legend": string;
        /**
          * The maximum date that the date-input field can accept. Format: YYYY-MM-DD or YYYY-MM
         */
        "max"?: string;
        /**
          * The minimum date that the date-input field can accept. Format: YYYY-MM-DD or YYYY-MM
         */
        "min"?: string;
        /**
          * Name attribute for the date input.
         */
        "name": string;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the date-input, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Combined date value from the two/three form elements. Format: YYYY-MM-DD or YYYY-MM
         */
        "value"?: string;
    }
    /**
     * Date modified is an indicator of the last update to a webpage or application.
     */
    interface GcdsDateModified {
        /**
          * Set date modified type. Default is date.
          * @default 'date'
         */
        "type": 'date' | 'version';
    }
    /**
     * Details is an interactive switch for a person to expand or collapse content.
     */
    interface GcdsDetails {
        /**
          * The details title summarizes the panel content.
         */
        "detailsTitle": string;
        /**
          * Defines if the details panel is open by default or not.
          * @default false
         */
        "open"?: boolean;
        /**
          * Methods
         */
        "toggle": () => Promise<void>;
    }
    /**
     * An error message is a description of a problem blocking a user goal.
     */
    interface GcdsErrorMessage {
        /**
          * Id attribute for the error message.
         */
        "messageId": string;
    }
    /**
     * An error summary is a list of user errors in a form.
     */
    interface GcdsErrorSummary {
        /**
          * Object of list items for error list. Format: { link-href: link-label }
         */
        "errorLinks": string | object;
        /**
          * Set error summary heading
         */
        "heading"?: string;
        /**
          * Specifies if the error summary should listen for GcdsError event to generate error list.
          * @default true
         */
        "listen"?: boolean;
    }
    /**
     * A fieldset is a group of multiple form components or elements.
     */
    interface GcdsFieldset {
        /**
          * Hint displayed below the legend.
         */
        "hint": string;
        /**
          * The title for the contents of the fieldset
         */
        "legend": string;
        /**
          * Sets the appropriate font size for the fieldset legend.
         */
        "legendSize": 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    }
    /**
     * A file uploader is a space to select and add supporting documentation.
     */
    interface GcdsFileUploader {
        /**
          * Defines the file types the file uploader accepts.
         */
        "accept": string;
        /**
          * If true, the file uploader will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Check the validity of gcds-file-uploader
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Specifies if a file uploader element is disabled or not.
          * @default false
         */
        "disabled": boolean;
        /**
          * Error message for an invalid file uploader element.
         */
        "errorMessage": string;
        /**
          * FileList of uploaded files to input
         */
        "files": FileList;
        /**
          * The ID of the form that the file uploader field belongs to.
         */
        "form"?: string;
        /**
          * Get validationMessage of gcds-file-uploader
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label.
         */
        "hint": string;
        /**
          * Form field label.
         */
        "label": string;
        /**
          * Boolean that specifies if the user is allowed to select more than one file.
         */
        "multiple": boolean;
        /**
          * Name attribute for file input element.
         */
        "name": string;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required": boolean;
        /**
          * Id attribute for a file uploader element.
         */
        "uploaderId": string;
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string | number | FileList>
  >;
        /**
          * Read-only property of the file uploader, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Value for a file uploader element.
          * @default []
         */
        "value": string[];
    }
    /**
     * The footer is the responsive Government of Canada branded footer landmark.
     */
    interface GcdsFooter {
        /**
          * Heading for contextual slot and nav landmark
         */
        "contextualHeading": string;
        /**
          * Object of list items for contextual band. Format: { link-label: link-href }
         */
        "contextualLinks": string | object;
        /**
          * Display mode of the footer
          * @default 'compact'
         */
        "display"?: 'compact' | 'full';
        /**
          * Object of list items for sub-footer. Format: { link-label: link-href }
         */
        "subLinks": string | object;
        /**
          * GcdsSignature - The variant of the Government of Canada wordmark
         */
        "wordmarkVariant": 'colour' | 'white';
    }
    /**
     * A grid is a responsive, flexible column layout to position elements on a page.
     */
    interface GcdsGrid {
        /**
          * If total grid size is less than the size of its grid container, this property aligns the grid along the block (column) axis
         */
        "alignContent"?: ContentValues;
        /**
          * Aligns grid items along the block (column) axis
         */
        "alignItems"?: 'baseline' | 'center' | 'end' | 'start' | 'stretch';
        /**
          * Defines if grid container is centered or not
          * @default false
         */
        "centered"?: boolean;
        /**
          * Defines the default number of grid columns for all viewports if columns-tablet and columns-desktop are not defined. Option to set different layouts for desktop with columns-desktop and for tablet with columns-tablet.
         */
        "columns"?: string;
        /**
          * Provides option to set a different number of grid columns for desktop screens.
         */
        "columnsDesktop"?: string;
        /**
          * Provides option to set a different number of grid columns for tablet screens. If columns-desktop is not defined, columns-tablet will be used to define the number of columns for desktop as well.
         */
        "columnsTablet"?: string;
        /**
          * Defines grid container size
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines element as grid or inline-grid container
          * @default 'grid'
         */
        "display"?: 'grid' | 'inline-grid';
        /**
          * Sets all grid items to have an equal height, based on the tallest item.
          * @default false
         */
        "equalRowHeight"?: boolean;
        /**
          * Defines the horizontal and vertical spacing between items in a grid container for all viewports if gap-tablet and gap-desktop are not defined. Option to set different spacing for desktop with gap-desktop and for tablet with gap-tablet.
          * @default '300'
         */
        "gap"?: GridGapValues;
        /**
          * Provides option to set horizontal and vertical spacing between items in a grid container for desktop screens.
         */
        "gapDesktop"?: GridGapValues;
        /**
          * Provides option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gap-desktop is not defined, gap-tablet will be used to define the spacing for desktop screens as well.
         */
        "gapTablet"?: GridGapValues;
        /**
          * If total grid size is less than the size of its grid container, this property aligns the grid along the inline (row) axis
         */
        "justifyContent"?: ContentValues;
        /**
          * Aligns grid items along the inline (row) axis
         */
        "justifyItems"?: 'center' | 'end' | 'start' | 'stretch';
        /**
          * Sets both the align-content + justify-content properties
         */
        "placeContent"?: ContentValues;
        /**
          * Sets both the align-items + justify-items properties
         */
        "placeItems"?: 'center' | 'end' | 'start' | 'stretch';
        /**
          * Set tag for grid container
          * @default 'div'
         */
        "tag"?: | 'article'
    | 'aside'
    | 'div'
    | 'dl'
    | 'main'
    | 'nav'
    | 'ol'
    | 'section'
    | 'ul';
    }
    /**
     * A grid column is a single column in a grid layout, allowing for flexible content arrangement.
     */
    interface GcdsGridCol {
        /**
          * Optimize grid column size for desktop (1024px and above). Desktop grid column sizes are based on a 12 column grid.
         */
        "desktop"?: | 1
    | 2
    | 3
    | 4
    | 5
    | 6
    | 7
    | 8
    | 9
    | 10
    | 11
    | 12;
        /**
          * Optimize grid column size for tablet (768px - 1023px). Tablet grid column sizes are based on a 6 column grid. The tablet size will also be used for desktop, if desktop is undefined.
          * @default 6
         */
        "tablet"?: 1 | 2 | 3 | 4 | 5 | 6;
        /**
          * Set tag for grid column
          * @default 'div'
         */
        "tag"?: string;
    }
    /**
     * The header is the responsive Government of Canada branded header landmark.
     */
    interface GcdsHeader {
        /**
          * GcdsLangToggle - The href attribute specifies the URL of the opposite language page
         */
        "langHref": string;
        /**
          * GcdsSignature - GCDS signature links to Canada.ca
          * @default true
         */
        "signatureHasLink": boolean;
        /**
          * GcdsSignature - The variant of the Government of Canada signature
         */
        "signatureVariant": | 'colour'
    | 'white';
        /**
          * Top navigation - Skip to content href
         */
        "skipToHref": string;
    }
    /**
     * A heading is a title that establishes levels of hierarchy to organize page content into a structure and matches Canada.ca typography styles.
     */
    interface GcdsHeading {
        /**
          * Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
          * @default true
         */
        "characterLimit"?: boolean;
        /**
          * Sets the main style of the heading.
          * @default 'primary'
         */
        "headingRole"?: 'light' | 'primary' | 'secondary';
        /**
          * Adds margin below the heading. The default margin-botttom is 300.
          * @default '300'
         */
        "marginBottom"?: SpacingValues;
        /**
          * Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 600.
         */
        "marginTop"?: SpacingValues;
        /**
          * Sets the appropriate HTML tag for the selected level.
         */
        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    }
    /**
     * Hint provides additional information or context to help users understand the content or functionality of a related element.
     */
    interface GcdsHint {
        /**
          * Id attribute for the hint.
         */
        "hintId": string;
    }
    /**
     * An icon is a symbol that visually represents an action or idea.
     */
    interface GcdsIcon {
        /**
          * Add icon description.
         */
        "label"?: string;
        /**
          * Add margin to the left of the icon
         */
        "marginLeft"?: SpacingValues;
        /**
          * Add margin to the right of the icon
         */
        "marginRight"?: SpacingValues;
        /**
          * Name of the icon.
         */
        "name": | 'checkmark-circle'
    | 'chevron-down'
    | 'chevron-left'
    | 'chevron-right'
    | 'chevron-up'
    | 'close'
    | 'download'
    | 'email'
    | 'exclamation-circle'
    | 'external'
    | 'info-circle'
    | 'phone'
    | 'search'
    | 'warning-triangle';
        /**
          * Defines the size of the icon.
          * @default 'inherit'
         */
        "size"?: | 'inherit'
    | 'text-small'
    | 'text'
    | 'h6'
    | 'h5'
    | 'h4'
    | 'h3'
    | 'h2'
    | 'h1';
    }
    /**
     * An input is a space to enter short-form information in response to a question or instruction.
     */
    interface GcdsInput {
        /**
          * String to have autocomplete enabled.
         */
        "autocomplete"?: string;
        /**
          * If true, the input will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Check the validity of gcds-input
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Specifies if an input element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid input element.
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the input field belongs to.
         */
        "form"?: string;
        /**
          * Get validationMessage of gcds-input
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label and above the input field.
         */
        "hint"?: string;
        /**
          * Id  attribute for an input element.
         */
        "inputId": string;
        /**
          * @default null
         */
        "inputmode"?: | 'none'
    | 'text'
    | 'decimal'
    | 'numeric'
    | 'tel'
    | 'search'
    | 'email'
    | 'url';
        /**
          * Form field label
         */
        "label": string;
        /**
          * The maximum value that the input field can accept. Only applies to number input type.
         */
        "max"?: number | string;
        /**
          * The maximum number of characters that the input field can accept.
         */
        "maxlength"?: number;
        /**
          * The minimum value that the input field can accept. Only applies to number input type.
         */
        "min"?: number | string;
        /**
          * The minimum number of characters that the input field can accept.
         */
        "minlength"?: number;
        /**
          * Name attribute for an input element.
         */
        "name": string;
        /**
          * Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
         */
        "pattern"?: string;
        /**
          * If true, the input field cannot be modified.
         */
        "readonly"?: boolean;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Size attribute for an input element to provide a visual indication of the expected text length to the user.
         */
        "size"?: number;
        /**
          * A number that specifies the granularity that the value must adhere to. Valid for number type. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
         */
        "step"?: number | 'any';
        /**
          * Array of suggestion options. This creates a datalist element with options to represent permissible or recommended options available to choose from.
         */
        "suggestions"?: string | Array<SuggestionOption>;
        /**
          * Set Input types
          * @default 'text'
         */
        "type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Default value for an input element.
         */
        "value"?: string;
    }
    /**
     * Label for form fields, providing accessibility and context for users.
     */
    interface GcdsLabel {
        /**
          * Specifies if the label is hidden or not.
         */
        "hideLabel"?: boolean;
        /**
          * Form field label
         */
        "label": string;
        /**
          * Defines the label's for attribute.
         */
        "labelFor": string;
        /**
          * Specifies if a form field is required or not.
         */
        "required"?: boolean;
    }
    /**
     * The language toggle is a link to the same content in the other Official Language.
     */
    interface GcdsLangToggle {
        /**
          * The href attribute specifies the URL of the opposite language page
         */
        "href": string;
    }
    /**
     * A link is a navigational element that brings a person to a new page, website, file, or section on the current page.
     */
    interface GcdsLink {
        /**
          * Sets the display behavior of the link
          * @default 'inline'
         */
        "display"?: 'block' | 'inline';
        /**
          * The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink
         */
        "download"?: string | undefined;
        /**
          * Whether the link is external or not
          * @default false
         */
        "external"?: boolean;
        /**
          * The href attribute specifies the URL of the page the link goes to
         */
        "href": string;
        /**
          * The rel attribute specifies the relationship between the current document and the linked document
         */
        "rel"?: string | undefined;
        /**
          * Set the link size
          * @default 'inherit'
         */
        "size"?: 'regular' | 'small' | 'inherit';
        /**
          * The target attribute specifies where to open the linked document
          * @default '_self'
         */
        "target"?: string;
        /**
          * The type specifies the media type of the linked document
         */
        "type"?: string | undefined;
        /**
          * Sets the main style of the link.
          * @default 'default'
         */
        "variant"?: 'default' | 'light';
    }
    /**
     * Navigational group with expandable or dropdown functionality, allowing for better organization of navigation links.
     */
    interface GcdsNavGroup {
        /**
          * Label for the expanded button trigger
         */
        "closeTrigger"?: string;
        /**
          * Focus button element
         */
        "focusTrigger": () => Promise<void>;
        /**
          * Label for the nav group menu
         */
        "menuLabel": string;
        /**
          * Has the nav group been expanded
          * @default false
         */
        "open": boolean;
        /**
          * Label for the collapsed button trigger
         */
        "openTrigger": string;
        /**
          * Toggle the nav open or closed
         */
        "toggleNav": () => Promise<void>;
    }
    /**
     * Navigation link within a navigation group or menu, allowing users to navigate to different sections of a website or application.
     */
    interface GcdsNavLink {
        /**
          * Current page flag
         */
        "current": boolean;
        /**
          * Focus the link element
         */
        "focusLink": () => Promise<void>;
        /**
          * Link href
         */
        "href": string;
    }
    /**
     * The notice is a short, prominent message that’s part of the page content.
     */
    interface GcdsNotice {
        /**
          * Set the notice title.
         */
        "noticeTitle": string;
        /**
          * The notice title tag property specifies the HTML heading element for the title. This property does not modify the font size. It is used to assign the heading level in order to maintain heading hierarchy and accessibility for assistive technologies.
         */
        "noticeTitleTag": 'h2' | 'h3' | 'h4' | 'h5';
        /**
          * Set notice type.
         */
        "type": 'danger' | 'info' | 'success' | 'warning';
    }
    /**
     * Pagination is a division of content into multiple linked pages.
     */
    interface GcdsPagination {
        /**
          * List display - Current page number
         */
        "currentPage": number;
        /**
          * Determines the pagination display style.
          * @default 'list'
         */
        "display": 'list' | 'simple';
        /**
          * Navigation element label
         */
        "label": string;
        /**
          * Simple display - href for next link
         */
        "nextHref": string;
        /**
          * Simple display - lable for next link
         */
        "nextLabel": string;
        /**
          * Simple display - href for previous link
         */
        "previousHref": string;
        /**
          * Simple display - label for previous link
         */
        "previousLabel": string;
        /**
          * List display - Total number of pages
         */
        "totalPages": number;
        /**
          * List display - URL object to create query strings and fragment on links
         */
        "url": string | object;
    }
    /**
     * Phase banner displays a banner indicating the current phase of a project or feature, with optional icons and call-to-action elements.
     */
    interface GcdsPhaseBanner {
        /**
          * Defines banner role.
          * @default 'primary'
         */
        "bannerRole"?: 'primary' | 'secondary';
        /**
          * Defines the container width of the phase banner content
          * @default 'xl'
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines if the banner's position is fixed.
         */
        "isFixed"?: boolean;
    }
    /**
     * Radios provide a set of options for a single response.
     */
    interface GcdsRadios {
        /**
          * If true, the input will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Check the validity of gcds-radios
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Specifies if an input element is disabled or not.
         */
        "disabled": boolean;
        /**
          * Set this to display an error message for invalid radios
         */
        "errorMessage": string;
        /**
          * The ID of the form that the radios belong to.
         */
        "form"?: string;
        /**
          * Get validationMessage of gcds-radios
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * Specifies if the legend is hidden or not.
          * @default false
         */
        "hideLegend"?: boolean;
        /**
          * Hint displayed below the label and above the radio elements
         */
        "hint": string;
        /**
          * Label or legend for the group of radio elements
         */
        "legend": string;
        /**
          * The `name` attribute for the radios, used to group radio elements together
         */
        "name": string;
        /**
          * Options to render radio buttons
         */
        "options": string | Array<RadioObject>;
        /**
          * Specifies if a form field is required or not.
         */
        "required": boolean;
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Default value for the element
         */
        "value": string;
    }
    /**
     * Search is a space for entering keywords to find relevant information.
     */
    interface GcdsSearch {
        /**
          * Sets the action for the search form. Default will be canada.ca global search
          * @default '/sr/srb.html'
         */
        "action": string;
        /**
          * Set the form method of the search form
          * @default 'get'
         */
        "method": 'get' | 'post';
        /**
          * Set the name of the search input
          * @default 'q'
         */
        "name": string;
        /**
          * Set the placeholder and label for the search input. Becomes "Search [placeholder]"
          * @default 'Canada.ca'
         */
        "placeholder": string;
        /**
          * Set the id of the search input
          * @default 'search'
         */
        "searchId": string;
        /**
          * Set a list of predefined search terms
         */
        "suggested": string[] | string;
        /**
          * Set the value of the search input
         */
        "value": string;
    }
    /**
     * A select provides a large list of options for single selection.
     */
    interface GcdsSelect {
        /**
          * String to have autocomplete enabled.
         */
        "autocomplete"?: string;
        /**
          * If true, the select will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Check the validity of gcds-select
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * The default value is an optional value that gets displayed before the user selects an option.
         */
        "defaultValue"?: string;
        /**
          * Specifies if a select element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid select element.
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the select field belongs to.
         */
        "form"?: string;
        /**
          * Get validationMessage of gcds-select
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label.
         */
        "hint"?: string;
        /**
          * Form field label.
         */
        "label": string;
        /**
          * Name attribute for select form element.
         */
        "name": string;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Id attribute for a select element.
         */
        "selectId": string;
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the select, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Value for a select element.
         */
        "value"?: string;
    }
    /**
     * A side navigation is a vertical list of page links on the left side of the screen.
     */
    interface GcdsSideNav {
        "getNavSize": () => Promise<"desktop" | "mobile">;
        /**
          * Label for navigation landmark
         */
        "label": string;
        "updateNavItemQueue": (el: any, includeElement?: boolean) => Promise<void>;
        "updateNavSize": (size: any) => Promise<void>;
    }
    /**
     * The signature is the Government of Canada landmark identifier found in the header or footer.
     */
    interface GcdsSignature {
        /**
          * Has link to canada.ca. Only applies to signature
          * @default false
         */
        "hasLink": boolean;
        /**
          * The type of graphic to render
          * @default 'signature'
         */
        "type": 'signature' | 'wordmark';
        /**
          * The colour variant to render
          * @default 'colour'
         */
        "variant": 'colour' | 'white';
    }
    /**
     * The screenreader-only component is text information only accessible with assistive technologies.
     */
    interface GcdsSrOnly {
        /**
          * Sets the appropriate HTML tag for the content.
          * @default 'p'
         */
        "tag"?: | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'p'
    | 'span';
    }
    /**
     * A stepper is a progress tracker for a multi-step process.
     */
    interface GcdsStepper {
        /**
          * Defines the current step.
         */
        "currentStep": number;
        /**
          * Defines the heading tag to render
          * @default 'h2'
         */
        "tag": 'h1' | 'h2' | 'h3';
        /**
          * Defines the total amount of steps.
         */
        "totalSteps": number;
    }
    /**
     * Text is a styled and formatted paragraph that displays written content in an accessible way and matches Canada.ca typography styles.
     */
    interface GcdsText {
        /**
          * Sets the line length to a maximum amount of characters per line to ensure a comfortable, accessible reading length.
          * @default true
         */
        "characterLimit"?: boolean;
        /**
          * Specifies the display behaviour of the text.
          * @default 'block'
         */
        "display"?: | 'block'
    | 'flex'
    | 'inline'
    | 'inline-block'
    | 'inline-flex'
    | 'none';
        /**
          * Adds margin below the text.
          * @default '300'
         */
        "marginBottom"?: SpacingValues;
        /**
          * Adds margin above the text.
          * @default '0'
         */
        "marginTop"?: SpacingValues;
        /**
          * Sets the appropriate HTML tags for the selected size.
          * @default 'body'
         */
        "size"?: 'body' | 'small';
        /**
          * Sets the main style of the text.
          * @default 'primary'
         */
        "textRole"?: 'light' | 'primary' | 'secondary';
    }
    /**
     * A text area is a space to enter long-form information in response to a question or instruction.
     */
    interface GcdsTextarea {
        /**
          * If true, the input will be focused on component render
         */
        "autofocus": boolean;
        /**
          * Sets the maxlength attribute for the textarea element.
         */
        "characterCount"?: number;
        /**
          * Check the validity of gcds-textarea
         */
        "checkValidity": () => Promise<boolean>;
        /**
          * Defines width for textarea cols (the min-width for textarea's is 50%).
         */
        "cols"?: number;
        /**
          * Specifies if a textarea element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid textarea element.
         */
        "errorMessage"?: string;
        /**
          * Get validationMessage of gcds-textarea
         */
        "getValidationMessage": () => Promise<string>;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label and above the textarea field.
         */
        "hint"?: string;
        /**
          * Form field label
         */
        "label": string;
        /**
          * The minimum number of characters that the input field can accept.
         */
        "minlength"?: number;
        /**
          * Name attribute for a textarea element.
         */
        "name": string;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Default value for textarea rows.
          * @default 5
         */
        "rows"?: number;
        /**
          * Id attribute for a textarea element.
         */
        "textareaId": string;
        /**
          * Call any active validators
         */
        "validate": () => Promise<void>;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn": 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator": Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the textarea, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity": ValidityState;
        /**
          * Default value for an input element.
         */
        "value"?: string;
    }
    /**
     * A top navigation is a horizontal list of page links.
     */
    interface GcdsTopNav {
        /**
          * Nav alignment
          * @default 'left'
         */
        "alignment": 'left' | 'center' | 'right';
        "getNavSize": () => Promise<"desktop" | "mobile">;
        /**
          * Label for navigation landmark
         */
        "label": string;
        "updateNavItemQueue": (el: any, includeElement?: boolean) => Promise<void>;
        "updateNavSize": (size: any) => Promise<void>;
    }
    /**
     * The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
     */
    interface GcdsTopicMenu {
        /**
          * Close all theme menus
         */
        "closeAllMenus": () => Promise<void>;
        "getNavSize": () => Promise<"desktop" | "mobile">;
        /**
          * Sets the homepage styling
          * @default false
         */
        "home": boolean;
        /**
          * Toggle open theme and topic menu
         */
        "toggleNav": () => Promise<void>;
        /**
          * Update keyboard focus queue
         */
        "updateNavItemQueue": (parent: any) => Promise<void>;
        "updateNavSize": (size: any) => Promise<void>;
    }
    /**
     * Verify banner helps users verify they are on an official Government of Canada website by providing clear information on how to recognize legitimate Government of Canada domains and secure connections.
     */
    interface GcdsVerifyBanner {
        /**
          * Defines the container width of the verify banner content
          * @default 'xl'
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines if the banner's position is fixed.
          * @default false
         */
        "isFixed"?: boolean;
    }
}
export interface GcdsAlertCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsAlertElement;
}
export interface GcdsBreadcrumbsItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsBreadcrumbsItemElement;
}
export interface GcdsButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsButtonElement;
}
export interface GcdsCardCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsCardElement;
}
export interface GcdsCheckboxesCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsCheckboxesElement;
}
export interface GcdsDateInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsDateInputElement;
}
export interface GcdsDetailsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsDetailsElement;
}
export interface GcdsErrorSummaryCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsErrorSummaryElement;
}
export interface GcdsFileUploaderCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsFileUploaderElement;
}
export interface GcdsFooterCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsFooterElement;
}
export interface GcdsHeaderCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsHeaderElement;
}
export interface GcdsInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsInputElement;
}
export interface GcdsLangToggleCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsLangToggleElement;
}
export interface GcdsLinkCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsLinkElement;
}
export interface GcdsNavGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsNavGroupElement;
}
export interface GcdsNavLinkCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsNavLinkElement;
}
export interface GcdsPaginationCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsPaginationElement;
}
export interface GcdsRadiosCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsRadiosElement;
}
export interface GcdsSearchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsSearchElement;
}
export interface GcdsSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsSelectElement;
}
export interface GcdsTextareaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLGcdsTextareaElement;
}
declare global {
    interface HTMLGcdsAlertElementEventMap {
        "gcdsDismiss": void;
    }
    /**
     * Alert displays an alert message with an optional heading, icon, and close button.
     */
    interface HTMLGcdsAlertElement extends Components.GcdsAlert, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsAlertElementEventMap>(type: K, listener: (this: HTMLGcdsAlertElement, ev: GcdsAlertCustomEvent<HTMLGcdsAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsAlertElementEventMap>(type: K, listener: (this: HTMLGcdsAlertElement, ev: GcdsAlertCustomEvent<HTMLGcdsAlertElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsAlertElement: {
        prototype: HTMLGcdsAlertElement;
        new (): HTMLGcdsAlertElement;
    };
    /**
     * Breadcrumbs is a path to the current page from each preceding level of the site's hierarchy.
     */
    interface HTMLGcdsBreadcrumbsElement extends Components.GcdsBreadcrumbs, HTMLStencilElement {
    }
    var HTMLGcdsBreadcrumbsElement: {
        prototype: HTMLGcdsBreadcrumbsElement;
        new (): HTMLGcdsBreadcrumbsElement;
    };
    interface HTMLGcdsBreadcrumbsItemElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * Breadcrumbs item represents a single link in the breadcrumbs navigation.
     */
    interface HTMLGcdsBreadcrumbsItemElement extends Components.GcdsBreadcrumbsItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsBreadcrumbsItemElementEventMap>(type: K, listener: (this: HTMLGcdsBreadcrumbsItemElement, ev: GcdsBreadcrumbsItemCustomEvent<HTMLGcdsBreadcrumbsItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsBreadcrumbsItemElementEventMap>(type: K, listener: (this: HTMLGcdsBreadcrumbsItemElement, ev: GcdsBreadcrumbsItemCustomEvent<HTMLGcdsBreadcrumbsItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsBreadcrumbsItemElement: {
        prototype: HTMLGcdsBreadcrumbsItemElement;
        new (): HTMLGcdsBreadcrumbsItemElement;
    };
    interface HTMLGcdsButtonElementEventMap {
        "gcdsClick": string | void;
        "gcdsFocus": void;
        "gcdsBlur": void;
    }
    /**
     * The button is an interactive object that emphasizes an action.
     */
    interface HTMLGcdsButtonElement extends Components.GcdsButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsButtonElementEventMap>(type: K, listener: (this: HTMLGcdsButtonElement, ev: GcdsButtonCustomEvent<HTMLGcdsButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsButtonElementEventMap>(type: K, listener: (this: HTMLGcdsButtonElement, ev: GcdsButtonCustomEvent<HTMLGcdsButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsButtonElement: {
        prototype: HTMLGcdsButtonElement;
        new (): HTMLGcdsButtonElement;
    };
    interface HTMLGcdsCardElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * A card is a box containing structured, actionable content on a single topic.
     */
    interface HTMLGcdsCardElement extends Components.GcdsCard, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsCardElementEventMap>(type: K, listener: (this: HTMLGcdsCardElement, ev: GcdsCardCustomEvent<HTMLGcdsCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsCardElementEventMap>(type: K, listener: (this: HTMLGcdsCardElement, ev: GcdsCardCustomEvent<HTMLGcdsCardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsCardElement: {
        prototype: HTMLGcdsCardElement;
        new (): HTMLGcdsCardElement;
    };
    interface HTMLGcdsCheckboxesElementEventMap {
        "gcdsClick": void;
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsInput": string[];
        "gcdsChange": string[];
        "gcdsError": object;
        "gcdsValid": object;
    }
    /**
     * Checkboxes provide a set of options for multiple responses.
     */
    interface HTMLGcdsCheckboxesElement extends Components.GcdsCheckboxes, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsCheckboxesElementEventMap>(type: K, listener: (this: HTMLGcdsCheckboxesElement, ev: GcdsCheckboxesCustomEvent<HTMLGcdsCheckboxesElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsCheckboxesElementEventMap>(type: K, listener: (this: HTMLGcdsCheckboxesElement, ev: GcdsCheckboxesCustomEvent<HTMLGcdsCheckboxesElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsCheckboxesElement: {
        prototype: HTMLGcdsCheckboxesElement;
        new (): HTMLGcdsCheckboxesElement;
    };
    /**
     * A container is a basic box layout with a set width for its contents.
     */
    interface HTMLGcdsContainerElement extends Components.GcdsContainer, HTMLStencilElement {
    }
    var HTMLGcdsContainerElement: {
        prototype: HTMLGcdsContainerElement;
        new (): HTMLGcdsContainerElement;
    };
    interface HTMLGcdsDateInputElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsInput": string;
        "gcdsChange": string;
        "gcdsError": object;
        "gcdsValid": object;
    }
    /**
     * A date input is a space to enter a known date.
     */
    interface HTMLGcdsDateInputElement extends Components.GcdsDateInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsDateInputElementEventMap>(type: K, listener: (this: HTMLGcdsDateInputElement, ev: GcdsDateInputCustomEvent<HTMLGcdsDateInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsDateInputElementEventMap>(type: K, listener: (this: HTMLGcdsDateInputElement, ev: GcdsDateInputCustomEvent<HTMLGcdsDateInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsDateInputElement: {
        prototype: HTMLGcdsDateInputElement;
        new (): HTMLGcdsDateInputElement;
    };
    /**
     * Date modified is an indicator of the last update to a webpage or application.
     */
    interface HTMLGcdsDateModifiedElement extends Components.GcdsDateModified, HTMLStencilElement {
    }
    var HTMLGcdsDateModifiedElement: {
        prototype: HTMLGcdsDateModifiedElement;
        new (): HTMLGcdsDateModifiedElement;
    };
    interface HTMLGcdsDetailsElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": void;
    }
    /**
     * Details is an interactive switch for a person to expand or collapse content.
     */
    interface HTMLGcdsDetailsElement extends Components.GcdsDetails, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsDetailsElementEventMap>(type: K, listener: (this: HTMLGcdsDetailsElement, ev: GcdsDetailsCustomEvent<HTMLGcdsDetailsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsDetailsElementEventMap>(type: K, listener: (this: HTMLGcdsDetailsElement, ev: GcdsDetailsCustomEvent<HTMLGcdsDetailsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsDetailsElement: {
        prototype: HTMLGcdsDetailsElement;
        new (): HTMLGcdsDetailsElement;
    };
    /**
     * An error message is a description of a problem blocking a user goal.
     */
    interface HTMLGcdsErrorMessageElement extends Components.GcdsErrorMessage, HTMLStencilElement {
    }
    var HTMLGcdsErrorMessageElement: {
        prototype: HTMLGcdsErrorMessageElement;
        new (): HTMLGcdsErrorMessageElement;
    };
    interface HTMLGcdsErrorSummaryElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * An error summary is a list of user errors in a form.
     */
    interface HTMLGcdsErrorSummaryElement extends Components.GcdsErrorSummary, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsErrorSummaryElementEventMap>(type: K, listener: (this: HTMLGcdsErrorSummaryElement, ev: GcdsErrorSummaryCustomEvent<HTMLGcdsErrorSummaryElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsErrorSummaryElementEventMap>(type: K, listener: (this: HTMLGcdsErrorSummaryElement, ev: GcdsErrorSummaryCustomEvent<HTMLGcdsErrorSummaryElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsErrorSummaryElement: {
        prototype: HTMLGcdsErrorSummaryElement;
        new (): HTMLGcdsErrorSummaryElement;
    };
    /**
     * A fieldset is a group of multiple form components or elements.
     */
    interface HTMLGcdsFieldsetElement extends Components.GcdsFieldset, HTMLStencilElement {
    }
    var HTMLGcdsFieldsetElement: {
        prototype: HTMLGcdsFieldsetElement;
        new (): HTMLGcdsFieldsetElement;
    };
    interface HTMLGcdsFileUploaderElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsChange": string[];
        "gcdsInput": string[];
        "gcdsRemoveFile": any;
        "gcdsError": object;
        "gcdsValid": object;
    }
    /**
     * A file uploader is a space to select and add supporting documentation.
     */
    interface HTMLGcdsFileUploaderElement extends Components.GcdsFileUploader, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsFileUploaderElementEventMap>(type: K, listener: (this: HTMLGcdsFileUploaderElement, ev: GcdsFileUploaderCustomEvent<HTMLGcdsFileUploaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsFileUploaderElementEventMap>(type: K, listener: (this: HTMLGcdsFileUploaderElement, ev: GcdsFileUploaderCustomEvent<HTMLGcdsFileUploaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsFileUploaderElement: {
        prototype: HTMLGcdsFileUploaderElement;
        new (): HTMLGcdsFileUploaderElement;
    };
    interface HTMLGcdsFooterElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * The footer is the responsive Government of Canada branded footer landmark.
     */
    interface HTMLGcdsFooterElement extends Components.GcdsFooter, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsFooterElementEventMap>(type: K, listener: (this: HTMLGcdsFooterElement, ev: GcdsFooterCustomEvent<HTMLGcdsFooterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsFooterElementEventMap>(type: K, listener: (this: HTMLGcdsFooterElement, ev: GcdsFooterCustomEvent<HTMLGcdsFooterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsFooterElement: {
        prototype: HTMLGcdsFooterElement;
        new (): HTMLGcdsFooterElement;
    };
    /**
     * A grid is a responsive, flexible column layout to position elements on a page.
     */
    interface HTMLGcdsGridElement extends Components.GcdsGrid, HTMLStencilElement {
    }
    var HTMLGcdsGridElement: {
        prototype: HTMLGcdsGridElement;
        new (): HTMLGcdsGridElement;
    };
    /**
     * A grid column is a single column in a grid layout, allowing for flexible content arrangement.
     */
    interface HTMLGcdsGridColElement extends Components.GcdsGridCol, HTMLStencilElement {
    }
    var HTMLGcdsGridColElement: {
        prototype: HTMLGcdsGridColElement;
        new (): HTMLGcdsGridColElement;
    };
    interface HTMLGcdsHeaderElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * The header is the responsive Government of Canada branded header landmark.
     */
    interface HTMLGcdsHeaderElement extends Components.GcdsHeader, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsHeaderElementEventMap>(type: K, listener: (this: HTMLGcdsHeaderElement, ev: GcdsHeaderCustomEvent<HTMLGcdsHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsHeaderElementEventMap>(type: K, listener: (this: HTMLGcdsHeaderElement, ev: GcdsHeaderCustomEvent<HTMLGcdsHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsHeaderElement: {
        prototype: HTMLGcdsHeaderElement;
        new (): HTMLGcdsHeaderElement;
    };
    /**
     * A heading is a title that establishes levels of hierarchy to organize page content into a structure and matches Canada.ca typography styles.
     */
    interface HTMLGcdsHeadingElement extends Components.GcdsHeading, HTMLStencilElement {
    }
    var HTMLGcdsHeadingElement: {
        prototype: HTMLGcdsHeadingElement;
        new (): HTMLGcdsHeadingElement;
    };
    /**
     * Hint provides additional information or context to help users understand the content or functionality of a related element.
     */
    interface HTMLGcdsHintElement extends Components.GcdsHint, HTMLStencilElement {
    }
    var HTMLGcdsHintElement: {
        prototype: HTMLGcdsHintElement;
        new (): HTMLGcdsHintElement;
    };
    /**
     * An icon is a symbol that visually represents an action or idea.
     */
    interface HTMLGcdsIconElement extends Components.GcdsIcon, HTMLStencilElement {
    }
    var HTMLGcdsIconElement: {
        prototype: HTMLGcdsIconElement;
        new (): HTMLGcdsIconElement;
    };
    interface HTMLGcdsInputElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsInput": string;
        "gcdsSuggestionSelected": string;
        "gcdsChange": string;
        "gcdsError": object;
        "gcdsValid": object;
    }
    /**
     * An input is a space to enter short-form information in response to a question or instruction.
     */
    interface HTMLGcdsInputElement extends Components.GcdsInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsInputElementEventMap>(type: K, listener: (this: HTMLGcdsInputElement, ev: GcdsInputCustomEvent<HTMLGcdsInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsInputElementEventMap>(type: K, listener: (this: HTMLGcdsInputElement, ev: GcdsInputCustomEvent<HTMLGcdsInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsInputElement: {
        prototype: HTMLGcdsInputElement;
        new (): HTMLGcdsInputElement;
    };
    /**
     * Label for form fields, providing accessibility and context for users.
     */
    interface HTMLGcdsLabelElement extends Components.GcdsLabel, HTMLStencilElement {
    }
    var HTMLGcdsLabelElement: {
        prototype: HTMLGcdsLabelElement;
        new (): HTMLGcdsLabelElement;
    };
    interface HTMLGcdsLangToggleElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * The language toggle is a link to the same content in the other Official Language.
     */
    interface HTMLGcdsLangToggleElement extends Components.GcdsLangToggle, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsLangToggleElementEventMap>(type: K, listener: (this: HTMLGcdsLangToggleElement, ev: GcdsLangToggleCustomEvent<HTMLGcdsLangToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsLangToggleElementEventMap>(type: K, listener: (this: HTMLGcdsLangToggleElement, ev: GcdsLangToggleCustomEvent<HTMLGcdsLangToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsLangToggleElement: {
        prototype: HTMLGcdsLangToggleElement;
        new (): HTMLGcdsLangToggleElement;
    };
    interface HTMLGcdsLinkElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": string;
    }
    /**
     * A link is a navigational element that brings a person to a new page, website, file, or section on the current page.
     */
    interface HTMLGcdsLinkElement extends Components.GcdsLink, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsLinkElementEventMap>(type: K, listener: (this: HTMLGcdsLinkElement, ev: GcdsLinkCustomEvent<HTMLGcdsLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsLinkElementEventMap>(type: K, listener: (this: HTMLGcdsLinkElement, ev: GcdsLinkCustomEvent<HTMLGcdsLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsLinkElement: {
        prototype: HTMLGcdsLinkElement;
        new (): HTMLGcdsLinkElement;
    };
    interface HTMLGcdsNavGroupElementEventMap {
        "gcdsClick": void;
        "gcdsFocus": void;
        "gcdsBlur": void;
    }
    /**
     * Navigational group with expandable or dropdown functionality, allowing for better organization of navigation links.
     */
    interface HTMLGcdsNavGroupElement extends Components.GcdsNavGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsNavGroupElementEventMap>(type: K, listener: (this: HTMLGcdsNavGroupElement, ev: GcdsNavGroupCustomEvent<HTMLGcdsNavGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsNavGroupElementEventMap>(type: K, listener: (this: HTMLGcdsNavGroupElement, ev: GcdsNavGroupCustomEvent<HTMLGcdsNavGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsNavGroupElement: {
        prototype: HTMLGcdsNavGroupElement;
        new (): HTMLGcdsNavGroupElement;
    };
    interface HTMLGcdsNavLinkElementEventMap {
        "gcdsClick": string;
        "gcdsFocus": void;
        "gcdsBlur": void;
    }
    /**
     * Navigation link within a navigation group or menu, allowing users to navigate to different sections of a website or application.
     */
    interface HTMLGcdsNavLinkElement extends Components.GcdsNavLink, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsNavLinkElementEventMap>(type: K, listener: (this: HTMLGcdsNavLinkElement, ev: GcdsNavLinkCustomEvent<HTMLGcdsNavLinkElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsNavLinkElementEventMap>(type: K, listener: (this: HTMLGcdsNavLinkElement, ev: GcdsNavLinkCustomEvent<HTMLGcdsNavLinkElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsNavLinkElement: {
        prototype: HTMLGcdsNavLinkElement;
        new (): HTMLGcdsNavLinkElement;
    };
    /**
     * The notice is a short, prominent message that’s part of the page content.
     */
    interface HTMLGcdsNoticeElement extends Components.GcdsNotice, HTMLStencilElement {
    }
    var HTMLGcdsNoticeElement: {
        prototype: HTMLGcdsNoticeElement;
        new (): HTMLGcdsNoticeElement;
    };
    interface HTMLGcdsPaginationElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsClick": object | string;
    }
    /**
     * Pagination is a division of content into multiple linked pages.
     */
    interface HTMLGcdsPaginationElement extends Components.GcdsPagination, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsPaginationElementEventMap>(type: K, listener: (this: HTMLGcdsPaginationElement, ev: GcdsPaginationCustomEvent<HTMLGcdsPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsPaginationElementEventMap>(type: K, listener: (this: HTMLGcdsPaginationElement, ev: GcdsPaginationCustomEvent<HTMLGcdsPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsPaginationElement: {
        prototype: HTMLGcdsPaginationElement;
        new (): HTMLGcdsPaginationElement;
    };
    /**
     * Phase banner displays a banner indicating the current phase of a project or feature, with optional icons and call-to-action elements.
     */
    interface HTMLGcdsPhaseBannerElement extends Components.GcdsPhaseBanner, HTMLStencilElement {
    }
    var HTMLGcdsPhaseBannerElement: {
        prototype: HTMLGcdsPhaseBannerElement;
        new (): HTMLGcdsPhaseBannerElement;
    };
    interface HTMLGcdsRadiosElementEventMap {
        "gcdsInput": string;
        "gcdsChange": string;
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsValid": void;
        "gcdsError": object;
    }
    /**
     * Radios provide a set of options for a single response.
     */
    interface HTMLGcdsRadiosElement extends Components.GcdsRadios, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsRadiosElementEventMap>(type: K, listener: (this: HTMLGcdsRadiosElement, ev: GcdsRadiosCustomEvent<HTMLGcdsRadiosElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsRadiosElementEventMap>(type: K, listener: (this: HTMLGcdsRadiosElement, ev: GcdsRadiosCustomEvent<HTMLGcdsRadiosElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsRadiosElement: {
        prototype: HTMLGcdsRadiosElement;
        new (): HTMLGcdsRadiosElement;
    };
    interface HTMLGcdsSearchElementEventMap {
        "gcdsInput": string;
        "gcdsChange": string;
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsSubmit": string;
    }
    /**
     * Search is a space for entering keywords to find relevant information.
     */
    interface HTMLGcdsSearchElement extends Components.GcdsSearch, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsSearchElementEventMap>(type: K, listener: (this: HTMLGcdsSearchElement, ev: GcdsSearchCustomEvent<HTMLGcdsSearchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsSearchElementEventMap>(type: K, listener: (this: HTMLGcdsSearchElement, ev: GcdsSearchCustomEvent<HTMLGcdsSearchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsSearchElement: {
        prototype: HTMLGcdsSearchElement;
        new (): HTMLGcdsSearchElement;
    };
    interface HTMLGcdsSelectElementEventMap {
        "gcdsChange": string;
        "gcdsInput": string;
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsError": object;
        "gcdsValid": object;
    }
    /**
     * A select provides a large list of options for single selection.
     */
    interface HTMLGcdsSelectElement extends Components.GcdsSelect, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsSelectElementEventMap>(type: K, listener: (this: HTMLGcdsSelectElement, ev: GcdsSelectCustomEvent<HTMLGcdsSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsSelectElementEventMap>(type: K, listener: (this: HTMLGcdsSelectElement, ev: GcdsSelectCustomEvent<HTMLGcdsSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsSelectElement: {
        prototype: HTMLGcdsSelectElement;
        new (): HTMLGcdsSelectElement;
    };
    /**
     * A side navigation is a vertical list of page links on the left side of the screen.
     */
    interface HTMLGcdsSideNavElement extends Components.GcdsSideNav, HTMLStencilElement {
    }
    var HTMLGcdsSideNavElement: {
        prototype: HTMLGcdsSideNavElement;
        new (): HTMLGcdsSideNavElement;
    };
    /**
     * The signature is the Government of Canada landmark identifier found in the header or footer.
     */
    interface HTMLGcdsSignatureElement extends Components.GcdsSignature, HTMLStencilElement {
    }
    var HTMLGcdsSignatureElement: {
        prototype: HTMLGcdsSignatureElement;
        new (): HTMLGcdsSignatureElement;
    };
    /**
     * The screenreader-only component is text information only accessible with assistive technologies.
     */
    interface HTMLGcdsSrOnlyElement extends Components.GcdsSrOnly, HTMLStencilElement {
    }
    var HTMLGcdsSrOnlyElement: {
        prototype: HTMLGcdsSrOnlyElement;
        new (): HTMLGcdsSrOnlyElement;
    };
    /**
     * A stepper is a progress tracker for a multi-step process.
     */
    interface HTMLGcdsStepperElement extends Components.GcdsStepper, HTMLStencilElement {
    }
    var HTMLGcdsStepperElement: {
        prototype: HTMLGcdsStepperElement;
        new (): HTMLGcdsStepperElement;
    };
    /**
     * Text is a styled and formatted paragraph that displays written content in an accessible way and matches Canada.ca typography styles.
     */
    interface HTMLGcdsTextElement extends Components.GcdsText, HTMLStencilElement {
    }
    var HTMLGcdsTextElement: {
        prototype: HTMLGcdsTextElement;
        new (): HTMLGcdsTextElement;
    };
    interface HTMLGcdsTextareaElementEventMap {
        "gcdsFocus": void;
        "gcdsBlur": void;
        "gcdsChange": string;
        "gcdsInput": string;
        "gcdsError": object;
        "gcdsValid": object;
    }
    /**
     * A text area is a space to enter long-form information in response to a question or instruction.
     */
    interface HTMLGcdsTextareaElement extends Components.GcdsTextarea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLGcdsTextareaElementEventMap>(type: K, listener: (this: HTMLGcdsTextareaElement, ev: GcdsTextareaCustomEvent<HTMLGcdsTextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLGcdsTextareaElementEventMap>(type: K, listener: (this: HTMLGcdsTextareaElement, ev: GcdsTextareaCustomEvent<HTMLGcdsTextareaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLGcdsTextareaElement: {
        prototype: HTMLGcdsTextareaElement;
        new (): HTMLGcdsTextareaElement;
    };
    /**
     * A top navigation is a horizontal list of page links.
     */
    interface HTMLGcdsTopNavElement extends Components.GcdsTopNav, HTMLStencilElement {
    }
    var HTMLGcdsTopNavElement: {
        prototype: HTMLGcdsTopNavElement;
        new (): HTMLGcdsTopNavElement;
    };
    /**
     * The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
     */
    interface HTMLGcdsTopicMenuElement extends Components.GcdsTopicMenu, HTMLStencilElement {
    }
    var HTMLGcdsTopicMenuElement: {
        prototype: HTMLGcdsTopicMenuElement;
        new (): HTMLGcdsTopicMenuElement;
    };
    /**
     * Verify banner helps users verify they are on an official Government of Canada website by providing clear information on how to recognize legitimate Government of Canada domains and secure connections.
     */
    interface HTMLGcdsVerifyBannerElement extends Components.GcdsVerifyBanner, HTMLStencilElement {
    }
    var HTMLGcdsVerifyBannerElement: {
        prototype: HTMLGcdsVerifyBannerElement;
        new (): HTMLGcdsVerifyBannerElement;
    };
    interface HTMLElementTagNameMap {
        "gcds-alert": HTMLGcdsAlertElement;
        "gcds-breadcrumbs": HTMLGcdsBreadcrumbsElement;
        "gcds-breadcrumbs-item": HTMLGcdsBreadcrumbsItemElement;
        "gcds-button": HTMLGcdsButtonElement;
        "gcds-card": HTMLGcdsCardElement;
        "gcds-checkboxes": HTMLGcdsCheckboxesElement;
        "gcds-container": HTMLGcdsContainerElement;
        "gcds-date-input": HTMLGcdsDateInputElement;
        "gcds-date-modified": HTMLGcdsDateModifiedElement;
        "gcds-details": HTMLGcdsDetailsElement;
        "gcds-error-message": HTMLGcdsErrorMessageElement;
        "gcds-error-summary": HTMLGcdsErrorSummaryElement;
        "gcds-fieldset": HTMLGcdsFieldsetElement;
        "gcds-file-uploader": HTMLGcdsFileUploaderElement;
        "gcds-footer": HTMLGcdsFooterElement;
        "gcds-grid": HTMLGcdsGridElement;
        "gcds-grid-col": HTMLGcdsGridColElement;
        "gcds-header": HTMLGcdsHeaderElement;
        "gcds-heading": HTMLGcdsHeadingElement;
        "gcds-hint": HTMLGcdsHintElement;
        "gcds-icon": HTMLGcdsIconElement;
        "gcds-input": HTMLGcdsInputElement;
        "gcds-label": HTMLGcdsLabelElement;
        "gcds-lang-toggle": HTMLGcdsLangToggleElement;
        "gcds-link": HTMLGcdsLinkElement;
        "gcds-nav-group": HTMLGcdsNavGroupElement;
        "gcds-nav-link": HTMLGcdsNavLinkElement;
        "gcds-notice": HTMLGcdsNoticeElement;
        "gcds-pagination": HTMLGcdsPaginationElement;
        "gcds-phase-banner": HTMLGcdsPhaseBannerElement;
        "gcds-radios": HTMLGcdsRadiosElement;
        "gcds-search": HTMLGcdsSearchElement;
        "gcds-select": HTMLGcdsSelectElement;
        "gcds-side-nav": HTMLGcdsSideNavElement;
        "gcds-signature": HTMLGcdsSignatureElement;
        "gcds-sr-only": HTMLGcdsSrOnlyElement;
        "gcds-stepper": HTMLGcdsStepperElement;
        "gcds-text": HTMLGcdsTextElement;
        "gcds-textarea": HTMLGcdsTextareaElement;
        "gcds-top-nav": HTMLGcdsTopNavElement;
        "gcds-topic-menu": HTMLGcdsTopicMenuElement;
        "gcds-verify-banner": HTMLGcdsVerifyBannerElement;
    }
}
declare namespace LocalJSX {
    /**
     * Alert displays an alert message with an optional heading, icon, and close button.
     */
    interface GcdsAlert {
        /**
          * Defines alert role.
          * @default 'info'
         */
        "alertRole"?: 'danger' | 'info' | 'success' | 'warning';
        /**
          * Defines the max width of the alert content.
          * @default 'full'
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines the alert heading.
         */
        "heading": string;
        /**
          * Defines if the alert's close button is displayed or not.
          * @default false
         */
        "hideCloseBtn"?: boolean;
        /**
          * Defines if the alert's role icon is displayed or not.
          * @default false
         */
        "hideRoleIcon"?: boolean;
        /**
          * Defines if the alert's position is fixed.
          * @default false
         */
        "isFixed"?: boolean;
        /**
          * Events
         */
        "onGcdsDismiss"?: (event: GcdsAlertCustomEvent<void>) => void;
    }
    /**
     * Breadcrumbs is a path to the current page from each preceding level of the site's hierarchy.
     */
    interface GcdsBreadcrumbs {
        /**
          * Defines if the default canada.ca link is displayed or omitted.
          * @default false
         */
        "hideCanadaLink"?: boolean;
    }
    /**
     * Breadcrumbs item represents a single link in the breadcrumbs navigation.
     */
    interface GcdsBreadcrumbsItem {
        /**
          * Specifies the href of the breadcrumb item.
         */
        "href": string | undefined;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsBreadcrumbsItemCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked. Contains the href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsBreadcrumbsItemCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsBreadcrumbsItemCustomEvent<void>) => void;
    }
    /**
     * The button is an interactive object that emphasizes an action.
     */
    interface GcdsButton {
        /**
          * The buttonId attribute specifies the id for a <button> element.
         */
        "buttonId"?: string;
        /**
          * Set the main style
          * @default 'primary'
         */
        "buttonRole"?: | 'start'
    | 'primary'
    | 'secondary'
    | 'danger';
        /**
          * The disabled attribute for a <button> element.
         */
        "disabled"?: boolean;
        /**
          * The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink
         */
        "download"?: string | undefined;
        /**
          * The href attribute specifies the URL of the page the link goes to
         */
        "href"?: string | undefined;
        /**
          * The name attribute specifies the name for a <button> element.
         */
        "name"?: string | undefined;
        /**
          * Emitted when the button loses focus.
         */
        "onGcdsBlur"?: (event: GcdsButtonCustomEvent<void>) => void;
        /**
          * Emitted when the button has been clicked. Contains the value or href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsButtonCustomEvent<string | void>) => void;
        /**
          * Emitted when the button has focus.
         */
        "onGcdsFocus"?: (event: GcdsButtonCustomEvent<void>) => void;
        /**
          * The rel attribute specifies the relationship between the current document and the linked document
         */
        "rel"?: string | undefined;
        /**
          * Set the button size
          * @default 'regular'
         */
        "size"?: 'regular' | 'small';
        /**
          * The target attribute specifies where to open the linked document
         */
        "target"?: string | undefined;
        /**
          * Set button types
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button' | 'link';
        /**
          * The value attribute specifies the value for a <button> element.
         */
        "value"?: string;
    }
    /**
     * A card is a box containing structured, actionable content on a single topic.
     */
    interface GcdsCard {
        /**
          * The badge attribute specifies the badge text that appears in the top left corner of the card. 20 character limit.
         */
        "badge"?: string;
        /**
          * The card title attribute specifies the title that appears on the card
         */
        "cardTitle": string;
        /**
          * The card title tag property specifies the HTML heading element for the title. This property does not modify the font size. It is used to assign the heading level in order to maintain heading hierarchy and accessibility for assistive technologies.
          * @default 'a'
         */
        "cardTitleTag"?: 'h3' | 'h4' | 'h5' | 'h6' | 'a';
        /**
          * The description attribute specifies the body of text that appears on the card
         */
        "description"?: string;
        /**
          * The href attribute specifies the URL of the page the link goes to
         */
        "href": string;
        /**
          * The img alt attribute specifies the alt text for the image provided, if none, image will be decorative
         */
        "imgAlt"?: string;
        /**
          * The img src attribute specifies the path to the image
         */
        "imgSrc"?: string;
        /**
          * Emitted when the card loses focus.
         */
        "onGcdsBlur"?: (event: GcdsCardCustomEvent<void>) => void;
        /**
          * Emitted when the card has been clicked. Contains the href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsCardCustomEvent<string>) => void;
        /**
          * Emitted when the card has focus.
         */
        "onGcdsFocus"?: (event: GcdsCardCustomEvent<void>) => void;
        /**
          * The rel attribute specifies the relationship between the current document and the linked document
         */
        "rel"?: string | undefined;
        /**
          * The target attribute specifies where to open the linked document
         */
        "target"?: string;
    }
    /**
     * Checkboxes provide a set of options for multiple responses.
     */
    interface GcdsCheckboxes {
        /**
          * If true, the checkobox will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * Specifies if the checkboxes are disabled or not.
         */
        "disabled"?: boolean;
        /**
          * Set this to display an error message for invalid <gcds-checkboxes>
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the checkboxes belong to.
         */
        "form"?: string;
        /**
          * For single checkbox, specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * For checkbox groups, specifies if the legend is hidden or not.
          * @default false
         */
        "hideLegend"?: boolean;
        /**
          * Hint displayed below the label.
         */
        "hint"?: string;
        /**
          * Set the legend for fieldset form group.
         */
        "legend"?: string;
        /**
          * Name attribute for a checkboxes element.
         */
        "name": string;
        /**
          * Emitted when the checkbox loses focus.
         */
        "onGcdsBlur"?: (event: GcdsCheckboxesCustomEvent<void>) => void;
        /**
          * Emitted when a checkbox has been changed. Contains the new value in the event detail.
         */
        "onGcdsChange"?: (event: GcdsCheckboxesCustomEvent<string[]>) => void;
        /**
          * Emitted when the checkbox has been clicked.
         */
        "onGcdsClick"?: (event: GcdsCheckboxesCustomEvent<void>) => void;
        /**
          * Emitted when the checkbox has a validation error.
         */
        "onGcdsError"?: (event: GcdsCheckboxesCustomEvent<object>) => void;
        /**
          * Emitted when the checkbox has focus.
         */
        "onGcdsFocus"?: (event: GcdsCheckboxesCustomEvent<void>) => void;
        /**
          * Emitted when a checkbox has been inputted. Contains the new value in the event detail.
         */
        "onGcdsInput"?: (event: GcdsCheckboxesCustomEvent<string[]>) => void;
        /**
          * Emitted when the checkbox has a validation error.
         */
        "onGcdsValid"?: (event: GcdsCheckboxesCustomEvent<object>) => void;
        /**
          * Options to render checkboxes buttons
         */
        "options": string | Array<CheckboxObject>;
        /**
          * Specifies if the checkboxes are required or not.
         */
        "required"?: boolean;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the checkboxes, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Value for checkboxes component.
          * @default []
         */
        "value"?: string | Array<string>;
    }
    /**
     * A container is a basic box layout with a set width for its contents.
     */
    interface GcdsContainer {
        /**
          * Defines if the container has a border.
          * @default false
         */
        "border"?: boolean;
        /**
          * Defines if the container is centered.
          * @default false
         */
        "centered"?: boolean;
        /**
          * Defines if the container is the main page container. When true, the width will be set to 90% for smaller screens to ensure consistency with the responsiveness of other core layout components (header + footer).
          * @default false
         */
        "mainContainer"?: boolean;
        /**
          * Container margin. Left and right margins won't be applied if the container is centered.
         */
        "margin"?: SpacingValues;
        /**
          * Defines the container's padding.
         */
        "padding"?: SpacingValues;
        /**
          * Defines container size.
          * @default 'full'
         */
        "size"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Set tag for container.
          * @default 'div'
         */
        "tag"?: string;
    }
    /**
     * A date input is a space to enter a known date.
     */
    interface GcdsDateInput {
        /**
          * If true, the date-input will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * Specifies if the date input is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message displayed below the legend and above form fields.
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the date-input field belongs to.
         */
        "form"?: string;
        /**
          * Set this property to full to show month, day, and year form elements. Set it to compact to show only the month and year form elements.
         */
        "format": 'full' | 'compact';
        /**
          * Hint displayed below the legend and above form fields.
         */
        "hint"?: string;
        /**
          * Fieldset legend
         */
        "legend": string;
        /**
          * The maximum date that the date-input field can accept. Format: YYYY-MM-DD or YYYY-MM
         */
        "max"?: string;
        /**
          * The minimum date that the date-input field can accept. Format: YYYY-MM-DD or YYYY-MM
         */
        "min"?: string;
        /**
          * Name attribute for the date input.
         */
        "name": string;
        /**
          * Emitted when a date-input loses focus.
         */
        "onGcdsBlur"?: (event: GcdsDateInputCustomEvent<void>) => void;
        /**
          * Emitted when a date-input has changed. Contains the new value in the event detail.
         */
        "onGcdsChange"?: (event: GcdsDateInputCustomEvent<string>) => void;
        /**
          * Emitted when a date-input has a validation error.
         */
        "onGcdsError"?: (event: GcdsDateInputCustomEvent<object>) => void;
        /**
          * Emitted when a date-input has focus.
         */
        "onGcdsFocus"?: (event: GcdsDateInputCustomEvent<void>) => void;
        /**
          * Emitted when the date-input has received input. Contains the new value in the event detail.
         */
        "onGcdsInput"?: (event: GcdsDateInputCustomEvent<string>) => void;
        /**
          * Emitted when a date-input has validated.
         */
        "onGcdsValid"?: (event: GcdsDateInputCustomEvent<object>) => void;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the date-input, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Combined date value from the two/three form elements. Format: YYYY-MM-DD or YYYY-MM
         */
        "value"?: string;
    }
    /**
     * Date modified is an indicator of the last update to a webpage or application.
     */
    interface GcdsDateModified {
        /**
          * Set date modified type. Default is date.
          * @default 'date'
         */
        "type"?: 'date' | 'version';
    }
    /**
     * Details is an interactive switch for a person to expand or collapse content.
     */
    interface GcdsDetails {
        /**
          * The details title summarizes the panel content.
         */
        "detailsTitle": string;
        /**
          * Emitted when the details loses focus.
         */
        "onGcdsBlur"?: (event: GcdsDetailsCustomEvent<void>) => void;
        /**
          * Emitted when the details has been clicked.
         */
        "onGcdsClick"?: (event: GcdsDetailsCustomEvent<void>) => void;
        /**
          * Emitted when the details has focus.
         */
        "onGcdsFocus"?: (event: GcdsDetailsCustomEvent<void>) => void;
        /**
          * Defines if the details panel is open by default or not.
          * @default false
         */
        "open"?: boolean;
    }
    /**
     * An error message is a description of a problem blocking a user goal.
     */
    interface GcdsErrorMessage {
        /**
          * Id attribute for the error message.
         */
        "messageId": string;
    }
    /**
     * An error summary is a list of user errors in a form.
     */
    interface GcdsErrorSummary {
        /**
          * Object of list items for error list. Format: { link-href: link-label }
         */
        "errorLinks"?: string | object;
        /**
          * Set error summary heading
         */
        "heading"?: string;
        /**
          * Specifies if the error summary should listen for GcdsError event to generate error list.
          * @default true
         */
        "listen"?: boolean;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsErrorSummaryCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked.
         */
        "onGcdsClick"?: (event: GcdsErrorSummaryCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsErrorSummaryCustomEvent<void>) => void;
    }
    /**
     * A fieldset is a group of multiple form components or elements.
     */
    interface GcdsFieldset {
        /**
          * Hint displayed below the legend.
         */
        "hint"?: string;
        /**
          * The title for the contents of the fieldset
         */
        "legend": string;
        /**
          * Sets the appropriate font size for the fieldset legend.
         */
        "legendSize": 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    }
    /**
     * A file uploader is a space to select and add supporting documentation.
     */
    interface GcdsFileUploader {
        /**
          * Defines the file types the file uploader accepts.
         */
        "accept"?: string;
        /**
          * If true, the file uploader will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * Specifies if a file uploader element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid file uploader element.
         */
        "errorMessage"?: string;
        /**
          * FileList of uploaded files to input
         */
        "files"?: FileList;
        /**
          * The ID of the form that the file uploader field belongs to.
         */
        "form"?: string;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label.
         */
        "hint"?: string;
        /**
          * Form field label.
         */
        "label": string;
        /**
          * Boolean that specifies if the user is allowed to select more than one file.
         */
        "multiple"?: boolean;
        /**
          * Name attribute for file input element.
         */
        "name": string;
        /**
          * Emitted when the uploader loses focus.
         */
        "onGcdsBlur"?: (event: GcdsFileUploaderCustomEvent<void>) => void;
        /**
          * Emitted when the user has made a file selection. Contains the new value in the event detail.
         */
        "onGcdsChange"?: (event: GcdsFileUploaderCustomEvent<string[]>) => void;
        /**
          * Emitted when the uploader has a validation error.
         */
        "onGcdsError"?: (event: GcdsFileUploaderCustomEvent<object>) => void;
        /**
          * Emitted when the uploader has focus.
         */
        "onGcdsFocus"?: (event: GcdsFileUploaderCustomEvent<void>) => void;
        /**
          * Emitted when the user has uploaded a file. Contains the new value in the event detail.
         */
        "onGcdsInput"?: (event: GcdsFileUploaderCustomEvent<string[]>) => void;
        /**
          * Remove file and update value.
         */
        "onGcdsRemoveFile"?: (event: GcdsFileUploaderCustomEvent<any>) => void;
        /**
          * Emitted when the uploader has a validation error.
         */
        "onGcdsValid"?: (event: GcdsFileUploaderCustomEvent<object>) => void;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Id attribute for a file uploader element.
         */
        "uploaderId": string;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string | number | FileList>
  >;
        /**
          * Read-only property of the file uploader, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Value for a file uploader element.
          * @default []
         */
        "value"?: string[];
    }
    /**
     * The footer is the responsive Government of Canada branded footer landmark.
     */
    interface GcdsFooter {
        /**
          * Heading for contextual slot and nav landmark
         */
        "contextualHeading"?: string;
        /**
          * Object of list items for contextual band. Format: { link-label: link-href }
         */
        "contextualLinks"?: string | object;
        /**
          * Display mode of the footer
          * @default 'compact'
         */
        "display"?: 'compact' | 'full';
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsFooterCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked. Contains the href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsFooterCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsFooterCustomEvent<void>) => void;
        /**
          * Object of list items for sub-footer. Format: { link-label: link-href }
         */
        "subLinks"?: string | object;
        /**
          * GcdsSignature - The variant of the Government of Canada wordmark
         */
        "wordmarkVariant"?: 'colour' | 'white';
    }
    /**
     * A grid is a responsive, flexible column layout to position elements on a page.
     */
    interface GcdsGrid {
        /**
          * If total grid size is less than the size of its grid container, this property aligns the grid along the block (column) axis
         */
        "alignContent"?: ContentValues;
        /**
          * Aligns grid items along the block (column) axis
         */
        "alignItems"?: 'baseline' | 'center' | 'end' | 'start' | 'stretch';
        /**
          * Defines if grid container is centered or not
          * @default false
         */
        "centered"?: boolean;
        /**
          * Defines the default number of grid columns for all viewports if columns-tablet and columns-desktop are not defined. Option to set different layouts for desktop with columns-desktop and for tablet with columns-tablet.
         */
        "columns"?: string;
        /**
          * Provides option to set a different number of grid columns for desktop screens.
         */
        "columnsDesktop"?: string;
        /**
          * Provides option to set a different number of grid columns for tablet screens. If columns-desktop is not defined, columns-tablet will be used to define the number of columns for desktop as well.
         */
        "columnsTablet"?: string;
        /**
          * Defines grid container size
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines element as grid or inline-grid container
          * @default 'grid'
         */
        "display"?: 'grid' | 'inline-grid';
        /**
          * Sets all grid items to have an equal height, based on the tallest item.
          * @default false
         */
        "equalRowHeight"?: boolean;
        /**
          * Defines the horizontal and vertical spacing between items in a grid container for all viewports if gap-tablet and gap-desktop are not defined. Option to set different spacing for desktop with gap-desktop and for tablet with gap-tablet.
          * @default '300'
         */
        "gap"?: GridGapValues;
        /**
          * Provides option to set horizontal and vertical spacing between items in a grid container for desktop screens.
         */
        "gapDesktop"?: GridGapValues;
        /**
          * Provides option to set horizontal and vertical spacing between items in a grid container for tablet screens. If gap-desktop is not defined, gap-tablet will be used to define the spacing for desktop screens as well.
         */
        "gapTablet"?: GridGapValues;
        /**
          * If total grid size is less than the size of its grid container, this property aligns the grid along the inline (row) axis
         */
        "justifyContent"?: ContentValues;
        /**
          * Aligns grid items along the inline (row) axis
         */
        "justifyItems"?: 'center' | 'end' | 'start' | 'stretch';
        /**
          * Sets both the align-content + justify-content properties
         */
        "placeContent"?: ContentValues;
        /**
          * Sets both the align-items + justify-items properties
         */
        "placeItems"?: 'center' | 'end' | 'start' | 'stretch';
        /**
          * Set tag for grid container
          * @default 'div'
         */
        "tag"?: | 'article'
    | 'aside'
    | 'div'
    | 'dl'
    | 'main'
    | 'nav'
    | 'ol'
    | 'section'
    | 'ul';
    }
    /**
     * A grid column is a single column in a grid layout, allowing for flexible content arrangement.
     */
    interface GcdsGridCol {
        /**
          * Optimize grid column size for desktop (1024px and above). Desktop grid column sizes are based on a 12 column grid.
         */
        "desktop"?: | 1
    | 2
    | 3
    | 4
    | 5
    | 6
    | 7
    | 8
    | 9
    | 10
    | 11
    | 12;
        /**
          * Optimize grid column size for tablet (768px - 1023px). Tablet grid column sizes are based on a 6 column grid. The tablet size will also be used for desktop, if desktop is undefined.
          * @default 6
         */
        "tablet"?: 1 | 2 | 3 | 4 | 5 | 6;
        /**
          * Set tag for grid column
          * @default 'div'
         */
        "tag"?: string;
    }
    /**
     * The header is the responsive Government of Canada branded header landmark.
     */
    interface GcdsHeader {
        /**
          * GcdsLangToggle - The href attribute specifies the URL of the opposite language page
         */
        "langHref": string;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsHeaderCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked. Contains the href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsHeaderCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsHeaderCustomEvent<void>) => void;
        /**
          * GcdsSignature - GCDS signature links to Canada.ca
          * @default true
         */
        "signatureHasLink"?: boolean;
        /**
          * GcdsSignature - The variant of the Government of Canada signature
         */
        "signatureVariant"?: | 'colour'
    | 'white';
        /**
          * Top navigation - Skip to content href
         */
        "skipToHref": string;
    }
    /**
     * A heading is a title that establishes levels of hierarchy to organize page content into a structure and matches Canada.ca typography styles.
     */
    interface GcdsHeading {
        /**
          * Sets the line length to a maximum amount of characters per line for each heading level, ensuring a comfortable, accessible reading length.
          * @default true
         */
        "characterLimit"?: boolean;
        /**
          * Sets the main style of the heading.
          * @default 'primary'
         */
        "headingRole"?: 'light' | 'primary' | 'secondary';
        /**
          * Adds margin below the heading. The default margin-botttom is 300.
          * @default '300'
         */
        "marginBottom"?: SpacingValues;
        /**
          * Adds margin above the heading. The default margin-top for h1 is set to 0, while for h2 to h6 headings, it's 600.
         */
        "marginTop"?: SpacingValues;
        /**
          * Sets the appropriate HTML tag for the selected level.
         */
        "tag": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    }
    /**
     * Hint provides additional information or context to help users understand the content or functionality of a related element.
     */
    interface GcdsHint {
        /**
          * Id attribute for the hint.
         */
        "hintId"?: string;
    }
    /**
     * An icon is a symbol that visually represents an action or idea.
     */
    interface GcdsIcon {
        /**
          * Add icon description.
         */
        "label"?: string;
        /**
          * Add margin to the left of the icon
         */
        "marginLeft"?: SpacingValues;
        /**
          * Add margin to the right of the icon
         */
        "marginRight"?: SpacingValues;
        /**
          * Name of the icon.
         */
        "name": | 'checkmark-circle'
    | 'chevron-down'
    | 'chevron-left'
    | 'chevron-right'
    | 'chevron-up'
    | 'close'
    | 'download'
    | 'email'
    | 'exclamation-circle'
    | 'external'
    | 'info-circle'
    | 'phone'
    | 'search'
    | 'warning-triangle';
        /**
          * Defines the size of the icon.
          * @default 'inherit'
         */
        "size"?: | 'inherit'
    | 'text-small'
    | 'text'
    | 'h6'
    | 'h5'
    | 'h4'
    | 'h3'
    | 'h2'
    | 'h1';
    }
    /**
     * An input is a space to enter short-form information in response to a question or instruction.
     */
    interface GcdsInput {
        /**
          * String to have autocomplete enabled.
         */
        "autocomplete"?: string;
        /**
          * If true, the input will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * Specifies if an input element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid input element.
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the input field belongs to.
         */
        "form"?: string;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label and above the input field.
         */
        "hint"?: string;
        /**
          * Id  attribute for an input element.
         */
        "inputId": string;
        /**
          * @default null
         */
        "inputmode"?: | 'none'
    | 'text'
    | 'decimal'
    | 'numeric'
    | 'tel'
    | 'search'
    | 'email'
    | 'url';
        /**
          * Form field label
         */
        "label": string;
        /**
          * The maximum value that the input field can accept. Only applies to number input type.
         */
        "max"?: number | string;
        /**
          * The maximum number of characters that the input field can accept.
         */
        "maxlength"?: number;
        /**
          * The minimum value that the input field can accept. Only applies to number input type.
         */
        "min"?: number | string;
        /**
          * The minimum number of characters that the input field can accept.
         */
        "minlength"?: number;
        /**
          * Name attribute for an input element.
         */
        "name": string;
        /**
          * Emitted when the input loses focus.
         */
        "onGcdsBlur"?: (event: GcdsInputCustomEvent<void>) => void;
        /**
          * Emitted when the input has changed.
         */
        "onGcdsChange"?: (event: GcdsInputCustomEvent<string>) => void;
        /**
          * Emitted when the input has a validation error.
         */
        "onGcdsError"?: (event: GcdsInputCustomEvent<object>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onGcdsFocus"?: (event: GcdsInputCustomEvent<void>) => void;
        /**
          * Emitted when the element has received input.
         */
        "onGcdsInput"?: (event: GcdsInputCustomEvent<string>) => void;
        /**
          * Emitted when a suggestion is selected.
         */
        "onGcdsSuggestionSelected"?: (event: GcdsInputCustomEvent<string>) => void;
        /**
          * Emitted when the input has a validation error.
         */
        "onGcdsValid"?: (event: GcdsInputCustomEvent<object>) => void;
        /**
          * Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
         */
        "pattern"?: string;
        /**
          * If true, the input field cannot be modified.
         */
        "readonly"?: boolean;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Size attribute for an input element to provide a visual indication of the expected text length to the user.
         */
        "size"?: number;
        /**
          * A number that specifies the granularity that the value must adhere to. Valid for number type. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
         */
        "step"?: number | 'any';
        /**
          * Array of suggestion options. This creates a datalist element with options to represent permissible or recommended options available to choose from.
         */
        "suggestions"?: string | Array<SuggestionOption>;
        /**
          * Set Input types
          * @default 'text'
         */
        "type"?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Default value for an input element.
         */
        "value"?: string;
    }
    /**
     * Label for form fields, providing accessibility and context for users.
     */
    interface GcdsLabel {
        /**
          * Specifies if the label is hidden or not.
         */
        "hideLabel"?: boolean;
        /**
          * Form field label
         */
        "label"?: string;
        /**
          * Defines the label's for attribute.
         */
        "labelFor"?: string;
        /**
          * Specifies if a form field is required or not.
         */
        "required"?: boolean;
    }
    /**
     * The language toggle is a link to the same content in the other Official Language.
     */
    interface GcdsLangToggle {
        /**
          * The href attribute specifies the URL of the opposite language page
         */
        "href": string;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsLangToggleCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked. Contains the href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsLangToggleCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsLangToggleCustomEvent<void>) => void;
    }
    /**
     * A link is a navigational element that brings a person to a new page, website, file, or section on the current page.
     */
    interface GcdsLink {
        /**
          * Sets the display behavior of the link
          * @default 'inline'
         */
        "display"?: 'block' | 'inline';
        /**
          * The download attribute specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink
         */
        "download"?: string | undefined;
        /**
          * Whether the link is external or not
          * @default false
         */
        "external"?: boolean;
        /**
          * The href attribute specifies the URL of the page the link goes to
         */
        "href": string;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsLinkCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked. Contains the href in the event detail.
         */
        "onGcdsClick"?: (event: GcdsLinkCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsLinkCustomEvent<void>) => void;
        /**
          * The rel attribute specifies the relationship between the current document and the linked document
         */
        "rel"?: string | undefined;
        /**
          * Set the link size
          * @default 'inherit'
         */
        "size"?: 'regular' | 'small' | 'inherit';
        /**
          * The target attribute specifies where to open the linked document
          * @default '_self'
         */
        "target"?: string;
        /**
          * The type specifies the media type of the linked document
         */
        "type"?: string | undefined;
        /**
          * Sets the main style of the link.
          * @default 'default'
         */
        "variant"?: 'default' | 'light';
    }
    /**
     * Navigational group with expandable or dropdown functionality, allowing for better organization of navigation links.
     */
    interface GcdsNavGroup {
        /**
          * Label for the expanded button trigger
         */
        "closeTrigger"?: string;
        /**
          * Label for the nav group menu
         */
        "menuLabel": string;
        /**
          * Emitted when the button blurs.
         */
        "onGcdsBlur"?: (event: GcdsNavGroupCustomEvent<void>) => void;
        /**
          * Emitted when the button has been clicked.
         */
        "onGcdsClick"?: (event: GcdsNavGroupCustomEvent<void>) => void;
        /**
          * Emitted when the button has been focus.
         */
        "onGcdsFocus"?: (event: GcdsNavGroupCustomEvent<void>) => void;
        /**
          * Has the nav group been expanded
          * @default false
         */
        "open"?: boolean;
        /**
          * Label for the collapsed button trigger
         */
        "openTrigger": string;
    }
    /**
     * Navigation link within a navigation group or menu, allowing users to navigate to different sections of a website or application.
     */
    interface GcdsNavLink {
        /**
          * Current page flag
         */
        "current"?: boolean;
        /**
          * Link href
         */
        "href": string;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsNavLinkCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked.
         */
        "onGcdsClick"?: (event: GcdsNavLinkCustomEvent<string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsNavLinkCustomEvent<void>) => void;
    }
    /**
     * The notice is a short, prominent message that’s part of the page content.
     */
    interface GcdsNotice {
        /**
          * Set the notice title.
         */
        "noticeTitle": string;
        /**
          * The notice title tag property specifies the HTML heading element for the title. This property does not modify the font size. It is used to assign the heading level in order to maintain heading hierarchy and accessibility for assistive technologies.
         */
        "noticeTitleTag": 'h2' | 'h3' | 'h4' | 'h5';
        /**
          * Set notice type.
         */
        "type": 'danger' | 'info' | 'success' | 'warning';
    }
    /**
     * Pagination is a division of content into multiple linked pages.
     */
    interface GcdsPagination {
        /**
          * List display - Current page number
         */
        "currentPage"?: number;
        /**
          * Determines the pagination display style.
          * @default 'list'
         */
        "display"?: 'list' | 'simple';
        /**
          * Navigation element label
         */
        "label": string;
        /**
          * Simple display - href for next link
         */
        "nextHref"?: string;
        /**
          * Simple display - lable for next link
         */
        "nextLabel"?: string;
        /**
          * Emitted when the link loses focus.
         */
        "onGcdsBlur"?: (event: GcdsPaginationCustomEvent<void>) => void;
        /**
          * Emitted when the link has been clicked. Contains the href in event detail when using simple display, or an object with page and href when using list display.
         */
        "onGcdsClick"?: (event: GcdsPaginationCustomEvent<object | string>) => void;
        /**
          * Emitted when the link has focus.
         */
        "onGcdsFocus"?: (event: GcdsPaginationCustomEvent<void>) => void;
        /**
          * Simple display - href for previous link
         */
        "previousHref"?: string;
        /**
          * Simple display - label for previous link
         */
        "previousLabel"?: string;
        /**
          * List display - Total number of pages
         */
        "totalPages"?: number;
        /**
          * List display - URL object to create query strings and fragment on links
         */
        "url"?: string | object;
    }
    /**
     * Phase banner displays a banner indicating the current phase of a project or feature, with optional icons and call-to-action elements.
     */
    interface GcdsPhaseBanner {
        /**
          * Defines banner role.
          * @default 'primary'
         */
        "bannerRole"?: 'primary' | 'secondary';
        /**
          * Defines the container width of the phase banner content
          * @default 'xl'
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines if the banner's position is fixed.
         */
        "isFixed"?: boolean;
    }
    /**
     * Radios provide a set of options for a single response.
     */
    interface GcdsRadios {
        /**
          * If true, the input will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * Specifies if an input element is disabled or not.
         */
        "disabled"?: boolean;
        /**
          * Set this to display an error message for invalid radios
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the radios belong to.
         */
        "form"?: string;
        /**
          * Specifies if the legend is hidden or not.
          * @default false
         */
        "hideLegend"?: boolean;
        /**
          * Hint displayed below the label and above the radio elements
         */
        "hint"?: string;
        /**
          * Label or legend for the group of radio elements
         */
        "legend": string;
        /**
          * The `name` attribute for the radios, used to group radio elements together
         */
        "name": string;
        /**
          * Emitted when the radios has lost focus
         */
        "onGcdsBlur"?: (event: GcdsRadiosCustomEvent<void>) => void;
        /**
          * Emitted when a radios option is checked (but not when unchecked). Contains new value in event detail
         */
        "onGcdsChange"?: (event: GcdsRadiosCustomEvent<string>) => void;
        /**
          * Emitted when radios has a validation error
         */
        "onGcdsError"?: (event: GcdsRadiosCustomEvent<object>) => void;
        /**
          * Emitted when radios has received focus
         */
        "onGcdsFocus"?: (event: GcdsRadiosCustomEvent<void>) => void;
        /**
          * Emitted when radios has been changed as a direct result of a user action (a radio option has been selected). Contains new value in event detail
         */
        "onGcdsInput"?: (event: GcdsRadiosCustomEvent<string>) => void;
        /**
          * Emitted when radios has passed validation
         */
        "onGcdsValid"?: (event: GcdsRadiosCustomEvent<void>) => void;
        /**
          * Options to render radio buttons
         */
        "options": string | Array<RadioObject>;
        /**
          * Specifies if a form field is required or not.
         */
        "required"?: boolean;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Default value for the element
         */
        "value"?: string;
    }
    /**
     * Search is a space for entering keywords to find relevant information.
     */
    interface GcdsSearch {
        /**
          * Sets the action for the search form. Default will be canada.ca global search
          * @default '/sr/srb.html'
         */
        "action"?: string;
        /**
          * Set the form method of the search form
          * @default 'get'
         */
        "method"?: 'get' | 'post';
        /**
          * Set the name of the search input
          * @default 'q'
         */
        "name"?: string;
        /**
          * Emitted when the search input has lost focus.
         */
        "onGcdsBlur"?: (event: GcdsSearchCustomEvent<void>) => void;
        /**
          * Emitted when the search input value has changed.
         */
        "onGcdsChange"?: (event: GcdsSearchCustomEvent<string>) => void;
        /**
          * Emitted when the search input has gained focus.
         */
        "onGcdsFocus"?: (event: GcdsSearchCustomEvent<void>) => void;
        /**
          * Emitted when the search element has received input.
         */
        "onGcdsInput"?: (event: GcdsSearchCustomEvent<string>) => void;
        /**
          * Emitted when the search form has submitted.
         */
        "onGcdsSubmit"?: (event: GcdsSearchCustomEvent<string>) => void;
        /**
          * Set the placeholder and label for the search input. Becomes "Search [placeholder]"
          * @default 'Canada.ca'
         */
        "placeholder"?: string;
        /**
          * Set the id of the search input
          * @default 'search'
         */
        "searchId"?: string;
        /**
          * Set a list of predefined search terms
         */
        "suggested"?: string[] | string;
        /**
          * Set the value of the search input
         */
        "value"?: string;
    }
    /**
     * A select provides a large list of options for single selection.
     */
    interface GcdsSelect {
        /**
          * String to have autocomplete enabled.
         */
        "autocomplete"?: string;
        /**
          * If true, the select will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * The default value is an optional value that gets displayed before the user selects an option.
         */
        "defaultValue"?: string;
        /**
          * Specifies if a select element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid select element.
         */
        "errorMessage"?: string;
        /**
          * The ID of the form that the select field belongs to.
         */
        "form"?: string;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label.
         */
        "hint"?: string;
        /**
          * Form field label.
         */
        "label": string;
        /**
          * Name attribute for select form element.
         */
        "name": string;
        /**
          * Emitted when the select loses focus.
         */
        "onGcdsBlur"?: (event: GcdsSelectCustomEvent<void>) => void;
        /**
          * Emitted when the select value has changed.
         */
        "onGcdsChange"?: (event: GcdsSelectCustomEvent<string>) => void;
        /**
          * Emitted when the select has a validation error.
         */
        "onGcdsError"?: (event: GcdsSelectCustomEvent<object>) => void;
        /**
          * Emitted when the select has focus.
         */
        "onGcdsFocus"?: (event: GcdsSelectCustomEvent<void>) => void;
        /**
          * Emitted when the select has received input.
         */
        "onGcdsInput"?: (event: GcdsSelectCustomEvent<string>) => void;
        /**
          * Emitted when the select has a validation error.
         */
        "onGcdsValid"?: (event: GcdsSelectCustomEvent<object>) => void;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Id attribute for a select element.
         */
        "selectId": string;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the select, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Value for a select element.
         */
        "value"?: string;
    }
    /**
     * A side navigation is a vertical list of page links on the left side of the screen.
     */
    interface GcdsSideNav {
        /**
          * Label for navigation landmark
         */
        "label": string;
    }
    /**
     * The signature is the Government of Canada landmark identifier found in the header or footer.
     */
    interface GcdsSignature {
        /**
          * Has link to canada.ca. Only applies to signature
          * @default false
         */
        "hasLink"?: boolean;
        /**
          * The type of graphic to render
          * @default 'signature'
         */
        "type"?: 'signature' | 'wordmark';
        /**
          * The colour variant to render
          * @default 'colour'
         */
        "variant"?: 'colour' | 'white';
    }
    /**
     * The screenreader-only component is text information only accessible with assistive technologies.
     */
    interface GcdsSrOnly {
        /**
          * Sets the appropriate HTML tag for the content.
          * @default 'p'
         */
        "tag"?: | 'h1'
    | 'h2'
    | 'h3'
    | 'h4'
    | 'h5'
    | 'h6'
    | 'p'
    | 'span';
    }
    /**
     * A stepper is a progress tracker for a multi-step process.
     */
    interface GcdsStepper {
        /**
          * Defines the current step.
         */
        "currentStep": number;
        /**
          * Defines the heading tag to render
          * @default 'h2'
         */
        "tag"?: 'h1' | 'h2' | 'h3';
        /**
          * Defines the total amount of steps.
         */
        "totalSteps": number;
    }
    /**
     * Text is a styled and formatted paragraph that displays written content in an accessible way and matches Canada.ca typography styles.
     */
    interface GcdsText {
        /**
          * Sets the line length to a maximum amount of characters per line to ensure a comfortable, accessible reading length.
          * @default true
         */
        "characterLimit"?: boolean;
        /**
          * Specifies the display behaviour of the text.
          * @default 'block'
         */
        "display"?: | 'block'
    | 'flex'
    | 'inline'
    | 'inline-block'
    | 'inline-flex'
    | 'none';
        /**
          * Adds margin below the text.
          * @default '300'
         */
        "marginBottom"?: SpacingValues;
        /**
          * Adds margin above the text.
          * @default '0'
         */
        "marginTop"?: SpacingValues;
        /**
          * Sets the appropriate HTML tags for the selected size.
          * @default 'body'
         */
        "size"?: 'body' | 'small';
        /**
          * Sets the main style of the text.
          * @default 'primary'
         */
        "textRole"?: 'light' | 'primary' | 'secondary';
    }
    /**
     * A text area is a space to enter long-form information in response to a question or instruction.
     */
    interface GcdsTextarea {
        /**
          * If true, the input will be focused on component render
         */
        "autofocus"?: boolean;
        /**
          * Sets the maxlength attribute for the textarea element.
         */
        "characterCount"?: number;
        /**
          * Defines width for textarea cols (the min-width for textarea's is 50%).
         */
        "cols"?: number;
        /**
          * Specifies if a textarea element is disabled or not.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Error message for an invalid textarea element.
         */
        "errorMessage"?: string;
        /**
          * Specifies if the label is hidden or not.
          * @default false
         */
        "hideLabel"?: boolean;
        /**
          * Hint displayed below the label and above the textarea field.
         */
        "hint"?: string;
        /**
          * Form field label
         */
        "label": string;
        /**
          * The minimum number of characters that the input field can accept.
         */
        "minlength"?: number;
        /**
          * Name attribute for a textarea element.
         */
        "name": string;
        /**
          * Emitted when the textarea loses focus.
         */
        "onGcdsBlur"?: (event: GcdsTextareaCustomEvent<void>) => void;
        /**
          * Emitted when the textarea has changed.
         */
        "onGcdsChange"?: (event: GcdsTextareaCustomEvent<string>) => void;
        /**
          * Emitted when the textarea has a validation error.
         */
        "onGcdsError"?: (event: GcdsTextareaCustomEvent<object>) => void;
        /**
          * Emitted when the textarea has focus.
         */
        "onGcdsFocus"?: (event: GcdsTextareaCustomEvent<void>) => void;
        /**
          * Emitted when the textarea has received input.
         */
        "onGcdsInput"?: (event: GcdsTextareaCustomEvent<string>) => void;
        /**
          * Emitted when the textarea has a validation error.
         */
        "onGcdsValid"?: (event: GcdsTextareaCustomEvent<object>) => void;
        /**
          * Specifies if a form field is required or not.
          * @default false
         */
        "required"?: boolean;
        /**
          * Default value for textarea rows.
          * @default 5
         */
        "rows"?: number;
        /**
          * Id attribute for a textarea element.
         */
        "textareaId": string;
        /**
          * Set event to call validator
          * @default 'blur'
         */
        "validateOn"?: 'blur' | 'submit' | 'other';
        /**
          * Array of validators
         */
        "validator"?: Array<
    string | ValidatorEntry | Validator<string>
  >;
        /**
          * Read-only property of the textarea, returns a ValidityState object that represents the validity states this element is in.
          * @readonly
         */
        "validity"?: ValidityState;
        /**
          * Default value for an input element.
         */
        "value"?: string;
    }
    /**
     * A top navigation is a horizontal list of page links.
     */
    interface GcdsTopNav {
        /**
          * Nav alignment
          * @default 'left'
         */
        "alignment"?: 'left' | 'center' | 'right';
        /**
          * Label for navigation landmark
         */
        "label": string;
    }
    /**
     * The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
     */
    interface GcdsTopicMenu {
        /**
          * Sets the homepage styling
          * @default false
         */
        "home"?: boolean;
    }
    /**
     * Verify banner helps users verify they are on an official Government of Canada website by providing clear information on how to recognize legitimate Government of Canada domains and secure connections.
     */
    interface GcdsVerifyBanner {
        /**
          * Defines the container width of the verify banner content
          * @default 'xl'
         */
        "container"?: 'full' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
        /**
          * Defines if the banner's position is fixed.
          * @default false
         */
        "isFixed"?: boolean;
    }
    interface IntrinsicElements {
        "gcds-alert": GcdsAlert;
        "gcds-breadcrumbs": GcdsBreadcrumbs;
        "gcds-breadcrumbs-item": GcdsBreadcrumbsItem;
        "gcds-button": GcdsButton;
        "gcds-card": GcdsCard;
        "gcds-checkboxes": GcdsCheckboxes;
        "gcds-container": GcdsContainer;
        "gcds-date-input": GcdsDateInput;
        "gcds-date-modified": GcdsDateModified;
        "gcds-details": GcdsDetails;
        "gcds-error-message": GcdsErrorMessage;
        "gcds-error-summary": GcdsErrorSummary;
        "gcds-fieldset": GcdsFieldset;
        "gcds-file-uploader": GcdsFileUploader;
        "gcds-footer": GcdsFooter;
        "gcds-grid": GcdsGrid;
        "gcds-grid-col": GcdsGridCol;
        "gcds-header": GcdsHeader;
        "gcds-heading": GcdsHeading;
        "gcds-hint": GcdsHint;
        "gcds-icon": GcdsIcon;
        "gcds-input": GcdsInput;
        "gcds-label": GcdsLabel;
        "gcds-lang-toggle": GcdsLangToggle;
        "gcds-link": GcdsLink;
        "gcds-nav-group": GcdsNavGroup;
        "gcds-nav-link": GcdsNavLink;
        "gcds-notice": GcdsNotice;
        "gcds-pagination": GcdsPagination;
        "gcds-phase-banner": GcdsPhaseBanner;
        "gcds-radios": GcdsRadios;
        "gcds-search": GcdsSearch;
        "gcds-select": GcdsSelect;
        "gcds-side-nav": GcdsSideNav;
        "gcds-signature": GcdsSignature;
        "gcds-sr-only": GcdsSrOnly;
        "gcds-stepper": GcdsStepper;
        "gcds-text": GcdsText;
        "gcds-textarea": GcdsTextarea;
        "gcds-top-nav": GcdsTopNav;
        "gcds-topic-menu": GcdsTopicMenu;
        "gcds-verify-banner": GcdsVerifyBanner;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            /**
             * Alert displays an alert message with an optional heading, icon, and close button.
             */
            "gcds-alert": LocalJSX.GcdsAlert & JSXBase.HTMLAttributes<HTMLGcdsAlertElement>;
            /**
             * Breadcrumbs is a path to the current page from each preceding level of the site's hierarchy.
             */
            "gcds-breadcrumbs": LocalJSX.GcdsBreadcrumbs & JSXBase.HTMLAttributes<HTMLGcdsBreadcrumbsElement>;
            /**
             * Breadcrumbs item represents a single link in the breadcrumbs navigation.
             */
            "gcds-breadcrumbs-item": LocalJSX.GcdsBreadcrumbsItem & JSXBase.HTMLAttributes<HTMLGcdsBreadcrumbsItemElement>;
            /**
             * The button is an interactive object that emphasizes an action.
             */
            "gcds-button": LocalJSX.GcdsButton & JSXBase.HTMLAttributes<HTMLGcdsButtonElement>;
            /**
             * A card is a box containing structured, actionable content on a single topic.
             */
            "gcds-card": LocalJSX.GcdsCard & JSXBase.HTMLAttributes<HTMLGcdsCardElement>;
            /**
             * Checkboxes provide a set of options for multiple responses.
             */
            "gcds-checkboxes": LocalJSX.GcdsCheckboxes & JSXBase.HTMLAttributes<HTMLGcdsCheckboxesElement>;
            /**
             * A container is a basic box layout with a set width for its contents.
             */
            "gcds-container": LocalJSX.GcdsContainer & JSXBase.HTMLAttributes<HTMLGcdsContainerElement>;
            /**
             * A date input is a space to enter a known date.
             */
            "gcds-date-input": LocalJSX.GcdsDateInput & JSXBase.HTMLAttributes<HTMLGcdsDateInputElement>;
            /**
             * Date modified is an indicator of the last update to a webpage or application.
             */
            "gcds-date-modified": LocalJSX.GcdsDateModified & JSXBase.HTMLAttributes<HTMLGcdsDateModifiedElement>;
            /**
             * Details is an interactive switch for a person to expand or collapse content.
             */
            "gcds-details": LocalJSX.GcdsDetails & JSXBase.HTMLAttributes<HTMLGcdsDetailsElement>;
            /**
             * An error message is a description of a problem blocking a user goal.
             */
            "gcds-error-message": LocalJSX.GcdsErrorMessage & JSXBase.HTMLAttributes<HTMLGcdsErrorMessageElement>;
            /**
             * An error summary is a list of user errors in a form.
             */
            "gcds-error-summary": LocalJSX.GcdsErrorSummary & JSXBase.HTMLAttributes<HTMLGcdsErrorSummaryElement>;
            /**
             * A fieldset is a group of multiple form components or elements.
             */
            "gcds-fieldset": LocalJSX.GcdsFieldset & JSXBase.HTMLAttributes<HTMLGcdsFieldsetElement>;
            /**
             * A file uploader is a space to select and add supporting documentation.
             */
            "gcds-file-uploader": LocalJSX.GcdsFileUploader & JSXBase.HTMLAttributes<HTMLGcdsFileUploaderElement>;
            /**
             * The footer is the responsive Government of Canada branded footer landmark.
             */
            "gcds-footer": LocalJSX.GcdsFooter & JSXBase.HTMLAttributes<HTMLGcdsFooterElement>;
            /**
             * A grid is a responsive, flexible column layout to position elements on a page.
             */
            "gcds-grid": LocalJSX.GcdsGrid & JSXBase.HTMLAttributes<HTMLGcdsGridElement>;
            /**
             * A grid column is a single column in a grid layout, allowing for flexible content arrangement.
             */
            "gcds-grid-col": LocalJSX.GcdsGridCol & JSXBase.HTMLAttributes<HTMLGcdsGridColElement>;
            /**
             * The header is the responsive Government of Canada branded header landmark.
             */
            "gcds-header": LocalJSX.GcdsHeader & JSXBase.HTMLAttributes<HTMLGcdsHeaderElement>;
            /**
             * A heading is a title that establishes levels of hierarchy to organize page content into a structure and matches Canada.ca typography styles.
             */
            "gcds-heading": LocalJSX.GcdsHeading & JSXBase.HTMLAttributes<HTMLGcdsHeadingElement>;
            /**
             * Hint provides additional information or context to help users understand the content or functionality of a related element.
             */
            "gcds-hint": LocalJSX.GcdsHint & JSXBase.HTMLAttributes<HTMLGcdsHintElement>;
            /**
             * An icon is a symbol that visually represents an action or idea.
             */
            "gcds-icon": LocalJSX.GcdsIcon & JSXBase.HTMLAttributes<HTMLGcdsIconElement>;
            /**
             * An input is a space to enter short-form information in response to a question or instruction.
             */
            "gcds-input": LocalJSX.GcdsInput & JSXBase.HTMLAttributes<HTMLGcdsInputElement>;
            /**
             * Label for form fields, providing accessibility and context for users.
             */
            "gcds-label": LocalJSX.GcdsLabel & JSXBase.HTMLAttributes<HTMLGcdsLabelElement>;
            /**
             * The language toggle is a link to the same content in the other Official Language.
             */
            "gcds-lang-toggle": LocalJSX.GcdsLangToggle & JSXBase.HTMLAttributes<HTMLGcdsLangToggleElement>;
            /**
             * A link is a navigational element that brings a person to a new page, website, file, or section on the current page.
             */
            "gcds-link": LocalJSX.GcdsLink & JSXBase.HTMLAttributes<HTMLGcdsLinkElement>;
            /**
             * Navigational group with expandable or dropdown functionality, allowing for better organization of navigation links.
             */
            "gcds-nav-group": LocalJSX.GcdsNavGroup & JSXBase.HTMLAttributes<HTMLGcdsNavGroupElement>;
            /**
             * Navigation link within a navigation group or menu, allowing users to navigate to different sections of a website or application.
             */
            "gcds-nav-link": LocalJSX.GcdsNavLink & JSXBase.HTMLAttributes<HTMLGcdsNavLinkElement>;
            /**
             * The notice is a short, prominent message that’s part of the page content.
             */
            "gcds-notice": LocalJSX.GcdsNotice & JSXBase.HTMLAttributes<HTMLGcdsNoticeElement>;
            /**
             * Pagination is a division of content into multiple linked pages.
             */
            "gcds-pagination": LocalJSX.GcdsPagination & JSXBase.HTMLAttributes<HTMLGcdsPaginationElement>;
            /**
             * Phase banner displays a banner indicating the current phase of a project or feature, with optional icons and call-to-action elements.
             */
            "gcds-phase-banner": LocalJSX.GcdsPhaseBanner & JSXBase.HTMLAttributes<HTMLGcdsPhaseBannerElement>;
            /**
             * Radios provide a set of options for a single response.
             */
            "gcds-radios": LocalJSX.GcdsRadios & JSXBase.HTMLAttributes<HTMLGcdsRadiosElement>;
            /**
             * Search is a space for entering keywords to find relevant information.
             */
            "gcds-search": LocalJSX.GcdsSearch & JSXBase.HTMLAttributes<HTMLGcdsSearchElement>;
            /**
             * A select provides a large list of options for single selection.
             */
            "gcds-select": LocalJSX.GcdsSelect & JSXBase.HTMLAttributes<HTMLGcdsSelectElement>;
            /**
             * A side navigation is a vertical list of page links on the left side of the screen.
             */
            "gcds-side-nav": LocalJSX.GcdsSideNav & JSXBase.HTMLAttributes<HTMLGcdsSideNavElement>;
            /**
             * The signature is the Government of Canada landmark identifier found in the header or footer.
             */
            "gcds-signature": LocalJSX.GcdsSignature & JSXBase.HTMLAttributes<HTMLGcdsSignatureElement>;
            /**
             * The screenreader-only component is text information only accessible with assistive technologies.
             */
            "gcds-sr-only": LocalJSX.GcdsSrOnly & JSXBase.HTMLAttributes<HTMLGcdsSrOnlyElement>;
            /**
             * A stepper is a progress tracker for a multi-step process.
             */
            "gcds-stepper": LocalJSX.GcdsStepper & JSXBase.HTMLAttributes<HTMLGcdsStepperElement>;
            /**
             * Text is a styled and formatted paragraph that displays written content in an accessible way and matches Canada.ca typography styles.
             */
            "gcds-text": LocalJSX.GcdsText & JSXBase.HTMLAttributes<HTMLGcdsTextElement>;
            /**
             * A text area is a space to enter long-form information in response to a question or instruction.
             */
            "gcds-textarea": LocalJSX.GcdsTextarea & JSXBase.HTMLAttributes<HTMLGcdsTextareaElement>;
            /**
             * A top navigation is a horizontal list of page links.
             */
            "gcds-top-nav": LocalJSX.GcdsTopNav & JSXBase.HTMLAttributes<HTMLGcdsTopNavElement>;
            /**
             * The theme and topic menu is a navigation to the top tasks of Government of Canada websites.
             */
            "gcds-topic-menu": LocalJSX.GcdsTopicMenu & JSXBase.HTMLAttributes<HTMLGcdsTopicMenuElement>;
            /**
             * Verify banner helps users verify they are on an official Government of Canada website by providing clear information on how to recognize legitimate Government of Canada domains and secure connections.
             */
            "gcds-verify-banner": LocalJSX.GcdsVerifyBanner & JSXBase.HTMLAttributes<HTMLGcdsVerifyBannerElement>;
        }
    }
}