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

package/src/components/ontario-icon/ontario-icon-sort-variant.tsx

@@ -0,0 +1,139 @@
+// content automatically generated by `generate-icons.js` begins
+import { Component, Prop, h, Watch, State } from '@stencil/core';
+import { IconWithColour } from './icon.interface';
+import { IconSize, IconColour, IconColours } from './icon.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import validateColor from 'validate-color';
+
+@Component({
+	tag: 'ontario-icon-sort-variant',
+	styleUrl: 'ontario-icon.scss',
+	shadow: true,
+})
+export class OntarioIconSortVariant implements IconWithColour {
+	/**
+	 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+	 * the aspect ratio.
+	 */
+	@Prop() iconWidth: IconSize = 24;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's width depending on validation result.
+	 */
+	@State() iconWidthState: number;
+
+	/**
+	 * Watch for changes in the `iconWidth` variable for validation purpose.
+	 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+	 */
+	@Watch('iconWidth')
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-sort-variant> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+
+	/**
+	 * Set the icon's colour.
+	 */
+	@Prop() colour: IconColour = 'black';
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconColourState: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the icon's colour based on validation result.
+	 */
+	@State() iconCustomColourState: string;
+
+	/**
+	 * Watch for changes in the `colour` variable for validation purpose.
+	 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+	 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+	 */
+	@Watch('colour')
+	validateColour() {
+		const isValid = validateValueAgainstArray(this.colour, IconColours);
+		if (isValid) {
+			this.iconColourState = this.colour;
+		} else {
+			if (validateColor(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+
+	/**
+	 * Print the invalid colour warning message
+	 * @returns default colour (black)
+	 */
+	private warnDefaultColour(): IconColour {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-sort-variant> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+
+	/**
+	 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+	 */
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+
+	/**
+	 * Returns the HTML code to be rendered into a custom element.
+	 */
+	render() {
+		return (
+			<div
+				class={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}
+				style={{ width: `${this.iconWidthState}px` }}
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					id="sort-variant"
+				>
+					<path d="M3 13H15V11H3M3 6V8H21V6M3 18H9V16H3V18Z" />
+				</svg>
+			</div>
+		);
+	}
+}
+// content automatically generated by `generate-icons.js` ends

package/src/components/ontario-icon/ontario-icon-sort.tsx

@@ -38,9 +38,7 @@ export class OntarioIconSort implements IconWithColour {
 				.addRegularText('on')
 				.addMonospaceText(' <ontario-icon-sort> ')
 				.addRegularText(
-					`${
-						isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'
-					}; only a positive number is allowed. The default size of`,
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
 				)
 				.addMonospaceText(' 24px ')
 				.addRegularText('was assumed.')
@@ -124,15 +122,8 @@ export class OntarioIconSort implements IconWithColour {
 				class={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}
 				style={{ width: `${this.iconWidthState}px` }}
 			>
-				<svg
-					class="svg-icon"
-					style={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}
-					role="img"
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					id="sort"
-				>
-					<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
+				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="sort">
+					<path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
 				</svg>
 			</div>
 		);

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

@@ -1,4 +1,4 @@
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 
 .ontario-icon svg,
 // Fractal component style coverage ↓

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

@@ -1,12 +1,16 @@
-@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/fonts.variables' as fonts;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@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;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
-@use '../../styles/form.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+
+@use '../../styles/fieldsets.scss';
+@use '../../styles/labels.scss';
+@use '../../styles/text-inputs.scss';
 @forward '../../utils/components/error-message/error-message';
 
 $ontario-input-padding: 0.625rem;
@@ -21,7 +25,7 @@ $ontario-input-border-width: 0.125rem;
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
 	font-family: fonts.$ontario-font-open-sans;
 	line-height: globalVariables.$line-height-default;
-	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7;
+	margin: spacing.$spacing-0;
 	max-width: globalVariables.$standard-width;
 	padding: $ontario-input-padding spacing.$spacing-4;
 	transition: focusPlaceholders.$ontario-focus-transition;

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

@@ -253,7 +253,7 @@ export class OntarioInput implements TextInput {
 
 	/**
 	 * Handles an update to the language should the user request a language update from the language toggle.
-	 * @param event The language that has been selected.
+	 * @param {CustomEvent} - The language that has been selected.
 	 */
 	@Listen('headerLanguageToggled', { target: 'window' })
 	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
@@ -442,7 +442,7 @@ export class OntarioInput implements TextInput {
 	render() {
 		const error = !!this.errorMessage;
 		return (
-			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
+			<div class={error ? 'ontario-input--error' : ''}>
 				{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}
 				{this.internalHintText && (
 					<ontario-hint-text

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

@@ -3,7 +3,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">
   <template shadowrootmode="open">
-    <div class="ontario-form-group">
+    <div>
       <label class="ontario-label" htmlfor="ontario-input">
         Ontario Input
         <span class="ontario-label__flag">

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

@@ -22,7 +22,7 @@ describe('ontario-input', () => {
 			expect(page.root).toEqualHtml(`
 				<ontario-input element-id="ontario-input" caption='{"captionText": "Ontario Input"}' name="ontario-input">
 					<mock:shadow-root>
-						<div class="ontario-form-group">
+						<div>
 							<label class="ontario-label" htmlfor="ontario-input">
 								Ontario Input
 								<span class="ontario-label__flag">

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

@@ -1,14 +1,15 @@
 @use 'sass:math';
-@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/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
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
 
-@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
 
 .ontario-language-toggler {
 	background-color: colours.$ontario-colour-black;
@@ -29,7 +30,9 @@
 	text-decoration: none;
 
 	&:hover {
+		color: colours.$ontario-colour-white;
 		background-color: colours.$ontario-greyscale-70;
+		color: colours.$ontario-colour-white;
 	}
 
 	&:active {

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

@@ -1,9 +1,10 @@
-@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/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;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
 
 $offset: 1, 200;
 $duration: 1.5s;

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

@@ -3,7 +3,7 @@ import { Language } from '../../utils/common/language-types';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
-
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 import translations from '../../translations/global.i18n.json';
 
 @Component({
@@ -61,9 +61,13 @@ export class OntarioLoadingIndicator {
 		}
 	}
 
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
 	@Listen('headerLanguageToggled', { target: 'window' })
-	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
-		this.language = validateLanguage(event);
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 
 	/**
@@ -129,7 +133,12 @@ export class OntarioLoadingIndicator {
 				aria-live="assertive"
 			>
 				<div class="ontario-loading-indicator">
-					<svg class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
+					<svg
+						class="ontario-loading-indicator__spinner"
+						viewBox="25 25 50 50"
+						xmlns="http://www.w3.org/2000/svg"
+						aria-hidden="true"
+					>
 						<circle cx="50" cy="50" r="20" fill="none" stroke-width="4" />
 					</svg>
 					<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>

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

@@ -5,7 +5,7 @@ exports[`ontario-loading-indicator should render the expected html 1`] = `
   <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">
+        <svg aria-hidden="true" class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
           <circle cx="50" cy="50" fill="none" r="20" stroke-width="4"></circle>
         </svg>
         <p>

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

@@ -21,7 +21,7 @@ describe('ontario-loading-indicator', () => {
 				<mock:shadow-root>
 					<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">
+							<svg aria-hidden="true" class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
 								<circle cx="50" cy="50" fill="none" r="20" stroke-width="4"></circle>
 							</svg>
 							<p>Loading</p>

package/src/components/ontario-page-alert/ontario-page-alert.scss

@@ -1,9 +1,10 @@
-@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/2-tools/functions/global.functions' as globalFunctions;
-@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@forward 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 
 $ontario-alert-link-focus: #6b0000;
 $ontario-alert-link-active: #280000;

package/src/components/ontario-page-alert/ontario-page-alert.tsx

@@ -101,7 +101,9 @@ export class OntarioPageAlert implements PageAlert {
 		return (
 			<div class={this.getClass()}>
 				<div class="ontario-alert__header">
-					<div class="ontario-alert__header-icon">{this.renderIcon()}</div>
+					<div class="ontario-alert__header-icon" aria-hidden="true">
+						{this.renderIcon()}
+					</div>
 					<h2 class="ontario-alert__header-title ontario-h4">{this.heading}</h2>
 				</div>
 				<div class="ontario-alert__body">{this.renderContent()}</div>

package/src/components/ontario-page-alert/test/ontario-page-alert.spec.tsx

@@ -15,7 +15,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--informational">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-information icon-width="36"></ontario-icon-alert-information>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -44,7 +44,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--warning">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-warning icon-width="36"></ontario-icon-alert-warning>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -73,7 +73,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--success">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-success icon-width="36"></ontario-icon-alert-success>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -102,7 +102,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--error">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-error icon-width="36"></ontario-icon-alert-error>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4">
@@ -132,7 +132,7 @@ describe('ontario-page-alert', () => {
 				<mock:shadow-root>
 			     <div class="ontario-alert ontario-alert--informational">
 			       <div class="ontario-alert__header">
-			         <div class="ontario-alert__header-icon">
+			         <div aria-hidden="true" class="ontario-alert__header-icon">
 			           <ontario-icon-alert-information icon-width="36"></ontario-icon-alert-information>
 			         </div>
 			         <h2 class="ontario-alert__header-title ontario-h4"></h2>

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

@@ -1,25 +1,32 @@
 @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/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;
-@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/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	placeholders;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/visibility.overrides';
+
+@use '../../styles/fieldsets.scss';
+@use '../../styles/labels.scss';
+@use '../../styles/text-inputs.scss';
 @forward '../../utils/components/error-message/error-message';
 
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
 
+.ontario-radios {
+	padding: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 math.div(spacing.$spacing-1, 2);
+	max-width: globalVariables.$standard-width;
+}
+
 .ontario-radios__item {
 	position: relative;
 	display: block;
@@ -29,6 +36,14 @@ $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-r
 	&:last-of-type {
 		margin-bottom: spacing.$spacing-0;
 	}
+
+	.ontario-radios__hint-expander {
+		margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;
+
+		@media screen and (max-width: breakpoints.$small-breakpoint) {
+			margin-top: spacing.$spacing-4;
+		}
+	}
 }
 
 .ontario-radios__input {
@@ -119,7 +134,7 @@ $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-r
 }
 
 .ontario-radios__hint-expander {
-	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;
+	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
 		margin-top: spacing.$spacing-4;

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

@@ -23,6 +23,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 import { ErrorMessage } from '../../utils/components/error-message/error-message';
 import { ConsoleType } from '../../utils/console-message/console-message.enum';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 
 import { default as translations } from '../../translations/global.i18n.json';
 
@@ -224,9 +225,13 @@ export class OntarioRadioButtons implements RadioButtons {
 		}
 	}
 
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
 	@Listen('headerLanguageToggled', { target: 'window' })
-	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
-		this.language = validateLanguage(event);
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
+		this.language = validateLanguage(event.detail.newLanguage);
 	}
 
 	/**
@@ -431,7 +436,7 @@ export class OntarioRadioButtons implements RadioButtons {
 	render() {
 		const error = !!this.errorMessage;
 		return (
-			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
+			<div class={error ? 'ontario-input--error' : ''}>
 				<fieldset class="ontario-fieldset" aria-describedby={this.hintTextId}>
 					{this.captionState.getCaption(undefined, !!this.internalHintExpander)}
 					{this.internalHintText && (

package/src/components/ontario-radio-buttons/test/ontario-radio-button.spec.tsx

@@ -10,7 +10,7 @@ describe('ontario-radio-buttons', () => {
 		expect(page.root).toEqualHtml(`
       <ontario-radio-buttons>
         <mock:shadow-root>
-          <div class="ontario-form-group">
+          <div>
             <fieldset class="ontario-fieldset">
                 <legend class="ontario-fieldset__legend">
                   <span class="ontario-label__flag">

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

@@ -1,16 +1,21 @@
 @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
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@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';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+
+@use '../../styles/fieldsets.scss';
+@use '../../styles/labels.scss';
+@use '../../styles/text-inputs.scss';
 
 $ontario-input-height: globalFunctions.px-to-rem(48);
 $ontario-search-icon-size: 2rem;

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

@@ -16,7 +16,7 @@ import {
 	InputInputEvent,
 } from '../../utils/events/event-handler.interface';
 
-import { default as translations } from '../../translations/global.i18n.json';
+import translations from '../../translations/global.i18n.json';
 
 @Component({
 	tag: 'ontario-search-box',
@@ -174,6 +174,8 @@ export class OntarioSearchBox {
 	 */
 	@State() hintTextId: string | null | undefined;
 
+	@State() translations: any = translations;
+
 	/**
 	 * Watch for changes to the `hintText` prop.
 	 *
@@ -198,7 +200,7 @@ export class OntarioSearchBox {
 		this.captionState = new InputCaption(
 			this.element.tagName,
 			newValue,
-			translations,
+			this.translations,
 			this.language,
 			false,
 			this.required,
@@ -339,7 +341,8 @@ export class OntarioSearchBox {
 						id="ontario-search-box__submit"
 						onClick={(e) => this.handleSearch(e)}
 					>
-						<span innerHTML={OntarioIconSearch} />
+						<span class="ontario-show-for-sr">{this.translations.header.submit[`${this.language}`]}</span>
+						<span innerHTML={OntarioIconSearch} aria-hidden="true" />
 					</button>
 				</div>
 			</form>