@ongov/ontario-design-system-component-library 4.3.1-alpha.1 → 5.0.0-alpha.10

package/src/components/ontario-hint-text/test/__snapshots__/ontario-hint-text.spec.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`ontario-hint-text snapshot should render the expected html 1`] = `
 <ontario-hint-text element-id="idTest" hint="This is a test hint">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <p class="ontario-hint" id="idTest">
       This is a test hint
     </p>
-  </mock:shadow-root>
+  </template>
 </ontario-hint-text>
 `;

package/src/components/ontario-icon/test/__snapshots__/ontario-icon.spec.tsx.snap

@@ -2,12 +2,12 @@
 
 exports[`ontario-icon snapshot should render the expected html 1`] = `
 <ontario-icon-accessibility colour="grey" icon-width="36">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div class="ontario-icon ontario-icon--grey ontario-icon--width-36" style="width: 36px;">
       <svg class="svg-icon" id="accessibility" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill: undefined; stroke: undefined;">
         <path 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"></path>
       </svg>
     </div>
-  </mock:shadow-root>
+  </template>
 </ontario-icon-accessibility>
 `;

package/src/components/ontario-input/ontario-input.scss

@@ -1,7 +1,7 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@@ -19,7 +19,7 @@ $ontario-input-border-width: 0.125rem;
 	color: colours.$ontario-colour-black;
 	display: block;
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	line-height: globalVariables.$line-height-default;
 	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7;
 	max-width: globalVariables.$standard-width;

package/src/components/ontario-input/test/__snapshots__/ontario-input.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ontario-input snapshot should render the expected html 1`] = `
 <ontario-input caption="{&quot;captionText&quot;: &quot;Ontario Input&quot;}" element-id="ontario-input" name="ontario-input">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div class="ontario-form-group">
       <label class="ontario-label" htmlfor="ontario-input">
         Ontario Input
@@ -16,6 +16,6 @@ exports[`ontario-input snapshot should render the expected html 1`] = `
       </div>
       <input class="ontario-input" id="ontario-input" name="ontario-input" type="text" value="">
     </div>
-  </mock:shadow-root>
+  </template>
 </ontario-input>
 `;

package/src/components/ontario-language-toggle/ontario-language-toggle.scss

@@ -2,7 +2,7 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
@@ -22,7 +22,7 @@
 	align-items: center;
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	height: globalVariables.$standard-input-height;
 	line-height: math.div(14, 9);
 	text-align: center;

package/src/components/ontario-language-toggle/test/__snapshots__/ontario-language-toggle.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ontario-language-toggle snapshot should render the expected html 1`] = `
 <ontario-language-toggle>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <a aria-label="Cliquez pour changer la langue en français" class="ontario-language-toggler ontario-language-toggler--default" href="#" hreflang="fr" lang="fr">
       <abbr class="ontario-show-for-small-only" title="Français">
         FR
@@ -11,6 +11,6 @@ exports[`ontario-language-toggle snapshot should render the expected html 1`] =
         Français
       </span>
     </a>
-  </mock:shadow-root>
+  </template>
 </ontario-language-toggle>
 `;

package/src/components/ontario-loading-indicator/ontario-loading-indicator.scss

@@ -1,6 +1,6 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@@ -48,7 +48,7 @@ $loading-indicator-z-index: 9999;
 
 	p {
 		color: colours.$ontario-greyscale-70;
-		font-family: typography.$ontario-font-raleway-modified;
+		font-family: fonts.$ontario-font-raleway;
 		font-size: globalFunctions.px-to-rem(16);
 		line-height: lineHeights.$ontario-line-height-7;
 		font-weight: fontWeights.$ontario-font-weights-bold;

package/src/components/ontario-loading-indicator/test/__snapshots__/ontario-loading-indicator.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ontario-loading-indicator should render the expected html 1`] = `
 <ontario-loading-indicator>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div aria-hidden="true" aria-live="assertive" class="ontario-loading-indicator__overlay" role="alert">
       <div class="ontario-loading-indicator">
         <svg class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
@@ -13,6 +13,6 @@ exports[`ontario-loading-indicator should render the expected html 1`] = `
         </p>
       </div>
     </div>
