@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.4

package/dist/types/components/ontario-accordion/ontario-accordion.d.ts

@@ -1,6 +1,8 @@
-import { Accordion } from './accordion.interface';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Accordion, AccordionChangeDetail } from './accordion.interface';
 import { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';
 import { Language } from '../../utils/common/language-types';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioAccordion {
 	host: HTMLElement;
 	/**
@@ -28,38 +30,30 @@ export declare class OntarioAccordion {
 	expandCollapseButton?: string | ExpandCollapseButtonDetails;
 	/**
 	 * Used to include individual accordion data for the accordion component.
-	 * This is passed in as an array of objects with key-value pairs.
+	 * Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.
 	 *
-	 * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.
+	 * The `content` is rendered either as plain text or HTML depending on `accordionContentType`.
 	 *
+	 * @see Accordion
 	 * @example
 	 * 	<ontario-accordion
 	 *		name="My Accordion"
 	 *		accordion-data='[
-	 *			{"label": "Accordion 1", "content": "This is a string"},
+	 *			{"label": "Accordion 1", "content": "This is a string", "isOpen": true},
 	 *			{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}
 	 *		]'
 	 *	></ontario-accordion>
 	 */
 	accordionData: string | Accordion[];
-	/**
-	 * Used to show whether the accordion is opened or closed.
-	 */
-	isOpen: boolean;
 	/**
 	 * The language of the component.
 	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
 	 */
 	language?: Language;
 	/**
-	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
-	 */
-	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	/**
-	 * Handle the language being toggled from the `<ontario-header>`.
-	 * @param event Event object passed when the event is fired.
+	 * Emits when open indexes change
 	 */
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	accordionChange: EventEmitter<AccordionChangeDetail>;
 	/**
 	 * Store the translation dictionary for use within the component.
 	 */
@@ -81,6 +75,17 @@ export declare class OntarioAccordion {
 	 * This state tracks which accordions are open.
 	 */
 	private openAccordionIndexes;
+	/** Unique prefix for a11y ids */
+	private uidPrefix;
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Parse Accordion data, this is used to handle JSON strings from HTML.
 	 */
@@ -90,6 +95,19 @@ export declare class OntarioAccordion {
 	 * passed from HTML, with safe error handling for invalid JSON.
 	 */
 	private parseExpandCollapseButtonDetails;
+	/**
+	 * Emits a typed change event whenever the open/closed state changes.
+	 *
+	 * Consumers can listen for `accordionChange` to:
+	 *  - Read the full set of `openIndexes`
+	 *  - Know which index changed on single-item toggles (`changedIndex`)
+	 *  - Detect bulk actions like expand/collapse all (`isBulk`)
+	 *  - Understand why the change happened (`reason`)
+	 *
+	 * Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.
+	 */
+	private emitAccordionChange;
+	private seedOpenIndexesFromItems;
 	private toggleAccordion;
 	/**
 	 * Toggle all accordions open/close

package/dist/types/components/ontario-back-to-top/ontario-back-to-top.d.ts

@@ -1,4 +1,5 @@
 import { Language } from '../../utils/common/language-types';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioBackToTop {
 	element: HTMLElement;
 	/**
@@ -17,7 +18,11 @@ export declare class OntarioBackToTop {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Scroll to top functionality when the Back to Top button is clicked
 	 */

package/dist/types/components/ontario-checkbox/ontario-checkboxes.d.ts

@@ -6,6 +6,7 @@ import { Hint } from '../../utils/common/common.interface';
 import { Caption } from '../../utils/common/input-caption/caption.interface';
 import { Language } from '../../utils/common/language-types';
 import { InputFocusBlurEvent, RadioAndCheckboxChangeEvent } from '../../utils/events/event-handler.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioCheckboxes implements Checkboxes {
 	element: HTMLElement;
 	internals: ElementInternals;
@@ -168,7 +169,11 @@ export declare class OntarioCheckboxes implements Checkboxes {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *

package/dist/types/components/ontario-date-input/ontario-date-input.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { Language } from '../../utils/common/language-types';
 import { DateInputFieldType, DateInputPlaceholder, DateValidatorReturnType } from './ontario-date-input-interface';
 import { Caption } from '../../utils/common/input-caption/caption.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioDateInput {
 	element: HTMLElement;
 	internals: ElementInternals;
@@ -108,7 +109,11 @@ export declare class OntarioDateInput {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	handleComponentBlur(): void;
 	private translations;
 	private captionState;

package/dist/types/components/ontario-dropdown-list/ontario-dropdown-list.d.ts

@@ -6,6 +6,7 @@ import { Hint } from '../../utils/common/common.interface';
 import { Caption } from '../../utils/common/input-caption/caption.interface';
 import { Language } from '../../utils/common/language-types';
 import { InputFocusBlurEvent, InputInteractionEvent } from '../../utils/events/event-handler.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioDropdownList implements Dropdown {
 	element: HTMLElement;
 	internals: ElementInternals;
@@ -191,7 +192,11 @@ export declare class OntarioDropdownList implements Dropdown {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	validateName(newValue: string): void;
 	validateOptions(newValue: object): void;
 	/**

package/dist/types/components/ontario-fieldset/ontario-fieldset.d.ts

@@ -1,6 +1,8 @@
 import { Fieldset } from './ontario-fieldset.interface';
 import { CaptionType } from '../../utils/common/input-caption/input-caption.types';
+import { FormGap } from '../../utils/components/form-container/form-container.interface';
 export declare class OntarioFieldset implements Fieldset {
+	element: HTMLElement;
 	/**
 	 * The text value used for the legend of the fieldset.
 	 */
@@ -9,6 +11,16 @@ export declare class OntarioFieldset implements Fieldset {
 	 * The size of the fieldset legend. If no prop is passed, it will be `default`.
 	 */
 	legendSize: CaptionType;
+	/**
+	 * The following states are used to determine if the parent is a `ontario-form-container` component.
+	 * This is to help style the form children if they are contained within a fieldset.
+	 */
+	hasFormContainerParent: boolean;
+	/**
+	 * The spacing value applied to fieldset elements when inside an `ontario-form-container`.
+	 * This ensures consistent vertical spacing between form elements when they are grouped inside a fieldset.
+	 */
+	gapValue: FormGap;
 	/**
 	 * Watch for changes to the legendSize prop.
 	 * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.
@@ -20,6 +32,8 @@ export declare class OntarioFieldset implements Fieldset {
 	 */
 	validateLegendText(newValue: string): void;
 	componentWillLoad(): void;
-	private getClass;
+	private getLegendClass;
+	private getFieldsetClass;
+	private initializeFormContainerSettings;
 	render(): any;
 }

package/dist/types/components/ontario-footer/ontario-footer.d.ts

@@ -1,6 +1,7 @@
 import { FooterLinks, OntarioFooterType, ThreeColumnOptions, TwoColumnOptions } from './ontario-footer-interface';
 import { FooterSocialLinksProps } from './components';
 import { Language } from '../../utils/common/language-types';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioFooter {
 	/**
 	 * The language of the component.
@@ -48,7 +49,11 @@ export declare class OntarioFooter {
 	 * connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	private processFooterLinks;
 	private processSocialLinks;
 	private processTwoColumnOptions;

package/dist/types/components/ontario-form-container/ontario-form-container.d.ts

@@ -0,0 +1,13 @@
+export declare class OntarioFormContainer {
+	element: HTMLElement;
+	/**
+	 * Defines the gap (bottom margin) between slotted form elements.
+	 * If no gap prop is provided, it will default to 'default'.
+	 */
+	gap: 'default' | 'condensed';
+	/**
+	 * Returns the pixel value for the selected gap option.
+	 */
+	private getGapValue;
+	render(): any;
+}

package/dist/types/components/ontario-icon/ontario-icon-sort-alphabetical-ascending.d.ts

@@ -0,0 +1,52 @@
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour } from './icon.types';
+export declare class OntarioIconSortAlphabeticalAscending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	iconWidth: IconSize;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	iconWidthState: number;
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth(): void;
+	/**
+	 * Set the icon's colour.
+	 */
+	colour: IconColour;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconColourState: string;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconCustomColourState: string;
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour(): void;
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour;
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad(): void;
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render(): any;
+}

package/dist/types/components/ontario-icon/ontario-icon-sort-alphabetical-descending.d.ts

@@ -0,0 +1,52 @@
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour } from './icon.types';
+export declare class OntarioIconSortAlphabeticalDescending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	iconWidth: IconSize;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	iconWidthState: number;
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth(): void;
+	/**
+	 * Set the icon's colour.
+	 */
+	colour: IconColour;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconColourState: string;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconCustomColourState: string;
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour(): void;
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour;
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad(): void;
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render(): any;
+}

package/dist/types/components/ontario-icon/ontario-icon-sort-ascending.d.ts

@@ -0,0 +1,52 @@
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour } from './icon.types';
+export declare class OntarioIconSortAscending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	iconWidth: IconSize;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	iconWidthState: number;
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth(): void;
+	/**
+	 * Set the icon's colour.
+	 */
+	colour: IconColour;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconColourState: string;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconCustomColourState: string;
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour(): void;
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour;
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad(): void;
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render(): any;
+}

package/dist/types/components/ontario-icon/ontario-icon-sort-descending.d.ts

@@ -0,0 +1,52 @@
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour } from './icon.types';
+export declare class OntarioIconSortDescending implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	iconWidth: IconSize;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	iconWidthState: number;
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth(): void;
+	/**
+	 * Set the icon's colour.
+	 */
+	colour: IconColour;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconColourState: string;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconCustomColourState: string;
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour(): void;
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour;
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad(): void;
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render(): any;
+}

