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

package/src/components/ontario-card/readme.md

@@ -22,13 +22,14 @@ Example of a bare-bones `ontario-card` component where the `label` and `descript
 
 <OntarioCard label="Card Title" description="Lorem Ipsum Lorem Ipsum"></OntarioCard>
 
-Example of an `ontario-card` component with an image, which includes the `headerColour`, `image`, `label` and `description` properties.
+Example of an `ontario-card` component with an image, which includes the `headerColour`, `image`, `imageAltText`, `label` and `description` properties.
 
 ```html
 <ontario-card
 	label="Card Title"
 	header-colour="sky"
 	image="https://picsum.photos/300/225"
+	image-alt-text="Randomly generated image from picsum."
 	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 >
 </ontario-card>
@@ -39,6 +40,7 @@ Example of an `ontario-card` component with an image, which includes the `header
 		label="Card Title"
 		headerColour="sky"
 		image="https://picsum.photos/300/225"
+		imageAltText="Randomly generated image from picsum."
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	></OntarioCard>
 </div>
@@ -47,7 +49,7 @@ This is another example of an `ontario-card` component with a horizontal layout
 
 ```html
 <ontario-card
-	layout="horizontal"
+	layout-direction="horizontal"
 	label="Card Title"
 	image="https://picsum.photos/300/225"
 	horizontal-image-position-type="left"
@@ -59,7 +61,7 @@ This is another example of an `ontario-card` component with a horizontal layout
 
 <div>
 	<OntarioCard
-		layout="horizontal"
+		layoutDirection="horizontal"
 		label="Card Title"
 		image="https://picsum.photos/300/225"
 		horizontalImagePositionType="left"
@@ -105,17 +107,19 @@ The `header-colour` property supports a wide range of values, including:
 
 ## Properties
 
-| Property                      | Attribute                        | Description                                                                                                                                                                                                                 | Type                                       | Default       |
-| ----------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------- |
-| `ariaLabelText`               | `aria-label-text`                | Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more \* \* description than what the text provides. This is optional. | `string \| undefined`                      | `undefined`   |
-| `cardLink`                    | `card-link`                      | Action link for when the card is clicked. This is optional.                                                                                                                                                                 | `string \| undefined`                      | `undefined`   |
-| `description`                 | `description`                    | Text to be displayed within the card description container. This is optional.                                                                                                                                               | `string \| undefined`                      | `undefined`   |
-| `headerColour`                | `header-colour`                  | Set the card's header colour. This is optional.                                                                                                                                                                             | `string \| undefined`                      | `undefined`   |
-| `horizontalImagePositionType` | `horizontal-image-position-type` | The position of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                  | `"left" \| "right" \| undefined`           | `'left'`      |
-| `horizontalImageSizeType`     | `horizontal-image-size-type`     | The size of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                      | `"one-fourth" \| "one-third" \| undefined` | `'one-third'` |
-| `image`                       | `image`                          | Image to be displayed within the card image container. This is optional.                                                                                                                                                    | `string \| undefined`                      | `undefined`   |
-| `label`                       | `label`                          | Text to be displayed within the header.                                                                                                                                                                                     | `string`                                   | `undefined`   |
-| `layout`                      | `layout`                         | The layout oritnetation of the card. If no type is passed, it will default to 'vertical'.                                                                                                                                   | `"horizontal" \| "vertical" \| undefined`  | `'vertical'`  |
+| Property                      | Attribute                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Type                                                                                                                                                                                                                                                                                                                                                                                     | Default       |
+| ----------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `ariaLabelText`               | `aria-label-text`                | Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more \* \* description than what the text provides. This is optional.                                                                                                                                                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                    | `undefined`   |
+| `cardLink`                    | `card-link`                      | Action link for when the card is clicked. This is optional.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                    | `undefined`   |
+| `description`                 | `description`                    | Text to be displayed within the card description container. This is optional.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                    | `undefined`   |
+| `headerColour`                | `header-colour`                  | Set the card's header colour. This is optional.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `"teal" \| "gold" \| "yellow" \| "taupe" \| "green" \| "lime" \| "sky" \| "blue" \| "purple" \| "dark-accent" \| "light-accent" \| "light-gold" \| "light-yellow" \| "light-taupe" \| "light-green" \| "light-lime" \| "light-teal" \| "light-sky" \| "light-blue" \| "light-purple" \| "light-orange" \| "light-red" \| "light-magenta" \| "orange" \| "red" \| "magenta" \| undefined` | `undefined`   |
+| `headingLevel`                | `heading-level`                  | The heading level that the label will be rendered as.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"`                                                                                                                                                                                                                                                                                                                                                   | `'h2'`        |
+| `horizontalImagePositionType` | `horizontal-image-position-type` | The position of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                                                                                                                                                                                                                                                                                                                   | `"left" \| "right" \| undefined`                                                                                                                                                                                                                                                                                                                                                         | `'left'`      |
+| `horizontalImageSizeType`     | `horizontal-image-size-type`     | The size of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                                                                                                                                                                                                                                                                                                                       | `"one-fourth" \| "one-third" \| undefined`                                                                                                                                                                                                                                                                                                                                               | `'one-third'` |
+| `image`                       | `image`                          | Image to be displayed within the card image container. This is optional.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                    | `undefined`   |
+| `imageAltText`                | `image-alt-text`                 | Alt text for the card's image. This is optional prop, but may be required for an image due to accessibility requirements. You can find guidance on when to add alt text to an image on the Ontario.ca web content editing guide. https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup for decorative images. If left as undefined, the alt attribute will not render in markup. | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                    | `''`          |
+| `label`                       | `label`                          | Text to be displayed within the header.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `string`                                                                                                                                                                                                                                                                                                                                                                                 | `undefined`   |
+| `layoutDirection`             | `layout-direction`               | The layout direction/orientation of the card. If no type is passed, it will default to 'vertical'.                                                                                                                                                                                                                                                                                                                                                                                                                           | `"horizontal" \| "vertical" \| undefined`                                                                                                                                                                                                                                                                                                                                                | `'vertical'`  |
 
 ---
 

