@ongov/ontario-design-system-component-library 4.3.0-alpha.2 → 4.3.0

package/dist/cjs/ontario-icon-youtube.cjs.entry.js

@@ -94,14 +94,14 @@ const OntarioIconYoutube = class {
 		return index.h(
 			'div',
 			{
-				key: '29fe33f05f26188c97d21729f1d2a959c86255df',
+				key: 'e3cea88b8dd1d4a1c76a3f93aa598577c7fa22d8',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			index.h(
 				'svg',
 				{
-					key: '42b7b9df17ce043ba91cdeac7e1f4583cfd1e3a6',
+					key: 'cb37aff3e11cc891c29347e95d55e0592892edc4',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -110,7 +110,7 @@ const OntarioIconYoutube = class {
 					id: 'youtube',
 				},
 				index.h('path', {
-					key: '1c0d0a5cedfce971dca6b7b8245b6d0846fd0523',
+					key: '8133f310fd80654af6085e15a90fa7f153ce5496',
 					d: 'M10 15l5.2-3L10 9v6zm11.56-7.83c.13.47.22 1.1.28 1.9l.1 2.1.06.84c0 2.2-.16 3.8-.44 4.83a2.34 2.34 0 0 1-1.73 1.73c-.47.13-1.33.22-2.65.28l-3.6.1L12 19c-4.2 0-6.8-.16-7.83-.44a2.34 2.34 0 0 1-1.73-1.73c-.13-.47-.22-1.1-.28-1.9l-.1-2.1L2 12c0-2.2.16-3.8.44-4.83a2.34 2.34 0 0 1 1.73-1.73c.47-.13 1.33-.22 2.65-.28l3.6-.1L12 5c4.2 0 6.8.16 7.83.44a2.34 2.34 0 0 1 1.73 1.73z',
 				}),
 			),

package/dist/collection/collection-manifest.json

@@ -3,6 +3,7 @@
 		"components/ontario-accordion/ontario-accordion.js",
 		"components/ontario-aside/ontario-aside.js",
 		"components/ontario-back-to-top/ontario-back-to-top.js",
+		"components/ontario-badge/ontario-badge.js",
 		"components/ontario-blockquote/ontario-blockquote.js",
 		"components/ontario-button/ontario-button.js",
 		"components/ontario-callout/ontario-callout.js",

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

@@ -0,0 +1,104 @@
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+/* -------------------------------
+    Global font-size variables
+--------------------------------- */
+.ontario-badge__container {
+	display: flex;
+	flex-direction: column;
+	gap: 2.5rem;
+	align-items: flex-start;
+	padding: 1.5rem 1rem;
+}
+
+.ontario-badge__label {
+	display: block;
+	text-align: left;
+	font-weight: 600;
+	margin-bottom: 0.75rem;
+	font-size: 0.875rem;
+	color: #4d4d4d;
+}
+
+.ontario-badge {
+	display: inline-block;
+	background-color: #e2f0f4;
+	color: #4d4d4d;
+	padding: 0.25rem 0.5rem;
+	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+	font-weight: 700;
+	line-height: 1.5625rem;
+	letter-spacing: 0.03rem;
+	text-transform: uppercase;
+}
+
+.ontario-badge--default-light {
+	background-color: #e2f0f4;
+	color: #4d4d4d;
+}
+
+.ontario-badge--default-heavy {
+	background-color: #1080a6;
+	color: #ffffff;
+}
+
+.ontario-badge--neutral-light {
+	background-color: #f2f2f2;
+	color: #4d4d4d;
+}
+
+.ontario-badge--neutral-heavy {
+	background-color: #1a1a1a;
+	color: #ffffff;
+}
+
+.ontario-badge--alert-heavy {
+	background-color: #cd0000;
+	color: #ffffff;
+}
+
+.ontario-badge--warning-heavy {
+	background-color: #ffd440;
+	color: #1a1a1a;
+}
+
+.ontario-badge--success-heavy {
+	background-color: #118847;
+	color: #ffffff;
+}

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

@@ -0,0 +1,192 @@
+import { h } from '@stencil/core';
+import { BadgeColours, BadgeColourToClass } from './ontario-badge.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+export class OntarioBadge {
+	constructor() {
+		this.colour = 'teal';
+		this.label = undefined;
+		this.ariaLabelText = undefined;
+	}
+	/**
+	 * Watch for changes in the `label` prop for validation purposes.
+	 *
+	 * If no `label` value or host.textContent is provided, a warning message will be printed.
+	 */
+	validateLabel() {
+		if (!this.getBadgeLabel()) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' a label ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-badge> ')
+				.addRegularText('was not provided.')
+				.printMessage();
+		}
+	}
+	/**
+	 * Watch for changes to the `colour` prop.
+	 *
+	 * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
+	 *
+	 * @returns {BadgeColour}
+	 */
+	validateColour() {
+		if (this.colour) {
+			if (validateValueAgainstArray(this.colour, BadgeColours)) {
+				return this.colour;
+			} else {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(` colour ${this.colour} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-badge> ')
+					.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')
+					.printMessage();
+			}
+		}
+		return this.setBadgeColour('teal');
+	}
+	/**
+	 * Programatically set and return the colour prop.
+	 *
+	 * @prop {BadgeColour} colour
+	 *
+	 * @returns {BadgeColour}
+	 */
+	setBadgeColour(colour) {
+		this.colour = colour;
+		return this.colour;
+	}
+	/**
+	 * Returns badge label depending on if the label prop was set or
+	 * if the host.textContent (text in-between the opening and closing tag) was set.
+	 *
+	 * The label prop takes priority.
+	 *
+	 * @returns {string | null}
+	 */
+	getBadgeLabel() {
+		const badgeLabel = this.label ? this.label : this.host.textContent;
+		return badgeLabel;
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateLabel();
+	}
+	render() {
+		return h(
+			'span',
+			{
+				'key': '41e824c2aac3d3b8cbeff7a74bfc8bd1a09fc0ec',
+				'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
+				'aria-label': this.ariaLabelText,
+			},
+			this.getBadgeLabel(),
+		);
+	}
+	static get is() {
+		return 'ontario-badge';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-badge.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-badge.css'],
+		};
+	}
+	static get properties() {
+		return {
+			colour: {
+				type: 'string',
+				mutable: true,
+				complexType: {
+					original: 'BadgeColour',
+					resolved: '"black" | "green" | "grey" | "light-teal" | "red" | "teal" | "yellow"',
+					references: {
+						BadgeColour: {
+							location: 'import',
+							path: './ontario-badge.types',
+							id: 'src/components/ontario-badge/ontario-badge.types.ts::BadgeColour',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'The colour of the badge.',
+				},
+				attribute: 'colour',
+				reflect: false,
+				defaultValue: "'teal'",
+			},
+			label: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'The label for the badge.\n\nOffical guidance is to keep the label length within 15 characters.',
+				},
+				attribute: 'label',
+				reflect: false,
+			},
+			ariaLabelText: {
+				type: 'string',
+				mutable: true,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>',
+						},
+					],
+					text: 'An aria label for screen readers.\n\nUsed to provide more context to screen readers if necessary.\n\nThis property is optional.',
+				},
+				attribute: 'aria-label-text',
+				reflect: false,
+			},
+		};
+	}
+	static get elementRef() {
+		return 'host';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'label',
+				methodName: 'validateLabel',
+			},
+			{
+				propName: 'colour',
+				methodName: 'validateColour',
+			},
+		];
+	}
+	static get attachInternalsMemberName() {
+		return 'internals';
+	}
+}
+//# sourceMappingURL=ontario-badge.js.map

package/dist/collection/components/ontario-badge/ontario-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-badge.js","sourceRoot":"","sources":["../../../src/components/ontario-badge/ontario-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAe,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAOxF,MAAM,OAAO,YAAY;;sBAOuB,MAAM;;;;IAqBrD;;;;OAIG;IAEH,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;YAC3B,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,WAAW,CAAC;iBAC7B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,mBAAmB,CAAC;iBACnC,YAAY,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAED;;;;;;OAMG;IAEH,cAAc;QACb,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE,CAAC;gBAC1D,OAAO,IAAI,CAAC,MAAM,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACP,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC;qBAC3C,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,mBAAmB,CAAC;qBACrC,cAAc,CAAC,2FAA2F,CAAC;qBAC3G,YAAY,EAAE,CAAC;YAClB,CAAC;QACF,CAAC;QAED,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,CAAC;IAED;;;;;;OAMG;IACH,cAAc,CAAC,MAAmB;QACjC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAED;;;;;;;OAOG;IACH,aAAa;QACZ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QACnE,OAAO,UAAU,CAAC;IACnB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACL,OAAO,CACN,6DAAM,KAAK,EAAE,iBAAiB,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,gBAAc,IAAI,CAAC,aAAa,IAC7F,IAAI,CAAC,aAAa,EAAE,CACf,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';\n\nimport { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-badge',\n\tstyleUrl: 'ontario-badge.scss',\n\tshadow: true,\n})\nexport class OntarioBadge {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The colour of the badge.\n\t */\n\t@Prop({ mutable: true }) colour: BadgeColour = 'teal';\n\n\t/**\n\t * The label for the badge.\n\t *\n\t * Offical guidance is to keep the label length within 15 characters.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * An aria label for screen readers.\n\t *\n\t * Used to provide more context to screen readers if necessary.\n\t *\n\t * This property is optional.\n\t *\n\t * @example\n\t * <ontario-badge aria-label-text=\"This training is currently in progress.\">In progress</ontario-badge>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * Watch for changes in the `label` prop for validation purposes.\n\t *\n\t * If no `label` value or host.textContent is provided, a warning message will be printed.\n\t */\n\t@Watch('label')\n\tvalidateLabel() {\n\t\tif (!this.getBadgeLabel()) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' a label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `colour` prop.\n\t *\n\t * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.\n\t *\n\t * @returns {BadgeColour}\n\t */\n\t@Watch('colour')\n\tvalidateColour(): BadgeColour {\n\t\tif (this.colour) {\n\t\t\tif (validateValueAgainstArray(this.colour, BadgeColours)) {\n\t\t\t\treturn this.colour;\n\t\t\t} else {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` colour ${this.colour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t\t.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\treturn this.setBadgeColour('teal');\n\t}\n\n\t/**\n\t * Programatically set and return the colour prop.\n\t *\n\t * @prop {BadgeColour} colour\n\t *\n\t * @returns {BadgeColour}\n\t */\n\tsetBadgeColour(colour: BadgeColour): BadgeColour {\n\t\tthis.colour = colour;\n\t\treturn this.colour;\n\t}\n\n\t/**\n\t * Returns badge label depending on if the label prop was set or\n\t * if the host.textContent (text in-between the opening and closing tag) was set.\n\t *\n\t * The label prop takes priority.\n\t *\n\t * @returns {string | null}\n\t */\n\tgetBadgeLabel(): string | null {\n\t\tconst badgeLabel = this.label ? this.label : this.host.textContent;\n\t\treturn badgeLabel;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateLabel();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<span class={`ontario-badge ${BadgeColourToClass[this.colour]}`} aria-label={this.ariaLabelText}>\n\t\t\t\t{this.getBadgeLabel()}\n\t\t\t</span>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-badge/ontario-badge.types.js

@@ -0,0 +1,13 @@
+import { retrieveEnumKeys } from '../../utils/helper/utils';
+export var BadgeColourToClass;
+(function (BadgeColourToClass) {
+	BadgeColourToClass['teal'] = 'ontario-badge--default-heavy';
+	BadgeColourToClass['light-teal'] = 'ontario-badge--default-light';
+	BadgeColourToClass['black'] = 'ontario-badge--neutral-heavy';
+	BadgeColourToClass['grey'] = 'ontario-badge--neutral-light';
+	BadgeColourToClass['red'] = 'ontario-badge--alert-heavy';
+	BadgeColourToClass['yellow'] = 'ontario-badge--warning-heavy';
+	BadgeColourToClass['green'] = 'ontario-badge--success-heavy';
+})(BadgeColourToClass || (BadgeColourToClass = {}));
+export const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
+//# sourceMappingURL=ontario-badge.types.js.map

package/dist/collection/components/ontario-badge/ontario-badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-badge.types.js","sourceRoot":"","sources":["../../../src/components/ontario-badge/ontario-badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,CAAN,IAAY,kBAQX;AARD,WAAY,kBAAkB;IAC7B,2DAAqC,CAAA;IACrC,iEAA6C,CAAA;IAC7C,4DAAsC,CAAA;IACtC,2DAAqC,CAAA;IACrC,wDAAkC,CAAA;IAClC,6DAAuC,CAAA;IACvC,4DAAsC,CAAA;AACvC,CAAC,EARW,kBAAkB,KAAlB,kBAAkB,QAQ7B;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\t'light-teal' = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\n"]}

package/dist/collection/components/ontario-badge/test/ontario-badge.e2e.js

@@ -0,0 +1,80 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-badge', () => {
+	it('renders', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-badge></ontario-badge>');
+		const component = await page.find('ontario-badge');
+		const element = await page.find('ontario-badge >>> span');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-badge', 'ontario-badge--default-heavy']);
+	});
+	describe('render prop changes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent('<ontario-badge></ontario-badge>');
+			component = await page.find('ontario-badge');
+			element = await page.find('ontario-badge >>> span');
+		});
+		it('renders changes to the class names when the colour prop is changed', async () => {
+			component.setProperty('colour', 'light-teal');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-badge', 'ontario-badge--default-light']);
+			component.setProperty('colour', 'black');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-badge', 'ontario-badge--neutral-heavy']);
+		});
+		/*
+		 * TODO: Haven't found an ideal way yet to test the aria-label-text property and how
+		 * it should create an aria-label attribute on the element.
+		 */
+		// it('renders changes to the aria-label-text property', async () => {
+		// component.setProperty('aria-label-text', 'This is aria label text.');
+		// await page.waitForChanges();
+		// expect(element.getAttribute("ariaLabel")).toBe("This is aria label text.");
+		// expect(element).toHaveAttribute('aria-label');
+		// let v = await page.$eval(element, (element: { hasAttribute: (arg0: string) => any; }) => element.hasAttribute("aria-label"))
+		// expect(v).toBe(true);
+		// let el: any;
+		// let value = await page.evaluate(element => element ? element.getAttribute("aria-label") : null, el);
+		// expect(value).toBe(true);
+		// element.hasAttribute("aria-label").toBe(true);
+		// expect(hasAriaLabelAttribute).toBe(true);
+		// await page.evaluate(`${element}.getAttribute("data-Color")`)
+		// expect(element.getAttribute('aria-label')).toBe('This is aria label text.');
+		// });
+	});
+	describe('render text content changes', () => {
+		let page;
+		beforeEach(async () => {
+			page = await newE2EPage();
+		});
+		it('renders changes to the component content when the host textContent is changed', async () => {
+			await page.setContent('<ontario-badge>Not started</ontario-badge>');
+			const element = await page.find('ontario-badge >>> span');
+			expect(element).toEqualText('Not started');
+		});
+		it('renders changes to the component content when the label prop is changed', async () => {
+			await page.setContent('<ontario-badge></ontario-badge>');
+			const component = await page.find('ontario-badge');
+			const element = await page.find('ontario-badge >>> span');
+			component.setProperty('label', 'Completed');
+			await page.waitForChanges();
+			expect(element).toEqualText('Completed');
+			component.setProperty('label', 'In progress');
+			await page.waitForChanges();
+			expect(element).toEqualText('In progress');
+		});
+		it('renders label content as priority even if host textContent is set', async () => {
+			await page.setContent('<ontario-badge>Not started</ontario-badge>');
+			const component = await page.find('ontario-badge');
+			const element = await page.find('ontario-badge >>> span');
+			component.setProperty('label', 'In progress');
+			await page.waitForChanges();
+			expect(element).toEqualText('In progress');
+		});
+	});
+});
+//# sourceMappingURL=ontario-badge.e2e.js.map

package/dist/collection/components/ontario-badge/test/ontario-badge.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-badge.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-badge/test/ontario-badge.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-badge', () => {\n\tit('renders', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-badge></ontario-badge>');\n\t\tconst component = await page.find('ontario-badge');\n\t\tconst element = await page.find('ontario-badge >>> span');\n\n\t\texpect(component).toHaveClass('hydrated');\n\t\texpect(element).toHaveClasses(['ontario-badge', 'ontario-badge--default-heavy']);\n\t});\n\n\tdescribe('render prop changes', () => {\n\t\tlet page: E2EPage;\n\t\tlet component: E2EElement;\n\t\tlet element: E2EElement;\n\n\t\tbeforeEach(async () => {\n\t\t\tpage = await newE2EPage();\n\t\t\tawait page.setContent('<ontario-badge></ontario-badge>');\n\t\t\tcomponent = await page.find('ontario-badge');\n\t\t\telement = await page.find('ontario-badge >>> span');\n\t\t});\n\n\t\tit('renders changes to the class names when the colour prop is changed', async () => {\n\t\t\tcomponent.setProperty('colour', 'light-teal');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toHaveClasses(['ontario-badge', 'ontario-badge--default-light']);\n\n\t\t\tcomponent.setProperty('colour', 'black');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toHaveClasses(['ontario-badge', 'ontario-badge--neutral-heavy']);\n\t\t});\n\n\t\t/*\n\t\t * TODO: Haven't found an ideal way yet to test the aria-label-text property and how\n\t\t * it should create an aria-label attribute on the element.\n\t\t */\n\t\t// it('renders changes to the aria-label-text property', async () => {\n\t\t// component.setProperty('aria-label-text', 'This is aria label text.');\n\t\t// await page.waitForChanges();\n\n\t\t// expect(element.getAttribute(\"ariaLabel\")).toBe(\"This is aria label text.\");\n\n\t\t// expect(element).toHaveAttribute('aria-label');\n\n\t\t// let v = await page.$eval(element, (element: { hasAttribute: (arg0: string) => any; }) => element.hasAttribute(\"aria-label\"))\n\t\t// expect(v).toBe(true);\n\t\t// let el: any;\n\t\t// let value = await page.evaluate(element => element ? element.getAttribute(\"aria-label\") : null, el);\n\t\t// expect(value).toBe(true);\n\n\t\t// element.hasAttribute(\"aria-label\").toBe(true);\n\t\t// expect(hasAriaLabelAttribute).toBe(true);\n\t\t// await page.evaluate(`${element}.getAttribute(\"data-Color\")`)\n\n\t\t// expect(element.getAttribute('aria-label')).toBe('This is aria label text.');\n\t\t// });\n\t});\n\n\tdescribe('render text content changes', () => {\n\t\tlet page: E2EPage;\n\n\t\tbeforeEach(async () => {\n\t\t\tpage = await newE2EPage();\n\t\t});\n\n\t\tit('renders changes to the component content when the host textContent is changed', async () => {\n\t\t\tawait page.setContent('<ontario-badge>Not started</ontario-badge>');\n\t\t\tconst element = await page.find('ontario-badge >>> span');\n\n\t\t\texpect(element).toEqualText('Not started');\n\t\t});\n\n\t\tit('renders changes to the component content when the label prop is changed', async () => {\n\t\t\tawait page.setContent('<ontario-badge></ontario-badge>');\n\t\t\tconst component = await page.find('ontario-badge');\n\t\t\tconst element = await page.find('ontario-badge >>> span');\n\n\t\t\tcomponent.setProperty('label', 'Completed');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toEqualText('Completed');\n\n\t\t\tcomponent.setProperty('label', 'In progress');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toEqualText('In progress');\n\t\t});\n\n\t\tit('renders label content as priority even if host textContent is set', async () => {\n\t\t\tawait page.setContent('<ontario-badge>Not started</ontario-badge>');\n\t\t\tconst component = await page.find('ontario-badge');\n\t\t\tconst element = await page.find('ontario-badge >>> span');\n\n\t\t\tcomponent.setProperty('label', 'In progress');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toEqualText('In progress');\n\t\t});\n\t});\n});\n"]}

package/dist/collection/components/ontario-badge/test/ontario-badge.spec.js

@@ -0,0 +1,33 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioBadge } from '../ontario-badge';
+describe('ontario-badge', () => {
+	it('should render the expected base html', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBadge],
+			html: `<ontario-badge>In progress</ontario-badge>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('should override the host textContent with label prop output on the span element', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBadge],
+			html: `<ontario-badge label="completed">In progress</ontario-badge>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('should render with the ontario-badge--default-light class on the span element', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBadge],
+			html: `<ontario-badge colour="light-teal">In progress</ontario-badge>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('should render the aria-label attribute on the span element', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBadge],
+			html: `<ontario-badge aria-label-text="This course is currently in progress.">In progress</ontario-badge>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+});
+//# sourceMappingURL=ontario-badge.spec.js.map

package/dist/collection/components/ontario-badge/test/ontario-badge.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-badge.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-badge/test/ontario-badge.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,4CAA4C;SAClD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iFAAiF,EAAE,KAAK,IAAI,EAAE;QAChG,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,8DAA8D;SACpE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+EAA+E,EAAE,KAAK,IAAI,EAAE;QAC9F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,gEAAgE;SACtE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,oGAAoG;SAC1G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioBadge } from '../ontario-badge';\n\ndescribe('ontario-badge', () => {\n\tit('should render the expected base html', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBadge],\n\t\t\thtml: `<ontario-badge>In progress</ontario-badge>`,\n\t\t});\n\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('should override the host textContent with label prop output on the span element', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBadge],\n\t\t\thtml: `<ontario-badge label=\"completed\">In progress</ontario-badge>`,\n\t\t});\n\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('should render with the ontario-badge--default-light class on the span element', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBadge],\n\t\t\thtml: `<ontario-badge colour=\"light-teal\">In progress</ontario-badge>`,\n\t\t});\n\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('should render the aria-label attribute on the span element', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBadge],\n\t\t\thtml: `<ontario-badge aria-label-text=\"This course is currently in progress.\">In progress</ontario-badge>`,\n\t\t});\n\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n});\n"]}

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