-  </mock:shadow-root>
+  </template>
 </ontario-loading-indicator>
 `;

package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss

@@ -3,7 +3,7 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@@ -19,7 +19,6 @@
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
-$ontario-input-border-width: 0.125rem;
 
 .ontario-radios__item {
 	position: relative;
@@ -55,7 +54,7 @@ $ontario-input-border-width: 0.125rem;
 	cursor: pointer;
 	color: colours.$ontario-colour-black;
 	display: inline-block;
-	font-family: typography.$ontario-font-raleway-modified;
+	font-family: fonts.$ontario-font-raleway;
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
 	font-weight: fontWeights.$ontario-font-weights-bold;
 	line-height: globalVariables.$line-height-default;

package/src/components/ontario-search-box/assets/ontario-icon-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4z" fill="#000"/></svg>

package/src/components/ontario-search-box/assets/ontario-logo--mobile.svg

@@ -0,0 +1,6 @@
+<svg width="46" height="46" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46" fill="none" xmlns:v="https://vecta.io/nano" tabindex="-1">
+    <path d="M23 0C7.36 0 0 7.36 0 23s7.36 23 23 23 23-7.36 23-23S38.64 0 23 0" fill="#fff" />
+    <path fill-rule="evenodd"
+        d="M23 13.223c4.728-3.178 10.58-3.613 15.69-1.153l.18.128-.026.18a16.08 16.08 0 0 1-2.07 6.765c-1.405 2.41-3.4 4.408-5.8 5.79h-.025a15.71 15.71 0 0 0-.365.191c-.188.1-.38.203-.58.296.383 5.69-2.172 10.994-6.85 14.197L23 39.72l-.153-.102a15.76 15.76 0 0 1-4.805-5.176 16.12 16.12 0 0 1-2.095-7.944v-.026c0-.333.025-.692.05-1.05-5.086-2.51-8.382-7.38-8.817-13.043l-.026-.18.153-.077c2.147-1.05 4.523-1.59 6.874-1.59 2.786 0 5.494.743 7.897 2.127h.026a17.21 17.21 0 0 1 .895.564zm5.93 8.56c1.763-1.025 3.27-2.46 4.37-4.33.51-.897.894-1.82 1.176-2.69-2.888-.666-5.8-.23-8.433 1.204.23.307.383.64.537 1.076s.18 1.025.05 1.512c-.05.205-.153.4-.256.615h0c-.51.87-1.584 1.512-2.913 1.922.51-1.59-.307-2.998-1.33-3.895-.51-.46-1.1-.846-1.687-1.204a12.29 12.29 0 0 0-5.929-1.614 12.52 12.52 0 0 0-2.964.359c.894 2.844 2.71 5.15 5.265 6.714.153-.36.358-.64.664-1s.792-.666 1.278-.794a2.94 2.94 0 0 1 .664-.077c.997 0 2.096.615 3.118 1.563-1.6.36-2.428 1.768-2.683 3.1-.128.692-.204 1.384-.204 2.076 0 2.024.486 4.075 1.56 5.945.486.87 1.125 1.69 1.79 2.383 2.02-2.204 3.092-4.946 3.17-7.944-.41.05-.74 0-1.2-.077s-.97-.384-1.33-.718c-.153-.154-.307-.333-.41-.538-.51-.897-.51-2.153-.204-3.51 1.124 1.23 2.734 1.256 4.012.794a10.52 10.52 0 0 0 1.891-.871z"
+        fill="#000" />
+</svg>

package/src/components/ontario-search-box/ontario-search-box.scss

@@ -0,0 +1,141 @@
+@use 'sass:math';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	focusPlaceholders;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use '../../styles/form.scss';
+
+$ontario-input-height: globalFunctions.px-to-rem(48);
+$ontario-search-icon-size: 2rem;
+$ontario-reset-icon-size: 1.5rem;
+$ontario-search-button-width: 5rem;
+$ontario-search-button-width--mobile: 3rem;
+$ontario-search-input-padding: 8.5rem;
+$ontario-search-input-padding--mobile: 7.75rem;
+$ontario-search-desktop-width: 34rem;
+$ontario-search-mobile-width: 20.5rem;
+
+.ontario-search__container {
+	max-width: $ontario-search-desktop-width;
+	margin-bottom: spacing.$spacing-7;
+}
+
+.ontario-search__input-container {
+	position: relative;
+}
+
+.ontario-search__input.ontario-input {
+	border: 2px solid colours.$ontario-colour-black;
+	margin-bottom: spacing.$spacing-0;
+	height: $ontario-input-height;
+	padding-left: spacing.$spacing-3;
+	padding-right: $ontario-search-input-padding;
+	width: 100%;
+
+	&:invalid + input[type='reset'] {
+		display: none;
+	}
+
+	&:focus {
+		@extend %ontario-focus;
+	}
+}
+
+input[type='reset'].ontario-search__reset {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	top: spacing.$spacing-3;
+	right: $ontario-search-button-width + spacing.$spacing-4;
+	height: $ontario-reset-icon-size;
+	width: $ontario-reset-icon-size;
+	color: colours.$ontario-colour-black;
+	margin: spacing.$spacing-0;
+	padding: spacing.$spacing-1;
+	background-size: $ontario-reset-icon-size;
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-color: transparent;
+	outline: none;
+	border: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		right: $ontario-search-button-width--mobile + spacing.$spacing-7;
+	}
+}
+
+.ontario-search__submit {
+	border: 0;
+	border-radius: 0 3px 3px 0;
+	background-color: colours.$ontario-colour-link;
+	color: colours.$ontario-colour-black;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	font-family: fonts.$ontario-font-open-sans;
+	font-weight: fontWeights.$ontario-font-weights-semi-bold;
+	font-size: 1.125rem;
+	width: $ontario-search-button-width;
+	line-height: lineheight.$ontario-line-height-8;
+
+	position: absolute;
+	right: spacing.$spacing-0;
+	bottom: spacing.$spacing-0;
+	top: spacing.$spacing-0;
+	cursor: pointer;
+
+	&:hover {
+		background-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-white;
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
+		background-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-white;
+	}
+
+	&:active {
+		background-color: colours.$ontario-colour-link--active;
+		color: colours.$ontario-colour-white;
+	}
+
+	svg {
+		fill: colours.$ontario-colour-white;
+		margin-right: spacing.$spacing-0;
+		margin-bottom: spacing.$spacing-0;
+		width: $ontario-search-icon-size;
+		height: $ontario-search-icon-size;
+		display: inline-block;
+		vertical-align: middle;
+		overflow: hidden;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		width: $ontario-search-button-width--mobile;
+	}
+}
+
+// remove default cancel button for input with type="search"
+input[type='search'].ontario-search__input::-webkit-search-decoration,
+input[type='search'].ontario-search__input::-webkit-search-cancel-button,
+input[type='search'].ontario-search__input::-webkit-search-results-button,
+input[type='search'].ontario-search__input::-webkit-search-results-decoration {
+	-webkit-appearance: none;
+}

package/src/components/ontario-search-box/ontario-search-box.tsx

@@ -0,0 +1,341 @@
+import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';
+import { Input } from '../../utils/common/input/input';
+import { Language } from '../../utils/common/language-types';
+import OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';
+import { Hint } from '../../utils/common/common.interface';
+import { handleInputEvent } from '../../utils/events/event-handler';
+import {
+	InputFocusBlurEvent,
+	EventType,
+	InputInteractionEvent,
+	InputInputEvent,
+} from '../../utils/events/event-handler.interface';
+import { Caption } from '../../utils/common/input-caption/caption.interface';
+import { InputCaption } from '../../utils/common/input-caption/input-caption';
+import { default as translations } from '../../translations/global.i18n.json';
+import { constructHintTextObject } from '../../utils/components/hints/hints';
+
+@Component({
+	tag: 'ontario-search-box',
+	styleUrl: 'ontario-search-box.scss',
+	shadow: true,
+})
+export class OntarioSearchBox {
+	@Element() element: HTMLElement;
+	@AttachInternals() internals: ElementInternals;
+
+	/**
+	 * This Ref is used get a direct reference to the hint text element
+	 */
+	private hintTextRef?: HTMLOntarioHintTextElement;
+
+	/**
+	 * This Ref is used get a direct reference to the search input element
+	 */
+	private inputFieldRef?: HTMLInputElement;
+
+	/**
+	 * The language of the component.
+	 * This is used for translations. If none is passed, it will default to English.
+	 */
+	@Prop({ mutable: true }) language?: Language = 'en';
+
+	/**
+	 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+	 */
+	@Prop({ mutable: true }) elementId?: string;
+
+	/**
+	 * The value of the search term.
+	 * This is optional.
+	 */
+	@Prop({ mutable: true }) value?: string;
+
+	/**
+	* The text to display as the input label
+	*
+	* @example
+	* <ontario-search-box
+	*      caption='{
+					"captionText": "Search directory",
+					"captionType": "default"
+					}'
+				required = "true"
+	>
+	</ontario-search-box>
+	*/
+	@Prop() caption: Caption | string;
+
+	/**
+	 * This is used to determine whether the dropdown list is required or not.
+	 * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.
+	 * If no prop is set, it will default to false (optional).
+	 */
+	@Prop() required?: boolean = false;
+
+	/**
+	 * This Function to perform a search operation.
+	 * This function will be called when the search submit button is triggered.
+	 * The value argument is used for as search term to use for the search operation. This parameter is optional.
+	 * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.
+	 *
+	 * @example
+	 * <ontario-search-box
+	 *	  id="ontario-search-box"
+	 *	  caption='Search directory'
+	 * ></ontario-search-box>
+	 *
+	 * <script>
+	 *	window.addEventListener('load', () => {
+	 *		const searchBox = document.getElementById('ontario-search-box');
+	 *		searchBox.performSearch = async (value) => {
+	 * 			console.log('Performing search with value:', value);
+	 *		};
+	 *	});
+	 * </script>
+	 */
+	@Prop() performSearch?: (value?: string) => Promise<void>;
+
+	/**
+	 * Used to include the ontario-hint-text component for the search-box.
+	 * This is optional.
+	 */
+	@Prop() hintText?: string | Hint;
+
+	/**
+	 * Used to add a custom function to the input onInput event.
+	 */
+	@Prop() customOnInput?: (event: globalThis.Event) => void;
+
+	/**
+	 * Used to add a custom function to the input onChange event.
+	 */
+	@Prop() customOnChange?: (event: globalThis.Event) => void;
+
+	/**
+	 * Used to add a custom function to the input onBlur event.
+	 */
+	@Prop() customOnBlur?: (event: globalThis.Event) => void;
+
+	/**
+	 * Used to add a custom function to the input onFocus event.
+	 */
+	@Prop() customOnFocus?: (event: globalThis.Event) => void;
+
+	/**
+	 * Emitted when the search is submitted.
+	 * Below is an example on how to hook into the event to get the event details.
+	 *
+	 * @example
+	 *	<script>
+	 *		document.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {
+	 *	 		const searchValue = event.detail;
+	 *			console.log('Search submitted with value:', searchValue);
+	 *	  };
+	 * 	</script>
+	 */
+	@Event() searchOnSubmit: EventEmitter<string>;
+
+	/**
+	 * Emitted when a input  occurs when an input has been changed.
+	 */
+	@Event() inputOnInput: EventEmitter<InputInputEvent>;
+
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when an input has been changed.
+	 */
+	@Event() inputOnChange: EventEmitter<InputInteractionEvent>;
+
+	/**
+	 * Emitted when a keyboard input event occurs when an input has lost focus.
+	 */
+	@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;
+
+	/**
+	 * Emitted when a keyboard input event occurs when an input has gained focus.
+	 */
+	@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;
+
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	@State() private internalHintText: Hint;
+
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	@State() private captionState: InputCaption;
+
+	/**
+	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+	 */
+	@State() hintTextId: string | null | undefined;
+
+	/**
+	 * Watch for changes to the `hintText` prop.
+	 *
+	 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
+	 */
+	@Watch('hintText')
+	private parseHintText() {
+		if (this.hintText) {
+			const hintTextObject = constructHintTextObject(this.hintText);
+			this.internalHintText = hintTextObject;
+		}
+	}
+
+	/**
+	 * Watch for changes to the `caption` prop.
+	 *
+	 * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
+	 * @param newValue: Caption | string
+	 */
+	@Watch('caption')
+	private updateCaptionState(newValue: Caption | string) {
+		this.captionState = new InputCaption(
+			this.element.tagName,
+			newValue,
+			translations,
+			this.language,
+			false,
+			this.required,
+		);
+	}
+
+	/**
+	 * Watch for changes to the `language` prop to render either the English or French translations
+	 */
+	@Watch('language')
+	updateLanguage() {
+		this.updateCaptionState(this.caption);
+	}
+
+	/**
+	 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.
+	 */
+	async componentDidLoad() {
+		this.hintTextId = await this.hintTextRef?.getHintTextId();
+	}
+
+	componentWillLoad() {
+		this.elementId = this.elementId;
+		this.parseHintText();
+		this.updateCaptionState(this.caption);
+	}
+
+	/**
+	 * Function to handle input events and the information pertaining to the input to emit.
+	 */
+	private handleEvent(event: globalThis.Event, eventType: EventType) {
+		const input = event.target as HTMLInputElement | null;
+
+		// Update the component value to match the value of the input element.
+		this.value = input?.value;
+
+		this.internals?.setFormValue?.(this.value ?? '');
+
+		handleInputEvent(
+			event,
+			eventType,
+			input,
+			this.inputOnChange,
+			this.inputOnFocus,
+			this.inputOnBlur,
+			this.inputOnInput,
+			'input',
+			this.customOnChange,
+			this.customOnFocus,
+			this.customOnBlur,
+			this.customOnInput,
+			this.element,
+		);
+	}
+
+	/**
+	 * handleSearch function is called when the search submit button is clicked
+	 */
+	async handleSearch(event: MouseEvent) {
+		event.preventDefault();
+		this.searchOnSubmit.emit(this.value);
+		this.performSearch && (await this.performSearch(this.value));
+	}
+
+	public getId(): string {
+		return this.elementId ?? '';
+	}
+
+	private getValue(): string | number {
+		return this.value ?? '';
+	}
+
+	/**
+	 *This function ensures that the focus returns to the search input field when the reset button is clicked.
+	 */
+	private setFocus(inputRef?: HTMLInputElement) {
+		if (inputRef) {
+			inputRef.focus();
+		}
+	}
+
+	/**
+	 * when the reset button is clicked this function gets called
+	 */
+	handleFocus = () => {
+		this.setFocus(this.inputFieldRef);
+	};
+
+	render() {
+		const searchInputFieldId: string = 'ontario-search-input-field';
+		return (
+			<form
+				name="searchForm"
+				id="ontario-search-form-container"
+				class="ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6"
+				novalidate
+			>
+				{this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */}
+				{this.internalHintText && (
+					<ontario-hint-text
+						hint={this.internalHintText.hint}
+						hintContentType={this.internalHintText.hintContentType}
+						ref={(el) => (this.hintTextRef = el)}
+					></ontario-hint-text>
+				)}
+
+				<div class="ontario-search__input-container">
+					<Input
+						aria-describedBy={this.hintTextId}
+						type="search"
+						name="search"
+						id={searchInputFieldId}
+						autoComplete="off"
+						aria-autocomplete="none"
+						className="ontario-search__input ontario-input"
+						required={true}
+						ref={(el) => (this.inputFieldRef = el)}
+						onInput={(e) => this.handleEvent(e, EventType.Input)}
+						onChange={(e) => this.handleEvent(e, EventType.Change)}
+						onBlur={(e) => this.handleEvent(e, EventType.Blur)}
+						onFocus={(e) => this.handleEvent(e, EventType.Focus)}
+						value={this.getValue()}
+					></Input>
+					<Input
+						className="ontario-search__reset"
+						id="ontario-search-reset"
+						type="reset"
+						value=""
+						onClick={() => this.handleFocus()}
+					></Input>
+					<button
+						class="ontario-search__submit"
+						type="submit"
+						id="ontario-search-box__submit"
+						onClick={(e) => this.handleSearch(e)}
+					>
+						<span innerHTML={OntarioIconSearch} />
+					</button>
+				</div>
+			</form>
+		);
+	}
+}