@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "6.0.0-alpha.3",
+	"version": "6.0.0-alpha.4",
 	"type": "module",
 	"private": false,
 	"description": "Ontario Design System Component Library",
@@ -28,9 +28,9 @@
 		},
 		"./loader": {
 			"types": "./loader/index.d.ts",
-			"import": "./loader/index.js",
-			"require": "./loader/index.js",
-			"default": "./loader/index.js"
+			"import": "./loader/index.es2017.js",
+			"require": "./loader/index.cjs.js",
+			"default": "./loader/index.es2017.js"
 		},
 		"./hydrate": {
 			"types": "./hydrate/index.d.ts",
@@ -50,18 +50,19 @@
 		}
 	},
 	"scripts": {
-		"prebuild": "pnpm run build:config",
+		"prebuild": "pnpm run build:config && pnpm run build:theme",
 		"build": "pnpm run build:stencil && pnpm run format && pnpm run docs:copy:readme",
 		"build:stencil": "stencil build --docs",
 		"build:config": "tsx scripts/build-config.ts",
+		"build:theme": "tsx scripts/build-theme-scss.ts",
 		"clean": "rm -rf dist loader www",
 		"clean:full": "rm -rf node_modules && pnpm run clean",
 		"clean:icons": "rm -rf src/components/ontario-icon/ontario-icon-*.tsx",
 		"docs:assemble": "tsx scripts/build-documentation-bundle.ts",
-		"docs:copy:readme": "tsx ../../scripts/documentation-helper.ts -f readme.md -p \"---\nslug: /\n---\n\" -df ../app-web-components-documentation/docs/01-readme.md",
+		"docs:copy:readme": "tsx ../../scripts/documentation-helper.ts -f readme.md -p \"---\nslug: /\n---\n\" -df ../docusaurus/docs/01-readme.md",
 		"format": "prettier --write .",
 		"generate": "stencil generate",
-		"generate:icons": "node src/components/ontario-icon/scripts/generate-icons.js",
+		"generate:icons": "node src/components/ontario-icon/scripts/generate-icons.cjs",
 		"start": "stencil build --dev --watch --serve",
 		"pretest": "pnpm run build:config",
 		"test": "stencil test --spec --e2e",
@@ -72,7 +73,7 @@
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "6.0.0-alpha.1",
+		"@ongov/ontario-design-system-global-styles": "6.0.0-alpha.4",
 		"@stencil/core": "^4.33.1",
 		"dotenv": "^16.4.5",
 		"uuid": "^11.0.5"
@@ -80,8 +81,9 @@
 	"devDependencies": {
 		"@stencil/angular-output-target": "^0.10.1",
 		"@stencil/react-output-target": "^1.0.2",
-		"@stencil/sass": "^3.0.12",
+		"@stencil/sass": "^3.2.2",
 		"@types/jest": "^29.5.3",
+		"@types/mock-fs": "^4.13.4",
 		"@types/node": "^22.7.5",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
@@ -96,10 +98,12 @@
 		"jest-svg-transformer": "^1.0.0",
 		"json-loader": "^0.5.7",
 		"jszip": "^3.10.1",
+		"mock-fs": "^5.5.0",
 		"prettier": "^3.4.2",
 		"puppeteer": "^23.10.4",
 		"rollup-plugin-dotenv": "^0.5.1",
-		"shx": "^0.3.4",
+		"sass-embedded": "^1.89.2",
+		"shx": "^0.4.0",
 		"stencil-inline-svg": "^1.1.0",
 		"svgson": "^5.3.1",
 		"tsx": "^4.19.4",
@@ -135,5 +139,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "45c04aa4a32bf2dfca6ba7ee96529c1802d6e149"
+	"gitHead": "77c251f1a3bf57cd74ea5f857064a92b532b6cb5"
 }

package/readme.md

@@ -131,6 +131,30 @@ After installing the necessary styles and web components package, components can
 </ontario-radio-buttons>
 ```
 
+## Sass Package Resolution and the `NodePackageImporter`
+
+This project uses [Stencil](https://stenciljs.com/) and its official [@stenciljs/sass](https://github.com/stenciljs/sass) plugin, which internally relies on the `sass-embedded` package for compiling Sass. Traditional Sass import resolution does not always align with Node.js' module resolution, making it difficult to use `@use` or `@forward` with package-based imports. To address this, the Design System leverages the [`NodePackageImporter`](https://sass-lang.com/documentation/js-api/classes/nodepackageimporter/), which resolves imports using Node's algorithm. This makes it possible to reference SCSS files in npm packages in a way that's robust and future-proof.
+
+### Why is this needed?
+
+- Ensures that Sass can resolve imports from npm packages using the `pkg:` scheme.
+- Prevents import errors when package locations or structures change.
+- Provides consistency with how Node.js resolves modules, improving maintainability.
+
+### How it works in this project
+
+- The Stencil build process is already configured to use `NodePackageImporter` through the `sass-embedded` package.
+- You do **not** need to add additional configuration if you are consuming this component library as distributed.
+- If you are extending the library or basing your Sass on component Sass files, you can use the `pkg:` scheme in your own Sass to ensure reliable resolution.
+
+#### Example Sass import
+
+```scss
+@use 'pkg:@ongov/ontario-design-system-component-library/dist/components/ontario-button/ontario-button.scss';
+```
+
+**Note**: If you are consuming this library normally (via HTML/JS import), you do not need to configure Sass yourself. This information is primarily for developers working on or extending the component library.
+
 ## Component documentation
 
 For more information about using the Ontario Design System component library package web components, see [Using the components](https://designsystem.ontario.ca/docs/documentation/for-developers/web-components.html#using-the-components) in the [Ontario Design System Guidance](https://designsystem.ontario.ca).
@@ -161,8 +185,10 @@ Contact us at [design.system@ontario.ca](mailto:design.system@ontario.ca) for as
 
 ## References
 
-[Stencil](https://stenciljs.com/) is a compiler for building fast web apps using Web Components.
+- [Stencil](https://stenciljs.com/) is a compiler for building fast web apps using Web Components.
+
+  Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
 
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
+  Stencil components are just Web Components, so they work in any major framework or with no framework at all.
 
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+- [`@stenciljs/sass`](https://github.com/stenciljs/sass) provides the official Stencil plugin for Sass integration, built on top of `sass-embedded`.

package/src/components/ontario-accordion/accordion.interface.ts

@@ -29,3 +29,26 @@ export interface Accordion extends Base {
 	 */
 	ariaLabelText: string;
 }
+
+export enum AccordionChangeDetailReasons {
+	Init = 'init',
+	ToggleOne = 'toggle-one',
+	ToggleAll = 'toggle-all',
+}
+
+/**
+ * The event detail payload emitted by the accordion component.
+ */
+export interface AccordionChangeDetail {
+	/** Array of indexes currently open */
+	openIndexes: number[];
+
+	/** The index that was just toggled (if applicable) */
+	changedIndex?: number;
+
+	/** True if triggered by expand/collapse all */
+	isBulk?: boolean;
+
+	/** Optional description of what triggered the event */
+	reason?: AccordionChangeDetailReasons;
+}

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

@@ -1,11 +1,11 @@
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@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/2-tools/placeholder/focus.placeholders' as
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@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/1-variables/typography.variables' as typography;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
 
 .ontario-accordions__container {
 	max-width: globalVariables.$standard-width;

package/src/components/ontario-accordion/ontario-accordion.tsx

@@ -1,9 +1,14 @@
-import { Component, Prop, Element, State, h, Listen, Watch } from '@stencil/core';
-import { Accordion } from './accordion.interface';
+import { Component, Prop, Element, Event, EventEmitter, State, h, Listen, Watch } from '@stencil/core';
+import { v4 as uuid } from 'uuid';
+
+import { Accordion, AccordionChangeDetail, AccordionChangeDetailReasons } from './accordion.interface';
 import { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';
+
 import { Language } from '../../utils/common/language-types';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
+
 import translations from '../../translations/global.i18n.json';
 
 @Component({
@@ -41,26 +46,22 @@ export class OntarioAccordion {
 
 	/**
 	 * Used to include individual accordion data for the accordion component.
-	 * This is passed in as an array of objects with key-value pairs.
+	 * Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.
 	 *
-	 * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.
+	 * The `content` is rendered either as plain text or HTML depending on `accordionContentType`.
 	 *
+	 * @see Accordion
 	 * @example
 	 * 	<ontario-accordion
 	 *		name="My Accordion"
 	 *		accordion-data='[
-	 *			{"label": "Accordion 1", "content": "This is a string"},
+	 *			{"label": "Accordion 1", "content": "This is a string", "isOpen": true},
 	 *			{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}
 	 *		]'
 	 *	></ontario-accordion>
 	 */
 	@Prop() accordionData: string | Accordion[];
 
-	/**
-	 * Used to show whether the accordion is opened or closed.
-	 */
-	@Prop() isOpen: boolean = false;
-
 	/**
 	 * The language of the component.
 	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
@@ -68,23 +69,9 @@ export class OntarioAccordion {
 	@Prop({ mutable: true }) language?: Language;
 
 	/**
-	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 * Emits when open indexes change
 	 */
-	@Listen('setAppLanguage', { target: 'window' })
-	handleSetAppLanguage(event: CustomEvent<Language>) {
-		if (!this.language) {
-			this.language = validateLanguage(event);
-		}
-	}
-
-	/**
-	 * Handle the language being toggled from the `<ontario-header>`.
-	 * @param event Event object passed when the event is fired.
-	 */
-	@Listen('headerLanguageToggled', { target: 'window' })
-	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
-		this.language = validateLanguage(event);
-	}
+	@Event() accordionChange: EventEmitter<AccordionChangeDetail>;
 
 	/**
 	 * Store the translation dictionary for use within the component.
@@ -112,20 +99,57 @@ export class OntarioAccordion {
 	 */
 	@State() private openAccordionIndexes: number[] = [];
 
+	/** Unique prefix for a11y ids */
+	@State() private uidPrefix: string = `ontario-accordion-${uuid()}`;
+
+	/**
+	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 */
+	@Listen('setAppLanguage', { target: 'window' })
+	handleSetAppLanguage(event: CustomEvent<Language>) {
+		if (!this.language) {
+			this.language = validateLanguage(event);
+		}
+	}
+
+	/**
+	 * Handles an update to the language should the user request a language update from the language toggle.
+	 * @param {CustomEvent} - The language that has been selected.
+	 */
+	@Listen('headerLanguageToggled', { target: 'window' })
+	handleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {
+		this.language = validateLanguage(event.detail.newLanguage);
+	}
+
 	/**
 	 * Parse Accordion data, this is used to handle JSON strings from HTML.
 	 */
 	@Watch('accordionData')
 	private parseAccordionData() {
 		try {
-			if (typeof this.accordionData !== 'undefined') {
-				this.internalAccordionData = Array.isArray(this.accordionData)
-					? this.accordionData
-					: JSON.parse(this.accordionData);
-			}
+			const parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData || '[]');
+
+			// Normalize and type-guard
+			this.internalAccordionData = parsed.length
+				? parsed.map((prop: Accordion) => ({
+						label: prop?.label ?? '',
+						content: prop?.content ?? '',
+						accordionContentType: (prop?.accordionContentType ?? 'string') as 'string' | 'html',
+						isOpen: Boolean(prop?.isOpen),
+						ariaLabelText: prop?.ariaLabelText,
+					}))
+				: [];
+
+			// Seed the openAccordionIndexes based on the isOpen properties
+			this.seedOpenIndexesFromItems();
 
 			// Initialize the label based on the initial accordion state
 			this.updateLabel();
+
+			this.emitAccordionChange({
+				openIndexes: this.openAccordionIndexes,
+				reason: AccordionChangeDetailReasons.Init,
+			});
 		} catch {
 			const message = new ConsoleMessageClass();
 			message
@@ -137,6 +161,13 @@ export class OntarioAccordion {
 				.printMessage();
 
 			this.internalAccordionData = [];
+			this.openAccordionIndexes = [];
+			this.updateLabel();
+
+			this.emitAccordionChange({
+				openIndexes: this.openAccordionIndexes,
+				reason: AccordionChangeDetailReasons.Init,
+			});
 		}
 	}
 
@@ -166,16 +197,43 @@ export class OntarioAccordion {
 		}
 	}
 
+	/**
+	 * Emits a typed change event whenever the open/closed state changes.
+	 *
+	 * Consumers can listen for `accordionChange` to:
+	 *  - Read the full set of `openIndexes`
+	 *  - Know which index changed on single-item toggles (`changedIndex`)
+	 *  - Detect bulk actions like expand/collapse all (`isBulk`)
+	 *  - Understand why the change happened (`reason`)
+	 *
+	 * Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.
+	 */
+	private emitAccordionChange(detail: AccordionChangeDetail) {
+		this.accordionChange.emit(detail);
+	}
+
+	// Seed the openAccordionIndexes based on the isOpen properties of the accordion items
+	private seedOpenIndexesFromItems() {
+		this.openAccordionIndexes = this.internalAccordionData
+			.map((accordionItem, index) => (accordionItem?.isOpen ? index : -1))
+			.filter((accordionIndex) => accordionIndex !== -1);
+	}
+
 	// Toggle the accordion state when it's clicked
 	private toggleAccordion(index: number) {
 		if (this.openAccordionIndexes.includes(index)) {
-			// If the accordion is already open, close it
 			this.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);
 		} else {
-			// If the accordion is closed, open it
 			this.openAccordionIndexes = [...this.openAccordionIndexes, index];
 		}
+
 		this.updateLabel();
+
+		this.emitAccordionChange({
+			openIndexes: this.openAccordionIndexes,
+			changedIndex: index,
+			reason: AccordionChangeDetailReasons.ToggleOne,
+		});
 	}
 
 	/**
@@ -189,7 +247,14 @@ export class OntarioAccordion {
 			// At least one accordion is closed, open all
 			this.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);
 		}
+
 		this.updateLabel();
+
+		this.emitAccordionChange({
+			openIndexes: this.openAccordionIndexes,
+			isBulk: true,
+			reason: AccordionChangeDetailReasons.ToggleAll,
+		});
 	}
 
 	/**
@@ -240,49 +305,51 @@ export class OntarioAccordion {
 							</span>
 						</button>
 					</div>
-					{this.internalAccordionData?.map((accordion, index) => (
-						<div
-							class={`ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`}
-							key={`accordion-${index}`}
-						>
-							<h3
-								class={`ontario-accordion__heading ${
-									this.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''
-								}`}
-							>
-								<button
-									class="ontario-accordion__button"
-									aria-expanded={this.openAccordionIndexes.includes(index) ? 'true' : 'false'}
-									data-toggle="ontario-collapse"
-									onClick={() => this.toggleAccordion(index)}
-									aria-label={accordion.ariaLabelText}
+					{this.internalAccordionData?.map((accordion, index) => {
+						const buttonId = `${this.uidPrefix}__button--${index}`;
+						const sectionId = `${this.uidPrefix}__section--${index}`;
+						const isOpen = this.openAccordionIndexes.includes(index);
+
+						return (
+							<div class={`ontario-accordion ${isOpen ? 'open' : ''}`} key={`accordion-${index}`}>
+								<h3 class={`ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}`}>
+									<button
+										id={buttonId}
+										class="ontario-accordion__button"
+										aria-expanded={isOpen ? 'true' : 'false'}
+										data-toggle="ontario-collapse"
+										aria-controls={sectionId}
+										onClick={() => this.toggleAccordion(index)}
+										aria-label={accordion.ariaLabelText}
+									>
+										<span class="ontario-accordion__button-icon--close">
+											<ontario-icon-chevron-up colour="blue" aria-hidden="true"></ontario-icon-chevron-up>
+										</span>
+										<span class="ontario-accordion__button-icon--open">
+											<ontario-icon-chevron-down colour="blue" aria-hidden="true"></ontario-icon-chevron-down>
+										</span>
+										{accordion.label}
+									</button>
+								</h3>
+								<section
+									id={sectionId}
+									class={`ontario-accordion__content ${
+										isOpen ? 'ontario-expander__content--opened' : 'ontario-accordion__content--closed'
+									}`}
+									aria-labelledby={buttonId}
+									role="region"
+									aria-hidden={isOpen ? 'false' : 'true'}
+									data-toggle="ontario-expander-content"
 								>
-									<span class="ontario-accordion__button-icon--close">
-										<ontario-icon-chevron-up colour="blue"></ontario-icon-chevron-up>
-									</span>
-									<span class="ontario-accordion__button-icon--open">
-										<ontario-icon-chevron-down colour="blue"></ontario-icon-chevron-down>
-									</span>
-									{accordion.label}
-								</button>
-							</h3>
-							<section
-								class={`ontario-accordion__content ${
-									this.openAccordionIndexes.includes(index)
-										? 'ontario-accordion__content--opened'
-										: 'ontario-accordion__content--closed'
-								}`}
-								aria-hidden={!this.openAccordionIndexes.includes(index)}
-								data-toggle="ontario-expander-content"
-							>
-								{accordion.accordionContentType === 'html' ? (
-									<div innerHTML={accordion.content}></div> // Render HTML content
-								) : (
-									<div>{accordion.content}</div>
-								)}
-							</section>
-						</div>
-					))}
+									{accordion.accordionContentType === 'html' ? (
+										<div innerHTML={accordion.content}></div> // Render HTML content
+									) : (
+										<div>{accordion.content}</div>
+									)}
+								</section>
+							</div>
+						);
+					})}
 				</div>
 			</div>
 		);

package/src/components/ontario-accordion/readme.md

@@ -48,7 +48,7 @@ Example of an accordion component, where the user is explicitly passing in conte
 
 ### Accordion
 
-```ts
+```typescript
 accordion-data='[ {"label": "Accordion 1", "content": "Text Context"}, {"label": "Accordion 2", "content": "Text Content"}]'
 ```
 