package/src/components/ontario-card-collection/ontario-card-collection.scss

@@ -5,7 +5,8 @@
 .ontario-card-collection__container {
 	display: flex;
 	flex-wrap: wrap;
-	gap: spacing.$spacing-6;
+	column-gap: spacing.$spacing-6;
+	row-gap: spacing.$spacing-0;
 	margin: spacing.$spacing-0;
 	padding: spacing.$spacing-0;
 }

package/src/components/ontario-checkbox/readme.md

@@ -256,19 +256,19 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 
 ## Properties
 
-| Property         | Attribute       | Description                                                                                                                                                                                                                                                                                                                                                                                                                            | Type                                    | Default     |
-| ---------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
-| `caption`        | `caption`       | The text to display for the checkbox legend.                                                                                                                                                                                                                                                                                                                                                                                           | `Caption \| string`                     | `undefined` |
-| `customOnBlur`   | --              | Used to add a custom function to the checkbox onBlur event.                                                                                                                                                                                                                                                                                                                                                                            | `((event: Event) => void) \| undefined` | `undefined` |
-| `customOnChange` | --              | Used to add a custom function to the checkbox onChange event.                                                                                                                                                                                                                                                                                                                                                                          | `((event: Event) => void) \| undefined` | `undefined` |
-| `customOnFocus`  | --              | Used to add a custom function to the checkbox onFocus event.                                                                                                                                                                                                                                                                                                                                                                           | `((event: Event) => void) \| undefined` | `undefined` |
-| `errorMessage`   | `error-message` | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                   | `string \| undefined`                   | `undefined` |
-| `hintExpander`   | `hint-expander` | Used to include the ontario-hint-expander component for the checkbox group. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                                                                                                                     | `HintExpander \| string \| undefined`   | `undefined` |
-| `hintText`       | `hint-text`     | Used to include the ontario-hint-text component for the checkbox group. This is optional.                                                                                                                                                                                                                                                                                                                                              | `Hint \| string \| undefined`           | `undefined` |
-| `language`       | `language`      | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                                                                                                                    | `"en" \| "fr" \| undefined`             | `undefined` |
-| `name`           | `name`          | The name for the checkboxes. The name value is used to reference form data after a form is submitted.                                                                                                                                                                                                                                                                                                                                  | `string`                                | `undefined` |
-| `options`        | `options`       | The options for the checkbox group. Each property will be passed in through an object in the options array. This can either be passed in as an object directly (if using react), or as a string in HTML. If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option. In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset. | `CheckboxOption[] \| string`            | `undefined` |
-| `required`       | `required`      | This is used to determine whether the checkbox is required or not. This prop also 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).                                                                                                                                                                                         | `boolean \| undefined`                  | `false`     |
+| Property         | Attribute          | Description                                                                                                                                                                                                                                                                                                                                                                                                                            | Type                                    | Default     |
+| ---------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
+| `caption`        | `caption`          | The text to display for the checkbox legend.                                                                                                                                                                                                                                                                                                                                                                                           | `Caption \| string`                     | `undefined` |
+| `customOnBlur`   | `custom-on-blur`   | Used to add a custom function to the checkbox onBlur event.                                                                                                                                                                                                                                                                                                                                                                            | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnChange` | `custom-on-change` | Used to add a custom function to the checkbox onChange event.                                                                                                                                                                                                                                                                                                                                                                          | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnFocus`  | `custom-on-focus`  | Used to add a custom function to the checkbox onFocus event.                                                                                                                                                                                                                                                                                                                                                                           | `((event: Event) => void) \| undefined` | `undefined` |
+| `errorMessage`   | `error-message`    | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                   | `string \| undefined`                   | `undefined` |
+| `hintExpander`   | `hint-expander`    | Used to include the ontario-hint-expander component for the checkbox group. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                                                                                                                     | `HintExpander \| string \| undefined`   | `undefined` |
+| `hintText`       | `hint-text`        | Used to include the ontario-hint-text component for the checkbox group. This is optional.                                                                                                                                                                                                                                                                                                                                              | `Hint \| string \| undefined`           | `undefined` |
+| `language`       | `language`         | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                                                                                                                    | `"en" \| "fr" \| undefined`             | `undefined` |
+| `name`           | `name`             | The name for the checkboxes. The name value is used to reference form data after a form is submitted.                                                                                                                                                                                                                                                                                                                                  | `string`                                | `undefined` |
+| `options`        | `options`          | The options for the checkbox group. Each property will be passed in through an object in the options array. This can either be passed in as an object directly (if using react), or as a string in HTML. If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option. In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset. | `CheckboxOption[] \| string`            | `undefined` |
+| `required`       | `required`         | This is used to determine whether the checkbox is required or not. This prop also 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).                                                                                                                                                                                         | `boolean \| undefined`                  | `false`     |
 
 ## Events
 

