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

package/dist/collection/components/ontario-header-overflow-menu/ontario-header-overflow-menu.js

@@ -0,0 +1,295 @@
+import { h } from '@stencil/core';
+import { generateMenuItem } from '../../utils/components/header/header-menu-items';
+import { convertStringToBoolean } from '../../utils/helper/utils';
+export class OntarioHeaderOverflowMenu {
+	constructor() {
+		/**
+		 * A state variable to determine whether the menu is open or not.
+		 *
+		 * The boolean values map to eitherthe presence (true) or absense (false)
+		 * of the `ontario-navigation--open` on the `nav` element.
+		 *
+		 * Triggered by either the `menuButtonToggled` event or the `click` event.
+		 */
+		this.menuIsOpen = false;
+		/**
+		 * The current index of the menu item that is focused.
+		 */
+		this.currentIndex = undefined;
+	}
+	/**
+	 * Resets the `currentIndex` value.
+	 *
+	 * Typically resets when the menu closes.
+	 */
+	resetCurrentIndex() {
+		this.currentIndex = undefined;
+	}
+	/**
+	 * Updates the `currentIndex` value.
+	 *
+	 * Typically occurs when a user uses the keyboard to tab through
+	 * menu items.
+	 */
+	updateCurrentIndex(index) {
+		this.currentIndex = index;
+	}
+	parseMenuItems() {
+		var _a, _b;
+		if (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {
+			let copyOfMenuItems = JSON.parse(this.menuItems);
+			// convert stringified boolean values for linkIsActive, to their actual boolean equivalents
+			copyOfMenuItems.forEach((menuItem) =>
+				typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive) === 'string'
+					? (menuItem.linkIsActive = convertStringToBoolean(
+							menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive,
+						))
+					: menuItem === null || menuItem === void 0
+						? void 0
+						: menuItem.linkIsActive,
+			);
+			this.menuItemState = copyOfMenuItems;
+		} else {
+			this.menuItemState = this.menuItems;
+		}
+		const activeLinkSet =
+			(_b =
+				(_a = this.menuItemState) === null || _a === void 0
+					? void 0
+					: _a.some((menuItem) => (menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive))) !==
+				null && _b !== void 0
+				? _b
+				: [];
+		// If no active link is set, try to guess and set the active link based
+		// on if the href is included in the URL.
+		if (!activeLinkSet) {
+			const copyOfMenuItemsState = [...this.menuItemState];
+			copyOfMenuItemsState.forEach((menuItem) => {
+				const sanitizedSlug = menuItem.href.replace(/\s+/g, '-').toLowerCase();
+				menuItem.linkIsActive = window.location.pathname.includes(sanitizedSlug);
+			});
+			this.menuItemState = [...copyOfMenuItemsState];
+		}
+	}
+	/**
+	 * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.
+	 * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.
+	 */
+	toggleMenuVisibility(event) {
+		this.menuIsOpen = event.detail;
+		this.resetCurrentIndex();
+	}
+	/**
+	 * Listens for clicks on anything outside of the menu.
+	 * If a click is outside of the menu, then the menu will
+	 * close.
+	 */
+	handleClick(event) {
+		// if the menu (ref) is clicked, return
+		if (event.composedPath().includes(this.menu)) {
+			this.menuIsOpen = true;
+			return;
+		}
+		this.menuIsOpen = false;
+		this.resetCurrentIndex();
+	}
+	/**
+	 * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.
+	 */
+	handleKeyDown(event) {
+		if (this.menuIsOpen) {
+			const focusableElements = this.menu.querySelectorAll('.ontario-menu-item');
+			switch (event.key) {
+				case 'ArrowDown':
+					event.preventDefault();
+					if (this.currentIndex === -1 || this.currentIndex === undefined) {
+						this.currentIndex = 0;
+					} else {
+						this.currentIndex = (this.currentIndex + 1) % focusableElements.length;
+					}
+					focusableElements[this.currentIndex].focus();
+					/**
+					 * Tried other ways of triggering this function to condense code via a watch on currentIndex,
+					 * and also tried sticking at the bottom of the switch's parent if statement.
+					 *
+					 * Both attempts led to inconsistent results (e.g. the aria message was out of sync with currentIndex)
+					 * or just didn't appear at all. Setting this at the source seems to have the best outcome.
+					 */
+					this.updateAriaLive(this.currentIndex);
+					break;
+				case 'ArrowUp':
+					event.preventDefault();
+					if (this.currentIndex === -1 || this.currentIndex === undefined) {
+						this.currentIndex = focusableElements.length - 1;
+					} else {
+						this.currentIndex = (this.currentIndex - 1 + focusableElements.length) % focusableElements.length;
+					}
+					focusableElements[this.currentIndex].focus();
+					this.updateAriaLive(this.currentIndex);
+					break;
+				case 'Tab':
+					focusableElements.forEach((element, index) => {
+						// within an event listener, the scope of "this" changes.
+						// To continue keeping the scope global, set a variable that captures it
+						// Without this, calls to global variables/methods/functions will not work
+						const self = this;
+						if (
+							!element.hasAttribute('data-has-focus-listener') ||
+							element.getAttribute('data-has-focus-listener') === 'false'
+						) {
+							element.addEventListener('focus', () => self.updateCurrentIndex(index));
+							element.setAttribute('data-has-focus-listener', 'true');
+						}
+					});
+					break;
+			}
+		}
+	}
+	/**
+	 * Updates the aria-live region with the menu item count and selected option.
+	 *
+	 * @param {number} selectedIndex The index of the selected menu item
+	 */
+	updateAriaLive(selectedIndex) {
+		const menuItemCount = this.menuItemState.length;
+		// index starts at 0, but users expect the message to start at 1
+		// therefore add value of +1 to each index value to align with
+		// user expectations
+		const selectedMenuItemNumber = selectedIndex + 1;
+		const ariaLiveMessage = `Option ${selectedMenuItemNumber} of ${menuItemCount}`;
+		if (this.ariaLiveRegion) {
+			this.ariaLiveRegion.textContent = ariaLiveMessage;
+		}
+	}
+	componentWillLoad() {
+		this.parseMenuItems();
+	}
+	render() {
+		var _a;
+		return h(
+			'nav',
+			{
+				key: '40a8817026e0ccbf8f66e943036af9120695779a',
+				role: 'navigation',
+				class: this.menuIsOpen
+					? 'ontario-application-navigation ontario-navigation--open'
+					: 'ontario-application-navigation',
+				id: 'ontario-application-navigation',
+				ref: (el) => (this.menu = el),
+			},
+			h(
+				'div',
+				{ key: '4a6898ad7ffab9bee53ad6929e35775eaba745b4', class: 'ontario-application-navigation__container' },
+				h(
+					'ul',
+					{ key: 'b960fd93ab7c46ce40da33b545d05e4a034c42b4' },
+					(_a = this.menuItemState) === null || _a === void 0
+						? void 0
+						: _a.map((item) => {
+								return generateMenuItem(item.href, item.title, item.linkIsActive);
+							}),
+				),
+			),
+			h('div', {
+				'key': 'eef3c22887ffe8f9d6370e101d6125fa5f226fd7',
+				'id': 'aria-live-region',
+				'class': 'ontario-show-for-sr',
+				'aria-live': 'polite',
+				'ref': (el) => (this.ariaLiveRegion = el),
+			}),
+		);
+	}
+	static get is() {
+		return 'ontario-header-overflow-menu';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-header-overflow-menu.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-header-overflow-menu.css'],
+		};
+	}
+	static get properties() {
+		return {
+			menuItems: {
+				type: 'string',
+				attribute: 'menu-items',
+				mutable: false,
+				complexType: {
+					original: 'MenuItem[] | string',
+					resolved: 'MenuItem[] | string',
+					references: {
+						MenuItem: {
+							location: 'import',
+							path: '../../utils/common/common.interface',
+							id: 'src/utils/common/common.interface.ts::MenuItem',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-header-overflow-menu\n\tmenu-items=\'[{\n\t\t"title": "Link 1",\n\t\t"href": "/link-1"\n\t\t"linkIsActive": "false"\n\t},{\n\t\t"title": "Link 2",\n\t\t"href": "/link-2"\n\t\t"linkIsActive": "false"\n\t},{\n\t\t"title": "Link 3",\n\t\t"href": "/link-3"\n\t\t"linkIsActive": "false"\n\t},{\n\t\t"title": "Link 4",\n\t\t"href": "/link-4"\n\t\t"linkIsActive": "false"\n\t}]\'>\n</ontario-header-overflow-menu>',
+						},
+					],
+					text: 'The items that will go inside the menu.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+		};
+	}
+	static get states() {
+		return {
+			menuItemState: {},
+			menuIsOpen: {},
+		};
+	}
+	static get elementRef() {
+		return 'el';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'menuItems',
+				methodName: 'parseMenuItems',
+			},
+		];
+	}
+	static get listeners() {
+		return [
+			{
+				name: 'menuButtonToggled',
+				method: 'toggleMenuVisibility',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+			{
+				name: 'click',
+				method: 'handleClick',
+				target: 'window',
+				capture: true,
+				passive: false,
+			},
+			{
+				name: 'keydown',
+				method: 'handleKeyDown',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-header-overflow-menu.js.map

package/dist/collection/components/ontario-header-overflow-menu/ontario-header-overflow-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-header-overflow-menu.js","sourceRoot":"","sources":["../../../src/components/ontario-header-overflow-menu/ontario-header-overflow-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Watch, h, Listen, Element } from '@stencil/core';\nimport { MenuItem } from '../../utils/common/common.interface';\nimport { generateMenuItem } from '../../utils/components/header/header-menu-items';\nimport { convertStringToBoolean } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-header-overflow-menu',\n\tstyleUrl: 'ontario-header-overflow-menu.scss',\n\tshadow: true,\n})\nexport class OntarioHeaderOverflowMenu {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The items that will go inside the menu.\n\t *\n\t *  @example\n\t * \t<ontario-header-overflow-menu\n\t *\t\t\tmenu-items='[{\n\t *\t\t\t\t\"title\": \"Link 1\",\n\t *\t\t\t\t\"href\": \"/link-1\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 2\",\n\t *\t\t\t\t\"href\": \"/link-2\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 3\",\n\t *\t\t\t\t\"href\": \"/link-3\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 4\",\n\t *\t\t\t\t\"href\": \"/link-4\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t}]'>\n\t *\t</ontario-header-overflow-menu>\n\t */\n\t@Prop() menuItems: MenuItem[] | string;\n\n\t/**\n\t * The `menuItems` are reassigned to `menuItemState` for parsing by `parseMenuItems()`.\n\t */\n\t@State() private menuItemState: MenuItem[];\n\n\t/**\n\t * A state variable to determine whether the menu is open or not.\n\t *\n\t * The boolean values map to eitherthe presence (true) or absense (false)\n\t * of the `ontario-navigation--open` on the `nav` element.\n\t *\n\t * Triggered by either the `menuButtonToggled` event or the `click` event.\n\t */\n\t@State() private menuIsOpen: boolean = false;\n\n\t/**\n\t * The current index of the menu item that is focused.\n\t */\n\tprivate currentIndex: number | undefined = undefined;\n\n\t/**\n\t * Resets the `currentIndex` value.\n\t *\n\t * Typically resets when the menu closes.\n\t */\n\tprivate resetCurrentIndex() {\n\t\tthis.currentIndex = undefined;\n\t}\n\n\t/**\n\t * Updates the `currentIndex` value.\n\t *\n\t * Typically occurs when a user uses the keyboard to tab through\n\t * menu items.\n\t */\n\tprivate updateCurrentIndex(index: number) {\n\t\tthis.currentIndex = index;\n\t}\n\n\t@Watch('menuItems')\n\tparseMenuItems() {\n\t\tif (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {\n\t\t\tlet copyOfMenuItems = JSON.parse(this.menuItems) as MenuItem[];\n\t\t\t// convert stringified boolean values for linkIsActive, to their actual boolean equivalents\n\t\t\tcopyOfMenuItems.forEach((menuItem) =>\n\t\t\t\ttypeof menuItem?.linkIsActive === 'string'\n\t\t\t\t\t? (menuItem.linkIsActive = convertStringToBoolean(menuItem?.linkIsActive))\n\t\t\t\t\t: menuItem?.linkIsActive,\n\t\t\t);\n\t\t\tthis.menuItemState = copyOfMenuItems;\n\t\t} else {\n\t\t\tthis.menuItemState = this.menuItems;\n\t\t}\n\n\t\tconst activeLinkSet = this.menuItemState?.some((menuItem) => menuItem?.linkIsActive) ?? [];\n\n\t\t// If no active link is set, try to guess and set the active link based\n\t\t// on if the href is included in the URL.\n\t\tif (!activeLinkSet) {\n\t\t\tconst copyOfMenuItemsState = [...this.menuItemState];\n\t\t\tcopyOfMenuItemsState.forEach((menuItem) => {\n\t\t\t\tconst sanitizedSlug = menuItem.href.replace(/\\s+/g, '-').toLowerCase();\n\t\t\t\tmenuItem.linkIsActive = window.location.pathname.includes(sanitizedSlug);\n\t\t\t});\n\n\t\t\tthis.menuItemState = [...copyOfMenuItemsState];\n\t\t}\n\t}\n\n\t/**\n\t * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.\n\t * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.\n\t */\n\t@Listen('menuButtonToggled', { target: 'window' })\n\ttoggleMenuVisibility(event: CustomEvent<boolean>) {\n\t\tthis.menuIsOpen = event.detail;\n\t\tthis.resetCurrentIndex();\n\t}\n\n\t/**\n\t * Listens for clicks on anything outside of the menu.\n\t * If a click is outside of the menu, then the menu will\n\t * close.\n\t */\n\t@Listen('click', { capture: true, target: 'window' })\n\thandleClick(event: PointerEvent) {\n\t\t// if the menu (ref) is clicked, return\n\t\tif (event.composedPath().includes(this.menu)) {\n\t\t\tthis.menuIsOpen = true;\n\t\t\treturn;\n\t\t}\n\n\t\tthis.menuIsOpen = false;\n\t\tthis.resetCurrentIndex();\n\t}\n\n\t/**\n\t * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.\n\t */\n\t@Listen('keydown', { target: 'window' })\n\thandleKeyDown(event: KeyboardEvent) {\n\t\tif (this.menuIsOpen) {\n\t\t\tconst focusableElements: NodeListOf<HTMLElement> = this.menu.querySelectorAll('.ontario-menu-item');\n\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (this.currentIndex === -1 || this.currentIndex === undefined) {\n\t\t\t\t\t\tthis.currentIndex = 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.currentIndex = (this.currentIndex + 1) % focusableElements.length;\n\t\t\t\t\t}\n\t\t\t\t\tfocusableElements[this.currentIndex].focus();\n\t\t\t\t\t/**\n\t\t\t\t\t * Tried other ways of triggering this function to condense code via a watch on currentIndex,\n\t\t\t\t\t * and also tried sticking at the bottom of the switch's parent if statement.\n\t\t\t\t\t *\n\t\t\t\t\t * Both attempts led to inconsistent results (e.g. the aria message was out of sync with currentIndex)\n\t\t\t\t\t * or just didn't appear at all. Setting this at the source seems to have the best outcome.\n\t\t\t\t\t */\n\t\t\t\t\tthis.updateAriaLive(this.currentIndex);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (this.currentIndex === -1 || this.currentIndex === undefined) {\n\t\t\t\t\t\tthis.currentIndex = focusableElements.length - 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.currentIndex = (this.currentIndex - 1 + focusableElements.length) % focusableElements.length;\n\t\t\t\t\t}\n\t\t\t\t\tfocusableElements[this.currentIndex].focus();\n\t\t\t\t\tthis.updateAriaLive(this.currentIndex);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Tab':\n\t\t\t\t\tfocusableElements.forEach((element, index) => {\n\t\t\t\t\t\t// within an event listener, the scope of \"this\" changes.\n\t\t\t\t\t\t// To continue keeping the scope global, set a variable that captures it\n\t\t\t\t\t\t// Without this, calls to global variables/methods/functions will not work\n\t\t\t\t\t\tconst self = this;\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t!element.hasAttribute('data-has-focus-listener') ||\n\t\t\t\t\t\t\telement.getAttribute('data-has-focus-listener') === 'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\telement.addEventListener('focus', () => self.updateCurrentIndex(index));\n\t\t\t\t\t\t\telement.setAttribute('data-has-focus-listener', 'true');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the aria-live region with the menu item count and selected option.\n\t *\n\t * @param {number} selectedIndex The index of the selected menu item\n\t */\n\tprivate updateAriaLive(selectedIndex: number) {\n\t\tconst menuItemCount = this.menuItemState.length;\n\t\t// index starts at 0, but users expect the message to start at 1\n\t\t// therefore add value of +1 to each index value to align with\n\t\t// user expectations\n\t\tconst selectedMenuItemNumber = selectedIndex + 1;\n\t\tconst ariaLiveMessage = `Option ${selectedMenuItemNumber} of ${menuItemCount}`;\n\n\t\tif (this.ariaLiveRegion) {\n\t\t\tthis.ariaLiveRegion.textContent = ariaLiveMessage;\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseMenuItems();\n\t}\n\n\t/**\n\t * Assigning values to elements to use them as ref\n\t */\n\tprivate menu!: HTMLElement;\n\n\t/**\n\t * The aria-live region that will be updated with the selected menu item.\n\t */\n\tprivate ariaLiveRegion!: HTMLElement;\n\n\trender() {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\trole=\"navigation\"\n\t\t\t\tclass={\n\t\t\t\t\tthis.menuIsOpen ? 'ontario-application-navigation ontario-navigation--open' : 'ontario-application-navigation'\n\t\t\t\t}\n\t\t\t\tid=\"ontario-application-navigation\"\n\t\t\t\tref={(el) => (this.menu = el as HTMLElement)}\n\t\t\t>\n\t\t\t\t<div class=\"ontario-application-navigation__container\">\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.menuItemState?.map((item: MenuItem) => {\n\t\t\t\t\t\t\treturn generateMenuItem(item.href, item.title, item.linkIsActive);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"aria-live-region\"\n\t\t\t\t\tclass=\"ontario-show-for-sr\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\tref={(el) => (this.ariaLiveRegion = el as HTMLElement)}\n\t\t\t\t></div>\n\t\t\t</nav>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-hint-expander/ontario-hint-expander.css

@@ -26,7 +26,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* -------------------------------
@@ -86,8 +87,8 @@
 
 .ontario-hint-expander__content {
 	border-left: 4px solid #cccccc;
-	color: #1a1a1a;
-	background-color: #f2f2f2;
+	color: rgb(25.5, 25.5, 25.5);
+	background-color: rgb(242.25, 242.25, 242.25);
 	display: none;
 	padding: 1rem 1rem 1rem calc(1rem + 0.25rem);
 	margin: 0 0 1rem 0.25rem;

package/dist/collection/components/ontario-hint-expander/ontario-hint-expander.js

@@ -141,11 +141,11 @@ export class OntarioHintExpander {
 	render() {
 		return h(
 			'div',
-			{ key: 'fb1201710bebea695ad866de154d2ef9cb9758ee', class: 'ontario-hint-expander__container' },
+			{ key: '9f18296bf5ede4a16d648b0821f1e26acb813fde', class: 'ontario-hint-expander__container' },
 			h(
 				'button',
 				{
-					'key': 'b838acc881188931404c8c4f0388e48afa0da6f1',
+					'key': '3e5c2325098f5b8e77a580e394601f666994ad2a',
 					'class': 'ontario-hint-expander__button',
 					'onClick': this.onClick,
 					'id': `hint-expander-button-${this.getId()}`,
@@ -156,22 +156,30 @@ export class OntarioHintExpander {
 				h(
 					'span',
 					{
-						key: '1fe025941c4a25b654dccd68fc24fefd3f70f9c2',
+						key: 'f77bd6008272beb4646b70616c1d16d13d8e2722',
 						class: 'ontario-hint-expander__button-icon--close ontario-icon',
 					},
-					h('ontario-icon-chevron-up', { key: '636186e5cb9bae0ef2342be9e702eecbfc370a92', colour: 'inherit' }),
+					h('ontario-icon-chevron-up', {
+						'key': '09fe2a1d2d5e68cb7237ed23daf18f4d5d524afc',
+						'colour': 'inherit',
+						'aria-hidden': 'true',
+					}),
 				),
 				h(
 					'span',
-					{ key: 'a9d555db0bf0537fffa3fc87e746514a8a2c7f81', class: 'ontario-hint-expander__button-icon--open' },
-					h('ontario-icon-chevron-down', { key: '77785dde41c493d3b77e306de0d8075ae62ce934', colour: 'inherit' }),
+					{ key: '66934abdf7d3f29f20a4a966370bfb7ae2ec487c', class: 'ontario-hint-expander__button-icon--open' },
+					h('ontario-icon-chevron-down', {
+						'key': 'ea41b4ce0d21f9c9f315ec86f82dd26528cd220e',
+						'colour': 'inherit',
+						'aria-hidden': 'true',
+					}),
 				),
 				this.hint,
 			),
 			h(
 				'div',
 				{
-					'key': 'ea08efd47eaa792b435eabcc08c1dc9101b6028a',
+					'key': '488bcbb0a0ad44edac9d02f4304c19df6e7d4acf',
 					'class': 'ontario-hint-expander__content',
 					'id': `hint-expander-content-${this.getId()}`,
 					'aria-labelledby': `hint-expander-button-${this.getId()}`,

package/dist/collection/components/ontario-hint-expander/ontario-hint-expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-hint-expander.js","sourceRoot":"","sources":["../../../src/components/ontario-hint-expander/ontario-hint-expander.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from './hint-expander.interface';\nimport { HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-expander',\n\tstyleUrl: 'ontario-hint-expander.scss',\n\tshadow: true,\n})\nexport class OntarioHintExpander implements HintExpander {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint expander question/statement\n\t */\n\t@Prop() hint: string;\n\n\t/**\n\t * Content to display as the hint, once the expander is toggled open.\n\t * Please note that any content that is passed into this prop will only be displayed as a string.\n\t * If you would like to add HTML content, supply child content to the component.\n\t *\n\t * @example\n\t * <ontario-hint-expander hint=\"This is the hint\"\n\t *   <img src=\"https://www.jquery-az.com/html/images/banana.jpg\" title=\"Title of image\" alt=\"alt text here\"/>\n\t *   <p> Here is the content beside the image </p>\n\t * </ontario-hint-expander>\n\t */\n\t@Prop({ mutable: true }) content: string;\n\n\t/**\n\t * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs.\n\t */\n\t@Event() toggleExpanderEvent!: EventEmitter<MouseEvent | KeyboardEvent>;\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHint(this.hintState);\n\t}\n\n\t/*\n\t * Watch for changes to the `content` prop for validation purposes.\n\t *\n\t * Validate the `content` and make sure the `content` has a value.\n\t * Log a warning if user doesn't input a value for the `content` or element content.\n\t */\n\t@Watch('content')\n\tvalidateContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' content ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate onClick = (ev: Event) => {\n\t\tconst hintExpander = ev.target as HTMLButtonElement | null;\n\t\tconst hintExpanderParent = hintExpander?.parentElement;\n\n\t\thintExpanderParent?.classList.toggle('ontario-expander--active');\n\t\tlet content = hintExpanderParent?.querySelector(\"[data-toggle='ontario-expander-content']\");\n\t\tcontent?.classList.toggle('ontario-expander__content--opened');\n\t\tcontent?.classList.contains('ontario-expander__content--opened')\n\t\t\t? content.setAttribute('aria-hidden', 'false')\n\t\t\t: content?.setAttribute('aria-hidden', 'true');\n\t\thintExpanderParent?.classList.contains('ontario-expander--active')\n\t\t\t? hintExpanderParent?.setAttribute('aria-expanded', 'true')\n\t\t\t: hintExpanderParent?.setAttribute('aria-expanded', 'false');\n\n\t\tthis.toggleExpanderEvent.emit(ev as MouseEvent);\n\t};\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t *\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint`.\n\t */\n\tvalidateHint(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.validateContent(this.content);\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-hint-expander__container\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"ontario-hint-expander__button\"\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tid={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-controls={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--close ontario-icon\">\n\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"inherit\"></ontario-icon-chevron-up>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--open\">\n\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"inherit\"></ontario-icon-chevron-down>\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.hint}\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ontario-hint-expander__content\"\n\t\t\t\t\tid={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-labelledby={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t>\n\t\t\t\t\t{this.hintContentType === 'string' && this.content ? (\n\t\t\t\t\t\tthis.content\n\t\t\t\t\t) : this.hintContentType === 'html' && this.content ? (\n\t\t\t\t\t\t<span innerHTML={this.content}></span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-hint-expander.js","sourceRoot":"","sources":["../../../src/components/ontario-hint-expander/ontario-hint-expander.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from './hint-expander.interface';\nimport { HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-expander',\n\tstyleUrl: 'ontario-hint-expander.scss',\n\tshadow: true,\n})\nexport class OntarioHintExpander implements HintExpander {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint expander question/statement\n\t */\n\t@Prop() hint: string;\n\n\t/**\n\t * Content to display as the hint, once the expander is toggled open.\n\t * Please note that any content that is passed into this prop will only be displayed as a string.\n\t * If you would like to add HTML content, supply child content to the component.\n\t *\n\t * @example\n\t * <ontario-hint-expander hint=\"This is the hint\"\n\t *   <img src=\"https://www.jquery-az.com/html/images/banana.jpg\" title=\"Title of image\" alt=\"alt text here\"/>\n\t *   <p> Here is the content beside the image </p>\n\t * </ontario-hint-expander>\n\t */\n\t@Prop({ mutable: true }) content: string;\n\n\t/**\n\t * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs.\n\t */\n\t@Event() toggleExpanderEvent!: EventEmitter<MouseEvent | KeyboardEvent>;\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHint(this.hintState);\n\t}\n\n\t/*\n\t * Watch for changes to the `content` prop for validation purposes.\n\t *\n\t * Validate the `content` and make sure the `content` has a value.\n\t * Log a warning if user doesn't input a value for the `content` or element content.\n\t */\n\t@Watch('content')\n\tvalidateContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' content ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate onClick = (ev: Event) => {\n\t\tconst hintExpander = ev.target as HTMLButtonElement | null;\n\t\tconst hintExpanderParent = hintExpander?.parentElement;\n\n\t\thintExpanderParent?.classList.toggle('ontario-expander--active');\n\t\tlet content = hintExpanderParent?.querySelector(\"[data-toggle='ontario-expander-content']\");\n\t\tcontent?.classList.toggle('ontario-expander__content--opened');\n\t\tcontent?.classList.contains('ontario-expander__content--opened')\n\t\t\t? content.setAttribute('aria-hidden', 'false')\n\t\t\t: content?.setAttribute('aria-hidden', 'true');\n\t\thintExpanderParent?.classList.contains('ontario-expander--active')\n\t\t\t? hintExpanderParent?.setAttribute('aria-expanded', 'true')\n\t\t\t: hintExpanderParent?.setAttribute('aria-expanded', 'false');\n\n\t\tthis.toggleExpanderEvent.emit(ev as MouseEvent);\n\t};\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t *\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint`.\n\t */\n\tvalidateHint(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.validateContent(this.content);\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-hint-expander__container\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"ontario-hint-expander__button\"\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tid={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-controls={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--close ontario-icon\">\n\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"inherit\" aria-hidden=\"true\"></ontario-icon-chevron-up>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--open\">\n\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"inherit\" aria-hidden=\"true\"></ontario-icon-chevron-down>\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.hint}\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ontario-hint-expander__content\"\n\t\t\t\t\tid={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-labelledby={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t>\n\t\t\t\t\t{this.hintContentType === 'string' && this.content ? (\n\t\t\t\t\t\tthis.content\n\t\t\t\t\t) : this.hintContentType === 'html' && this.content ? (\n\t\t\t\t\t\t<span innerHTML={this.content}></span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-hint-text/ontario-hint-text.css

@@ -27,7 +27,7 @@
 /* icon colours */
 /* service ontario header colours */
 .ontario-hint {
-	color: #4d4d4d;
+	color: rgb(76.5, 76.5, 76.5);
 	display: inline-block;
 	margin: 0 0 1rem 0;
 	width: 100%;

package/dist/collection/components/ontario-icon/assets/ontario-icon-sort-alphabetical-ascending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 17H22L18 21L14 17H17V3H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z"/>
+</svg>

package/dist/collection/components/ontario-icon/assets/ontario-icon-sort-alphabetical-descending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 7H22L18 3L14 7H17V21H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3ZM9 7H7V5H9V7Z"/>
+</svg>

package/dist/collection/components/ontario-icon/assets/ontario-icon-sort-ascending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z"/>
+</svg>

package/dist/collection/components/ontario-icon/assets/ontario-icon-sort-descending.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z"/>
+</svg>

package/dist/collection/components/ontario-icon/assets/ontario-icon-sort-variant.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 13H15V11H3M3 6V8H21V6M3 18H9V16H3V18Z"/>
+</svg>

package/dist/collection/components/ontario-icon/assets/ontario-icon-sort.svg

@@ -1 +1,3 @@
-<svg class="svg-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z"/>
+</svg>

package/dist/collection/components/ontario-icon/ontario-icon-accessibility.js

@@ -89,14 +89,14 @@ export class OntarioIconAccessibility {
 		return h(
 			'div',
 			{
-				key: 'b567cc8fc55209a62a22dc3a33e9b0fabd2996da',
+				key: 'd0c04d9bbe9203c2cd8c059128eda0291579c6ae',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'ccbf1e874c54606b98fb7f68c46702b8ac0d3b98',
+					key: '00d5e1034ae5781a928f1698d1824d40f32e7068',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconAccessibility {
 					id: 'accessibility',
 				},
 				h('path', {
-					key: 'd4fbfc2d2bbff88b3c436538ea648bebd2987f15',
+					key: '1fc9313f6d9ddb89912249d54b67180bf02b50a3',
 					d: 'M18.4 11.2l-4.1.2 2.3-2.6c.2-.3.3-.8.2-1.3-.1-.3-.2-.6-.5-.8l-5.4-3.2c-.4-.3-1-.2-1.4.1L6.8 6.1c-.5.5-.6 1.2-.1 1.7.4.5 1.2.5 1.7.1l2-1.8 1.9 1.1-4.2 4.3c-.1.1-.1.2-.2.2-.5.2-1 .4-1.4.7L8 13.9c.5-.2 1-.4 1.5-.4 1.9 0 3.5 1.6 3.5 3.5 0 .6-.1 1.1-.4 1.5l1.5 1.5a5.29 5.29 0 0 0 .9-3c0-1.2-.4-2.4-1.1-3.3l3.3-.3-.2 4.8c-.1.7.4 1.2 1.1 1.3h.1c.6 0 1.1-.5 1.2-1.1l.2-5.9c0-.3-.1-.7-.3-.9-.3-.3-.6-.4-.9-.4zM18 5.5a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2zm-5.5 16.1a5.29 5.29 0 0 1-3 .9C6.5 22.5 4 20 4 17a5.29 5.29 0 0 1 .9-3l1.5 1.5c-.2.5-.4 1-.4 1.5 0 1.9 1.6 3.5 3.5 3.5.6 0 1.1-.1 1.5-.4l1.5 1.5z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-account.js

@@ -89,14 +89,14 @@ export class OntarioIconAccount {
 		return h(
 			'div',
 			{
-				key: '322a1bd85e3d6228f1f78b13996c48a416879317',
+				key: 'f0a353324c38237d014d3820057200628f6e2801',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '8a151f6b082b6ed6242d95806c05a3f545fddc98',
+					key: '5d4cff8aca650965ba41ebe2c8ae7928aa4acb80',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -105,7 +105,7 @@ export class OntarioIconAccount {
 					id: 'account',
 				},
 				h('path', {
-					key: '1071a45dca814a19d217f3528f040453a6fa1f89',
+					key: '810167bdf6f5b95b04f7563f0df6b851a6ef6c77',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-2 4-3.08 6-3.08 2 0 5.97 1.1 6 3.08a7.2 7.2 0 0 1-6 3.22z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-add-alt.js

@@ -89,14 +89,14 @@ export class OntarioIconAddAlt {
 		return h(
 			'div',
 			{
-				key: 'd93fe05fca936008e4711d1f1eeefc2cddd233fd',
+				key: '3a9e8e941fcd58992dd708cdf9b2ecebe2311e0e',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'be9af29e5982afb0750916b1c9967e60c05b4123',
+					key: 'b8de99f14553cf0af7282bb7939c4bd831d11746',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -106,7 +106,7 @@ export class OntarioIconAddAlt {
 					id: 'add-alt',
 				},
 				h('path', {
-					key: '1d5551f05c708ec36a5a4552e169db317bad2c7a',
+					key: 'edb4cb31d2563d837abaa16c22aaab7b9bbdba2c',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-add.js

@@ -89,14 +89,14 @@ export class OntarioIconAdd {
 		return h(
 			'div',
 			{
-				key: '9c5805e302bb405cecbaaacf8d0009b1e394a260',
+				key: '677716d425ecb90b4a63cc2cec609fc6f78a727a',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '544d47882c6eba4daa417c098f1e870b63e2c18d',
+					key: '8688cf798dbbedc4ad4ced0a2a24fe68df2803cd',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -106,7 +106,7 @@ export class OntarioIconAdd {
 					id: 'add',
 				},
 				h('path', {
-					key: '5865615b86007c70d51a73f41a32e26317444ce5',
+					key: '05ab294c1a335ac28df203b83b7888afb2d41176',
 					d: 'M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z',
 				}),
 			),

package/dist/collection/components/ontario-icon/ontario-icon-alert-error.js

@@ -62,14 +62,14 @@ export class OntarioIconAlertError {
 		return h(
 			'div',
 			{
-				key: '0ab7ca01e1530b78124c21a8bd5d78d0e6a89ee0',
+				key: '32dddd031eb8d92b8cb59fb0de1f29e86294c53d',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'aa78b34ca6cbdf38f7bb9635c9cbf0a9e7e91ec4',
+					key: 'f91a3cfd8e568bb6a7abe1d7be225c4acb90613f',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -78,12 +78,12 @@ export class OntarioIconAlertError {
 					id: 'alert-error',
 				},
 				h('path', {
-					key: '728f4d84873cd6670b91b6304b250069180ab0c5',
+					key: '4da3c52c3a0bec730e903427602700603fa00281',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
 					fill: '#cd0000',
 				}),
 				h('path', {
-					key: 'ed5b79932b22bba32e04bf41d2bfe6517020fc5c',
+					key: 'c2fb139f8f739572bdfe30d6cc4ec925192cb57c',
 					d: 'M11 17h2v-2h-2v2zm0-4h2V7h-2v6z',
 					fill: '#fff',
 				}),