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

package/dist/cjs/ontario-icon-wifi.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-icon-wifi.entry.cjs.js","sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-wifi&encapsulation=shadow","src/components/ontario-icon/ontario-icon-wifi.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-wifi',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconWifi implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-wifi> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-wifi> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"wifi\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M1 9l2 2a12.73 12.73 0 0 1 18 0l2-2A15.57 15.57 0 0 0 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"names":["ConsoleMessageClass","validateValueAgainstArray","IconColours","validateColor","h"],"mappings":"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"}

package/dist/cjs/ontario-icon-youtube.cjs.entry.js

@@ -1,14 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-38af86a6.js');
-const index$1 = require('./index-40e2d955.js');
-const consoleMessage = require('./console-message-04515047.js');
+var index = require('./index-DeXrJ2qJ.js');
+var index$1 = require('./index-N4QX3Rgg.js');
+var consoleMessage = require('./console-message-B2SEf-GP.js');
 
 const ontarioIconCss =
 	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
-const OntarioIconYoutubeStyle0 = ontarioIconCss;
 
 const OntarioIconYoutube = class {
 	constructor(hostRef) {
@@ -71,7 +68,7 @@ const OntarioIconYoutube = class {
 		if (isValid) {
 			this.iconColourState = this.colour;
 		} else {
-			if (index$1.lib(this.colour)) {
+			if (index$1.validateColor(this.colour)) {
 				this.iconCustomColourState = this.colour;
 			} else {
 				this.iconColourState = this.warnDefaultColour();
@@ -111,14 +108,14 @@ const OntarioIconYoutube = class {
 		return index.h(
 			'div',
 			{
-				key: 'de76dc62e1482bbd3e087071124afd049b37b8af',
+				key: '698ac79a09bb455a384af3c3ce30e58a58737e2d',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			index.h(
 				'svg',
 				{
-					key: '635cf5ba84395a3f1f4c102bc0786888c2d4b898',
+					key: '3518ae010f4d9e2248358a78ccda4e74a478ded7',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -127,7 +124,7 @@ const OntarioIconYoutube = class {
 					id: 'youtube',
 				},
 				index.h('path', {
-					key: '00dab4d3384db305d424e0261af338fec4309463',
+					key: '7366687e29d889201f3fe060c4560f7e498d220c',
 					d: 'M10 15l5.2-3L10 9v6zm11.56-7.83c.13.47.22 1.1.28 1.9l.1 2.1.06.84c0 2.2-.16 3.8-.44 4.83a2.34 2.34 0 0 1-1.73 1.73c-.47.13-1.33.22-2.65.28l-3.6.1L12 19c-4.2 0-6.8-.16-7.83-.44a2.34 2.34 0 0 1-1.73-1.73c-.13-.47-.22-1.1-.28-1.9l-.1-2.1L2 12c0-2.2.16-3.8.44-4.83a2.34 2.34 0 0 1 1.73-1.73c.47-.13 1.33-.22 2.65-.28l3.6-.1L12 5c4.2 0 6.8.16 7.83.44a2.34 2.34 0 0 1 1.73 1.73z',
 				}),
 			),
@@ -140,8 +137,9 @@ const OntarioIconYoutube = class {
 		};
 	}
 };
-OntarioIconYoutube.style = OntarioIconYoutubeStyle0;
+OntarioIconYoutube.style = ontarioIconCss;
 
 exports.ontario_icon_youtube = OntarioIconYoutube;
+//# sourceMappingURL=ontario-icon-youtube.entry.cjs.js.map
 
 //# sourceMappingURL=ontario-icon-youtube.cjs.entry.js.map

package/dist/cjs/ontario-icon-youtube.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ontario-icon-youtube.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,yZAAyZ,CAAC;AACjb,iCAAe,cAAc;;MCYhB,kBAAkB;;;;;;;;IAKtB,SAAS,GAAa,EAAE,CAAC;;;;;IAMxB,cAAc,CAAS;;;;;IAOhC,aAAa;QACZ,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,EAAE;YAC7E,MAAM,OAAO,GAAG,IAAIA,kCAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,cAAc,CAAC;iBAChC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,0BAA0B,CAAC;iBAC5C,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,gCAAgC,GAAG,8BAC5D,0DAA0D,CAC1D;iBACA,gBAAgB,CAAC,QAAQ,CAAC;iBAC1B,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;SACzB;aAAM;YACN,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;SACrC;KACD;;;;IAKO,MAAM,GAAe,OAAO,CAAC;;;;;IAM5B,eAAe,CAAS;;;;;IAMxB,qBAAqB,CAAS;;;;;;IAQvC,cAAc;QACb,MAAM,OAAO,GAAGC,iCAAyB,CAAC,IAAI,CAAC,MAAM,EAAEC,mBAAW,CAAC,CAAC;QACpE,IAAI,OAAO,EAAE;YACZ,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC;SACnC;aAAM;YACN,IAAIC,WAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;gBAC/B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,MAAM,CAAC;aACzC;iBAAM;gBACN,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAChD;SACD;KACD;;;;;IAMO,iBAAiB;QACxB,MAAM,OAAO,GAAG,IAAIH,kCAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,0BAA0B,CAAC;aAC5C,cAAc,CAAC,oCAAoC,CAAC;aACpD,gBAAgB,CAAC,8BAA8B,CAAC;aAChD,cAAc,CAAC,mCAAmC,CAAC;aACnD,gBAAgB,CAAC,SAAS,CAAC;aAC3B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,OAAO,OAAO,CAAC;KACf;;;;IAKD,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;KACrB;;;;IAKD,MAAM;QACL,QACCI,kEACC,KAAK,EAAE,8BAA8B,IAAI,CAAC,eAAe,wBAAwB,IAAI,CAAC,cAAc,EAAE,EACtG,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,IAE5CA,kEACC,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,EAAE,EACzF,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,EAAE,EAAC,SAAS,IAEZA,mEAAM,CAAC,EAAC,sXAAsX,GAAG,CAC5X,CACD,EACL;KACF;;;;;;;;;;","names":["ConsoleMessageClass","validateValueAgainstArray","IconColours","validateColor","h"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-youtube&encapsulation=shadow","src/components/ontario-icon/ontario-icon-youtube.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-youtube',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconYoutube implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-youtube> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-youtube> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"youtube\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M10 15l5.2-3L10 9v6zm11.56-7.83c.13.47.22 1.1.28 1.9l.1 2.1.06.84c0 2.2-.16 3.8-.44 4.83a2.34 2.34 0 0 1-1.73 1.73c-.47.13-1.33.22-2.65.28l-3.6.1L12 19c-4.2 0-6.8-.16-7.83-.44a2.34 2.34 0 0 1-1.73-1.73c-.13-.47-.22-1.1-.28-1.9l-.1-2.1L2 12c0-2.2.16-3.8.44-4.83a2.34 2.34 0 0 1 1.73-1.73c.47-.13 1.33-.22 2.65-.28l3.6-.1L12 5c4.2 0 6.8.16 7.83.44a2.34 2.34 0 0 1 1.73 1.73z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"version":3}
+{"file":"ontario-icon-youtube.entry.cjs.js","mappings":"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","names":["ConsoleMessageClass","validateValueAgainstArray","IconColours","validateColor","h"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-youtube&encapsulation=shadow","src/components/ontario-icon/ontario-icon-youtube.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-youtube',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconYoutube implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-youtube> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-youtube> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"youtube\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M10 15l5.2-3L10 9v6zm11.56-7.83c.13.47.22 1.1.28 1.9l.1 2.1.06.84c0 2.2-.16 3.8-.44 4.83a2.34 2.34 0 0 1-1.73 1.73c-.47.13-1.33.22-2.65.28l-3.6.1L12 19c-4.2 0-6.8-.16-7.83-.44a2.34 2.34 0 0 1-1.73-1.73c-.13-.47-.22-1.1-.28-1.9l-.1-2.1L2 12c0-2.2.16-3.8.44-4.83a2.34 2.34 0 0 1 1.73-1.73c.47-.13 1.33-.22 2.65-.28l3.6-.1L12 5c4.2 0 6.8.16 7.83.44a2.34 2.34 0 0 1 1.73 1.73z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"version":3}

package/dist/cjs/ontario-icon-youtube.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-icon-youtube.entry.cjs.js","sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-youtube&encapsulation=shadow","src/components/ontario-icon/ontario-icon-youtube.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-youtube',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconYoutube implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-youtube> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-youtube> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"youtube\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M10 15l5.2-3L10 9v6zm11.56-7.83c.13.47.22 1.1.28 1.9l.1 2.1.06.84c0 2.2-.16 3.8-.44 4.83a2.34 2.34 0 0 1-1.73 1.73c-.47.13-1.33.22-2.65.28l-3.6.1L12 19c-4.2 0-6.8-.16-7.83-.44a2.34 2.34 0 0 1-1.73-1.73c-.13-.47-.22-1.1-.28-1.9l-.1-2.1L2 12c0-2.2.16-3.8.44-4.83a2.34 2.34 0 0 1 1.73-1.73c.47-.13 1.33-.22 2.65-.28l3.6-.1L12 5c4.2 0 6.8.16 7.83.44a2.34 2.34 0 0 1 1.73 1.73z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"names":["ConsoleMessageClass","validateValueAgainstArray","IconColours","validateColor","h"],"mappings":"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"}

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
 	"entries": [
+		"components/ontario-task/ontario-task.js",
+		"components/ontario-task-list/ontario-task-list.js",
 		"components/ontario-accordion/ontario-accordion.js",
 		"components/ontario-aside/ontario-aside.js",
 		"components/ontario-back-to-top/ontario-back-to-top.js",
@@ -142,7 +144,7 @@
 	],
 	"compiler": {
 		"name": "@stencil/core",
-		"version": "4.25.1",
+		"version": "4.33.1",
 		"typescriptVersion": "5.5.4"
 	},
 	"collections": [],

package/dist/collection/components/ontario-accordion/ontario-accordion.js

@@ -155,18 +155,18 @@ export class OntarioAccordion {
 	render() {
 		return h(
 			'div',
-			{ key: '3d024ea02e809459320c06b2952a45dcddba4f46' },
-			h('h2', { key: 'e12b9f0940111c6467a5451fe9bd4fbd2bd5ffc3' }, this.name),
+			{ key: '1ec9adce66ba9651eb72287a6268e041b8dc4fb3' },
+			h('h2', { key: 'b13104816ae4a4ae5292afbc94ffb526c020babe' }, this.name),
 			h(
 				'div',
-				{ key: '52cb77f0c1b3df890b65fad742b94d7e353e8bd3', class: 'ontario-accordions__container' },
+				{ key: '53e28363acaec45d55d0a021a68ebea3845b034d', class: 'ontario-accordions__container' },
 				h(
 					'div',
-					{ key: '7c19c5bec0ff393075ffde690770a9e77f9c8eb9', class: 'ontario-accordion__controls' },
+					{ key: 'eb4ee3f92067cce8ff9b169026eb1df0801fa230', class: 'ontario-accordion__controls' },
 					h(
 						'button',
 						{
-							'key': 'dfc002b4a720909c9284827fcd86f85b9598ee33',
+							'key': 'c018efcef59dcb152b3646e217df9b4ae09ed5c0',
 							'class': 'ontario-accordion__button--expand-all',
 							'onClick': () => this.toggleAll(),
 							'aria-expanded':
@@ -175,7 +175,7 @@ export class OntarioAccordion {
 						},
 						h(
 							'span',
-							{ key: '302cb41727337a1ae7156b3aa6f3d145c726e611', class: 'ontario-accordion--expand-open-all' },
+							{ key: '9e0f9959fb6f83e14b02e9843652d7a66a3fae54', class: 'ontario-accordion--expand-open-all' },
 							this.expandCollapseLabel === 'expand'
 								? h(
 										'div',
@@ -266,6 +266,7 @@ export class OntarioAccordion {
 		return {
 			name: {
 				type: 'string',
+				attribute: 'name',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -280,11 +281,11 @@ export class OntarioAccordion {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'name',
 				reflect: false,
 			},
 			expandCollapseButton: {
 				type: 'string',
+				attribute: 'expand-collapse-button',
 				mutable: false,
 				complexType: {
 					original: 'string | ExpandCollapseButtonDetails',
@@ -310,11 +311,11 @@ export class OntarioAccordion {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'expand-collapse-button',
 				reflect: false,
 			},
 			accordionData: {
 				type: 'string',
+				attribute: 'accordion-data',
 				mutable: false,
 				complexType: {
 					original: 'string | Accordion[]',
@@ -340,11 +341,11 @@ export class OntarioAccordion {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'accordion-data',
 				reflect: false,
 			},
 			isOpen: {
 				type: 'boolean',
+				attribute: 'is-open',
 				mutable: false,
 				complexType: {
 					original: 'boolean',
@@ -359,12 +360,12 @@ export class OntarioAccordion {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'is-open',
 				reflect: false,
 				defaultValue: 'false',
 			},
 			language: {
 				type: 'string',
+				attribute: 'language',
 				mutable: true,
 				complexType: {
 					original: 'Language',
@@ -385,7 +386,6 @@ export class OntarioAccordion {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'language',
 				reflect: false,
 			},
 		};

package/dist/collection/components/ontario-aside/ontario-aside.js

@@ -142,6 +142,7 @@ export class OntarioAside {
 		return {
 			headingType: {
 				type: 'string',
+				attribute: 'heading-type',
 				mutable: true,
 				complexType: {
 					original: 'HeadingLevelOptions',
@@ -162,11 +163,11 @@ export class OntarioAside {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'heading-type',
 				reflect: false,
 			},
 			headingContentType: {
 				type: 'string',
+				attribute: 'heading-content-type',
 				mutable: true,
 				complexType: {
 					original: 'HeadingContentType',
@@ -187,12 +188,12 @@ export class OntarioAside {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'heading-content-type',
 				reflect: false,
 				defaultValue: "'string'",
 			},
 			headingContent: {
 				type: 'string',
+				attribute: 'heading-content',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -207,11 +208,11 @@ export class OntarioAside {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'heading-content',
 				reflect: false,
 			},
 			content: {
 				type: 'string',
+				attribute: 'content',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -231,11 +232,11 @@ export class OntarioAside {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'content',
 				reflect: false,
 			},
 			highlightColour: {
 				type: 'string',
+				attribute: 'highlight-colour',
 				mutable: true,
 				complexType: {
 					original: 'HighlightColourOptions',
@@ -256,7 +257,6 @@ export class OntarioAside {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'highlight-colour',
 				reflect: false,
 				defaultValue: "'teal'",
 			},

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.js

@@ -42,13 +42,13 @@ export class OntarioBackToTop {
 		return h(
 			'button',
 			{
-				'key': '28f085a23b68bb74b8874d03c900775fe5868ae7',
+				'key': '6c95d5c593c21175250e36c2439351b9909260c3',
 				'class': this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`,
 				'onClick': this.scrollToTop,
 				'aria-label': this.translations.backToTop.ariaLabel[`${this.language}`],
 			},
 			h('span', {
-				'key': '8f88357f7064378065119f52bfc7a081318094da',
+				'key': 'e3914db3602ff24f7c92e8926bfd208cf7b57e8b',
 				'aria-hidden': 'true',
 				'innerHTML': OntarioIconArrowUp,
 			}),
@@ -75,6 +75,7 @@ export class OntarioBackToTop {
 		return {
 			language: {
 				type: 'string',
+				attribute: 'language',
 				mutable: true,
 				complexType: {
 					original: 'Language',
@@ -95,7 +96,6 @@ export class OntarioBackToTop {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'language',
 				reflect: false,
 			},
 		};

package/dist/collection/components/ontario-badge/ontario-badge.css

@@ -96,3 +96,14 @@
 	background-color: #118847;
 	color: #ffffff;
 }
+
+.ontario-badge--white {
+	background-color: #ffffff;
+	color: #4d4d4d;
+	border: 0.0625rem solid #4d4d4d;
+}
+
+.ontario-badge--grey {
+	background-color: #cccccc;
+	color: #1a1a1a;
+}

package/dist/collection/components/ontario-badge/ontario-badge.js

@@ -98,7 +98,7 @@ export class OntarioBadge {
 		return h(
 			'span',
 			{
-				'key': '41e824c2aac3d3b8cbeff7a74bfc8bd1a09fc0ec',
+				'key': '9fec2518bba42350d3bb2f744ae831d0bbc73265',
 				'class': `ontario-badge ${BadgeColourToClass[this.colour]}`,
 				'aria-label': this.ariaLabelText,
 			},
@@ -125,10 +125,11 @@ export class OntarioBadge {
 		return {
 			colour: {
 				type: 'string',
+				attribute: 'colour',
 				mutable: true,
 				complexType: {
 					original: 'BadgeColour',
-					resolved: '"black" | "green" | "grey" | "light-teal" | "red" | "teal" | "yellow"',
+					resolved: '"black" | "darkGrey" | "green" | "grey" | "lightTeal" | "red" | "teal" | "white" | "yellow"',
 					references: {
 						BadgeColour: {
 							location: 'import',
@@ -145,12 +146,12 @@ export class OntarioBadge {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'colour',
 				reflect: false,
 				defaultValue: "'teal'",
 			},
 			label: {
 				type: 'string',
+				attribute: 'label',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -165,11 +166,11 @@ export class OntarioBadge {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'label',
 				reflect: false,
 			},
 			ariaLabelText: {
 				type: 'string',
+				attribute: 'aria-label-text',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -189,7 +190,6 @@ export class OntarioBadge {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'aria-label-text',
 				reflect: false,
 			},
 		};

package/dist/collection/components/ontario-badge/ontario-badge.types.js

@@ -2,12 +2,14 @@ import { retrieveEnumKeys } from '../../utils/helper/utils';
 export var BadgeColourToClass;
 (function (BadgeColourToClass) {
 	BadgeColourToClass['teal'] = 'ontario-badge--default-heavy';
-	BadgeColourToClass['light-teal'] = 'ontario-badge--default-light';
+	BadgeColourToClass['lightTeal'] = 'ontario-badge--default-light';
 	BadgeColourToClass['black'] = 'ontario-badge--neutral-heavy';
 	BadgeColourToClass['grey'] = 'ontario-badge--neutral-light';
 	BadgeColourToClass['red'] = 'ontario-badge--alert-heavy';
 	BadgeColourToClass['yellow'] = 'ontario-badge--warning-heavy';
 	BadgeColourToClass['green'] = 'ontario-badge--success-heavy';
+	BadgeColourToClass['white'] = 'ontario-badge--white';
+	BadgeColourToClass['darkGrey'] = 'ontario-badge--grey';
 })(BadgeColourToClass || (BadgeColourToClass = {}));
 export const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
 //# sourceMappingURL=ontario-badge.types.js.map

package/dist/collection/components/ontario-badge/ontario-badge.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-badge.types.js","sourceRoot":"","sources":["../../../src/components/ontario-badge/ontario-badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,CAAN,IAAY,kBAQX;AARD,WAAY,kBAAkB;IAC7B,2DAAqC,CAAA;IACrC,iEAA6C,CAAA;IAC7C,4DAAsC,CAAA;IACtC,2DAAqC,CAAA;IACrC,wDAAkC,CAAA;IAClC,6DAAuC,CAAA;IACvC,4DAAsC,CAAA;AACvC,CAAC,EARW,kBAAkB,KAAlB,kBAAkB,QAQ7B;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\t'light-teal' = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\n"]}
+{"version":3,"file":"ontario-badge.types.js","sourceRoot":"","sources":["../../../src/components/ontario-badge/ontario-badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,CAAN,IAAY,kBAUX;AAVD,WAAY,kBAAkB;IAC7B,2DAAqC,CAAA;IACrC,gEAA0C,CAAA;IAC1C,4DAAsC,CAAA;IACtC,2DAAqC,CAAA;IACrC,wDAAkC,CAAA;IAClC,6DAAuC,CAAA;IACvC,4DAAsC,CAAA;IACtC,oDAA8B,CAAA;IAC9B,sDAAgC,CAAA;AACjC,CAAC,EAVW,kBAAkB,KAAlB,kBAAkB,QAU7B;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\tlightTeal = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n\twhite = 'ontario-badge--white',\n\tdarkGrey = 'ontario-badge--grey',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\n"]}

package/dist/collection/components/ontario-blockquote/ontario-blockquote.js

@@ -67,20 +67,20 @@ export class OntarioBlockquote {
 		return h(
 			'blockquote',
 			{
-				key: '4d483df420706a95ac905f6225d44354c05ee957',
+				key: '2ee572aa7d71ef844a7bb1fa544962339b19b5d0',
 				class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
 			},
-			h('p', { key: 'fa9231db3034a5e33ef2d0fc7367b589e936655d' }, this.quoteState),
+			h('p', { key: 'edda8b3587f2eab9c8e06ee3fbc4162e980cc4a2' }, this.quoteState),
 			this.attribution &&
 				h(
 					'cite',
-					{ key: '3fc8c11981cc3e697f2cab6256358d4b10b18fef', class: 'ontario-blockquote__attribution' },
+					{ key: '968f3739eae9fa5d5ae4a88462b8b23bc911e5c1', class: 'ontario-blockquote__attribution' },
 					this.attribution,
 				),
 			this.byline &&
 				h(
 					'cite',
-					{ key: 'a69c1feec5a94db473f7195d785b966031e51843', class: 'ontario-blockquote__byline' },
+					{ key: 'd6a8cd59764e78c64d0163f6a30f18ec215e32e9', class: 'ontario-blockquote__byline' },
 					this.byline,
 				),
 		);
@@ -105,6 +105,7 @@ export class OntarioBlockquote {
 		return {
 			quote: {
 				type: 'string',
+				attribute: 'quote',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -119,11 +120,11 @@ export class OntarioBlockquote {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'quote',
 				reflect: false,
 			},
 			attribution: {
 				type: 'string',
+				attribute: 'attribution',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -138,11 +139,11 @@ export class OntarioBlockquote {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'attribution',
 				reflect: false,
 			},
 			byline: {
 				type: 'string',
+				attribute: 'byline',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -157,7 +158,6 @@ export class OntarioBlockquote {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'byline',
 				reflect: false,
 			},
 		};

package/dist/collection/components/ontario-button/ontario-button.js

@@ -177,7 +177,7 @@ export class OntarioButton {
 		return h(
 			'button',
 			{
-				'key': '885df269319782dd2971b9fb4f6521c8d292d771',
+				'key': '38158ea47d07a6da873acc3fba49ea3fecc534ce',
 				'ref': (el) => (this.buttonRef = el),
 				'type': this.htmlTypeState,
 				'class': this.getClass(),
@@ -210,6 +210,7 @@ export class OntarioButton {
 		return {
 			type: {
 				type: 'string',
+				attribute: 'type',
 				mutable: false,
 				complexType: {
 					original: 'ButtonType',
@@ -230,12 +231,12 @@ export class OntarioButton {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'type',
 				reflect: false,
 				defaultValue: "'secondary'",
 			},
 			htmlType: {
 				type: 'string',
+				attribute: 'html-type',
 				mutable: false,
 				complexType: {
 					original: 'HtmlType',
@@ -256,12 +257,12 @@ export class OntarioButton {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'html-type',
 				reflect: false,
 				defaultValue: "'button'",
 			},
 			label: {
 				type: 'string',
+				attribute: 'label',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -281,11 +282,11 @@ export class OntarioButton {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'label',
 				reflect: false,
 			},
 			ariaLabelText: {
 				type: 'string',
+				attribute: 'aria-label-text',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -305,11 +306,11 @@ export class OntarioButton {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'aria-label-text',
 				reflect: false,
 			},
 			elementId: {
 				type: 'string',
+				attribute: 'element-id',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -324,7 +325,6 @@ export class OntarioButton {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'element-id',
 				reflect: false,
 			},
 		};