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

package/dist/components/ontario-page-alert.js

@@ -1,23 +1,52 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './ontario-icon-alert-error2.js';
-import { d as defineCustomElement$4 } from './ontario-icon-alert-information2.js';
-import { d as defineCustomElement$3 } from './ontario-icon-alert-success2.js';
-import { d as defineCustomElement$2 } from './ontario-icon-alert-warning2.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { d as defineCustomElement$5 } from './p-c13fee12.js';
+import { d as defineCustomElement$4 } from './p-0c95bab2.js';
+import { d as defineCustomElement$3 } from './p-94efeef1.js';
+import { d as defineCustomElement$2 } from './p-09bf4083.js';
 
 const ontarioPageAlertCss =
 	'@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", "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:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-alert{border-width:0 0 0 0.25rem;border-style:solid;padding:1.5rem;margin:2rem 0 2.5rem 0}.ontario-alert__header{display:-webkit-box;display:-ms-flexbox;display:flex}.ontario-alert__header-icon{display:inline-block;vertical-align:top;margin-right:0.95rem}.ontario-alert__header-title{margin-bottom:0.75rem;padding-top:0.125rem}.ontario-alert__body{margin-left:3.25rem;max-width:48rem}@media screen and (max-width: 40em){.ontario-alert__body{margin-left:0}}.ontario-alert__body p{margin-top:0}.ontario-alert__body p:last-of-type{margin-bottom:0.5rem}.ontario-alert__body p:last-of-type+ul{margin-top:1rem}.ontario-alert__body ul:last-of-type{margin-bottom:0.5rem}.ontario-alert--error ul{margin-left:1.25rem}.ontario-alert--error ul:last-of-type{margin-bottom:0.5rem}.ontario-alert--informational{border-color:#1080A6;background-color:#E2F0F4}.ontario-alert--warning{border-color:#FFD440;background-color:#FEF6DC}.ontario-alert--success{border-color:#118847;background-color:#E5f0E9}.ontario-alert--error{border-color:#CD0000;background-color:#FCEFF0}.ontario-alert--error a{color:#CD0000}.ontario-alert--error a:hover,.ontario-alert--error a:focus{color:#6b0000}.ontario-alert--error a:active{color:#280000}';
 const OntarioPageAlertStyle0 = ontarioPageAlertCss;
 
 const OntarioPageAlert$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioPageAlert extends HTMLElement {
+	class OntarioPageAlert extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.type = 'informational';
-			this.heading = undefined;
-			this.content = undefined;
 		}
+		/**
+		 * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.
+		 *
+		 * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.
+		 *
+		 * @example
+		 * <ontario-page-alert type="error">
+		 * </ontario-page-alert>
+		 */
+		type = 'informational';
+		/**
+		 * The heading for the page alert.
+		 *
+		 * @example
+		 * <ontario-page-alert heading="Licence plates">
+		 * </ontario-page-alert>
+		 */
+		heading;
+		/**
+		 * The main content for the page alert. This can be rendered as either string or HTML content.
+		 *
+		 * @example
+		 * <ontario-page-alert content="Please look out for an email confirmation with your receipt and order number.">
+		 * </ontario-page-alert>
+		 *
+		 * or
+		 *
+		 * <ontario-page-alert>
+		 *  <p>This is a sample page alert component using slots. <a href="#">Learn more</a>.</p>
+		 * </ontario-page-alert>
+		 */
+		content;
 		/**
 		 * @returns the classes of the page alert container based on the alert `type`.
 		 */
