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

package/dist/collection/utils/helper/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils/helper/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAyB,EAAE,MAA0B,EAAE,IAAwB;IACrG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAChF,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAI,GAAQ,EAAE,GAAY;IAC9D,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACvB,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,MAAM,EAAE,CAAC;YAC9C,KAAK,EAAE,CAAC;YACR,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;gBACf,OAAO,IAAI,CAAC;YACb,CAAC;QACF,CAAC;IACF,CAAC;IAED,OAAO,KAAK,CAAC;AACd,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAI,OAAY,EAAE,GAAY;IAC/D,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,IAAW,EAAE,OAAiB;IAChE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACxB,MAAM,OAAO,GAAQ,EAAE,CAAC;QACxB,MAAM,SAAS,GAAQ,EAAE,CAAC;QAE1B,uCAAuC;QACvC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACjC,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;gBACpB,qCAAqC;gBACrC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;oBAC1B,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;wBACzB,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBACrC,CAAC;gBACF,CAAC,CAAC,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACP,sBAAsB;gBACtB,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5B,CAAC;QACF,CAAC,CAAC,CAAC;QAEH,uBAAS,IAAI,EAAE,OAAO,IAAK,SAAS,EAAG;IACxC,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,0BAA0B,CAAI,OAAY,EAAE,GAAY,EAAE,KAAuB;IAChG,MAAM,cAAc,GAAQ,EAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE;QAC9C,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC;YACxB,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACzB,OAAO,KAAK,CAAC;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IACb,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,GAAW;IACnC,MAAM,OAAO,GAAG,aAAa,CAAC;IAC9B,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,GAA8B;IACrD,OAAO,CAAC,GAAG,IAAI,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,KAAI,CAAC,CAAC;AACjC,CAAC","sourcesContent":["export function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {\n\treturn (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean {\n\tlet count = 0;\n\n\tfor (const obj of arr) {\n\t\tif (obj[key] === true || obj[key] === 'true') {\n\t\t\tcount++;\n\t\t\tif (count > 1) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nexport function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]> {\n\treturn objects.map((obj) => obj[key]);\n}\n\nexport function organizeObjectKeys(data: any[], columns: string[]): any[] {\n\treturn data.map((item) => {\n\t\tconst newData: any = {};\n\t\tconst otherKeys: any = {};\n\n\t\t// Iterate through each key in the item\n\t\tObject.keys(item).forEach((key) => {\n\t\t\tif (key === 'data') {\n\t\t\t\t// Organize keys in the 'data' object\n\t\t\t\tcolumns.forEach((column) => {\n\t\t\t\t\tif (column in item.data) {\n\t\t\t\t\t\tnewData[column] = item.data[column];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Preserve other keys\n\t\t\t\totherKeys[key] = item[key];\n\t\t\t}\n\t\t});\n\n\t\treturn { data: newData, ...otherKeys };\n\t});\n}\n\nexport function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]] {\n\tconst removedObjects: T[] = [];\n\tconst filteredObjects = objects.filter((obj) => {\n\t\tif (obj[key] === value) {\n\t\t\tremovedObjects.push(obj);\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\treturn [filteredObjects, removedObjects];\n}\n\nexport function isNumber(str: string): boolean {\n\tconst pattern = /^\\d+\\.?\\d*$/;\n\treturn pattern.test(str);\n}\n\nexport function isEmpty(str: string | undefined | null): boolean {\n\treturn !str || str?.length <= 0;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/utils/helper/utils.ts"],"names":[],"mappings":"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","sourcesContent":["export function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {\n\treturn (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean {\n\tlet count = 0;\n\n\tfor (const obj of arr) {\n\t\tif (obj[key] === true || obj[key] === 'true') {\n\t\t\tcount++;\n\t\t\tif (count > 1) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nexport function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]> {\n\treturn objects.map((obj) => obj[key]);\n}\n\nexport function organizeObjectKeys(data: any[], columns: string[]): any[] {\n\treturn data.map((item) => {\n\t\tconst newData: any = {};\n\t\tconst otherKeys: any = {};\n\n\t\t// Iterate through each key in the item\n\t\tObject.keys(item).forEach((key) => {\n\t\t\tif (key === 'data') {\n\t\t\t\t// Organize keys in the 'data' object\n\t\t\t\tcolumns.forEach((column) => {\n\t\t\t\t\tif (column in item.data) {\n\t\t\t\t\t\tnewData[column] = item.data[column];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Preserve other keys\n\t\t\t\totherKeys[key] = item[key];\n\t\t\t}\n\t\t});\n\n\t\treturn { data: newData, ...otherKeys };\n\t});\n}\n\nexport function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]] {\n\tconst removedObjects: T[] = [];\n\tconst filteredObjects = objects.filter((obj) => {\n\t\tif (obj[key] === value) {\n\t\t\tremovedObjects.push(obj);\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\treturn [filteredObjects, removedObjects];\n}\n\n/**\n * Takes an input value and determines whether or not it is a number.\n *\n * @param {string | number} value - The value you would like to test against.\n *\n * @returns {boolean}\n */\nexport function isNumber(value: string | number): boolean {\n\treturn isNaN(Number(value)) === true;\n}\n\nexport function isEmpty(str: string | undefined | null): boolean {\n\treturn !str || str?.length <= 0;\n}\n\n/**\n * Retrieves the keys from an enum and lists them in an array.\n *\n * @param {object} enumObject - The enum you wish to get the keys of.\n *\n * @returns {string[]}\n */\nexport function retrieveEnumKeys(enumObject: object): string[] {\n\treturn Object.keys(enumObject).filter(isNumber);\n}\n"]}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../types/components';
+
+interface OntarioBadge extends Components.OntarioBadge, HTMLElement {}
+export const OntarioBadge: {
+	prototype: OntarioBadge;
+	new (): OntarioBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ontario-badge.js

@@ -0,0 +1,160 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { r as retrieveEnumKeys } from './utils.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { a as validateValueAgainstArray } from './validation-functions.js';
+
+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 = {}));
+const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
+
+const ontarioBadgeCss =
+	'.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}';
+const OntarioBadgeStyle0 = ontarioBadgeCss;
+
+const OntarioBadge$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioBadge extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			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(),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				label: ['validateLabel'],
+				colour: ['validateColour'],
+			};
+		}
+		static get style() {
+			return OntarioBadgeStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-badge',
+		{
+			colour: [1025],
+			label: [1],
+			ariaLabelText: [1025, 'aria-label-text'],
+		},
+		undefined,
+		{
+			label: ['validateLabel'],
+			colour: ['validateColour'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-badge'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-badge':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioBadge$1);
+				}
+				break;
+		}
+	});
+}
+
+const OntarioBadge = OntarioBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioBadge, defineCustomElement };
+
+//# sourceMappingURL=ontario-badge.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-badge.js","mappings":";;;;;AAEA,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;AAEM,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC;;ACZhE,MAAM,eAAe,GAAG,i/BAAi/B,CAAC;AAC1gC,2BAAe,eAAe;;MCUjBA,cAAY;;;;;sBAOuB,MAAM;;;;;;;;;IA2BrD,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YAC1B,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;SACjB;KACD;;;;;;;;IAUD,cAAc;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,YAAY,CAAC,EAAE;gBACzD,OAAO,IAAI,CAAC,MAAM,CAAC;aACnB;iBAAM;gBACN,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;aACjB;SACD;QAED,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;KACnC;;;;;;;;IASD,cAAc,CAAC,MAAmB;QACjC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;;;;;;;;;IAUD,aAAa;QACZ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;QACnE,OAAO,UAAU,CAAC;KAClB;IAED,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;KACrB;IAED,MAAM;QACL,QACC,6DAAM,KAAK,EAAE,iBAAiB,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,gBAAc,IAAI,CAAC,aAAa,IAC7F,IAAI,CAAC,aAAa,EAAE,CACf,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioBadge"],"sources":["src/components/ontario-badge/ontario-badge.types.ts","src/components/ontario-badge/ontario-badge.scss?tag=ontario-badge&encapsulation=shadow","src/components/ontario-badge/ontario-badge.tsx"],"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","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-badge__container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: spacing.$spacing-7;\n\talign-items: flex-start;\n\tpadding: spacing.$spacing-5 spacing.$spacing-4;\n}\n\n.ontario-badge__label {\n\tdisplay: block;\n\ttext-align: left;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tmargin-bottom: spacing.$spacing-3;\n\tfont-size: fontSizes.$ontario-font-size-small;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge {\n\tdisplay: inline-block;\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n\tpadding: spacing.$spacing-1 spacing.$spacing-2;\n\tfont-family: typography.$ontario-font-raleway-modified;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(25);\n\tletter-spacing: 0.03rem;\n\ttext-transform: uppercase;\n}\n\n.ontario-badge--default-light {\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--default-heavy {\n\tbackground-color: colours.$ontario-colour-information;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--neutral-light {\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--neutral-heavy {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--alert-heavy {\n\tbackground-color: colours.$ontario-colour-alert;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--warning-heavy {\n\tbackground-color: colours.$ontario-colour-warning;\n\tcolor: colours.$ontario-colour-black;\n}\n\n.ontario-badge--success-heavy {\n\tbackground-color: colours.$ontario-colour-success;\n\tcolor: colours.$ontario-colour-white;\n}\n","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"],"version":3}