package/dist/types/components/ontario-icon/ontario-icon-sort-variant.d.ts

@@ -0,0 +1,52 @@
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour } from './icon.types';
+export declare class OntarioIconSortVariant implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	iconWidth: IconSize;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	iconWidthState: number;
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	validateWidth(): void;
+	/**
+	 * Set the icon's colour.
+	 */
+	colour: IconColour;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconColourState: string;
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	iconCustomColourState: string;
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	validateColour(): void;
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour;
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad(): void;
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render(): any;
+}

package/dist/types/components/ontario-input/ontario-input.d.ts

@@ -207,7 +207,7 @@ export declare class OntarioInput implements TextInput {
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
 	/**
 	 * Handles an update to the language should the user request a language update from the language toggle.
-	 * @param event The language that has been selected.
+	 * @param {CustomEvent} - The language that has been selected.
 	 */
 	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**

package/dist/types/components/ontario-loading-indicator/ontario-loading-indicator.d.ts

@@ -1,4 +1,5 @@
 import { Language } from '../../utils/common/language-types';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioLoadingIndicator {
 	/**
 	 * The type of loading indicator to render.
@@ -36,7 +37,11 @@ export declare class OntarioLoadingIndicator {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Watch for changes in the `isLoading` prop.
 	 */

package/dist/types/components/ontario-radio-buttons/ontario-radio-buttons.d.ts

@@ -6,6 +6,7 @@ import { Caption } from '../../utils/common/input-caption/caption.interface';
 import { HintExpander } from '../ontario-hint-expander/hint-expander.interface';
 import { Language } from '../../utils/common/language-types';
 import { InputFocusBlurEvent, RadioAndCheckboxChangeEvent } from '../../utils/events/event-handler.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioRadioButtons implements RadioButtons {
 	element: HTMLElement;
 	internals: ElementInternals;
@@ -173,7 +174,11 @@ export declare class OntarioRadioButtons implements RadioButtons {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *

package/dist/types/components/ontario-search-box/ontario-search-box.d.ts

@@ -136,6 +136,7 @@ export declare class OntarioSearchBox {
 	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
 	 */
 	hintTextId: string | null | undefined;
+	translations: any;
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *

package/dist/types/components/ontario-step-indicator/ontario-step-indicator.d.ts

@@ -1,4 +1,5 @@
 import { Language } from '../../utils/common/language-types';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioStepIndicator {
 	host: HTMLElement;
 	/**
@@ -42,7 +43,11 @@ export declare class OntarioStepIndicator {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	translations: any;
 	private handleCustomOnClick;
 	componentWillLoad(): void;

package/dist/types/components/ontario-task/ontario-task.d.ts

@@ -2,6 +2,7 @@ import { TaskStatuses } from '../../utils/common/task-statuses.enum';
 import { Hint } from '../../utils/common/common.interface';
 import { Language } from '../../utils/common/language-types';
 import { HeadingLevel } from '../../utils/common/common.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export type TaskHeadingLevel = Extract<HeadingLevel, 'h2' | 'h3' | 'h4'>;
 export declare class OntarioTask {
 	el: HTMLElement;
@@ -89,10 +90,10 @@ export declare class OntarioTask {
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
 	/**
-	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.
-	 * It is used for changing the component language after the language toggle has been activated.
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
 	 */
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Determines the badge colour based on the current `taskStatusState`.
 	 *

package/dist/types/components/ontario-textarea/ontario-textarea.d.ts

@@ -8,6 +8,7 @@ import {
 	InputInteractionEvent,
 	InputInputEvent,
 } from '../../utils/events/event-handler.interface';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioTextarea implements Input {
 	element: HTMLElement;
 	internals: ElementInternals;
@@ -140,7 +141,11 @@ export declare class OntarioTextarea implements Input {
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.
 	 */
 	handleSetAppLanguage(event: CustomEvent<Language>): void;
-	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>): void;
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *