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

package/dist/components/ontario-callout.js

@@ -1,16 +1,15 @@
-import { p as proxyCustomElement, H } from './p-846438ed.js';
+import { p as proxyCustomElement, H } from './index.js';
 import {
 	i as isValidHeadingLevel,
-	H as HeadingContentTypes,
 	a as isValidHighlightColour,
 	g as generateCalloutAside,
-} from './p-7b0a81fd.js';
-import { a as validateValueAgainstArray } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
+	H as HeadingContentTypes,
+} from './p-dXtLd1df.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
 
 const ontarioCalloutCss =
 	'@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-callout{border-left:0.25rem solid #367A76;padding:1.5rem;margin:2rem 0 2.5rem 0;background-color:#f2f2f2}.ontario-callout *{max-width:48rem}.ontario-callout *:last-child{margin-bottom:0.5rem}.ontario-callout__title{margin:0 0 1rem}.ontario-border-highlight--teal{border-color:#367A76 !important}.ontario-border-highlight--gold{border-color:#86743D !important}.ontario-border-highlight--yellow{border-color:#8A600D !important}.ontario-border-highlight--taupe{border-color:#7B725C !important}.ontario-border-highlight--green{border-color:#2B8737 !important}.ontario-border-highlight--lime{border-color:#5F8129 !important}.ontario-border-highlight--sky{border-color:#1080A6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278F !important}';