package/src/components/ontario-date-input/readme.md

@@ -216,18 +216,18 @@ caption='{ "captionText": "Exact Date", "captionType": "heading" }'
 
 ## Properties
 
-| Property        | Attribute      | Description                                                                                                                                                                                                                                                                                                       | Type                                                                                                             | Default                    |
-| --------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
-| `caption`       | `caption`      | The text to display as the input label                                                                                                                                                                                                                                                                            | `Caption \| string`                                                                                              | `undefined`                |
-| `dateOptions`   | `date-options` | An array value used to display date options. For example, only the day and month fields can be displayed by specifying the dateOptions as `["day", "month"]`, etc. This is optional. If no prop for `dateOptions` is passed, it will default to `["day", "month", "year"]`.                                       | `DateInputFieldType[] \| string \| undefined`                                                                    | `['day', 'month', 'year']` |
-| `dateValidator` | --             | A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns an object of type `DateValidatorReturnType` This is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate the date input. | `((day: string, month: string, year: string) => DateValidatorReturnType) \| undefined`                           | `undefined`                |
-| `elementId`     | `element-id`   | The unique identifier of the input. This is optional - if no ID is passed, one will be generated.                                                                                                                                                                                                                 | `string \| undefined`                                                                                            | `undefined`                |
-| `hintText`      | `hint-text`    | Used to include the ontario-hint-text component for the date input group. This is optional.                                                                                                                                                                                                                       | `string \| undefined`                                                                                            | `undefined`                |
-| `language`      | `language`     | The language of the component. 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.                                                                                                     | `"en" \| "fr" \| undefined`                                                                                      | `undefined`                |
-| `maxYear`       | `max-year`     | A number value indicating maximum value allowed for year input field of the date component. This is optional. If no prop is passed, it will default to `9999`.                                                                                                                                                    | `number \| undefined`                                                                                            | `undefined`                |
-| `minYear`       | `min-year`     | A number value indicating minimum value allowed for year input field of the date component. This is optional. If no prop is passed, it will default to `999`.                                                                                                                                                     | `number \| undefined`                                                                                            | `undefined`                |
-| `placeholder`   | `placeholder`  | An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year) of the date component can be overridden. This is optional. If no prop is passed, it will not display any placeholder text.                            | `string \| undefined \| { day?: string \| undefined; month?: string \| undefined; year?: string \| undefined; }` | `undefined`                |
-| `required`      | `required`     | A boolean value to determine whether or not the date input is required. This is optional. If no prop is passed, it will default to `false`.                                                                                                                                                                       | `boolean \| undefined`                                                                                           | `false`                    |
+| Property        | Attribute        | Description                                                                                                                                                                                                                                                                                                       | Type                                                                                                             | Default                    |
+| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| `caption`       | `caption`        | The text to display as the input label                                                                                                                                                                                                                                                                            | `Caption \| string`                                                                                              | `undefined`                |
+| `dateOptions`   | `date-options`   | An array value used to display date options. For example, only the day and month fields can be displayed by specifying the dateOptions as `["day", "month"]`, etc. This is optional. If no prop for `dateOptions` is passed, it will default to `["day", "month", "year"]`.                                       | `DateInputFieldType[] \| string \| undefined`                                                                    | `['day', 'month', 'year']` |
+| `dateValidator` | `date-validator` | A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns an object of type `DateValidatorReturnType` This is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate the date input. | `((day: string, month: string, year: string) => DateValidatorReturnType) \| undefined`                           | `undefined`                |
+| `elementId`     | `element-id`     | The unique identifier of the input. This is optional - if no ID is passed, one will be generated.                                                                                                                                                                                                                 | `string \| undefined`                                                                                            | `undefined`                |
+| `hintText`      | `hint-text`      | Used to include the ontario-hint-text component for the date input group. This is optional.                                                                                                                                                                                                                       | `string \| undefined`                                                                                            | `undefined`                |
+| `language`      | `language`       | The language of the component. 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.                                                                                                     | `"en" \| "fr" \| undefined`                                                                                      | `undefined`                |
+| `maxYear`       | `max-year`       | A number value indicating maximum value allowed for year input field of the date component. This is optional. If no prop is passed, it will default to `9999`.                                                                                                                                                    | `number \| undefined`                                                                                            | `undefined`                |
+| `minYear`       | `min-year`       | A number value indicating minimum value allowed for year input field of the date component. This is optional. If no prop is passed, it will default to `999`.                                                                                                                                                     | `number \| undefined`                                                                                            | `undefined`                |
+| `placeholder`   | `placeholder`    | An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year) of the date component can be overridden. This is optional. If no prop is passed, it will not display any placeholder text.                            | `string \| undefined \| { day?: string \| undefined; month?: string \| undefined; year?: string \| undefined; }` | `undefined`                |
+| `required`      | `required`       | A boolean value to determine whether or not the date input is required. This is optional. If no prop is passed, it will default to `false`.                                                                                                                                                                       | `boolean \| undefined`                                                                                           | `false`                    |
 
 ## Events
 

