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

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

@@ -1 +1 @@
-{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n];\n\nexport type HeaderColour = (typeof HeaderColours)[number];\n","@use 'sass:math';\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/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__card-type--horizontal & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateLayout();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class={this.getCardHeadingClasses()}>\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n];\n\nexport type HeaderColour = (typeof HeaderColours)[number];\n","@use 'sass:math';\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/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin-bottom: spacing.$spacing-7;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\tbackground: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__image-right & {\n\t\t\tborder-radius: globalVariables.$global-radius 0 0 0;\n\t\t}\n\n\t\t@at-root .ontario-card__image-left & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: math.percentage(math.div(2, 3));\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateLayout();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class={this.getCardHeadingClasses()}>\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-checkboxes.js

@@ -1,23 +1,23 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as Input } from './input.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
-import { v as validateLanguage, c as validateObjectExists, b as validatePropExists } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
-import { c as constructHintTextObject } from './hints.js';
-import { t as translations } from './global.i18n.js';
-import { E as ErrorMessage } from './error-message.js';
-import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
-import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
-import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
-import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
-import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
+import { p as proxyCustomElement, H, d as createEvent, h } from './p-846438ed.js';
+import { I as Input } from './p-7caacdde.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-3fa830a3.js';
+import { v as validateLanguage, c as validateObjectExists, b as validatePropExists } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { c as constructHintTextObject } from './p-e77d78ce.js';
+import { t as translations } from './p-a5331e15.js';
+import { E as ErrorMessage } from './p-8874216e.js';
+import { d as defineCustomElement$6 } from './p-9c61c9bc.js';
+import { d as defineCustomElement$5 } from './p-226df20b.js';
+import { d as defineCustomElement$4 } from './p-c13fee12.js';
+import { d as defineCustomElement$3 } from './p-1dc1dba8.js';
+import { d as defineCustomElement$2 } from './p-77545837.js';
 
 const ontarioCheckboxesCss =
 	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}:host{--checkbox-bg:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z\' fill=\'%231a1a1a\'/%3E%3Cpath d=\'M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z\' fill=\'%23fff\'/%3E%3C/svg%3E")}.ontario-checkboxes{margin-bottom:2.5rem;max-width:48rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 0 0 2rem;min-height:1.75rem;box-sizing:content-box}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 0 0 2.5rem;min-height:2rem}}.ontario-checkboxes__input{cursor:pointer;margin:0;position:absolute;top:-0.125rem;left:-0.125rem;opacity:0;width:36px;height:36px;z-index:0;-webkit-tap-highlight-color:transparent}@media screen and (max-width: 40em){.ontario-checkboxes__input{width:40px;height:40px}}.ontario-checkboxes__label{display:inline-block;cursor:pointer;line-height:1.5;margin:0.25rem 0;padding:0 1rem;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-checkboxes__label{margin:0.33rem 0}}.ontario-checkboxes__label:before{content:"";border:0.125rem solid #1a1a1a;border-radius:4px;position:absolute;top:0;left:0;width:2rem;height:2rem;transition:border 0.1s ease-in-out;display:block}@media screen and (min-width: 40em){.ontario-checkboxes__label:before{width:1.75rem;height:1.75rem}}.ontario-checkboxes__label:after{content:"";background-image:var(--checkbox-bg);background-repeat:no-repeat;height:1.875rem;width:1.875rem;position:absolute;top:0.0625rem;left:0.0625rem;right:0;bottom:0;opacity:0;display:block}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:2.125rem;width:2.125rem}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{-moz-box-shadow:0 0 0 0.25rem #009ADB;-webkit-box-shadow:0 0 0 0.25rem #009ADB;box-shadow:0 0 0 0.25rem #009ADB;outline:0.25rem solid transparent;transition:all 0.1s ease-in-out}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:after{opacity:1}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:before{background-color:#1a1a1a}.ontario-checkboxes__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-checkboxes__hint-expander{margin-top:1rem}}';
 const OntarioCheckboxesStyle0 = ontarioCheckboxesCss;
 
 const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCheckboxes extends HTMLElement {
+	class OntarioCheckboxes extends H {
 		constructor() {
 			super();
 			this.__registerHost();
@@ -27,23 +27,164 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 			this.checkboxOnFocus = createEvent(this, 'checkboxOnFocus', 7);
 			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
 			this.internals = this.attachInternals();
-			this.caption = undefined;
-			this.language = undefined;
-			this.name = undefined;
-			this.hintText = undefined;
-			this.hintExpander = undefined;
-			this.options = undefined;
-			this.required = false;
-			this.errorMessage = undefined;
-			this.customOnChange = undefined;
-			this.customOnBlur = undefined;
-			this.customOnFocus = undefined;
-			this.hintTextId = undefined;
-			this.captionState = undefined;
-			this.internalHintText = undefined;
-			this.internalHintExpander = undefined;
-			this.internalOptions = undefined;
 		}
+		get element() {
+			return this;
+		}
+		internals;
+		hintTextRef;
+		/**
+		 * The text to display for the checkbox legend.
+		 *
+		 * @example
+		 * <ontario-checkboxes
+		 *   caption='{
+		 *     "captionText": "Checkbox legend",
+		 *     "captionType": "heading",
+		 *   }
+		 *   ...>
+		 * </ontario-checkboxes>
+		 */
+		caption;
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
+		 */
+		language;
+		/**
+		 * The name for the checkboxes. The name value is used to reference form data after a form is submitted.
+		 */
+		name;
+		/**
+		 * Used to include the ontario-hint-text component for the checkbox group.
+		 * This is optional.
+		 */
+		hintText;
+		/**
+		 * Used to include the ontario-hint-expander component for the checkbox group.
+		 * This is passed in as an object with key-value pairs.
+		 *
+		 * This is optional.
+		 *
+		 * @example
+		 * <ontario-checkboxes
+		 *   caption='{
+		 *     "captionText": "Checkbox legend",
+		 *     "captionType": "heading",
+		 *   }
+		 *   name='ontario-checkboxes'
+		 *   options='[
+		 *		{
+		 *			"value": "checkbox-option-1",
+		 *			"label": "Checkbox option 1 label",
+		 *			"elementId": "checkbox-1"
+		 *		}
+		 *   }]'
+		 *   hint-expander='{
+		 *    "hint": "Hint expander for the checkbox group",
+		 *    "content": "Example hint expander content for the checkbox group"
+		 *   }'
+		 *   required="true"
+		 * >
+		 * </ontario-checkboxes>
+		 */
+		hintExpander;
+		/**
+		 * The options for the checkbox group.
+		 *
+		 * Each property will be passed in through an object in the options array.
+		 * This can either be passed in as an object directly (if using react), or as a string in HTML.
+		 * If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.
+		 *
+		 * In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.
+		 *
+		 * @example
+		 * <ontario-checkboxes
+		 *   caption='{
+		 *		"captionText": "Checkbox legend",
+		 *		"captionType": "heading",
+		 *   }
+		 *   name="ontario-checkboxes",
+		 *   hint-text="Hint text for the checkbox group."
+		 *   options='[
+		 *		{
+		 *			"value": "checkbox-option-1",
+		 *			"label": "Checkbox option 1 label"
+		 *			"elementId": "checkbox-1"
+		 *     },
+		 *     {
+		 *        "value": "checkbox-option-2",
+		 *        "label": "Checkbox option 2 label",
+		 * 		  "elementId": "checkbox-2",
+		 *	      "hintExpander": {
+		 *				"hint": "Hint expander for checkbox option 2",
+		 *              "content": "Example hint expander content for checkbox option 2"
+		 *        }
+		 *      }
+		 *   ]'
+		 *   required="true"
+		 * >
+		 * </ontario-checkboxes>
+		 */
+		options;
+		/**
+		 * This is used to determine whether the checkbox is required or not.
+		 * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.
+		 * If no prop is set, it will default to false (optional).
+		 */
+		required = false;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage;
+		/**
+		 * Used to add a custom function to the checkbox onChange event.
+		 */
+		customOnChange;
+		/**
+		 * Used to add a custom function to the checkbox onBlur event.
+		 */
+		customOnBlur;
+		/**
+		 * Used to add a custom function to the checkbox onFocus event.
+		 */
+		customOnFocus;
+		/**
+		 * Used for the `aria-describedby` value of the checkbox fieldset. This will match with the id of the hint text.
+		 */
+		hintTextId;
+		/**
+		 * Instantiate an InputCaption object for internal logic use
+		 */
+		captionState;
+		/**
+		 * The hint text options are re-assigned to the internalHintText array.
+		 */
+		internalHintText;
+		/**
+		 * The hint expander options are re-assigned to the internalHintExpander array.
+		 */
+		internalHintExpander;
+		/**
+		 * The options are re-assigned to the internalOptions array.
+		 */
+		internalOptions;
+		/**
+		 * Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed.
+		 */
+		checkboxOnChange;
+		/**
+		 * Emitted when a keyboard input event occurs when a checkbox option has lost focus.
+		 */
+		checkboxOnBlur;
+		/**
+		 * Emitted when a keyboard input event occurs when a checkbox option has gained focus.
+		 */
+		checkboxOnFocus;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		inputErrorOccurred;
 		/**
 		 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 		 */
@@ -152,37 +293,29 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 			this.updateCaptionState(this.caption);
 		}
 		broadcastInputErrorOccurredEvent() {
-			var _a;
 			// Emit event to notify anyone who wants to listen for errors occurring
-			this.inputErrorOccurred.emit({ errorMessage: (_a = this.errorMessage) !== null && _a !== void 0 ? _a : '' });
+			this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
 		}
 		/**
 		 * Function to handle checkbox events and the information pertaining to the checkbox to emit.
 		 */
 		handleEvent(event, eventType) {
-			var _a, _b, _c;
 			const input = event.target;
 			if (input) {
-				input.checked = (_a = input.checked) !== null && _a !== void 0 ? _a : '';
+				input.checked = input.checked ?? '';
 			}
 			// Update internalOptions checked state
-			const changedOption = this.internalOptions.find(
-				(x) => x.value === (input === null || input === void 0 ? void 0 : input.value),
-			);
-			if (changedOption)
-				changedOption.checked = !(changedOption === null || changedOption === void 0 ? void 0 : changedOption.checked);
+			const changedOption = this.internalOptions.find((x) => x.value === input?.value);
+			if (changedOption) changedOption.checked = !changedOption?.checked;
 			// Set the value within the form
-			(_c = (_b = this.internals) === null || _b === void 0 ? void 0 : _b.setFormValue) === null || _c === void 0
-				? void 0
-				: _c.call(
-						_b,
-						this.internalOptions
-							.filter((x) => !!x.checked)
-							.reduce((formData, currentValue) => {
-								formData.append(this.name, currentValue.value);
-								return formData;
-							}, new FormData()),
-				  );
+			this.internals?.setFormValue?.(
+				this.internalOptions
+					.filter((x) => !!x.checked)
+					.reduce((formData, currentValue) => {
+						formData.append(this.name, currentValue.value);
+						return formData;
+					}, new FormData()),
+			);
 			handleInputEvent(
 				event,
 				eventType,
@@ -203,8 +336,7 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 		 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.
 		 */
 		async componentDidLoad() {
-			var _a;
-			this.hintTextId = await ((_a = this.hintTextRef) === null || _a === void 0 ? void 0 : _a.getHintTextId());
+			this.hintTextId = await this.hintTextRef?.getHintTextId();
 		}
 		componentWillLoad() {
 			this.updateCaptionState(this.caption);
@@ -215,78 +347,77 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 			this.language = validateLanguage(this.language);
 		}
 		render() {
-			var _a;
 			const error = !!this.errorMessage;
 			return h(
 				'div',
 				{
-					key: '173d86874aa1ea64e9a73d000a0ed4fecbe57665',
+					key: '40b8689882fc1993311280af272536b2620a30ee',
 					class: `ontario-form-group ${error ? 'ontario-input--error' : ''}`,
 				},
 				h(
 					'fieldset',
 					{
-						'key': '532f87dc2c043df58bad6f40ce98853031a79986',
+						'key': 'cc26e4cbd27e10925bf047f7b1317dba76f2ce20',
 						'class': 'ontario-fieldset',
 						'aria-describedby': this.hintTextId,
 					},
 					this.captionState.getCaption(undefined, !!this.internalHintExpander),
 					this.internalHintText &&
 						h('ontario-hint-text', {
+							key: '9165f44c344f7b68c0fc5b89713f80c58e63ff4e',
 							hint: this.internalHintText.hint,
 							hintContentType: this.internalHintText.hintContentType,
 							ref: (el) => (this.hintTextRef = el),
 						}),
 					h(ErrorMessage, {
-						key: '459366e25c9fe52c41708d9dfc62f800b5642689',
+						key: '72db50057e838ca5c5165d844253d76fced6363b',
 						message: this.errorMessage,
 						error: error,
 					}),
 					h(
 						'div',
-						{ key: '0fe1efdeff27222064e1979cdc1daf0ae55b5547', class: 'ontario-checkboxes' },
-						(_a = this.internalOptions) === null || _a === void 0
-							? void 0
-							: _a.map((checkbox) =>
+						{ key: '0fc81de1a57f26d53508e0a4ad6d8e0818cd2a67', class: 'ontario-checkboxes' },
+						this.internalOptions?.map((checkbox) =>
+							h(
+								'div',
+								{ class: 'ontario-checkboxes__item' },
+								h(Input, {
+									className: 'ontario-checkboxes__input',
+									id: checkbox.elementId,
+									name: this.name,
+									type: 'checkbox',
+									value: checkbox.value,
+									required: !!this.required,
+									checked: !!checkbox.checked,
+									onChange: (e) => this.handleEvent(e, EventType.Change),
+									onBlur: (e) => this.handleEvent(e, EventType.Blur),
+									onFocus: (e) => this.handleEvent(e, EventType.Focus),
+								}),
+								h(
+									'label',
+									{ class: 'ontario-checkboxes__label', htmlFor: checkbox.elementId },
+									checkbox.label,
+									checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true),
+								),
+								checkbox.hintExpander &&
 									h(
 										'div',
-										{ class: 'ontario-checkboxes__item' },
-										h(Input, {
-											className: 'ontario-checkboxes__input',
-											id: checkbox.elementId,
-											name: this.name,
-											type: 'checkbox',
-											value: checkbox.value,
-											required: !!this.required,
-											checked: !!checkbox.checked,
-											onChange: (e) => this.handleEvent(e, EventType.Change),
-											onBlur: (e) => this.handleEvent(e, EventType.Blur),
-											onFocus: (e) => this.handleEvent(e, EventType.Focus),
+										{ class: 'ontario-checkboxes__hint-expander' },
+										h('ontario-hint-expander', {
+											'hint': checkbox.hintExpander.hint,
+											'content': checkbox.hintExpander.content,
+											'hintContentType': checkbox.hintExpander.hintContentType,
+											'input-exists': true,
 										}),
-										h(
-											'label',
-											{ class: 'ontario-checkboxes__label', htmlFor: checkbox.elementId },
-											checkbox.label,
-											checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true),
-										),
-										checkbox.hintExpander &&
-											h(
-												'div',
-												{ class: 'ontario-checkboxes__hint-expander' },
-												h('ontario-hint-expander', {
-													'hint': checkbox.hintExpander.hint,
-													'content': checkbox.hintExpander.content,
-													'hintContentType': checkbox.hintExpander.hintContentType,
-													'input-exists': true,
-												}),
-											),
 									),
-							  ),
+							),
+						),
 						this.internalHintExpander &&
 							h(
 								'div',
-								{ class: 'ontario-checkboxes__hint-expander' },
+								{ key: '30d16ee358c25a5bab14cda2c9ba2dc6e014b443', class: 'ontario-checkboxes__hint-expander' },
 								h('ontario-hint-expander', {
+									'key': '6f0f73ab0f2bf7504ea461dfa1be3f9547ac13cf',
 									'hint': this.internalHintExpander.hint,
 									'content': this.internalHintExpander.content,
 									'hintContentType': this.internalHintExpander.hintContentType,
@@ -300,9 +431,6 @@ const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
 		static get formAssociated() {
 			return true;
 		}
-		get element() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				hintText: ['parseHintText'],