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

package/components/ontario-accordion.d.ts

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

package/components/ontario-accordion.js

@@ -0,0 +1,378 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { b as validateLanguage } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { d as defineCustomElement$3 } from './p-DJOzeqZ-.js';
+import { d as defineCustomElement$2 } from './p-CRMogYVY.js';
+import { v as v4 } from './p-BF0_OXTe.js';
+
+var AccordionChangeDetailReasons;
+(function (AccordionChangeDetailReasons) {
+	AccordionChangeDetailReasons['Init'] = 'init';
+	AccordionChangeDetailReasons['ToggleOne'] = 'toggle-one';
+	AccordionChangeDetailReasons['ToggleAll'] = 'toggle-all';
+})(AccordionChangeDetailReasons || (AccordionChangeDetailReasons = {}));
+
+const ontarioAccordionCss =
+	'.ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-accordion__button{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){.ontario-accordion__button{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #cccccc}.ontario-accordion:last-of-type{border-bottom:2px solid #cccccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:0.5rem;color:#0066CC;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478F;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#0066CC;cursor:pointer;padding:0.75rem 0.5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:0.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:rgb(242.25, 242.25, 242.25);color:#00478F}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009ADB inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:0.75rem 0.75rem 2rem 0.75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}';
+
+const OntarioAccordion$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioAccordion extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.accordionChange = createEvent(this, 'accordionChange');
+			/**
+			 * Store the translation dictionary for use within the component.
+			 */
+			this.translations = translations;
+			/**
+			 * Internal state containing the parsed Accordion Data
+			 */
+			this.internalAccordionData = [];
+			/**
+			 * This state tracks which accordions are open.
+			 */
+			this.openAccordionIndexes = [];
+			/** Unique prefix for a11y ids */
+			this.uidPrefix = `ontario-accordion-${v4()}`;
+		}
+		/**
+		 * 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.
+		 */
+		handleSetAppLanguage(event) {
+			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.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event.detail.newLanguage);
+		}
+		/**
+		 * Parse Accordion data, this is used to handle JSON strings from HTML.
+		 */
+		parseAccordionData() {
+			try {
+				const parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData || '[]');
+				// Normalize and type-guard
+				this.internalAccordionData = parsed.length
+					? parsed.map((prop) => {
+							var _a, _b, _c;
+							return {
+								label:
+									(_a = prop === null || prop === void 0 ? void 0 : prop.label) !== null && _a !== void 0 ? _a : '',
+								content:
+									(_b = prop === null || prop === void 0 ? void 0 : prop.content) !== null && _b !== void 0 ? _b : '',
+								accordionContentType:
+									(_c = prop === null || prop === void 0 ? void 0 : prop.accordionContentType) !== null && _c !== void 0
+										? _c
+										: 'string',
+								isOpen: Boolean(prop === null || prop === void 0 ? void 0 : prop.isOpen),
+								ariaLabelText: prop === null || prop === void 0 ? void 0 : 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 (_a) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' accordionData ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-accordion> ')
+					.addRegularText('could not be parsed. Please ensure it is valid JSON.')
+					.printMessage();
+				this.internalAccordionData = [];
+				this.openAccordionIndexes = [];
+				this.updateLabel();
+				this.emitAccordionChange({
+					openIndexes: this.openAccordionIndexes,
+					reason: AccordionChangeDetailReasons.Init,
+				});
+			}
+		}
+		/**
+		 * Parse Expand/Collapse Button Details. This handles both object and JSON string formats
+		 * passed from HTML, with safe error handling for invalid JSON.
+		 */
+		parseExpandCollapseButtonDetails() {
+			if (typeof this.expandCollapseButton !== 'undefined') {
+				if (typeof this.expandCollapseButton === 'string') {
+					try {
+						this.internalExpandCollapseLabelDetails = JSON.parse(this.expandCollapseButton);
+					} catch (_a) {
+						const message = new ConsoleMessageClass();
+						message
+							.addDesignSystemTag()
+							.addMonospaceText(' expandCollapseButton ')
+							.addRegularText('for')
+							.addMonospaceText(' <ontario-accordion> ')
+							.addRegularText('could not be parsed from a string. Please ensure it is valid JSON.')
+							.printMessage();
+					}
+				} else {
+					this.internalExpandCollapseLabelDetails = this.expandCollapseButton;
+				}
+			}
+		}
+		/**
+		 * 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`.
+		 */
+		emitAccordionChange(detail) {
+			this.accordionChange.emit(detail);
+		}
+		// Seed the openAccordionIndexes based on the isOpen properties of the accordion items
+		seedOpenIndexesFromItems() {
+			this.openAccordionIndexes = this.internalAccordionData
+				.map((accordionItem, index) =>
+					(accordionItem === null || accordionItem === void 0 ? void 0 : accordionItem.isOpen) ? index : -1,
+				)
+				.filter((accordionIndex) => accordionIndex !== -1);
+		}
+		// Toggle the accordion state when it's clicked
+		toggleAccordion(index) {
+			if (this.openAccordionIndexes.includes(index)) {
+				this.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);
+			} else {
+				this.openAccordionIndexes = [...this.openAccordionIndexes, index];
+			}
+			this.updateLabel();
+			this.emitAccordionChange({
+				openIndexes: this.openAccordionIndexes,
+				changedIndex: index,
+				reason: AccordionChangeDetailReasons.ToggleOne,
+			});
+		}
+		/**
+		 * Toggle all accordions open/close
+		 */
+		toggleAll() {
+			if (this.openAccordionIndexes.length === this.internalAccordionData.length) {
+				// All accordions are open, close all
+				this.openAccordionIndexes = [];
+			} else {
+				// 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,
+			});
+		}
+		/**
+		 * Update the label based on the current accordion state
+		 */
+		updateLabel() {
+			const allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));
+			if (allOpen) {
+				// All accordions are open, set label to "Collapse all"
+				this.expandCollapseLabel = 'collapse';
+			} else {
+				// At least one accordion is closed, set label to "Expand all"
+				this.expandCollapseLabel = 'expand';
+			}
+		}
+		componentWillLoad() {
+			this.parseAccordionData();
+			this.parseExpandCollapseButtonDetails();
+			this.language = validateLanguage(this.language);
+		}
+		render() {
+			var _a, _b, _c, _d, _e, _f;
+			return h(
+				'div',
+				{ key: 'da27c5ce718dcbbd5e8a7bb66e03491d5da59db4' },
+				h('h2', { key: '3a1c6c4fc39f29b6f2e8756dc7835d71c393ca83' }, this.name),
+				h(
+					'div',
+					{ key: 'fb589625eeb5e65ef78ea14dd7a07f10b26f1eb1', class: 'ontario-accordions__container' },
+					h(
+						'div',
+						{ key: '154dd1f975d95b584eee10606246c1030096f8e6', class: 'ontario-accordion__controls' },
+						h(
+							'button',
+							{
+								'key': '630718017aec87c8ecf14a17dfe603b54c562c13',
+								'class': 'ontario-accordion__button--expand-all',
+								'onClick': () => this.toggleAll(),
+								'aria-expanded':
+									this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false',
+								'aria-label':
+									(_a = this.internalExpandCollapseLabelDetails) === null || _a === void 0 ? void 0 : _a.ariaLabelText,
+							},
+							h(
+								'span',
+								{ key: '81701e74455e661cb4db276d1d409805a6baaa9c', class: 'ontario-accordion--expand-open-all' },
+								this.expandCollapseLabel === 'expand'
+									? h(
+											'div',
+											null,
+											(_c =
+												(_b = this.internalExpandCollapseLabelDetails) === null || _b === void 0
+													? void 0
+													: _b.expandAllSectionsLabel) !== null && _c !== void 0
+												? _c
+												: this.translations.accordion.expand[`${this.language}`],
+										)
+									: h(
+											'div',
+											null,
+											(_e =
+												(_d = this.internalExpandCollapseLabelDetails) === null || _d === void 0
+													? void 0
+													: _d.collapseAllSectionsLabel) !== null && _e !== void 0
+												? _e
+												: this.translations.accordion.collapse[`${this.language}`],
+										),
+							),
+						),
+					),
+					(_f = this.internalAccordionData) === null || _f === void 0
+						? void 0
+						: _f.map((accordion, index) => {
+								const buttonId = `${this.uidPrefix}__button--${index}`;
+								const sectionId = `${this.uidPrefix}__section--${index}`;
+								const isOpen = this.openAccordionIndexes.includes(index);
+								return h(
+									'div',
+									{ class: `ontario-accordion ${isOpen ? 'open' : ''}`, key: `accordion-${index}` },
+									h(
+										'h3',
+										{ class: `ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}` },
+										h(
+											'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,
+											},
+											h(
+												'span',
+												{ class: 'ontario-accordion__button-icon--close' },
+												h('ontario-icon-chevron-up', { 'colour': 'blue', 'aria-hidden': 'true' }),
+											),
+											h(
+												'span',
+												{ class: 'ontario-accordion__button-icon--open' },
+												h('ontario-icon-chevron-down', { 'colour': 'blue', 'aria-hidden': 'true' }),
+											),
+											accordion.label,
+										),
+									),
+									h(
+										'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',
+										},
+										accordion.accordionContentType === 'html'
+											? h('div', { innerHTML: accordion.content }) // Render HTML content
+											: h('div', null, accordion.content),
+									),
+								);
+							}),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				accordionData: ['parseAccordionData'],
+				expandCollapseButton: ['parseExpandCollapseButtonDetails'],
+			};
+		}
+		static get style() {
+			return ontarioAccordionCss;
+		}
+	},
+	[
+		257,
+		'ontario-accordion',
+		{
+			name: [1],
+			expandCollapseButton: [1, 'expand-collapse-button'],
+			accordionData: [1, 'accordion-data'],
+			language: [1025],
+			translations: [32],
+			expandCollapseLabel: [32],
+			internalExpandCollapseLabelDetails: [32],
+			internalAccordionData: [32],
+			openAccordionIndexes: [32],
+			uidPrefix: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+		{
+			accordionData: ['parseAccordionData'],
+			expandCollapseButton: ['parseExpandCollapseButtonDetails'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-accordion', 'ontario-icon-chevron-down', 'ontario-icon-chevron-up'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-accordion':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioAccordion$1);
+				}
+				break;
+			case 'ontario-icon-chevron-down':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$3();
+				}
+				break;
+			case 'ontario-icon-chevron-up':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioAccordion = OntarioAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioAccordion, defineCustomElement };
+//# sourceMappingURL=ontario-accordion.js.map
+
+//# sourceMappingURL=ontario-accordion.js.map

