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

package/dist/ontario-design-system-components/p-fcd689c7.entry.js

@@ -0,0 +1,95 @@
+import { r as o, h as i } from './p-Cc98g_3o.js';
+import { v as t, a as s, I as e } from './p-_eQ6Jzc4.js';
+import { C as a } from './p-CJXRCL8b.js';
+const r =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+const l = class {
+	constructor(i) {
+		o(this, i);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new a();
+			o.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-previous> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = t(this.colour, e);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (s(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new a();
+		o.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-previous> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return i(
+			'div',
+			{
+				key: 'c23053b38ea1f15038fbfb480c50a1024e8e2ef7',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			i(
+				'svg',
+				{
+					key: '1c71a1f44f56469f868fdba34cabf13c7913fdb5',
+					class: 'svg-icon',
+					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'previous',
+				},
+				i('path', {
+					key: '96156cd83fcff7901016cc22800d1e3dadd70496',
+					d: 'M22 12a10 10 0 0 1-10 10 10 10 0 0 1-7.071-2.929 10 10 0 0 1 0-14.142 10 10 0 0 1 10.898-2.168 10 10 0 0 1 5.412 5.412A10 10 0 0 1 22 12zm-6.6 4.6L10.8 12l4.6-4.6L14 6l-6 6 6 6 1.4-1.4z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = r;
+export { l as ontario_icon_previous };
+//# sourceMappingURL=p-fcd689c7.entry.js.map

package/dist/ontario-design-system-components/p-fcd689c7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconPrevious","iconWidth","iconWidthState","validateWidth","isNaN","this","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","colour","iconColourState","iconCustomColourState","validateColour","isValid","validateValueAgainstArray","IconColours","validateColor","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-previous&encapsulation=shadow","src/components/ontario-icon/ontario-icon-previous.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-previous',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconPrevious implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-previous> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-previous> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"previous\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M22 12a10 10 0 0 1-10 10 10 10 0 0 1-7.071-2.929 10 10 0 0 1 0-14.142 10 10 0 0 1 10.898-2.168 10 10 0 0 1 5.412 5.412A10 10 0 0 1 22 12zm-6.6 4.6L10.8 12l4.6-4.6L14 6l-6 6 6 6 1.4-1.4z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"mappings":"iIAAA,MAAMA,EAAiB,0Z,MCaVC,EAAmB,M,yBAKvBC,UAAsB,GAMrBC,eAOT,aAAAC,GACC,GAAIC,MAAMC,KAAKJ,aAAgBG,MAAMC,KAAKJ,YAAcI,KAAKJ,WAAa,EAAI,CAC7E,MAAMK,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,6BACjBC,eACA,GACCN,MAAMC,KAAKJ,WAAa,iCAAmC,0FAG5DQ,iBAAiB,UACjBC,eAAe,gBACfC,eACFN,KAAKH,eAAiB,E,KAChB,CACNG,KAAKH,eAAiBG,KAAKJ,S,EAOrBW,OAAqB,QAMpBC,gBAMAC,sBAQT,cAAAC,GACC,MAAMC,EAAUC,EAA0BZ,KAAKO,OAAQM,GACvD,GAAIF,EAAS,CACZX,KAAKQ,gBAAkBR,KAAKO,M,KACtB,CACN,GAAIO,EAAcd,KAAKO,QAAS,CAC/BP,KAAKS,sBAAwBT,KAAKO,M,KAC5B,CACNP,KAAKQ,gBAAkBR,KAAKe,mB,GASvB,iBAAAA,GACP,MAAMd,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,6BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAU,GACChB,KAAKU,iBACLV,KAAKF,e,CAMN,MAAAmB,GACC,OACCC,EACC,OAAAC,IAAA,2CAAAC,MAAO,8BAA8BpB,KAAKQ,uCAAuCR,KAAKH,iBACtFwB,MAAO,CAAEC,MAAO,GAAGtB,KAAKH,qBAExBqB,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGvB,KAAKS,wBAAyBe,OAAQ,GAAGxB,KAAKS,yBAChEgB,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,YAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,+L","ignoreList":[]}

package/dist/types/components/ontario-badge/ontario-badge.types.d.ts

@@ -1,11 +1,13 @@
 export declare enum BadgeColourToClass {
 	teal = 'ontario-badge--default-heavy',
-	'light-teal' = 'ontario-badge--default-light',
+	lightTeal = 'ontario-badge--default-light',
 	black = 'ontario-badge--neutral-heavy',
 	grey = 'ontario-badge--neutral-light',
 	red = 'ontario-badge--alert-heavy',
 	yellow = 'ontario-badge--warning-heavy',
 	green = 'ontario-badge--success-heavy',
+	white = 'ontario-badge--white',
+	darkGrey = 'ontario-badge--grey',
 }
 export declare const BadgeColours: string[];
 export type BadgeColour = keyof typeof BadgeColourToClass;

package/dist/types/components/ontario-card/ontario-card-types.d.ts

@@ -1,8 +1,41 @@
-export declare const Layouts: readonly ['vertical', 'horizontal'];
-export declare const HorizontalImagePositionTypes: readonly ['left', 'right'];
-export declare const HorizontalImageSizeTypes: readonly ['one-fourth', 'one-third'];
-export type Layout = (typeof Layouts)[number];
-export type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];
-export type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];
-export declare const HeaderColours: string[];
-export type HeaderColour = (typeof HeaderColours)[number];
+import { HeadingLevel } from '../../utils/common/common.interface';
+export declare const layoutDirectionDefinitions: readonly ['vertical', 'horizontal'];
+export declare const horizontalImagePositionDefinitions: readonly ['left', 'right'];
+export declare const horizontalImageSizeDefinitions: readonly ['one-fourth', 'one-third'];
+export type LayoutDirection = (typeof layoutDirectionDefinitions)[number];
+export type HorizontalImagePositionType = (typeof horizontalImagePositionDefinitions)[number];
+export type HorizontalImageSizeType = (typeof horizontalImageSizeDefinitions)[number];
+export declare const headerColourDefinitions: readonly [
+	'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',
+	'gold',
+	'yellow',
+	'taupe',
+	'green',
+	'lime',
+	'teal',
+	'sky',
+	'blue',
+	'purple',
+	'orange',
+	'red',
+	'magenta',
+];
+export type HeaderColour = (typeof headerColourDefinitions)[number];
+export type CardState = {
+	headerColour: HeaderColour | undefined;
+	headingLevel: HeadingLevel | undefined;
+	layoutDirection: LayoutDirection | undefined;
+};

package/dist/types/components/ontario-card/ontario-card.d.ts

@@ -1,4 +1,10 @@
-import { HeaderColour, HorizontalImagePositionType, HorizontalImageSizeType, Layout } from './ontario-card-types';
+import {
+	HeaderColour,
+	HorizontalImagePositionType,
+	HorizontalImageSizeType,
+	LayoutDirection,
+} from './ontario-card-types';
+import { HeadingLevel } from '../../utils/common/common.interface';
 export declare class OntarioCard {
 	host: HTMLElement;
 	/**
@@ -13,12 +19,37 @@ export declare class OntarioCard {
 	 *	>
 	 */
 	label: string;
+	/**
+	 * The heading level that the label will be rendered as.
+	 *
+	 * @example
+	 *	<ontario-card
+	 *		heading-level="h4"
+	 *		label="Card Title 1"
+	 *	>
+	 */
+	headingLevel: HeadingLevel;
 	/**
 	 * Image to be displayed within the card image container.
 	 *
 	 * This is optional.
 	 */
 	image?: string;
+	/**
+	 * 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.
+	 */
+	imageAltText?: string;
 	/**
 	 * Text to be displayed within the card description container.
 	 *
@@ -32,12 +63,12 @@ export declare class OntarioCard {
 	 */
 	cardLink?: string;
 	/**
-	 * The layout oritnetation of the card.
+	 * The layout direction/orientation of the card.
 	 *
 	 * If no type is passed, it will default to 'vertical'.
 	 *
 	 */
-	layout?: Layout;
+	layoutDirection?: LayoutDirection;
 	/**
 	 * Set the card's header colour.
 	 *
@@ -85,33 +116,49 @@ export declare class OntarioCard {
 	 *
 	 */
 	ariaLabelText?: string;
+	private cardState;
 	/**
-	 * Mutable variable, for internal use only.
-	 * Set the card's layout depending on validation result.
+	 * Watch for changes to the `layoutDirection` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).
+	 * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.
 	 */
-	private layoutState;
+	validateLayoutDirection(): void;
 	/**
-	 * Watch for changes to the `layout` property for validation purposes.
+	 * Watch for changes to the `headingLevel` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
-	 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
+	 * If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).
+	 *
+	 * If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.
 	 */
-	validateLayout(): void;
+	validateHeadingLevel(): void;
 	/**
 	 * Watch for changes to the `headerColour` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).
 	 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 	 */
 	validateHeaderColour(): void;
 	/**
-	 * Print the invalid `layout` prop warning message.
+	 * Print an invalid prop warning message.
+	 *
+	 * @param {string} propName - Name of the prop
+	 * @param {string} component - Component the error is on e.g. <ontario-card>
+	 * @param {any} propValue - Value of the prop
+	 * @param {readonly any[]} acceptableValues  - readonly array of acceptable prop values
+	 * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to
 	 */
-	private warnDefaultLayout;
+	private printPropWarning;
 	/**
-	 * Print the invalid `headerColour` prop warning message.
+	 * Update a key within the State Object with a value.
+	 *
+	 * Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.
+	 * If only the corresponding object key/value is updated, corresponding render changes may not happen.
+	 *
+	 * @param {keyof CardState} key - Should match a key found within `CardState`.
+	 * @param {any} value - Should match the value type associated to the key within `CardState`.
 	 */
-	private warnDefaultHeaderColour;
+	private updateCardState;
 	/**
 	 * Returns the top level classes of the card.
 	 *

package/dist/types/components/ontario-footer/ontario-footer.d.ts

@@ -59,12 +59,6 @@ export declare class OntarioFooter {
 	private verifyTwoColumnOptions;
 	private verifyThreeColumnOptions;
 	private parseOptions;
-	/**
-	 * 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;
 	/**
 	 * Generate CSS url to the background image
 	 * @returns path to the background image

package/dist/types/components/ontario-header/ontario-header.d.ts

@@ -189,9 +189,16 @@ export declare class OntarioHeader {
 	 */
 	fetchOntarioMenu(): Promise<void>;
 	/**
-	 * 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;
 	/**

package/dist/types/components/ontario-hint-text/ontario-hint-text.d.ts

@@ -1,4 +1,9 @@
 import { Hint, HintContentType } from '../../utils/common/common.interface';
+/**
+ * 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.
+ */
 export declare class OntarioHintText implements Hint {
 	host: HTMLElement;
 	/**
@@ -20,6 +25,9 @@ export declare class OntarioHintText implements Hint {
 	hint: string;
 	elementId?: string;
 	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`.
@@ -31,7 +39,7 @@ export declare 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.
 	 */
 	getHintTextId(): Promise<string | undefined>;
 	/**

package/dist/types/components/ontario-search-box/ontario-search-box.d.ts

@@ -33,18 +33,18 @@ export declare class OntarioSearchBox {
 	 */
 	value?: string;
 	/**
-    * The text to display as the input label
-    *
-    * @example
-    * <ontario-search-box
-    *      caption='{
-                    "captionText": "Search directory",
-                    "captionType": "default"
-                    }'
-                required = "true"
-    >
-    </ontario-search-box>
-    */
+	 * The text to display as the input label
+	 *
+	 * @example
+	 * <ontario-search-box
+	 *   caption='{
+	 *			"captionText": "Search directory",
+	 *			"captionType": "default"
+	 *		}'
+	 *		required = "true"
+	 * >
+	 * </ontario-search-box>
+	 */
 	caption: Caption | string;
 	/**
 	 * This is used to determine whether the dropdown list is required or not.

package/dist/types/components/ontario-task/ontario-task.d.ts

@@ -0,0 +1,142 @@
+import { TaskStatuses } from '../../utils/common/task-statuses.enum';
+import { Hint } from '../../utils/common/common.interface';
+import { Language } from '../../utils/common/language-types';
+import { HeadingLevel } from '../../utils/common/common.interface';
+export type TaskHeadingLevel = Extract<HeadingLevel, 'h2' | 'h3' | 'h4'>;
+export declare class OntarioTask {
+	el: HTMLElement;
+	hintTextRef?: HTMLOntarioHintTextElement | undefined;
+	/**
+	 * Specifies the label of the task.
+	 *
+	 * This is required to provide the name of the task.
+	 */
+	label: string;
+	/**
+	 * A unique id for the task.
+	 *
+	 * This is required.
+	 */
+	taskId: string;
+	/**
+	 * Specifies an optional link associated with the task.
+	 *
+	 * If provided, clicking the task will navigate to this URL.
+	 */
+	link?: string;
+	/**
+	 * Disables the task link when set to `true`.
+	 *
+	 * Default is `false`, meaning the link will be active if provided.
+	 */
+	deactivateLink: boolean;
+	/**
+	 * 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.
+	 */
+	language?: Language;
+	/**
+	 * Used to include the ontario-hint-text component for the task.
+	 *
+	 * This is optional.
+	 */
+	hintText?: string | Hint;
+	/**
+	 * Defines the status of the task, with default set to 'NotStarted'.
+	 *
+	 * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.
+	 */
+	/**
+	 * Defines the status of the task, with default set to 'NotStarted'.
+	 *
+	 * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.
+	 */
+	taskStatus: TaskStatuses;
+	/**
+	 * Allows consumers to define the heading level for the task label.
+	 *
+	 * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.
+	 */
+	headingLevel: TaskHeadingLevel;
+	/**
+	 * The hint text options are re-assigned to the internalHintText state.
+	 */
+	private internalHintText;
+	/**
+	 * Mutable variable, for internal use only.
+	 *
+	 * Set the task's status state depending on validation result.
+	 */
+	private taskStatusState;
+	/**
+	 * Watch for changes in `taskStatus` prop to validate its value.
+	 */
+	validateTaskStatus(): void;
+	/**
+	 * Logs a warning to the console if the `taskStatus` prop is set to an invalid value.
+	 *
+	 * This function informs developers that the provided `taskStatus` is not recognized
+	 * and resets the status to the default value of `'notStarted'`. The warning message
+	 * specifies the valid task statuses to help guide correct usage.
+	 *
+	 * @returns The default task status `'notStarted'`.
+	 */
+	private warnAndGetDefaultTaskStatus;
+	/**
+	 * Watch for changes in `headingLevel` prop to validate its value.
+	 */
+	validateHeadingLevel(newValue: string): void;
+	/**
+	 * Watch for changes in `hintText` prop and parse it if available.
+	 *
+	 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,
+	 * and the result will be stored in the `internalHintText` state.
+	 */
+	private parseHintText;
+	/**
+	 * Listen for app language settings on the window to update the component language.
+	 */
+	handleSetAppLanguage(event: CustomEvent<Language>): void;
+	/**
+	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.
+	 * It is used for changing the component language after the language toggle has been activated.
+	 */
+	handleHeaderLanguageToggled(event: CustomEvent<Language>): void;
+	/**
+	 * Determines the badge colour based on the current `taskStatusState`.
+	 *
+	 * @returns {TaskBadgeColour}
+	 */
+	private getBadgeColour;
+	/**
+	 * Provides a translated task status string based on the current language.
+	 */
+	private getTranslatedTaskStatus;
+	/**
+	 * Renders hint text if available.
+	 */
+	private renderHintText;
+	/**
+	 * Returns the class name(s) for the task label.
+	 */
+	private getClass;
+	/**
+	 * Renders the task label and status content.
+	 *
+	 * This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,
+	 * as well as the badge indicating the task status.
+	 */
+	private renderTaskContent;
+	/**
+	 * After the component loads, retrieve the hint text ID (if available) from the hintText component,
+	 * and set it for the `aria-describedby` attribute.
+	 */
+	componentDidLoad(): Promise<void>;
+	/**
+	 * Lifecycle method: before the component loads, parse the hint text and
+	 * validate language and task status and heading level.
+	 */
+	componentWillLoad(): Promise<void>;
+	render(): any;
+}

package/dist/types/components/ontario-task-list/ontario-task-list.d.ts

@@ -0,0 +1,60 @@
+import { Language } from '../../utils/common/language-types';
+import { HeadingLevel } from '../../utils/common/common.interface';
+export type TaskListHeadingLevel = 'h1' | Exclude<HeadingLevel, 'h6'>;
+export declare class OntarioTaskList {
+	el: HTMLElement;
+	/**
+	 * The label prop used for the task list heading.
+	 */
+	label: string;
+	/**
+	 * Allows consumers to define the heading level for the task list component.
+	 *
+	 * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.
+	 */
+	headingLevel: TaskListHeadingLevel;
+	/**
+	 * 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.
+	 */
+	language?: Language;
+	/**
+	 * State to track the number of completed tasks.
+	 */
+	completedTasks: number;
+	/**
+	 * State to track the total number of tasks.
+	 */
+	totalTasks: number;
+	/**
+	 * Class-level constant for task count delay in milliseconds.
+	 *
+	 * This delay ensures that the `ontario-task` custom elements are fully upgraded and rendered
+	 * in the DOM before the `countTasks` method is executed. Without this delay, the component
+	 * might attempt to query or count tasks before they are properly initialized, leading to
+	 * inaccurate task counts.
+	 */
+	private static readonly TASK_COUNT_DELAY_MS;
+	/**
+	 * Watch for changes in `headingLevel` prop to validate its value.
+	 */
+	validateHeadingLevel(newValue: string): void;
+	/**
+	 * Counts the total tasks and completed tasks by querying for `ontario-task` elements.
+	 */
+	countTasks(): void;
+	/**
+	 * Lifecycle method: before the component loads, validate heading level.
+	 */
+	componentWillLoad(): Promise<void>;
+	/**
+	 * Ensure tasks are counted after custom elements are fully upgraded.
+	 */
+	connectedCallback(): void;
+	/**
+	 * Use slotchange and MutationObserver to track changes in slot content.
+	 */
+	componentDidLoad(): void;
+	componentDidRender(): void;
+	render(): any;
+}