@@ -65,10 +65,10 @@ export class OntarioBlockquote {
 		return h(
 			'blockquote',
 			{
-				key: '10d7b83d6b3984b8b321c9757fb6fb5ffca89ee3',
+				key: '4d483df420706a95ac905f6225d44354c05ee957',
 				class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
 			},
-			h('p', { key: '6b557c47534fb2c50f0f7eb31967bc21f4969043' }, this.quoteState),
+			h('p', { key: 'fa9231db3034a5e33ef2d0fc7367b589e936655d' }, this.quoteState),
 			this.attribution && h('cite', { class: 'ontario-blockquote__attribution' }, this.attribution),
 			this.byline && h('cite', { class: 'ontario-blockquote__byline' }, this.byline),
 		);

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

@@ -34,11 +34,7 @@ export class OntarioButton {
 	 */
 	validateType() {
 		const isValid = validateValueAgainstArray(this.type, ButtonTypes);
-		if (isValid) {
-			this.typeState = this.type;
-		} else {
-			this.typeState = this.warnDefaultType();
-		}
+		this.typeState = isValid ? this.type : this.warnDefaultType();
 	}
 	/**
 	 *  Watch for changes to the `htmlType` property for validation purposes.
@@ -48,11 +44,7 @@ export class OntarioButton {
 	 */
 	validateHtmlType() {
 		const isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);
-		if (isValid) {
-			this.htmlTypeState = this.htmlType;
-		} else {
-			this.htmlTypeState = this.warnDefaultHtmlType();
-		}
+		this.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();
 	}
 	/**
 	 * Print the missing `label` prop warning message
@@ -140,18 +132,17 @@ export class OntarioButton {
 		observer.observe(this.host, options);
 		// Add a click event listener to handle submitting a form
 		if (this.htmlTypeState === 'submit') {
-			const { form } = this.internals;
-			// Based off a comment within this bug about preventDefault(): https://bugzilla.mozilla.org/show_bug.cgi?id=1370630
-			this.buttonRef.addEventListener('click', () =>
-				form === null || form === void 0 ? void 0 : form.dispatchEvent(new Event('submit', { cancelable: true })),
-			);
+			this.buttonRef.addEventListener('click', () => {
+				const { form } = this.internals;
+				form === null || form === void 0 ? void 0 : form.requestSubmit();
+			});
 		}
 	}
 	render() {
 		return h(
 			'button',
 			{
-				'key': 'ceb1e505af5185139f76215012d1217ee6102356',
+				'key': '625d6a833ec13a769e36479310ec5427bf9c07ce',
 				'ref': (el) => (this.buttonRef = el),
 				'type': this.htmlTypeState,
 				'class': this.getClass(),

package/dist/collection/components/ontario-button/ontario-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-button.js","sourceRoot":"","sources":["../../../src/components/ontario-button/ontario-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no htmlType is passed, it will default to 'button'.\n\t */\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\t@Prop() label?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t */\n\t@State() private typeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t */\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/**\n\t * A reference to the internal button element.\n\t */\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/*\n\t * Watch for changes to the `label` property for validation purposes.\n\t *\n\t * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/**\n\t * Watch for changes to the `type` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t */\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ButtonTypes);\n\t\tif (isValid) {\n\t\t\tthis.typeState = this.type;\n\t\t} else {\n\t\t\tthis.typeState = this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t *  Watch for changes to the `htmlType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t */\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tif (isValid) {\n\t\t\tthis.htmlTypeState = this.htmlType;\n\t\t} else {\n\t\t\tthis.htmlTypeState = this.warnDefaultHtmlType();\n\t\t}\n\t}\n\n\t/**\n\t * Print the missing `label` prop warning message\n\t */\n\tvalidateLabelContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t */\n\tprivate warnDefaultType(): ButtonType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/**\n\t * Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t */\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/**\n\t * @returns the classes of the button based of the button's `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateLabelContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tconst { form } = this.internals;\n\t\t\t// Based off a comment within this bug about preventDefault(): https://bugzilla.mozilla.org/show_bug.cgi?id=1370630\n\t\t\tthis.buttonRef.addEventListener('click', () => form?.dispatchEvent(new Event('submit', { cancelable: true })));\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-button.js","sourceRoot":"","sources":["../../../src/components/ontario-button/ontario-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no htmlType is passed, it will default to 'button'.\n\t */\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\t@Prop() label?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t */\n\t@State() private typeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t */\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/**\n\t * A reference to the internal button element.\n\t */\n\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/*\n\t * Watch for changes to the `label` property for validation purposes.\n\t *\n\t * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/**\n\t * Watch for changes to the `type` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t */\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ButtonTypes);\n\t\tthis.typeState = isValid ? this.type : this.warnDefaultType();\n\t}\n\n\t/**\n\t *  Watch for changes to the `htmlType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t */\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tthis.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();\n\t}\n\n\t/**\n\t * Print the missing `label` prop warning message\n\t */\n\tvalidateLabelContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t */\n\tprivate warnDefaultType(): ButtonType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/**\n\t * Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t */\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/**\n\t * @returns the classes of the button based of the button's `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateLabelContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tthis.buttonRef.addEventListener('click', () => {\n\t\t\t\tconst { form } = this.internals;\n\t\t\t\tform?.requestSubmit();\n\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"]}

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

@@ -103,7 +103,7 @@ export class OntarioCard {
 	render() {
 		return h(
 			'li',
-			{ key: '43864d4b172f51caf49428ec366874c4e793f8a9', class: this.getClass() },
+			{ key: '00b148bc48fab4a103f88f3e8b60251c1b77f1e0', class: this.getClass() },
 			this.image &&
 				h(
 					'div',
@@ -117,16 +117,16 @@ export class OntarioCard {
 			h(
 				'div',
 				{
-					key: 'eb343e41b3c8980b5c6f746f5ec97be768def9db',
+					key: '9cef298a65f2b17ccd540e9d74efb3a77685d723',
 					class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 				},
 				h(
 					'h2',
-					{ key: '784052b4a3631039d99850589da0b023e4458a33', class: 'ontario-card__heading' },
+					{ key: '3f008a11081c8314be2a99e4190b744e75db3f62', class: 'ontario-card__heading' },
 					h(
 						'a',
 						{
-							'key': '7a02e9452244a8e1e76637b5c74872d5af29706c',
+							'key': '81d9fcfc1fada5f6dfb7e90c466dfb8fe4bdf618',
 							'href': this.getHref(),
 							'aria-label': this.ariaLabelText,
 						},