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

package/dist/types/stencil-public-runtime.d.ts

@@ -773,6 +773,7 @@ export declare namespace JSXBase {
 		hrefLang?: string;
 		hreflang?: string;
 		media?: string;
+		ping?: string;
 		rel?: string;
 		target?: string;
 		referrerPolicy?: ReferrerPolicy;
@@ -798,7 +799,6 @@ export declare namespace JSXBase {
 		cite?: string;
 	}
 	interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-		autoFocus?: boolean;
 		disabled?: boolean;
 		form?: string;
 		formAction?: string;
@@ -925,8 +925,6 @@ export declare namespace JSXBase {
 		autocapitalize?: string;
 		autoComplete?: string;
 		autocomplete?: string;
-		autoFocus?: boolean;
-		autofocus?: boolean | string;
 		capture?: string;
 		checked?: boolean;
 		crossOrigin?: string;
@@ -983,8 +981,6 @@ export declare namespace JSXBase {
 		popoverTarget?: string;
 	}
 	interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-		autoFocus?: boolean;
-		autofocus?: boolean | string;
 		challenge?: string;
 		disabled?: boolean;
 		form?: string;
@@ -997,7 +993,6 @@ export declare namespace JSXBase {
 	interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
 		form?: string;
 		htmlFor?: string;
-		htmlfor?: string;
 	}
 	interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
 		value?: string | string[] | number;
@@ -1024,6 +1019,8 @@ export declare namespace JSXBase {
 		autoPlay?: boolean;
 		autoplay?: boolean | string;
 		controls?: boolean;
+		controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+		controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
 		crossOrigin?: string;
 		crossorigin?: string;
 		loop?: boolean;
@@ -1108,7 +1105,6 @@ export declare namespace JSXBase {
 	interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
 		form?: string;
 		htmlFor?: string;
-		htmlfor?: string;
 		name?: string;
 	}
 	interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1133,7 +1129,6 @@ export declare namespace JSXBase {
 		type?: string;
 	}
 	interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-		autoFocus?: boolean;
 		disabled?: boolean;
 		form?: string;
 		multiple?: boolean;
@@ -1168,8 +1163,6 @@ export declare namespace JSXBase {
 	interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
 		autoComplete?: string;
 		autocomplete?: string;
-		autoFocus?: boolean;
-		autofocus?: boolean | string;
 		cols?: number;
 		disabled?: boolean;
 		form?: string;
@@ -1222,6 +1215,8 @@ export declare namespace JSXBase {
 	interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
 		innerHTML?: string;
 		accessKey?: string;
+		autoFocus?: boolean;
+		autofocus?: boolean | string;
 		class?:
 			| string
 			| {
@@ -1592,6 +1587,10 @@ export declare namespace JSXBase {
 		onSubmitCapture?: (event: Event) => void;
 		onInvalid?: (event: Event) => void;
 		onInvalidCapture?: (event: Event) => void;
+		onBeforeToggle?: (event: Event) => void;
+		onBeforeToggleCapture?: (event: Event) => void;
+		onToggle?: (event: Event) => void;
+		onToggleCapture?: (event: Event) => void;
 		onLoad?: (event: Event) => void;
 		onLoadCapture?: (event: Event) => void;
 		onError?: (event: Event) => void;

package/dist/types/utils/components/callout-aside/callout-aside-helpers.d.ts

@@ -4,10 +4,8 @@ import {
 	HeadingContentType,
 	HighlightColourOptions,
 } from './callout-aside.interface';
-export declare const isValidHighlightColour: (
-	colour: HighlightColourOptions,
-) => colour is 'teal' | 'gold' | 'yellow' | 'taupe' | 'green' | 'lime' | 'sky' | 'blue' | 'purple';
-export declare const isValidHeadingLevel: (level: HeadingLevelOptions) => level is 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare const isValidHighlightColour: (colour: HighlightColourOptions) => colour is HighlightColourOptions;
+export declare const isValidHeadingLevel: (level: HeadingLevelOptions) => level is HeadingLevelOptions;
 export declare const generateCalloutAside: (
 	type: CalloutAsideType,
 	headingContentType: HeadingContentType,

package/dist/types/utils/events/event-handler.d.ts

@@ -16,10 +16,10 @@ export declare const handleInputEvent: (
 	inputBlurEvent: EventEmitter<InputFocusBlurEvent>,
 	inputInputEvent?: EventEmitter<InputInputEvent>,
 	type?: string,
-	customChangeFunction?: ((event: Event) => void) | undefined,
-	customFocusFunction?: ((event: Event) => void) | undefined,
-	customBlurFunction?: ((event: Event) => void) | undefined,
-	customInputFunction?: ((event: Event) => void) | undefined,
+	customChangeFunction?: (event: Event) => void,
+	customFocusFunction?: (event: Event) => void,
+	customBlurFunction?: (event: Event) => void,
+	customInputFunction?: (event: Event) => void,
 	hostElement?: HTMLElement,
 ) => void;
 /**

package/dist/types/utils/tests/mutation-observer.mock.d.ts

@@ -1,2 +1 @@
-/// <reference types="jest" />
-export declare const mutationObserverMock: jest.Mock<MutationObserver, [MutationCallback]>;
+export declare const mutationObserverMock: jest.Mock<MutationObserver, [MutationCallback], any>;

package/loader/cdn.js

@@ -1,4 +1 @@
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function () {
-	return Promise.resolve();
-};

package/loader/index.cjs.js

@@ -1,4 +1 @@
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function () {
-	return Promise.resolve();
-};

package/loader/index.d.ts

@@ -19,6 +19,9 @@ export interface CustomElementsDefineOptions {
 	) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,2 +1 @@
-export * from '../dist/esm/polyfills/index.js';
 export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -9,5 +9,4 @@
 		Object.setPrototypeOf(HTMLElement, a);
 	}
 })();
-export * from '../dist/esm/polyfills/index.js';
 export * from '../dist/esm/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "5.0.0-alpha.4",
+	"version": "5.0.0-alpha.6",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -18,12 +18,12 @@
 		"readme.md"
 	],
 	"scripts": {
-		"prebuild": "npm run build:config",
-		"build": "npm run build:stencil && npm run format && npm run docs:copy:readme",
+		"prebuild": "pnpm run build:config",
+		"build": "pnpm run build:stencil && pnpm run format && pnpm run docs:copy:readme",
 		"build:stencil": "stencil build --docs",
 		"build:config": "ts-node scripts/build-config.ts",
 		"clean": "rm -rf dist loader www",
-		"clean:full": "rm -rf node_modules && npm run clean",
+		"clean:full": "rm -rf node_modules && pnpm run clean",
 		"clean:icons": "rm -rf src/components/ontario-icon/ontario-icon-*.tsx",
 		"docs:assemble": "ts-node scripts/build-documentation-bundle.ts",
 		"docs:copy:readme": "ts-node ../../scripts/documentation-helper.ts -f readme.md -p \"---\nslug: /\n---\n\" -df ../app-web-components-documentation/docs/01-readme.md",
@@ -31,47 +31,48 @@
 		"generate": "stencil generate",
 		"generate:icons": "node src/components/ontario-icon/scripts/generate-icons.js",
 		"start": "stencil build --dev --watch --serve",
-		"pretest": "npm run build:config",
+		"pretest": "pnpm run build:config",
 		"test": "stencil test --spec --e2e",
 		"test.watch": "stencil test --spec --e2e --watchAll",
-		"pretest:e2e": "npm run build:config",
+		"pretest:e2e": "pnpm run build:config",
 		"test:e2e": "stencil test --e2e",
-		"pretest:unit": "npm run build:config",
+		"pretest:unit": "pnpm run build:config",
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "5.0.0-alpha.3",
-		"@stencil/core": "^4.12.2",
-		"dotenv": "^16.3.1"
+		"@ongov/ontario-design-system-global-styles": "5.0.0-alpha.6",
+		"@stencil/core": "^4.23.0",
+		"dotenv": "^16.4.5",
+		"uuid": "^11.0.5"
 	},
 	"devDependencies": {
-		"@stencil/angular-output-target": "^0.8.4",
-		"@stencil/react-output-target": "0.5.3",
-		"@stencil/sass": "^3.0.9",
-		"@types/jest": "^27.0.3",
-		"@types/node": "^18.14.2",
-		"@types/puppeteer": "^5.4.7",
-		"@types/uuid": "^9.0.0",
-		"babel-jest": "^29.3.1",
+		"@stencil/angular-output-target": "^0.10.1",
+		"@stencil/react-output-target": "0.8.0",
+		"@stencil/sass": "^3.0.12",
+		"@types/jest": "^29.5.3",
+		"@types/node": "^22.7.5",
+		"@types/react": "^19.0.8",
+		"@types/react-dom": "^19.0.3",
+		"@types/uuid": "^10.0.0",
+		"babel-jest": "^29.7.0",
 		"copyfiles": "^2.4.1",
-		"fs-extra": "^11.1.0",
-		"glob": "^8.0.3",
-		"glob-promise": "^5.0.0",
-		"jest": "^27.0.3",
-		"jest-cli": "^27.4.5",
-		"jest-junit": "^15.0.0",
+		"fs-extra": "^11.2.0",
+		"glob": "^11.0.0",
+		"jest": "^29.7.0",
+		"jest-cli": "^29.7.0",
+		"jest-junit": "^16.0.0",
 		"jest-svg-transformer": "^1.0.0",
 		"json-loader": "^0.5.7",
 		"jszip": "^3.10.1",
-		"prettier": "^2.8.1",
-		"puppeteer": "^19.4.0",
-		"rollup-plugin-dotenv": "^0.4.1",
+		"prettier": "^3.4.2",
+		"puppeteer": "^23.10.4",
+		"rollup-plugin-dotenv": "^0.5.1",
 		"shx": "^0.3.4",
 		"stencil-inline-svg": "^1.1.0",
-		"svgson": "^5.2.1",
-		"ts-node": "^10.9.1",
-		"typescript": "^4.9.4",
-		"validate-color": "^2.2.1"
+		"svgson": "^5.3.1",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.6.3",
+		"validate-color": "^2.2.4"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -102,5 +103,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "14b540375d2b095c2d61825af04a004708e4ff38"
+	"gitHead": "149604a02633d6ddbbebd9e481f4da6ca6c095c5"
 }

package/readme.md

@@ -37,7 +37,7 @@ There are two ways to install the Ontario Design System component library packag
 1. Install the NPM package.
 
    ```bash
-   npm install --save @ongov/ontario-design-system-component-library
+   pnpm install --save @ongov/ontario-design-system-component-library
    ```
 
 2. Add the following script tags to your HTML to import the component library, adjusting the paths to fit your setup.

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

@@ -2,14 +2,14 @@
 
 exports[`ontario-aside snapshot should render the expected html 1`] = `
 <ontario-aside heading-content="Quick fact:" heading-content-type="string" heading-type="h3" highlight-colour="gold">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <aside class="ontario-aside ontario-border-highlight--gold">
       <h3 class="ontario-aside__title ontario-h5">
         Quick fact:
       </h3>
       <slot></slot>
     </aside>
-  </mock:shadow-root>
+  </template>
   As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.
 </ontario-aside>
 `;

package/src/components/ontario-back-to-top/ontario-back-to-top.scss

@@ -2,7 +2,7 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@@ -37,7 +37,7 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 	color: colours.$ontario-colour-black;
 	line-height: globalFunctions.px-to-rem(20);
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	z-index: 10000;
 	cursor: pointer;
@@ -54,7 +54,8 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 
 	&:focus {
 		background-color: $ontario-colour-back-to-top-background;
-		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
+		box-shadow:
+			0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
 			0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
 		outline: globalFunctions.px-to-rem(4) solid transparent;
 		transition: 0.1s ease-in-out;
@@ -62,10 +63,13 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 
 	&:active {
 		background-color: $ontario-colour-back-to-top--active-background;
-		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
+		box-shadow:
+			0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
 			0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
 		outline: globalFunctions.px-to-rem(4) solid transparent;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	@media screen and (max-width: breakpoints.$medium-breakpoint) {

package/src/components/ontario-back-to-top/test/__snapshots__/ontario-back-to-top.spec.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`ontario-back-to-top should render the expected html 1`] = `
 <ontario-back-to-top>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <button aria-label="Scroll back to the top" class="ontario-back-to-top">
       <span aria-hidden="true"></span>
       Top
     </button>
-  </mock:shadow-root>
+  </template>
 </ontario-back-to-top>
 `;

package/src/components/ontario-badge/ontario-badge.scss

@@ -1,5 +1,5 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@@ -27,7 +27,7 @@
 	background-color: colours.$ontario-colour-information-light;
 	color: colours.$ontario-greyscale-70;
 	padding: spacing.$spacing-1 spacing.$spacing-2;
-	font-family: typography.$ontario-font-raleway-modified;
+	font-family: fonts.$ontario-font-raleway;
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
 	font-weight: fontWeights.$ontario-font-weights-bold;
 	line-height: globalFunctions.px-to-rem(25);

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

@@ -2,44 +2,44 @@
 
 exports[`ontario-badge should override the host textContent with label prop output on the span element 1`] = `
 <ontario-badge label="completed">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span class="ontario-badge ontario-badge--default-heavy">
       completed
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;
 
 exports[`ontario-badge should render the aria-label attribute on the span element 1`] = `
 <ontario-badge aria-label-text="This course is currently in progress.">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span aria-label="This course is currently in progress." class="ontario-badge ontario-badge--default-heavy">
       In progress
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;
 
 exports[`ontario-badge should render the expected base html 1`] = `
 <ontario-badge>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span class="ontario-badge ontario-badge--default-heavy">
       In progress
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;
 
 exports[`ontario-badge should render with the ontario-badge--default-light class on the span element 1`] = `
 <ontario-badge colour="light-teal">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span class="ontario-badge ontario-badge--default-light">
       In progress
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;

package/src/components/ontario-blockquote/ontario-blockquote.scss

@@ -2,14 +2,14 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
 
 .ontario-blockquote {
 	border-left: 4px solid colours.$ontario-greyscale-70;
-	font-family: typography.$ontario-font-raleway-modified;
+	font-family: fonts.$ontario-font-raleway;
 	font-size: globalFunctions.px-to-rem(19);
 	font-weight: fontWeights.$ontario-font-weights-normal;
 	letter-spacing: 0.025rem;
@@ -17,7 +17,7 @@
 	max-width: globalVariables.$standard-width;
 	margin: spacing.$spacing-6;
 	padding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;
-	quotes: '\201C''\201D';
+	quotes: '\201C' '\201D';
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
 		font-size: globalFunctions.px-to-rem(18);

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

@@ -2,7 +2,7 @@
 
 exports[`ontario-blockquote snapshot should render the expected html 1`] = `
 <ontario-blockquote attribution="DS Tech Team" quote="This is a test quote">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <blockquote class="ontario-blockquote ontario-blockquote--short">
       <p>
         This is a test quote
@@ -11,6 +11,6 @@ exports[`ontario-blockquote snapshot should render the expected html 1`] = `
         DS Tech Team
       </cite>
     </blockquote>
-  </mock:shadow-root>
+  </template>
 </ontario-blockquote>
 `;

package/src/components/ontario-button/ontario-button.scss

@@ -3,8 +3,8 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	placeholders;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
@@ -22,7 +22,7 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 	box-shadow: none;
 	display: inline-block;
 	font-size: 1.125rem;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	line-height: math.div(14, 9);
 	margin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;
@@ -60,13 +60,17 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 	&:focus {
 		background-color: $ontario-button-bg-primary--hover;
 		color: colours.$ontario-colour-white;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: $ontario-button-bg-primary--active;
 		color: colours.$ontario-colour-white;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {
@@ -91,14 +95,18 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 		background-color: colours.$ontario-colour-button-secondary--hover;
 		border-color: colours.$ontario-colour-link--hover;
 		color: colours.$ontario-colour-link--hover;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: colours.$ontario-colour-button-secondary--active;
 		border-color: colours.$ontario-colour-link--active;
 		color: colours.$ontario-colour-link--active;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {
@@ -121,14 +129,18 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 		background-color: colours.$ontario-colour-button-tertiary--hover;
 		color: colours.$ontario-colour-link--hover;
 		text-decoration: underline;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: colours.$ontario-colour-button-tertiary--active;
 		color: colours.$ontario-colour-link--active;
 		text-decoration: underline;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {
@@ -147,12 +159,16 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 
 	&:focus {
 		background-color: colours.$ontario-greyscale-70;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: colours.$ontario-greyscale-70;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {

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

@@ -2,14 +2,14 @@
 
 exports[`ontario-callout snapshot should render the expected html 1`] = `
 <ontario-callout heading-content="Get notified" heading-content-type="string" heading-type="h3" highlight-colour="gold">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div class="ontario-border-highlight--gold ontario-callout">
       <h3 class="ontario-callout__title ontario-h5">
         Get notified
       </h3>
       <slot></slot>
     </div>
-  </mock:shadow-root>
+  </template>
   <p>
     <a href="#">
       Sign up for email reminders

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

@@ -13,7 +13,7 @@
 .ontario-card {
 	box-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);
 	border-radius: globalVariables.$global-radius;
-	margin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;
+	margin-bottom: spacing.$spacing-7;
 	padding: spacing.$spacing-0;
 	/*
 	 * Required for cards to stay the same height regardless of content size.
@@ -24,6 +24,7 @@
 	transition: all 0.3s ease-in-out;
 	position: relative;
 	cursor: pointer;
+	background: colours.$ontario-colour-white;
 
 	&:hover {
 		box-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);
@@ -108,7 +109,11 @@
 
 	.ontario-card--image-true & {
 		border-radius: 0;
-		@at-root .ontario-card__card-type--horizontal & {
+		@at-root .ontario-card__image-right & {
+			border-radius: globalVariables.$global-radius 0 0 0;
+		}
+
+		@at-root .ontario-card__image-left & {
 			border-radius: 0 globalVariables.$global-radius 0 0;
 		}
 	}
@@ -186,7 +191,7 @@ $ontario-card-heading-colours: (
 
 .ontario-card__text-container {
 	.ontario-card__card-type--horizontal & {
-		width: 66.6%;
+		width: math.percentage(math.div(2, 3));
 	}
 
 	.ontario-card__image-size-one-fourth & {