package/dist/components/ontario-blockquote.js

@@ -74,10 +74,10 @@ const OntarioBlockquote$1 = /*@__PURE__*/ proxyCustomElement(
 			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/components/ontario-button.js

@@ -46,11 +46,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 		 */
 		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.
@@ -60,11 +56,7 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 		 */
 		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
@@ -152,18 +144,17 @@ const OntarioButton$1 = /*@__PURE__*/ proxyCustomElement(
 			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/components/ontario-button.js.map

@@ -1 +1 @@
-{"file":"ontario-button.js","mappings":"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","names":["OntarioButton"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","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","mappings":"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","names":["OntarioButton"],"sources":["src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx"],"sourcesContent":["export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: typography.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition: background-color 0s, focusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","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"],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { C as ConsoleMessageClass } from './console-message.js';
 
 const ontarioCardCollectionCss =
-	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}';
+	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}';
 const OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
 
 const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
@@ -55,8 +55,8 @@ const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'ul',
-				{ key: '102a3c830422df29dd3ab8cf05aa660d110fe353', class: this.getClass() },
-				h('slot', { key: 'e6089ac94f85b231eca6df2f3743432d807a09e4' }),
+				{ key: '71bc8894e0cd5dd35ed2878eda867563dfa46e5d', class: this.getClass() },
+				h('slot', { key: '2759d92d65a4f427ed5375b1acba7b2da6ebaffa' }),
 			);
 		}
 		get host() {

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

@@ -1 +1 @@
-{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,w3BAAw3B,CAAC;AAC15B,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 2rem);\n\n\t&:nth-child(4n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1.25rem);\n\n\t\t&:nth-child(2n) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.75rem);\n\n\t&:nth-child(3n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1.25rem);\n\n\t&:nth-child(2n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? '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 number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,wvCAAwvC,CAAC;AAC1xC,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 2rem);\n\n\t&:nth-child(4n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1.25rem);\n\n\t\t&:nth-child(2n) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.75rem);\n\n\t&:nth-child(3n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1.25rem);\n\n\t&:nth-child(2n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? '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 number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-card.js

@@ -114,7 +114,7 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'li',
-				{ key: '43864d4b172f51caf49428ec366874c4e793f8a9', class: this.getClass() },
+				{ key: '00b148bc48fab4a103f88f3e8b60251c1b77f1e0', class: this.getClass() },
 				this.image &&
 					h(
 						'div',
@@ -128,16 +128,16 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 				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,
 							},

package/dist/components/ontario-checkboxes.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
 import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
 
 const ontarioCheckboxesCss =
-	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.937em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.937em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.937em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.937em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.937em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.937em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.937em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}:host{--checkbox-bg:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z\' fill=\'%231a1a1a\'/%3E%3Cpath d=\'M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z\' fill=\'%23fff\'/%3E%3C/svg%3E")}.ontario-checkboxes{margin-bottom:2.5rem;max-width:48rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 0 0 2rem;min-height:1.75rem;box-sizing:content-box}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 0 0 2.5rem;min-height:2rem}}.ontario-checkboxes__input{cursor:pointer;margin:0;position:absolute;top:-0.125rem;left:-0.125rem;opacity:0;width:36px;height:36px;z-index:0;-webkit-tap-highlight-color:transparent}@media screen and (max-width: 40em){.ontario-checkboxes__input{width:40px;height:40px}}.ontario-checkboxes__label{display:inline-block;cursor:pointer;line-height:1.5;margin:0.25rem 0;padding:0 1rem;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-checkboxes__label{margin:0.33rem 0}}.ontario-checkboxes__label:before{content:"";border:0.125rem solid #1a1a1a;border-radius:4px;position:absolute;top:0;left:0;width:2rem;height:2rem;transition:border 0.1s ease-in-out;display:block}@media screen and (min-width: 40em){.ontario-checkboxes__label:before{width:1.75rem;height:1.75rem}}.ontario-checkboxes__label:after{content:"";background-image:var(--checkbox-bg);background-repeat:no-repeat;height:1.875rem;width:1.875rem;position:absolute;top:0.0625rem;left:0.0625rem;right:0;bottom:0;opacity:0;display:block}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:2.125rem;width:2.125rem}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{-moz-box-shadow:0 0 0 0.25rem #009ADB;-webkit-box-shadow:0 0 0 0.25rem #009ADB;box-shadow:0 0 0 0.25rem #009ADB;outline:0.25rem solid transparent;transition:all 0.1s ease-in-out}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:after{opacity:1}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:before{background-color:#1a1a1a}.ontario-checkboxes__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-checkboxes__hint-expander{margin-top:1rem}}';
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}:host{--checkbox-bg:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z\' fill=\'%231a1a1a\'/%3E%3Cpath d=\'M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z\' fill=\'%23fff\'/%3E%3C/svg%3E")}.ontario-checkboxes{margin-bottom:2.5rem;max-width:48rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 0 0 2rem;min-height:1.75rem;box-sizing:content-box}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 0 0 2.5rem;min-height:2rem}}.ontario-checkboxes__input{cursor:pointer;margin:0;position:absolute;top:-0.125rem;left:-0.125rem;opacity:0;width:36px;height:36px;z-index:0;-webkit-tap-highlight-color:transparent}@media screen and (max-width: 40em){.ontario-checkboxes__input{width:40px;height:40px}}.ontario-checkboxes__label{display:inline-block;cursor:pointer;line-height:1.5;margin:0.25rem 0;padding:0 1rem;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-checkboxes__label{margin:0.33rem 0}}.ontario-checkboxes__label:before{content:"";border:0.125rem solid #1a1a1a;border-radius:4px;position:absolute;top:0;left:0;width:2rem;height:2rem;transition:border 0.1s ease-in-out;display:block}@media screen and (min-width: 40em){.ontario-checkboxes__label:before{width:1.75rem;height:1.75rem}}.ontario-checkboxes__label:after{content:"";background-image:var(--checkbox-bg);background-repeat:no-repeat;height:1.875rem;width:1.875rem;position:absolute;top:0.0625rem;left:0.0625rem;right:0;bottom:0;opacity:0;display:block}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:2.125rem;width:2.125rem}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{-moz-box-shadow:0 0 0 0.25rem #009ADB;-webkit-box-shadow:0 0 0 0.25rem #009ADB;box-shadow:0 0 0 0.25rem #009ADB;outline:0.25rem solid transparent;transition:all 0.1s ease-in-out}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:after{opacity:1}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:before{background-color:#1a1a1a}.ontario-checkboxes__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-checkboxes__hint-expander{margin-top:1rem}}';
 const OntarioCheckboxesStyle0 = ontarioCheckboxesCss;
 
 const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
@@ -219,13 +219,13 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'div',
 				{
-					key: '0f1042ea6e9b17db2b9e411c7c8aa166985e0409',
+					key: '173d86874aa1ea64e9a73d000a0ed4fecbe57665',
 					class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
 				},
 				h(
 					'fieldset',
 					{
-						'key': 'fb11f1832b135145a888cd4738f21d000d3b9c22',
+						'key': '532f87dc2c043df58bad6f40ce98853031a79986',
 						'class': 'ontario-fieldset',
 						'aria-describedby': this.hintTextId,
 					},
@@ -237,13 +237,13 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 							ref: (el) => (this.hintTextRef = el),
 						}),
 					h(ErrorMessage, {
-						key: '5133f3b817005abbd6a0645c8ac3d339b03b9a45',
+						key: '459366e25c9fe52c41708d9dfc62f800b5642689',
 						message: this.errorMessage,
 						error: error,
 					}),
 					h(
 						'div',
-						{ key: '5b580eae08fcf6486ad2f4afefe7b10284d4a372', class: 'ontario-checkboxes' },
+						{ key: '0fe1efdeff27222064e1979cdc1daf0ae55b5547', class: 'ontario-checkboxes' },
 						(_a = this.internalOptions) === null || _a === void 0
 							? void 0
 							: _a.map((checkbox) =>