-const OntarioCalloutStyle0 = ontarioCalloutCss;
 
 const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioCallout extends H {
@@ -141,7 +140,7 @@ const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioCalloutStyle0;
+			return ontarioCalloutCss;
 		}
 	},
 	[
@@ -182,5 +181,6 @@ const OntarioCallout = OntarioCallout$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { OntarioCallout, defineCustomElement };
+//# sourceMappingURL=ontario-callout.js.map
 
 //# sourceMappingURL=ontario-callout.js.map

package/dist/components/ontario-callout.js.map

@@ -1 +1 @@
-{"file":"ontario-callout.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,0vJAA0vJ,CAAC;AACrxJ,6BAAe,iBAAiB;;MCqBnBA,gBAAc;;;;;;;;;IAID,WAAW,CAAuB;;;;IAKlC,kBAAkB,GAAuB,QAAQ,CAAC;;;;IAKnE,cAAc,CAAU;;;;;;;;;IAUxB,OAAO,CAAU;;;;IAKA,eAAe,GAA4B,MAAM,CAAC;;;;;IAO3E,mBAAmB;QAClB,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACvB,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW,CAAC;YAEnE,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO,OAAO;iBACZ,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC;iBACrD,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,qBAAqB,CAAC;iBACvC,cAAc,CAAC,4FAA4F,CAAC;iBAC5G,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASD,0BAA0B;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC,CAAC;QACxF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB,CAAC;SAC/B;aAAM;YACN,OAAO,IAAI,CAAC,eAAe,EAAE,CAAC;SAC9B;KACD;;;;;;IAQD,uBAAuB;QACtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe,CAAC;iBACzE;gBACJ,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;gBAC1C,OAAO;qBACL,kBAAkB,EAAE;qBACpB,gBAAgB,CAAC,oBAAoB,IAAI,CAAC,eAAe,GAAG,CAAC;qBAC7D,cAAc,CAAC,KAAK,CAAC;qBACrB,gBAAgB,CAAC,qBAAqB,CAAC;qBACvC,cAAc,CACd,oGAAoG,CACpG;qBACA,YAAY,EAAE,CAAC;aACjB;SACD;;QAGD,OAAO,MAAM,CAAC;KACd;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,sBAAsB,CAAC;aACxC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,qBAAqB,CAAC;aACvC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE;KAC5C;IAED,iBAAiB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAClC;IAED,MAAM;QACL,OAAO,oBAAoB,CAC1B,SAAS,EACT,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCallout"],"sources":["src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\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(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-callout.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,0vJAA0vJ;;MCsBvwJA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;AAC1B;;AAEG;AACsB,IAAA,WAAW;AAEpC;;AAEG;IACsB,kBAAkB,GAAuB,QAAQ;AAE1E;;AAEG;AACK,IAAA,cAAc;AAEtB;;;;;;;AAOG;AACK,IAAA,OAAO;AAEf;;AAEG;IACsB,eAAe,GAA4B,MAAM;AAE1E;;;AAGG;IAEH,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW;AAElE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;AACzC,YAAA,OAAO;AACL,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAgB,aAAA,EAAA,IAAI,CAAC,WAAW,GAAG;iBACpD,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,qBAAqB;iBACtC,cAAc,CAAC,4FAA4F;AAC3G,iBAAA,YAAY,EAAE;;;AAIlB;;;;;AAKG;IAEH,0BAA0B,GAAA;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;QACvF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB;;aACxB;AACN,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;;AAI/B;;;;AAIG;IAEH,uBAAuB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe;iBACxE;AACJ,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,eAAe,GAAG;qBAC5D,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,qBAAqB;qBACtC,cAAc,CACd,oGAAoG;AAEpG,qBAAA,YAAY,EAAE;;;;AAKlB,QAAA,OAAO,MAAM;;AAGd;;;AAGG;IACK,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,sBAAsB;aACvC,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,qBAAqB;aACtC,cAAc,CAAC,kCAAkC;aACjD,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,iCAAiC;aAChD,gBAAgB,CAAC,UAAU;aAC3B,cAAc,CAAC,aAAa;AAC5B,aAAA,YAAY,EAAE;AAChB,QAAA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ;;IAG3C,iBAAiB,GAAA;QAChB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,0BAA0B,EAAE;;IAGlC,MAAM,GAAA;QACL,OAAO,oBAAoB,CAC1B,SAAS,EACT,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCallout","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\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(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,9 +1,8 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
 
 const ontarioCardCollectionCss =
-	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;gap:2rem;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 1.5rem)}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1rem)}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.33rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:100%}}';
-const OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
+	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;column-gap:2rem;row-gap:0;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 1.5rem)}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1rem)}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.33rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:100%}}';
 
 const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioCardCollection extends H {
@@ -66,8 +65,8 @@ const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'ul',
-				{ key: '9ff47cd840a551719ce0db9cbb89b6e3186bfe31', class: this.getClass() },
-				h('slot', { key: '4396152d6d66e79a77206bd2aa2a8e2115614afd' }),
+				{ key: '8991908dd16580e556964b37009bb25ad547232a', class: this.getClass() },
+				h('slot', { key: 'f75f012338edd1a94ed1c5b3d197a9b909b36250' }),
 			);
 		}
 		static get watchers() {
@@ -76,7 +75,7 @@ const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioCardCollectionStyle0;
+			return ontarioCardCollectionCss;
 		}
 	},
 	[
@@ -112,5 +111,6 @@ const OntarioCardCollection = OntarioCardCollection$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { OntarioCardCollection, defineCustomElement };
+//# sourceMappingURL=ontario-card-collection.js.map
 
 //# sourceMappingURL=ontario-card-collection.js.map

package/dist/components/ontario-card-collection.js.map

@@ -1 +1 @@
-{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,6zBAA6zB,CAAC;AAC/1B,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;;;;;;;;IAQzB,WAAW,GAAgB,CAAC,CAAC;;;;;;IAOpB,gBAAgB,CAAS;;;;;;IAQ1C,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\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/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: spacing.$spacing-6;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 1.5rem);\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1rem);\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.33rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? '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 number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,80BAA80B;;MCSl2BA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;AAGjC;;;;AAIG;IACK,WAAW,GAAgB,CAAC;AAEpC;;;;AAIG;AACc,IAAA,gBAAgB;AAEjC;;;;AAIG;IAEH,mBAAmB,GAAA;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;AACnF,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,iBAAiB;iBAClC,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,kBAAkB;AACnC,iBAAA,cAAc,CACd,CACC,EAAA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E;iBAE5E,gBAAgB,CAAC,KAAK;iBACtB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAChB,YAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC;;aACnB;AACN,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;;;AAI1C;;AAEG;IACK,QAAQ,GAAA;QACf,OAAO;;AAEqC,4CAAA,EAAA,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE;;IAGX,iBAAiB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;;IAG3B,MAAM,GAAA;AACL,QAAA,QACC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EACzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\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/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tcolumn-gap: spacing.$spacing-6;\n\trow-gap: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 1.5rem);\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1rem);\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.33rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? '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 number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-card.js

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { a as validateValueAgainstArray } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
-import { p as printArray } from './p-083804e2.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { p as printArray } from './p-DQi-JVyL.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
 