@@ -28,13 +57,13 @@ const OntarioPageAlert$1 = /*@__PURE__*/ proxyCustomElement(
 			const iconProps = { 'icon-width': 36 };
 			switch (this.type) {
 				case 'informational':
-					return h('ontario-icon-alert-information', Object.assign({}, iconProps));
+					return h('ontario-icon-alert-information', { ...iconProps });
 				case 'success':
-					return h('ontario-icon-alert-success', Object.assign({}, iconProps));
+					return h('ontario-icon-alert-success', { ...iconProps });
 				case 'warning':
-					return h('ontario-icon-alert-warning', Object.assign({}, iconProps));
+					return h('ontario-icon-alert-warning', { ...iconProps });
 				case 'error':
-					return h('ontario-icon-alert-error', Object.assign({}, iconProps));
+					return h('ontario-icon-alert-error', { ...iconProps });
 			}
 		}
 		renderContent() {
@@ -47,24 +76,24 @@ const OntarioPageAlert$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'div',
-				{ key: 'b7be1540605a28b6ec84a8ff7b4fed1b64419d60', class: this.getClass() },
+				{ key: '177966a73a196ca3424eecdf1bea139918e2207f', class: this.getClass() },
 				h(
 					'div',
-					{ key: 'b87f534be5886b7d1e4c26a9fb417967e20d0c33', class: 'ontario-alert__header' },
+					{ key: '52cf48c4fd84a7bd17233acbfaffefc2f3ceb2f2', class: 'ontario-alert__header' },
 					h(
 						'div',
-						{ key: 'a274877a27a1da493112910dad58473f37f2be92', class: 'ontario-alert__header-icon' },
+						{ key: 'e7d36d8f358c8dd362512377346bece42fcd688d', class: 'ontario-alert__header-icon' },
 						this.renderIcon(),
 					),
 					h(
 						'h2',
-						{ key: 'ce02cf4b32e61f1ef07adefe935a5bdd90ca74ce', class: 'ontario-alert__header-title ontario-h4' },
+						{ key: '32d9d21ad979b969f157f3d0bc9e15499c23a54c', class: 'ontario-alert__header-title ontario-h4' },
 						this.heading,
 					),
 				),
 				h(
 					'div',
-					{ key: 'c90e23ac314300fd2066cd2292088a8e8d954c21', class: 'ontario-alert__body' },
+					{ key: '6a4a21d2ed84fe9a2eae2b26c239871fb8514612', class: 'ontario-alert__body' },
 					this.renderContent(),
 				),
 			);

package/dist/components/ontario-page-alert.js.map

