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

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

@@ -141,6 +141,7 @@ export class OntarioCallout {
 		return {
 			headingType: {
 				type: 'string',
+				attribute: 'heading-type',
 				mutable: true,
 				complexType: {
 					original: 'HeadingLevelOptions',
@@ -161,11 +162,11 @@ export class OntarioCallout {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'heading-type',
 				reflect: false,
 			},
 			headingContentType: {
 				type: 'string',
+				attribute: 'heading-content-type',
 				mutable: true,
 				complexType: {
 					original: 'HeadingContentType',
@@ -186,12 +187,12 @@ export class OntarioCallout {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'heading-content-type',
 				reflect: false,
 				defaultValue: "'string'",
 			},
 			headingContent: {
 				type: 'string',
+				attribute: 'heading-content',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -206,11 +207,11 @@ export class OntarioCallout {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'heading-content',
 				reflect: false,
 			},
 			content: {
 				type: 'string',
+				attribute: 'content',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -230,11 +231,11 @@ export class OntarioCallout {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'content',
 				reflect: false,
 			},
 			highlightColour: {
 				type: 'string',
+				attribute: 'highlight-colour',
 				mutable: true,
 				complexType: {
 					original: 'HighlightColourOptions',
@@ -255,7 +256,6 @@ export class OntarioCallout {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'highlight-colour',
 				reflect: false,
 				defaultValue: "'teal'",
 			},

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

@@ -1,7 +1,7 @@
-export const Layouts = ['vertical', 'horizontal'];
-export const HorizontalImagePositionTypes = ['left', 'right'];
-export const HorizontalImageSizeTypes = ['one-fourth', 'one-third'];
-export const HeaderColours = [
+export const layoutDirectionDefinitions = ['vertical', 'horizontal'];
+export const horizontalImagePositionDefinitions = ['left', 'right'];
+export const horizontalImageSizeDefinitions = ['one-fourth', 'one-third'];
+export const headerColourDefinitions = [
 	'dark-accent',
 	'light-accent',
 	'light-gold',

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

@@ -1 +1 @@
-{"version":3,"file":"ontario-card-types.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card-types.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,YAAY,CAAU,CAAC;AAC3D,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AACvE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,YAAY,EAAE,WAAW,CAAU,CAAC;AAM7E,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,aAAa;IACb,cAAc;IACd,YAAY;IACZ,cAAc;IACd,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,cAAc;IACd,cAAc;IACd,WAAW;IACX,eAAe;IACf,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;IACP,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,SAAS;CACT,CAAC","sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n];\n\nexport type HeaderColour = (typeof HeaderColours)[number];\n"]}
+{"version":3,"file":"ontario-card-types.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card-types.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,UAAU,EAAE,YAAY,CAAU,CAAC;AAC9E,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AAC7E,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,YAAY,EAAE,WAAW,CAAU,CAAC;AAMnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACtC,aAAa;IACb,cAAc;IACd,YAAY;IACZ,cAAc;IACd,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,cAAc;IACd,cAAc;IACd,WAAW;IACX,eAAe;IACf,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;IACP,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,SAAS;CACA,CAAC","sourcesContent":["import { HeadingLevel } from '../../utils/common/common.interface';\n\nexport const layoutDirectionDefinitions = ['vertical', 'horizontal'] as const;\nexport const horizontalImagePositionDefinitions = ['left', 'right'] as const;\nexport const horizontalImageSizeDefinitions = ['one-fourth', 'one-third'] as const;\n\nexport type LayoutDirection = (typeof layoutDirectionDefinitions)[number];\nexport type HorizontalImagePositionType = (typeof horizontalImagePositionDefinitions)[number];\nexport type HorizontalImageSizeType = (typeof horizontalImageSizeDefinitions)[number];\n\nexport const headerColourDefinitions = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n] as const;\n\nexport type HeaderColour = (typeof headerColourDefinitions)[number];\n\n// Define properties that you would like to track as component state\nexport type CardState = {\n\theaderColour: HeaderColour | undefined;\n\theadingLevel: HeadingLevel | undefined;\n\tlayoutDirection: LayoutDirection | undefined;\n};\n"]}

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

@@ -1,8 +1,9 @@
 import { h } from '@stencil/core';
-import { HeaderColours, Layouts } from './ontario-card-types';
-import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { headerColourDefinitions, layoutDirectionDefinitions } from './ontario-card-types';
+import { headingLevelDefinitions } from '../../utils/common/common.interface';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
 import { printArray } from '../../utils/helper/utils';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
 export class OntarioCard {
 	host;
 	/**
@@ -17,12 +18,37 @@ export class OntarioCard {
 	 *	>
 	 */
 	label;
+	/**
+	 * The heading level that the label will be rendered as.
+	 *
+	 * @example
+	 *	<ontario-card
+	 *		heading-level="h4"
+	 *		label="Card Title 1"
+	 *	>
+	 */
+	headingLevel = 'h2';
 	/**
 	 * Image to be displayed within the card image container.
 	 *
 	 * This is optional.
 	 */
 	image;
+	/**
+	 * Alt text for the card's image.
+	 *
+	 * This is optional prop, but may be required for an
+	 * image due to accessibility requirements.
+	 *
+	 * You can find guidance on when to add alt text to an image
+	 * on the Ontario.ca web content editing guide.
+	 *
+	 * https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility
+	 *
+	 * Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup
+	 * for decorative images. If left as undefined, the alt attribute will not render in markup.
+	 */
+	imageAltText = '';
 	/**
 	 * Text to be displayed within the card description container.
 	 *
@@ -36,12 +62,12 @@ export class OntarioCard {
 	 */
 	cardLink;
 	/**
-	 * The layout oritnetation of the card.
+	 * The layout direction/orientation of the card.
 	 *
 	 * If no type is passed, it will default to 'vertical'.
 	 *
 	 */
-	layout = 'vertical';
+	layoutDirection = 'vertical';
 	/**
 	 * Set the card's header colour.
 	 *
@@ -89,75 +115,101 @@ export class OntarioCard {
 	 *
 	 */
 	ariaLabelText;
+	cardState = {
+		headerColour: undefined,
+		headingLevel: undefined,
+		layoutDirection: undefined,
+	};
 	/**
-	 * Mutable variable, for internal use only.
-	 * Set the card's layout depending on validation result.
+	 * Watch for changes to the `layoutDirection` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).
+	 * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.
 	 */
-	layoutState;
+	validateLayoutDirection() {
+		const isValid = this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);
+		if (!isValid) {
+			this.printPropWarning(
+				'layout-direction',
+				'<ontario-card>',
+				this.layoutDirection,
+				layoutDirectionDefinitions,
+				'vertical',
+			);
+			this.updateCardState('layoutDirection', 'vertical');
+			return;
+		}
+		this.updateCardState('layoutDirection', this.layoutDirection);
+	}
 	/**
-	 * Watch for changes to the `layout` property for validation purposes.
+	 * Watch for changes to the `headingLevel` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
-	 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
+	 * If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).
+	 *
+	 * If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.
 	 */
-	validateLayout() {
-		if (this.layout) {
-			const isValid = validateValueAgainstArray(this.layout, Layouts);
-			if (isValid) {
-				this.layoutState = this.layout;
-			} else {
-				this.warnDefaultLayout();
-				this.layoutState = 'vertical';
-			}
+	validateHeadingLevel() {
+		const isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);
+		if (!isValid) {
+			this.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');
+			this.updateCardState('headingLevel', 'h2');
+			return;
 		}
+		this.updateCardState('headingLevel', this.headingLevel);
 	}
 	/**
 	 * Watch for changes to the `headerColour` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).
 	 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 	 */
 	validateHeaderColour() {
-		if (this.headerColour) {
-			const isValid = validateValueAgainstArray(this.headerColour, HeaderColours);
-			if (!isValid) {
-				this.warnDefaultHeaderColour();
-				this.headerColour = '';
-			}
+		const isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);
+		if (!isValid && this.headerColour !== undefined) {
+			this.printPropWarning('header-colour', '<ontario-card>', this.headerColour, headerColourDefinitions, 'undefined');
+			this.updateCardState('headerColour', undefined);
+			return;
 		}
+		this.updateCardState('headerColour', this.headerColour);
 	}
 	/**
-	 * Print the invalid `layout` prop warning message.
+	 * Print an invalid prop warning message.
+	 *
+	 * @param {string} propName - Name of the prop
+	 * @param {string} component - Component the error is on e.g. <ontario-card>
+	 * @param {any} propValue - Value of the prop
+	 * @param {readonly any[]} acceptableValues  - readonly array of acceptable prop values
+	 * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to
 	 */
-	warnDefaultLayout() {
+	printPropWarning(propName, component, propValue, acceptableValues, defaultValue) {
 		const message = new ConsoleMessageClass();
 		message
 			.addDesignSystemTag()
-			.addMonospaceText(' layout ')
+			.addMonospaceText(` ${propName} `)
 			.addRegularText('on')
-			.addMonospaceText(' <ontario-card> ')
-			.addRegularText('was set to an invalid layout; only ')
-			.addMonospaceText(printArray([...Layouts]))
-			.addRegularText(' are supported. The default layout')
-			.addMonospaceText(' vertical ')
+			.addMonospaceText(` ${component} `)
+			.addRegularText('was set to an invalid value of ')
+			.addMonospaceText(` ${propValue} `)
+			.addRegularText('. Only ')
+			.addMonospaceText(printArray([...acceptableValues]))
+			.addRegularText(' are supported values. The default value of')
+			.addMonospaceText(` ${defaultValue} `)
 			.addRegularText('is assumed.')
 			.printMessage();
 	}
 	/**
-	 * Print the invalid `headerColour` prop warning message.
+	 * Update a key within the State Object with a value.
+	 *
+	 * Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.
+	 * If only the corresponding object key/value is updated, corresponding render changes may not happen.
+	 *
+	 * @param {keyof CardState} key - Should match a key found within `CardState`.
+	 * @param {any} value - Should match the value type associated to the key within `CardState`.
 	 */
-	warnDefaultHeaderColour() {
-		const message = new ConsoleMessageClass();
-		message
-			.addDesignSystemTag()
-			.addMonospaceText(' header-colour ')
-			.addRegularText('on')
-			.addMonospaceText(' <ontario-card> ')
-			.addRegularText('was set to an invalid colour; only ')
-			.addMonospaceText(printArray([...HeaderColours]))
-			.addRegularText(' are supported. ')
-			.addRegularText('No colour is assumed as the default.')
-			.printMessage();
+	updateCardState(key, value) {
+		const cardStateCopy = { ...this.cardState };
+		cardStateCopy[key] = value;
+		this.cardState = cardStateCopy;
 	}
 	/**
 	 * Returns the top level classes of the card.
@@ -166,9 +218,9 @@ export class OntarioCard {
 	 */
 	getCardClasses() {
 		const baseClass =
-			this.layoutState === 'horizontal'
-				? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
-				: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;
+			this.cardState.layoutDirection === 'horizontal'
+				? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+				: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.cardState.layoutDirection}`;
 		const descriptionClass = this.description ? '' : ' ontario-card__description-false';
 		const backgroundClass =
 			this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
@@ -181,10 +233,7 @@ export class OntarioCard {
 	 */
 	getCardHeadingClasses() {
 		const baseClass = 'ontario-card__heading';
-		const backgroundClass =
-			this.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)
-				? `ontario-card__heading--${this.headerColour}`
-				: '';
+		const backgroundClass = this.cardState.headerColour ? `ontario-card__heading--${this.cardState.headerColour}` : '';
 		return `${baseClass} ${backgroundClass}`.trim();
 	}
 	/**
@@ -201,27 +250,29 @@ export class OntarioCard {
 	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
 	 */
 	componentWillLoad() {
-		this.validateLayout();
+		this.validateLayoutDirection();
+		this.validateHeadingLevel();
 		this.validateHeaderColour();
 	}
 	render() {
 		return h(
 			'li',
-			{ key: '690b3ae2a75c4b92e080ffa3c262af01fec21952', class: this.getCardClasses() },
+			{ key: '2491546d5c8cd802237264110f6af2635c9fd2f3', class: this.getCardClasses() },
 			this.image &&
 				h(
 					'div',
-					{ key: 'f384f101eca056d027276b2f7a1f9e440304cec3', class: 'ontario-card__image-container' },
+					{ key: 'e2c66a5844d5dc92422bb40e7df02dec8951c574', class: 'ontario-card__image-container' },
 					h(
 						'a',
 						{
-							'key': 'bc4a3b33c10ed1491ad26fd3e6a3e6053d06eb07',
+							'key': '14146da6cc4600e8ab54bd246e0655d3828cdae0',
 							'href': this.getHref(),
 							'aria-label': this.ariaLabelText,
 						},
 						h('img', {
-							key: '4918a0bf517f85035c5c5ee8f26fb3eb3398853e',
+							key: '7b80dc691d2a323b5d0078c9c7ef93e96b073367',
 							class: 'ontario-card__image',
+							alt: this.imageAltText,
 							src: this.image,
 						}),
 					),
@@ -229,27 +280,19 @@ export class OntarioCard {
 			h(
 				'div',
 				{
-					key: '528e7f220a8829e4795ac442e46fa55d2482eb98',
+					key: '78dd72f3673fc4528660fc24361df6509ed8e4b9',
 					class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 				},
 				h(
-					'h2',
-					{ key: '372355c20bcd85c98a663ffa3e8d19a4cfb30a46', class: this.getCardHeadingClasses() },
-					h(
-						'a',
-						{
-							'key': '7675fa500550255eafdea15078d3b196e32e3033',
-							'href': this.getHref(),
-							'aria-label': this.ariaLabelText,
-						},
-						this.label,
-					),
+					this.cardState.headingLevel, //tag
+					{ className: this.getCardHeadingClasses() }, //attributes
+					h('a', { 'href': this.getHref(), 'aria-label': this.ariaLabelText }, this.label),
 				),
 				this.description &&
 					h(
 						'div',
-						{ key: 'cd1492211c29568919aee9996fd167daea1806b1', class: 'ontario-card__description' },
-						h('p', { key: 'b638a626ae69888509b3cf9d194668097890580c' }, this.description),
+						{ key: 'f7dad07c4e39806379e3cdbd63d4edcc913859f9', class: 'ontario-card__description' },
+						h('p', { key: 'ae429b791a870a174ad39610fd12d426fdb382cd' }, this.description),
 					),
 			),
 		);
@@ -274,6 +317,7 @@ export class OntarioCard {
 		return {
 			label: {
 				type: 'string',
+				attribute: 'label',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -293,11 +337,42 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'label',
 				reflect: false,
 			},
+			headingLevel: {
+				type: 'string',
+				attribute: 'heading-level',
+				mutable: false,
+				complexType: {
+					original: 'HeadingLevel',
+					resolved: '"h2" | "h3" | "h4" | "h5" | "h6"',
+					references: {
+						HeadingLevel: {
+							location: 'import',
+							path: '../../utils/common/common.interface',
+							id: 'src/utils/common/common.interface.ts::HeadingLevel',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [
+						{
+							name: 'example',
+							text: '<ontario-card\n\theading-level="h4"\n\tlabel="Card Title 1"\n>',
+						},
+					],
+					text: 'The heading level that the label will be rendered as.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "'h2'",
+			},
 			image: {
 				type: 'string',
+				attribute: 'image',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -312,11 +387,31 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'image',
 				reflect: false,
 			},
+			imageAltText: {
+				type: 'string',
+				attribute: 'image-alt-text',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: "Alt text for the card's image.\n\nThis is optional prop, but may be required for an\nimage due to accessibility requirements.\n\nYou can find guidance on when to add alt text to an image\non the Ontario.ca web content editing guide.\n\nhttps://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility\n\nNote: This should default to an empty string ('') to ensure the alt attribute appears in the markup\nfor decorative images. If left as undefined, the alt attribute will not render in markup.",
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "''",
+			},
 			description: {
 				type: 'string',
+				attribute: 'description',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -331,11 +426,11 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'description',
 				reflect: false,
 			},
 			cardLink: {
 				type: 'string',
+				attribute: 'card-link',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -350,20 +445,20 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'card-link',
 				reflect: false,
 			},
-			layout: {
+			layoutDirection: {
 				type: 'string',
+				attribute: 'layout-direction',
 				mutable: false,
 				complexType: {
-					original: 'Layout',
+					original: 'LayoutDirection',
 					resolved: '"horizontal" | "vertical" | undefined',
 					references: {
-						Layout: {
+						LayoutDirection: {
 							location: 'import',
 							path: './ontario-card-types',
-							id: 'src/components/ontario-card/ontario-card-types.tsx::Layout',
+							id: 'src/components/ontario-card/ontario-card-types.tsx::LayoutDirection',
 						},
 					},
 				},
@@ -371,20 +466,21 @@ export class OntarioCard {
 				optional: true,
 				docs: {
 					tags: [],
-					text: "The layout oritnetation of the card.\n\nIf no type is passed, it will default to 'vertical'.",
+					text: "The layout direction/orientation of the card.\n\nIf no type is passed, it will default to 'vertical'.",
 				},
 				getter: false,
 				setter: false,
-				attribute: 'layout',
 				reflect: false,
 				defaultValue: "'vertical'",
 			},
 			headerColour: {
 				type: 'string',
+				attribute: 'header-colour',
 				mutable: false,
 				complexType: {
 					original: 'HeaderColour',
-					resolved: 'string | undefined',
+					resolved:
+						'"teal" | "gold" | "yellow" | "taupe" | "green" | "lime" | "sky" | "blue" | "purple" | "dark-accent" | "light-accent" | "light-gold" | "light-yellow" | "light-taupe" | "light-green" | "light-lime" | "light-teal" | "light-sky" | "light-blue" | "light-purple" | "light-orange" | "light-red" | "light-magenta" | "orange" | "red" | "magenta" | undefined',
 					references: {
 						HeaderColour: {
 							location: 'import',
@@ -401,11 +497,11 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'header-colour',
 				reflect: false,
 			},
 			horizontalImagePositionType: {
 				type: 'string',
+				attribute: 'horizontal-image-position-type',
 				mutable: false,
 				complexType: {
 					original: 'HorizontalImagePositionType',
@@ -431,12 +527,12 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'horizontal-image-position-type',
 				reflect: false,
 				defaultValue: "'left'",
 			},
 			horizontalImageSizeType: {
 				type: 'string',
+				attribute: 'horizontal-image-size-type',
 				mutable: false,
 				complexType: {
 					original: 'HorizontalImageSizeType',
@@ -462,12 +558,12 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'horizontal-image-size-type',
 				reflect: false,
 				defaultValue: "'one-third'",
 			},
 			ariaLabelText: {
 				type: 'string',
+				attribute: 'aria-label-text',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -482,14 +578,13 @@ export class OntarioCard {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'aria-label-text',
 				reflect: false,
 			},
 		};
 	}
 	static get states() {
 		return {
-			layoutState: {},
+			cardState: {},
 		};
 	}
 	static get elementRef() {
@@ -498,8 +593,12 @@ export class OntarioCard {
 	static get watchers() {
 		return [
 			{
-				propName: 'layout',
-				methodName: 'validateLayout',
+				propName: 'layoutDirection',
+				methodName: 'validateLayoutDirection',
+			},
+			{
+				propName: 'headingLevel',
+				methodName: 'validateHeadingLevel',
 			},
 			{
 				propName: 'headerColour',