@ongov/ontario-design-system-component-library 5.0.0-alpha.6 → 5.0.0

package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.js

@@ -61,17 +61,17 @@ export class OntarioStepIndicator {
 	render() {
 		return h(
 			'div',
-			{ key: '4e4bc3d532d200fe27e0ea5153404515d67a50a9', class: 'ontario-step-indicator' },
+			{ key: '99b28d54588042901db733dc07515778730104e0', class: 'ontario-step-indicator' },
 			h(
 				'div',
-				{ key: '08d05bed5c4ba11f4dcf3026429a395b8df34fdd', class: 'ontario-row' },
+				{ key: '4d7d0de7f7573d237eb1efdb189d47aa8edb0c97', class: 'ontario-row' },
 				h(
 					'div',
-					{ key: 'd5112ae4a7e493f55f2e36698efb8fdeae1094ab', class: 'ontario-columns ontario-small-12' },
+					{ key: '59beefde92218fac06ea12335937a7eaa05f4a05', class: 'ontario-columns ontario-small-12' },
 					h(
 						'div',
 						{
-							key: 'e9b994c4056f7f1059e279a426e0c6fc383666bd',
+							key: '6f6b3b31ad381ec965e24d2d0cb71fcb87a55e8e',
 							class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
 						},
 						this.showBackButton === true &&
@@ -79,11 +79,11 @@ export class OntarioStepIndicator {
 							h(
 								'button',
 								{
-									key: 'b6b7863719ff323655307a2a4382ec0c334cbf3c',
+									key: 'f81596ff5ef6e6c53921be03dd9d2156b6bebbfd',
 									class: 'ontario-button ontario-button--tertiary',
 									onClick: (e) => this.handleCustomOnClick(e),
 								},
-								h('ontario-icon-chevron-left', { key: '076c150b27302c23abd3f3965d5b0403b23d888e', colour: 'blue' }),
+								h('ontario-icon-chevron-left', { key: 'a7f93e91eb046d3927abd6c10db07302e1aa09a8', colour: 'blue' }),
 								this.translations.stepIndicator.back[`${this.language}`],
 							),
 						this.showBackButton === true &&
@@ -91,11 +91,11 @@ export class OntarioStepIndicator {
 							h(
 								'a',
 								{
-									key: 'bc3b0099da8f3093c3934dba6647f5fe85e53bf2',
+									key: 'dcb41f75d9074ac2a2e423f75f5eafd1a628a221',
 									class: 'ontario-button ontario-button--tertiary',
 									href: this.backButtonUrl,
 								},
-								h('ontario-icon-chevron-left', { key: '5198d8103499c6062dd73b9fc1a5d2c45b726476', colour: 'blue' }),
+								h('ontario-icon-chevron-left', { key: '6d396d47d555552128c442d96e0f90ed8a1d2290', colour: 'blue' }),
 								this.translations.stepIndicator.back[`${this.language}`],
 							),
 						this.percentageComplete
@@ -119,7 +119,7 @@ export class OntarioStepIndicator {
 									this.numberOfSteps,
 								),
 					),
-					h('hr', { key: 'ce73508f420886268f04b9007b8b9930e21ff856' }),
+					h('hr', { key: '50951805695a30af40d20f7500f8dc8ede620f71' }),
 				),
 			),
 		);
@@ -144,6 +144,7 @@ export class OntarioStepIndicator {
 		return {
 			showBackButton: {
 				type: 'boolean',
+				attribute: 'show-back-button',
 				mutable: false,
 				complexType: {
 					original: 'boolean',
@@ -158,12 +159,12 @@ export class OntarioStepIndicator {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'show-back-button',
 				reflect: false,
 				defaultValue: 'false',
 			},
 			backButtonUrl: {
 				type: 'string',
+				attribute: 'back-button-url',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -178,11 +179,11 @@ export class OntarioStepIndicator {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'back-button-url',
 				reflect: false,
 			},
 			currentStep: {
 				type: 'number',
+				attribute: 'current-step',
 				mutable: false,
 				complexType: {
 					original: 'number',
@@ -197,11 +198,11 @@ export class OntarioStepIndicator {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'current-step',
 				reflect: false,
 			},
 			numberOfSteps: {
 				type: 'number',
+				attribute: 'number-of-steps',
 				mutable: false,
 				complexType: {
 					original: 'number',
@@ -216,11 +217,11 @@ export class OntarioStepIndicator {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'number-of-steps',
 				reflect: false,
 			},
 			percentageComplete: {
 				type: 'number',
+				attribute: 'percentage-complete',
 				mutable: false,
 				complexType: {
 					original: 'number',
@@ -235,11 +236,11 @@ export class OntarioStepIndicator {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'percentage-complete',
 				reflect: false,
 			},
 			customOnClick: {
 				type: 'unknown',
+				attribute: 'custom-on-click',
 				mutable: false,
 				complexType: {
 					original: '(event: globalThis.Event) => void',
@@ -262,6 +263,7 @@ export class OntarioStepIndicator {
 			},
 			language: {
 				type: 'string',
+				attribute: 'language',
 				mutable: true,
 				complexType: {
 					original: 'Language',
@@ -282,7 +284,6 @@ export class OntarioStepIndicator {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'language',
 				reflect: false,
 			},
 		};

package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-step-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() showBackButton?: boolean = false;\n\n\t/**\n\t * URL for the back element to set a path for where the link will lead.\n\t *\n\t * If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() backButtonUrl?: string;\n\n\t/**\n\t * A number value to indicate which step the user is currently on.\n\t */\n\t@Prop() currentStep?: number;\n\n\t/**\n\t * A number value to indicate to the user the total number of steps the form has.\n\t */\n\t@Prop() numberOfSteps?: number;\n\n\t/**\n\t * A number value to indicate to the user the percentage of the form that has been completed.\n\t */\n\n\t@Prop() percentageComplete?: number;\n\n\t/**\n\t * Used to add a custom function to the back button onClick event.\n\t *\n\t * If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span>&nbsp;%</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]}&nbsp;{this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]}&nbsp;{this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-step-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() showBackButton?: boolean = false;\n\n\t/**\n\t * URL for the back element to set a path for where the link will lead.\n\t *\n\t * If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() backButtonUrl?: string;\n\n\t/**\n\t * A number value to indicate which step the user is currently on.\n\t */\n\t@Prop() currentStep?: number;\n\n\t/**\n\t * A number value to indicate to the user the total number of steps the form has.\n\t */\n\t@Prop() numberOfSteps?: number;\n\n\t/**\n\t * A number value to indicate to the user the percentage of the form that has been completed.\n\t */\n\n\t@Prop() percentageComplete?: number;\n\n\t/**\n\t * Used to add a custom function to the back button onClick event.\n\t *\n\t * If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span>&nbsp;%</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]}&nbsp;{this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]}&nbsp;{this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-table/ontario-table.js

@@ -211,34 +211,34 @@ export class OntarioTable {
 		const columns = extractValuesByKey(this.tableColumnsState, 'key');
 		return h(
 			'div',
-			{ key: '9d04df8006e6bdfba1110f74fe8e1e2bb16e96af', class: 'ontario-table-container' },
+			{ key: '4f8842108ac7007576fe5ea75ec83de5cfbb2853', class: 'ontario-table-container' },
 			h(
 				'div',
 				{
-					key: '1d2bd821afbef0959cd3dd0ea91818a06173bd38',
+					key: '69130c9552b854e80d267728f947032222eacbe7',
 					class: 'ontario-table-scroll--wrapper',
 					ref: (el) => (this.tableScrollWrapper = el),
 				},
 				h('div', {
-					key: '62d162a39b939464b4438bd67d51093faaac578b',
+					key: 'cbd058d782c1d5a2aa70787af688b1fbd3607ba6',
 					class: 'ontario-table-scroll--div',
 					ref: (el) => (this.tableScrollDiv = el),
 				}),
 			),
 			h(
 				'div',
-				{ key: '9f5bdf6c32c6d21ab7ae166e5615f62a57b1c8f0', class: 'ontario-table-div', ref: (el) => (this.table = el) },
+				{ key: '743c382ed2826bc49014af4d26283c812faf0199', class: 'ontario-table-div', ref: (el) => (this.table = el) },
 				h(
 					'table',
-					{ key: '3a6335255edf36dc9f3e7498f5129e2c00884ed6', class: this.getTableClasses() },
-					this.caption && h('caption', { key: 'e9d58e89c6af824f30e6484926ff174b55f30816' }, this.caption),
+					{ key: '6a1f6baed2928d4508aeb3260e750d1b52a189fa', class: this.getTableClasses() },
+					this.caption && h('caption', { key: 'aa662bd73b1b2315642e624e31e288ea096f583c' }, this.caption),
 					this.tableColumnsState &&
 						h(
 							'thead',
-							{ key: 'c9449c1d7cfd52fcc6aa538f4b6d1eaf6f34907f' },
+							{ key: 'c6844d209ce5eb7e5220cec715c1b0d858bd03a4' },
 							h(
 								'tr',
-								{ key: '46715ab0f89bd15b4f5cf47357fe01e5fb42dd3a' },
+								{ key: '160fc34659ac78321cd3c9309282c42c4f83819e' },
 								this.tableColumnsState.map((columnData) => {
 									const columnClass = this.getColumnClasses(columnData);
 									return h('th', {
@@ -254,7 +254,7 @@ export class OntarioTable {
 					this.tableDataState &&
 						h(
 							'tbody',
-							{ key: '2557841f79c5c86047511e65f0f7eb311b111fee' },
+							{ key: '7774577acb957958aa317917636ee27c52ae10be' },
 							this.tableDataState.map((rowData) => {
 								const rowClass = rowData.highlight
 									? `ontario-table-row--highlight`
@@ -267,7 +267,7 @@ export class OntarioTable {
 					!!this.tableFooterState.length &&
 						h(
 							'tfoot',
-							{ key: 'e6f5d0e80a1abd98b5af6bac5527b5b2f63f9911' },
+							{ key: 'a293134380a5f33e008b05c419f371bd0c93308f' },
 							this.tableFooterState.map((footerData) => {
 								return this.generateTableDataHTML('tableData', footerData, columns, undefined);
 							}),
@@ -299,6 +299,7 @@ export class OntarioTable {
 		return {
 			caption: {
 				type: 'string',
+				attribute: 'caption',
 				mutable: false,
 				complexType: {
 					original: 'string | undefined',
@@ -313,11 +314,11 @@ export class OntarioTable {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'caption',
 				reflect: false,
 			},
 			tableColumns: {
 				type: 'string',
+				attribute: 'table-columns',
 				mutable: false,
 				complexType: {
 					original: 'string | TableColumnOptions[]',
@@ -343,11 +344,11 @@ export class OntarioTable {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'table-columns',
 				reflect: false,
 			},
 			tableData: {
 				type: 'string',
+				attribute: 'table-data',
 				mutable: false,
 				complexType: {
 					original: 'string | TableRowOptions[]',
@@ -373,11 +374,11 @@ export class OntarioTable {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'table-data',
 				reflect: false,
 			},
 			zebraStripes: {
 				type: 'string',
+				attribute: 'zebra-stripes',
 				mutable: false,
 				complexType: {
 					original: "'auto' | 'disabled' | 'enabled' | undefined",
@@ -392,12 +393,12 @@ export class OntarioTable {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'zebra-stripes',
 				reflect: false,
 				defaultValue: "'auto'",
 			},
 			condensed: {
 				type: 'boolean',
+				attribute: 'condensed',
 				mutable: false,
 				complexType: {
 					original: 'boolean | undefined',
@@ -412,12 +413,12 @@ export class OntarioTable {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'condensed',
 				reflect: false,
 				defaultValue: 'false',
 			},
 			fullWidth: {
 				type: 'boolean',
+				attribute: 'full-width',
 				mutable: false,
 				complexType: {
 					original: 'boolean | undefined',
@@ -432,7 +433,6 @@ export class OntarioTable {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'full-width',
 				reflect: false,
 				defaultValue: 'false',
 			},

package/dist/collection/components/ontario-task/ontario-task.css

@@ -0,0 +1,136 @@
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Focus placeholder variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder
+--------------------------------- */
+.ontario-task__link:focus .ontario-task__label {
+	box-shadow: 0 0 0 4px #009adb;
+	outline: 4px solid transparent;
+	transition: box-shadow 0.1s ease-in-out;
+}
+
+/* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+.ontario-task {
+	border-bottom: 0.125rem solid #cccccc;
+	padding: 1.1875rem 0;
+	list-style: none;
+}
+.ontario-task__content {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+@media screen and (max-width: 40em) {
+	.ontario-task__content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}
+.ontario-task__label {
+	text-align: left;
+	margin: 0;
+	font-size: 1.1875rem;
+	font-weight: 600;
+	display: inline-block;
+}
+@media screen and (max-width: 40em) {
+	.ontario-task__label {
+		margin-bottom: 0.5rem;
+	}
+}
+.ontario-task__label a {
+	text-decoration: none;
+	color: inherit;
+}
+.ontario-task__label a:hover {
+	text-decoration: underline;
+}
+.ontario-task__link {
+	display: block;
+	text-decoration: underline;
+	color: #0066cc;
+	font-weight: normal;
+}
+.ontario-task__hint-text--true {
+	margin-bottom: 0.5rem;
+}
+
+.ontario-task__link:focus {
+	outline: none;
+	box-shadow: none;
+}
+.ontario-task__link:focus .ontario-task__label {
+	box-shadow: 0 0 0 4px #009adb inset;
+}
+
+.ontario-task:has(.ontario-task__link):hover {
+	background-color: #f2f2f2;
+}
+
+.ontario-task--status-completed .ontario-task__link .ontario-task__label,
+.ontario-task--status-inprogress .ontario-task__link .ontario-task__label,
+.ontario-task--status-notstarted .ontario-task__link .ontario-task__label,
+.ontario-task--status-optional .ontario-task__link .ontario-task__label,
+.ontario-task--status-error .ontario-task__link .ontario-task__label {
+	color: #0066cc;
+	text-decoration: underline;
+}
+.ontario-task--status-completed .ontario-task__link:visited .ontario-task__label,
+.ontario-task--status-inprogress .ontario-task__link:visited .ontario-task__label,
+.ontario-task--status-notstarted .ontario-task__link:visited .ontario-task__label,
+.ontario-task--status-optional .ontario-task__link:visited .ontario-task__label,
+.ontario-task--status-error .ontario-task__link:visited .ontario-task__label {
+	color: #551a8b;
+}
+.ontario-task--status-completed .ontario-task__link:hover .ontario-task__label,
+.ontario-task--status-inprogress .ontario-task__link:hover .ontario-task__label,
+.ontario-task--status-notstarted .ontario-task__link:hover .ontario-task__label,
+.ontario-task--status-optional .ontario-task__link:hover .ontario-task__label,
+.ontario-task--status-error .ontario-task__link:hover .ontario-task__label {
+	color: #00478f;
+}
+.ontario-task--status-completed .ontario-task__link:active .ontario-task__label,
+.ontario-task--status-inprogress .ontario-task__link:active .ontario-task__label,
+.ontario-task--status-notstarted .ontario-task__link:active .ontario-task__label,
+.ontario-task--status-optional .ontario-task__link:active .ontario-task__label,
+.ontario-task--status-error .ontario-task__link:active .ontario-task__label {
+	color: #002142;
+}
+
+ontario-hint-text::part(hint-text) {
+	margin: 0;
+}
+@media screen and (max-width: 40em) {
+	ontario-hint-text::part(hint-text) {
+		margin-top: 0.5rem;
+	}
+}