@@ -1 +1 @@
-{"file":"ontario-page-alert.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,qoKAAqoK,CAAC;AAClqK,+BAAe,mBAAmB;;MCOrBA,kBAAgB;;;;;oBAUE,eAAe;;;;;;;IA6BrC,QAAQ;QACf,OAAO,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC;KACnD;IAED,UAAU;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAEvC,QAAQ,IAAI,CAAC,IAAI;YAChB,KAAK,eAAe;gBACnB,OAAO,sDAAoC,SAAS,EAAI,CAAC;YAE1D,KAAK,SAAS;gBACb,OAAO,kDAAgC,SAAS,EAAI,CAAC;YAEtD,KAAK,SAAS;gBACb,OAAO,kDAAgC,SAAS,EAAI,CAAC;YAEtD,KAAK,OAAO;gBACX,OAAO,gDAA8B,SAAS,EAAI,CAAC;SACpD;KACD;IAED,aAAa;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC7B,OAAO,aAAI,IAAI,CAAK,CAAC;SACrB;QAED,OAAO,eAAQ,CAAC;KAChB;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1B,4DAAK,KAAK,EAAC,uBAAuB,IACjC,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,UAAU,EAAE,CAAO,EACjE,2DAAI,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,OAAO,CAAM,CACjE,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioPageAlert"],"sources":["src/components/ontario-page-alert/ontario-page-alert.scss?tag=ontario-page-alert&encapsulation=shadow","src/components/ontario-page-alert/ontario-page-alert.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n\n$ontario-alert-link-focus: #6b0000;\n$ontario-alert-link-active: #280000;\n\n.ontario-alert {\n\tborder-width: 0 0 0 globalFunctions.px-to-rem(4);\n\tborder-style: solid;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n}\n\n.ontario-alert__header {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}\n\n.ontario-alert__header-icon {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tmargin-right: 0.95rem;\n}\n\n.ontario-alert__header-title {\n\tmargin-bottom: spacing.$spacing-3;\n\tpadding-top: globalFunctions.px-to-rem(2);\n}\n\n.ontario-alert__body {\n\tmargin-left: 3.25rem;\n\tmax-width: globalVariables.$standard-width;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-0;\n\t}\n}\n\n.ontario-alert__body p {\n\tmargin-top: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-alert__body p:last-of-type + ul {\n\tmargin-top: spacing.$spacing-4;\n}\n\n.ontario-alert__body ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n.ontario-alert--error ul {\n\tmargin-left: 1.25rem;\n}\n\n.ontario-alert--error ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n// ---------------------\n//    Alert variations\n// ---------------------\n// informational alert\n.ontario-alert--informational {\n\tborder-color: colours.$ontario-colour-information;\n\tbackground-color: colours.$ontario-colour-information-light;\n}\n\n// warning alert\n.ontario-alert--warning {\n\tborder-color: colours.$ontario-colour-warning;\n\tbackground-color: colours.$ontario-colour-warning-light;\n}\n\n// success alert\n.ontario-alert--success {\n\tborder-color: colours.$ontario-colour-success;\n\tbackground-color: colours.$ontario-colour-success-light;\n}\n\n// error alert\n.ontario-alert--error {\n\tborder-color: colours.$ontario-colour-alert;\n\tbackground-color: colours.$ontario-colour-alert-light;\n}\n\n.ontario-alert--error a {\n\tcolor: colours.$ontario-colour-alert;\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: $ontario-alert-link-focus;\n\t}\n\n\t&:active {\n\t\tcolor: $ontario-alert-link-active;\n\t}\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/**\n\t * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t *\n\t * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t *\n\t * @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/**\n\t * The heading for the page alert.\n\t *\n\t * @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() heading: string;\n\n\t/**\n\t * The main content for the page alert. This can be rendered as either string or HTML content.\n\t *\n\t * @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-page-alert>\n\t *  <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\">{this.renderIcon()}</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-page-alert.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,qoKAAqoK,CAAC;AAClqK,+BAAe,mBAAmB;;MCOrBA,kBAAgB;;;;;;;;;;;;;;;IAUpB,IAAI,GAAkB,eAAe,CAAC;;;;;;;;IAStC,OAAO,CAAS;;;;;;;;;;;;;;IAehB,OAAO,CAAS;;;;IAKhB,QAAQ;QACf,OAAO,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC;KACnD;IAED,UAAU;QACT,MAAM,SAAS,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;QAEvC,QAAQ,IAAI,CAAC,IAAI;YAChB,KAAK,eAAe;gBACnB,OAAO,yCAAoC,SAAS,GAAI,CAAC;YAE1D,KAAK,SAAS;gBACb,OAAO,qCAAgC,SAAS,GAAI,CAAC;YAEtD,KAAK,SAAS;gBACb,OAAO,qCAAgC,SAAS,GAAI,CAAC;YAEtD,KAAK,OAAO;gBACX,OAAO,mCAA8B,SAAS,GAAI,CAAC;SACpD;KACD;IAED,aAAa;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC;QAE1B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC7B,OAAO,aAAI,IAAI,CAAK,CAAC;SACrB;QAED,OAAO,eAAQ,CAAC;KAChB;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAC1B,4DAAK,KAAK,EAAC,uBAAuB,IACjC,4DAAK,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,UAAU,EAAE,CAAO,EACjE,2DAAI,KAAK,EAAC,wCAAwC,IAAE,IAAI,CAAC,OAAO,CAAM,CACjE,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,aAAa,EAAE,CAAO,CACxD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioPageAlert"],"sources":["src/components/ontario-page-alert/ontario-page-alert.scss?tag=ontario-page-alert&encapsulation=shadow","src/components/ontario-page-alert/ontario-page-alert.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n\n$ontario-alert-link-focus: #6b0000;\n$ontario-alert-link-active: #280000;\n\n.ontario-alert {\n\tborder-width: 0 0 0 globalFunctions.px-to-rem(4);\n\tborder-style: solid;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n}\n\n.ontario-alert__header {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}\n\n.ontario-alert__header-icon {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tmargin-right: 0.95rem;\n}\n\n.ontario-alert__header-title {\n\tmargin-bottom: spacing.$spacing-3;\n\tpadding-top: globalFunctions.px-to-rem(2);\n}\n\n.ontario-alert__body {\n\tmargin-left: 3.25rem;\n\tmax-width: globalVariables.$standard-width;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-0;\n\t}\n}\n\n.ontario-alert__body p {\n\tmargin-top: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-alert__body p:last-of-type + ul {\n\tmargin-top: spacing.$spacing-4;\n}\n\n.ontario-alert__body ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n.ontario-alert--error ul {\n\tmargin-left: 1.25rem;\n}\n\n.ontario-alert--error ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n// ---------------------\n//    Alert variations\n// ---------------------\n// informational alert\n.ontario-alert--informational {\n\tborder-color: colours.$ontario-colour-information;\n\tbackground-color: colours.$ontario-colour-information-light;\n}\n\n// warning alert\n.ontario-alert--warning {\n\tborder-color: colours.$ontario-colour-warning;\n\tbackground-color: colours.$ontario-colour-warning-light;\n}\n\n// success alert\n.ontario-alert--success {\n\tborder-color: colours.$ontario-colour-success;\n\tbackground-color: colours.$ontario-colour-success-light;\n}\n\n// error alert\n.ontario-alert--error {\n\tborder-color: colours.$ontario-colour-alert;\n\tbackground-color: colours.$ontario-colour-alert-light;\n}\n\n.ontario-alert--error a {\n\tcolor: colours.$ontario-colour-alert;\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: $ontario-alert-link-focus;\n\t}\n\n\t&:active {\n\t\tcolor: $ontario-alert-link-active;\n\t}\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/**\n\t * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t *\n\t * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t *\n\t * @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/**\n\t * The heading for the page alert.\n\t *\n\t * @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() heading: string;\n\n\t/**\n\t * The main content for the page alert. This can be rendered as either string or HTML content.\n\t *\n\t * @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-page-alert>\n\t *  <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\">{this.renderIcon()}</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-radio-buttons.js

@@ -1,23 +1,23 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as Input } from './input.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
-import { v as validateLanguage, b as validatePropExists, c as validateObjectExists } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
-import { c as constructHintTextObject } from './hints.js';
-import { t as translations } from './global.i18n.js';
-import { E as ErrorMessage } from './error-message.js';
-import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
-import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
-import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
-import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
-import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-846438ed.js';
+import { I as Input } from './p-7caacdde.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-3fa830a3.js';
+import { v as validateLanguage, b as validatePropExists, c as validateObjectExists } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { c as constructHintTextObject } from './p-e77d78ce.js';
+import { t as translations } from './p-a5331e15.js';
+import { E as ErrorMessage } from './p-8874216e.js';
+import { d as defineCustomElement$6 } from './p-9c61c9bc.js';
+import { d as defineCustomElement$5 } from './p-226df20b.js';
+import { d as defineCustomElement$4 } from './p-c13fee12.js';
+import { d as defineCustomElement$3 } from './p-1dc1dba8.js';
+import { d as defineCustomElement$2 } from './p-77545837.js';
 
 const ontarioRadioButtonsCss =