@@ -64,7 +64,7 @@ accordion-data='[ {"label": "Accordion 1", "content": "Text Context"}, {"label":
 
 By default, the component uses our recommended values for the Expand/Collapse button label, which will automatically match the language the component is in. However, if custom values for this button are required they can be set via the `expandCollapseButton` property.
 
-```ts
+```typescript
 expand-collapse-button='{ "expandAllSectionsLabel": "Expand All", "collapseAllSectionsLabel": "Collapse All" }'
 ```
 
@@ -74,6 +74,27 @@ expand-collapse-button='{ "expandAllSectionsLabel": "Expand All", "collapseAllSe
 | `collapseAllSectionsLabel` | The label for the 'Collapse all' button. | `string` |
 | `ariaLabelText`            | Alt text for the expand/close button.    | `string` |
 
+### AccordionChangeDetail
+
+This event detail type is emitted by the `accordionChange` event whenever an individual accordion item's open state changes. It provides context about what changed, which indexes are open, and why the event occurred.
+
+| Property       | Description                                                   | Type                                                               |
+| -------------- | ------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- |
+| `openIndexes`  | Array of indexes currently open.                              | `number[]`                                                         |
+| `changedIndex` | The index that was just toggled (if applicable).              | `number`                                                           | `undefined` |
+| `isBulk`       | True if triggered by a “Expand All” or “Collapse All” action. | `boolean`                                                          | `undefined` |
+| `reason`       | Describes what triggered the event.                           | [`AccordionChangeDetailReason`](#accordionchangedetailreason-enum) |
+
+### AccordionChangeDetailReason (enum)
+
+This enum defines the possible values for the reason property in the event payload.
+
+| Enum Member | Value          | Description                                                 |
+| ----------- | -------------- | ----------------------------------------------------------- |
+| `Init`      | `'init'`       | Emitted when the component first initializes.               |
+| `ToggleOne` | `'toggle-one'` | Emitted when a single accordion item is toggled.            |
+| `ToggleAll` | `'toggle-all'` | Emitted when all accordion items are expanded or collapsed. |
+
 ## Technical Note: SSR (Server-Side Rendering) Considerations
 
 The Ontario Accordion component supports multiple languages via the `language` prop, which controls the text used in translatable UI elements (e.g., button labels). If no language is explicitly passed, it defaults to English (`'en'`).
@@ -86,13 +107,18 @@ These language change events only fire in the browser after hydration. To ensure
 
 ## Properties
 
-| Property               | Attribute                | Description                                                                                                                                                                                                                                                                    | Type                                                 | Default     |
-| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | ----------- |
-| `accordionData`        | `accordion-data`         | Used to include individual accordion data for the accordion component. This is passed in as an array of objects with key-value pairs. The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType. | `Accordion[] \| string`                              | `undefined` |
-| `expandCollapseButton` | `expand-collapse-button` | Custom Expand/Collapse button text.                                                                                                                                                                                                                                            | `ExpandCollapseButtonDetails \| string \| undefined` | `undefined` |
-| `isOpen`               | `is-open`                | Used to show whether the accordion is opened or closed.                                                                                                                                                                                                                        | `boolean`                                            | `false`     |
-| `language`             | `language`               | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.                                                                  | `"en" \| "fr" \| undefined`                          | `undefined` |
-| `name`                 | `name`                   | The name of the accordion component. This is not optional.                                                                                                                                                                                                                     | `string`                                             | `undefined` |
+| Property               | Attribute                | Description                                                                                                                                                                                                                                             | Type                                                 | Default     |
+| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------- |
+| `accordionData`        | `accordion-data`         | Used to include individual accordion data for the accordion component. Accepts an array of Accordion (@see Accordion) items or a JSON string of that array. The `content` is rendered either as plain text or HTML depending on `accordionContentType`. | `Accordion[] \| string`                              | `undefined` |
+| `expandCollapseButton` | `expand-collapse-button` | Custom Expand/Collapse button text.                                                                                                                                                                                                                     | `ExpandCollapseButtonDetails \| string \| undefined` | `undefined` |
+| `language`             | `language`               | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.                                           | `"en" \| "fr" \| undefined`                          | `undefined` |
+| `name`                 | `name`                   | The name of the accordion component. This is not optional.                                                                                                                                                                                              | `string`                                             | `undefined` |
+
+## Events
+
+| Event             | Description                    | Type                                 |
+| ----------------- | ------------------------------ | ------------------------------------ |
+| `accordionChange` | Emits when open indexes change | `CustomEvent<AccordionChangeDetail>` |
 
 ## Dependencies
 

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

@@ -1,8 +1,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/global.variables' as globalVariables;
-@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/4-elements/global.elements';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';
 
 .ontario-aside {
 	border-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;
@@ -12,7 +12,8 @@
 	* {
 		max-width: globalVariables.$standard-width;
 
-		&:last-child {
+		&:last-child,
+		&:last-of-type {
 			margin-bottom: spacing.$spacing-2;
 		}
 	}

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

@@ -1,12 +1,14 @@
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
-@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/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;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+@use 'sass:math';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
 
 $ontario-icon-margin-top: 0.125rem;
@@ -91,8 +93,12 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 		width: globalFunctions.px-to-rem(48);
 		height: globalFunctions.px-to-rem(48);
 
+		span {
+			display: block;
+		}
+
 		.ontario-icon {
-			margin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;
+			margin: math.div(spacing.$spacing-1, 2) spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;
 
 			@-moz-document url-prefix() {
 				margin-top: $ontario-icon-margin-top;