package/src/components/ontario-dropdown-list/ontario-dropdown-list.tsx

@@ -1,16 +1,4 @@
-import {
-	Component,
-	State,
-	Element,
-	h,
-	Prop,
-	Event,
-	Listen,
-	Watch,
-	getAssetPath,
-	EventEmitter,
-	AttachInternals,
-} from '@stencil/core';
+import { Component, State, Element, h, Prop, Event, Listen, Watch, EventEmitter, AttachInternals } from '@stencil/core';
 import { v4 as uuid } from 'uuid';
 
 import { DropdownOption } from './dropdown-option.interface';
@@ -27,6 +15,7 @@ import {
 } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { hasMultipleTrueValues } from '../../utils/helper/utils';
+import { getImageAssetSrcPath } from '../../utils/helper/assets';
 import { Language } from '../../utils/common/language-types';
 import { constructHintTextObject } from '../../utils/components/hints/hints';
 import { InputFocusBlurEvent, EventType, InputInteractionEvent } from '../../utils/events/event-handler.interface';
@@ -442,7 +431,7 @@ export class OntarioDropdownList implements Dropdown {
 
 	private getDropdownArrow() {
 		return {
-			backgroundImage: `url(${getAssetPath('./assets/ontario-material-dropdown-arrow-48px.svg')})`,
+			backgroundImage: `url(${getImageAssetSrcPath('ontario-material-dropdown-arrow-48px.svg')})`,
 		};
 	}
 

package/src/components/ontario-dropdown-list/readme.md

@@ -340,9 +340,9 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 | Property             | Attribute               | Description                                                                                                                                                                                                                                                                                                         | Type                                    | Default     |
 | -------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
 | `caption`            | `caption`               | The text to display for the dropdown list label.                                                                                                                                                                                                                                                                    | `Caption \| string`                     | `undefined` |
-| `customOnBlur`       | --                      | Used to add a custom function to the dropdown onBlur event.                                                                                                                                                                                                                                                         | `((event: Event) => void) \| undefined` | `undefined` |
-| `customOnChange`     | --                      | Used to add a custom function to the dropdown onChange event.                                                                                                                                                                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
-| `customOnFocus`      | --                      | Used to add a custom function to the dropdown onFocus event.                                                                                                                                                                                                                                                        | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnBlur`       | `custom-on-blur`        | Used to add a custom function to the dropdown onBlur event.                                                                                                                                                                                                                                                         | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnChange`     | `custom-on-change`      | Used to add a custom function to the dropdown onChange event.                                                                                                                                                                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnFocus`      | `custom-on-focus`       | Used to add a custom function to the dropdown onFocus event.                                                                                                                                                                                                                                                        | `((event: Event) => void) \| undefined` | `undefined` |
 | `elementId`          | `element-id`            | The ID for the dropdown list. If no ID is provided, one will be generated.                                                                                                                                                                                                                                          | `string \| undefined`                   | `undefined` |
 | `errorMessage`       | `error-message`         | Set this to display an error message                                                                                                                                                                                                                                                                                | `string \| undefined`                   | `undefined` |
 | `hintExpander`       | `hint-expander`         | Used to include the ontario-hint-expander component for the dropdown list component. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State, Watch, Listen, getAssetPath } from '@stencil/core';
+import { Component, Prop, h, State, Watch, Listen } from '@stencil/core';
 
 import {
 	FooterLinks,
@@ -8,11 +8,13 @@ import {
 	SimpleFooterLinks,
 } from './ontario-footer-interface';
 import { ExpandedFooterWrapper, FooterColumn, FooterSocialLinksProps, SimpleFooter } from './components';
+
 import { isInvalidTwoColumnOptions, isInvalidThreeColumnOptions } from './utils';
 import { Language } from '../../utils/common/language-types';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { ConsoleType } from '../../utils/console-message/console-message.enum';
+import { getImageAssetSrcPath } from '../../utils/helper/assets';
 
 import translations from '../../translations/global.i18n.json';
 
@@ -177,15 +179,6 @@ export class OntarioFooter {
 		}
 	}
 
-	/**
-	 * Generate a link to the given image based on the base asset path.
-	 * @param imageName Name of the image to build the path to
-	 * @returns Path to image with asset path
-	 */
-	private getImageAssetSrcPath(imageName: string): string {
-		return `${this.assetBasePath ? this.assetBasePath : getAssetPath('./assets')}/${imageName}`;
-	}
-
 	/**
 	 * Generate CSS url to the background image
 	 * @returns path to the background image
@@ -195,7 +188,7 @@ export class OntarioFooter {
 			? 'footer-expanded-supergraphic-logo.svg'
 			: 'footer-default-supergraphic-logo.svg';
 
-		return `url(${this.getImageAssetSrcPath(supergraphicLogoFile)})`;
+		return `url(${getImageAssetSrcPath(supergraphicLogoFile, this.assetBasePath)})`;
 	}
 
 	private getFooterClasses() {

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

@@ -1,4 +1,4 @@
-import { Component, Prop, State, Watch, h, Listen, Element, getAssetPath } from '@stencil/core';
+import { Component, Prop, State, Watch, h, Listen, Element } from '@stencil/core';
 
 import { Input } from '../../utils/common/input/input';
 import {
@@ -16,6 +16,7 @@ import OntarioIconSearchWhite from '../ontario-icon/assets/ontario-icon-search-w
 import OntarioHeaderDefaultData from './ontario-header-default-data.json';
 
 import { Language } from '../../utils/common/language-types';
+import { getImageAssetSrcPath } from '../../utils/helper/assets';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 
 import translations from '../../translations/global.i18n.json';
@@ -23,11 +24,7 @@ import config from '../../config.json';
 
 @Component({
 	tag: 'ontario-header',
-	styleUrls: {
-		ontario: 'ontario-header.scss',
-		application: 'ontario-application-header.scss',
-		serviceOntario: 'service-ontario-header.scss',
-	},
+	styleUrls: ['ontario-header.scss', 'ontario-application-header.scss', 'service-ontario-header.scss'],
 	shadow: true,
 	assetsDirs: ['./assets'],
 })
@@ -340,12 +337,19 @@ export class OntarioHeader {
 	}
 
 	/**
-	 * Generate a link to the given image based on the base asset path.
-	 * @param imageName Name of the image to build the path to
-	 * @returns Path to image with asset path
+	 * Generate the full path to an image asset based on the base asset path.
+	 *
+	 * - If `assetBasePath` is provided, it is used as the base path.
+	 * - If not, attempts to use Stencil's `getAssetPath` (for Stencil/Angular builds).
+	 * - If that fails (e.g., in React), falls back to `/assets/`, assuming assets are in the public folder.
+	 *
+	 * This allows the component to work across multiple environments (Stencil, Angular, React).
+	 *
+	 * @param imageName - The name of the image file.
+	 * @returns The full image path as a string.
 	 */
 	private getImageAssetSrcPath(imageName: string): string {
-		return `${this.assetBasePath ? this.assetBasePath : getAssetPath('./assets')}/${imageName}`;
+		return getImageAssetSrcPath(imageName, this.assetBasePath);
 	}
 
 	/**

package/src/components/ontario-header/readme.md

@@ -287,7 +287,7 @@ To ensure best practices, it is important to limit the number of navigation link
 | ----------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | --------------- |
 | `applicationHeaderInfo` | `application-header-info` | Information pertaining to the application header. This is only necessary for the 'application' header type. This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views. | `ApplicationHeaderInfo \| string`                             | `undefined`     |
 | `assetBasePath`         | `asset-base-path`         | The base path to an assets folder containing the Design System assets                                                                                                                                                                                  | `string`                                                      | `undefined`     |
-| `customLanguageToggle`  | --                        | A custom function to pass to the language toggle button.                                                                                                                                                                                               | `((event: Event) => void) \| undefined`                       | `undefined`     |
+| `customLanguageToggle`  | `custom-language-toggle`  | A custom function to pass to the language toggle button.                                                                                                                                                                                               | `((event: Event) => void) \| undefined`                       | `undefined`     |
 | `disableDynamicMenu`    | `disable-dynamic-menu`    | Option to disable fetching of the dynamic menu from the Ontario Header API                                                                                                                                                                             | `boolean`                                                     | `false`         |
 | `language`              | `language`                | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If none is passed, it will default to English.                                           | `"en" \| "fr" \| undefined`                                   | `'en'`          |
 | `languageToggleOptions` | `language-toggle-options` | Information pertaining to the language toggle links.                                                                                                                                                                                                   | `LanguageToggleOptions \| string \| undefined`                | `undefined`     |

package/src/components/ontario-hint-text/ontario-hint-text.tsx

@@ -6,6 +6,11 @@ import { Hint, HintContentType } from '../../utils/common/common.interface';
 import { validatePropExists } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 
+/**
+ * Use hint text to help users understand how to complete fields in a form.
+ *
+ * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.
+ */
 @Component({
 	tag: 'ontario-hint-text',
 	styleUrl: 'ontario-hint-text.scss',
@@ -40,6 +45,10 @@ export class OntarioHintText implements Hint {
 
 	@State() hintState: string;
 
+	/**
+	 * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.
+	 */
+
 	/**
 	 * Watch for changes to the `hintContentType` prop for validation purposes.
 	 * If none is provided, or the wrong type is provided, it will default to `string`.
@@ -99,7 +108,7 @@ export class OntarioHintText implements Hint {
 	/**
 	 * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.
 	 *
-	 * @returns Promise<string | undefined>
+	 * @returns {Promise<string | undefined>} The ID of the hint text element, or undefined if no ID is set.
 	 */
 	@Method()
 	async getHintTextId(): Promise<string | undefined> {
@@ -133,7 +142,7 @@ export class OntarioHintText implements Hint {
 
 	render() {
 		return this.hintContentType === 'string' ? (
-			<p id={this.getId()} class="ontario-hint">
+			<p part="hint-text" id={this.getId()} class="ontario-hint">
 				{this.hintState}
 			</p>
 		) : (

package/src/components/ontario-hint-text/readme.md

@@ -39,6 +39,10 @@ Example of a hint text that includes the `hint` property, which will override th
 
 <!-- Auto Generated Below -->
 
+## Overview
+
+Use hint text to help users understand how to complete fields in a form.
+
 ## Properties
 
 | Property          | Attribute           | Description                                                                                                                                                                       | Type                              | Default     |
@@ -57,7 +61,13 @@ This method returns the ontario-hint-text id. It is used to make sure the hint t
 
 Type: `Promise<string | undefined>`
 
-Promise<string | undefined>
+The ID of the hint text element, or undefined if no ID is set.
+
+## Shadow Parts
+
+| Part          | Description                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------------- |
+| `"hint-text"` | The container for the hint text content. This part can be used to apply custom styles to the hint text. |
 
 ## Dependencies
 
@@ -68,6 +78,7 @@ Promise<string | undefined>
 - [ontario-input](../ontario-input)
 - [ontario-radio-buttons](../ontario-radio-buttons)
 - [ontario-search-box](../ontario-search-box)
+- [ontario-task](../ontario-task)
 - [ontario-textarea](../ontario-textarea)
 
 ### Graph
@@ -79,6 +90,7 @@ graph TD;
   ontario-input --> ontario-hint-text
   ontario-radio-buttons --> ontario-hint-text
   ontario-search-box --> ontario-hint-text
+  ontario-task --> ontario-hint-text
   ontario-textarea --> ontario-hint-text
   style ontario-hint-text fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -3,7 +3,7 @@
 exports[`ontario-hint-text snapshot should render the expected html 1`] = `
 <ontario-hint-text element-id="idTest" hint="This is a test hint">
   <template shadowrootmode="open">
-    <p class="ontario-hint" id="idTest">
+    <p class="ontario-hint" id="idTest" part="hint-text">
       This is a test hint
     </p>
   </template>

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

@@ -11,7 +11,6 @@ describe('ontario-hint-text', () => {
 				components: [OntarioHintText],
 				html: `<ontario-hint-text element-id="idTest" hint="This is a test hint"></ontario-hint-text>`,
 			});
-
 			expect(page.root).toMatchSnapshot();
 		});
 	});
