@ongov/ontario-design-system-component-library 4.3.0-alpha.3 → 4.3.1-alpha.1

package/dist/esm/ontario-accordion_43.entry.js

@@ -16,157 +16,57 @@ import {
 } from './index-500b6334.js';
 import { C as ConsoleMessageClass, a as ConsoleType } from './console-message-0b8e564e.js';
 
-const required = {
-	en: 'required',
-	fr: 'obligatoire',
-};
-const optional = {
-	en: 'optional',
-	fr: 'facultative',
-};
 const accessibility = {
-	moreInfo: {
-		en: 'More information on',
-		fr: 'Des renseignements supplémentaires sur',
-	},
 	checkboxHintExpander: {
 		en: 'is available after the last checkbox item.',
 		fr: 'suivront à la dernière case à cocher.',
 	},
+	moreInfo: {
+		en: 'More information on',
+		fr: 'Des renseignements supplémentaires sur',
+	},
 	singleHintExpander: {
 		en: 'field is available in the next element.',
 		fr: 'suivront au prochain élément.',
 	},
 };
-const backToTop = {
-	top: {
-		en: 'Top',
-		fr: 'Haut',
-	},
-	ariaLabel: {
-		en: 'Scroll back to the top',
-		fr: 'Retour en haut de la page',
-	},
-};
-const loading = {
-	en: 'Loading',
-	fr: 'Chargement',
-};
-const dropdownList = {
-	select: {
-		en: 'Select',
-		fr: 'Sélectionner',
-	},
-};
-const contactUs = {
-	en: 'Contact us',
-	fr: 'Contactez-nous',
-};
 const accessibilityLink = {
-	text: {
-		en: 'Accessibility',
-		fr: 'Accessibilité',
-	},
 	link: {
 		en: 'https://www.ontario.ca/page/accessibility',
 		fr: 'https://www.ontario.ca/fr/page/accessibilite',
 	},
-};
-const privacyLink = {
 	text: {
-		en: 'Privacy',
-		fr: 'Confidentialité',
-	},
-	link: {
-		en: 'https://www.ontario.ca/page/privacy-statement',
-		fr: 'https://www.ontario.ca/fr/page/declaration-concernant-la-protection-de-la-vie-privee',
-	},
-};
-const printerLink = {
-	text: {
-		en: "King's Printer for Ontario,",
-		fr: 'Imprimeur du Roi pour l’Ontario,',
-	},
-	link: {
-		en: 'https://www.ontario.ca/page/copyright-information',
-		fr: 'https://www.ontario.ca/fr/page/droits-dauteur',
-	},
-};
-const languageToggle = {
-	ariaLabel: {
-		en: 'Click to switch language to French',
-		fr: 'Cliquez pour changer de langue en anglais',
+		en: 'Accessibility',
+		fr: 'Accessibilité',
 	},
 };
