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

package/dist/collection/components/ontario-hint-text/ontario-hint-text.js

@@ -2,6 +2,11 @@ import { h } from '@stencil/core';
 import { v4 as uuid } from 'uuid';
 import { validatePropExists } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+/**
+ * Use hint text to help users understand how to complete fields in a form.
+ *
+ * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.
+ */
 export class OntarioHintText {
 	host;
 	/**
@@ -26,6 +31,9 @@ export class OntarioHintText {
 	 */
 	elementId;
 	hintState;
+	/**
+	 * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.
+	 */
 	/**
 	 * Watch for changes to the `hintContentType` prop for validation purposes.
 	 * If none is provided, or the wrong type is provided, it will default to `string`.
@@ -77,7 +85,7 @@ export class OntarioHintText {
 	/**
 	 * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.
 	 *
-	 * @returns Promise<string | undefined>
+	 * @returns {Promise<string | undefined>} The ID of the hint text element, or undefined if no ID is set.
 	 */
 	async getHintTextId() {
 		return this.elementId;
@@ -106,7 +114,7 @@ export class OntarioHintText {
 	}
 	render() {
 		return this.hintContentType === 'string'
-			? h('p', { id: this.getId(), class: 'ontario-hint' }, this.hintState)
+			? h('p', { part: 'hint-text', id: this.getId(), class: 'ontario-hint' }, this.hintState)
 			: h('div', { id: this.getId(), class: 'ontario-hint', innerHTML: this.hintState });
 	}
 	static get is() {
@@ -129,6 +137,7 @@ export class OntarioHintText {
 		return {
 			hintContentType: {
 				type: 'string',
+				attribute: 'hint-content-type',
 				mutable: true,
 				complexType: {
 					original: 'HintContentType',
@@ -149,12 +158,12 @@ export class OntarioHintText {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'hint-content-type',
 				reflect: false,
 				defaultValue: "'string'",
 			},
 			hint: {
 				type: 'string',
+				attribute: 'hint',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -174,11 +183,11 @@ export class OntarioHintText {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'hint',
 				reflect: false,
 			},
 			elementId: {
 				type: 'string',
+				attribute: 'element-id',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -193,7 +202,6 @@ export class OntarioHintText {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'element-id',
 				reflect: false,
 			},
 		};
@@ -222,7 +230,7 @@ export class OntarioHintText {
 					tags: [
 						{
 							name: 'returns',
-							text: 'Promise<string | undefined>',
+							text: 'The ID of the hint text element, or undefined if no ID is set.',
 						},
 					],
 				},

package/dist/collection/components/ontario-hint-text/ontario-hint-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-hint-text.js","sourceRoot":"","sources":["../../../src/components/ontario-hint-text/ontario-hint-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,MAAM,OAAO,eAAe;IAChB,IAAI,CAAc;IAE7B;;;;OAIG;IACsB,eAAe,GAAqB,QAAQ,CAAC;IAEtE;;;;;;;;;OASG;IACK,IAAI,CAAS;IAErB;;OAEG;IACsB,SAAS,CAAU;IAEnC,SAAS,CAAS;IAE3B;;;OAGG;IAEK,oBAAoB;QAC3B,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,EAAE,CAAC;YAC1E,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,uBAAuB,CAAC;iBACzC,cAAc,CAAC,iFAAiF,CAAC;iBACjG,YAAY,EAAE,CAAC;YAEjB,OAAO,CAAC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,IAAI,CAAC,eAAe,CAAC;IAC7B,CAAC;IAED;;;OAGG;IAEK,iBAAiB;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED;;;OAGG;IACH,mBAAmB,CAAC,QAAgB;QACnC,gEAAgE;QAChE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,QAAQ,CAAC;qBAC1B,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,uBAAuB,CAAC;qBACzC,cAAc,CAAC,kBAAkB,CAAC;qBAClC,YAAY,EAAE,CAAC;YAClB,CAAC;QACF,CAAC;IACF,CAAC;IAEM,KAAK;QACX,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,aAAa;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,EAAE,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACnD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC1B,CAAC;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;QACrC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC1C,SAAG,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,IACvC,IAAI,CAAC,SAAS,CACZ,CACJ,CAAC,CAAC,CAAC,CACH,WAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAQ,CAC7E,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, h, Watch, State, Method } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Hint, HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-text',\n\tstyleUrl: 'ontario-hint-text.scss',\n\tshadow: true,\n})\nexport class OntarioHintText implements Hint {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.\n\t *\n\t * @example\n\t * <ontario-hint-text hint=\"Override Hint Text\">Hint Text</ontario-button>\n\t *\n\t * The resulting hint text will display `\"Override Hint Text\"`.\n\t */\n\t@Prop() hint: string;\n\n\t/*\n\t * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHintContent(this.hintState);\n\t}\n\n\t/*\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint` or element content.\n\t */\n\tvalidateHintContent(newValue: string) {\n\t\t// If element content is not provided, check whether prop exists\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.\n\t *\n\t * @returns Promise<string | undefined>\n\t */\n\t@Method()\n\tasync getHintTextId(): Promise<string | undefined> {\n\t\treturn this.elementId;\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.elementId = this.elementId ?? uuid();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn this.hintContentType === 'string' ? (\n\t\t\t<p id={this.getId()} class=\"ontario-hint\">\n\t\t\t\t{this.hintState}\n\t\t\t</p>\n\t\t) : (\n\t\t\t<div id={this.getId()} class=\"ontario-hint\" innerHTML={this.hintState}></div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-hint-text.js","sourceRoot":"","sources":["../../../src/components/ontario-hint-text/ontario-hint-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,EAAE,IAAI,IAAI,EAAE,MAAM,MAAM,CAAC;AAIlC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAElF;;;;GAIG;AAMH,MAAM,OAAO,eAAe;IAChB,IAAI,CAAc;IAE7B;;;;OAIG;IACsB,eAAe,GAAqB,QAAQ,CAAC;IAEtE;;;;;;;;;OASG;IACK,IAAI,CAAS;IAErB;;OAEG;IACsB,SAAS,CAAU;IAEnC,SAAS,CAAS;IAE3B;;OAEG;IAEH;;;OAGG;IAEK,oBAAoB;QAC3B,IAAI,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,EAAE,CAAC;YAC1E,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,mBAAmB,CAAC;iBACrC,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,uBAAuB,CAAC;iBACzC,cAAc,CAAC,iFAAiF,CAAC;iBACjG,YAAY,EAAE,CAAC;YAEjB,OAAO,CAAC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,CAAC;QAC1C,CAAC;QAED,OAAO,IAAI,CAAC,eAAe,CAAC;IAC7B,CAAC;IAED;;;OAGG;IAEK,iBAAiB;QACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;QAC1D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED;;;OAGG;IACH,mBAAmB,CAAC,QAAgB;QACnC,gEAAgE;QAChE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAClC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,QAAQ,CAAC;qBAC1B,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,uBAAuB,CAAC;qBACzC,cAAc,CAAC,kBAAkB,CAAC;qBAClC,YAAY,EAAE,CAAC;YAClB,CAAC;QACF,CAAC;IACF,CAAC;IAEM,KAAK;QACX,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IAEH,KAAK,CAAC,aAAa;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,EAAE,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACnD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBAC1B,CAAC;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;QACrC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC1C,SAAG,IAAI,EAAC,WAAW,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,IACxD,IAAI,CAAC,SAAS,CACZ,CACJ,CAAC,CAAC,CAAC,CACH,WAAK,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,GAAQ,CAC7E,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, Element, h, Watch, State, Method } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Hint, HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n/**\n * Use hint text to help users understand how to complete fields in a form.\n *\n * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.\n */\n@Component({\n\ttag: 'ontario-hint-text',\n\tstyleUrl: 'ontario-hint-text.scss',\n\tshadow: true,\n})\nexport class OntarioHintText implements Hint {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.\n\t *\n\t * @example\n\t * <ontario-hint-text hint=\"Override Hint Text\">Hint Text</ontario-button>\n\t *\n\t * The resulting hint text will display `\"Override Hint Text\"`.\n\t */\n\t@Prop() hint: string;\n\n\t/*\n\t * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.\n\t */\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHintContent(this.hintState);\n\t}\n\n\t/*\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint` or element content.\n\t */\n\tvalidateHintContent(newValue: string) {\n\t\t// If element content is not provided, check whether prop exists\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.\n\t *\n\t * @returns {Promise<string | undefined>} The ID of the hint text element, or undefined if no ID is set.\n\t */\n\t@Method()\n\tasync getHintTextId(): Promise<string | undefined> {\n\t\treturn this.elementId;\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.elementId = this.elementId ?? uuid();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn this.hintContentType === 'string' ? (\n\t\t\t<p part=\"hint-text\" id={this.getId()} class=\"ontario-hint\">\n\t\t\t\t{this.hintState}\n\t\t\t</p>\n\t\t) : (\n\t\t\t<div id={this.getId()} class=\"ontario-hint\" innerHTML={this.hintState}></div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-icon/ontario-icon-accessibility.js

@@ -102,14 +102,14 @@ export class OntarioIconAccessibility {
 		return h(
 			'div',
 			{
-				key: '828dc67f73325c7970179fe34b2019c1ea9977a3',
+				key: '040815161873ef2b245e5b6d5c60cc94bbb75757',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'd60d0e81f4481d73115bb63bf229e4c1b35ccdd8',
+					key: 'a930d586c1ef0ade8f956195e130c8016a899b96',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -118,7 +118,7 @@ export class OntarioIconAccessibility {
 					id: 'accessibility',
 				},
 				h('path', {
-					key: '117705749d25d57750b356778b9d22a877c85abf',
+					key: '168f3f757d0367975973cc582abe6457e0a3bec6',
 					d: 'M18.4 11.2l-4.1.2 2.3-2.6c.2-.3.3-.8.2-1.3-.1-.3-.2-.6-.5-.8l-5.4-3.2c-.4-.3-1-.2-1.4.1L6.8 6.1c-.5.5-.6 1.2-.1 1.7.4.5 1.2.5 1.7.1l2-1.8 1.9 1.1-4.2 4.3c-.1.1-.1.2-.2.2-.5.2-1 .4-1.4.7L8 13.9c.5-.2 1-.4 1.5-.4 1.9 0 3.5 1.6 3.5 3.5 0 .6-.1 1.1-.4 1.5l1.5 1.5a5.29 5.29 0 0 0 .9-3c0-1.2-.4-2.4-1.1-3.3l3.3-.3-.2 4.8c-.1.7.4 1.2 1.1 1.3h.1c.6 0 1.1-.5 1.2-1.1l.2-5.9c0-.3-.1-.7-.3-.9-.3-.3-.6-.4-.9-.4zM18 5.5a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2zm-5.5 16.1a5.29 5.29 0 0 1-3 .9C6.5 22.5 4 20 4 17a5.29 5.29 0 0 1 .9-3l1.5 1.5c-.2.5-.4 1-.4 1.5 0 1.9 1.6 3.5 3.5 3.5.6 0 1.1-.1 1.5-.4l1.5 1.5z',
 				}),
 			),
@@ -144,6 +144,7 @@ export class OntarioIconAccessibility {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -164,12 +165,12 @@ export class OntarioIconAccessibility {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: false,
 				complexType: {
 					original: 'IconColour',
@@ -190,7 +191,6 @@ export class OntarioIconAccessibility {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'black'",
 			},

package/dist/collection/components/ontario-icon/ontario-icon-account.js

@@ -102,14 +102,14 @@ export class OntarioIconAccount {
 		return h(
 			'div',
 			{
-				key: 'e05c93db0ef8eeef2fdbfd76473beb763629a464',
+				key: '6ba362a8d293aa134d80a87dcefeedf9d64dabd7',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'd355be2bf7e7333ba722a8900cd0a961af64cd9b',
+					key: 'cf481c3817c885ecfaac8fcc3456697dbc6e2c66',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -118,7 +118,7 @@ export class OntarioIconAccount {
 					id: 'account',
 				},
 				h('path', {
-					key: 'c9e99c20f60c9a54b8a96b01ae7b606bea548155',
+					key: 'f65d143f0df70cc4478a3c0d9755a774624d348e',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-2 4-3.08 6-3.08 2 0 5.97 1.1 6 3.08a7.2 7.2 0 0 1-6 3.22z',
 				}),
 			),
@@ -144,6 +144,7 @@ export class OntarioIconAccount {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -164,12 +165,12 @@ export class OntarioIconAccount {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: false,
 				complexType: {
 					original: 'IconColour',
@@ -190,7 +191,6 @@ export class OntarioIconAccount {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'black'",
 			},

package/dist/collection/components/ontario-icon/ontario-icon-add-alt.js

@@ -102,14 +102,14 @@ export class OntarioIconAddAlt {
 		return h(
 			'div',
 			{
-				key: '26cb3b1b5ba5680ac88f8210f69bba1881b9e7e8',
+				key: '19b33d29e8d859375523f72fbffef8a8d1941376',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '18da89fa5f1c2962d679626dd6243b2aaa2513d0',
+					key: '988d8bf41a119186089d7462a6818ccedc539d5f',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -119,7 +119,7 @@ export class OntarioIconAddAlt {
 					id: 'add-alt',
 				},
 				h('path', {
-					key: 'c94379a4e62b3d4356c2f8544638d0c525e39d41',
+					key: '74e64ba1180107a248544077b11fd65f671e6f3e',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z',
 				}),
 			),
@@ -145,6 +145,7 @@ export class OntarioIconAddAlt {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -165,12 +166,12 @@ export class OntarioIconAddAlt {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: false,
 				complexType: {
 					original: 'IconColour',
@@ -191,7 +192,6 @@ export class OntarioIconAddAlt {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'black'",
 			},

package/dist/collection/components/ontario-icon/ontario-icon-add.js

@@ -102,14 +102,14 @@ export class OntarioIconAdd {
 		return h(
 			'div',
 			{
-				key: '5425bea74d7519bbb6c03abe0e19b015e2feeab0',
+				key: '4f0970fd732d581fefb8bf4ff18ffb0dad51163a',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '1a9a740c06f6d5361d9886772153ad200995534a',
+					key: '2d3cef39bc4396cac16fa7efc7e54a3198dd6874',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -119,7 +119,7 @@ export class OntarioIconAdd {
 					id: 'add',
 				},
 				h('path', {
-					key: 'be295d9a211e6f13b1bbdea32c168dc2544e2824',
+					key: 'dca068d0e4dddd70ced1ba8949a56c9376f1aa6d',
 					d: 'M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z',
 				}),
 			),
@@ -145,6 +145,7 @@ export class OntarioIconAdd {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -165,12 +166,12 @@ export class OntarioIconAdd {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: false,
 				complexType: {
 					original: 'IconColour',
@@ -191,7 +192,6 @@ export class OntarioIconAdd {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'black'",
 			},

package/dist/collection/components/ontario-icon/ontario-icon-alert-error.js

@@ -70,14 +70,14 @@ export class OntarioIconAlertError {
 		return h(
 			'div',
 			{
-				key: 'ff3c7995aaa503c0c11baaed95fd613dee18a578',
+				key: '080d9965b36782f0044f4c6b0728fd820df73830',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'fcdefddb82410b0c6e042ba67dce486356d0b86d',
+					key: '0c066c0777fdf1adea3fa6b49a42e5b29ec72a40',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -86,12 +86,12 @@ export class OntarioIconAlertError {
 					id: 'alert-error',
 				},
 				h('path', {
-					key: '52ea29a509fffc15ccafcc1264dcfc1ae6c78763',
+					key: 'b5c90bab331d620b89732891e89b36cca164b107',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z',
 					fill: '#cd0000',
 				}),
 				h('path', {
-					key: 'cb652b9395c30d910ac13013748f33eb2b05705d',
+					key: '8e73e0ca55b20a1637e73ff3bb2ad6869c77ba8b',
 					d: 'M11 17h2v-2h-2v2zm0-4h2V7h-2v6z',
 					fill: '#fff',
 				}),
@@ -118,6 +118,7 @@ export class OntarioIconAlertError {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -138,7 +139,6 @@ export class OntarioIconAlertError {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},

package/dist/collection/components/ontario-icon/ontario-icon-alert-information.js

@@ -70,14 +70,14 @@ export class OntarioIconAlertInformation {
 		return h(
 			'div',
 			{
-				key: '1bfe138b0e668edbfcbf2e1a90d52a6a47cfb0c2',
+				key: '935a6e02a60f34c00fccc4666731b941a64fdd80',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'aa8b91c78c281735d1724453f0a2e42bee22fd00',
+					key: 'df00c3b6aa230d601849f1c6a59d8dc8084ab4ab',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -86,12 +86,12 @@ export class OntarioIconAlertInformation {
 					id: 'alert-information',
 				},
 				h('path', {
-					key: '028420baaa69e43b498160dabd16aeb3d1435c46',
+					key: '1200f4af6c8629dfdf9c0bd28f334e1a41dfabee',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z',
 					fill: '#1080a6',
 				}),
 				h('path', {
-					key: 'c71cd59162d2384b318d5f559e25d84853c3af04',
+					key: '9169dd8b56c5ab208bfc2defd275e907c2b4739f',
 					d: 'M11 17h2v-6h-2v6zm0-8h2V7h-2v2z',
 					fill: '#fff',
 				}),
@@ -118,6 +118,7 @@ export class OntarioIconAlertInformation {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -138,7 +139,6 @@ export class OntarioIconAlertInformation {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},

package/dist/collection/components/ontario-icon/ontario-icon-alert-success.js

@@ -70,14 +70,14 @@ export class OntarioIconAlertSuccess {
 		return h(
 			'div',
 			{
-				key: '2a46ba4df11faf46c348af51294d93e8488aa2ce',
+				key: '8f6cb16d77b3a8de266c0b9c66ce922c723ee3df',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: 'b9f55bd9d8ed3e7fc97eab6a185bfd73dc01e20a',
+					key: '06ba52d0725b5da030d1f91bd809c227a4ed830d',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -86,12 +86,12 @@ export class OntarioIconAlertSuccess {
 					id: 'alert-success',
 				},
 				h('path', {
-					key: 'edc960c6114d29da7d68be3f43c5a3cb79901491',
+					key: '583067de0785a0715df027714f7bf9a41ce6bdc1',
 					d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z',
 					fill: '#118847',
 				}),
 				h('path', {
-					key: '7796879c1b12750c1e5a1ce22cb6c3f0c4659c05',
+					key: '01ca5b79dc1a9bf7ded054fd93905d5dc2ec5c86',
 					d: 'M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z',
 					fill: '#fff',
 				}),
@@ -118,6 +118,7 @@ export class OntarioIconAlertSuccess {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -138,7 +139,6 @@ export class OntarioIconAlertSuccess {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},

package/dist/collection/components/ontario-icon/ontario-icon-alert-warning.js

@@ -70,14 +70,14 @@ export class OntarioIconAlertWarning {
 		return h(
 			'div',
 			{
-				key: '8f6cb16d77b3a8de266c0b9c66ce922c723ee3df',
+				key: '7fc27406ecbba9ea1c361e68dd2bdf195cd0f482',
 				class: `ontario-icon ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '06ba52d0725b5da030d1f91bd809c227a4ed830d',
+					key: '134ba2924fd2969dbc70ba0f99ec644f548de60f',
 					class: 'svg-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -86,11 +86,11 @@ export class OntarioIconAlertWarning {
 					id: 'alert-warning',
 				},
 				h('path', {
-					key: '72a20dc4de6f87b4ce575860d449c1a929df12b9',
+					key: '0aa5ae9fccf4db8d83e00eb75479ac1380829dce',
 					d: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z',
 					fill: '#ffd440',
 				}),
-				h('path', { key: '9bd240e90b5d0c338696c23c912cd3861e17da85', d: 'M11 10h2v4h-2zm0 6h2v2h-2z', fill: '#000' }),
+				h('path', { key: '307169b7a8f7ad94c6c7c838cddccd2d3df2dd90', d: 'M11 10h2v4h-2zm0 6h2v2h-2z', fill: '#000' }),
 			),
 		);
 	}
@@ -114,6 +114,7 @@ export class OntarioIconAlertWarning {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -134,7 +135,6 @@ export class OntarioIconAlertWarning {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},

package/dist/collection/components/ontario-icon/ontario-icon-arrow-up.js

@@ -102,14 +102,14 @@ export class OntarioIconArrowUp {
 		return h(
 			'div',
 			{
-				key: 'd2e524b4f070dd0f0b7b0d74fc42873b6dcc37f9',
+				key: 'cb71ff461c7b1a6ebd212002e517befa8b51f2cc',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '13973e5c70e5d8d465966bae8d7f8a011ae23299',
+					key: 'd6edc46d675110d43a137db9fef11255bde128db',
 					class: 'ontario-icon',
 					role: 'img',
 					xmlns: 'http://www.w3.org/2000/svg',
@@ -117,9 +117,9 @@ export class OntarioIconArrowUp {
 					fill: '#000000',
 					id: 'arrow-up',
 				},
-				h('path', { key: '73efd5aeeed8e7a91450a6c6f3cb9e0cff67ba2d', d: 'M0 0h24v24H0V0z', fill: 'none' }),
+				h('path', { key: 'bb064cc3fb612dc1550906c2d214d912e08aa312', d: 'M0 0h24v24H0V0z', fill: 'none' }),
 				h('path', {
-					key: '803c15a0e9b51db40b2f50b940cf12d57abd34dc',
+					key: '51d8ada57f5ba1b2171643cdb1f5ee31d3012bf8',
 					d: 'M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z',
 				}),
 			),
@@ -145,6 +145,7 @@ export class OntarioIconArrowUp {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -165,12 +166,12 @@ export class OntarioIconArrowUp {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: false,
 				complexType: {
 					original: 'IconColour',
@@ -191,7 +192,6 @@ export class OntarioIconArrowUp {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'black'",
 			},

package/dist/collection/components/ontario-icon/ontario-icon-attach.js

@@ -102,14 +102,14 @@ export class OntarioIconAttach {
 		return h(
 			'div',
 			{
-				key: '14c26131c30e07125f3bfd7229d7f89d61ddfaa7',
+				key: 'e5b60babcc9301c78721997bbd375388ae19c658',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			h(
 				'svg',
 				{
-					key: '0a9c510ce559ee84f22343d707532de28cb516eb',
+					key: 'ee7ba29426a89a0690fe03fbeaebca516a08327d',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -119,7 +119,7 @@ export class OntarioIconAttach {
 					id: 'attach',
 				},
 				h('path', {
-					key: '11a6d523e9bf6be29778f572498e18b9ca8710b5',
+					key: '66c2452af99ad9706463ad02477529d8461203a3',
 					d: 'M16.5 6v11.5a4 4 0 1 1-8 0V5a2.5 2.5 0 1 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 1 0 5 0V5a4 4 0 1 0-8 0v12.5a5.5 5.5 0 1 0 11 0V6h-1.5z',
 					fill: '#000',
 				}),
@@ -146,6 +146,7 @@ export class OntarioIconAttach {
 		return {
 			iconWidth: {
 				type: 'number',
+				attribute: 'icon-width',
 				mutable: false,
 				complexType: {
 					original: 'IconSize',
@@ -166,12 +167,12 @@ export class OntarioIconAttach {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'icon-width',
 				reflect: false,
 				defaultValue: '24',
 			},
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: false,
 				complexType: {
 					original: 'IconColour',
@@ -192,7 +193,6 @@ export class OntarioIconAttach {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'black'",
 			},