-	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}.ontario-radios__input:focus+.ontario-radios__label:before,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}.ontario-radios__item{position:relative;display:block;margin:0 0 1rem;padding:0 2rem 0}.ontario-radios__item:last-of-type{margin-bottom:0}.ontario-radios__input{cursor:pointer;margin:0;position:absolute;opacity:0;top:-2px;left:-2px;width:36px;height:36px;z-index:0}@media screen and (max-width: 40em){.ontario-radios__input{width:40px;height:40px;top:-1.5px;left:-1.5px}}.ontario-radios__label{cursor:pointer;color:#1a1a1a;display:inline-block;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5;margin:0.2rem 0;max-width:38.75em;padding:0 0.75rem;touch-action:manipulation;white-space:normal;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-radios__label{margin:0.3rem 0;padding:0 1rem}}.ontario-radios__label:before{content:"";border:2px solid #1a1a1a;border-radius:50%;box-sizing:border-box;position:absolute;top:0;left:0;width:32px;height:32px;transition:border 0.1s ease-in-out}@media screen and (max-width: 40em){.ontario-radios__label:before{width:36px;height:36px}}.ontario-radios__label:after{content:"";border-radius:50%;border:10px solid #1a1a1a;position:absolute;top:0;left:0;transform:translate(6px, 6px);opacity:0}@media screen and (max-width: 40em){.ontario-radios__label:after{border:12px solid #1a1a1a}}.ontario-radios__input:focus+.ontario-radios__label:before{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:#009ADB}.ontario-radios__input:checked+.ontario-radios__label:after{opacity:1}.ontario-radios__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-radios__hint-expander{margin-top:1rem}}';
+	'@charset "UTF-8";.ontario-radios__input:focus+.ontario-radios__label:before,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}.ontario-radios__item{position:relative;display:block;margin:0 0 1rem;padding:0 2rem 0}.ontario-radios__item:last-of-type{margin-bottom:0}.ontario-radios__input{cursor:pointer;margin:0;position:absolute;opacity:0;top:-2px;left:-2px;width:36px;height:36px;z-index:0}@media screen and (max-width: 40em){.ontario-radios__input{width:40px;height:40px;top:-1.5px;left:-1.5px}}.ontario-radios__label{cursor:pointer;color:#1a1a1a;display:inline-block;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:700;line-height:1.5;margin:0.2rem 0;max-width:38.75em;padding:0 0.75rem;touch-action:manipulation;white-space:normal;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-radios__label{margin:0.3rem 0;padding:0 1rem}}.ontario-radios__label:before{content:"";border:2px solid #1a1a1a;border-radius:50%;box-sizing:border-box;position:absolute;top:0;left:0;width:32px;height:32px;transition:border 0.1s ease-in-out}@media screen and (max-width: 40em){.ontario-radios__label:before{width:36px;height:36px}}.ontario-radios__label:after{content:"";border-radius:50%;border:10px solid #1a1a1a;position:absolute;top:0;left:0;transform:translate(6px, 6px);opacity:0}@media screen and (max-width: 40em){.ontario-radios__label:after{border:12px solid #1a1a1a}}.ontario-radios__input:focus+.ontario-radios__label:before{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:#009ADB}.ontario-radios__input:checked+.ontario-radios__label:after{opacity:1}.ontario-radios__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-radios__hint-expander{margin-top:1rem}}';
 const OntarioRadioButtonsStyle0 = ontarioRadioButtonsCss;
 
 const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioRadioButtons extends HTMLElement {
+	class OntarioRadioButtons extends H {
 		constructor() {
 			super();
 			this.__registerHost();
@@ -27,23 +27,169 @@ const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
 			this.radioOnFocus = createEvent(this, 'radioOnFocus', 7);
 			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
 			this.internals = this.attachInternals();
-			this.caption = undefined;
-			this.language = undefined;
-			this.name = undefined;
-			this.hintText = undefined;
-			this.hintExpander = undefined;
-			this.required = false;
-			this.options = undefined;
-			this.errorMessage = undefined;
-			this.customOnChange = undefined;
-			this.customOnBlur = undefined;
-			this.customOnFocus = undefined;
-			this.hintTextId = undefined;
-			this.internalHintText = undefined;
-			this.internalHintExpander = undefined;
-			this.internalOptions = undefined;
-			this.captionState = undefined;
 		}
+		get element() {
+			return this;
+		}
+		internals;
+		hintTextRef;
+		/**
+		 * The text to display for the radio button legend.
+		 *
+		 * @example
+		 * <ontario-radio-buttons
+		 *   caption='{
+		 *     "captionText": "Radio legend",
+		 *     "captionType": "heading",
+		 *    }'
+		 *   required="true"
+		 *   ...>
+		 * </ontario-radio-buttons>
+		 */
+		caption;
+		/**
+		 * 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 no language is passed, it will default to English.
+		 */
+		language;
+		/**
+		 * The name assigned to the radio button. The name value is used to reference form data after a form is submitted.
+		 */
+		name;
+		/**
+		 * Used to include the ontario-hint-text component for radio button group.
+		 * This is optional.
+		 */
+		hintText;
+		/**
+		 * Used to include the ontario-hint-expander component for the radio button group.
+		 * This is passed in as an object with key-value pairs.
+		 *
+		 * This is optional.
+		 *
+		 * @example
+		 * <ontario-radio-buttons
+		 *   caption='{
+		 *     "captionText": "Radio legend",
+		 *     "captionType": "heading",
+		 *   }'
+		 * 	 name="radios"
+		 *   options='[
+		 * 	   {
+		 *        "value": "radio-option-1",
+		 * 		  "elementId": "radio-1",
+		 *        "label": "Radio option 1 label",
+		 *        "hintExpander": {
+		 *			  "hint": "Hint expander for radio option 1",
+		 * 		      "content": "Example hint expander content for radio option 1."
+		 *		  }
+		 *     }
+		 *   ]'
+		 *   hint-expander='{
+		 *     "hint": "Hint expander for the radio button group",
+		 *     "content": "Example hint expander content for the radio button group."
+		 *   }'
+		 *   required="true"
+		 * >
+		 * </ontario-radio-buttons>
+		 */
+		hintExpander;
+		/**
+		 * This is used to determine whether the radio button is required or not.
+		 * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.
+		 * If no prop is set, it will default to false (optional).
+		 */
+		required = false;
+		/**
+		 * The options for the radio button group.
+		 *
+		 * Each property will be passed in through an object in the options array.
+		 * This can either be passed in as an object directly (if using react), or as a string in HTML.
+		 * If there are multiple radio buttons in a group, each radio button will be displayed as an option.
+		 *
+		 * In the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group.
+		 *
+		 * @example
+		 * <ontario-radio-buttons
+		 *   caption='{
+		 *     "captionText": "Radio legend",
+		 *     "captionType": "heading",
+		 *   }'
+		 *   name="radios"
+		 *   hint-text="Hint text for the radio button group."
+		 *   options='[
+		 *     {
+		 *        "value": "radio-option-1",
+		 * 		  "elementId": "radio-1",
+		 *        "label": "Radio option 1 label"
+		 *     },
+		 *     {
+		 *        "value": "radio-option-2",
+		 * 		  "elementId": "radio-2",
+		 *        "label": "Radio option 2 label",
+		 *        "hintExpander": {
+		 *			  "hint": "Hint expander for radio option 2",
+		 * 		      "content": "Example hint expander content for radio option 2."
+		 *		  }
+		 *      }
+		 *   ]'
+		 *   required="true"
+		 * >
+		 * </ontario-radio-buttons>
+		 */
+		options;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage;
+		/**
+		 * Used to add a custom function to the radio input onChange event.
+		 */
+		customOnChange;
+		/**
+		 * Used to add a custom function to the radio input onBlur event.
+		 */
+		customOnBlur;
+		/**
+		 * Used to add a custom function to the radio input onFocus event.
+		 */
+		customOnFocus;
+		/**
+		 * Used for the `aria-describedby` value of the radio button group. This will match with the id of the hint text.
+		 */
+		hintTextId;
+		/**
+		 * The hint text options are re-assigned to the internalHintText array.
+		 */
+		internalHintText;
+		/**
+		 * The hint expander options are re-assigned to the internalHintExpander array.
+		 */
+		internalHintExpander;
+		/**
+		 * The options are re-assigned to the internalOptions array.
+		 */
+		internalOptions;
+		/**
+		 * Instantiate an InputCaption object for internal logic use
+		 */
+		captionState;
+		/**
+		 * Emitted when a keyboard input or mouse event occurs when a radio option has been changed.
+		 */
+		radioOnChange;
+		/**
+		 * Emitted when a keyboard input event occurs when a radio option has lost focus.
+		 */
+		radioOnBlur;
+		/**
+		 * Emitted when a keyboard input event occurs when a radio option has gained focus.
+		 */
+		radioOnFocus;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		inputErrorOccurred;
 		/**
 		 * 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.
 		 */
@@ -151,15 +297,13 @@ const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
 			this.updateCaptionState(this.caption);
 		}
 		broadcastInputErrorOccurredEvent() {
-			var _a;
 			// Emit event to notify anyone who wants to listen for errors occurring
-			this.inputErrorOccurred.emit({ errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '' });
+			this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
 		}
 		/**
 		 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
 		 */
 		handleEvent(event, eventType) {
-			var _a, _b;
 			const input = event.target;
 			// Reset all internalOptions checked states
 			const changedOption = this.internalOptions
@@ -167,22 +311,18 @@ const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
 					x.checked = false;
 					return x;
 				})
-				.find((x) => x.value === (input === null || input === void 0 ? void 0 : input.value));
+				.find((x) => x.value === input?.value);
 			// Set the new checked state for the selected value
-			if (changedOption)
-				changedOption.checked = !(changedOption === null || changedOption === void 0 ? void 0 : changedOption.checked);
+			if (changedOption) changedOption.checked = !changedOption?.checked;
 			// Set the value within the form
-			(_b = (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) === null || _b === void 0
-				? void 0
-				: _b.call(
-						_a,
-						this.internalOptions
-							.filter((x) => !!x.checked)
-							.reduce((formData, currentValue) => {
-								formData.append(this.name, currentValue.value);
-								return formData;
-							}, new FormData()),
-				  );
+			this.internals?.setFormValue?.(
+				this.internalOptions
+					.filter((x) => !!x.checked)
+					.reduce((formData, currentValue) => {
+						formData.append(this.name, currentValue.value);
+						return formData;
+					}, new FormData()),
+			);
 			handleInputEvent(
 				event,
 				eventType,
@@ -203,8 +343,7 @@ const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
 		 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.
 		 */
 		async componentDidLoad() {
-			var _a;
-			this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+			this.hintTextId = await this.hintTextRef?.getHintTextId();
 		}
 		componentWillLoad() {
 			this.updateCaptionState(this.caption);
@@ -216,79 +355,78 @@ const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
 			this.language = validateLanguage(this.language);
 		}
 		render() {
-			var _a;
 			const error = !!this.errorMessage;
 			return h(
 				'div',
 				{
-					key: '786a43f11d02ef7643ae2c0663dc219f2886ab34',
+					key: 'a72d3814a73c41fe295bbe7267a57e4de4f09c6f',
 					class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
 				},
 				h(
 					'fieldset',
 					{
-						'key': '3c1938738101c7eb60b84a1e3c14b76b0dd63a2d',
+						'key': 'b3a4bf7f2e8351107125ccf3aaac96f088dea4d6',
 						'class': 'ontario-fieldset',
 						'aria-describedby': this.hintTextId,
 					},
 					this.captionState.getCaption(undefined, !!this.internalHintExpander),
 					this.internalHintText &&
 						h('ontario-hint-text', {
+							key: '4a59f75d053edd397eeeb7f0f75b8d301c872e8c',
 							hint: this.internalHintText.hint,
 							hintContentType: this.internalHintText.hintContentType,
 							ref: (el) => (this.hintTextRef = el),
 						}),
 					h(
 						'div',
-						{ key: '4a3b23f679bd473813b6af12af8dfebc8fb0fc34', class: 'ontario-radios' },
+						{ key: 'f38ba7f77cc5bb712529d10df095c13affa90f4e', class: 'ontario-radios' },
 						h(ErrorMessage, {
-							key: 'b8e1f00d67e47f0f132a3d82d890b285d39a14cb',
+							key: '1d48ccc837cde3c9687b6f8f357b52a452d2fbba',
 							message: this.errorMessage,
 							error: error,
 						}),
-						(_a = this.internalOptions) === null || _a === void 0
-							? void 0
-							: _a.map((radioOption) =>
+						this.internalOptions?.map((radioOption) =>
+							h(
+								'div',
+								{ class: 'ontario-radios__item' },
+								h(Input, {
+									className: 'ontario-radios__input',
+									id: radioOption.elementId,
+									name: this.name,
+									type: 'radio',
+									value: radioOption.value,
+									required: !!this.required,
+									checked: !!radioOption.checked,
+									onChange: (e) => this.handleEvent(e, EventType.Change),
+									onBlur: (e) => this.handleEvent(e, EventType.Blur),
+									onFocus: (e) => this.handleEvent(e, EventType.Focus),
+								}),
+								h(
+									'label',
+									{ class: 'ontario-radios__label', htmlFor: radioOption.elementId },
+									radioOption.label,
+									radioOption.hintExpander &&
+										this.captionState.getHintExpanderAccessibilityText(radioOption.label, true),
+								),
+								radioOption.hintExpander &&
 									h(
 										'div',
-										{ class: 'ontario-radios__item' },
-										h(Input, {
-											className: 'ontario-radios__input',
-											id: radioOption.elementId,
-											name: this.name,
-											type: 'radio',
-											value: radioOption.value,
-											required: !!this.required,
-											checked: !!radioOption.checked,
-											onChange: (e) => this.handleEvent(e, EventType.Change),
-											onBlur: (e) => this.handleEvent(e, EventType.Blur),
-											onFocus: (e) => this.handleEvent(e, EventType.Focus),
+										{ class: 'ontario-radios__hint-expander' },
+										h('ontario-hint-expander', {
+											'hint': radioOption.hintExpander.hint,
+											'content': radioOption.hintExpander.content,
+											'hintContentType': radioOption.hintExpander.hintContentType,
+											'input-exists': true,
 										}),
-										h(
-											'label',
-											{ class: 'ontario-radios__label', htmlFor: radioOption.elementId },
-											radioOption.label,
-											radioOption.hintExpander &&
-												this.captionState.getHintExpanderAccessibilityText(radioOption.label, true),
-										),
-										radioOption.hintExpander &&
-											h(
-												'div',
-												{ class: 'ontario-radios__hint-expander' },
-												h('ontario-hint-expander', {
-													'hint': radioOption.hintExpander.hint,
-													'content': radioOption.hintExpander.content,
-													'hintContentType': radioOption.hintExpander.hintContentType,
-													'input-exists': true,
-												}),
-											),
 									),
-							  ),
+							),
+						),
 						this.internalHintExpander &&
 							h(
 								'div',
-								{ class: 'ontario-radios__hint-expander' },
+								{ key: '7474fc0072c87dd627f576fb4b1ed92078ac9d40', class: 'ontario-radios__hint-expander' },
 								h('ontario-hint-expander', {
+									'key': '29777790764d03b3a8a6fd2c2b50c196f520e939',
 									'hint': this.internalHintExpander.hint,
 									'content': this.internalHintExpander.content,
 									'hintContentType': this.internalHintExpander.hintContentType,
@@ -302,9 +440,6 @@ const OntarioRadioButtons$1 = /*@__PURE__*/ proxyCustomElement(
 		static get formAssociated() {
 			return true;
 		}
-		get element() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				hintText: ['parseHintText'],