-const stepIndicator = {
-	back: {
-		en: 'Back',
-		fr: 'Retour',
-	},
-	step: {
-		en: 'Step',
-		fr: 'Étape',
+const accordion = {
+	collapse: {
+		en: 'Collapse all',
+		fr: 'Réduire tout',
 	},
-	of: {
-		en: 'of',
-		fr: 'sur',
+	expand: {
+		en: 'Expand all',
+		fr: 'Agrandir tout',
 	},
-	complete: {
-		en: 'complete',
-		fr: 'complet',
+	expandCollapseAriaLabel: {
+		en: 'Expand or collapse the accordion',
+		fr: "Agrandissez ou réduisez l'accordéon",
 	},
 };
-const header = {
-	ontarioSearchURL: {
-		en: 'https://www.ontario.ca/search/search-results?query=',
-		fr: 'https://www.ontario.ca/fr/recherche/resultats-de-recherche/?query=',
-	},
-	logoLink: {
-		en: 'https://www.ontario.ca/page/government-ontario',
-		fr: 'https://www.ontario.ca/fr/page/gouvernement-de-lontario',
-	},
-	logoAltText: {
-		en: 'Ontario.ca homepage',
-		fr: 'Page d’accueil Ontario.ca',
-	},
-	clearSearchField: {
-		en: 'Clear field',
-		fr: 'Vider le champ',
-	},
-	submit: {
-		en: 'Submit',
-		fr: 'Soumission',
-	},
-	search: {
-		en: 'Search',
-		fr: 'Rechercher',
-	},
-	serviceOntario: {
-		en: 'ServiceOntario',
-		fr: 'ServiceOntario',
-	},
-	openMenu: {
-		en: 'Show navigation menu',
-		fr: 'Ouvrir le menu de navigation',
-	},
-	closeMenu: {
-		en: 'Hide navigation menu',
-		fr: 'Fermer le menu de navigation',
-	},
-	close: {
-		en: 'close',
-		fr: 'fermer',
+const backToTop = {
+	ariaLabel: {
+		en: 'Scroll back to the top',
+		fr: 'Retour en haut de la page',
 	},
-	closeSearch: {
-		en: 'Close search bar',
-		fr: 'Fermer la barre de recherche',
+	top: {
+		en: 'Top',
+		fr: 'Haut',
 	},
 };
-const input = {
-	requiredFieldError: {
-		en: 'This is a required field.',
-		fr: 'Ce champ est obligatoire.',
-	},
+const contactUs = {
+	en: 'Contact us',
+	fr: 'Contactez-nous',
 };
 const dateInput = {
 	caption: {
@@ -174,43 +74,23 @@ const dateInput = {
 		fr: 'Dates exactes',
 	},
 	day: {
-		label: {
-			en: 'Day',
-			fr: 'Jour',
-		},
 		accessibility: {
 			en: '4 digits',
 			fr: '4 chiffres',
 		},
-	},
-	month: {
-		label: {
-			en: 'Month',
-			fr: 'Mois',
-		},
-		accessibility: {
-			en: '1 or 2 digits',
-			fr: '1 ou 2 chiffres',
-		},
-	},
-	year: {
 		label: {
-			en: 'Year',
-			fr: 'Année',
-		},
-		accessibility: {
-			en: '1 or 2 digits',
-			fr: '1 ou 2 chiffres',
+			en: 'Day',
+			fr: 'Jour',
 		},
 	},
 	error: {
 		en: {
 			emptyDay: 'Enter the day.',
-			emptyMonth: 'Enter the month.',
-			emptyYear: 'Enter the year.',
 			emptyDayAndMonth: 'Enter the month and day.',
 			emptyDayAndYear: 'Enter the year and day.',
+			emptyMonth: 'Enter the month.',
 			emptyMonthAndYear: 'Enter the year and month.',
+			emptyYear: 'Enter the year.',
 			invalidDate: 'Enter a valid date.',
 			invalidDay: 'Enter a valid day.',
 			invalidMonth: 'Enter a valid month.',
@@ -218,49 +98,180 @@ const dateInput = {
 		},
 		fr: {
 			emptyDay: 'Saisissez le jour.',
-			emptyMonth: 'Saisissez le mois.',
-			emptyYear: 'Saisissez l’année.',
 			emptyDayAndMonth: 'Saisissez le mois et le jour.',
 			emptyDayAndYear: 'Saisissez l’année et le jour.',
+			emptyMonth: 'Saisissez le mois.',
 			emptyMonthAndYear: 'Saisissez l’année et le mois.',
+			emptyYear: 'Saisissez l’année.',
 			invalidDate: 'Saisissez une date valide.',
 			invalidDay: 'Saisissez un jour valide.',
 			invalidMonth: 'Saisissez un mois valide.',
 			invalidYear: 'Saisissez une année valide.',
 		},
 	},
+	month: {
+		accessibility: {
+			en: '1 or 2 digits',
+			fr: '1 ou 2 chiffres',
+		},
+		label: {
+			en: 'Month',
+			fr: 'Mois',
+		},
+	},
+	year: {
+		accessibility: {
+			en: '1 or 2 digits',
+			fr: '1 ou 2 chiffres',
+		},
+		label: {
+			en: 'Year',
+			fr: 'Année',
+		},
+	},
 };
-const accordion = {
-	expand: {
-		en: 'Expand all',
-		fr: 'Agrandir tout',
+const dropdownList = {
+	select: {
+		en: 'Select',
+		fr: 'Sélectionner',
 	},
-	collapse: {
-		en: 'Collapse all',
-		fr: 'Réduire tout',
+};
+const header = {
+	clearSearchField: {
+		en: 'Clear field',
+		fr: 'Vider le champ',
 	},
-	expandCollapseAriaLabel: {
-		en: 'Expand or collapse the accordion',
-		fr: "Agrandissez ou réduisez l'accordéon",
+	close: {
+		en: 'close',
+		fr: 'fermer',
+	},
+	closeMenu: {
+		en: 'Hide navigation menu',
+		fr: 'Fermer le menu de navigation',
+	},
+	closeSearch: {
+		en: 'Close search bar',
+		fr: 'Fermer la barre de recherche',
+	},
+	logoAltText: {
+		en: 'Ontario.ca homepage',
+		fr: 'Page d’accueil Ontario.ca',
+	},
+	logoLink: {
+		en: 'https://www.ontario.ca/page/government-ontario',
+		fr: 'https://www.ontario.ca/fr/page/gouvernement-de-lontario',
+	},
+	ontarioSearchURL: {
+		en: 'https://www.ontario.ca/search/search-results?query=',
+		fr: 'https://www.ontario.ca/fr/recherche/resultats-de-recherche/?query=',
+	},
+	openMenu: {
+		en: 'Show navigation menu',
+		fr: 'Ouvrir le menu de navigation',
+	},
+	search: {
+		en: 'Search',
+		fr: 'Rechercher',
+	},
+	serviceOntario: {
+		en: 'ServiceOntario',
+		fr: 'ServiceOntario',
+	},
+	submit: {
+		en: 'Submit',
+		fr: 'Soumission',
+	},
+};
+const input = {
+	requiredFieldError: {
+		en: 'This is a required field.',
+		fr: 'Ce champ est obligatoire.',
 	},
 };
+const languageToggle = {
+	ariaLabel: {
+		en: 'Click to switch the language to English',
+		fr: 'Cliquez pour changer la langue en français',
+	},
+};
+const loading = {
+	en: 'Loading',
+	fr: 'Chargement',
+};
+const optional = {
+	en: 'optional',
+	fr: 'facultative',
+};
+const printerLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/copyright-information',
+		fr: 'https://www.ontario.ca/fr/page/droits-dauteur',
+	},
+	text: {
+		en: "King's Printer for Ontario,",
+		fr: 'Imprimeur du Roi pour l’Ontario,',
+	},
+};
+const privacyLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/privacy-statement',
+		fr: 'https://www.ontario.ca/fr/page/declaration-concernant-la-protection-de-la-vie-privee',
+	},
+	text: {
+		en: 'Privacy',
+		fr: 'Confidentialité',
+	},
+};
+const stepIndicator = {
+	back: {
+		en: 'Back',
+		fr: 'Retour',
+	},
+	complete: {
+		en: 'complete',
+		fr: 'complet',
+	},
+	of: {
+		en: 'of',
+		fr: 'sur',
+	},
+	step: {
+		en: 'Step',
+		fr: 'Étape',
+	},
+};
+const siteLanguage = {
+	fullWord: {
+		en: 'English',
+		fr: 'Français',
+	},
+	abbreviation: {
+		en: 'en',
+		fr: 'fr',
+	},
+};
+const required = {
+	en: 'required',
+	fr: 'obligatoire',
+};
 const translations = {
-	required: required,
-	optional: optional,
 	accessibility: accessibility,
+	accessibilityLink: accessibilityLink,
+	accordion: accordion,
 	backToTop: backToTop,
-	loading: loading,
-	dropdownList: dropdownList,
 	contactUs: contactUs,
-	accessibilityLink: accessibilityLink,
-	privacyLink: privacyLink,
-	printerLink: printerLink,
-	languageToggle: languageToggle,
-	stepIndicator: stepIndicator,
+	dateInput: dateInput,
+	dropdownList: dropdownList,
 	header: header,
 	input: input,
-	dateInput: dateInput,
-	accordion: accordion,
+	languageToggle: languageToggle,
+	loading: loading,
+	optional: optional,
+	printerLink: printerLink,
+	privacyLink: privacyLink,
+	stepIndicator: stepIndicator,
+	siteLanguage: siteLanguage,
+	required: required,
 };
 
 const ontarioAccordionCss =
@@ -785,6 +796,32 @@ function isEmpty(str) {
 function retrieveEnumKeys(enumObject) {
 	return Object.keys(enumObject).filter(isNumber);
 }
+/**
+ * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.
+ * As per ontario.ca content guidelines, there is no Oxford comma.
+ *
+ * @param {Array<any>} arr - The array that you wish to print.
+ * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'
+ *
+ * @returns {string}
+ */
+function printArray(arr, conjunctionType = 'and') {
+	return [...arr].reduce(
+		(text, value, i, array) => text + (i < array.length - 1 ? ', ' : ` ${conjunctionType} `) + value,
+	);
+}
+/**
+ * Grabs the HTML element of the page.
+ *
+ * More targetted than document.documentElement as the documentElement could
+ * in theory be any element that is the top level. e.g. <div> if the page is not
+ * set up to be semantically correct.
+ *
+ * @returns {HTMLElement}
+ */
+function getRootHTMLElement() {
+	return document.getElementsByTagName('html')[0];
+}
 
 var BadgeColourToClass;
 (function (BadgeColourToClass) {
@@ -1284,7 +1321,7 @@ const CardTypes = ['basic', 'image', 'title', 'horizontal'];
 const HeaderTypes = ['default', 'light', 'dark'];
 
 const ontarioCardCss =
-	'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card--no-description .ontario-card__heading{padding:1rem 1.5rem;border-radius:0 0 4px 4px}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
+	'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card__header-type--dark.ontario-card__description-false{background-color:#1a1a1a}.ontario-card__header-type--light.ontario-card__description-false{background-color:#f2f2f2}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
 const OntarioCardStyle0 = ontarioCardCss;
 
 const OntarioCard = class {
@@ -1372,12 +1409,12 @@ const OntarioCard = class {
 	 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
 	 */
 	getClass() {
-		if (this.cardTypeState === 'horizontal') {
-			return `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`;
-		} else {
-			// Return other classes when cardTypeState is not 'horizontal'
-			return `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;
-		}
+		const baseClass =
+			this.cardTypeState === 'horizontal'
+				? `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+				: `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;
+		const descriptionClass = this.description ? '' : ' ontario-card__description-false';
+		return `${baseClass}${descriptionClass}`;
 	}
 	getHref() {
 		return this.cardLink ? this.cardLink : '#';
@@ -1389,7 +1426,7 @@ const OntarioCard = class {
 	render() {
 		return h(
 			'li',
-			{ key: '00b148bc48fab4a103f88f3e8b60251c1b77f1e0', class: this.getClass() },
+			{ key: '606e74cea5d81cd31b355ffb1a71cf7450126cf4', class: this.getClass() },
 			this.image &&
 				h(
 					'div',
@@ -1403,16 +1440,16 @@ const OntarioCard = class {
 			h(
 				'div',
 				{
-					key: '9cef298a65f2b17ccd540e9d74efb3a77685d723',
+					key: '7d71d14690d4e75dcf1e4ef5c0198183b27e4b39',
 					class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 				},
 				h(
 					'h2',
-					{ key: '3f008a11081c8314be2a99e4190b744e75db3f62', class: 'ontario-card__heading' },
+					{ key: '4f6a337efa3986a5023f3c17e869f072aaef0e4f', class: 'ontario-card__heading' },
 					h(
 						'a',
 						{
-							'key': '81d9fcfc1fada5f6dfb7e90c466dfb8fe4bdf618',
+							'key': '6efece75daafc95e43dca997e895dc88cab9194c',
 							'href': this.getHref(),
 							'aria-label': this.ariaLabelText,
 						},
@@ -4001,10 +4038,19 @@ const OntarioHeader = class {
 		if (this.menuToggle) this.menuToggle = !this.menuToggle;
 	}
 	/**
-	 * 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.
+	 * This listens for the `setAppLanguage` event sent from the language toggle when it is is connected to the DOM.
+	 * It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event) {
 		this.language = validateLanguage(event);
+		this.parseMenuItems();
+	}
+	/**
+	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is is connected to the DOM.
+	 * It is used for changing the component language after the language toggle has been activated.
+	 */
+	handleLanguageToggle(event) {
+		this.handleSetAppLanguage(event.detail.newLanguage);
 	}
 	/**
 	 * Call to Ontario Menu API to fetch linksets to populate header component
@@ -4297,7 +4343,6 @@ const OntarioHeader = class {
 											: _b.englishLink,
 									size: 'default',
 									customLanguageToggle: this.customLanguageToggle,
-									language: this.language,
 								}),
 								h(
 									'button',
@@ -4429,7 +4474,6 @@ const OntarioHeader = class {
 											? void 0
 											: _e.englishLink,
 									customLanguageToggle: this.customLanguageToggle,
-									language: this.language,
 								}),
 							),
 						),
@@ -7248,6 +7292,8 @@ const OntarioInput = class {
 };
 OntarioInput.style = OntarioInputStyle0;
 
+const supportedLanguages = ['en', 'fr'];
+
 const ontarioLanguageToggleCss =
 	'.ontario-language-toggler:focus{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-language-toggler{background-color:#1a1a1a;border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;color:#FFFFFF;cursor:pointer;display:flex;align-items:center;font-size:1.125rem;font-weight:600;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;height:48px;line-height:1.5555555556;text-align:center;text-decoration:none}.ontario-language-toggler:hover{background-color:#4d4d4d}.ontario-language-toggler:active{background-color:#666666;color:#FFFFFF}.ontario-language-toggler:focus{background-color:#4d4d4d;color:#FFFFFF}.ontario-language-toggler:visited{color:#FFFFFF}.ontario-language-toggler abbr[title]{text-decoration:none}.ontario-language-toggler--default{padding:0.75rem}.ontario-language-toggler--small{font-size:1rem;line-height:1.375rem;height:auto;outline:none;padding:0.5rem 0.75rem}';
 const OntarioLanguageToggleStyle0 = ontarioLanguageToggleCss;
@@ -7257,74 +7303,209 @@ const OntarioLanguageToggle = class {
 		registerInstance(this, hostRef);
 		this.setAppLanguage = createEvent(this, 'setAppLanguage', 7);
 		this.headerLanguageToggled = createEvent(this, 'headerLanguageToggled', 7);
-		this.updateHTMLLang = (lang) => {
-			const htmlElement = document.firstElementChild;
-			if ((htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.tagName.toLowerCase()) === 'html') {
-				if (lang) {
-					htmlElement.setAttribute('lang', lang);
-				} else {
-					htmlElement.setAttribute('lang', 'en');
-				}
+		/*
+		 * Updates the <html> lang attribute based on component languageState.
+		 */
+		this.updateHTMLLang = () => {
+			const htmlElement = getRootHTMLElement();
+			if (htmlElement) {
+				htmlElement.setAttribute('lang', this.languageState);
 			}
-			return;
 		};
 		this.language = undefined;
 		this.size = 'default';
 		this.url = undefined;
 		this.customLanguageToggle = undefined;
 		this.translations = translations;
+		this.languageState = undefined;
+		this.oppositeLanguageLabel = undefined;
 	}
-	setAppLanguageHandler() {
-		let lang;
+	/**
+	 * Updates the language and languageState props when changes to the language prop are detected.
+	 */
+	updateLanguage() {
 		if (this.language) {
-			lang = this.language;
-		} else if (document.documentElement.lang) {
-			lang = document.documentElement.lang;
-		} else {
-			lang = 'en';
+			if (!validateValueAgainstArray(this.language, supportedLanguages)) {
+				this.showLanguageWarning(this.language);
+				this.language = this.translations.siteLanguage.abbreviation.en;
+			}
+			this.languageState = this.language;
+		}
+		this.setAppLanguageHandler();
+	}
+	/**
+	 * This function sets the languageState (if not already set).
+	 *
+	 * It also emits the setAppLanguage() event, updates the component language label, and
+	 * updates the <html> tag lang attribute with the languageState value.
+	 *
+	 * It gets called by the connectedCallback() component lifecycle hook, and by the
+	 * updateLanguage() method, which is fired on the watch for the language prop.
+	 */
+	setAppLanguageHandler() {
+		var _a;
+		const defaultLang = this.translations.siteLanguage.abbreviation.en;
+		const rootLang = (_a = getRootHTMLElement()) === null || _a === void 0 ? void 0 : _a.lang;
+		// If languageState is not set, set it equal to the following cadence:
+		// language prop value, <html> tag lang attribute, or default to "en"
+		if (!this.languageState) {
+			if (this.language) {
+				this.languageState = this.language;
+			} else if (rootLang) {
+				if (validateValueAgainstArray(rootLang, supportedLanguages)) {
+					this.languageState = rootLang;
+				} else {
+					this.showLanguageWarning(rootLang, 'document');
+					this.languageState = defaultLang;
+				}
+			} else {
+				this.languageState = defaultLang;
+			}
 		}
-		this.language = lang;
-		this.setAppLanguage.emit(lang);
-		this.updateHTMLLang(lang);
+		this.setAppLanguage.emit(this.languageState);
+		this.oppositeLanguageLabel = {
+			fullWord: this.getOppositeLanguageFullWord(),
+			abbreviation: this.getOppositeLanguageAbbrievation(),
+		};
+		this.updateHTMLLang();
 	}
-	handleHeaderLanguageToggled(language, event) {
-		const toggledLanguage = language === 'en' ? 'fr' : 'en';
-		this.language = toggledLanguage;
-		this.headerLanguageToggled.emit({ oldLanguage: language, newLanguage: toggledLanguage });
-		this.updateHTMLLang(toggledLanguage);
+	/**
+	 * An event that emits to other components that the language toggle button has been toggled.
+	 *
+	 * @param {Language} oldLanguage - The language prior to the language toggle being pressed.
+	 * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).
+	 */
+	handleHeaderLanguageToggled(oldLanguage, event) {
+		this.languageState =
+			oldLanguage === this.translations.siteLanguage.abbreviation.en
+				? this.translations.siteLanguage.abbreviation.fr
+				: this.translations.siteLanguage.abbreviation.en;
+		this.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });
+		this.updateHTMLLang();
 		if (this.customLanguageToggle && event) {
 			this.customLanguageToggle(event);
 		}
 	}
-	updateLanguage() {
-		this.language = validateLanguage(this.language);
-		this.setAppLanguageHandler();
+	/**
+	 * Prints a warning message to the console about using an incorrect language for the component.
+	 *
+	 * @param {string} lang - The incorrect language that was received.
+	 * @param {string} type - prop/document | Where the incorrect language is coming from.
+	 */
+	showLanguageWarning(lang, type = 'prop') {
+		const propOrDocumentMessage =
+			type === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addRegularText(propOrDocumentMessage)
+			.addRegularText('is not a valid language value for the ')
+			.addMonospaceText(' <ontario-language-toggle> ')
+			.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)
+			.addRegularText(`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`)
+			.printMessage();
+	}
+	/**
+	 * Returns abbreviated text for the opposite language.
+	 *
+	 * @returns {Language}
+	 */
+	getOppositeLanguageAbbrievation() {
+		return this.languageState === this.translations.siteLanguage.abbreviation.en
+			? this.translations.siteLanguage.abbreviation.fr
+			: this.translations.siteLanguage.abbreviation.en;
+	}
+	/**
+	 * Returns full word text for the opposite language.
+	 *
+	 * @returns {string}
+	 */
+	getOppositeLanguageFullWord() {
+		return this.languageState === this.translations.siteLanguage.abbreviation.en
+			? this.translations.siteLanguage.fullWord.fr
+			: this.translations.siteLanguage.fullWord.en;
 	}
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	connectedCallback() {
-		this.updateLanguage();
+		this.setAppLanguageHandler();
+	}
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#componentdidload
+	 */
+	componentDidLoad() {
+		/**
+		 * Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.
+		 *
+		 * When changes occur, the oppositeLanguageLabel state variable regenerates.
+		 *
+		 * This is to act as a form of callback and create a subtle delay between page content
+		 * updating and the language toggle label updating.
+		 */
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				switch (mutation.type) {
+					case 'attributes':
+						switch (mutation.attributeName) {
+							case 'lang':
+								this.oppositeLanguageLabel = {
+									fullWord: this.getOppositeLanguageFullWord(),
+									abbreviation: this.getOppositeLanguageAbbrievation(),
+								};
+								break;
+						}
+						break;
+				}
+			});
+		});
+		// Only create/trigger the MutationObserver if the <html> element exists.
+		if (getRootHTMLElement()) {
+			const options = { attributes: true };
+			observer.observe(getRootHTMLElement(), options);
+		}
 	}
 	render() {
-		const language = this.language === 'en' ? 'Français' : 'English';
-		const abbreviatedLanguage = this.language === 'en' ? 'FR' : 'EN';
+		var _a, _b, _c, _d, _e, _f, _g;
 		return h(
 			'a',
 			{
-				'key': 'ac43f7a7e95a21f5170f087d97a8c04884e70e2a',
+				'key': 'f43e42110b4272a268801c310a8d14e31342f426',
+				'aria-label':
+					this.translations.languageToggle.ariaLabel[
+						`${(_a = this.oppositeLanguageLabel) === null || _a === void 0 ? void 0 : _a.abbreviation}`
+					],
 				'class':
 					this.size === 'default'
 						? 'ontario-language-toggler ontario-language-toggler--default'
 						: 'ontario-language-toggler ontario-language-toggler--small',
 				'href': this.url ? this.url : '#',
-				'aria-label': this.translations.languageToggle.ariaLabel[`${this.language}`],
-				'onClick': (e) => this.handleHeaderLanguageToggled(this.language, e),
+				'hreflang': (_b = this.oppositeLanguageLabel) === null || _b === void 0 ? void 0 : _b.abbreviation,
+				'lang': (_c = this.oppositeLanguageLabel) === null || _c === void 0 ? void 0 : _c.abbreviation,
+				'onClick': (e) => this.handleHeaderLanguageToggled(this.languageState, e),
 			},
 			this.size === 'small'
-				? h('span', null, language)
+				? h('span', null, (_d = this.oppositeLanguageLabel) === null || _d === void 0 ? void 0 : _d.fullWord)
 				: h(
 						Fragment,
 						null,
-						h('abbr', { title: language, class: 'ontario-show-for-small-only' }, abbreviatedLanguage),
-						h('span', { class: 'ontario-show-for-medium' }, language),
+						h(
+							'abbr',
+							{
+								title: (_e = this.oppositeLanguageLabel) === null || _e === void 0 ? void 0 : _e.fullWord,
+								class: 'ontario-show-for-small-only',
+							},
+							(_f = this.oppositeLanguageLabel) === null || _f === void 0 ? void 0 : _f.abbreviation.toUpperCase(),
+						),
+						h(
+							'span',
+							{ class: 'ontario-show-for-medium' },
+							(_g = this.oppositeLanguageLabel) === null || _g === void 0 ? void 0 : _g.fullWord,
+						),
 				  ),
 		);
 	}