-const Layouts = ['vertical', 'horizontal'];
-const HeaderColours = [
+const layoutDirectionDefinitions = ['vertical', 'horizontal'];
+const headerColourDefinitions = [
 	'dark-accent',
 	'light-accent',
 	'light-gold',
@@ -33,9 +33,10 @@ const HeaderColours = [
 	'magenta',
 ];
 
+const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'];
+
 const ontarioCardCss =
 	'.ontario-card__heading{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-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin-bottom:2.5rem;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer;background:#FFFFFF}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal .ontario-card--image-true{margin-top:0}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal .ontario-card__heading{border-radius:0}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF;max-width:none}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card--image-true .ontario-card__heading{border-radius:0}.ontario-card__image-right .ontario-card--image-true .ontario-card__heading{border-radius:4px 0 0 0}.ontario-card__image-left .ontario-card--image-true .ontario-card__heading{border-radius:0 4px 0 0}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__background--light-accent{background-color:#f2f2f2}.ontario-card__heading--light-accent{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--dark-accent{background-color:#1a1a1a}.ontario-card__heading--dark-accent{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-gold{background-color:#F0E7CC}.ontario-card__heading--light-gold{background-color:#F0E7CC;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-yellow{background-color:#F8E5C3}.ontario-card__heading--light-yellow{background-color:#F8E5C3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-taupe{background-color:#EBE7DB}.ontario-card__heading--light-taupe{background-color:#EBE7DB;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-green{background-color:#D1EFD4}.ontario-card__heading--light-green{background-color:#D1EFD4;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-lime{background-color:#DDEDC7}.ontario-card__heading--light-lime{background-color:#DDEDC7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-teal{background-color:#CFEDED}.ontario-card__heading--light-teal{background-color:#CFEDED;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-sky{background-color:#C5EEFA}.ontario-card__heading--light-sky{background-color:#C5EEFA;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-purple{background-color:#F1E3F2}.ontario-card__heading--light-purple{background-color:#F1E3F2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-orange{background-color:#FEE1D9}.ontario-card__heading--light-orange{background-color:#FEE1D9;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-red{background-color:#FFE0E2}.ontario-card__heading--light-red{background-color:#FFE0E2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-magenta{background-color:#FEDFF0}.ontario-card__heading--light-magenta{background-color:#FEDFF0;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--gold{background-color:#CBA52E}.ontario-card__heading--gold{background-color:#CBA52E;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--yellow{background-color:#FCAF17}.ontario-card__heading--yellow{background-color:#FCAF17;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--taupe{background-color:#C1B28F}.ontario-card__heading--taupe{background-color:#C1B28F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--green{background-color:#39B54A}.ontario-card__heading--green{background-color:#39B54A;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--lime{background-color:#8DC63F}.ontario-card__heading--lime{background-color:#8DC63F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--teal{background-color:#49A7A2}.ontario-card__heading--teal{background-color:#49A7A2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--sky{background-color:#00B2E3}.ontario-card__heading--sky{background-color:#00B2E3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--purple{background-color:#B975B7}.ontario-card__heading--purple{background-color:#B975B7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--orange{background-color:#F15A22}.ontario-card__heading--orange{background-color:#F15A22;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--red{background-color:#F0454B}.ontario-card__heading--red{background-color:#F0454B;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--magenta{background-color:#F03093}.ontario-card__heading--magenta{background-color:#F03093;padding-top:1rem;padding-bottom:1rem}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6666666667%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
-const OntarioCardStyle0 = ontarioCardCss;
 
 const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioCard extends H {
@@ -59,12 +60,37 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 *	>
 		 */
 		label;
+		/**
+		 * The heading level that the label will be rendered as.
+		 *
+		 * @example
+		 *	<ontario-card
+		 *		heading-level="h4"
+		 *		label="Card Title 1"
+		 *	>
+		 */
+		headingLevel = 'h2';
 		/**
 		 * Image to be displayed within the card image container.
 		 *
 		 * This is optional.
 		 */
 		image;
+		/**
+		 * Alt text for the card's image.
+		 *
+		 * This is optional prop, but may be required for an
+		 * image due to accessibility requirements.
+		 *
+		 * You can find guidance on when to add alt text to an image
+		 * on the Ontario.ca web content editing guide.
+		 *
+		 * https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility
+		 *
+		 * Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup
+		 * for decorative images. If left as undefined, the alt attribute will not render in markup.
+		 */
+		imageAltText = '';
 		/**
 		 * Text to be displayed within the card description container.
 		 *
@@ -78,12 +104,12 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 */
 		cardLink;
 		/**
-		 * The layout oritnetation of the card.
+		 * The layout direction/orientation of the card.
 		 *
 		 * If no type is passed, it will default to 'vertical'.
 		 *
 		 */
-		layout = 'vertical';
+		layoutDirection = 'vertical';
 		/**
 		 * Set the card's header colour.
 		 *
@@ -131,75 +157,108 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 *
 		 */
 		ariaLabelText;
+		cardState = {
+			headerColour: undefined,
+			headingLevel: undefined,
+			layoutDirection: undefined,
+		};
 		/**
-		 * Mutable variable, for internal use only.
-		 * Set the card's layout depending on validation result.
+		 * Watch for changes to the `layoutDirection` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).
+		 * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.
 		 */
-		layoutState;
+		validateLayoutDirection() {
+			const isValid =
+				this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);
+			if (!isValid) {
+				this.printPropWarning(
+					'layout-direction',
+					'<ontario-card>',
+					this.layoutDirection,
+					layoutDirectionDefinitions,
+					'vertical',
+				);
+				this.updateCardState('layoutDirection', 'vertical');
+				return;
+			}
+			this.updateCardState('layoutDirection', this.layoutDirection);
+		}
 		/**
-		 * Watch for changes to the `layout` property for validation purposes.
+		 * Watch for changes to the `headingLevel` property for validation purposes.
 		 *
-		 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
-		 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
+		 * If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).
+		 *
+		 * If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.
 		 */
-		validateLayout() {
-			if (this.layout) {
-				const isValid = validateValueAgainstArray(this.layout, Layouts);
-				if (isValid) {
-					this.layoutState = this.layout;
-				} else {
-					this.warnDefaultLayout();
-					this.layoutState = 'vertical';
-				}
+		validateHeadingLevel() {
+			const isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);
+			if (!isValid) {
+				this.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');
+				this.updateCardState('headingLevel', 'h2');
+				return;
 			}
+			this.updateCardState('headingLevel', this.headingLevel);
 		}
 		/**
 		 * Watch for changes to the `headerColour` property for validation purposes.
 		 *
-		 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+		 * If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).
 		 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 		 */
 		validateHeaderColour() {
-			if (this.headerColour) {
-				const isValid = validateValueAgainstArray(this.headerColour, HeaderColours);
-				if (!isValid) {
-					this.warnDefaultHeaderColour();
-					this.headerColour = '';
-				}
+			const isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);
+			if (!isValid && this.headerColour !== undefined) {
+				this.printPropWarning(
+					'header-colour',
+					'<ontario-card>',
+					this.headerColour,
+					headerColourDefinitions,
+					'undefined',
+				);
+				this.updateCardState('headerColour', undefined);
+				return;
 			}
+			this.updateCardState('headerColour', this.headerColour);
 		}
 		/**
-		 * Print the invalid `layout` prop warning message.
+		 * Print an invalid prop warning message.
+		 *
+		 * @param {string} propName - Name of the prop
+		 * @param {string} component - Component the error is on e.g. <ontario-card>
+		 * @param {any} propValue - Value of the prop
+		 * @param {readonly any[]} acceptableValues  - readonly array of acceptable prop values
+		 * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to
 		 */
-		warnDefaultLayout() {
+		printPropWarning(propName, component, propValue, acceptableValues, defaultValue) {
 			const message = new ConsoleMessageClass();
 			message
 				.addDesignSystemTag()
-				.addMonospaceText(' layout ')
+				.addMonospaceText(` ${propName} `)
 				.addRegularText('on')
-				.addMonospaceText(' <ontario-card> ')
-				.addRegularText('was set to an invalid layout; only ')
-				.addMonospaceText(printArray([...Layouts]))
-				.addRegularText(' are supported. The default layout')
-				.addMonospaceText(' vertical ')
+				.addMonospaceText(` ${component} `)
+				.addRegularText('was set to an invalid value of ')
+				.addMonospaceText(` ${propValue} `)
+				.addRegularText('. Only ')
+				.addMonospaceText(printArray([...acceptableValues]))
+				.addRegularText(' are supported values. The default value of')
+				.addMonospaceText(` ${defaultValue} `)
 				.addRegularText('is assumed.')
 				.printMessage();
 		}
 		/**
-		 * Print the invalid `headerColour` prop warning message.
+		 * Update a key within the State Object with a value.
+		 *
+		 * Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.
+		 * If only the corresponding object key/value is updated, corresponding render changes may not happen.
+		 *
+		 * @param {keyof CardState} key - Should match a key found within `CardState`.
+		 * @param {any} value - Should match the value type associated to the key within `CardState`.
 		 */
-		warnDefaultHeaderColour() {
-			const message = new ConsoleMessageClass();
-			message
-				.addDesignSystemTag()
-				.addMonospaceText(' header-colour ')
-				.addRegularText('on')
-				.addMonospaceText(' <ontario-card> ')
-				.addRegularText('was set to an invalid colour; only ')
-				.addMonospaceText(printArray([...HeaderColours]))
-				.addRegularText(' are supported. ')
-				.addRegularText('No colour is assumed as the default.')
-				.printMessage();
+		updateCardState(key, value) {
+			const cardStateCopy = { ...this.cardState };
+			cardStateCopy[key] = value;
+			this.cardState = cardStateCopy;
 		}
 		/**
 		 * Returns the top level classes of the card.
@@ -208,9 +267,9 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 */
 		getCardClasses() {
 			const baseClass =
-				this.layoutState === 'horizontal'
-					? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
-					: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;
+				this.cardState.layoutDirection === 'horizontal'
+					? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+					: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.cardState.layoutDirection}`;
 			const descriptionClass = this.description ? '' : ' ontario-card__description-false';
 			const backgroundClass =
 				this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
@@ -223,10 +282,9 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 */
 		getCardHeadingClasses() {
 			const baseClass = 'ontario-card__heading';
-			const backgroundClass =
-				this.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)
-					? `ontario-card__heading--${this.headerColour}`
-					: '';
+			const backgroundClass = this.cardState.headerColour
+				? `ontario-card__heading--${this.cardState.headerColour}`
+				: '';
 			return `${baseClass} ${backgroundClass}`.trim();
 		}
 		/**
@@ -243,27 +301,29 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
 		 */
 		componentWillLoad() {
-			this.validateLayout();
+			this.validateLayoutDirection();
+			this.validateHeadingLevel();
 			this.validateHeaderColour();
 		}
 		render() {
 			return h(
 				'li',
-				{ key: '690b3ae2a75c4b92e080ffa3c262af01fec21952', class: this.getCardClasses() },
+				{ key: '2491546d5c8cd802237264110f6af2635c9fd2f3', class: this.getCardClasses() },
 				this.image &&
 					h(
 						'div',
-						{ key: 'f384f101eca056d027276b2f7a1f9e440304cec3', class: 'ontario-card__image-container' },
+						{ key: 'e2c66a5844d5dc92422bb40e7df02dec8951c574', class: 'ontario-card__image-container' },
 						h(
 							'a',
 							{
-								'key': 'bc4a3b33c10ed1491ad26fd3e6a3e6053d06eb07',
+								'key': '14146da6cc4600e8ab54bd246e0655d3828cdae0',
 								'href': this.getHref(),
 								'aria-label': this.ariaLabelText,
 							},
 							h('img', {
-								key: '4918a0bf517f85035c5c5ee8f26fb3eb3398853e',
+								key: '7b80dc691d2a323b5d0078c9c7ef93e96b073367',
 								class: 'ontario-card__image',
+								alt: this.imageAltText,
 								src: this.image,
 							}),
 						),
@@ -271,39 +331,32 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 				h(
 					'div',
 					{
-						key: '528e7f220a8829e4795ac442e46fa55d2482eb98',
+						key: '78dd72f3673fc4528660fc24361df6509ed8e4b9',
 						class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 					},
 					h(
-						'h2',
-						{ key: '372355c20bcd85c98a663ffa3e8d19a4cfb30a46', class: this.getCardHeadingClasses() },
-						h(
-							'a',
-							{
-								'key': '7675fa500550255eafdea15078d3b196e32e3033',
-								'href': this.getHref(),
-								'aria-label': this.ariaLabelText,
-							},
-							this.label,
-						),
+						this.cardState.headingLevel, //tag
+						{ className: this.getCardHeadingClasses() }, //attributes
+						h('a', { 'href': this.getHref(), 'aria-label': this.ariaLabelText }, this.label),
 					),
 					this.description &&
 						h(
 							'div',
-							{ key: 'cd1492211c29568919aee9996fd167daea1806b1', class: 'ontario-card__description' },
-							h('p', { key: 'b638a626ae69888509b3cf9d194668097890580c' }, this.description),
+							{ key: 'f7dad07c4e39806379e3cdbd63d4edcc913859f9', class: 'ontario-card__description' },
+							h('p', { key: 'ae429b791a870a174ad39610fd12d426fdb382cd' }, this.description),
 						),
 				),
 			);
 		}
 		static get watchers() {
 			return {
-				layout: ['validateLayout'],
+				layoutDirection: ['validateLayoutDirection'],
+				headingLevel: ['validateHeadingLevel'],
 				headerColour: ['validateHeaderColour'],
 			};
 		}
 		static get style() {
-			return OntarioCardStyle0;
+			return ontarioCardCss;
 		}
 	},
 	[
@@ -311,19 +364,22 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		'ontario-card',
 		{
 			label: [1],
+			headingLevel: [1, 'heading-level'],
 			image: [1],
+			imageAltText: [1, 'image-alt-text'],
 			description: [1],
 			cardLink: [1, 'card-link'],
-			layout: [1],
+			layoutDirection: [1, 'layout-direction'],
 			headerColour: [1, 'header-colour'],
 			horizontalImagePositionType: [1, 'horizontal-image-position-type'],
 			horizontalImageSizeType: [1, 'horizontal-image-size-type'],
 			ariaLabelText: [1, 'aria-label-text'],
-			layoutState: [32],
+			cardState: [32],
 		},
 		undefined,
 		{
-			layout: ['validateLayout'],
+			layoutDirection: ['validateLayoutDirection'],
+			headingLevel: ['validateHeadingLevel'],
 			headerColour: ['validateHeaderColour'],
 		},
 	],
@@ -348,5 +404,6 @@ const OntarioCard = OntarioCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { OntarioCard, defineCustomElement };
+//# sourceMappingURL=ontario-card.js.map
 
 //# sourceMappingURL=ontario-card.js.map