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

package/src/components.d.ts

@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import { ExpandCollapseButtonDetails } from './components/ontario-accordion/expandCollapseButtonDetails.interface';
-import { Accordion } from './components/ontario-accordion/accordion.interface';
+import { Accordion, AccordionChangeDetail } from './components/ontario-accordion/accordion.interface';
 import { Language } from './utils/common/language-types';
 import {
 	HeadingContentType,
@@ -15,7 +15,7 @@ import {
 } from './utils/components/callout-aside/callout-aside.interface';
 import { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 import { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
-import { HeadingLevel, Hint, HintContentType } from './utils/common/common.interface';
+import { HeadingLevel, Hint, HintContentType, MenuItem } from './utils/common/common.interface';
 import {
 	HeaderColour,
 	HorizontalImagePositionType,
@@ -49,7 +49,6 @@ import { FooterSocialLinksProps } from './components/ontario-footer/components';
 import {
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
-	MenuItem,
 	OntarioHeaderType,
 } from './components/ontario-header/ontario-header.interface';
 import { IconColour, IconSize } from './components/ontario-icon/icon.types';
@@ -61,7 +60,7 @@ import { TaskStatuses } from './utils/common/task-statuses.enum';
 import { TaskHeadingLevel } from './components/ontario-task/ontario-task';
 import { TaskListHeadingLevel } from './components/ontario-task-list/ontario-task-list';
 export { ExpandCollapseButtonDetails } from './components/ontario-accordion/expandCollapseButtonDetails.interface';
-export { Accordion } from './components/ontario-accordion/accordion.interface';
+export { Accordion, AccordionChangeDetail } from './components/ontario-accordion/accordion.interface';
 export { Language } from './utils/common/language-types';
 export {
 	HeadingContentType,
@@ -70,7 +69,7 @@ export {
 } from './utils/components/callout-aside/callout-aside.interface';
 export { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 export { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
-export { HeadingLevel, Hint, HintContentType } from './utils/common/common.interface';
+export { HeadingLevel, Hint, HintContentType, MenuItem } from './utils/common/common.interface';
 export {
 	HeaderColour,
 	HorizontalImagePositionType,
@@ -104,7 +103,6 @@ export { FooterSocialLinksProps } from './components/ontario-footer/components';
 export {
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
-	MenuItem,
 	OntarioHeaderType,
 } from './components/ontario-header/ontario-header.interface';
 export { IconColour, IconSize } from './components/ontario-icon/icon.types';
@@ -118,8 +116,9 @@ export { TaskListHeadingLevel } from './components/ontario-task-list/ontario-tas
 export namespace Components {
 	interface OntarioAccordion {
 		/**
-		 * Used to include individual accordion data for the accordion component. This is passed in as an array of objects with key-value pairs.  The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.
-		 * @example 	<ontario-accordion 	name="My Accordion" 	accordion-data='[ 		{"label": "Accordion 1", "content": "This is a string"}, 		{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"} 	]' ></ontario-accordion>
+		 * Used to include individual accordion data for the accordion component. Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.  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", "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[];
 		/**
@@ -127,11 +126,6 @@ export namespace Components {
 		 * @example  <ontario-accordion 	name="My Accordion" 	expand-collapse-button='{ 		"expandAllSectionsLabel": "Expand All", 		"collapseAllSectionsLabel": "Collapse All" 	}' 	accordion-data='[ 		{"label": "Accordion 1", "content": ["Item 1", "Item 2", "Item 3"]}, 		{"label": "Accordion 2", "content": ["Item A", "Item B", "Item C"]} 	]' ></ontario-accordion>
 		 */
 		expandCollapseButton?: string | ExpandCollapseButtonDetails;
-		/**
-		 * Used to show whether the accordion is opened or closed.
-		 * @default false
-		 */
-		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.
 		 */
@@ -524,10 +518,17 @@ export namespace Components {
 		 */
 		type: OntarioFooterType;
 	}
+	interface OntarioFormContainer {
+		/**
+		 * Defines the gap (bottom margin) between slotted form elements. If no gap prop is provided, it will default to 'default'.
+		 * @default 'default'
+		 */
+		gap: 'default' | 'condensed';
+	}
 	interface OntarioHeader {
 		/**
 		 * Information pertaining to the application header. This is only necessary for the 'application' header type.  This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
-		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage",      "maxSubheaderDesktopLinks": "3",      "maxSubheaderTabletLinks": "2",      "maxSubheaderMobileLinks": "1"    }'>  </ontario-header>
+		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage", 	"maxSubheaderLinks": { 		"desktop": "3", 		"tablet": "2", 		"mobile": "1" 	}    }' >  </ontario-header>
 		 */
 		applicationHeaderInfo: ApplicationHeaderInfo | string;
 		/**
@@ -564,6 +565,13 @@ export namespace Components {
 		 */
 		type?: OntarioHeaderType;
 	}
+	interface OntarioHeaderOverflowMenu {
+		/**
+		 * The items that will go inside the menu.
+		 * @example <ontario-header-overflow-menu 	menu-items='[{ 		"title": "Link 1", 		"href": "/link-1" 		"linkIsActive": "false" 	},{ 		"title": "Link 2", 		"href": "/link-2" 		"linkIsActive": "false" 	},{ 		"title": "Link 3", 		"href": "/link-3" 		"linkIsActive": "false" 	},{ 		"title": "Link 4", 		"href": "/link-4" 		"linkIsActive": "false" 	}]'> </ontario-header-overflow-menu>
+		 */
+		menuItems: MenuItem[] | string;
+	}
 	interface OntarioHintExpander {
 		/**
 		 * Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component.
@@ -1669,6 +1677,66 @@ export namespace Components {
 		 */
 		iconWidth: IconSize;
 	}
+	interface OntarioIconSortAlphabeticalAscending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth: IconSize;
+	}
+	interface OntarioIconSortAlphabeticalDescending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth: IconSize;
+	}
+	interface OntarioIconSortAscending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth: IconSize;
+	}
+	interface OntarioIconSortDescending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth: IconSize;
+	}
+	interface OntarioIconSortVariant {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth: IconSize;
+	}
 	interface OntarioIconTag {
 		/**
 		 * Set the icon's colour.
@@ -2317,6 +2385,10 @@ export namespace Components {
 		value?: string;
 	}
 }
+export interface OntarioAccordionCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLOntarioAccordionElement;
+}
 export interface OntarioCheckboxesCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioCheckboxesElement;
@@ -2329,6 +2401,10 @@ export interface OntarioDropdownListCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioDropdownListElement;
 }
+export interface OntarioHeaderCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLOntarioHeaderElement;
+}
 export interface OntarioHintExpanderCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioHintExpanderElement;
@@ -2354,7 +2430,57 @@ export interface OntarioTextareaCustomEvent<T> extends CustomEvent<T> {
 	target: HTMLOntarioTextareaElement;
 }
 declare global {
-	interface HTMLOntarioAccordionElement extends Components.OntarioAccordion, HTMLStencilElement {}
+	interface HTMLOntarioAccordionElementEventMap {
+		accordionChange: AccordionChangeDetail;
+	}
+	interface HTMLOntarioAccordionElement extends Components.OntarioAccordion, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLOntarioAccordionElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioAccordionElement,
+				ev: OntarioAccordionCustomEvent<HTMLOntarioAccordionElementEventMap[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 HTMLOntarioAccordionElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioAccordionElement,
+				ev: OntarioAccordionCustomEvent<HTMLOntarioAccordionElementEventMap[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 HTMLOntarioAccordionElement: {
 		prototype: HTMLOntarioAccordionElement;
 		new (): HTMLOntarioAccordionElement;
@@ -2595,11 +2721,71 @@ declare global {
 		prototype: HTMLOntarioFooterElement;
 		new (): HTMLOntarioFooterElement;
 	};
-	interface HTMLOntarioHeaderElement extends Components.OntarioHeader, HTMLStencilElement {}
+	interface HTMLOntarioFormContainerElement extends Components.OntarioFormContainer, HTMLStencilElement {}
+	var HTMLOntarioFormContainerElement: {
+		prototype: HTMLOntarioFormContainerElement;
+		new (): HTMLOntarioFormContainerElement;
+	};
+	interface HTMLOntarioHeaderElementEventMap {
+		menuButtonToggled: boolean;
+	}
+	interface HTMLOntarioHeaderElement extends Components.OntarioHeader, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLOntarioHeaderElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioHeaderElement,
+				ev: OntarioHeaderCustomEvent<HTMLOntarioHeaderElementEventMap[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 HTMLOntarioHeaderElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioHeaderElement,
+				ev: OntarioHeaderCustomEvent<HTMLOntarioHeaderElementEventMap[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 HTMLOntarioHeaderElement: {
 		prototype: HTMLOntarioHeaderElement;
 		new (): HTMLOntarioHeaderElement;
 	};
+	interface HTMLOntarioHeaderOverflowMenuElement extends Components.OntarioHeaderOverflowMenu, HTMLStencilElement {}
+	var HTMLOntarioHeaderOverflowMenuElement: {
+		prototype: HTMLOntarioHeaderOverflowMenuElement;
+		new (): HTMLOntarioHeaderOverflowMenuElement;
+	};
 	interface HTMLOntarioHintExpanderElementEventMap {
 		toggleExpanderEvent: MouseEvent | KeyboardEvent;
 	}
@@ -3130,6 +3316,35 @@ declare global {
 		prototype: HTMLOntarioIconSortElement;
 		new (): HTMLOntarioIconSortElement;
 	};
+	interface HTMLOntarioIconSortAlphabeticalAscendingElement
+		extends Components.OntarioIconSortAlphabeticalAscending,
+			HTMLStencilElement {}
+	var HTMLOntarioIconSortAlphabeticalAscendingElement: {
+		prototype: HTMLOntarioIconSortAlphabeticalAscendingElement;
+		new (): HTMLOntarioIconSortAlphabeticalAscendingElement;
+	};
+	interface HTMLOntarioIconSortAlphabeticalDescendingElement
+		extends Components.OntarioIconSortAlphabeticalDescending,
+			HTMLStencilElement {}
+	var HTMLOntarioIconSortAlphabeticalDescendingElement: {
+		prototype: HTMLOntarioIconSortAlphabeticalDescendingElement;
+		new (): HTMLOntarioIconSortAlphabeticalDescendingElement;
+	};
+	interface HTMLOntarioIconSortAscendingElement extends Components.OntarioIconSortAscending, HTMLStencilElement {}
+	var HTMLOntarioIconSortAscendingElement: {
+		prototype: HTMLOntarioIconSortAscendingElement;
+		new (): HTMLOntarioIconSortAscendingElement;
+	};
+	interface HTMLOntarioIconSortDescendingElement extends Components.OntarioIconSortDescending, HTMLStencilElement {}
+	var HTMLOntarioIconSortDescendingElement: {
+		prototype: HTMLOntarioIconSortDescendingElement;
+		new (): HTMLOntarioIconSortDescendingElement;
+	};
+	interface HTMLOntarioIconSortVariantElement extends Components.OntarioIconSortVariant, HTMLStencilElement {}
+	var HTMLOntarioIconSortVariantElement: {
+		prototype: HTMLOntarioIconSortVariantElement;
+		new (): HTMLOntarioIconSortVariantElement;
+	};
 	interface HTMLOntarioIconTagElement extends Components.OntarioIconTag, HTMLStencilElement {}
 	var HTMLOntarioIconTagElement: {
 		prototype: HTMLOntarioIconTagElement;
@@ -3556,7 +3771,9 @@ declare global {
 		'ontario-dropdown-list': HTMLOntarioDropdownListElement;
 		'ontario-fieldset': HTMLOntarioFieldsetElement;
 		'ontario-footer': HTMLOntarioFooterElement;
+		'ontario-form-container': HTMLOntarioFormContainerElement;
 		'ontario-header': HTMLOntarioHeaderElement;
+		'ontario-header-overflow-menu': HTMLOntarioHeaderOverflowMenuElement;
 		'ontario-hint-expander': HTMLOntarioHintExpanderElement;
 		'ontario-hint-text': HTMLOntarioHintTextElement;
 		'ontario-icon-accessibility': HTMLOntarioIconAccessibilityElement;
@@ -3652,6 +3869,11 @@ declare global {
 		'ontario-icon-settings': HTMLOntarioIconSettingsElement;
 		'ontario-icon-share': HTMLOntarioIconShareElement;
 		'ontario-icon-sort': HTMLOntarioIconSortElement;
+		'ontario-icon-sort-alphabetical-ascending': HTMLOntarioIconSortAlphabeticalAscendingElement;
+		'ontario-icon-sort-alphabetical-descending': HTMLOntarioIconSortAlphabeticalDescendingElement;
+		'ontario-icon-sort-ascending': HTMLOntarioIconSortAscendingElement;
+		'ontario-icon-sort-descending': HTMLOntarioIconSortDescendingElement;
+		'ontario-icon-sort-variant': HTMLOntarioIconSortVariantElement;
 		'ontario-icon-tag': HTMLOntarioIconTagElement;
 		'ontario-icon-text-message': HTMLOntarioIconTextMessageElement;
 		'ontario-icon-timer': HTMLOntarioIconTimerElement;
@@ -3687,8 +3909,9 @@ declare global {
 declare namespace LocalJSX {
 	interface OntarioAccordion {
 		/**
-		 * Used to include individual accordion data for the accordion component. This is passed in as an array of objects with key-value pairs.  The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.
-		 * @example 	<ontario-accordion 	name="My Accordion" 	accordion-data='[ 		{"label": "Accordion 1", "content": "This is a string"}, 		{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"} 	]' ></ontario-accordion>
+		 * Used to include individual accordion data for the accordion component. Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.  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", "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[];
 		/**
@@ -3696,11 +3919,6 @@ declare namespace LocalJSX {
 		 * @example  <ontario-accordion 	name="My Accordion" 	expand-collapse-button='{ 		"expandAllSectionsLabel": "Expand All", 		"collapseAllSectionsLabel": "Collapse All" 	}' 	accordion-data='[ 		{"label": "Accordion 1", "content": ["Item 1", "Item 2", "Item 3"]}, 		{"label": "Accordion 2", "content": ["Item A", "Item B", "Item C"]} 	]' ></ontario-accordion>
 		 */
 		expandCollapseButton?: string | ExpandCollapseButtonDetails;
-		/**
-		 * Used to show whether the accordion is opened or closed.
-		 * @default false
-		 */
-		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.
 		 */
@@ -3709,6 +3927,10 @@ declare namespace LocalJSX {
 		 * The name of the accordion component.  This is not optional.
 		 */
 		name?: string;
+		/**
+		 * Emits when open indexes change
+		 */
+		onAccordionChange?: (event: OntarioAccordionCustomEvent<AccordionChangeDetail>) => void;
 	}
 	interface OntarioAside {
 		/**
@@ -4155,10 +4377,17 @@ declare namespace LocalJSX {
 		 */
 		type?: OntarioFooterType;
 	}
+	interface OntarioFormContainer {
+		/**
+		 * Defines the gap (bottom margin) between slotted form elements. If no gap prop is provided, it will default to 'default'.
+		 * @default 'default'
+		 */
+		gap?: 'default' | 'condensed';
+	}
 	interface OntarioHeader {
 		/**
 		 * Information pertaining to the application header. This is only necessary for the 'application' header type.  This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
-		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage",      "maxSubheaderDesktopLinks": "3",      "maxSubheaderTabletLinks": "2",      "maxSubheaderMobileLinks": "1"    }'>  </ontario-header>
+		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage", 	"maxSubheaderLinks": { 		"desktop": "3", 		"tablet": "2", 		"mobile": "1" 	}    }' >  </ontario-header>
 		 */
 		applicationHeaderInfo?: ApplicationHeaderInfo | string;
 		/**
@@ -4189,12 +4418,23 @@ declare namespace LocalJSX {
 		 * The items that will go inside the menu.
 		 */
 		menuItems?: MenuItem[] | string;
+		/**
+		 * This event is toggled when the menu button is pressed. The <ontario-header-overflow-menu> sub-component listens for this event To trigger the showing and hiding of the overflow menu.
+		 */
+		onMenuButtonToggled?: (event: OntarioHeaderCustomEvent<boolean>) => void;
 		/**
 		 * The type of header.
 		 * @default 'application'
 		 */
 		type?: OntarioHeaderType;
 	}
+	interface OntarioHeaderOverflowMenu {
+		/**
+		 * The items that will go inside the menu.
+		 * @example <ontario-header-overflow-menu 	menu-items='[{ 		"title": "Link 1", 		"href": "/link-1" 		"linkIsActive": "false" 	},{ 		"title": "Link 2", 		"href": "/link-2" 		"linkIsActive": "false" 	},{ 		"title": "Link 3", 		"href": "/link-3" 		"linkIsActive": "false" 	},{ 		"title": "Link 4", 		"href": "/link-4" 		"linkIsActive": "false" 	}]'> </ontario-header-overflow-menu>
+		 */
+		menuItems?: MenuItem[] | string;
+	}
 	interface OntarioHintExpander {
 		/**
 		 * Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component.
@@ -5299,6 +5539,66 @@ declare namespace LocalJSX {
 		 */
 		iconWidth?: IconSize;
 	}
+	interface OntarioIconSortAlphabeticalAscending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour?: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth?: IconSize;
+	}
+	interface OntarioIconSortAlphabeticalDescending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour?: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth?: IconSize;
+	}
+	interface OntarioIconSortAscending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour?: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth?: IconSize;
+	}
+	interface OntarioIconSortDescending {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour?: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth?: IconSize;
+	}
+	interface OntarioIconSortVariant {
+		/**
+		 * Set the icon's colour.
+		 * @default 'black'
+		 */
+		colour?: IconColour;
+		/**
+		 * The icon width will autogenerate the height since the icons are in square format, thus preserving the aspect ratio.
+		 * @default 24
+		 */
+		iconWidth?: IconSize;
+	}
 	interface OntarioIconTag {
 		/**
 		 * Set the icon's colour.
@@ -6047,7 +6347,9 @@ declare namespace LocalJSX {
 		'ontario-dropdown-list': OntarioDropdownList;
 		'ontario-fieldset': OntarioFieldset;
 		'ontario-footer': OntarioFooter;
+		'ontario-form-container': OntarioFormContainer;
 		'ontario-header': OntarioHeader;
+		'ontario-header-overflow-menu': OntarioHeaderOverflowMenu;
 		'ontario-hint-expander': OntarioHintExpander;
 		'ontario-hint-text': OntarioHintText;
 		'ontario-icon-accessibility': OntarioIconAccessibility;
@@ -6143,6 +6445,11 @@ declare namespace LocalJSX {
 		'ontario-icon-settings': OntarioIconSettings;
 		'ontario-icon-share': OntarioIconShare;
 		'ontario-icon-sort': OntarioIconSort;
+		'ontario-icon-sort-alphabetical-ascending': OntarioIconSortAlphabeticalAscending;
+		'ontario-icon-sort-alphabetical-descending': OntarioIconSortAlphabeticalDescending;
+		'ontario-icon-sort-ascending': OntarioIconSortAscending;
+		'ontario-icon-sort-descending': OntarioIconSortDescending;
+		'ontario-icon-sort-variant': OntarioIconSortVariant;
 		'ontario-icon-tag': OntarioIconTag;
 		'ontario-icon-text-message': OntarioIconTextMessage;
 		'ontario-icon-timer': OntarioIconTimer;
@@ -6195,7 +6502,10 @@ declare module '@stencil/core' {
 			'ontario-dropdown-list': LocalJSX.OntarioDropdownList & JSXBase.HTMLAttributes<HTMLOntarioDropdownListElement>;
 			'ontario-fieldset': LocalJSX.OntarioFieldset & JSXBase.HTMLAttributes<HTMLOntarioFieldsetElement>;
 			'ontario-footer': LocalJSX.OntarioFooter & JSXBase.HTMLAttributes<HTMLOntarioFooterElement>;
+			'ontario-form-container': LocalJSX.OntarioFormContainer & JSXBase.HTMLAttributes<HTMLOntarioFormContainerElement>;
 			'ontario-header': LocalJSX.OntarioHeader & JSXBase.HTMLAttributes<HTMLOntarioHeaderElement>;
+			'ontario-header-overflow-menu': LocalJSX.OntarioHeaderOverflowMenu &
+				JSXBase.HTMLAttributes<HTMLOntarioHeaderOverflowMenuElement>;
 			'ontario-hint-expander': LocalJSX.OntarioHintExpander & JSXBase.HTMLAttributes<HTMLOntarioHintExpanderElement>;
 			/**
 			 * Use hint text to help users understand how to complete fields in a form.
@@ -6343,6 +6653,16 @@ declare module '@stencil/core' {
 			'ontario-icon-settings': LocalJSX.OntarioIconSettings & JSXBase.HTMLAttributes<HTMLOntarioIconSettingsElement>;
 			'ontario-icon-share': LocalJSX.OntarioIconShare & JSXBase.HTMLAttributes<HTMLOntarioIconShareElement>;
 			'ontario-icon-sort': LocalJSX.OntarioIconSort & JSXBase.HTMLAttributes<HTMLOntarioIconSortElement>;
+			'ontario-icon-sort-alphabetical-ascending': LocalJSX.OntarioIconSortAlphabeticalAscending &
+				JSXBase.HTMLAttributes<HTMLOntarioIconSortAlphabeticalAscendingElement>;
+			'ontario-icon-sort-alphabetical-descending': LocalJSX.OntarioIconSortAlphabeticalDescending &
+				JSXBase.HTMLAttributes<HTMLOntarioIconSortAlphabeticalDescendingElement>;
+			'ontario-icon-sort-ascending': LocalJSX.OntarioIconSortAscending &
+				JSXBase.HTMLAttributes<HTMLOntarioIconSortAscendingElement>;
+			'ontario-icon-sort-descending': LocalJSX.OntarioIconSortDescending &
+				JSXBase.HTMLAttributes<HTMLOntarioIconSortDescendingElement>;
+			'ontario-icon-sort-variant': LocalJSX.OntarioIconSortVariant &
+				JSXBase.HTMLAttributes<HTMLOntarioIconSortVariantElement>;
 			'ontario-icon-tag': LocalJSX.OntarioIconTag & JSXBase.HTMLAttributes<HTMLOntarioIconTagElement>;
 			'ontario-icon-text-message': LocalJSX.OntarioIconTextMessage &
 				JSXBase.HTMLAttributes<HTMLOntarioIconTextMessageElement>;

package/src/global.scss

@@ -1 +1,19 @@
-@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/theme.scss';
+@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/theme.scss';
+
+/**
+ * The following styles (for slotted content in StencilJS components) are added here for the `globalStyle` configuration within the stencil config doc.
+ *
+ * Slotted elements are rendered outside of the component's Shadow DOM, which means scoped styles
+ * defined within the component cannot directly target them. While the `::slotted` pseudo-element can
+ * style direct children of slots, it does not support deeper descendant styling.
+ *
+ * To ensure styling for slotted content works, these styles are defined in a
+ * separate global stylesheet (i.e: `styles/slotted-styles`) and included in the build process via the `globalStyle` config
+ * option. This approach ensures:
+ *
+ * 1. Slotted elements are styled automatically without requiring consumers to add additional classes or external styles.
+ * 2. All styles are centralized within the component library for better maintainability.
+ *
+ */
+@forward './styles/slotted-styles/callouts-asides';
+@forward './styles/slotted-styles/page-alerts';