@@ -24,7 +23,7 @@ describe('ontario-hint-text', () => {
 		expect(page.root).toEqualHtml(`
       <ontario-hint-text element-id="idTest" hint="This is a test hint">
         <mock:shadow-root>
-          <p id="idTest" class="ontario-hint">
+          <p id="idTest" class="ontario-hint" part="hint-text">
             This is a test hint
           </p>
         </mock:shadow-root>

package/src/components/ontario-input/readme.md

@@ -233,16 +233,16 @@ A `name` attribute needs to be set to be submitted to the server when the form i
 | Property                    | Attribute                     | Description                                                                                                                                                                                                                                                                                                                                 | Type                                                                                                                                        | Default     |
 | --------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `caption`                   | `caption`                     | The text to display as the input label                                                                                                                                                                                                                                                                                                      | `Caption \| string`                                                                                                                         | `undefined` |
-| `customOnBlur`              | --                            | Used to add a custom function to the input onBlur event.                                                                                                                                                                                                                                                                                    | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
-| `customOnChange`            | --                            | Used to add a custom function to the input onChange event.                                                                                                                                                                                                                                                                                  | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
-| `customOnFocus`             | --                            | Used to add a custom function to the input onFocus event.                                                                                                                                                                                                                                                                                   | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
-| `customOnInput`             | --                            | Used to add a custom function to the input onInput event.                                                                                                                                                                                                                                                                                   | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
+| `customOnBlur`              | `custom-on-blur`              | Used to add a custom function to the input onBlur event.                                                                                                                                                                                                                                                                                    | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
+| `customOnChange`            | `custom-on-change`            | Used to add a custom function to the input onChange event.                                                                                                                                                                                                                                                                                  | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
+| `customOnFocus`             | `custom-on-focus`             | Used to add a custom function to the input onFocus event.                                                                                                                                                                                                                                                                                   | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
+| `customOnInput`             | `custom-on-input`             | Used to add a custom function to the input onInput event.                                                                                                                                                                                                                                                                                   | `((event: Event) => void) \| undefined`                                                                                                     | `undefined` |
 | `elementId`                 | `element-id`                  | The unique identifier of the input. This is optional - if no ID is passed, one will be generated.                                                                                                                                                                                                                                           | `string \| undefined`                                                                                                                       | `undefined` |
 | `enableLiveValidation`      | `enable-live-validation`      | Enable live validation on the input. Custom live validation can be performed using an `inputValidator` validation function. It will also validate the `required` state if no errors are returned from the `inputValidator`. Please set a `requiredValidationMessage` to report concisely to the end user what they are required to set.     | `boolean`                                                                                                                                   | `false`     |
 | `errorMessage`              | `error-message`               | Set this to display an                                                                                                                                                                                                                                                                                                                      | `string \| undefined`                                                                                                                       | `undefined` |
 | `hintExpander`              | `hint-expander`               | Used to include the ontario-hint-expander component for the input component. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                         | `HintExpander \| string \| undefined`                                                                                                       | `undefined` |
 | `hintText`                  | `hint-text`                   | Used to include the ontario-hint-text component for the input. This is optional.                                                                                                                                                                                                                                                            | `Hint \| string \| undefined`                                                                                                               | `undefined` |
-| `inputValidator`            | --                            | Validate the validity of the input value `onBlur`. This `async` function should return a result to trigger an error message. Returning `undefined` or `null` will clear it.                                                                                                                                                                 | `((value?: string \| undefined) => Promise<{ errorMessage?: string \| undefined; } \| null \| undefined>) \| undefined`                     | `undefined` |
+| `inputValidator`            | `input-validator`             | Validate the validity of the input value `onBlur`. This `async` function should return a result to trigger an error message. Returning `undefined` or `null` will clear it.                                                                                                                                                                 | `((value?: string \| undefined) => Promise<{ errorMessage?: string \| undefined; } \| null \| undefined>) \| undefined`                     | `undefined` |
 | `inputWidth`                | `input-width`                 | The width of the input field. If no value is assigned, it will present as the `default` input width.                                                                                                                                                                                                                                        | `"10-char-width" \| "2-char-width" \| "20-char-width" \| "3-char-width" \| "4-char-width" \| "5-char-width" \| "7-char-width" \| "default"` | `'default'` |
 | `language`                  | `language`                    | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                         | `"en" \| "fr" \| undefined`                                                                                                                 | `'en'`      |
 | `name`                      | `name`                        | The name assigned to the input. The name value is used to reference form data after a form is submitted.                                                                                                                                                                                                                                    | `string`                                                                                                                                    | `undefined` |

package/src/components/ontario-language-toggle/readme.md

@@ -10,12 +10,12 @@ It is used in the ontario-header component.
 
 ## Properties
 
-| Property               | Attribute  | Description                                                                                                                                                                      | Type                                    | Default     |
-| ---------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
-| `customLanguageToggle` | --         | A custom function to pass to the language toggle button. This is optional.                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
-| `language`             | `language` | The language of the component. In most cases, the language toggle should be the source of truth for determining the site language. Only pass a language value here if necessary. | `"en" \| "fr" \| undefined`             | `undefined` |
-| `size`                 | `size`     | The size of the language toggle button. If no prop is passed, it will be set to the `default` size.                                                                              | `"default" \| "small" \| undefined`     | `'default'` |
-| `url`                  | `url`      | The URL to change to when the language toggle button is clicked. This is optional.                                                                                               | `string \| undefined`                   | `undefined` |
+| Property               | Attribute                | Description                                                                                                                                                                      | Type                                    | Default     |
+| ---------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
+| `customLanguageToggle` | `custom-language-toggle` | A custom function to pass to the language toggle button. This is optional.                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
+| `language`             | `language`               | The language of the component. In most cases, the language toggle should be the source of truth for determining the site language. Only pass a language value here if necessary. | `"en" \| "fr" \| undefined`             | `undefined` |
+| `size`                 | `size`                   | The size of the language toggle button. If no prop is passed, it will be set to the `default` size.                                                                              | `"default" \| "small" \| undefined`     | `'default'` |
+| `url`                  | `url`                    | The URL to change to when the language toggle button is clicked. This is optional.                                                                                               | `string \| undefined`                   | `undefined` |
 
 ## Events