package/components/ontario-accordion.js.map

@@ -0,0 +1 @@
+{"file":"ontario-accordion.js","mappings":"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","names":["OntarioAccordion","__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-accordion/accordion.interface.ts","src/components/ontario-accordion/ontario-accordion.scss?tag=ontario-accordion&encapsulation=shadow","src/components/ontario-accordion/ontario-accordion.tsx"],"sourcesContent":["import { Base } from '../../utils/common/common.interface';\n\nexport interface Accordion extends Base {\n\t/**\n\t * The label for the individual accordion button.\n\t */\n\tlabel: string;\n\n\t/**\n\t * The content type of the accordion.\n\t * If no prop is passed, it will default to a string.\n\t * If the accordion requires multiple lines or HTML, the `accordionContentType` prop should be set to `html`.\n\t */\n\n\taccordionContentType: 'string' | 'html';\n\n\t/**\n\t * The content that is passed into each accordion.\n\t */\n\tcontent: string;\n\n\t/**\n\t * A boolean to track whether the accordion is expanded or collapsed.\n\t */\n\tisOpen: boolean;\n\n\t/**\n\t * Custom Aria Label text for the section.\n\t */\n\tariaLabelText: string;\n}\n\nexport enum AccordionChangeDetailReasons {\n\tInit = 'init',\n\tToggleOne = 'toggle-one',\n\tToggleAll = 'toggle-all',\n}\n\n/**\n * The event detail payload emitted by the accordion component.\n */\nexport interface AccordionChangeDetail {\n\t/** Array of indexes currently open */\n\topenIndexes: number[];\n\n\t/** The index that was just toggled (if applicable) */\n\tchangedIndex?: number;\n\n\t/** True if triggered by expand/collapse all */\n\tisBulk?: boolean;\n\n\t/** Optional description of what triggered the event */\n\treason?: AccordionChangeDetailReasons;\n}\n","@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n\n.ontario-accordions__container {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n}\n\n.ontario-accordion {\n\tborder-top: 2px solid colours.$ontario-greyscale-20;\n\n\t&:last-of-type {\n\t\tborder-bottom: 2px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-accordion__controls {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.ontario-accordion__button,\n.ontario-accordion__button--expand-all {\n\tbackground: none;\n\tborder: 0;\n\tbox-sizing: border-box;\n}\n\n.ontario-accordion__button--expand-all {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tmargin-bottom: spacing.$spacing-2;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t}\n}\n\n.ontario-accordion--expand-close-all {\n\tdisplay: none;\n}\n\n.ontario-accordion__controls--active {\n\t.ontario-accordion--expand-close-all {\n\t\tdisplay: block;\n\t}\n\n\t.ontario-accordion--expand-open-all {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-accordion__button {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tpadding: spacing.$spacing-3 spacing.$spacing-2;\n\ttext-align: left;\n\twidth: globalVariables.$full-width;\n\t@extend %h4-styles;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t.ontario-accordion__button-icon--close,\n\t.ontario-accordion__button-icon--open {\n\t\tmargin-right: spacing.$spacing-2;\n\t}\n\n\t.ontario-icon {\n\t\twidth: 1.75rem;\n\t\theight: 1.75rem;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-accordion__content {\n\tdisplay: none;\n\tpadding: spacing.$spacing-3 spacing.$spacing-3 spacing.$spacing-6 spacing.$spacing-3;\n\tmargin-left: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-6;\n\t}\n\n\t* {\n\t\tmargin-top: spacing.$spacing-0;\n\t\tmax-width: globalVariables.$standard-width;\n\t\twidth: globalVariables.$full-width;\n\t}\n\n\tul,\n\tol {\n\t\tmax-width: calc(100% - spacing.$spacing-8);\n\t}\n\n\t& > :last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-accordion__button-icon--close,\n.ontario-expander--active .ontario-accordion__button-icon--open {\n\tdisplay: none;\n}\n\n.ontario-expander--active ~ .ontario-accordion__content,\n.ontario-expander--active .ontario-accordion__button-icon--close {\n\tdisplay: block;\n}\n\n.ontario-accordions__container {\n\t.ontario-h1,\n\t.ontario-h2,\n\t.ontario-h3,\n\t.ontario-h4,\n\t.ontario-h5,\n\tp,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6 {\n\t\tmargin: spacing.$spacing-0;\n\t}\n}\n","import { Component, Prop, Element, Event, EventEmitter, State, h, Listen, Watch } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Accordion, AccordionChangeDetail, AccordionChangeDetailReasons } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\n\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-accordion',\n\tstyleUrl: 'ontario-accordion.scss',\n\tshadow: true,\n})\nexport class OntarioAccordion {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The name of the accordion component.\n\t *\n\t * This is not optional.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Custom Expand/Collapse button text.\n\t *\n\t * @example\n\t *  <ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\texpand-collapse-button='{\n\t *\t\t\t\"expandAllSectionsLabel\": \"Expand All\",\n\t *\t\t\t\"collapseAllSectionsLabel\": \"Collapse All\"\n\t *\t\t}'\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": [\"Item 1\", \"Item 2\", \"Item 3\"]},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"content\": [\"Item A\", \"Item B\", \"Item C\"]}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() expandCollapseButton?: string | ExpandCollapseButtonDetails;\n\n\t/**\n\t * Used to include individual accordion data for the accordion component.\n\t * Accepts an array of Accordion (@see Accordion) items or a JSON string of that array.\n\t *\n\t * The `content` is rendered either as plain text or HTML depending on `accordionContentType`.\n\t *\n\t * @see Accordion\n\t * @example\n\t * \t<ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": \"This is a string\", \"isOpen\": true},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"accordionContentType\": \"html\", \"content\": \"<ul><li>List A</li><li>List B</li><li>List C</li></ul>\"}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() accordionData: string | Accordion[];\n\n\t/**\n\t * The language of the component.\n\t * 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.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Emits when open indexes change\n\t */\n\t@Event() accordionChange: EventEmitter<AccordionChangeDetail>;\n\n\t/**\n\t * Store the translation dictionary for use within the component.\n\t */\n\t@State() translations: any = translations;\n\n\t/**\n\t * The label for the expand/collapse button.\n\t * This is internal and udpdated dynamically.\n\t */\n\t@State() private expandCollapseLabel: 'expand' | 'collapse';\n\n\t/**\n\t * Internal state of the expand/collapse label information.\n\t */\n\t@State() private internalExpandCollapseLabelDetails: ExpandCollapseButtonDetails;\n\n\t/**\n\t * Internal state containing the parsed Accordion Data\n\t */\n\t@State() private internalAccordionData: Accordion[] = [];\n\n\t/**\n\t * This state tracks which accordions are open.\n\t */\n\t@State() private openAccordionIndexes: number[] = [];\n\n\t/** Unique prefix for a11y ids */\n\t@State() private uidPrefix: string = `ontario-accordion-${uuid()}`;\n\n\t/**\n\t * 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.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Parse Accordion data, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('accordionData')\n\tprivate parseAccordionData() {\n\t\ttry {\n\t\t\tconst parsed = Array.isArray(this.accordionData) ? this.accordionData : JSON.parse(this.accordionData || '[]');\n\n\t\t\t// Normalize and type-guard\n\t\t\tthis.internalAccordionData = parsed.length\n\t\t\t\t? parsed.map((prop: Accordion) => ({\n\t\t\t\t\t\tlabel: prop?.label ?? '',\n\t\t\t\t\t\tcontent: prop?.content ?? '',\n\t\t\t\t\t\taccordionContentType: (prop?.accordionContentType ?? 'string') as 'string' | 'html',\n\t\t\t\t\t\tisOpen: Boolean(prop?.isOpen),\n\t\t\t\t\t\tariaLabelText: prop?.ariaLabelText,\n\t\t\t\t\t}))\n\t\t\t\t: [];\n\n\t\t\t// Seed the openAccordionIndexes based on the isOpen properties\n\t\t\tthis.seedOpenIndexesFromItems();\n\n\t\t\t// Initialize the label based on the initial accordion state\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t} catch {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' accordionData ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t.addRegularText('could not be parsed. Please ensure it is valid JSON.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.internalAccordionData = [];\n\t\t\tthis.openAccordionIndexes = [];\n\t\t\tthis.updateLabel();\n\n\t\t\tthis.emitAccordionChange({\n\t\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\t\treason: AccordionChangeDetailReasons.Init,\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Parse Expand/Collapse Button Details. This handles both object and JSON string formats\n\t * passed from HTML, with safe error handling for invalid JSON.\n\t */\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tif (typeof this.expandCollapseButton === 'string') {\n\t\t\t\ttry {\n\t\t\t\t\tthis.internalExpandCollapseLabelDetails = JSON.parse(this.expandCollapseButton);\n\t\t\t\t} catch {\n\t\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\t\tmessage\n\t\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t\t.addMonospaceText(' expandCollapseButton ')\n\t\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t\t.addMonospaceText(' <ontario-accordion> ')\n\t\t\t\t\t\t.addRegularText('could not be parsed from a string. Please ensure it is valid JSON.')\n\t\t\t\t\t\t.printMessage();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.internalExpandCollapseLabelDetails = this.expandCollapseButton;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Emits a typed change event whenever the open/closed state changes.\n\t *\n\t * Consumers can listen for `accordionChange` to:\n\t *  - Read the full set of `openIndexes`\n\t *  - Know which index changed on single-item toggles (`changedIndex`)\n\t *  - Detect bulk actions like expand/collapse all (`isBulk`)\n\t *  - Understand why the change happened (`reason`)\n\t *\n\t * Always call this AFTER updating `openAccordionIndexes` and `expandCollapseLabel`.\n\t */\n\tprivate emitAccordionChange(detail: AccordionChangeDetail) {\n\t\tthis.accordionChange.emit(detail);\n\t}\n\n\t// Seed the openAccordionIndexes based on the isOpen properties of the accordion items\n\tprivate seedOpenIndexesFromItems() {\n\t\tthis.openAccordionIndexes = this.internalAccordionData\n\t\t\t.map((accordionItem, index) => (accordionItem?.isOpen ? index : -1))\n\t\t\t.filter((accordionIndex) => accordionIndex !== -1);\n\t}\n\n\t// Toggle the accordion state when it's clicked\n\tprivate toggleAccordion(index: number) {\n\t\tif (this.openAccordionIndexes.includes(index)) {\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tchangedIndex: index,\n\t\t\treason: AccordionChangeDetailReasons.ToggleOne,\n\t\t});\n\t}\n\n\t/**\n\t * Toggle all accordions open/close\n\t */\n\tprivate toggleAll() {\n\t\tif (this.openAccordionIndexes.length === this.internalAccordionData.length) {\n\t\t\t// All accordions are open, close all\n\t\t\tthis.openAccordionIndexes = [];\n\t\t} else {\n\t\t\t// At least one accordion is closed, open all\n\t\t\tthis.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);\n\t\t}\n\n\t\tthis.updateLabel();\n\n\t\tthis.emitAccordionChange({\n\t\t\topenIndexes: this.openAccordionIndexes,\n\t\t\tisBulk: true,\n\t\t\treason: AccordionChangeDetailReasons.ToggleAll,\n\t\t});\n\t}\n\n\t/**\n\t * Update the label based on the current accordion state\n\t */\n\tprivate updateLabel() {\n\t\tconst allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));\n\n\t\tif (allOpen) {\n\t\t\t// All accordions are open, set label to \"Collapse all\"\n\t\t\tthis.expandCollapseLabel = 'collapse';\n\t\t} else {\n\t\t\t// At least one accordion is closed, set label to \"Expand all\"\n\t\t\tthis.expandCollapseLabel = 'expand';\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseAccordionData();\n\t\tthis.parseExpandCollapseButtonDetails();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h2>{this.name}</h2>\n\t\t\t\t<div class=\"ontario-accordions__container\">\n\t\t\t\t\t<div class=\"ontario-accordion__controls\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"ontario-accordion__button--expand-all\"\n\t\t\t\t\t\t\tonClick={() => this.toggleAll()}\n\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false'}\n\t\t\t\t\t\t\taria-label={this.internalExpandCollapseLabelDetails?.ariaLabelText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ontario-accordion--expand-open-all\">\n\t\t\t\t\t\t\t\t{this.expandCollapseLabel === 'expand' ? (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.expand[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.collapse[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.internalAccordionData?.map((accordion, index) => {\n\t\t\t\t\t\tconst buttonId = `${this.uidPrefix}__button--${index}`;\n\t\t\t\t\t\tconst sectionId = `${this.uidPrefix}__section--${index}`;\n\t\t\t\t\t\tconst isOpen = this.openAccordionIndexes.includes(index);\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div class={`ontario-accordion ${isOpen ? 'open' : ''}`} key={`accordion-${index}`}>\n\t\t\t\t\t\t\t\t<h3 class={`ontario-accordion__heading ${isOpen ? 'ontario-expander--active' : ''}`}>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tid={buttonId}\n\t\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\t\taria-expanded={isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\t\taria-controls={sectionId}\n\t\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--close\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--open\">\n\t\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"blue\" aria-hidden=\"true\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\t\tid={sectionId}\n\t\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\t\tisOpen ? 'ontario-expander__content--opened' : 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\taria-labelledby={buttonId}\n\t\t\t\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\t\t\t\taria-hidden={isOpen ? 'false' : 'true'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\t\t\t\t\t\t\t\t\t\t<div innerHTML={accordion.content}></div> // Render HTML content\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-aside.d.ts

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

package/components/ontario-aside.js

@@ -0,0 +1,171 @@
+import { p as proxyCustomElement, H } from './index.js';
+import {
+	i as isValidHeadingLevel,
+	H as HeadingContentTypes,
+	a as isValidHighlightColour,
+	g as generateCalloutAside,
+} from './p-dXtLd1df.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+
+const ontarioAsideCss =
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}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){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:rgb(25.5, 25.5, 25.5);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 rgb(25.5, 25.5, 25.5)}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-aside{border-left:0.25rem solid #367A76;padding:1.5rem;margin:2rem 0 2.5rem 2rem}.ontario-aside *{max-width:48rem}.ontario-aside *:last-child,.ontario-aside *:last-of-type{margin-bottom:0.5rem}@media screen and (max-width: 40em){.ontario-aside .ontario-aside{margin:2rem 0 2.5rem 1rem}}.ontario-aside__title{margin:0 0 1rem}.ontario-border-highlight--teal{border-color:#367A76 !important}.ontario-border-highlight--gold{border-color:#86743D !important}.ontario-border-highlight--yellow{border-color:#8A600D !important}.ontario-border-highlight--taupe{border-color:#7B725C !important}.ontario-border-highlight--green{border-color:#2B8737 !important}.ontario-border-highlight--lime{border-color:#5F8129 !important}.ontario-border-highlight--sky{border-color:#1080A6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278F !important}';
+
+const OntarioAside$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioAside extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The type of the heading content. If no prop is passed, it will default to string.
+			 */
+			this.headingContentType = 'string';
+			/**
+			 * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.
+			 */
+			this.highlightColour = 'teal';
+		}
+		/**
+		 * Watch for changes to the `headingType` prop.
+		 *
+		 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
+		 */
+		validateHeadingType() {
+			if (!!this.headingType) {
+				if (isValidHeadingLevel(this.headingType)) return this.headingType;
+				const message = new ConsoleMessageClass();
+				return message
+					.addDesignSystemTag()
+					.addMonospaceText(` headingType ${this.headingType} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-aside> ')
+					.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+					.printMessage();
+			}
+		}
+		/**
+		 * Watch for changes in the `headingContentType` prop for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).
+		 * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.
+		 */
+		validateHeadingContentType() {
+			const isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);
+			if (isValid) {
+				return this.headingContentType;
+			} else {
+				return this.warnDefaultType();
+			}
+		}
+		/**
+		 * Watch for changes to the `highlightColour` prop.
+		 *
+		 * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.
+		 */
+		validateHighlightColour() {
+			if (this.highlightColour) {
+				if (isValidHighlightColour(this.highlightColour)) return this.highlightColour;
+				else {
+					const message = new ConsoleMessageClass();
+					message
+						.addDesignSystemTag()
+						.addMonospaceText(` highlightColour ${this.highlightColour} `)
+						.addRegularText('for')
+						.addMonospaceText(' <ontario-aside> ')
+						.addRegularText(
+							'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',
+						)
+						.printMessage();
+				}
+			}
+			// if no highlight colour is passed, return 'teal'
+			return 'teal';
+		}
+		/**
+		 * Print the invalid `type` warning message.
+		 * @returns default type ('string')
+		 */
+		warnDefaultType() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' headingContentType ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-aside> ')
+				.addRegularText('was set to an invalid type; only')
+				.addMonospaceText(' string or html ')
+				.addRegularText('are supported. The default type')
+				.addMonospaceText(' string ')
+				.addRegularText('is assumed.')
+				.printMessage();
+			return (this.headingContentType = 'string');
+		}
+		componentWillLoad() {
+			this.validateHighlightColour();
+			this.validateHeadingType();
+			this.validateHeadingContentType();
+		}
+		render() {
+			return generateCalloutAside(
+				'aside',
+				this.headingContentType,
+				this.headingType,
+				this.headingContent,
+				this.content,
+				this.highlightColour,
+			);
+		}
+		static get watchers() {
+			return {
+				headingType: ['validateHeadingType'],
+				headingContentType: ['validateHeadingContentType'],
+				highlightColour: ['validateHighlightColour'],
+			};
+		}
+		static get style() {
+			return ontarioAsideCss;
+		}
+	},
+	[
+		257,
+		'ontario-aside',
+		{
+			headingType: [1025, 'heading-type'],
+			headingContentType: [1025, 'heading-content-type'],
+			headingContent: [1, 'heading-content'],
+			content: [1],
+			highlightColour: [1025, 'highlight-colour'],
+		},
+		undefined,
+		{
+			headingType: ['validateHeadingType'],
+			headingContentType: ['validateHeadingContentType'],
+			highlightColour: ['validateHighlightColour'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-aside'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-aside':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioAside$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioAside = OntarioAside$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioAside, defineCustomElement };
+//# sourceMappingURL=ontario-aside.js.map
+
+//# sourceMappingURL=ontario-aside.js.map